Hugging Face's logo

Spaces:
yohannesmtbu
/
voltjuice-power-buddy
Running

App Files Community
yohannesmtbu commited on
Commit
8cc4afc
·
verified ·
1 Parent(s): 590faef

can you design me a 12 volt dc power bank with 5 volt charger

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +246 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Voltjuice Power Buddy
3
- emoji: 🐢
4
- colorFrom: yellow
5
  colorTo: gray
 
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: VoltJuice Power Buddy 🔋
3
+ colorFrom: red
 
4
  colorTo: gray
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://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,247 @@
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>VoltJuice Power Buddy | 12V DC Power Bank with 5V Charger</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
13
+ }
14
+ .product-card {
15
+ transition: all 0.3s ease;
16
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
17
+ }
18
+ .product-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ .battery-icon {
23
+ animation: pulse 2s infinite;
24
+ }
25
+ @keyframes pulse {
26
+ 0% { opacity: 0.8; }
27
+ 50% { opacity: 1; }
28
+ 100% { opacity: 0.8; }
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="gradient-bg min-h-screen">
33
+ <!-- Navigation -->
34
+ <nav class="bg-white shadow-lg">
35
+ <div class="max-w-6xl mx-auto px-4">
36
+ <div class="flex justify-between items-center py-4">
37
+ <div class="flex items-center space-x-4">
38
+ <i data-feather="battery-charging" class="text-blue-500 w-8 h-8"></i>
39
+ <span class="font-bold text-xl text-gray-800">VoltJuice</span>
40
+ </div>
41
+ <div class="hidden md:flex items-center space-x-8">
42
+ <a href="#" class="text-blue-600 font-medium">Home</a>
43
+ <a href="#features" class="text-gray-600 hover:text-blue-600">Features</a>
44
+ <a href="#specs" class="text-gray-600 hover:text-blue-600">Specs</a>
45
+ <a href="#contact" class="text-gray-600 hover:text-blue-600">Contact</a>
46
+ </div>
47
+ <button class="md:hidden focus:outline-none">
48
+ <i data-feather="menu" class="w-6 h-6 text-gray-600"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Hero Section -->
55
+ <section class="py-16 px-4">
56
+ <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
57
+ <div>
58
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Power Anywhere with <span class="text-blue-600">VoltJuice</span></h1>
59
+ <p class="text-xl text-gray-600 mb-8">The ultimate 12V DC power bank with built-in 5V USB charging for all your devices.</p>
60
+ <div class="flex space-x-4">
61
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
62
+ Pre-order Now
63
+ </button>
64
+ <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 font-bold py-3 px-6 rounded-lg transition duration-300">
65
+ Learn More
66
+ </button>
67
+ </div>
68
+ </div>
69
+ <div class="relative flex justify-center">
70
+ <div class="relative product-card bg-white p-8 rounded-2xl w-80 h-80 flex items-center justify-center">
71
+ <div class="absolute top-0 left-0 bg-blue-600 text-white px-4 py-1 rounded-br-lg rounded-tl-lg font-bold">NEW</div>
72
+ <div class="text-center">
73
+ <div class="battery-icon mb-6">
74
+ <i data-feather="battery" class="text-blue-500 w-16 h-16 mx-auto"></i>
75
+ </div>
76
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">VoltJuice Pro</h3>
77
+ <p class="text-gray-600">Dual Power Output</p>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </section>
83
+
84
+ <!-- Features Section -->
85
+ <section id="features" class="py-16 bg-white px-4">
86
+ <div class="max-w-6xl mx-auto">
87
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Powerful Features</h2>
88
+ <div class="grid md:grid-cols-3 gap-8">
89
+ <div class="bg-gray-50 p-6 rounded-xl product-card">
90
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
91
+ <i data-feather="zap" class="text-blue-600 w-6 h-6"></i>
92
+ </div>
93
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Dual Output</h3>
94
+ <p class="text-gray-600">12V DC and 5V USB ports to power multiple devices simultaneously.</p>
95
+ </div>
96
+ <div class="bg-gray-50 p-6 rounded-xl product-card">
97
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
98
+ <i data-feather="clock" class="text-blue-600 w-6 h-6"></i>
99
+ </div>
100
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Long Lasting</h3>
101
+ <p class="text-gray-600">High-capacity lithium battery provides extended runtime for your devices.</p>
102
+ </div>
103
+ <div class="bg-gray-50 p-6 rounded-xl product-card">
104
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
105
+ <i data-feather="shield" class="text-blue-600 w-6 h-6"></i>
106
+ </div>
107
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Smart Protection</h3>
108
+ <p class="text-gray-600">Built-in safeguards against overcharging, overheating, and short circuits.</p>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Specs Section -->
115
+ <section id="specs" class="py-16 px-4">
116
+ <div class="max-w-6xl mx-auto">
117
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Technical Specifications</h2>
118
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
119
+ <div class="grid md:grid-cols-2">
120
+ <div class="p-8">
121
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Power Specifications</h3>
122
+ <ul class="space-y-3">
123
+ <li class="flex items-start">
124
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
125
+ <span class="text-gray-700"><strong>Battery Capacity:</strong> 20,000mAh</span>
126
+ </li>
127
+ <li class="flex items-start">
128
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
129
+ <span class="text-gray-700"><strong>DC Output:</strong> 12V/3A</span>
130
+ </li>
131
+ <li class="flex items-start">
132
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
133
+ <span class="text-gray-700"><strong>USB Output:</strong> 5V/2.4A (x2 ports)</span>
134
+ </li>
135
+ <li class="flex items-start">
136
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
137
+ <span class="text-gray-700"><strong>Input:</strong> 5V/2A Micro USB</span>
138
+ </li>
139
+ </ul>
140
+ </div>
141
+ <div class="bg-gray-50 p-8">
142
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Physical Specifications</h3>
143
+ <ul class="space-y-3">
144
+ <li class="flex items-start">
145
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
146
+ <span class="text-gray-700"><strong>Dimensions:</strong> 150 x 75 x 25mm</span>
147
+ </li>
148
+ <li class="flex items-start">
149
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
150
+ <span class="text-gray-700"><strong>Weight:</strong> 450g</span>
151
+ </li>
152
+ <li class="flex items-start">
153
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
154
+ <span class="text-gray-700"><strong>Material:</strong> ABS Fireproof Shell</span>
155
+ </li>
156
+ <li class="flex items-start">
157
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
158
+ <span class="text-gray-700"><strong>Display:</strong> LED Battery Indicator</span>
159
+ </li>
160
+ </ul>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- CTA Section -->
168
+ <section class="py-16 bg-blue-600 text-white px-4">
169
+ <div class="max-w-4xl mx-auto text-center">
170
+ <h2 class="text-3xl font-bold mb-6">Ready to Experience Portable Power?</h2>
171
+ <p class="text-xl mb-8 opacity-90">Join thousands of satisfied customers who never run out of power.</p>
172
+ <button class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-lg text-lg transition duration-300 shadow-lg">
173
+ Order Now - $59.99
174
+ </button>
175
+ </div>
176
+ </section>
177
+
178
+ <!-- Footer -->
179
+ <footer id="contact" class="bg-gray-800 text-white py-12 px-4">
180
+ <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-8">
181
+ <div>
182
+ <div class="flex items-center space-x-2 mb-4">
183
+ <i data-feather="battery-charging" class="text-blue-400"></i>
184
+ <span class="font-bold text-xl">VoltJuice</span>
185
+ </div>
186
+ <p class="text-gray-400">Powering your adventures since 2023.</p>
187
+ </div>
188
+ <div>
189
+ <h4 class="font-bold text-lg mb-4">Quick Links</h4>
190
+ <ul class="space-y-2">
191
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
192
+ <li><a href="#features" class="text-gray-400 hover:text-white">Features</a></li>
193
+ <li><a href="#specs" class="text-gray-400 hover:text-white">Specifications</a></li>
194
+ <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
195
+ </ul>
196
+ </div>
197
+ <div>
198
+ <h4 class="font-bold text-lg mb-4">Contact Us</h4>
199
+ <ul class="space-y-2">
200
+ <li class="flex items-center">
201
+ <i data-feather="mail" class="mr-2 w-4 h-4"></i>
202
+ <span class="text-gray-400">[email protected]</span>
203
+ </li>
204
+ <li class="flex items-center">
205
+ <i data-feather="phone" class="mr-2 w-4 h-4"></i>
206
+ <span class="text-gray-400">+1 (800) 555-PWR</span>
207
+ </li>
208
+ </ul>
209
+ </div>
210
+ <div>
211
+ <h4 class="font-bold text-lg mb-4">Follow Us</h4>
212
+ <div class="flex space-x-4">
213
+ <a href="#" class="text-gray-400 hover:text-white">
214
+ <i data-feather="facebook" class="w-5 h-5"></i>
215
+ </a>
216
+ <a href="#" class="text-gray-400 hover:text-white">
217
+ <i data-feather="twitter" class="w-5 h-5"></i>
218
+ </a>
219
+ <a href="#" class="text-gray-400 hover:text-white">
220
+ <i data-feather="instagram" class="w-5 h-5"></i>
221
+ </a>
222
+ <a href="#" class="text-gray-400 hover:text-white">
223
+ <i data-feather="youtube" class="w-5 h-5"></i>
224
+ </a>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
229
+ <p>© 2023 VoltJuice. All rights reserved.</p>
230
+ </div>
231
+ </footer>
232
+
233
+ <script>
234
+ feather.replace();
235
+
236
+ // Simple animation for battery icon
237
+ document.addEventListener('DOMContentLoaded', function() {
238
+ const batteryIcon = document.querySelector('.battery-icon');
239
+ if (batteryIcon) {
240
+ setInterval(() => {
241
+ batteryIcon.style.opacity = batteryIcon.style.opacity === '0.8' ? '1' : '0.8';
242
+ }, 1000);
243
+ }
244
+ });
245
+ </script>
246
+ </body>
247
  </html>