WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2850
Andev.web
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
18 November 2025
Metehan
17 July 2025
Arabisches rotierendes Anmelde-/Registrierungsformular (Glassmorphic)
26 July 2025
Schaltfläche „Generieren“
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); }
