-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
170 lines (156 loc) · 6.42 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嘿!小易 19 歲了</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Tocas UI:CSS 與元件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
<!-- Tocas JS:模塊與 JavaScript 函式 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
<!-- Google Recaptcha -->
<script src='https://www.recaptcha.net/recaptcha/api.js' async defer></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap" rel="stylesheet">
<link href="./glitch.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" rel="stylesheet">
<link rel="icon" href="https://static.yiy.tw/media/logo/birthday_by_iamnjlu.jpg">
<style>
:root {
--loading-progress: 0%;
--leko: '客家', '會爆炸', '笨雷雷';
--edisonlee55: '貓咪';
--gnehs: '可愛';
--seadog007: '喵';
--gnehs-website: 'https://gnehs.net/';
--is-leko-stubu: true;
--is-gnehs-stubu: true;
}
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
body {
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) var(--loading-progress), rgba(0, 0, 0, 0) var(--loading-progress));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) var(--loading-progress), rgba(0, 0, 0, 0)var(--loading-progress));
}
}
.cake {
transition: all .4s ease;
}
.cake:hover {
transform: rotate(360deg);
}
</style>
<!-- 小易計時器 -->
<script>
const BIRTHDAY = new Date("2002-12-14")
const _MS_PER_DAY = 1000 * 60 * 60 * 24;
function dateDiffInDays(a, b) {
const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}
function changeCounterText() {
const day = dateDiffInDays(BIRTHDAY, new Date())
document.getElementById("counter").innerText = `你知道嗎?小易已經誕生 ${day} 天了!`
}
document.addEventListener("DOMContentLoaded", e => {
setInterval(changeCounterText, 10000);
})
</script>
<script>
document.addEventListener("DOMContentLoaded", e => {
document.getElementById("disconnected").addEventListener("change", e => {
if (e.target.checked) {
e.target.checked = false;
}
})
})
</script>
<script>
let root = document.documentElement
let loadingProgress = 0;
let loadingInterval;
if (Boolean(getComputedStyle(document.documentElement).getPropertyValue('--is-leko-stubu'))) {
function loading() {
loadingProgress += loadingProgress >= 50 && loadingProgress <= 70 ? 0.3 : 0.7
root.style.setProperty('--loading-progress', loadingProgress + "%");
if (loadingProgress >= 100) {
clearInterval(loadingInterval)
}
}
document.addEventListener("DOMContentLoaded", e => {
loadingInterval = setInterval(loading, 20);
})
}
</script>
</head>
<body>
<!-- 聚焦看板寶寶 -->
<div class="ts padded horizontally fitted fluid slate">
<div class="ts very narrow container">
<!-- 標題寶寶 -->
<h1 class="ts header glitch" data-text="嘿!小易又出現了">
嘿!小易又出現了
<div class="sub header ">還有<span style="text-decoration:line-through">天才</span>雷雷 yay</div>
</h1>
<!-- / 標題寶寶 -->
</div>
</div>
<!-- / 聚焦看板寶寶 -->
<br>
<div class="ts very narrow container">
<div class="ts raised center aligned segment">
<p>某個神奇國家的小朋友滿 19 歲時,設計的神奇東東</p>
<p id="counter"></p>
</div>
<img class="ts small centered image cake" src="https://i.imgur.com/IQs3iTP.png">
<div class="ts segment">
<form class="ts loading form">
<div class="field">
<label></label>
<input type="text">
</div>
<div class="field">
<label></label>
<input type="email">
</div>
</form>
</div>
<div class="ts clearing segment">
<form class="ts form" action="https://api.steveyi.net/mail/birthday" method="POST">
<div class="two fields">
<div class="field">
<label>名ㄗ</label>
<input type="text" name='name'>
</div>
<div class="field">
<label>庫郵箱</label>
<input type="email" name='email'>
</div>
</div>
<div class="resizable field">
<label>庫字</label>
<textarea placeholder="Hi" name='content'></textarea>
</div>
<div class="field">
<div class="ts checkbox">
<input id="disconnected" type="checkbox">
<label for="disconnected">我的伺服器沒有斷線。</label>
</div><br><br>
<div class='captcha_wrapper'>
<div class='g-recaptcha' data-sitekey=6LdkGd8UAAAAAM2gOhnVwf64D2arRTf0OXI6tNSy>
</div>
</div>
</div>
<button class="ts right floated button">送出</button>
</form>
</div>
<div class="ts section divider"></div>
Copyright © 2002 -
<script type="text/javascript">
document.write(new Date().getFullYear());
</script>
<a href="https://steveyi.net/">小易</a> All rights reserved.
<br />
<br />
</div>
</body>
</html>