Skip to content

Commit 8f3c286

Browse files
RingoMarRingoMar
committed
Feat: Flex style
1 parent 3fbc5c7 commit 8f3c286

8 files changed

+151
-21
lines changed

‎nightly/1693928850766216.jpg

1.04 MB
Loading

‎nightly/4078325774.webp

40.7 KB
Binary file not shown.

‎nightly/H9v5o8vP6RKkQtR77LIGrGDE-3174041317.png

518 KB
Loading

‎nightly/f76aec5a93b9843bda71b35ca8b710da.png

61 KB
Loading

‎nightly/flex.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.Flexcontainer {
2+
display: flex;
3+
/* width: 100%; */
4+
gap: 1rem;
5+
justify-content: space-evenly;
6+
}
7+
8+
.fnum {
9+
10+
color: #4dd0e1;
11+
text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8);
12+
-webkit-text-stroke: 2px #4A5E79;
13+
text-align: center;
14+
font-size: 20vw;
15+
font-weight: 600;
16+
}
17+
18+
.spacer.fnum {
19+
/* display: none; */
20+
}
21+
22+
.telem {
23+
/* display: none; */
24+
}
25+
26+
.infoCenter {
27+
width: 100%;
28+
display: flex;
29+
30+
align-self: center;
31+
color: #000;
32+
}

‎nightly/index.html

+74-10
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
2424
<title>Elapsed Timer - Nightly</title>
2525
<link rel="stylesheet" href="./nightly.css" />
26+
<link rel="stylesheet" href="./flex.css" />
2627

2728
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0GS2KLZXCG"></script>
2829
<script>
@@ -38,28 +39,87 @@
3839

3940
<body>
4041
<div class="container">
41-
<div class="hours_time num">00</div>
42-
<div class="min_time num">00</div>
43-
<div class="sec_time num">00</div>
42+
<div class="hours_time1 num">00</div>
43+
<div class="min_time1 num">00</div>
44+
<div class="sec_time1 num">00</div>
4445
<div class="hours telem">HOURS</div>
45-
<div class="min telem">MINUTES</div>
46+
<div class="min telem ">MINUTES</div>
4647
<div class="sec telem">SECONDS</div>
4748
</div>
4849

50+
<div class="Flexcontainer">
51+
<div class="hoursBox">
52+
<div class="hours_time fnum">00</div>
53+
<div class="hours telem">HOURS</div>
54+
</div>
55+
<div class="spacer fnum">:</div>
56+
57+
58+
<div class="minuteBox">
59+
<div class="min_time fnum">00</div>
60+
<div class="min telem ">MINUTES</div>
61+
</div>
62+
<div class="spacer fnum">:</div>
63+
64+
<div class="secondBox">
65+
<div class="sec_time fnum">00</div>
66+
<div class="sec telem">SECONDS</div>
67+
</div>
68+
69+
</div>
70+
71+
<div class="infoCenter">
72+
<button type="button" onclick="toogleSpacer();">Spacer</button>
73+
<button type="button" onclick="toogleDial();"> remove dial</button>
74+
<h1><- test</h1>
75+
</div>
76+
4977
<script src="./urlMods.js"></script>
5078

5179
<script src="./modifactions.js"></script>
5280

81+
<script>
82+
function toogleDial() {
83+
var dialItem = document.querySelectorAll('.telem')
84+
dialItem.forEach(d => {
85+
d.classList.toggle('hidden');
86+
});
87+
}
88+
89+
90+
function toogleSpacer() {
91+
var spacerItem = document.querySelectorAll('.spacer')
92+
spacerItem.forEach(spc => {
93+
spc.classList.toggle('hidden');
94+
});
95+
}
96+
</script>
97+
5398
<script>
5499
const h = document.querySelector(".hours_time");
55100
const m = document.querySelector(".min_time");
56101
const s = document.querySelector(".sec_time");
102+
const h1 = document.querySelector(".hours_time1");
103+
const m1 = document.querySelector(".min_time1");
104+
const s1 = document.querySelector(".sec_time1");
57105
function pad(num) {
106+
num = Number(num);
107+
108+
if (isNaN(num)) {
109+
return "00";
110+
}
111+
112+
if (num < 0) {
113+
return "-01";
114+
}
115+
58116
if (num === -1) {
59117
return "00";
60-
} else {
61-
return (num < 10 ? "0" : "") + Math.round(num);
62118
}
119+
120+
let roundedNum = Math.round(num).toString();
121+
122+
return (roundedNum.length === 1 ? "0" : "") + roundedNum;
63123
}
64124

65125
let timestampParam = new URLSearchParams(window.location.search);
@@ -82,13 +142,13 @@
82142
if (stopParam) {
83143
const parsedTime = Date.parse(stopParam);
84144
if (!isNaN(parsedTime)) {
85-
currentTime = parsedTime / 1000; // Convert milliseconds to seconds
145+
currentTime = parsedTime / 1000;
86146
} else {
87147
console.error("Invalid date format for stopParam:", stopParam);
88-
currentTime = Math.floor(Date.now() / 1000); // Fallback to current time
148+
currentTime = Math.floor(Date.now() / 1000);
89149
}
90150
} else {
91-
currentTime = Math.floor(Date.now() / 1000); // Fallback to current time
151+
currentTime = Math.floor(Date.now() / 1000);
92152
}
93153

94154
// Calculate elapsed time
@@ -98,14 +158,18 @@
98158
var minutes = Math.floor((elapsedTime % 3600) / 60);
99159
var seconds = elapsedTime % 60;
100160

161+
101162
h.textContent = pad(hours);
102163
m.textContent = pad(minutes);
103164
s.textContent = pad(seconds);
165+
h1.textContent = pad(hours);
166+
m1.textContent = pad(minutes);
167+
s1.textContent = pad(seconds);
104168
}
105169

106170
updateTimer();
107171

108-
setInterval(updateTimer, 1000);
172+
setInterval(updateTimer, 100);
109173
</script>
110174
</body>
111175

‎nightly/modifactions.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
const contain = document.querySelector(".container");
44

55
contain.addEventListener(
6-
"contextmenu",
6+
"contextmenuu",
77
function (ev) {
88
ev.preventDefault();
99

‎nightly/nightly.css

+44-10
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,40 @@ body {
99
color: white;
1010
}
1111

12-
.container {
12+
.hidden {
13+
display: none;
14+
}
15+
16+
.imageBatman {
17+
background: url("./H9v5o8vP6RKkQtR77LIGrGDE-3174041317.png") no-repeat;
18+
-webkit-background-clip: text;
19+
background-clip: text;
20+
color: transparent;
21+
background-size: cover;
22+
background-position: 425px -347px;
23+
}
24+
25+
.imageCat {
26+
27+
background: url("./1693928850766216.jpg") no-repeat;
28+
background-size: cover;
29+
background-position: center;
30+
}
1331

32+
.textCat {
33+
position: absolute;
34+
top: 50%;
35+
left: 50%;
36+
/* transform: translate(-50%, -50%); */
37+
color: transparent;
38+
background: url("./1693928850766216.jpg") no-repeat;
39+
background-clip: text;
40+
-webkit-background-clip: text;
41+
text-fill-color: transparent;
42+
}
43+
44+
45+
.container {
1446
transition: all 1s ease-in;
1547
display: grid;
1648
grid-template-columns: repeat(3, 1fr);
@@ -22,12 +54,14 @@ body {
2254
"hours min sec";
2355
justify-content: space-evenly;
2456
overflow: hidden;
25-
background: url("./RDR2-3307462886.png") no-repeat;
26-
-webkit-background-clip: text;
27-
background-clip: text;
28-
color: transparent;
57+
58+
/* background-image: url('your-image-url.jpg');
59+
background-size: cover;
60+
background-position: center;
61+
position: relative; */
2962
}
3063

64+
3165
.hours_time {
3266
grid-area: hours_time;
3367
}
@@ -54,9 +88,9 @@ body {
5488

5589
.num {
5690

57-
/* color: rgba(101, 150, 159); */
58-
/* text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8); */
59-
/* -webkit-text-stroke: 2px #4A5E79; */
91+
color: #4dd0e1;
92+
text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8);
93+
-webkit-text-stroke: 2px #4A5E79;
6094
text-align: center;
6195
font-size: 4cm;
6296
font-weight: 600;
@@ -94,8 +128,8 @@ body {
94128
}
95129

96130
.telem {
97-
/* color: #79ADAB; */
98-
/* -webkit-text-stroke: 2px #FF3434; */
131+
color: #4dd0e1;
132+
-webkit-text-stroke: 2px #4A5E79;
99133
text-align: center;
100134
font-size: calc(0.3 * 4cm);
101135
font-weight: 600;

0 commit comments

Comments
 (0)