Hugging Face's logo

Spaces:
ymk11
/
timekeeper-prime
Running

App Files Community
ymk11 commited on
Commit
ce183fc
·
verified ·
1 Parent(s): aa13477

Make some thing like this but remove the bar from the top

Browse files
Files changed (4) hide show
  1. README.md +8 -5
  2. index.html +53 -19
  3. script.js +32 -0
  4. style.css +22 -24
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Timekeeper Prime
3
- emoji: 🌖
4
- colorFrom: indigo
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Timekeeper Prime ⏱️
3
+ colorFrom: yellow
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,53 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Timekeeper Prime ⏱️ - GMT+2 Clock</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <link rel="stylesheet" href="style.css">
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#6366f1',
19
+ },
20
+ secondary: {
21
+ 500: '#8b5cf6',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ </head>
29
+ <body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen flex items-center justify-center transition-colors duration-300">
30
+ <div class="clock-container w-full max-w-md p-8 rounded-3xl">
31
+ <div class="flex flex-col items-center justify-center">
32
+ <h1 class="text-4xl font-bold text-primary-500 mb-2">GMT+2</h1>
33
+ <div class="clock-face bg-gradient-to-br from-gray-800 to-gray-700 rounded-full p-8 shadow-2xl relative">
34
+ <div class="flex items-center justify-center">
35
+ <div class="text-center">
36
+ <div class="time-display text-7xl font-bold text-white tracking-tighter" id="time">00:00:00</div>
37
+ <div class="date-display text-white/70 text-lg mt-4" id="date">Saturday, November 15, 2025</div>
38
+ </div>
39
+ </div>
40
+ </div>
41
+ <div class="mt-6 text-white/50 text-sm flex items-center">
42
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
43
+ <span id="timezone">Central European Time</span>
44
+ </div>
45
+ </div>
46
+
47
+ <script src="script.js"></script>
48
+ <script>
49
+ feather.replace();
50
+ </script>
51
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
52
+ </body>
53
+ </html>
script.js ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ function updateClock() {
2
+ // Get current time adjusted for GMT+2
3
+ const now = new Date();
4
+ const gmtOffset = 2 * 60 * 60 * 1000; // GMT+2 in milliseconds
5
+ const gmtPlus2Time = new Date(now.getTime() + gmtOffset);
6
+
7
+ // Format time as HH:MM:SS
8
+ const hours = String(gmtPlus2Time.getHours()).padStart(2, '0');
9
+ const minutes = String(gmtPlus2Time.getMinutes()).padStart(2, '0');
10
+ const seconds = String(gmtPlus2Time.getSeconds()).padStart(2, '0');
11
+
12
+ // Format date
13
+ const options = {
14
+ weekday: 'long',
15
+ year: 'numeric',
16
+ month: 'long',
17
+ day: 'numeric'
18
+ };
19
+ const dateString = gmtPlus2Time.toLocaleDateString('en-US', options);
20
+
21
+ // Update DOM
22
+ document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}`;
23
+ document.getElementById('date').textContent = dateString;
24
+
25
+ // Timezone information
26
+ const timezoneInfo = Intl.DateTimeFormat().resolvedOptions().timeZone;
27
+ document.getElementById('timezone').textContent = `GMT+2 (${timezoneInfo})`;
28
+ }
29
+
30
+ // Update clock immediately and then every second
31
+ updateClock();
32
+ setInterval(updateClock, 1000);
style.css CHANGED
@@ -1,28 +1,26 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
1
+ .clock-face {
2
+ width: 320px;
3
+ height: 320px;
4
+ border: 12px solid rgba(99, 102, 241, 0.15);
5
+ box-shadow:
6
+ inset 0 0 20px rgba(99, 102, 241, 0.3),
7
+ 0 0 40px rgba(99, 102, 241, 0.1);
8
+ transition: all 0.3s ease;
9
  }
10
 
11
+ .time-display {
12
+ text-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
13
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
14
  }
15
 
16
+ @media (max-width: 640px) {
17
+ .clock-face {
18
+ width: 280px;
19
+ height: 280px;
20
+ padding: 6px;
21
+ }
22
+
23
+ .time-display {
24
+ font-size: 4.5rem;
25
+ }
26
+ }