WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2450
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
25 July 2025
Selettore tema modalità scura con LocalStorage
24 June 2025
Elite Real Estate: Appartamenti, Ville, Case in Vendita e in Affitto
4 July 2025
Spotify Clone – Lettore musicale web
HTML
Copy
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="watch"></div> <script src="./script.js"></script> </body> </html>
CSS
Copy
.watch{ --watch-color: white; --screen-color: black; font-size: 4.5vmin; font-family: monospace; color: #fff; padding: 2em 1.5em; border: 2px solid var(--watch-color); border-radius: 2em; box-shadow: inset 0 0 0 .5em black, inset 0 0 1rem 1em hsl(0 0% 100% / .25); background-color: var(--screen-color); background-image: linear-gradient(to bottom right, #fff0 50%, hsl(0 0% 100% / .25)); position: relative; } .watch::before, .watch::after{ content: ""; position: absolute; background-color: var(--watch-color); z-index: -1; } .watch::after{ inset: -.5em 20%; border-radius: .5em; background-image: linear-gradient(#fff0, hsl(0 0% 0% / .5) .5em calc(100% - .5em), #fff0); } .watch::before{ inset: -50vh 25%; background-image: repeating-linear-gradient(#fff0 0 .3em, hsl(0 0% 0% / .125) .3em .5em, #fff0 .5em .8em), radial-gradient(circle, #fff0, hsl(0 0% 0% / .25) 50%); } .keyword { color: #ddca7e; } .def { color: #809bbd; } .operator { color: #cccccc; } .property { color: #9a8297; } .string { color: #96b38a; } .number { color: #d0782a; } * { box-sizing: border-box; } body { margin: 0; padding: 1em; min-height: 100vh; background-color: #1d1e22; display: grid; place-items: center; overflow: hidden; }
JS
Copy
clock(); function clock(){ const date = new Date(); const indent = 2; const clockObj = { am_pm: date.getHours() >= 12 ? 'pm' : 'am' , hours: date.getHours() % 12 || 12, minutes: date.getMinutes(), seconds: date.getSeconds(), day: date.toLocaleDateString('en-us', {weekday:'long'}), date: date.getDate(), month: date.toLocaleDateString('en-us', {month:'long'}), year: date.getFullYear(), } const entryFormat = ([key, val]) => { return `${' '.repeat(indent)}<span class="property">${key}</span>: ${valFormat(val)}` } const valFormat = (val) => { if(typeof val == 'number') return `<span class="number">${val}</span>` else if (typeof val == 'string') return `<span class="string">"${val}"</span>` } document.querySelector(".watch").innerHTML = ` <span class="keyword">const</span> <span class="def">clock</span> = {<br> ${Object.entries(clockObj).reduce((str, entry) => str + entryFormat(entry) + ',<br>', '')}};` requestAnimationFrame(clock); }
