Skip to content

Commit e06bfd6

Browse files
wilberdhpwilberdhp
committed
initial commit
0 parents  commit e06bfd6

File tree

3 files changed

+388
-0
lines changed

3 files changed

+388
-0
lines changed

‎index.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="./styles.css">
7+
8+
<!-- Bootstrap -->
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
10+
<title>Digital Clock</title>
11+
</head>
12+
<body>
13+
<div class="wrapper">
14+
<div class="display">
15+
<div id="time"></div>
16+
</div>
17+
<span></span>
18+
<span></span>
19+
</div>
20+
21+
<div class="settings">
22+
23+
<i class="bi bi-gear open-settings"></i>
24+
<div class="settings-container">
25+
<div class="container-color">
26+
<label for="color-1">Color 1</label>
27+
<input class="select-color" type="color" name="color-1" id="color-1" value="#00ffff">
28+
</div>
29+
<div class="container-color">
30+
<label for="color-2">Color 2</label>
31+
<input class="select-color" type="color" name="color-2" id="color-2" value="#ffe100">
32+
</div>
33+
<div class="container-color">
34+
<label for="color-3">Color 3</label>
35+
<input class="select-color" type="color" name="color-3" id="color-3" value="#ff00ff">
36+
</div>
37+
<div class="container-color dark-light">
38+
<label for="dark-light-checkbox" class="toggle-container">
39+
<input class="dark-light-check" type="checkbox" name="dark-light" id="dark-light-checkbox">
40+
<span class="toggle-ball">
41+
<i class="bi bi-brightness-high-fill sun"></i>
42+
<i class="bi bi-moon-stars-fill dark"></i>
43+
</span>
44+
45+
</label>
46+
</div>
47+
</div>
48+
</div>
49+
<script src="./script.js"></script>
50+
</body>
51+
</html>

‎script.js

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// Clock
2+
const time = document.getElementById("time");
3+
setInterval(() => {
4+
const date = new Date();
5+
6+
let hours = date.getHours();
7+
let minutes = date.getMinutes();
8+
let seconds = date.getSeconds();
9+
let meridian = hours < 12 ? "AM" : "PM";
10+
11+
hours = hours > 12 ? hours - 12 : hours;
12+
hours = hours < 10 ? `0${hours}` : hours;
13+
minutes = minutes < 10 ? `0${minutes}` : minutes;
14+
seconds = seconds < 10 ? `0${seconds}` : seconds;
15+
16+
time.textContent = `${hours}:${minutes}:${seconds} ${meridian}`
17+
});
18+
19+
// =========================== Settings ===========================
20+
const selectColor1 = document.getElementById("color-1");
21+
const selectColor2 = document.getElementById("color-2");
22+
const selectColor3 = document.getElementById("color-3");
23+
const wrapper = document.querySelector(".wrapper");
24+
const selectColors = document.querySelectorAll(".select-color");
25+
const btnOpenSettings = document.querySelector(".open-settings");
26+
const settings = document.querySelector(".settings-container");
27+
28+
// Abrir la ventana de modificaciones
29+
btnOpenSettings.addEventListener("click", (e) => {
30+
e.preventDefault();
31+
e.stopPropagation();
32+
settings.classList.add("open");
33+
})
34+
35+
// Cerrar la ventana de modificaciones
36+
document.addEventListener("click", (e) => {
37+
if (settings.classList.contains("open") && !settings.contains(e.target)) {
38+
settings.classList.remove("open");
39+
}
40+
})
41+
42+
43+
let gradient = `linear-gradient(135deg, ${selectColor1.value}, ${selectColor2.value}, ${selectColor3.value})`;
44+
45+
// Agregar el color guardado
46+
document.addEventListener("DOMContentLoaded", () => {
47+
if (localStorage.getItem("colors")) {
48+
const colors = JSON.parse(localStorage.getItem("colors"));
49+
const { color1, color2, color3 } = colors;
50+
selectColor1.value = color1;
51+
selectColor2.value = color2;
52+
selectColor3.value = color3;
53+
54+
gradient = `linear-gradient(135deg, ${color1}, ${color2}, ${color3})`;
55+
wrapper.style.background = gradient;
56+
time.style.background = gradient;
57+
}
58+
59+
60+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
61+
62+
if (!prefersDark.matches || localStorage.getItem("theme") === "light") {
63+
document.getElementById("dark-light-checkbox").checked = true;
64+
document.body.setAttribute("data-theme", "light");
65+
return;
66+
}
67+
68+
if (prefersDark.matches || localStorage.getItem("theme") === "dark") {
69+
document.body.removeAttribute("data-theme");
70+
return;
71+
}
72+
73+
})
74+
75+
// Asignar el color y guardar el nuevo
76+
selectColors.forEach(color => {
77+
color.addEventListener("input", (e) => {
78+
e.preventDefault();
79+
gradient = `linear-gradient(135deg, ${selectColor1.value}, ${selectColor2.value}, ${selectColor3.value})`;
80+
81+
wrapper.style.background = gradient;
82+
time.style.background = gradient;
83+
84+
const colors = {
85+
color1: selectColor1.value,
86+
color2: selectColor2.value,
87+
color3: selectColor3.value
88+
}
89+
localStorage.setItem("colors", JSON.stringify(colors))
90+
})
91+
})
92+
93+
94+
const checkbox = document.getElementById("dark-light-checkbox");
95+
const labelCheckbox = document.querySelector("label.toggle-container");
96+
97+
labelCheckbox.addEventListener("click", () => {
98+
if (checkbox.checked) {
99+
document.body.setAttribute("data-theme", "light");
100+
localStorage.setItem("theme", "light");
101+
} else {
102+
document.body.removeAttribute("data-theme");
103+
localStorage.setItem("theme", "dark");
104+
}
105+
})
106+

‎styles.css

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
2+
:root {
3+
--background-color: #000;
4+
--setting-color: white;
5+
--toggle-mode-color: white;
6+
}
7+
8+
[data-theme="light"] {
9+
--background-color: #fff;
10+
--setting-color: #000;
11+
--toggle-mode-color: #3853ff;
12+
}
13+
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
font-family: 'Poppins', sans-serif;
19+
}
20+
21+
html, body {
22+
height: 100%;
23+
width: 100%;
24+
display: grid;
25+
place-items: center;
26+
background-color: var(--background-color);
27+
z-index: -1;
28+
}
29+
30+
.wrapper {
31+
height: 150px;
32+
width: 520px;
33+
position: relative;
34+
border-radius: 10px;
35+
background: linear-gradient(135deg, #00ffff, #ffe100, #ff00ff);
36+
animation: animation 1.5s linear infinite;
37+
-webkit-animation: animation 1.5s linear infinite;
38+
}
39+
40+
.wrapper .display, .wrapper span {
41+
position: absolute;
42+
top: 50%;
43+
left: 50%;
44+
transform: translate(-50%, -50%);
45+
}
46+
47+
.wrapper .display {
48+
z-index: 999;
49+
background-color: var(--background-color);
50+
width: calc(100% - 15px);
51+
height: calc(100% - 15px);
52+
text-align: center;
53+
border-radius: 6px;
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
}
58+
59+
.display #time {
60+
font-size: 80px;
61+
font-weight: 600;
62+
letter-spacing: 1px;
63+
background: linear-gradient(135deg, #00ffff, #ffe100, #ff00ff);
64+
background-clip: text !important;
65+
-webkit-text-fill-color: transparent !important;
66+
animation: animation 1.5s linear infinite;
67+
-webkit-animation: animation 1.5s linear infinite;
68+
}
69+
70+
@keyframes animation {
71+
100% {
72+
filter: hue-rotate(360deg) ;
73+
-webkit-filter: hue-rotate(360deg) ;
74+
}
75+
}
76+
77+
.wrapper span {
78+
height: 100%;
79+
width: 100%;
80+
background: inherit;
81+
border-radius: 10px;
82+
}
83+
84+
.wrapper span:first-child {
85+
filter: blur(10px);
86+
-webkit-filter: blur(10px);
87+
}
88+
89+
.wrapper span:last-child {
90+
filter: blur(20px);
91+
-webkit-filter: blur(20px);
92+
}
93+
94+
@media (width < 520px) {
95+
.wrapper {
96+
height: 90px;
97+
width: 350px;
98+
}
99+
100+
.display #time {
101+
font-size: 50px;
102+
}
103+
}
104+
105+
@media (width <= 360px) {
106+
.wrapper {
107+
height: 80px;
108+
width: 300px;
109+
}
110+
.display #time {
111+
font-size: 40px;
112+
}
113+
}
114+
115+
.settings {
116+
position: absolute;
117+
top: 10px;
118+
right: 10px;
119+
}
120+
121+
.settings i.open-settings {
122+
font-size: 40px;
123+
position: absolute;
124+
top: 10px;
125+
right: 10px;
126+
z-index: -1;
127+
color: var(--setting-color);
128+
cursor: pointer;
129+
opacity: 0.7;
130+
}
131+
132+
.settings i.open-settings:hover {
133+
opacity: 1;
134+
}
135+
136+
137+
.settings-container {
138+
z-index: 999;
139+
display: none;
140+
width: 150px;
141+
border-radius: 10px;
142+
padding: 10px;
143+
background-color: var(--background-color);
144+
color: var(--setting-color);
145+
font-weight: 600;
146+
}
147+
148+
.settings-container.open {
149+
display: block;
150+
}
151+
152+
.settings-container .container-color {
153+
margin: 12px 2px;
154+
cursor: pointer;
155+
display: flex;
156+
justify-content: center;
157+
align-items: center;
158+
gap: 10px;
159+
}
160+
161+
.container-color label,
162+
.container-color input {
163+
cursor: pointer;
164+
}
165+
166+
.container-color input {
167+
border: none;
168+
border-radius: 5px;
169+
170+
}
171+
172+
173+
.toggle-container {
174+
position: relative;
175+
width: 60px;
176+
height: 25px;
177+
border-radius: 100vmax;
178+
border: 1.5px solid var(--toggle-mode-color);
179+
display: flex;
180+
align-items: center;
181+
z-index: 1;
182+
}
183+
184+
input[type="checkbox"] {
185+
display: none;
186+
}
187+
188+
.toggle-ball {
189+
height: 25px;
190+
width: 25px;
191+
border-radius: 100vmax;
192+
position: absolute;
193+
background-color: var(--toggle-mode-color);
194+
transition: transform 0.3s ease-in-out;
195+
-webkit-transition: transform 0.3s ease-in-out;
196+
-moz-transition: transform 0.3s ease-in-out;
197+
-ms-transition: transform 0.3s ease-in-out;
198+
-o-transition: transform 0.3s ease-in-out;
199+
display: flex;
200+
justify-content: center;
201+
align-items: center;
202+
}
203+
204+
205+
input[type="checkbox"]:checked + .toggle-ball {
206+
transform: translateX(34px);
207+
208+
> .dark {
209+
display: none;
210+
}
211+
212+
> .sun {
213+
display: block;
214+
}
215+
}
216+
217+
.dark, .sun {
218+
position: absolute;
219+
font-size: 100%;
220+
}
221+
222+
.sun {
223+
color: #fff;
224+
display: none;
225+
}
226+
227+
228+
.dark {
229+
display: block;
230+
color: #3853ff;
231+
}

0 commit comments

Comments
 (0)