Spaces:

lior007
/

my-clock

Running

App Files Files Community

my-clock / index.html

lior007

UPDATE

8843e20 verified 25 days ago

raw

history blame contribute delete

9.62 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Elegant Digital Clock</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

	.clock-container {
	font-family: 'Orbitron', sans-serif;
	text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
	transition: all 0.5s ease;
	}

	.clock-face {
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.5),
	inset 0 0 10px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
	}

	.time-segment {
	transition: all 0.3s ease;
	}

	.time-segment:hover {
	transform: scale(1.05);
	text-shadow: 0 0 15px rgba(0, 255, 255, 1);
	}

	.date-display {
	letter-spacing: 2px;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
	}

	.theme-btn {
	transition: all 0.3s ease;
	}

	.theme-btn:hover {
	transform: rotate(15deg) scale(1.1);
	}

	.glow {
	animation: glow 2s infinite alternate;
	}

	@keyframes glow {
	from {
	box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
	}
	to {
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
	}
	}
	</style>
	</head>
	<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4 transition-colors duration-500">
	<div class="clock-container w-full max-w-md">
	<div class="clock-face bg-gray-800 bg-opacity-70 rounded-2xl p-8 border border-cyan-400 border-opacity-30 relative overflow-hidden">
	<!-- Theme toggle button -->
	<button id="themeToggle" class="theme-btn absolute top-4 right-4 text-cyan-400 text-xl hover:text-cyan-300">
	<i class="fas fa-moon"></i>
	</button>

	<!-- Time display -->
	<div class="time-display flex justify-center items-center mb-6">
	<div id="hours" class="time-segment text-6xl font-bold text-cyan-400 mr-2">00</div>
	<div class="text-6xl font-bold text-cyan-400 opacity-70">:</div>
	<div id="minutes" class="time-segment text-6xl font-bold text-cyan-400 mx-2">00</div>
	<div class="text-6xl font-bold text-cyan-400 opacity-70">:</div>
	<div id="seconds" class="time-segment text-6xl font-bold text-cyan-400 ml-2">00</div>
	</div>

	<!-- AM/PM indicator -->
	<div id="ampm" class="text-xl font-semibold text-cyan-300 text-center mb-1">AM</div>

	<!-- Date display -->
	<div id="date" class="date-display text-lg text-gray-300 text-center mt-4"></div>

	<!-- Additional features -->
	<div class="flex justify-center mt-6 space-x-4">
	<button id="formatToggle" class="glow bg-cyan-800 bg-opacity-50 hover:bg-opacity-70 text-cyan-300 px-4 py-2 rounded-full flex items-center">
	<i class="fas fa-exchange-alt mr-2"></i> 24H/12H
	</button>
	<button id="stopwatchBtn" class="glow bg-cyan-800 bg-opacity-50 hover:bg-opacity-70 text-cyan-300 px-4 py-2 rounded-full flex items-center">
	<i class="fas fa-stopwatch mr-2"></i> Stopwatch
	</button>
	</div>
	</div>

	<!-- Footer with greeting -->
	<div id="greeting" class="text-center mt-6 text-xl text-gray-300"></div>
	</div>

	<script>
	// DOM elements
	const hoursElement = document.getElementById('hours');
	const minutesElement = document.getElementById('minutes');
	const secondsElement = document.getElementById('seconds');
	const ampmElement = document.getElementById('ampm');
	const dateElement = document.getElementById('date');
	const greetingElement = document.getElementById('greeting');
	const themeToggle = document.getElementById('themeToggle');
	const formatToggle = document.getElementById('formatToggle');
	const stopwatchBtn = document.getElementById('stopwatchBtn');
	const body = document.body;
	const clockFace = document.querySelector('.clock-face');

	// State variables
	let is24HourFormat = true;
	let isDarkTheme = true;
	let isStopwatchMode = false;
	let stopwatchStartTime = 0;
	let stopwatchInterval = null;

	// Initialize clock
	updateClock();
	setInterval(updateClock, 1000);

	// Theme toggle
	themeToggle.addEventListener('click', () => {
	isDarkTheme = !isDarkTheme;

	if (isDarkTheme) {
	body.classList.remove('bg-gray-100');
	body.classList.add('bg-gray-900');
	clockFace.classList.remove('bg-gray-200', 'text-gray-800');
	clockFace.classList.add('bg-gray-800', 'text-cyan-400');
	themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
	document.querySelectorAll('.glow').forEach(el => {
	el.classList.remove('bg-gray-300', 'text-gray-800');
	el.classList.add('bg-cyan-800', 'text-cyan-300');
	});
	} else {
	body.classList.remove('bg-gray-900');
	body.classList.add('bg-gray-100');
	clockFace.classList.remove('bg-gray-800', 'text-cyan-400');
	clockFace.classList.add('bg-gray-200', 'text-gray-800');
	themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
	document.querySelectorAll('.glow').forEach(el => {
	el.classList.remove('bg-cyan-800', 'text-cyan-300');
	el.classList.add('bg-gray-300', 'text-gray-800');
	});
	}
	});

	// Format toggle
	formatToggle.addEventListener('click', () => {
	is24HourFormat = !is24HourFormat;
	updateClock();
	});

	// Stopwatch toggle
	stopwatchBtn.addEventListener('click', () => {
	isStopwatchMode = !isStopwatchMode;

	if (isStopwatchMode) {
	stopwatchStartTime = Date.now();
	stopwatchInterval = setInterval(updateStopwatch, 10);
	stopwatchBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop';
	} else {
	clearInterval(stopwatchInterval);
	stopwatchBtn.innerHTML = '<i class="fas fa-stopwatch mr-2"></i> Stopwatch';
	setTimeout(updateClock, 100); // Return to normal clock
	}
	});

	// Update clock function
	function updateClock() {
	if (isStopwatchMode) return;

	const now = new Date();
	let hours = now.getHours();
	const minutes = now.getMinutes();
	const seconds = now.getSeconds();
	const ampm = hours >= 12 ? 'PM' : 'AM';

	// Format hours based on 12/24 hour setting
	if (!is24HourFormat) {
	hours = hours % 12 \|\| 12;
	}

	// Update time display
	hoursElement.textContent = hours.toString().padStart(2, '0');
	minutesElement.textContent = minutes.toString().padStart(2, '0');
	secondsElement.textContent = seconds.toString().padStart(2, '0');

	// Update AM/PM display
	ampmElement.textContent = is24HourFormat ? '' : ampm;

	// Update date
	const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
	dateElement.textContent = now.toLocaleDateString(undefined, options);

	// Update greeting
	updateGreeting(hours);
	}

	// Update stopwatch function
	function updateStopwatch() {
	const elapsed = Date.now() - stopwatchStartTime;
	const milliseconds = Math.floor(elapsed % 1000 / 10);
	const seconds = Math.floor(elapsed / 1000) % 60;
	const minutes = Math.floor(elapsed / (1000 * 60)) % 60;
	const hours = Math.floor(elapsed / (1000 * 60 * 60));

	hoursElement.textContent = hours.toString().padStart(2, '0');
	minutesElement.textContent = minutes.toString().padStart(2, '0');
	secondsElement.textContent = seconds.toString().padStart(2, '0');
	ampmElement.textContent = milliseconds.toString().padStart(2, '0');
	dateElement.textContent = 'Stopwatch';
	}

	// Update greeting based on time of day
	function updateGreeting(hours) {
	let greeting = '';

	if (hours < 12) {
	greeting = 'Good Morning!';
	} else if (hours < 18) {
	greeting = 'Good Afternoon!';
	} else {
	greeting = 'Good Evening!';
	}

	greetingElement.textContent = greeting;
	}
	</script>
	</body>
	</html>