{"archived":0,"name":"Récap Panier - Step 1 (+étiquette)","stages":[{"__typename":"ScenarioStages","customScript":"","formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"15px","right":"15px"},"coverStyle":{"background-color":"black","opacity":"0.6","transition":"opacity .3s"},"iframeStyle":{},"wrapperClose":{"right":"-410px","transition":"right .3s"},"wrapperHidden":{"height":"calc(100vh - 20px)","width":"400px","top":"10px","right":"-410px"},"wrapperOpen":{"right":"10px","transition":"right .3s"}},"htmlCloseButton":"<style>\n .perfmaker-close-button {\n display: flex;\n justify-content: center;\n align-items: center;\n color: #0f2647;\n font-size:15px;\n background-color: transparent;\n border-radius: 50%;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n \tfont-weight: 700;\n }\n .perfmaker-close-button:hover{\n \ttext-decoration:none;\n }\n \n \t@media only screen and (max-width: 600px) {\n .perfmaker-sidebar-wrapper {\n width: 90% !important;\n height: 75vh !important;\n transform: translateY(12.5%);\n }\n }\n</style>\n\n<a class=\"perfmaker-close-button\">\n X\n</a>","htmlContent":"<style>\n @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&display=swap');\n \n #template-root {\n width: 100%;\n height: 100%;\n border-radius: 15px;\n font-family: 'roboto condensed', sans-serif;\n }\n \n .template-App {\n width: 100%;\n height: 100%;\n \n background-image:url(\"https://img.perfmaker.net/903/1633097779_BG.png\");\n \tbackground-position:center;\n \tbackground-size:cover;\n border-radius: 15px;\n }\n .template-App-header{\n position:relative;\n \theight:5vh;\n display:flex;\n justify-content:center;\n align-items:center;\n }\n .template-App-header img {\n height: calc(5px + 3vh);\n margin-top: 14vh;\n }\n \n .template-App-subheader {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n width: 100%;\n height: calc(100vh - 9vh);\n }\n \n .template-App-subheader svg {\n margin-top: calc(20px + 2vh);\n height: calc(10px + 5vh);\n }\n \n .template-App-subheader .container {\n background-color: white;\n padding: 10px;\n box-sizing: border-box;\n height: 55%;\n width: 90%;\n display: flex;\n flex-direction: column;\n align-items: center;\n -webkit-box-shadow: 4px 1px 12px 0px rgba(0, 0, 0, 0.2);\n box-shadow: 4px 1px 12px 0px rgba(0, 0, 0, 0.2);\n }\n \n .template-App-subheader .container form {\n \tdisplay: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n margin: 0;\n box-sizing: border-box;\n }\n \n .template-App-subheader .container form input.perfmaker-form-field {\n\t\twidth: 85%;\n \tborder:none;\n \tborder-bottom: 2px solid grey;\n \theight: calc(20px + 2.5vh);\n padding: 0.5em 1em 0.15em 1em;\n margin-bottom: calc(5px + 2vh);\n box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;\n }\n ::placeholder{\n font-family: 'Roboto Condensed', sans-serif;\n font-size:calc(8px + .8vh + .8vw);\n \n }\n \n \tinput.button {\n font-size: calc(5px + 1vh);\n background: #dd0051;\n border: solid 1px #dd0051;\n color: white;\n padding: 1.5vh 3vh; \n font-family: 'Roboto condensed', sans-serif;\n text-transform: uppercase;\n font-weight: 700;\n cursor: pointer;\n transition:all ease .4s;\n font-weight: 400;\n width: 85%\n \t}\n .button:hover{\n background:white !important;\n color: #dd0051 !important;\n \ttransform:scale(0.98);\n transition:all ease .4s;\n }\n .template-app-subheader input:focus {\n outline: none;\n}\n \n .template-App-subheader .container h1 {\n color: black;\n font-size: calc(10px + 2vh);\n text-align: center;\n font-weight: 700;\n font-family: 'Roboto condensed', sans-serif;\n margin: 0;\n margin-top:3vh;\n margin-bottom: 1vh;\n color: #0f2647;\n width:85%;\n font-weight: 500;\n line-height: 1.1em;\n }\n \n .template-App-subheader .container h1.bis {\n color: black;\n font-size: calc(10px + 1.5vh);\n text-align: center;\n font-weight: 700;\n font-family: 'Roboto condensed', sans-serif;\n margin: 0;\n margin-top:3vh;\n margin-bottom: 3vh;\n color: #0f2647;\n font-weight: 500;\n line-height: 1.1em;\n width: 100%;\n }\n \n \t.template-App-subheader .container p {\n font-size: calc(11px + 1vh);\n width: 80%;\n text-align: center;\n color: #0f2647;\n margin-top: 1vh;\n \n }\n \n .template-App-subheader .footer {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n width: 80%;\n flex-direction: column;\n color: white;\n margin-bottom: 5%;\n }\n \n .template-App-subheader .footer p {\n margin: 0;\n margin-bottom: calc(5px + 1vh);\n font-size: calc(8px + 1.5vh);\n }\n \n \tbutton.bottom-btn {\n position: relative;\n padding: 1.5vh 10%;\n color: #fff;\n font-size: calc(10px + 0.5vh);\n text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6);\n text-decoration: none;\n text-transform: uppercase;\n background: #dd0051;\n opacity: 1;\n border: 1px solid #dd0051;\n cursor: pointer;\n font-family: 'Roboto condensed', sans-serif;\n transition: all ease 0.3s;\n }\n button.bottom-btn:hover {\n transition: all ease 0.3s;\n\tbackground: white;\n color: #dd0051;\n }\n \t\n \t.template-App-subheader .succes {\n margin: 14vh auto;\n }\n \n</style>\n\n<div id=\"template-root\">\n <div class=\"template-App\">\n <div class=\"template-App-header\">\n \t<img src=\"https://img.perfmaker.net/903/monvinfrancais-logo.png\"/>\n </div>\n <div class=\"template-App-subheader\">\n \n <div class=\"container\">\n \n <form class=\"perfmaker-form\" data-onsubmit-action=\"SEND_BASKET\">\n <h1>Finalisez votre commande <span style=\"font-weight:bold\">plus tard ?</span></h1>\n\n <p>Saisissez votre adresse e-mail et recevez votre panier directement dans votre boîte :</p>\n <input placeholder=\"E-mail\" id=\"email\" type=\"text\" name=\"email\" class=\"perfmaker-form-field\" data-type=\"email\" data-required=\"true\" data-error-msg=\"Votre adresse mail n'est pas valide\"/>\n <input class=\"button perfmaker-action\" type=\"submit\" value=\"Envoyer mon panier par e-mail\" data-onclick=\"SHOW_SIDEBAR\"/>\n </form>\n <div class=\"perfmaker-form-success succes\">\n <h1 class=\"bis\">Votre panier a été envoyé avec succès</h1>\n <button class=\"perfmaker-action bottom-btn\" data-onclick=\"CLOSE_BUTTON_CLICK\" data-url=\"\">Fermer</button>\n </div>\n </div>\n </div>\n </div>\n</div>","name":"Scène 0: Sidebox","notBlocking":null},{"__typename":"ScenarioStages","customScript":"","formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"display":"none"},"coverStyle":{"display":"none","transition":"opacity 0.5s ease, visibility 0.5s ease"},"iframeStyle":{},"wrapperClose":{"right":"-180px"},"wrapperHidden":{"right":"-186px"},"wrapperOpen":{"height":"36px","width":"250px","top":"30%","right":"-113px","transform":"rotate(-90deg)"}},"htmlCloseButton":"<a style=\"cursor: pointer; display: block; background-color: grey !important; opacity: 0.65; color: white !important; width: 40px; height: 40px; font-size: 16px;line-height: 40px;text-align: center;\">X</a>\n","htmlContent":"<style>\n \n \n @import url(https://fonts.googleapis.com/css?family=Raleway:400,800);\n\n@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');\n\n \n .root {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n height: 92%;\n width: 100%;\n border-radius: 0px;\n color: #111;\n \n }\n \n .root .perfmaker-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 99%;\n width: 95%;\n cursor: pointer;\n background: #dd0051;\n color:white;\n border-radius: 4px;\n text-transform : uppercase;\n }\n \n .root .text {\n text-align:center;\n font-family: Raleway, Arial;\n font-size: 12px;\n padding:10px;\n font-family: \"Open Sans\",Helvetica Arial sans-serif;\n font-weight:600;\n }\n \n @keyframes pulse{\n 100% {\n box-shadow: 0 0 0 8px #dd005100;\n }\n\n</style>\n\n<div class=\"root\">\n <div class=\"perfmaker-bubble\">\n <div class=\"text\"><img src=\"https://img.perfmaker.net/858/1630411884_recap%20panier%20bernard%20icon%20copie.png\"height=\"10px;\"> Sauvegardez votre panier</div>\n </div>\n</div>","name":"Scène 1: Etiquette","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":true,"data":null,"nextStage":1}],[{"__typename":"ScenarioTransitions","actionType":"MOUSE_CLICK","closeBefore":true,"data":null,"nextStage":0}]]}
