Webleb - Snippets de Código

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>

Relógio

Recomendado

Modelo de formulário de login HTML CSS

Efeito de foco de botão animado em CSS

HTML

CSS

JS

Recomendado

Modelo de formulário de login HTML CSS

Efeito de foco de botão animado em CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS