Hugging Face's logo

Spaces:
Roshish121
/
undefined
Running

App Files Community
Roshish121 commited on
Commit
a06753a
·
verified ·
1 Parent(s): e3f2d6d

please make sure the timer looks good...it looks soo bright please make it like the mac

Browse files
Files changed (1) hide show
  1. index.html +43 -17
index.html CHANGED
@@ -13,6 +13,11 @@
13
  transition: all 0.3s ease;
14
  width: 180px !important;
15
  height: 80px !important;
 
 
 
 
 
16
  }
17
  #timer-widget.expanded {
18
  width: 300px !important;
@@ -30,58 +35,79 @@
30
  display: none;
31
  font-size: 0.8rem;
32
  margin-top: 4px;
33
- color: #ccc;
34
  word-break: break-word;
35
  }
36
  #timer-widget.has-note #note-text {
37
  display: block;
38
  }
39
  #live-clock {
40
- font-family: 'Arial', sans-serif;
41
- color: #ffffff;
42
- font-weight: 800;
43
- letter-spacing: 2px;
44
- font-size: 2rem;
45
- text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
46
  cursor: pointer;
47
  }
 
 
 
 
48
  #time-note {
49
  transition: all 0.2s ease;
 
 
50
  }
51
  #time-note:focus {
52
  outline: none;
53
- background-color: rgba(255, 255, 255, 0.1) !important;
 
54
  }
55
  #timer-widget {
56
  overflow: hidden;
57
  min-width: 180px;
58
  min-height: 80px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  }
60
  </style>
61
  </head>
62
  <body class="bg-gray-900">
63
  <!-- Draggable Time Widget -->
64
  <div id="timer-widget" class="fixed bottom-4 right-4 z-50 cursor-move">
65
- <div class="bg-black bg-opacity-80 rounded-xl shadow-xl p-4 text-white h-full flex items-center justify-center">
66
- <div class="flex flex-col items-center" id="timer-content">
67
  <div id="live-clock">00:00:00</div>
68
  <div class="text-sm opacity-80 mt-1" id="live-date">Loading...</div>
69
  <div id="note-text"></div>
70
- <div class="flex space-x-4 mt-4" id="controls-container">
71
- <button id="start-btn" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded-full">
72
  <i class="fas fa-play"></i>
73
  </button>
74
- <button id="stop-btn" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-full">
75
  <i class="fas fa-stop"></i>
76
  </button>
77
- <button id="reset-btn" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-full">
78
  <i class="fas fa-undo"></i>
79
  </button>
80
  </div>
81
- </div>
82
  <div class="mt-4" id="note-container">
83
- <input type="text" id="time-note" class="bg-gray-700 bg-opacity-50 text-white text-sm rounded px-3 py-2 w-full"
84
- placeholder="Add note...">
85
  </div>
86
  </div>
87
  </div>
 
13
  transition: all 0.3s ease;
14
  width: 180px !important;
15
  height: 80px !important;
16
+ backdrop-filter: blur(20px);
17
+ -webkit-backdrop-filter: blur(20px);
18
+ background: rgba(0, 0, 0, 0.3);
19
+ border: 1px solid rgba(255, 255, 255, 0.1);
20
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
21
  }
22
  #timer-widget.expanded {
23
  width: 300px !important;
 
35
  display: none;
36
  font-size: 0.8rem;
37
  margin-top: 4px;
38
+ color: rgba(255, 255, 255, 0.7);
39
  word-break: break-word;
40
  }
41
  #timer-widget.has-note #note-text {
42
  display: block;
43
  }
44
  #live-clock {
45
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
46
+ color: rgba(255, 255, 255, 0.9);
47
+ font-weight: 300;
48
+ letter-spacing: 1px;
49
+ font-size: 1.8rem;
 
50
  cursor: pointer;
51
  }
52
+ #live-date {
53
+ color: rgba(255, 255, 255, 0.6);
54
+ font-weight: 300;
55
+ }
56
  #time-note {
57
  transition: all 0.2s ease;
58
+ background: rgba(255, 255, 255, 0.05);
59
+ border: 1px solid rgba(255, 255, 255, 0.1);
60
  }
61
  #time-note:focus {
62
  outline: none;
63
+ background-color: rgba(255, 255, 255, 0.08) !important;
64
+ border-color: rgba(255, 255, 255, 0.2);
65
  }
66
  #timer-widget {
67
  overflow: hidden;
68
  min-width: 180px;
69
  min-height: 80px;
70
+ border-radius: 16px;
71
+ }
72
+ .timer-button {
73
+ background: rgba(255, 255, 255, 0.1);
74
+ border: 1px solid rgba(255, 255, 255, 0.15);
75
+ backdrop-filter: blur(10px);
76
+ -webkit-backdrop-filter: blur(10px);
77
+ transition: all 0.2s ease;
78
+ }
79
+ .timer-button:hover {
80
+ background: rgba(255, 255, 255, 0.15);
81
+ border-color: rgba(255, 255, 255, 0.25);
82
+ }
83
+ .timer-button:active {
84
+ transform: scale(0.95);
85
  }
86
  </style>
87
  </head>
88
  <body class="bg-gray-900">
89
  <!-- Draggable Time Widget -->
90
  <div id="timer-widget" class="fixed bottom-4 right-4 z-50 cursor-move">
91
+ <div class="rounded-xl p-4 text-white h-full flex items-center justify-center">
92
+ <div class="flex flex-col items-center" id="timer-content">
93
  <div id="live-clock">00:00:00</div>
94
  <div class="text-sm opacity-80 mt-1" id="live-date">Loading...</div>
95
  <div id="note-text"></div>
96
+ <div class="flex space-x-3 mt-4" id="controls-container">
97
+ <button id="start-btn" class="timer-button px-3 py-2 rounded-full text-green-400 hover:text-green-300">
98
  <i class="fas fa-play"></i>
99
  </button>
100
+ <button id="stop-btn" class="timer-button px-3 py-2 rounded-full text-red-400 hover:text-red-300">
101
  <i class="fas fa-stop"></i>
102
  </button>
103
+ <button id="reset-btn" class="timer-button px-3 py-2 rounded-full text-blue-400 hover:text-blue-300">
104
  <i class="fas fa-undo"></i>
105
  </button>
106
  </div>
107
+ </div>
108
  <div class="mt-4" id="note-container">
109
+ <input type="text" id="time-note" class="text-white text-sm rounded-lg px-3 py-2 w-full"
110
+ placeholder="Add note...">
111
  </div>
112
  </div>
113
  </div>