Awin - Code promo 2

Format

Central

COMPLEXITÉ

Figma
🔥 Le code de ce scénario a été copié dans votre presse-papier
Preview
{"archived":0,"globalCss":":root {\n /* Règles CSS couleurs */\n --pm-primary-color: black;\n --pm-secondary-color: white;\n \t--pm-tertiary-color: grey;\n \n /* Sidebox Title configuration */\n --pm-font-family-1: 'Arial', sans-serif;\n \n \t\t/* Background Image en fond */\n \t\t--pm-background:url(\"\");\n }","mainStage":0,"name":"Awin - Code 2","stages":[{"__typename":"ScenarioStages","customScript":"https://img.perfmaker.net/984/JS/Copy_code_promo.js","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"height":"30px","width":"30px","position":"absolute","right":"10px","top":"10px"},"coverStyle":{},"iframeStyle":{},"wrapperClose":{},"wrapperHidden":{"height":"300px","width":"400px","right":"-100%","bottom":"0"},"wrapperOpen":{"right":"calc(50% - 200px)","bottom":"calc(50% - 200px)"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n width: 30px;\n height: 30px;\n cursor: pointer;\n background-color:black;\n border-radius: 100px;\n }\n .line{\n position: absolute;\n background-color:white;\n width: 15px;\n height: 2px;\n transition: All ease .3s;\n border-radius: 100px;\n }\n .lines:hover .line1{\n transform: rotate(0deg);\n height:2px;\n }\n .lines:hover .line2{\n transform: rotate(0deg);\n height:2px;\n }\n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n\n \t\n @media screen and (max-width:499px){\n .perfmaker-sidebar-wrapper {\n \twidth:90%!important;\n right:5%!important;\n \theight:300px!important;\n bottom :calc(50% - 150px)!important;\n }\n }\n \n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>\n\n\n\n","htmlContent":"\n<style> @import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');\n \n \n \n .pm-root{\n height:100%;\n width:100%;\n background-color:transparent;\n display:flex;\n flex-direction:column;\n align-items:center;\n overflow:hidden;\n font-family: var(--pm-font-family-1);\n background-color:var(--pm-secondary-color);\n border-radius:20px;\n }\n \n .background{\n height:100%;\n width:100%;\n background-image:var(--pm-background);\n background-position:bottom;\n background-repeat: no-repeat;\n background-size:cover;\n border-radius:20px;\n display:flex;\n flex-direction:column;\n align-items:center;\n justify-content:space-between;\n\n }\n .logo{\n \tobject-fit:contain;\n height:70px;\n margin-top:10px;\n }\n \n \n .titre{\n font-size:30px;\n font-weight:300;\n color:var(--pm-primary-color);\n text-align:center;\n }\n \n .texte{\n margin-top:10px;\n font-size:18px;\n font-weight:300;\n color:var(--pm-primary-color);\n text-align:center;\n width:80%;\n }\n \n \n \n .copiercoller{\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding:7px 10px ;\n margin: 25px 0;\n font-weight: 400;\n border: dashed 2px var(--pm-primary-color);\n gap:10px;\n }\n \n #codepromo{\n color:var(--pm-primary-color);\n\tfont-family:var(--pm-font-family-1);\n font-weight:100;\n font-size:25px;\n }\n \n .promocode{\n display:block;\n \tcolor:var(--pm-primary-color);\n }\n \n #copyButton{\n height:100%;\n width:100%;\n display:block;\n background-position:center;\n background-repeat: no-repeat;\n background-size:cover;\n border:none;\n background-color:transparent;\n cursor:pointer;\n }\n .svg-icon {\n width: 2em;\n height: 2em;\n}\n\n.svg-icon path,\n.svg-icon polygon,\n.svg-icon rect {\n fill: var(--pm-primary-color);\n}\n\n.svg-icon circle {\n stroke: var(--pm-primary-color);\n stroke-width: 1;\n}\n \n .end-button{\n padding:10px 50px;\n border:none;\n border-radius:12px;\n color:white;\n background-color:var(--pm-tertiary-color);\n cursor:pointer;\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n margin-bottom:30px;\n font-family:var(--pm-font-family-1);\n }\n \n \n \n \n \n \n \n \n \n /* CSS copié collé d'un autre scénario pour que le JS fonctionne */\n .popuptext {\n visibility: visible;\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 {opacity: 0; }\n to {opacity: 1;}\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n /*FIN CSS pour le JS */\n \n \n @media screen and (max-width:499px){\n .logo {\n \theight:40px!important;\n }\n }\n \n</style>\n\n<div class=\"pm-root\">\n \n\t<div class=\"background\">\n \t<img class=\"logo\" src=\"https://img.perfmaker.net/1101/1675958576_Capture%20d%E2%80%99e%CC%81cran%202023-02-09%20a%CC%80%2017.02.37.png\">\n \n <div class=\"titre\">Titre</div> \n \n \n \t<div class=\"texte\">Texte\n </div>\n\n <div class=\"copiercoller\">\n <span class=\"promocode perfmaker-action\" id=\"codePromo\">CODE</span>\n <button id=\"copyButton\">\n <svg class=\"svg-icon\" viewBox=\"0 0 20 20\">\n\t\t\t\t\t\t\t<path fill=\"none\" d=\"M18.378,1.062H3.855c-0.309,0-0.559,0.25-0.559,0.559c0,0.309,0.25,0.559,0.559,0.559h13.964v13.964\n\t\t\t\t\t\t\t\tc0,0.309,0.25,0.559,0.559,0.559c0.31,0,0.56-0.25,0.56-0.559V1.621C18.938,1.312,18.688,1.062,18.378,1.062z M16.144,3.296H1.621\n\t\t\t\t\t\t\t\tc-0.309,0-0.559,0.25-0.559,0.559v14.523c0,0.31,0.25,0.56,0.559,0.56h14.523c0.309,0,0.559-0.25,0.559-0.56V3.855\n\t\t\t\t\t\t\t\tC16.702,3.546,16.452,3.296,16.144,3.296z M15.586,17.262c0,0.31-0.25,0.558-0.56,0.558H2.738c-0.309,0-0.559-0.248-0.559-0.558\n\t\t\t\t\t\t\t\tV4.972c0-0.309,0.25-0.559,0.559-0.559h12.289c0.31,0,0.56,0.25,0.56,0.559V17.262z\"></path>\n\t\t\t\t\t\t</svg>\n <span class=\"popuptext \" id=\"myPopup\">Code copié&nbsp;!</span>\n </button>\n </div>\n \n \n <button class=\"perfmaker-action end-button\" data-onclick=\"HIDE_SIDEBAR\">CTA </button>\n\n </div>\n \n</div>","name":"Scène 0","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}