-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (112 loc) · 5.55 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
<!DOCTYPE html>
<html>
<head>
<meta name="google-site-verification" content="Qt-x8jS2IajtSA7l8X6CA0uDTOJg9ygo_uSTOjD9Wv0" />
<!-- new -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML Meta Tags -->
<title>🎉Tahun Baru Countdown 🎊</title>
<meta name="description"
content="This website is a simple New Year countdown timer. It displays the time remaining until the New Year and updates in real time.">
<!-- Meta Tags -->
<meta property="og:url" content="https://tahunbaru.netlify.app">
<meta property="og:type" content="website">
<meta property="og:title" content="🎉Tahun Baru Countdown 🎊">
<meta property="og:description"
content="This website is a simple New Year countdown timer. It displays the time remaining until the New Year and updates in real time.">
<meta property="og:image" itemprop="image" content="http://tahunbaru.netlify.app/assets/preview.png" />
<meta property="og:site_name" content="🎉Tahun Baru Countdown" />
<meta property="og:locale" content="en_US" />
<meta property="article:author" content="https://www.tahunbaru.netlify.app" />
<meta property="article:publisher" content="https://www.tahunbaru.netlify.app" />
<meta property="og:image:secure_url" content="http://tahunbaru.netlify.app/assets/preview.png" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="tahunbaru.netlify.app">
<meta property="twitter:url" content="https://tahunbaru.netlify.app">
<meta name="twitter:title" content="🎉Tahun Baru Countdown 🎊">
<meta name="twitter:description"
content="This website is a simple New Year countdown timer. It displays the time remaining until the New Year and updates in real time.">
<meta name="twitter:image" content="http://tahunbaru.netlify.app/assets/preview_2.png">
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="icon" href="https://images.emojiterra.com/google/android-11/128px/1f389.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Ubuntu+Mono:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.29.2/dist/tsparticles.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/countdown.js"></script>
<script src='./js/darkmode.js'></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
</head>
<body>
<div id="particles-js"></div>
<div class="content">
<div class="header" id="header">
<h1 class="year" id="yearTitle"> </h1>
<h1 class="yea" id="subtitle">New Year Countdown</h1>
</div>
<a id="show-toggle" class="show" data-clicked="false">Show</a>
<br><br>
<div id="menu" class="menu">
<h2 class="cd" id="cd">
</h2>
<p id="subtitleMaybe" style="font-size: 1.5em;"></p>
<p class="watermark" id="wm1"></p>
<br>
</div>
<footer>
<p id="horay"></p>
<p class='watermark' id='wm'></p>
<a href="http://instagram.com/raaharja" class='ig-footer'>@raaharja</a>
</footer>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
document.getElementById("yearTitle").innerHTML = nextYear;
// confetti
confetti({
spread: 250,
particleCount: 30,
});
// particle
particlesJS.load('particles-js', 'particles.json', function () {
console.log('particles.json loaded... \nEverything is ready');
let el = document.querySelector(".particles-js-canvas-el");
});
$(document).ready(function () {
$('body').hide().fadeIn(900).delay(200)
});
//typewriter
const humanize = Math.round(Math.random() * (100 - 30)) - 100;
const options = {
strings: ["👋 Hey, Welcome!", "Thanks for visiting this website!", "uhh.. ", 'Follow me at @raaharja on instagram', '<span>tahunbaru.netlify.app</span>'],
typeSpeed: 15,
loop: false,
showCursor: false,
smartBackspace: true,
backSpeed: humanize,
};
const typed = new Typed('#wm', options)
// button h&show
// jquery
$(document).ready(function () {
$("#show-toggle").click(function () {
$(this).attr('data-clicked', 'true');
$("#menu").fadeToggle();
$("#header").animate({ height: "toggle", opacity: "toggle" });
});
$("#show-toggle").click(function () {
if ($.trim($(this).text()) === 'Show') {
$(this).text('Hide');
} else {
$(this).text('Show');
}
});
});
</script>
</body>
</html>