Skip to content

Instantly share code, notes, and snippets.

@jacopo-nosto

jacopo-nosto/.html Secret

Last active April 29, 2021 10:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jacopo-nosto/92961734783a5cb91e96cb7b1adb79de to your computer and use it in GitHub Desktop.
Save jacopo-nosto/92961734783a5cb91e96cb7b1adb79de to your computer and use it in GitHub Desktop.
Download ZIP
Popup with timer
Raw
.html
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
#NostoPopUp * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
outline: none !important;
}
#NostoPopUp {
position: fixed !important;
top: 0px !important;
left: 0px !important;
width: 100% !important;
height: 100% !important;
padding: 30px !important;
padding-top: 7% !important;
z-index: 99999 !important;
display: none;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
font-family: 'Lato', sans-serif;
overflow-y: auto !important;
}
#NostoPopUp #NostoPopUpWrapper {
max-width: 559px !important;
margin: 0 auto !important;
text-align: center !important;
background: transparent !important;
}
#NostoPopUp #NostoPopUpContent {
position: relative !important;
#if($props.style.popupTextColor && $props.style.popupTextColor != '')
color: $props.style.popupTextColor !important;
#end
text-align: center !important;
padding: 30px 59px 59px 59px !important;
z-index: 999999 !important;
#if ($props.style.isBackgroundImageEnabled && $props.style.backgroundImage.url && $props.style.backgroundImage.url != '')
background: url($props.style.backgroundImage.url) #if($props.style.backgroundColor && $props.style.backgroundColor != '') $props.style.backgroundColor #else #000000 #end no-repeat top left !important;
background-size: cover !important;
#elseif ($props.style.isGradientBackgroundEnabled && $props.style.startColor && $props.style.endColor) /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to top, $props.style.startColor, $props.style.endColor);
background: -o-linear-gradient(to top, $props.style.startColor, $props.style.endColor);
background: linear-gradient(to top, $props.style.startColor, $props.style.endColor); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
#else
#if($props.style.backgroundColor && $props.style.backgroundColor != '')
background: $props.style.backgroundColor !important;
#else
background: #ffffff;
#end
#end
border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
-ms-border-radius: 10px !important;
box-shadow: 0 5px 10px rgba(0,0,0,0.2) !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#NostoPopUp .NostoCloseButton {
position: absolute !important;
right: -20px !important;
top: -20px !important;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
#if($props.config.closeButtonBorder)
border: 3px solid rgba(255, 255, 255, 1) !important;
line-height: 40px !important;
#else
border: 0 !important;
line-height: 46px !important;
#end
font-size: 19px !important;
font-family: 'Lato', sans-serif;
color: white !important;
background: black !important;
padding: 0px !important;
margin: 0px !important;
width: 46px !important;
height: 46px !important;
outline: none !important;
cursor: pointer !important;
text-decoration: none !important;
text-align: center !important;
}
#NostoPopUp .NostoTitle {
color: #db4476 !important;
font-family: 'Lato', sans-serif;
#set($title = $props.text.title)
#if($title.length() <= 12)
font-size: 60px !important;
line-height: 60px !important;
#else
font-size: 40px !important;
line-height: 40px !important;
#end
font-weight: 700 !important;
padding-top: 20px !important;
padding-bottom: 15px !important;
#if($props.style.popupTextColor && ($props.style.popupTextColor != ''))
color: $props.style.popupTextColor !important;
#end
}
#NostoPopUp .NostoSubTitle {
font-family: 'Lato', sans-serif;
#set($subTitle = $props.text.subTitle)
#if($subTitle.length() <= 28 )
font-size: 32px !important;
line-height: 32px !important;
#elseif($subTitle.length() <= 45 )
font-size: 24px !important;
line-height: 24px !important;
#else
font-size: 22px !important;
line-height: 28px !important;
#end
font-weight: 300;
opacity: 0.8 !important;
}
#NostoPopUp .NostoDescription {
margin: 30px auto 15px auto !important;
font-family: 'Lato', sans-serif;
font-size: 15px !important;
line-height: 18px !important;
font-weight: 300 !important;
}
#NostoPopUp .NostoInputText {
font-family: 'Lato', sans-serif;
display: inline-block;
border: 1px solid rgba(0,0,0,0.2) !important;
#if ($props.style.popupTextColor && $props.style.popupTextColor != '')
color: $props.style.popupTextColor !important;
#end
font-size: 20px !important;
font-weight: 700 !important;
padding: 20px 0 !important;
margin: 0px !important;
vertical-align: top !important;
margin-bottom: 10px !important;
border-radius: 5px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-ms-border-radius: 5px !important;
line-height: 20px !important;
letter-spacing: 1px !important;
width: 100% !important;
text-align: center !important;
}
#NostoPopUp .NostoInputButton {
font-family: 'Lato', sans-serif;
display: inline-block;
color: white !important;
background: #db4476 !important;
font-size: 20px !important;
text-transform: uppercase !important;
padding: 20px 0 !important;
border-radius: 5px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-ms-border-radius: 5px !important;
border: none !important;
margin: 0px !important;
vertical-align: top !important;
cursor: pointer !important;
line-height: 20px !important;
letter-spacing: 1px !important;
width: 100% !important;
text-align: center !important;
#if($props.style.buttonTextColor && ($props.style.buttonTextColor != ''))
color: $props.style.buttonTextColor !important;
#end
#if($props.style.buttonColor && ($props.style.buttonColor != ''))
background: $props.style.buttonColor !important;
#end
position: relative !important;
z-index: 10 !important;
}
#NostoPopUp .NostoOverlayClosePermanently {
font-family: 'Lato', sans-serif;
font-weight: 300 !important;
#if($props.config.closePermanentlyColor && ($props.config.closePermanentlyColor != ''))
color: $props.config.closePermanentlyColor !important;
#else
color: white;
#end
margin: 15px 0 !important;
opacity: 0.8 !important;
font-size: 14px !important;
letter-spacing: 1px !important;
display: block !important;
text-decoration: none !important;
}
#NostoPopUp .NostoOverlayCopyAlert {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100px !important;
overflow: hidden !important;
padding-top: 35px !important;
-webkit-border-bottom-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-ms-border-bottom-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-ms-border-bottom-left-radius: 10px !important;
}
#NostoPopUp .NostoOverlayCopyAlertContent {
width: 100% !important;
height: 80px !important;
#if($props.config.copyAlertBackgroundColor && ($props.config.copyAlertBackgroundColor != ''))
background: $props.config.copyAlertBackgroundColor !important;
#else
background: #89C566;
#end
-webkit-animation: animationdown 1000ms linear both !important;
animation: animationdown 1000ms linear both !important;
position: relative;
z-index: 8 !important;
-webkit-border-bottom-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-ms-border-bottom-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-ms-border-bottom-left-radius: 10px !important;
}
#NostoPopUp .NostoOverlayCopyAlertContent.shown {
-webkit-animation: animationup 1000ms linear both !important;
animation: animationup 1000ms linear both !important;
position: relative;
z-index: 12 !important;
}
#NostoPopUp .NostoOverlayCopyAlert p {
#if($props.config.copyAlertTextColor && ($props.config.copyAlertTextColor != ''))
color: $props.config.copyAlertTextColor !important;
#else
color: #FFFFFF !important;
#end
margin: 0 !important;
padding: 0 !important;
font-size: 15px !important;
font-family: 'Lato', sans-serif;
font-weight: 300 !important;
line-height: 70px !important;
letter-spacing: 0.8px !important;
}
#countdown p {
display: inline-block;
padding: 5px;
background: transparent;
width: 24%;
text-align: center;
margin: 0;
font-family: 'Lato', sans-serif;
}
#countdown .days, #countdown .hours, #countdown .minutes, #countdown .seconds{
font-size: 40px;
color: #c40000;
font-weight: bold;
}
/* Bouncejs */
/* Generated with Bounce.js. Edit at http://goo.gl/RftDxu */
@-webkit-keyframes animationup {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); }
3.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 173.342, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 173.342, 0, 1); }
5.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 146.079, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 146.079, 0, 1); }
7.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.977, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.977, 0, 1); }
11.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.743, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.743, 0, 1); }
15.42% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.992, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.992, 0, 1); }
16.52% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.282, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.282, 0, 1); }
21.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.809, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.809, 0, 1); }
23.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.7, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.7, 0, 1); }
32.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.296, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.296, 0, 1); }
36.24% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.337, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.337, 0, 1); }
40.34% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.909, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.909, 0, 1); }
50.55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.581, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.581, 0, 1); }
73.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.019, 0, 1); }
79.08% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.047, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.047, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
@keyframes animationup {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); }
3.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 173.342, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 173.342, 0, 1); }
5.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 146.079, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 146.079, 0, 1); }
7.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.977, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.977, 0, 1); }
11.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.743, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.743, 0, 1); }
15.42% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.992, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 24.992, 0, 1); }
16.52% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.282, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.282, 0, 1); }
21.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.809, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.809, 0, 1); }
23.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.7, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.7, 0, 1); }
32.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.296, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.296, 0, 1); }
36.24% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.337, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.337, 0, 1); }
40.34% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.909, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.909, 0, 1); }
50.55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.581, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.581, 0, 1); }
73.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.019, 0, 1); }
79.08% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.047, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.047, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
/* Generated with Bounce.js. Edit at http://goo.gl/kv1Ywz */
@-webkit-keyframes animationdown {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.2% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.637, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.637, 0, 1); }
3.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 131.467, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 131.467, 0, 1); }
6.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 182.965, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 182.965, 0, 1); }
7.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 191, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 191, 0, 1); }
9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 208.562, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 208.562, 0, 1); }
12.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 216.301, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 216.301, 0, 1); }
15.42% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 215.81, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 215.81, 0, 1); }
18.82% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 211.691, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 211.691, 0, 1); }
23.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 205.289, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 205.289, 0, 1); }
25.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 203.936, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 203.936, 0, 1); }
32.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.688, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.688, 0, 1); }
40.34% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 198.915, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 198.915, 0, 1); }
50.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.518, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.518, 0, 1); }
73.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200.015, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200.015, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); }
}
@keyframes animationdown {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.2% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.637, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 123.637, 0, 1); }
3.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 131.467, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 131.467, 0, 1); }
6.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 182.965, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 182.965, 0, 1); }
7.01% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 191, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 191, 0, 1); }
9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 208.562, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 208.562, 0, 1); }
12.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 216.301, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 216.301, 0, 1); }
15.42% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 215.81, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 215.81, 0, 1); }
18.82% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 211.691, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 211.691, 0, 1); }
23.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 205.289, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 205.289, 0, 1); }
25.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 203.936, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 203.936, 0, 1); }
32.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.688, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.688, 0, 1); }
40.34% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 198.915, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 198.915, 0, 1); }
50.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.518, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 199.518, 0, 1); }
73.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200.015, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200.015, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1); }
}
@media only screen and (max-width: 700px) {
#NostoPopUp { padding: 50px 10px 10px 10px !important;}
#NostoPopUp .NostoCloseButton {
right: 5px !important;
top: 5px !important;
width: 30px !important;
height: 30px !important;
line-height: 30px !important;
font-size: 16px !important;
border: 0 !important;
}
#NostoPopUp #NostoPopUpContent { padding: 25px 15px 35px 15px !important;}
#NostoPopUp .NostoTitle {
#if($title.length() <= 16)
font-size: 48px !important;
line-height: 48px !important;
#else
font-size: 35px !important;
line-height: 40px !important;
#end
}
#NostoPopUp .NostoSubTitle {
#if($subTitle.length() <= 20 )
font-size: 24px !important;
line-height: 24px !important;
#else
font-size: 22px !important;
line-height: 28px !important;
#end
}
#NostoPopUp .NostoDescription { font-size: 14px !important; line-height: 14px !important;}
#NostoPopUp .NostoInputText,
#NostoPopUp .NostoInputButton {
width: 100% !important;
margin: 0px !important;
font-size: 18px !important;
line-height: 18px !important;
word-break: break-word;
padding: 15px 15px !important;
}
#NostoPopUp .NostoInputText { margin-bottom: 10px !important; }
#NostoRibbon {
width: 100% !important;
display: none !important;
right: 0 !important;
text-align: center !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
-moz-border-top-left-radius: 0px !important;
-moz-border-top-right-radius: 0px !important;
}
#NostoRibbon .NostoRibbonPopUp {
padding-left: 0;
}
}
#if ($props.config.isRibbonEnabled)
#NostoRibbon {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
bottom: 0px;
#if($props.config.ribbonWidth && $props.config.ribbonWidth != '')
width: ${props.config.ribbonWidth}px;
#else
width: auto;
#end
#if($props.config.ribbonHeight && $props.config.ribbonHeight != '')
height: ${props.config.ribbonHeight}px;
#else
height: 45px;
#end
position: fixed;
#if($props.config.ribbonPosition == 'left')
#if($props.config.ribbonOffset && $props.config.ribbonOffset != '')
left: ${props.config.ribbonOffset}px;
#else
left: 150px;
#end
#else
#if($props.config.ribbonOffset && $props.config.ribbonOffset != '')
right: ${props.config.ribbonOffset}px;
#else
right: 150px;
#end
#end
z-index: 99999999;
border-radius: 5px 5px 0px 0px !important;
-webkit-border-radius: 5px 5px 0px 0px !important;
-moz-border-radius: 5px 5px 0px 0px !important;
-ms-border-radius: 5px 5px 0px 0px !important;
border: 1px rgb(1, 156, 220) !important;
#if($props.style.ribbonColor && ($props.style.ribbonColor != ''))
background: $props.style.ribbonColor !important;
#else
background: #db4476;
#end
}
#NostoRibbon #NostoRibbonContent {
position: relative !important;
top: 50% !important;
text-align: center !important;
color: white !important;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100% !important;
height: 45px !important;
line-height: 45px !important;
cursor: pointer !important;
#if($props.style.ribbonTextColor && ($props.style.ribbonTextColor != ''))
color: $props.style.ribbonTextColor !important;
#else
color: #FFFFFF !important;
#end
background: url('https://cdn.nosto.com/nosto/assets/popups/coupon-icon.png ') top 45% left 10% no-repeat !important;
}
#NostoRibbon .NostoRibbonPopUpText {
#if($props.style.textFont && $props.style.textFont != '')
font-family: $props.style.textFont !important;
#else
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif !important;
#end
font-size: 16px;
padding-left:36px;
padding-right:10px;
}
#NostoRibbon .NostoRibbonClose {
position: absolute !important;
right: 10px !important;
margin: auto !important;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif !important;
font-size: 16px !important;
cursor: pointer !important;
display: none;
}
#end
#NostoPopUp .disabled {
opacity: 0.5;
}
#NostoPopUp #nostoAddress {
font-weight: normal !important;
}
</style>
<div id="NostoPopUp">
<div id="NostoPopUpWrapper">
<div id="NostoPopUpContent">
<div class="NostoOverlayClose NostoCloseButton">&#10006;</div>
<div class="NostoTitle">$!props.text.title</div>
<div class="NostoSubTitle">$!props.text.subTitle</div>
<div id="countdown" style="margin-top: 30px;">
<p class="days">00</p>
<p class="hours">00</p>
<p class="minutes">00</p>
<p class="seconds">00</p>
</div>
<div id="countdown" style="margin-bottom: 30px;display:block;height:90px;">
<p class="timeRefDays">days</p>
<p class="timeRefHours">hours</p>
<p class="timeRefMinutes">minutes</p>
<p class="timeRefSeconds">seconds</p>
</div>
<div class="NostoDescription">$!props.text.campaignDesc</div>
<div class="NostoInputText" style="display:none" id="nostoCoupon"></div>
#if ($props.config.email && (!$customerInfo || !$customerInfo.get("email")))
<input class="NostoInputText" type="text" id="nostoAddress" placeholder="your@email.com"/>
#end
<button type="button" class="NostoInputButton" id="nostoCouponGetBtn">$!props.text.callToAction</button>
<button type="button" class="NostoInputButton" id="nostoCouponCopyBtn" style="display:none">$!props.text.copyToClipboard</button>
#if ($props.text.continueShopping && ($props.text.continueShopping != ""))
<button type="button" class="NostoInputButton" id="nostoContinueBtn" style="display:none">$!props.text.continueShopping</button>
#end
#if ($props.text.successfullyCopied && ($props.text.successfullyCopied != ""))
<div class="NostoOverlayCopyAlert" style="text-align:center;">
<div class="NostoOverlayCopyAlertContent" style="text-align:center;"><p style="text-align:center;width:100%;">$props.text.successfullyCopied</p></div>
</div>
#end
</div>
#if ($props.text.closePermanently && ($props.text.closePermanently != ""))
<a href="#" class="NostoOverlayClosePermanently">$!props.text.closePermanently</a>
#end
</div>
</div>
#if ($props.config.isRibbonEnabled)
<div id="NostoRibbon" style="display:none">
<div id="NostoRibbonContent" class="NostoRibbonPopUp">
<span class="NostoRibbonPopUpText">$!props.text.ribbonText</span>
<span class="NostoRibbonClose">x</span>
</div>
</div>
#end
<script>
var loadNostoScript = _targetWindow.nosto.context.nosto.loadScript;
var doNostoCountdown = function (e) {
e.fn.countdown = function (t, n) {
function i() {
eventDate = Date.parse(r.date) / 1e3;
currentDate = Math.floor(e.now() / 1e3);
if (eventDate <= currentDate) {
n.call(this);
clearInterval(interval)
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / 86400);
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / 3600);
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
if (r["format"] == "on") {
days = String(days).length >= 2 ? days : "0" + days;
hours = String(hours).length >= 2 ? hours : "0" + hours;
minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
}
if (!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds)
} else {
alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
clearInterval(interval)
}
}
var thisEl = e(this);
var r = {
date: null,
format: null
};
t && e.extend(r, t);
i();
interval = setInterval(i, 1e3)
}
};
loadNostoScript("https://code.jquery.com/jquery-1.11.0.min.js", function() {
loadNostoScript("https://code.jquery.com/jquery-migrate-1.2.1.min.js", function() {
doNostoCountdown(_targetWindow.nosto.jQuery);
_targetWindow.nosto.jQuery(_targetWindow).ready(function () {
function e() {
var e = new Date;
e.setDate(e.getDate() + 60);
dd = e.getDate();
mm = e.getMonth() + 1;
y = e.getFullYear();
futureFormattedDate = mm + "/" + dd + "/" + y;
return futureFormattedDate
}
_targetWindow.nosto.jQuery(_targetWindow.document).find("#countdown").countdown({
date: "22 October 2021 14:30:00", // Change this to your desired date to countdown to
format: "on"
});
});
});
});
</script>
@ignasi-sm
Copy link

Thanks dor the code! Where we can fit the code to add the coupon directly?
I miss this line in the code to be sure that the coupon we choose will be display

#if ($couponAvailable)

#end

I just see CUPON4PREVIEW

Sorry if is a stupid question but i'm not be able to find it.

Thanks you!

@jacopo-nosto
Copy link
Author

Hello there! :)

The COUPON4PREVIEW it is only shown when you preview the popup, both on site and on our Nosto dashboard.
When the popup will be activated, it will show the coupon you have selected (even the multi-use one or the coupon from your pool).
I hope this answer your question.
Cheers!

@ignasi-sm
Copy link

Hi Jacopo! Thanks for the answer. I'm not sure it will be response :)

Yes, not just to active, so active and shown in production page to see the correct coupon.
Many thanks Jacopo!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment