timekeeper-prime / index.html
ymk11's picture
Make some thing like this but remove the bar from the top
ce183fc verified
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timekeeper Prime ⏱️ - GMT+2 Clock</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link rel="stylesheet" href="style.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
500: '#6366f1',
},
secondary: {
500: '#8b5cf6',
}
}
}
}
}
</script>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen flex items-center justify-center transition-colors duration-300">
<div class="clock-container w-full max-w-md p-8 rounded-3xl">
<div class="flex flex-col items-center justify-center">
<h1 class="text-4xl font-bold text-primary-500 mb-2">GMT+2</h1>
<div class="clock-face bg-gradient-to-br from-gray-800 to-gray-700 rounded-full p-8 shadow-2xl relative">
<div class="flex items-center justify-center">
<div class="text-center">
<div class="time-display text-7xl font-bold text-white tracking-tighter" id="time">00:00:00</div>
<div class="date-display text-white/70 text-lg mt-4" id="date">Saturday, November 15, 2025</div>
</div>
</div>
</div>
<div class="mt-6 text-white/50 text-sm flex items-center">
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
<span id="timezone">Central European Time</span>
</div>
</div>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>