Hugging Face's logo

Spaces:
privateuserh
/
privevdev-betav1-00
Running

App Files Community
privateuserh commited on
Commit
beb69c4
·
verified ·
1 Parent(s): 2d360f2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +417 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privevdev Betav1 00
3
- emoji: 📉
4
- colorFrom: purple
5
- colorTo: purple
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: privevdev-betav1-00
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,417 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EV Charging Station with Solar</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes pulse {
11
+ 0% { opacity: 0.6; }
12
+ 50% { opacity: 1; }
13
+ 100% { opacity: 0.6; }
14
+ }
15
+ .charging-pulse {
16
+ animation: pulse 1.5s infinite;
17
+ }
18
+ .progress-bar {
19
+ transition: width 0.5s ease-in-out;
20
+ }
21
+ .knob {
22
+ transition: transform 0.2s ease;
23
+ }
24
+ .knob:active {
25
+ transform: scale(0.95);
26
+ }
27
+ .solar-btn {
28
+ position: fixed;
29
+ bottom: 30px;
30
+ right: 30px;
31
+ z-index: 50;
32
+ transition: all 0.3s ease;
33
+ box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
34
+ }
35
+ .solar-btn:hover {
36
+ transform: translateY(-3px);
37
+ box-shadow: 0 15px 30px rgba(245, 158, 11, 0.4);
38
+ }
39
+ .solar-btn.active {
40
+ background-color: #f59e0b;
41
+ color: white;
42
+ }
43
+ .solar-btn.inactive {
44
+ background-color: #374151;
45
+ color: #9ca3af;
46
+ }
47
+ .solar-tooltip {
48
+ position: absolute;
49
+ right: 70px;
50
+ top: 50%;
51
+ transform: translateY(-50%);
52
+ width: 200px;
53
+ background: rgba(31, 41, 55, 0.9);
54
+ backdrop-filter: blur(10px);
55
+ border-radius: 10px;
56
+ padding: 10px;
57
+ opacity: 0;
58
+ pointer-events: none;
59
+ transition: all 0.3s ease;
60
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
61
+ }
62
+ .solar-btn:hover .solar-tooltip {
63
+ opacity: 1;
64
+ right: 80px;
65
+ }
66
+ @keyframes solar-glow {
67
+ 0% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
68
+ 50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.8); }
69
+ 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
70
+ }
71
+ .solar-glow {
72
+ animation: solar-glow 2s infinite;
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4">
77
+ <div class="max-w-md w-full bg-gray-800 rounded-3xl overflow-hidden shadow-2xl relative">
78
+ <!-- Solar Indicator -->
79
+ <div class="absolute top-4 right-4 flex items-center">
80
+ <div class="relative">
81
+ <div id="solar-indicator" class="w-3 h-3 rounded-full bg-gray-500 mr-2"></div>
82
+ <span class="text-xs text-gray-400">SOLAR</span>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Display Screen -->
87
+ <div class="bg-black p-6 rounded-t-3xl border-b-4 border-gray-700">
88
+ <div class="bg-gray-900 rounded-xl p-4 h-64 flex flex-col">
89
+ <!-- Status Bar -->
90
+ <div class="flex justify-between items-center mb-4">
91
+ <div class="flex items-center">
92
+ <i class="fas fa-bolt text-yellow-400 mr-2"></i>
93
+ <span class="font-mono">EV-PRO 2.0</span>
94
+ </div>
95
+ <div class="text-sm font-mono">
96
+ <span id="current-time">14:30</span>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Main Display -->
101
+ <div class="flex-1 flex flex-col justify-center items-center">
102
+ <div id="charging-status" class="text-2xl font-bold mb-2">READY TO CHARGE</div>
103
+ <div class="text-5xl font-bold mb-4" id="current-amperage">16A</div>
104
+ <div class="w-full bg-gray-700 h-4 rounded-full mb-4">
105
+ <div id="charge-progress" class="progress-bar bg-green-500 h-4 rounded-full" style="width: 0%"></div>
106
+ </div>
107
+ <div class="grid grid-cols-2 gap-4 w-full">
108
+ <div class="bg-gray-800 p-3 rounded-lg">
109
+ <div class="text-xs text-gray-400">VOLTAGE</div>
110
+ <div class="text-xl font-mono" id="voltage-display">230V</div>
111
+ </div>
112
+ <div class="bg-gray-800 p-3 rounded-lg">
113
+ <div class="text-xs text-gray-400">POWER</div>
114
+ <div class="text-xl font-mono" id="power-display">3.68kW</div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Controls -->
122
+ <div class="p-6">
123
+ <!-- Amperage Control -->
124
+ <div class="mb-8">
125
+ <div class="flex justify-between items-center mb-2">
126
+ <span class="text-gray-300">Amperage</span>
127
+ <span class="font-mono text-lg" id="selected-amperage">16A</span>
128
+ </div>
129
+ <div class="flex items-center">
130
+ <button id="decrease-amp" class="knob bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center mr-2">
131
+ <i class="fas fa-minus"></i>
132
+ </button>
133
+ <input type="range" id="amp-range" min="6" max="32" value="16" step="1" class="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
134
+ <button id="increase-amp" class="knob bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center ml-2">
135
+ <i class="fas fa-plus"></i>
136
+ </button>
137
+ </div>
138
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
139
+ <span>6A</span>
140
+ <span>32A</span>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Action Buttons -->
145
+ <div class="grid grid-cols-2 gap-4">
146
+ <button id="start-charge" class="bg-green-600 hover:bg-green-700 py-3 px-4 rounded-xl font-bold flex items-center justify-center">
147
+ <i class="fas fa-play mr-2"></i> START
148
+ </button>
149
+ <button id="stop-charge" class="bg-red-600 hover:bg-red-700 py-3 px-4 rounded-xl font-bold flex items-center justify-center">
150
+ <i class="fas fa-stop mr-2"></i> STOP
151
+ </button>
152
+ </div>
153
+
154
+ <!-- Additional Info -->
155
+ <div class="mt-6 text-center text-sm text-gray-400">
156
+ <div class="flex justify-center space-x-4 mb-2">
157
+ <div>
158
+ <i class="fas fa-clock mr-1"></i>
159
+ <span id="time-remaining">--:--</span>
160
+ </div>
161
+ <div>
162
+ <i class="fas fa-battery-three-quarters mr-1"></i>
163
+ <span id="battery-percent">0%</span>
164
+ </div>
165
+ </div>
166
+ <div id="cost-display" class="text-gray-300">Cost: $0.00</div>
167
+ <div id="solar-usage" class="text-yellow-400 mt-1 hidden">
168
+ <i class="fas fa-solar-panel mr-1"></i>
169
+ <span>Using Solar: <span id="solar-percentage">0</span>%</span>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Floating Solar Button -->
176
+ <button id="solar-btn" class="solar-btn inactive w-16 h-16 rounded-full flex items-center justify-center text-2xl">
177
+ <i class="fas fa-solar-panel"></i>
178
+ <div class="solar-tooltip text-sm">
179
+ <div class="font-bold mb-1">Solar Bank</div>
180
+ <div id="solar-capacity">Current capacity: 0%</div>
181
+ <div>Automatically activates when solar is available</div>
182
+ </div>
183
+ </button>
184
+
185
+ <script>
186
+ // Update time
187
+ function updateTime() {
188
+ const now = new Date();
189
+ const hours = now.getHours().toString().padStart(2, '0');
190
+ const minutes = now.getMinutes().toString().padStart(2, '0');
191
+ document.getElementById('current-time').textContent = `${hours}:${minutes}`;
192
+
193
+ // Simulate solar capacity based on time of day
194
+ updateSolarCapacity(hours);
195
+ }
196
+ setInterval(updateTime, 60000);
197
+ updateTime();
198
+
199
+ // Solar simulation
200
+ let solarAvailable = false;
201
+ let solarCapacity = 0;
202
+ let usingSolar = false;
203
+ const solarBtn = document.getElementById('solar-btn');
204
+ const solarIndicator = document.getElementById('solar-indicator');
205
+ const solarUsageDisplay = document.getElementById('solar-usage');
206
+ const solarPercentage = document.getElementById('solar-percentage');
207
+ const solarCapacityDisplay = document.getElementById('solar-capacity');
208
+
209
+ function updateSolarCapacity(hour) {
210
+ // Simulate solar capacity curve throughout the day
211
+ const hourNum = parseInt(hour);
212
+
213
+ if (hourNum >= 5 && hourNum < 7) {
214
+ // Sunrise
215
+ solarCapacity = 20 + (hourNum - 5) * 15;
216
+ } else if (hourNum >= 7 && hourNum < 12) {
217
+ // Morning
218
+ solarCapacity = 50 + (hourNum - 7) * 10;
219
+ } else if (hourNum >= 12 && hourNum < 15) {
220
+ // Midday peak
221
+ solarCapacity = 90 + (hourNum - 12) * 3;
222
+ } else if (hourNum >= 15 && hourNum < 19) {
223
+ // Afternoon decline
224
+ solarCapacity = 90 - (hourNum - 15) * 15;
225
+ } else if (hourNum >= 19 && hourNum < 21) {
226
+ // Sunset
227
+ solarCapacity = 30 - (hourNum - 19) * 15;
228
+ } else {
229
+ // Night
230
+ solarCapacity = 0;
231
+ }
232
+
233
+ // Ensure capacity is within bounds
234
+ solarCapacity = Math.max(0, Math.min(100, solarCapacity));
235
+
236
+ // Update display
237
+ solarCapacityDisplay.textContent = `Current capacity: ${Math.round(solarCapacity)}%`;
238
+
239
+ // Automatically toggle solar based on capacity
240
+ if (solarCapacity >= 30 && !solarAvailable) {
241
+ enableSolar();
242
+ } else if (solarCapacity < 30 && solarAvailable) {
243
+ disableSolar();
244
+ }
245
+
246
+ // If solar is active, update the usage percentage
247
+ if (usingSolar) {
248
+ const solarUsagePercent = Math.min(100, Math.floor(solarCapacity / 2));
249
+ solarPercentage.textContent = solarUsagePercent;
250
+
251
+ // If solar drops too low, switch back to grid
252
+ if (solarUsagePercent < 10) {
253
+ disableSolarUsage();
254
+ }
255
+ }
256
+ }
257
+
258
+ function enableSolar() {
259
+ solarAvailable = true;
260
+ solarBtn.classList.remove('inactive');
261
+ solarBtn.classList.add('active', 'solar-glow');
262
+ solarIndicator.classList.remove('bg-gray-500');
263
+ solarIndicator.classList.add('bg-yellow-400');
264
+ }
265
+
266
+ function disableSolar() {
267
+ solarAvailable = false;
268
+ solarBtn.classList.remove('active', 'solar-glow');
269
+ solarBtn.classList.add('inactive');
270
+ solarIndicator.classList.remove('bg-yellow-400');
271
+ solarIndicator.classList.add('bg-gray-500');
272
+ disableSolarUsage();
273
+ }
274
+
275
+ function enableSolarUsage() {
276
+ if (!solarAvailable) return;
277
+
278
+ usingSolar = true;
279
+ solarUsageDisplay.classList.remove('hidden');
280
+
281
+ // Reduce cost when using solar
282
+ costPerKwh = 0.07; // Reduced cost when using solar
283
+
284
+ // Visual feedback
285
+ solarBtn.classList.add('animate-pulse');
286
+ }
287
+
288
+ function disableSolarUsage() {
289
+ usingSolar = false;
290
+ solarUsageDisplay.classList.add('hidden');
291
+
292
+ // Restore normal cost
293
+ costPerKwh = 0.15;
294
+
295
+ // Visual feedback
296
+ solarBtn.classList.remove('animate-pulse');
297
+ }
298
+
299
+ // Toggle solar usage when button is clicked
300
+ solarBtn.addEventListener('click', () => {
301
+ if (!solarAvailable) return;
302
+
303
+ if (usingSolar) {
304
+ disableSolarUsage();
305
+ } else {
306
+ enableSolarUsage();
307
+ }
308
+ });
309
+
310
+ // Amperage control
311
+ const ampRange = document.getElementById('amp-range');
312
+ const selectedAmp = document.getElementById('selected-amperage');
313
+ const currentAmp = document.getElementById('current-amperage');
314
+ const powerDisplay = document.getElementById('power-display');
315
+ const decreaseBtn = document.getElementById('decrease-amp');
316
+ const increaseBtn = document.getElementById('increase-amp');
317
+
318
+ function updateAmperage() {
319
+ const ampValue = parseInt(ampRange.value);
320
+ selectedAmp.textContent = `${ampValue}A`;
321
+ currentAmp.textContent = `${ampValue}A`;
322
+
323
+ // Calculate power (P = V * I)
324
+ const voltage = 230; // Standard voltage
325
+ const power = (voltage * ampValue / 1000).toFixed(2);
326
+ powerDisplay.textContent = `${power}kW`;
327
+ }
328
+
329
+ ampRange.addEventListener('input', updateAmperage);
330
+
331
+ decreaseBtn.addEventListener('click', () => {
332
+ ampRange.value = Math.max(6, parseInt(ampRange.value) - 1);
333
+ updateAmperage();
334
+ });
335
+
336
+ increaseBtn.addEventListener('click', () => {
337
+ ampRange.value = Math.min(32, parseInt(ampRange.value) + 1);
338
+ updateAmperage();
339
+ });
340
+
341
+ // Charging simulation
342
+ const startBtn = document.getElementById('start-charge');
343
+ const stopBtn = document.getElementById('stop-charge');
344
+ const chargeStatus = document.getElementById('charging-status');
345
+ const chargeProgress = document.getElementById('charge-progress');
346
+ const timeRemaining = document.getElementById('time-remaining');
347
+ const batteryPercent = document.getElementById('battery-percent');
348
+ const costDisplay = document.getElementById('cost-display');
349
+
350
+ let chargingInterval;
351
+ let currentCharge = 0;
352
+ let isCharging = false;
353
+ const batteryCapacity = 75; // kWh (typical EV battery)
354
+ let costPerKwh = 0.15; // $ per kWh (default to grid power)
355
+
356
+ function startCharging() {
357
+ if (isCharging) return;
358
+
359
+ isCharging = true;
360
+ chargeStatus.textContent = "CHARGING";
361
+ chargeStatus.classList.add('text-green-500', 'charging-pulse');
362
+ chargeStatus.classList.remove('text-gray-400');
363
+
364
+ // Auto-enable solar if available and not already using it
365
+ if (solarAvailable && !usingSolar && solarCapacity >= 50) {
366
+ enableSolarUsage();
367
+ }
368
+
369
+ const ampValue = parseInt(ampRange.value);
370
+ const power = 230 * ampValue / 1000; // kW
371
+ const chargeRate = power / batteryCapacity * 100; // % per second (simplified)
372
+
373
+ let cost = 0;
374
+ let secondsCharged = 0;
375
+
376
+ chargingInterval = setInterval(() => {
377
+ currentCharge = Math.min(100, currentCharge + chargeRate/60);
378
+ chargeProgress.style.width = `${currentCharge}%`;
379
+ batteryPercent.textContent = `${Math.floor(currentCharge)}%`;
380
+
381
+ // Calculate time remaining
382
+ secondsCharged++;
383
+ const remainingSeconds = Math.floor((100 - currentCharge) / chargeRate * 60);
384
+ const hours = Math.floor(remainingSeconds / 3600);
385
+ const minutes = Math.floor((remainingSeconds % 3600) / 60);
386
+ timeRemaining.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
387
+
388
+ // Calculate cost
389
+ cost += power * costPerKwh / 3600;
390
+ costDisplay.textContent = `Cost: $${cost.toFixed(2)}`;
391
+
392
+ if (currentCharge >= 100) {
393
+ stopCharging();
394
+ chargeStatus.textContent = "CHARGE COMPLETE";
395
+ }
396
+ }, 1000);
397
+ }
398
+
399
+ function stopCharging() {
400
+ clearInterval(chargingInterval);
401
+ isCharging = false;
402
+ chargeStatus.textContent = "READY TO CHARGE";
403
+ chargeStatus.classList.remove('text-green-500', 'charging-pulse');
404
+ chargeStatus.classList.add('text-gray-400');
405
+ }
406
+
407
+ startBtn.addEventListener('click', startCharging);
408
+ stopBtn.addEventListener('click', stopCharging);
409
+
410
+ // Initialize display
411
+ updateAmperage();
412
+
413
+ // Initial solar update
414
+ updateSolarCapacity(new Date().getHours());
415
+ </script>
416
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privevdev-betav1-00" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
417
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Add a floating button for a solar bank it should automatically turn on and off based on capacity