{"archived":0,"globalCss":null,"mainStage":null,"name":"Code Promo 10€ Code : Bienvenue ","stages":[{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/984/JS/Copy_code_promo.js","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"10px","right":"10px","display":"flex","justify-content":"center","align-items":"center"},"coverStyle":{"background-color":"black","opacity":".6","transition":"linear .3s linear","pointer-events":"none"},"iframeStyle":{},"wrapperClose":{"bottom":"-100%","transition":"bottom ease .5s"},"wrapperHidden":{"height":"300px","width":"538px","right":"50%","bottom":"-100%","transform":"translate(50%, 50%)","overflow":"hidden !important"},"wrapperOpen":{"bottom":"50%","transition":"bottom ease .5s"}},"htmlCloseButton":"<style>\n .perfmaker-close {\n display: flex;\n justify-content: center;\n align-items: center;\n color: white;\n background-color: #FDA51F;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n border: none;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n cursor: pointer;\n }\n \n @media only screen and (max-width: 670px) {\n \t.perfmaker-sidebar-wrapper {\n height: 50% !important;\n width: 80% !important;\n \t}\n } \n</style>\n\n<a class=\"perfmaker-close\">\n X\n</a>","htmlContent":"<style>\n\n@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&display=swap');\n \n @import url('https://fonts.googleapis.com/css2?family=Chivo:wght@700&family=Montserrat:wght@400;700&display=swap');\n\n\n #template-root {\n width: 100%;\n height: 100%;\n }\n \n .template-App {\n text-align: center;\n background-size: cover;\n background-position: bottom;\n overflow: hidden;\n background-color: #E7E7E7;\n border-radius: 10px;\n --primary-color: #1D2451;\n --secondary-color: #FDA51F;\n --tertiary-color: #dddddd;\n background-image: url('https://img.perfmaker.net/1094/1639064692_image%204.png');\n background-position: top left;\n background-size: contain;\n background-repeat:no-repeat;\n font-family: 'Montserrat', sans-serif;\n\n }\n \n\n\n .template-App-subheader {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n z-index: 10;\n position: relative;\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n }\n .template-App-subheader div.pm-container { \n width:100%;\n }\n \n .template-App-subheader h4.title {\n color: var(--primary-color);\n font-weight: 700;\n font-size: calc(27px + 7vh);\n \t margin:2vh 0 0 0;\n text-align: center;\n }\n \n .template-App-subheader h6.subtitle {\n font-size: calc(12px + 2vh);\n color: var(--primary-color);\n text-align: center;\n font-weight: 400;\n margin: 3vh auto 4vh;\n text-transform: uppercase;\n }\n \n .template-App-subheader p {\n font-size: calc(7px + 0.7vh);\n padding: 0 2vh;\n margin: 4vh 0 0vh;\n letter-spacing: 0.03em;\n color: #3B3B3B;\n width: 60% auto;\n }\n \n .template-App-subheader .focus {\n position: relative;\n color: var(--primary-color);\n text-transform: none;\n font-weight: 600;\n\n font-size: calc(12px + 3vh);\n margin-bottom: 1vh;\n }\n \n .code-promo-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 2vh;\n margin: 0 auto;\n position: relative;\n height: calc(20px + 3vh + 1vw);\n color: var(--primary-color);\n text-transform: uppercase;\n font-weight: 400;\n font-size: calc(10px + 3vh);\n border: dashed 2px var(--primary-color);\n \twidth: 50%;\n text-align:center;\n }\n \n .code-promo-container span {\n width:80%;\n font-size: calc(13px + 4vh);\n \t}\n \n .code-promo-container button {\n display: block;\n \tmargin:0 auto;\n height: 100%;\n width: 20%;\n background-color: var(--primary-color);\n border: 2px solid var(--primary-color) !important;\n cursor: pointer;\n }\n \n .code-promo-container button svg {\n height: 60%;\n fill: white;\n width: 60%;\n \tpointer-events:none;\n }\n \n .template-App-subheader button.end-button {\n color: #fff;\n font-family: 'Chivo', sans-serif;\n font-weight: 500 !important;\n text-transform: uppercase;\n position: relative;\n margin: 5vh 2vh;\n padding: 3vh 8%;\n cursor: pointer;\n border: 2px solid var(--secondary-color) !important;\n background-color: var(--secondary-color);\n opacity: 1 !important;\n box-shadow: 0px 0px 0px 0px rgba(34, 34, 34, 0.6);\n border-radius: 0px;\n font-size: calc(13px + 1vh);\n transition: 0.3s;\n -webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.3); \nbox-shadow: 0px 4px 6px 0px rgba(0,0,0,0.3);\n }\n \n .template-App-subheader button:hover {\n background-color: transparent;\n color: var(--secondary-color);\n }\n \n .template-App-subheader button:hover svg {\n fill: var(--primary-color);\n }\n \n\n \n .popuptext {\n visibility: hidden;\n width: 120%;\n background-color: #555;\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 8px 0;\n position: absolute;\n z-index: 12;\n left: 50%;\n top: -100%;\n transform: translate(-50%, -50%);\n }\n \n .popuptext::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #555 transparent transparent transparent;\n }\n \n .popup .show {\n visibility: visible;\n -webkit-animation: fadeIn 1s;\n animation: fadeIn 1s\n }\n \n @-webkit-keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n .logo {\n position:absolute;\n left:15px;\n top:15px;\n height:50px;\n \n \n }\n \n div.line-1 {\n width:100%;\n height:2px;\n background-color:#182337;\n margin-bottom:2px;\n }\n div.line-2 {\n width:100%;\n height:2px;\n background-color:#E93A5D;\n }\n p.info-legale {\n font-size: calc(4px + 1vh);\n margin: 2px 0;\n width: 100%;\n\n }\n p.conditions {\n text-align:right;\n width:calc(100% - 5px);\n margin:0 5px 5px 0;\n padding:0;\n }\n \n @media all and (min-width: 538px) {\n .code-promo-container {\n width:50%;\n }\n .code-promo-container span {\n font-size: calc(20px + 2vh);\n \t\t}\n }\n @media all and (max-width: 536px) {\n .code-promo-container {\n \t\t width:80%;\n }\n .code-promo-container span {\n font-size: calc(5px + 3vh + 3vw);\n \t\t}\n .template-App-subheader h6.subtitle {\n font-size: calc(10px + 2vh);\n \t\t\t width: 90%;\n\n }\n .template-App-subheader button.end-button {\n margin: 2vh 1vh;\n }\n }\n \n</style>\n\n<div id=\"template-root\">\n <div class=\"template-App\">\n <img src=\"https://img.perfmaker.net/1094/1634129097_Logo.png\" class=\"logo\">\n <section class=\"template-App-subheader\">\n <div class=\"pm-container\">\n <h4 class=\"title\">10€</h4>\n <h6 class=\"subtitle\">offerts* sur votre<br> \n <b>1ère commande</b> avec le code :</h6>\n <div class=\"code-promo-container\">\n <span class=\"promocode perfmaker-action\" data-onclick=\"HIDE_SIDEBAR\" id=\"codePromo\" style=\"color:#FDA51F;font-weight:600;\">BIENVENUE</span>\n <button id=\"copyButton\">\n <span class=\"popuptext\" id=\"myPopup\">Code copié !</span>\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Capa_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\" xml:space=\"preserve\">\n <g>\n <g>\n <path d=\"M512,107.275c-23.658-33.787-70.696-42.691-104.489-19.033L233.753,209.907l-63.183-44.246 c23.526-40.618,12.46-93.179-26.71-120.603c-41.364-28.954-98.355-18.906-127.321,22.45 c-28.953,41.358-18.913,98.361,22.452,127.327c28.384,19.874,64.137,21.364,93.129,6.982l77.388,54.185l-77.381,54.179 c-28.992-14.375-64.743-12.885-93.129,6.982c-41.363,28.966-51.404,85.963-22.452,127.32 c28.966,41.363,85.963,51.411,127.32,22.457c39.165-27.424,50.229-79.985,26.71-120.603l63.183-44.246l173.751,121.658 c33.793,23.665,80.831,14.755,104.489-19.033l-212.41-148.715L512,107.275z M91.627,167.539 c-26.173,0-47.392-21.219-47.392-47.392s21.22-47.392,47.392-47.392c26.179,0,47.392,21.219,47.392,47.392 S117.806,167.539,91.627,167.539z M91.627,439.253c-26.173,0-47.392-21.219-47.392-47.392c0-26.173,21.219-47.392,47.392-47.392 c26.179,0,47.392,21.219,47.392,47.392C139.019,418.033,117.806,439.253,91.627,439.253z\"/>\n </g>\n </g>\n </svg>\n </button>\n </div>\n <button class=\"perfmaker-action end-button\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"https://www.fandebieres.com/38-bieres-locales\">C'est parti !</button>\n <p class=\"conditions\">*dès 60€ d’achats</p> \n <div class=\"line-1\"></div>\n <div class=\"line-2\"></div>\n <p class=\"info-legale\">L’abus d’alcool est dangereux pour la santé. A consommer avec modération.</p>\n \n </div>\n \n </section>\n \n </div>\n</div>","name":"Scène 0","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}
