-
Notifications
You must be signed in to change notification settings - Fork 0
/
index - template.html
135 lines (124 loc) · 4.72 KB
/
index - template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<!-- Start your project here-->
<div class="container">
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<div class="text-center">
<!-- <i class="fas fa-ticket-alt fa-10x"></i> -->
<img
src="https://mdbootstrap.com/img/Marketing/other/mdb50off.png"
height="150px"
width="150px"
/>
<h5 class="mb-3">Release surprise! 50% OFF MDB 5 PRO</h5>
<p>
Use this coupon code before the next release to claim the reward.<br />Hurry up & don't
loose your chance.
</p>
<p>
<code class="text-uppercase h1 px-2 rounded bg-dark text-white">MB8XW23V</code>
</p>
<a
class="btn btn-primary btn-lg"
onclick="copy('MB8XW23V');toastr.info('Coupon code copied! Use it on the checkout.');"
target="_blank"
role="button"
id="code-button"
>CLAIM DISCOUNT</a
>
<a
class="btn btn-outline-primary btn-lg"
href="https://mdbootstrap.com/docs/standard/getting-started/"
target="_blank"
role="button"
>START TUTORIAL</a
>
<div class=" my-2 alert alert-success" id="code-success" style="display: none;">
Copied
</div>
<p>See <a href="https://mdbootstrap.com/docs/standard/pro/">prices</a></p>
<h5 class="h1-responsive text-uppercase mt-3">
the code <span class="font-weight-bold"></span> expires in:<br />
<span class="font-weight-bold" id="time-counter"></span>
</h5>
</div>
</div>
</div>
<!-- End your project here-->
</body>
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript">
var button = document.getElementById('code-button');
button.onclick = function() {
var div = document.getElementById('code-success');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
function copy(text) {
var textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
// Ad counter
// Set the date we're counting down to
var countDownDate = new Date(Date.UTC(2020, 09, 30, 10, 00, 00));
var counterElement = document.getElementById('time-counter');
// Update the count down every 1 second
function startCounter() {
//wrapped in an if to prevent console errors if the element isn't found on the page
if (counterElement == null) {
return;
} else {
var x = setInterval(function () {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
counterElement.innerHTML = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's';
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById('time-counter').innerHTML =
'<p class="h3 grey-text">Sale ended :(</p>';
}
}, 1000);
}
}
startCounter();
</script>
</html>