Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Advanced Analog-Digital Watch</title>

<style>

* {

font-family: 'Segoe UI', sans-serif;

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #acbaca;

transition: background 0.5s;

}

.clock-container {

display: flex;

flex-direction: column;

align-items: center;

gap: 30px;

}

.clock {

position: relative;

width: 350px;

height: 350px;

background: #c9d5e0;

display: flex;

justify-content: center;

align-items: center;

border-radius: 50px;

box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.15),

inset 15px 15px 10px rgba(255, 255, 255, 0.75),

-15px -15px 35px rgba(255, 255, 255, 0.55),

inset -1px -1px 10px rgba(0, 0, 0, 0.2);

transition: all 0.5s;

}

.clock::before {

content: '';

position: absolute;

width: 6px;

height: 6px;

background: #e91e63;

border-radius: 50%;

z-index: 10000;

box-shadow: 0 0 0 2px #e91e63,

0 0 0 4px #fff,

0 0 10px 6px rgba(0, 0, 0, 0.15);

}

.clock .digits {

position: absolute;

inset: 40px;

background: #152b4a;

border-radius: 50%;

box-shadow: 5px 5px 15px #152b4a66,

inset 5px 5px 15px rgba(255, 255, 255, 0.55),

-6px -6px 10px rgba(255, 255, 255, 1);

display: flex;

justify-content: center;

align-items: center;

}

.clock .digits span {

position: absolute;

inset: 10px;

text-align: center;

color: #fff;

font-size: 1.5rem;

transform: rotate(calc(30deg * var(--i)));

text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);

}

.clock .digits span b {

font-weight: 600;

display: inline-block;

transform: rotate(calc(-30deg * var(--i)));

}

.clock .digits::before {

content: '';

position: absolute;

inset: 40px;

background: linear-gradient(#2196f3, #e91e63);

border-radius: 50%;

animation: animate 2s linear infinite;

opacity: 0.7;

}

@keyframes animate {

0% {

transform: rotate(360deg);

}

100% {

transform: rotate(0deg);

}

.clock .digits::after {

content: '';

position: absolute;

inset: 43px;

background: #152b4a;

border-radius: 50%;

}

.clock .digits .circle {

position: absolute;

inset: 0;

border-radius: 50%;

display: flex;

justify-content: center;

z-index: 10;

}

.clock .digits .circle i {

position: absolute;

width: 3px;

height: 50%;

background: #fff;

transform-origin: bottom;

transform: scaleY(0.55);

border-radius: 5px;

}

.clock .digits .circle#hr i {

transform: scaleY(0.3);

width: 6px;

background: #f8f8f8;

box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);

}

.clock .digits .circle#min i {

transform: scaleY(0.45);

width: 4px;

background: #2196f3;

box-shadow: 0 0 10px rgba(33, 150, 243, 0.7);

}

.clock .digits .circle#sec i {

transform: scaleY(0.55);

width: 2px;

background: #e91e63;

box-shadow: 0 0 10px 2px #e91e63;

}

.digital-clock {

font-size: 2.5rem;

color: #152b4a;

background: rgba(255, 255, 255, 0.3);

padding: 15px 30px;

border-radius: 15px;

box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1),

inset 5px 5px 10px rgba(255, 255, 255, 0.5),

-5px -5px 10px rgba(255, 255, 255, 0.5);

display: flex;

gap: 10px;

align-items: center;

}

.date-display {

font-size: 1.2rem;

margin-top: 10px;

color: #333;

text-align: center;

}

.controls {

display: flex;

gap: 15px;

margin-top: 20px;

}

button {

padding: 10px 20px;

border: none;

border-radius: 10px;

background: #c9d5e0;

color: #152b4a;

font-weight: 600;

cursor: pointer;

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1),

-5px -5px 10px rgba(255, 255, 255, 0.5);

transition: all 0.3s;

}

button:hover {

background: #b8c4d0;

transform: translateY(-2px);

}

button:active {

transform: translateY(0);

box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1),

inset -2px -2px 5px rgba(255, 255, 255, 0.5);

}

.theme-toggle {

position: fixed;

top: 20px;

right: 20px;

width: 60px;

height: 30px;

background: #152b4a;

border-radius: 15px;

cursor: pointer;

display: flex;

align-items: center;

padding: 0 5px;

box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3),

inset -2px -2px 5px rgba(255, 255, 255, 0.1);

}

.theme-toggle::before {

content: '';

position: absolute;

width: 20px;

height: 20px;

background: #fff;

border-radius: 50%;

transition: transform 0.3s;

}

body.dark {

background: #1a1a2e;

}

body.dark .clock {

background: #2a2a3a;

box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.3),

inset 15px 15px 10px rgba(255, 255, 255, 0.1),

-15px -15px 35px rgba(255, 255, 255, 0.1),

inset -1px -1px 10px rgba(0, 0, 0, 0.4);

}

body.dark .digital-clock {

color: #f8f8f8;

background: rgba(0, 0, 0, 0.3);

}

body.dark .theme-toggle::before {

transform: translateX(30px);

}

.tick {

position: absolute;

width: 2px;

height: 8px;

background: rgba(255, 255, 255, 0.7);

transform-origin: bottom;

}

.tick.main {

height: 12px;

background: rgba(255, 255, 255, 0.9);

}

</style>

</head>

<body>

</div>

</div>

<button id="themeButton">Toggle Theme</button>

</div>

// Clock elements

const hrHand = document.querySelector('#hr');

const minHand = document.querySelector('#min');

const secHand = document.querySelector('#sec');

const hoursDisplay = document.querySelector('#hours');

const minutesDisplay = document.querySelector('#minutes');

const secondsDisplay = document.querySelector('#seconds');

const ampmDisplay = document.querySelector('#ampm');

const dateDisplay = document.querySelector('#dateDisplay');

const formatToggle = document.querySelector('#formatToggle');

const themeToggle = document.querySelector('#themeToggle');

const themeButton = document.querySelector('#themeButton');

const ticksContainer = document.querySelector('#ticks');

// Settings

let is24HourFormat = false;

let isDarkTheme = false;

// Create minute ticks

function createTicks() {

for (let i = 0; i < 60; i++) {

const tick = document.createElement('div');

tick.className = 'tick';

// Make every 5th tick longer (for hour markers)

if (i % 5 === 0) {

tick.classList.add('main');

}

tick.style.transform = `rotate(${i * 6}deg) translateY(-140px)`;

ticksContainer.appendChild(tick);

}

// Update clock function

function updateClock() {

const now = new Date();

// Analog clock

const hours = now.getHours();

const minutes = now.getMinutes();

const seconds = now.getSeconds();

const milliseconds = now.getMilliseconds();

// Smooth movement for analog hands

const smoothSeconds = seconds + milliseconds / 1000;

const smoothMinutes = minutes + smoothSeconds / 60;

const smoothHours = (hours % 12) + smoothMinutes / 60;

const hrRotation = smoothHours * 30; // 360/12 = 30 degrees per hour

const minRotation = smoothMinutes * 6; // 360/60 = 6 degrees per minute

const secRotation = smoothSeconds * 6; // 360/60 = 6 degrees per second

hrHand.style.transform = `rotate(${hrRotation}deg)`;

minHand.style.transform = `rotate(${minRotation}deg)`;

secHand.style.transform = `rotate(${secRotation}deg)`;

// Digital clock

let displayHours = hours;

let ampm = 'AM';

if (!is24HourFormat) {

if (displayHours >= 12) {

ampm = 'PM';

if (displayHours > 12) {

displayHours -= 12;

}

if (displayHours === 0) {

displayHours = 12;

}

ampmDisplay.style.display = 'block';

} else {

ampmDisplay.style.display = 'none';

}

hoursDisplay.textContent = displayHours.toString().padStart(2, '0');

minutesDisplay.textContent = minutes.toString().padStart(2, '0');

secondsDisplay.textContent = seconds.toString().padStart(2, '0');

ampmDisplay.textContent = ampm;

// Date display

const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

dateDisplay.textContent = now.toLocaleDateString(undefined, options);

// Smooth animation

requestAnimationFrame(updateClock);

}

// Toggle time format

formatToggle.addEventListener('click', () => {

is24HourFormat = !is24HourFormat;

formatToggle.textContent = is24HourFormat ? '12 Hour' : '24 Hour';

});

// Toggle theme

function toggleTheme() {

isDarkTheme = !isDarkTheme;

document.body.classList.toggle('dark', isDarkTheme);

// Save preference to localStorage

localStorage.setItem('clockTheme', isDarkTheme ? 'dark' : 'light');

}

themeToggle.addEventListener('click', toggleTheme);

themeButton.addEventListener('click', toggleTheme);

// Check for saved theme preference

function checkThemePreference() {

const savedTheme = localStorage.getItem('clockTheme');

if (savedTheme === 'dark') {

isDarkTheme = true;

document.body.classList.add('dark');

}

// Initialize

function init() {

createTicks();

checkThemePreference();

updateClock();

}

init();

</script>

</body>

</html>

CSS

JS

Clock

Recommended