{"id":1445,"date":"2023-12-04T12:10:11","date_gmt":"2023-12-04T12:10:11","guid":{"rendered":"https:\/\/megawin.be\/?page_id=1445"},"modified":"2023-12-04T12:39:08","modified_gmt":"2023-12-04T12:39:08","slug":"megawinapp-simulation","status":"publish","type":"page","link":"https:\/\/megawin.be\/nl\/megawinapp-simulation\/","title":{"rendered":"MegaWin APP Simulation"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]\n<style>\n  .phone-frame {\n    width: 300px; \/* Ajustez \u00e0 la taille de votre image *\/\n    height: 600px; \/* Ajustez \u00e0 la taille de votre image *\/\n    border: 16px solid black;\n    border-radius: 36px;\n    \n    position: relative; \/* Permet de positionner les zones absolument par rapport \u00e0 ce cadre *\/\n    background-size: cover;\n    background-position: center center;\n  }\n\n  .clickable-area {\n    position: absolute;\n    cursor: pointer;\n    \/* Les dimensions et positions seront ajust\u00e9es selon les zones *\/\n  }\n\n  \/* Style invisible pour les zones cliquables *\/\n  .clickable-area {\n    background-color: rgba(255, 255, 255, 0.2); \/* Semi-transparent pour le d\u00e9veloppement *\/\n    \/\/border: 1px solid red; \/* Pour visualiser les zones pendant le d\u00e9veloppement *\/\n  }\n<\/style>\n\n<div id=\"phone-frame\" class=\"phone-frame\" style=\"background-image: url('chemin_vers_votre_image_initiale.jpg');\">\n  <!-- Les zones cliquables seront ajout\u00e9es ici dynamiquement -->\n<\/div>\n<script>\n  \/\/ D\u00e9finition des \u00e9crans et des zones cliquables\n  var screens = {\n    'ecran1': {\n      'backgroundImage': 'https:\/\/megawin.be\/megawinapp_photo_simulateur\/home.jpg',\n      'zones': [\n        { 'left': '0px', 'top': '75px', 'width': '100%', 'height': '45px', 'action': 'ecran_fam1' },\n\t\t\n\t\t{ 'left': '0px', 'top': '130px', 'width': '100%', 'height': '45px', 'action': 'xxxxxx' },\n\t\t{ 'left': '0px', 'top': '185px', 'width': '100%', 'height': '45px', 'action': 'xxxxxx' },\n\t\t{ 'left': '0px', 'top': '240px', 'width': '100%', 'height': '45px', 'action': 'xxxxxx' },\n\t\t{ 'left': '0px', 'top': '295px', 'width': '100%', 'height': '45px', 'action': 'xxxxxx' },\n\t\t\t\n        \/\/ Autres zones pour ecran1\n      ]\n    },\n    'ecran_fam1': {\n      'backgroundImage': 'https:\/\/megawin.be\/megawinapp_photo_simulateur\/fam1.jpg',\n      'zones': [\n        { 'left': '0px', 'top': '140px', 'width': '100%', 'height': '45px', 'action': 'ecran_fam2' },\n\t\t \n\n\n\n\n\n\n\t\t { 'left': '70px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran1' },\n\t\t { 'left': '125px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_fam1' },\n\t\t { 'left': '180px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_favoris' },\n\t\t { 'left': '233px', 'top': '45px', 'width': '30px', 'height': '25px', 'action': 'ecran_panier' },\n\n\t\t\/*\n\t\t { 'left': '0px', 'top': '130px', 'width': '100%', 'height': '45px', 'action': 'xxxxxx' },\n\t\t  { 'left': '0px', 'top': '130px', 'width': '100%', 'height': '45px', 'action': 'xxxxxx' },\n\t\t   { 'left': '0px', 'top': '130px', 'width': '100%', 'height': '45px', 'action': 'xxxxxx' },\n\t\t    { 'left': '0px', 'top': '130px', 'width': '100%', 'height': '45px', 'action': 'xxxxxx' },\n\t\t*\/\n\t\t\n        \/\/ Autres zones pour ecran2\n      ]\n    },\n\t\n\t\n\t\n\t 'ecran_fam2': {\n      'backgroundImage': 'https:\/\/megawin.be\/megawinapp_photo_simulateur\/fam2.jpg',\n      'zones': [\n        { 'left': '0px', 'top': '140px', 'width': '100%', 'height': '45px', 'action': 'listing_produit' },\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t { 'left': '70px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran1' },\n\t\t { 'left': '125px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_fam1' },\n\t\t { 'left': '180px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_favoris' },\n\t\t { 'left': '233px', 'top': '45px', 'width': '30px', 'height': '25px', 'action': 'ecran_panier' },\n\n        \/\/ Autres zones pour ecran2\n      ]\n    },\n\t\n\t\n\t 'listing_produit': {\n      'backgroundImage': 'https:\/\/megawin.be\/megawinapp_photo_simulateur\/listing_produit.jpg',\n      'zones': [\n        { 'left': '95px', 'top': '190px', 'width': '100px', 'height': '30px', 'action': 'bouton_commander' },\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t { 'left': '70px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran1' },\n\t\t { 'left': '125px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_fam1' },\n\t\t { 'left': '180px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_favoris' },\n\t\t { 'left': '233px', 'top': '45px', 'width': '30px', 'height': '25px', 'action': 'ecran_panier' },\n\n        \/\/ Autres zones pour ecran2\n      ]\n    },\n\t\n\t\n\t 'bouton_commander': {\n      'backgroundImage': 'https:\/\/megawin.be\/megawinapp_photo_simulateur\/bouton_commander.jpg',\n      'zones': [\n        { 'left': '165px', 'top': '190px', 'width': '35px', 'height': '30px', 'action': 'bouton_commander_plus' },\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t { 'left': '70px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran1' },\n\t\t { 'left': '125px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_fam1' },\n\t\t { 'left': '180px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_favoris' },\n\t\t { 'left': '233px', 'top': '45px', 'width': '30px', 'height': '25px', 'action': 'ecran_panier' },\n\n        \/\/ Autres zones pour ecran2\n      ]\n    },\n\t\n\t\t 'bouton_commander_plus': {\n      'backgroundImage': 'https:\/\/megawin.be\/megawinapp_photo_simulateur\/bouton_commander_plus.jpg',\n      'zones': [\n        { 'left': '85px', 'top': '190px', 'width': '35px', 'height': '30px', 'action': 'bouton_commander_moins' },\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t { 'left': '70px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran1' },\n\t\t { 'left': '125px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_fam1' },\n\t\t { 'left': '180px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_favoris' },\n\t\t { 'left': '233px', 'top': '45px', 'width': '30px', 'height': '25px', 'action': 'ecran_panier' },\n\n        \/\/ Autres zones pour ecran2\n      ]\n    },\n\t\t 'bouton_commander_moins': {\n      'backgroundImage': 'https:\/\/megawin.be\/megawinapp_photo_simulateur\/bouton_commander_moins.jpg',\n      'zones': [\n        { 'left': '85px', 'top': '190px', 'width': '35px', 'height': '30px', 'action': 'xxx' },\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t { 'left': '70px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran1' },\n\t\t { 'left': '125px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_fam1' },\n\t\t { 'left': '180px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_favoris' },\n\t\t { 'left': '233px', 'top': '45px', 'width': '30px', 'height': '25px', 'action': 'ecran_panier' },\n\n        \/\/ Autres zones pour ecran2\n      ]\n    },\n\t\n\t\n\t\n\t\t 'ecran_panier': {\n      'backgroundImage': 'https:\/\/megawin.be\/megawinapp_photo_simulateur\/panier.jpg',\n      'zones': [\n       \/\/ { 'left': '85px', 'top': '190px', 'width': '35px', 'height': '30px', 'action': 'xxx' },\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t { 'left': '70px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran1' },\n\t\t { 'left': '125px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_fam1' },\n\t\t { 'left': '180px', 'top': '45px', 'width': '25px', 'height': '25px', 'action': 'ecran_favoris' },\n\t\t { 'left': '233px', 'top': '45px', 'width': '30px', 'height': '25px', 'action': 'ecran_panier' },\n\n        \/\/ Autres zones pour ecran2\n      ]\n    },\n\t\n\t\/\/        { 'left': '95px', 'top': '190px', 'width': '30px', 'height': '30px', 'action': 'bouton_commander_moins' },\n\n\t\n    \/\/ D\u00e9finissez d'autres \u00e9crans ici\n  };\n\n  function changeScreen(screenId) {\n    var screen = screens[screenId];\n    var phoneFrame = document.getElementById('phone-frame');\n\n    \/\/ Mettre \u00e0 jour l'image de fond\n    phoneFrame.style.backgroundImage = 'url(' + screen.backgroundImage + ')';\n\n    \/\/ Supprimer les anciennes zones cliquables\n    while (phoneFrame.firstChild) {\n      phoneFrame.removeChild(phoneFrame.firstChild);\n    }\n\n    \/\/ Ajouter les nouvelles zones cliquables\n    screen.zones.forEach(function(zone) {\n      var area = document.createElement('div');\n      area.style.left = zone.left;\n      area.style.top = zone.top;\n      area.style.width = zone.width;\n      area.style.height = zone.height;\n      area.classList.add('clickable-area');\n      area.onclick = function() { changeScreen(zone.action); };\n      phoneFrame.appendChild(area);\n    });\n  }\n\n  \/\/ Initialiser avec l'\u00e9cran 1\n  changeScreen('ecran1');\n  \n  \/*\nsetTimeout(function() {\n  changeScreen('ecran_fam1');\n  \n  \n\t\t\tsetTimeout(function() {\n\t\t  changeScreen('ecran_fam2');\n\t\t  \n\t\t  \n\t\t\t\t\tsetTimeout(function() {\n\t\t\t\t\t  changeScreen('listing_produit');\n\t\t\t\t\t  \n\t\t\t\t\t  \n\t\t\t\t\t\t\t\t\t\tsetTimeout(function() {\n\t\t\t\t\t\t\t\t\t\t  changeScreen('bouton_commander');\n\t\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetTimeout(function() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t    changeScreen('bouton_commander_plus');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  setTimeout(function() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  changeScreen('bouton_commander_moins');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t setTimeout(function() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  changeScreen('ecran_panier');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  alert(\"Simulation termin\u00e9e ! vous \u00eates maintenant dans l'obligation d'acheter Megawin App pour faire plaisir \u00e0 Erkin et Thomas\");\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}, 3000); \/\/ 3000 millisecondes \u00e9quivalent \u00e0 3 second\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}, 3000); \/\/ 3000 millisecondes \u00e9quivalent \u00e0 3 second\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}, 3000); \/\/ 3000 millisecondes \u00e9quivalent \u00e0 3 second\n\t\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t\t\t}, 3000); \/\/ 3000 millisecondes \u00e9quivalent \u00e0 3 second\n\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t  \n\t\t\t\t\t}, 3000); \/\/ 3000 millisecondes \u00e9quivalent \u00e0 3 second\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t  \n\t\t  \n\t\t}, 2000); \/\/ 3000 millisecondes \u00e9quivalent \u00e0 3 secondes\n\n\n  \n  \n}, 2000); \/\/ 3000 millisecondes \u00e9quivalent \u00e0 3 secondes\n\n  *\/\n\n\n\n<\/script>\n\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1445","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/megawin.be\/nl\/wp-json\/wp\/v2\/pages\/1445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megawin.be\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/megawin.be\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/megawin.be\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/megawin.be\/nl\/wp-json\/wp\/v2\/comments?post=1445"}],"version-history":[{"count":2,"href":"https:\/\/megawin.be\/nl\/wp-json\/wp\/v2\/pages\/1445\/revisions"}],"predecessor-version":[{"id":1453,"href":"https:\/\/megawin.be\/nl\/wp-json\/wp\/v2\/pages\/1445\/revisions\/1453"}],"wp:attachment":[{"href":"https:\/\/megawin.be\/nl\/wp-json\/wp\/v2\/media?parent=1445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}