-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (166 loc) · 8.65 KB
/
index.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<title>Countdown</title>
<style>
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#countdown {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 3em;
}
#quote {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);
text-align: center;
font-size: 1.5em;
}
/* #footer {
position: relative;
width: 100%;
height: 100px;
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
} */
/* .pacman {
position: absolute;
width: 30px;
height: 30px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Pac_Man.svg/1200px-Pac_Man.svg.png');
background-size: cover;
animation: movePacman 4s linear infinite;
z-index: 2;
}
@keyframes movePacman {
0% {
left: 0;
}
100% {
left: calc(100% - 30px);
}
}
.bug {
position: absolute;
width: 20px;
height: 20px;
background-image: url('https://w7.pngwing.com/pngs/501/376/png-transparent-computer-icons-computer-programming-software-bug-funny-bug.png');
background-size: cover;
animation: moveBug 3s linear infinite;
z-index: 1;
}
@keyframes moveBug {
0% {
left: 100%;
}
100% {
left: 0;
}
} */
</style>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators" style="display: none;">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<!-- More list items as per your number of images -->
</ol>
<div class="carousel-inner" role="listbox">
<!-- Carousel images here -->
<div class="carousel-item active" style="filter: grayscale(0%); background-image: url('https://files.oaiusercontent.com/file-xur2I5nJJbxMDarRwHOp0wjT?se=2023-12-14T18%3A36%3A31Z&sp=r&sv=2021-08-06&sr=b&rscc=max-age%3D31536000%2C%20immutable&rscd=attachment%3B%20filename%3D3ec04778-264f-4516-bebf-d57a5e561b39.webp&sig=vFZ%2BH3mgWvE4WNfZe/K1m9GZTWfR2c7Dk04SRKmtzTY%3D')">
<div style="color: white; font-weight: bolder;" id="countdown"></div>
<div style="color: white; margin-top: 80px; font-weight: bolder;" id="quote"></div>
</div>
<!-- More carousel items as per your number of images -->
<div id="footer" style="display: none;">
<div class="pacman"></div>
<div class="bug"></div>
</div>
</div>
<a class="carousel-control-prev" style="display: none;" href="#carouselExampleIndicators" role="button" data-slide="prev" >
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" style="display: none;" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Your existing JavaScript here -->
<script>
// JavaScript Code Here
var endDate = new Date("December 18, 2023 21:30:00").getTime();
console.log(endDate)
var quotes = [
// Fill this array with the quotes
"\"There are three deaths. The first is when the body ceases to function. The second is when the body is consigned to the grave. The third is that moment, sometime in the future, when your name is spoken for the last time.\" - David Eagleman",
"\"Brains are like fingerprints, and they're shaped by a different set of forces for each of us.\" - David Eagleman",
"\"Every decision we make, every thought and feeling we have, is an act of prediction about the future.\" - David Eagleman",
"\"Life begins where fear ends.\" - Osho",
"\"Damlaya damlaya göl olur.\" - Winston Churchill",
"\"Easy choices hard life, hard choices easy life.\" - Kılışdar",
"\"Be — don't try to become.\" - Osho",
"\"You may be just a drop in the ocean, but without you, the ocean is incomplete.\" - Kurun Kukur",
"\"Don't strive to become the full moon in someone's sky. Instead, be the humble star that twinkles in their darkest night.\" - Kurun Kukur",
"\"If a leaf fears the wind, it will never dance. Embrace the gusts of change in your life.\" - Kurun Kukur",
"\"Why fear the storm's thunder when you can be the lightning that illuminates the path?\" - Kurun Kukur",
"\"And, when you want something, all the universe conspires in helping you to achieve it.\" - Paulo Coelho",
"\"Don't move the way fear makes you move. Move the way love makes you move. Move the way joy makes you move.\" - Osho",
"\"It's the possibility of having a dream come true that makes life interesting.\" - Paulo Coelho",
"\"Am razıysa yarrak bağdattan gelir\" - Recep Tayyip Erdoğan",
"\"When we love, we always strive to become better than we are. When we strive to become better than we are, everything around us becomes better too.\" - Paulo Coelho",
];
var images = [
// Fill this array with the image URLs
// "https://media.istockphoto.com/id/1163622485/tr/fotoğraf/bodrum-türkiye-yaz-tatili-eski-kentin-büyük-plajları.jpg?s=612x612&w=is&k=20&c=0eD-plZgf9DELtcTIGuTkt1KPyEIJcVX6dqo4ei8_3Q="
// "https://media-cdn.tripadvisor.com/media/photo-c/2560x500/09/82/8f/80/iztuzu-beach.jpg"
"https://files.oaiusercontent.com/file-ZmcyBxUvbvSdGuaWHx8ZPfl7?se=2023-12-14T18%3A25%3A57Z&sp=r&sv=2021-08-06&sr=b&rscc=max-age%3D31536000%2C%20immutable&rscd=attachment%3B%20filename%3De0bfe69d-7ee4-4962-9e07-4583972b455b.webp&sig=7ckaFMx2fzY5/o7Qjm9ujVZ5Wj1Z01KFdyCRSNrQKcI%3D"
];
var countdown = setInterval(function() {
var now = new Date().getTime();
var t = endDate - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (t < 0) {
clearInterval(countdown);
document.getElementById("countdown").innerHTML = "She has arrived!";
}
}, 1000);
window.onload = function() {
var randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML = randomQuote;
// var randomImage = images[Math.floor(Math.random() * images.length)];
// document.getElementById("carousel").innerHTML = `<img src='${randomImage}' alt='Aegean Sea Image'>`;
}
</script>
<!-- Required Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>