-
Notifications
You must be signed in to change notification settings - Fork 0
/
messagebox-clock.html
52 lines (50 loc) · 2.98 KB
/
messagebox-clock.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
<!--
<messagebox-clock.html> - Euro Truck Simulator 2 online streaming liveroom design.
Written in 2023 by Steven Song [email protected]
To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see <http://creativecommons.org/publicdomain/zero/1.0/>.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
@font-face {
font-family: Dianzhen;
src: url(fenghuangdianzhenti.ttf);
}
</style>
<script>
var dayString = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
function updateTime() {
var time = new Date();
var day = dayString[time.getDay()];
var date = time.toLocaleDateString();
document.getElementById("content-line-1").innerHTML = date + day;
document.getElementById("content-line-2").innerHTML = time.toLocaleTimeString();
}
setInterval(updateTime, 1000);
</script>
</head>
<body style="width: 280px; height: 120px; background-color: rgba(0, 0, 255, 0);">
<div id="window" style="width: 250px; height: 100px; background-color: rgba(0, 0, 255, 0.3);">
<div id="title-bar" style="width: 100%; height: 20px; background-color: rgba(0, 100, 0, 0.3); color: rgba(255, 255, 255, 0.3); font-family: 'Dianzhen'; font-size: 20px; text-align: center;">
<div id="title" style="width: 220px; height: 100%; float: left;">
<p style="margin-top: 0px; margin-bottom: 0px;">[CLOCK]</p>
</div>
<div id="title-buttons" style="width: 30px; height: 100%; float: right;">
<p style="margin-top: 0px; margin-bottom: 0px;">[X]</p>
</div>
</div>
<div id="window-content" style="width: 100%; height: 80px; color:rgba(255, 255, 255, 0.3); font-family: 'Dianzhen'; font-size: 30px; text-align: center;">
<p id="content-line-1" style="margin-top: 0px; margin-bottom: 0px; font-size: 30px;"></p>
<p id="content-line-2" style="margin-top: 0px; margin-bottom: 0px; font-size: 40px;"></p>
</div>
</div>
<div id="shadow" style="width: 250px; height: 100px; background-color: rgba(0, 0, 255, 0); position: absolute; left: 20px; top: 20px;">
<div style="width: 230px; height: 80px; background-color: rgba(0, 0, 255, 0); float: left;"></div>
<div style="width: 20px; height: 80px; background-color: rgba(0, 0, 0, 0.3); float: right;"></div>
<div style="width: 250px; height: 20px; background-color: rgba(0, 0, 0, 0.3); position: relative; top: 80px;"></div>
</div>
</body>
</html>