Hugging Face's logo

Spaces:
Roshish121
/
undefined
Running

App Files Community
Roshish121 commited on
Commit
5a150cc
·
verified ·
1 Parent(s): df1a6b9

in white bold great looking text with timer stop pause re everything

Browse files
Files changed (1) hide show
  1. index.html +88 -36
index.html CHANGED
@@ -9,14 +9,14 @@
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
  #live-clock {
12
- font-family: 'Menlo', 'Monaco', monospace;
13
- background: linear-gradient(135deg, #6e8efb, #a777e3);
14
- -webkit-background-clip: text;
15
- background-clip: text;
16
- -webkit-text-fill-color: transparent;
17
- text-shadow: 0 0 8px rgba(110, 142, 251, 0.3);
18
  }
19
- #time-note {
20
  transition: all 0.2s ease;
21
  }
22
  #time-note:focus {
@@ -28,39 +28,88 @@
28
  <body class="bg-gray-900">
29
  <!-- Floating Time Widget -->
30
  <div class="fixed bottom-4 right-4 z-50">
31
- <div class="bg-black bg-opacity-80 rounded-xl shadow-xl p-4 text-white">
32
- <div class="text-3xl font-bold tracking-tighter" id="live-clock">00:00:00</div>
33
- <div class="text-xs opacity-70 mt-1" id="live-date">Loading...</div>
34
- <div class="mt-2">
35
- <input type="text" id="time-note" class="bg-gray-700 bg-opacity-50 text-white text-sm rounded px-2 py-1 w-full"
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  placeholder="Add note...">
37
  </div>
38
  </div>
39
  </div>
40
- <script>
41
- // Live Time Updater
42
- function updateClock() {
43
- const now = new Date();
44
- const timeStr = now.toLocaleTimeString('en-US', {
45
- hour12: false,
46
- hour: '2-digit',
47
- minute: '2-digit',
48
- second: '2-digit'
49
- });
50
- const dateStr = now.toLocaleDateString('en-US', {
51
- weekday: 'short',
52
- month: 'short',
53
- day: 'numeric'
54
- });
55
-
56
- document.getElementById('live-clock').textContent = timeStr;
57
- document.getElementById('live-date').textContent = dateStr;
58
  }
59
-
60
- // Initialize clock and update every second
61
- updateClock();
62
- setInterval(updateClock, 1000);
63
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  // Save notes to localStorage
65
  const noteInput = document.getElementById('time-note');
66
  noteInput.addEventListener('change', () => {
@@ -72,6 +121,9 @@
72
  if (savedNote) {
73
  noteInput.value = savedNote;
74
  }
75
- </script>
 
 
 
76
  </body>
77
  </html>
 
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
  #live-clock {
12
+ font-family: 'Arial', sans-serif;
13
+ color: #ffffff;
14
+ font-weight: 800;
15
+ letter-spacing: 2px;
16
+ font-size: 3rem;
17
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
18
  }
19
+ #time-note {
20
  transition: all 0.2s ease;
21
  }
22
  #time-note:focus {
 
28
  <body class="bg-gray-900">
29
  <!-- Floating Time Widget -->
30
  <div class="fixed bottom-4 right-4 z-50">
31
+ <div class="bg-black bg-opacity-80 rounded-xl shadow-xl p-6 text-white">
32
+ <div class="flex flex-col items-center">
33
+ <div id="live-clock">00:00:00</div>
34
+ <div class="text-sm opacity-80 mt-1" id="live-date">Loading...</div>
35
+ <div class="flex space-x-4 mt-4">
36
+ <button id="start-btn" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded-full">
37
+ <i class="fas fa-play"></i>
38
+ </button>
39
+ <button id="stop-btn" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-full">
40
+ <i class="fas fa-stop"></i>
41
+ </button>
42
+ <button id="reset-btn" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-full">
43
+ <i class="fas fa-undo"></i>
44
+ </button>
45
+ </div>
46
+ </div>
47
+ <div class="mt-4">
48
+ <input type="text" id="time-note" class="bg-gray-700 bg-opacity-50 text-white text-sm rounded px-3 py-2 w-full"
49
  placeholder="Add note...">
50
  </div>
51
  </div>
52
  </div>
53
+ <script>
54
+ let timerInterval;
55
+ let isRunning = false;
56
+ let startTime;
57
+ let elapsedTime = 0;
58
+
59
+ // Timer functions
60
+ function startTimer() {
61
+ if (!isRunning) {
62
+ startTime = Date.now() - elapsedTime;
63
+ timerInterval = setInterval(updateTimer, 1000);
64
+ isRunning = true;
65
+ }
 
 
 
 
 
66
  }
67
+
68
+ function stopTimer() {
69
+ if (isRunning) {
70
+ clearInterval(timerInterval);
71
+ isRunning = false;
72
+ }
73
+ }
74
+
75
+ function resetTimer() {
76
+ stopTimer();
77
+ elapsedTime = 0;
78
+ updateDisplay(0);
79
+ }
80
+
81
+ function updateTimer() {
82
+ elapsedTime = Date.now() - startTime;
83
+ updateDisplay(elapsedTime);
84
+ }
85
+
86
+ function updateDisplay(time) {
87
+ const seconds = Math.floor((time / 1000) % 60);
88
+ const minutes = Math.floor((time / (1000 * 60)) % 60);
89
+ const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
90
+
91
+ const formattedTime = [
92
+ hours.toString().padStart(2, '0'),
93
+ minutes.toString().padStart(2, '0'),
94
+ seconds.toString().padStart(2, '0')
95
+ ].join(':');
96
+
97
+ document.getElementById('live-clock').textContent = formattedTime;
98
+ }
99
+
100
+ // Button event listeners
101
+ document.getElementById('start-btn').addEventListener('click', startTimer);
102
+ document.getElementById('stop-btn').addEventListener('click', stopTimer);
103
+ document.getElementById('reset-btn').addEventListener('click', resetTimer);
104
+
105
+ // Initialize with current time
106
+ const now = new Date();
107
+ const dateStr = now.toLocaleDateString('en-US', {
108
+ weekday: 'short',
109
+ month: 'short',
110
+ day: 'numeric'
111
+ });
112
+ document.getElementById('live-date').textContent = dateStr;
113
  // Save notes to localStorage
114
  const noteInput = document.getElementById('time-note');
115
  noteInput.addEventListener('change', () => {
 
121
  if (savedNote) {
122
  noteInput.value = savedNote;
123
  }
124
+
125
+ // Initialize with stopped state
126
+ resetTimer();
127
+ </script>
128
  </body>
129
  </html>