Hugging Face's logo

Spaces:
privateuserh
/
privev
Running

App Files Community
privateuserh commited on
Commit
54db3c1
·
verified ·
1 Parent(s): 73beae4

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +226 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privev
3
- emoji: 💻
4
- colorFrom: indigo
5
- colorTo: red
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: privev
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,226 @@
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</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
+ </style>
28
+ </head>
29
+ <body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4">
30
+ <div class="max-w-md w-full bg-gray-800 rounded-3xl overflow-hidden shadow-2xl">
31
+ <!-- Display Screen -->
32
+ <div class="bg-black p-6 rounded-t-3xl border-b-4 border-gray-700">
33
+ <div class="bg-gray-900 rounded-xl p-4 h-64 flex flex-col">
34
+ <!-- Status Bar -->
35
+ <div class="flex justify-between items-center mb-4">
36
+ <div class="flex items-center">
37
+ <i class="fas fa-bolt text-yellow-400 mr-2"></i>
38
+ <span class="font-mono">EV-PRO 2.0</span>
39
+ </div>
40
+ <div class="text-sm font-mono">
41
+ <span id="current-time">14:30</span>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Main Display -->
46
+ <div class="flex-1 flex flex-col justify-center items-center">
47
+ <div id="charging-status" class="text-2xl font-bold mb-2">READY TO CHARGE</div>
48
+ <div class="text-5xl font-bold mb-4" id="current-amperage">16A</div>
49
+ <div class="w-full bg-gray-700 h-4 rounded-full mb-4">
50
+ <div id="charge-progress" class="progress-bar bg-green-500 h-4 rounded-full" style="width: 0%"></div>
51
+ </div>
52
+ <div class="grid grid-cols-2 gap-4 w-full">
53
+ <div class="bg-gray-800 p-3 rounded-lg">
54
+ <div class="text-xs text-gray-400">VOLTAGE</div>
55
+ <div class="text-xl font-mono" id="voltage-display">230V</div>
56
+ </div>
57
+ <div class="bg-gray-800 p-3 rounded-lg">
58
+ <div class="text-xs text-gray-400">POWER</div>
59
+ <div class="text-xl font-mono" id="power-display">3.68kW</div>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <!-- Controls -->
67
+ <div class="p-6">
68
+ <!-- Amperage Control -->
69
+ <div class="mb-8">
70
+ <div class="flex justify-between items-center mb-2">
71
+ <span class="text-gray-300">Amperage</span>
72
+ <span class="font-mono text-lg" id="selected-amperage">16A</span>
73
+ </div>
74
+ <div class="flex items-center">
75
+ <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">
76
+ <i class="fas fa-minus"></i>
77
+ </button>
78
+ <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">
79
+ <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">
80
+ <i class="fas fa-plus"></i>
81
+ </button>
82
+ </div>
83
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
84
+ <span>6A</span>
85
+ <span>32A</span>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Action Buttons -->
90
+ <div class="grid grid-cols-2 gap-4">
91
+ <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">
92
+ <i class="fas fa-play mr-2"></i> START
93
+ </button>
94
+ <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">
95
+ <i class="fas fa-stop mr-2"></i> STOP
96
+ </button>
97
+ </div>
98
+
99
+ <!-- Additional Info -->
100
+ <div class="mt-6 text-center text-sm text-gray-400">
101
+ <div class="flex justify-center space-x-4 mb-2">
102
+ <div>
103
+ <i class="fas fa-clock mr-1"></i>
104
+ <span id="time-remaining">--:--</span>
105
+ </div>
106
+ <div>
107
+ <i class="fas fa-battery-three-quarters mr-1"></i>
108
+ <span id="battery-percent">0%</span>
109
+ </div>
110
+ </div>
111
+ <div id="cost-display" class="text-gray-300">Cost: $0.00</div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <script>
117
+ // Update time
118
+ function updateTime() {
119
+ const now = new Date();
120
+ const hours = now.getHours().toString().padStart(2, '0');
121
+ const minutes = now.getMinutes().toString().padStart(2, '0');
122
+ document.getElementById('current-time').textContent = `${hours}:${minutes}`;
123
+ }
124
+ setInterval(updateTime, 60000);
125
+ updateTime();
126
+
127
+ // Amperage control
128
+ const ampRange = document.getElementById('amp-range');
129
+ const selectedAmp = document.getElementById('selected-amperage');
130
+ const currentAmp = document.getElementById('current-amperage');
131
+ const powerDisplay = document.getElementById('power-display');
132
+ const decreaseBtn = document.getElementById('decrease-amp');
133
+ const increaseBtn = document.getElementById('increase-amp');
134
+
135
+ function updateAmperage() {
136
+ const ampValue = parseInt(ampRange.value);
137
+ selectedAmp.textContent = `${ampValue}A`;
138
+ currentAmp.textContent = `${ampValue}A`;
139
+
140
+ // Calculate power (P = V * I)
141
+ const voltage = 230; // Standard voltage
142
+ const power = (voltage * ampValue / 1000).toFixed(2);
143
+ powerDisplay.textContent = `${power}kW`;
144
+ }
145
+
146
+ ampRange.addEventListener('input', updateAmperage);
147
+
148
+ decreaseBtn.addEventListener('click', () => {
149
+ ampRange.value = Math.max(6, parseInt(ampRange.value) - 1);
150
+ updateAmperage();
151
+ });
152
+
153
+ increaseBtn.addEventListener('click', () => {
154
+ ampRange.value = Math.min(32, parseInt(ampRange.value) + 1);
155
+ updateAmperage();
156
+ });
157
+
158
+ // Charging simulation
159
+ const startBtn = document.getElementById('start-charge');
160
+ const stopBtn = document.getElementById('stop-charge');
161
+ const chargeStatus = document.getElementById('charging-status');
162
+ const chargeProgress = document.getElementById('charge-progress');
163
+ const timeRemaining = document.getElementById('time-remaining');
164
+ const batteryPercent = document.getElementById('battery-percent');
165
+ const costDisplay = document.getElementById('cost-display');
166
+
167
+ let chargingInterval;
168
+ let currentCharge = 0;
169
+ let isCharging = false;
170
+ const batteryCapacity = 75; // kWh (typical EV battery)
171
+ const costPerKwh = 0.15; // $ per kWh
172
+
173
+ function startCharging() {
174
+ if (isCharging) return;
175
+
176
+ isCharging = true;
177
+ chargeStatus.textContent = "CHARGING";
178
+ chargeStatus.classList.add('text-green-500', 'charging-pulse');
179
+ chargeStatus.classList.remove('text-gray-400');
180
+
181
+ const ampValue = parseInt(ampRange.value);
182
+ const power = 230 * ampValue / 1000; // kW
183
+ const chargeRate = power / batteryCapacity * 100; // % per second (simplified)
184
+
185
+ let cost = 0;
186
+ let secondsCharged = 0;
187
+
188
+ chargingInterval = setInterval(() => {
189
+ currentCharge = Math.min(100, currentCharge + chargeRate/60);
190
+ chargeProgress.style.width = `${currentCharge}%`;
191
+ batteryPercent.textContent = `${Math.floor(currentCharge)}%`;
192
+
193
+ // Calculate time remaining
194
+ secondsCharged++;
195
+ const remainingSeconds = Math.floor((100 - currentCharge) / chargeRate * 60);
196
+ const hours = Math.floor(remainingSeconds / 3600);
197
+ const minutes = Math.floor((remainingSeconds % 3600) / 60);
198
+ timeRemaining.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
199
+
200
+ // Calculate cost
201
+ cost += power * costPerKwh / 3600;
202
+ costDisplay.textContent = `Cost: $${cost.toFixed(2)}`;
203
+
204
+ if (currentCharge >= 100) {
205
+ stopCharging();
206
+ chargeStatus.textContent = "CHARGE COMPLETE";
207
+ }
208
+ }, 1000);
209
+ }
210
+
211
+ function stopCharging() {
212
+ clearInterval(chargingInterval);
213
+ isCharging = false;
214
+ chargeStatus.textContent = "READY TO CHARGE";
215
+ chargeStatus.classList.remove('text-green-500', 'charging-pulse');
216
+ chargeStatus.classList.add('text-gray-400');
217
+ }
218
+
219
+ startBtn.addEventListener('click', startCharging);
220
+ stopBtn.addEventListener('click', stopCharging);
221
+
222
+ // Initialize display
223
+ updateAmperage();
224
+ </script>
225
+ <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/privev" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
226
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a site for charging a car it should able to rear amperes and have a display