-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
111 lines (103 loc) · 11.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Uniqlock Rewind</title>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<meta name="description" content="A modern remastering of an old-web classic" />
<meta name="url" content='https://megajerk.github.io/Uniqlock/'>
<meta property="og:title" content="Uniqlock Rewind" />
<meta property="og:description" content="A modern remastering of an old-web classic" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://raw.githubusercontent.com/MegaJerk/Uniqlock/main/media/embed%20cards/Uniqlock%20Card%20-%2001p.png" />
<meta property="og:image:alt" content="two dancers looking forward at the camera and holding the same pose, each dancer is using their hands to imitate the shape of a bird. The text Uniqlock Rewind is shown in the top left corner of the image, while the text Music, Dance, Clock is shown along the bottom." />
<meta property="og:url" content="https://megajerk.github.io/Uniqlock/" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Uniqlock Rewind" />
<meta name="twitter:image" content="https://raw.githubusercontent.com/MegaJerk/Uniqlock/main/media/embed%20cards/Uniqlock%20Card%20-%2001p.png" />
<meta name="twitter:image:alt" content="two dancers looking forward at the camera and holding the same pose, each dancer is using their hands to imitate the shape of a bird. The text Uniqlock Rewind is shown in the top left corner of the image, while the text Music, Dance, Clock is shown along the bottom." />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="dialog" id="modal">
<div class="marqueeContainer">
<div class="marqueeTop">
<div class="marqueeText">
<div class="rtl">UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND -</div>
<div class="rtl">UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND - UNIQLOCK - FOREVER - UNIQLOCK - REWIND -</div>
</div>
</div>
</div>
<div class="modalText">
<span class="modalTextUpper">UNIQLOCK</span>
<span class="modalTextLower"><i>REWIND <<</i></span>
</div>
<div class="marqueeContainer">
<div class="marqueeBottom">
<div class="marqueeText redText">
<div class="ltr1">MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div>MUSIC<div class="bullet">.</div>DANCE<div class="bullet">.</div>CLOCK<div class="bullet">.</div></div>
</div>
</div>
</div>
</div>
<div id="flexContainer">
<div id="audioNav">
<span class="musicBy">MUSIC.FPM /</span>
<button id="mute" class="audioControl" data-muted="false" data-unmuted-Volume="0.05" data-action="mute"><img src="./assets/icons/Icon%20-%20Sound%20On%20-%2011x10%20-%20black.png" alt="small icon showing a speaker playing music"></button>
<input type="range" id="volume" class="control-volume audioControl" min="0" max="2" value="0.05" step="0.01" data-action="volume">
</div>
<div id="viewContainer">
<div id="time1" class="">
<div data-time-Set="false" data-hours data-minutes data-seconds class="time">
<span data-previous-Value="" class="h1">1</span><span data-previous-Value="" class="h2">2</span>
<span data-previous-Value="" class="m1">0</span><span data-previous-Value="" class="m2">0</span>
<span data-previous-Value="" class="s1">0</span><span data-previous-Value="" class="s2">1</span>
</div>
<div class="timezone">America/New_York</div>
</div>
<div id="time2" class="">
<div data-time-Set="false" data-hours data-minutes data-seconds class="time">
<span data-previous-Value="" class="h1">1</span><span data-previous-Value="" class="h2">2</span>
<span data-previous-Value="" class="m1">0</span><span data-previous-Value="" class="m2">0</span>
<span data-previous-Value="" class="s1">0</span><span data-previous-Value="" class="s2">1</span>
</div>
<div class="timezone">America/New_York</div>
</div>
<div id="videoPlayer" class="">
<!-- <video class="video" onloadeddata='(function(){console.log("video - onload: loaded");}())'> -->
<video class="video">
<!-- <source src="" type="video/webm"> -->
</video>
</div>
<div id="hourPlayer" class="">
<video class="video">
<!-- <source src="" type="video/webm"> -->
</video>
</div>
</div>
<!-- Unused side menu seen in certain version of the Uniqlock. Might implement later for User Config options -->
<!--
<input type="checkbox" id="menu" name="menu" class="menu-checkbox">
<div class="menu">
<label class="menu-toggle" for="menu"><span>MENU<br/><span dir="rtl">➜</span></span></label>
<ul>
<li>
<a href="#">Menu-1</a>
</li>
<li>
<a href="#">Menu-2</a>
</li>
<li>
<a href="#">Menu-4</a>
</li>
<li>
<a href="#">Menu-3</a>
</li>
</ul>
</div>
-->
</div>
<script type="module" src="./js/mainScript.js"></script>
</body>
</html>