Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit96ec8f7

Browse files
committed
Add score clock
1 parent5eb1251 commit96ec8f7

15 files changed

+404
-0
lines changed

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<html>
22

33
<head>
4+
<title>Genetic Algorithm Keyboard</title>
5+
<linkrel="icon"type="image/png"href="themes/default/assets/images/favicon.png"/>
46
<linkrel="stylesheet"type="text/css"href="semantic.min.css">
57
<script
68
src="https://code.jquery.com/jquery-3.1.1.min.js"

‎projects/jquery-3.7.1.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎projects/score-clock.css‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
:root {
2+
--match-name-length:105;
3+
--match-name-length-1100:70;
4+
--match-name-length-800:52;
5+
--match-name-length-500:42;
6+
--description-length:142;
7+
--description-length-1100:95;
8+
--description-length-800:71;
9+
--description-length-500:57;
10+
}
11+
12+
html,body {
13+
background-color:#1a1a1a;
14+
color:#f1f1f1;
15+
height:100%;
16+
margin:0;
17+
padding:0;
18+
width:100%;
19+
-webkit-user-select: none;
20+
user-select: none;
21+
}
22+
23+
#clock-container {
24+
height:100%;
25+
position: relative;
26+
}
27+
28+
#clock-center {
29+
margin:0;
30+
position: absolute;
31+
top:50%;
32+
left:50%;
33+
-ms-transform:translate(-50%,-50%);
34+
transform:translate(-50%,-50%);
35+
text-align: center;
36+
width:95vw;
37+
}
38+
39+
@font-face {
40+
font-family: ChivoMono;
41+
src: url(../themes/default/assets/fonts/ChivoMono-Light.ttf);
42+
font-weight:300;
43+
}
44+
45+
@font-face {
46+
font-family: ChivoMono;
47+
src: url(../themes/default/assets/fonts/ChivoMono-Regular.ttf);
48+
font-weight:400;
49+
}
50+
51+
@font-face {
52+
font-family: ChivoMono;
53+
src: url(../themes/default/assets/fonts/ChivoMono-Bold.ttf);
54+
font-weight:700;
55+
}
56+
57+
@font-face {
58+
font-family: ChivoMono;
59+
src: url(../themes/default/assets/fonts/ChivoMono-ExtraBold.ttf);
60+
font-weight:800;
61+
}
62+
63+
@font-face {
64+
font-family: ChivoMono;
65+
src: url(../themes/default/assets/fonts/ChivoMono-ExtraBoldItalic.ttf);
66+
font-weight:800;
67+
font-style: italic;
68+
}
69+
70+
@font-face {
71+
font-family: ChivoMono;
72+
src: url(../themes/default/assets/fonts/ChivoMono-Black.ttf);
73+
font-weight:900;
74+
}
75+
76+
#info {
77+
margin:0;
78+
position: absolute;
79+
top:90%;
80+
left:50%;
81+
-ms-transform:translate(-50%,-50%);
82+
transform:translate(-50%,-50%);
83+
text-align: center;
84+
width:95vw;
85+
font-family:'ChivoMono', monospace;
86+
font-weight:400;
87+
font-size:1vw;
88+
color:#c7c7c7;
89+
visibility: hidden;
90+
}
91+
92+
#socialsa {
93+
font-size:2vw;
94+
color:#c7c7c7;
95+
text-decoration: none;
96+
}
97+
98+
.description {
99+
color:#f1f1f1;
100+
font-family:'ChivoMono', monospace;
101+
font-weight:300;
102+
margin:0;
103+
font-size:calc(95vw/var(--description-length)*1.65);
104+
}
105+
106+
#hidden-description {
107+
visibility: hidden;
108+
}
109+
110+
#score {
111+
margin:0;
112+
font-family:'ChivoMono', monospace;
113+
font-weight:900;
114+
font-size:10vw;
115+
white-space: nowrap;
116+
}
117+
118+
.score-num {
119+
color:#a561f2;
120+
}
121+
122+
.highlight {
123+
color:#b179f2;
124+
font-weight:700;
125+
}
126+
127+
#match-name {
128+
font-weight:800;
129+
font-size:calc(95vw/var(--match-name-length)*1.6578947368);
130+
}
131+
132+
#date {
133+
white-space: nowrap;
134+
}
135+
136+
#buttons {
137+
width:21vw;
138+
margin:0 auto;
139+
}
140+
141+
#info-button {
142+
float: left;
143+
cursor: pointer;
144+
}
145+
146+
#info-button:hover {
147+
color:#c7c7c7;
148+
}
149+
150+
#random-button {
151+
float: right;
152+
cursor: pointer;
153+
}
154+
155+
#random-button:hover {
156+
color:#c7c7c7;
157+
}
158+
159+
.material-symbols-outlined {
160+
font-size:3vw;
161+
}
162+
163+
@mediaonly screenand (max-width:1100px) {
164+
#score {
165+
font-size:15vw;
166+
}
167+
.description {
168+
font-size:calc(95vw/var(--description-length-1100)*1.65);
169+
}
170+
#match-name {
171+
font-size:calc(95vw/var(--match-name-length-1100)*1.6578947368);
172+
}
173+
#buttons {
174+
width:31.5vw;
175+
}
176+
.material-symbols-outlined {
177+
font-size:4.5vw;
178+
}
179+
#info {
180+
font-size:1.5vw;
181+
}
182+
#socialsa {
183+
font-size:3vw;
184+
}
185+
}
186+
187+
@mediaonly screenand (max-width:800px) {
188+
#score {
189+
font-size:20vw;
190+
}
191+
.description {
192+
font-size:calc(95vw/var(--description-length-800)*1.65);
193+
}
194+
#match-name {
195+
font-size:calc(95vw/var(--match-name-length-800)*1.6578947368);
196+
}
197+
#buttons {
198+
width:42vw;
199+
}
200+
.material-symbols-outlined {
201+
font-size:6vw;
202+
}
203+
#info {
204+
font-size:2vw;
205+
}
206+
#socialsa {
207+
font-size:4vw;
208+
}
209+
}
210+
211+
@mediaonly screenand (max-width:500px) {
212+
#score {
213+
font-size:25vw;
214+
}
215+
.description {
216+
font-size:calc(95vw/var(--description-length-500)*1.65);
217+
}
218+
#match-name {
219+
font-size:calc(95vw/var(--match-name-length-500)*1.6578947368);
220+
}
221+
#buttons {
222+
width:52.5vw;
223+
}
224+
.material-symbols-outlined {
225+
font-size:7.5vw;
226+
}
227+
#info {
228+
font-size:2.5vw;
229+
}
230+
#socialsa {
231+
font-size:5vw;
232+
}
233+
}

‎projects/score-clock.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<html>
2+
3+
<head>
4+
<title>Score Clock</title>
5+
<linkrel="icon"type="image/png"href="../themes/default/assets/images/favicon.png"/>
6+
<linkrel="stylesheet"href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,700,0,200">
7+
<scriptsrc="jquery-3.7.1.min.js"></script>
8+
<scriptsrc="scores.js"></script>
9+
<scriptsrc="score-clock.js"></script>
10+
<metaname="viewport"content="width=device-width,initial-scale=1.0">
11+
<linkrel="stylesheet"type="text/css"href="score-clock.css">
12+
<metaproperty="og:image"content="thumbnail.jpg">
13+
<metaproperty="og:image:type"content="image/jpeg">
14+
<metaproperty="og:image:width"content="1200">
15+
<metaproperty="og:image:height"content="627">
16+
</head>
17+
18+
<body>
19+
<divid="clock-container">
20+
<divid="clock-center">
21+
<divclass="description">
22+
<aid="match-name"class="highlight"target="_blank"rel="noopener noreferrer"href="https://www.google.com/"></a><br>was<spanid="article"></span><spanid="sport"class="highlight"></span> match on<spanid="date"class="highlight"></span>.<br>The final score was:
23+
</div>
24+
<divid="score">
25+
<spanid="score1"class="score-num"></span><span>-</span><spanid="score2"class="score-num"></span>
26+
</div>
27+
<divid="buttons">
28+
<spanid="info-button"class="material-symbols-outlined"onclick="showInfo()">
29+
info
30+
</span>
31+
<spanid="random-button"class="material-symbols-outlined"onclick="updateInfo()">
32+
shuffle
33+
</span>
34+
</div>
35+
<br>
36+
<br>
37+
<br>
38+
<br>
39+
</div>
40+
<divid="info">
41+
This clock represents the current time as the score from a past sporting event.<br><spanid="num-games"class="highlight">10</span> event<spanid="multiples">s</span> found with the current score.<br><br>
42+
<divid="socials">
43+
<atarget="_blank"rel="noopener noreferrer"href="https://www.youtube.com/@adumb_codes">
44+
<ion-iconname="logo-youtube"></ion-icon>
45+
</a>
46+
<atarget="_blank"rel="noopener noreferrer"href="https://twitter.com/adumb_codes">
47+
<ion-iconname="logo-twitter"></ion-icon>
48+
</a>
49+
<atarget="_blank"rel="noopener noreferrer"href="https://github.com/sponsors/adumb-codes">
50+
<ion-iconname="logo-github"></ion-icon>
51+
</a>
52+
</div>
53+
</div>
54+
</div>
55+
<scripttype="module"src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
56+
<scriptnomodulesrc="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
57+
</body>
58+
</html>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp