Hugging Face's logo

Spaces:
stryder4096
/
pc-optimizer-pro
Running

App Files Community
stryder4096 commited on
Commit
bc16843
·
verified ·
1 Parent(s): 90e0c9e

create a web app that will optimize my PC

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +478 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Pc Optimizer Pro
3
- emoji: 📚
4
  colorFrom: blue
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: PC Optimizer Pro 🚀
 
3
  colorFrom: blue
4
+ colorTo: blue
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,479 @@
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>PC Optimizer Pro - Ultimate PC Performance</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+ * {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
20
+ }
21
+ .glow-effect {
22
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
23
+ }
24
+ .progress-ring {
25
+ transform: rotate(-90deg);
26
+ }
27
+ .tooltip {
28
+ position: relative;
29
+ }
30
+ .tooltip:hover::after {
31
+ content: attr(data-tooltip);
32
+ position: absolute;
33
+ bottom: 100%;
34
+ left: 50%;
35
+ transform: translateX(-50%);
36
+ background: #1e293b;
37
+ color: white;
38
+ padding: 8px 12px;
39
+ border-radius: 6px;
40
+ font-size: 12px;
41
+ white-space: nowrap;
42
+ z-index: 10;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="gradient-bg min-h-screen text-white">
47
+ <!-- Navigation -->
48
+ <nav class="bg-gray-900/80 backdrop-blur-md border-b border-gray-700 sticky top-0 z-50">
49
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
50
+ <div class="flex justify-between h-16 items-center">
51
+ <div class="flex items-center space-x-2">
52
+ <i data-feather="cpu" class="text-indigo-400"></i>
53
+ <span class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">PC Optimizer Pro</span>
54
+ </div>
55
+
56
+ <div class="hidden md:flex space-x-8">
57
+ <a href="#dashboard" class="text-gray-300 hover:text-indigo-400 transition-colors">Dashboard</a>
58
+ <a href="#optimize" class="text-gray-300 hover:text-indigo-400 transition-colors">Optimize</a>
59
+ <a href="#profiles" class="text-gray-300 hover:text-indigo-400 transition-colors">Profiles</a>
60
+ <a href="#schedule" class="text-gray-300 hover:text-indigo-400 transition-colors">Schedule</a>
61
+ </div>
62
+
63
+ <div class="flex items-center space-x-4">
64
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition-colors glow-effect">
65
+ <i data-feather="settings" class="w-4 h-4 mr-2 inline"></i>
66
+ Settings
67
+ </button>
68
+ <button class="p-2 hover:bg-gray-800 rounded-lg transition-colors">
69
+ <i data-feather="help-circle"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <!-- Hero Section -->
77
+ <section class="relative py-20 px-4 sm:px-6 lg:px-8">
78
+ <div class="max-w-7xl mx-auto text-center">
79
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">
80
+ <span class="bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">
81
+ Boost Your PC Performance
82
+ </span>
83
+ </h1>
84
+ <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
85
+ Professional-grade optimization tools that work locally on your device.
86
+ No data transmission, complete privacy guaranteed.
87
+ </p>
88
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
89
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-8 py-3 rounded-lg font-semibold transition-colors glow-effect flex items-center justify-center">
90
+ <i data-feather="zap" class="w-5 h-5 mr-2"></i>
91
+ Quick Scan & Optimize
92
+ </button>
93
+ <button class="border border-indigo-400 text-indigo-400 hover:bg-indigo-400/10 px-8 py-3 rounded-lg font-semibold transition-colors">
94
+ Learn More
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </section>
99
+
100
+ <!-- Real-time Monitoring Dashboard -->
101
+ <section id="dashboard" class="py-16 px-4 sm:px-6 lg:px-8">
102
+ <div class="max-w-7xl mx-auto">
103
+ <h2 class="text-3xl font-bold text-center mb-12">Real-time System Monitoring</h2>
104
+
105
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
106
+ <!-- CPU Usage -->
107
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
108
+ <div class="flex items-center justify-between mb-4">
109
+ <h3 class="font-semibold text-gray-300">CPU Usage</h3>
110
+ <i data-feather="cpu" class="text-indigo-400"></i>
111
+ </div>
112
+ <div class="relative w-24 h-24 mx-auto mb-4">
113
+ <svg class="w-full h-full" viewBox="0 0 100 100">
114
+ <circle class="text-gray-700 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"/>
115
+ <circle class="text-indigo-400 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"
116
+ stroke-dasharray="251.2" stroke-dashoffset="75.36" stroke-linecap="round"/>
117
+ </svg>
118
+ <div class="absolute inset-0 flex items-center justify-center">
119
+ <span class="text-2xl font-bold">70%</span>
120
+ </div>
121
+ </div>
122
+ <p class="text-center text-sm text-gray-400">4.2 GHz / 65°C</p>
123
+ </div>
124
+
125
+ <!-- Memory Usage -->
126
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
127
+ <div class="flex items-center justify-between mb-4">
128
+ <h3 class="font-semibold text-gray-300">Memory</h3>
129
+ <i data-feather="hard-drive" class="text-purple-400"></i>
130
+ </div>
131
+ <div class="relative w-24 h-24 mx-auto mb-4">
132
+ <svg class="w-full h-full" viewBox="0 0 100 100">
133
+ <circle class="text-gray-700 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"/>
134
+ <circle class="text-purple-400 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"
135
+ stroke-dasharray="251.2" stroke-dashoffset="125.6" stroke-linecap="round"/>
136
+ </svg>
137
+ <div class="absolute inset-0 flex items-center justify-center">
138
+ <span class="text-2xl font-bold">50%</span>
139
+ </div>
140
+ </div>
141
+ <p class="text-center text-sm text-gray-400">8GB / 16GB Used</p>
142
+ </div>
143
+
144
+ <!-- Disk Usage -->
145
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
146
+ <div class="flex items-center justify-between mb-4">
147
+ <h3 class="font-semibold text-gray-300">Disk Space</h3>
148
+ <i data-feather="database" class="text-green-400"></i>
149
+ </div>
150
+ <div class="relative w-24 h-24 mx-auto mb-4">
151
+ <svg class="w-full h-full" viewBox="0 0 100 100">
152
+ <circle class="text-gray-700 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"/>
153
+ <circle class="text-green-400 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"
154
+ stroke-dasharray="251.2" stroke-dashoffset="175.84" stroke-linecap="round"/>
155
+ </svg>
156
+ <div class="absolute inset-0 flex items-center justify-center">
157
+ <span class="text-2xl font-bold">30%</span>
158
+ </div>
159
+ </div>
160
+ <p class="text-center text-sm text-gray-400">250GB / 1TB Used</p>
161
+ </div>
162
+
163
+ <!-- Network Usage -->
164
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
165
+ <div class="flex items-center justify-between mb-4">
166
+ <h3 class="font-semibold text-gray-300">Network</h3>
167
+ <i data-feather="wifi" class="text-blue-400"></i>
168
+ </div>
169
+ <div class="relative w-24 h-24 mx-auto mb-4">
170
+ <svg class="w-full h-full" viewBox="0 0 100 100">
171
+ <circle class="text-gray-700 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"/>
172
+ <circle class="text-blue-400 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"
173
+ stroke-dasharray="251.2" stroke-dashoffset="200.96" stroke-linecap="round"/>
174
+ </svg>
175
+ <div class="absolute inset-0 flex items-center justify-center">
176
+ <span class="text-2xl font-bold">20%</span>
177
+ </div>
178
+ </div>
179
+ <p class="text-center text-sm text-gray-400">25 Mbps / 125 Mbps</p>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- Optimization Tools -->
186
+ <section id="optimize" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-900/30">
187
+ <div class="max-w-7xl mx-auto">
188
+ <h2 class="text-3xl font-bold text-center mb-12">One-Click Optimization Tools</h2>
189
+
190
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
191
+ <!-- Clean Temporary Files -->
192
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-indigo-400 transition-all duration-300">
193
+ <div class="flex items-center mb-4">
194
+ <div class="w-12 h-12 bg-indigo-500/20 rounded-lg flex items-center justify-center mr-4">
195
+ <i data-feather="trash-2" class="text-indigo-400"></i>
196
+ </div>
197
+ <h3 class="font-semibold text-lg">Clean Temporary Files</h3>
198
+ </div>
199
+ <p class="text-gray-400 text-sm mb-4">Remove unnecessary temporary files and free up disk space</p>
200
+ <div class="flex justify-between items-center">
201
+ <span class="text-indigo-400 text-sm">2.3GB can be freed</span>
202
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg text-sm transition-colors tooltip" data-tooltip="Scan and clean temporary files">
203
+ Clean Now
204
+ </button>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Startup Programs -->
209
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-purple-400 transition-all duration-300">
210
+ <div class="flex items-center mb-4">
211
+ <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mr-4">
212
+ <i data-feather="play" class="text-purple-400"></i>
213
+ </div>
214
+ <h3 class="font-semibold text-lg">Startup Programs</h3>
215
+ </div>
216
+ <p class="text-gray-400 text-sm mb-4">Manage applications that launch at startup to improve boot time</p>
217
+ <div class="flex justify-between items-center">
218
+ <span class="text-purple-400 text-sm">12 programs detected</span>
219
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg text-sm transition-colors tooltip" data-tooltip="Manage startup applications">
220
+ Manage
221
+ </button>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Disk Defragment -->
226
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-green-400 transition-all duration-300">
227
+ <div class="flex items-center mb-4">
228
+ <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center mr-4">
229
+ <i data-feather="pie-chart" class="text-green-400"></i>
230
+ </div>
231
+ <h3 class="font-semibold text-lg">Disk Defragment</h3>
232
+ </div>
233
+ <p class="text-gray-400 text-sm mb-4">Optimize HDD performance by reorganizing fragmented data</p>
234
+ <div class="flex justify-between items-center">
235
+ <span class="text-green-400 text-sm">15% fragmented</span>
236
+ <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg text-sm transition-colors tooltip" data-tooltip="Defragment your HDD">
237
+ Optimize
238
+ </button>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Registry Cleaner -->
243
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-red-400 transition-all duration-300">
244
+ <div class="flex items-center mb-4">
245
+ <div class="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center mr-4">
246
+ <i data-feather="shield" class="text-red-400"></i>
247
+ </div>
248
+ <h3 class="font-semibold text-lg">Registry Cleaner</h3>
249
+ </div>
250
+ <p class="text-gray-400 text-sm mb-4">Clean and optimize Windows registry for better stability</p>
251
+ <div class="flex justify-between items-center">
252
+ <span class="text-red-400 text-sm">245 issues found</span>
253
+ <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg text-sm transition-colors tooltip" data-tooltip="Clean registry errors">
254
+ Fix Issues
255
+ </button>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- System Settings -->
260
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-blue-400 transition-all duration-300">
261
+ <div class="flex items-center mb-4">
262
+ <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mr-4">
263
+ <i data-feather="settings" class="text-blue-400"></i>
264
+ </div>
265
+ <h3 class="font-semibold text-lg">System Settings</h3>
266
+ </div>
267
+ <p class="text-gray-400 text-sm mb-4">Optimize Windows settings for maximum performance</p>
268
+ <div class="flex justify-between items-center">
269
+ <span class="text-blue-400 text-sm">8 optimizations available</span>
270
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg text-sm transition-colors tooltip" data-tooltip="Optimize system settings">
271
+ Optimize
272
+ </button>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Browser Cleaner -->
277
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-yellow-400 transition-all duration-300">
278
+ <div class="flex items-center mb-4">
279
+ <div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center mr-4">
280
+ <i data-feather="globe" class="text-yellow-400"></i>
281
+ </div>
282
+ <h3 class="font-semibold text-lg">Browser Cleaner</h3>
283
+ </div>
284
+ <p class="text-gray-400 text-sm mb-4">Clear browser cache, cookies, and history</p>
285
+ <div class="flex justify-between items-center">
286
+ <span class="text-yellow-400 text-sm">1.8GB cache data</span>
287
+ <button class="bg-yellow-600 hover:bg-yellow-700 px-4 py-2 rounded-lg text-sm transition-colors tooltip" data-tooltip="Clean browser data">
288
+ Clean Now
289
+ </button>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </section>
295
+
296
+ <!-- Performance Metrics -->
297
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
298
+ <div class="max-w-7xl mx-auto">
299
+ <h2 class="text-3xl font-bold text-center mb-12">Performance Metrics</h2>
300
+
301
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-gray-700">
302
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
303
+ <div>
304
+ <h3 class="text-xl font-semibold mb-6">Before Optimization</h3>
305
+ <div class="space-y-4">
306
+ <div>
307
+ <div class="flex justify-between mb-2">
308
+ <span class="text-gray-300">System Performance</span>
309
+ <span class="text-red-400">65%</span>
310
+ </div>
311
+ <div class="w-full bg-gray-700 rounded-full h-2">
312
+ <div class="bg-red-500 h-2 rounded-full" style="width: 65%"></div>
313
+ </div>
314
+ </div>
315
+ <div>
316
+ <div class="flex justify-between mb-2">
317
+ <span class="text-gray-300">Boot Time</span>
318
+ <span class="text-red-400">45s</span>
319
+ </div>
320
+ <div class="w-full bg-gray-700 rounded-full h-2">
321
+ <div class="bg-red-500 h-2 rounded-full" style="width: 75%"></div>
322
+ </div>
323
+ </div>
324
+ <div>
325
+ <div class="flex justify-between mb-2">
326
+ <span class="text-gray-300">Available Space</span>
327
+ <span class="text-red-400">120GB</span>
328
+ </div>
329
+ <div class="w-full bg-gray-700 rounded-full h-2">
330
+ <div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <div>
337
+ <h3 class="text-xl font-semibold mb-6">After Optimization</h3>
338
+ <div class="space-y-4">
339
+ <div>
340
+ <div class="flex justify-between mb-2">
341
+ <span class="text-gray-300">System Performance</span>
342
+ <span class="text-green-400">92%</span>
343
+ </div>
344
+ <div class="w-full bg-gray-700 rounded-full h-2">
345
+ <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
346
+ </div>
347
+ </div>
348
+ <div>
349
+ <div class="flex justify-between mb-2">
350
+ <span class="text-gray-300">Boot Time</span>
351
+ <span class="text-green-400">18s</span>
352
+ </div>
353
+ <div class="w-full bg-gray-700 rounded-full h-2">
354
+ <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
355
+ </div>
356
+ </div>
357
+ <div>
358
+ <div class="flex justify-between mb-2">
359
+ <span class="text-gray-300">Available Space</span>
360
+ <span class="text-green-400">180GB</span>
361
+ </div>
362
+ <div class="w-full bg-gray-700 rounded-full h-2">
363
+ <div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="mt-8 text-center">
371
+ <button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 px-8 py-3 rounded-lg font-semibold transition-all duration-300 glow-effect">
372
+ <i data-feather="zap" class="w-5 h-5 mr-2 inline"></i>
373
+ Run Full Optimization
374
+ </button>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- Footer -->
381
+ <footer class="bg-gray-900 border-t border-gray-800 py-8 px-4 sm:px-6 lg:px-8">
382
+ <div class="max-w-7xl mx-auto">
383
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
384
+ <div>
385
+ <div class="flex items-center space-x-2 mb-4">
386
+ <i data-feather="cpu" class="text-indigo-400"></i>
387
+ <span class="text-xl font-bold">PC Optimizer Pro</span>
388
+ </div>
389
+ <p class="text-gray-400 text-sm">Professional PC optimization tools that work locally on your device.</p>
390
+ </div>
391
+
392
+ <div>
393
+ <h4 class="font-semibold mb-4">Features</h4>
394
+ <ul class="space-y-2 text-sm text-gray-400">
395
+ <li><a href="#" class="hover:text-indigo-400 transition-colors">System Monitoring</a></li>
396
+ <li><a href="#" class="hover:text-indigo-400 transition-colors">One-Click Optimization</a></li>
397
+ <li><a href="#" class="hover:text-indigo-400 transition-colors">Custom Profiles</a></li>
398
+ <li><a href="#" class="hover:text-indigo-400 transition-colors">Scheduled Tasks</a></li>
399
+ </ul>
400
+ </div>
401
+
402
+ <div>
403
+ <h4 class="font-semibold mb-4">Support</h4>
404
+ <ul class="space-y-2 text-sm text-gray-400">
405
+ <li><a href="#" class="hover:text-indigo-400 transition-colors">Help Center</a></li>
406
+ <li><a href="#" class="hover:text-indigo-400 transition-colors">User Guide</a></li>
407
+ <li><a href="#" class="hover:text-indigo-400 transition-colors">Contact Us</a></li>
408
+ <li><a href="#" class="hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
409
+ </ul>
410
+ </div>
411
+
412
+ <div>
413
+ <h4 class="font-semibold mb-4">Security Notice</h4>
414
+ <p class="text-sm text-gray-400">
415
+ <i data-feather="shield" class="w-4 h-4 inline mr-2 text-green-400"></i>
416
+ All processing happens locally on your device. No data is transmitted to external servers.
417
+ </p>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-400">
422
+ <p>© 2024 PC Optimizer Pro. All rights reserved. Made with <i data-feather="heart" class="w-4 h-4 inline text-red-400"></i> for better PC performance.</p>
423
+ </div>
424
+ </div>
425
+ </footer>
426
+
427
+ <!-- Vanta.js Background -->
428
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
429
+
430
+ <script>
431
+ // Initialize Vanta.js background
432
+ VANTA.NET({
433
+ el: "#vanta-bg",
434
+ mouseControls: true,
435
+ touchControls: true,
436
+ gyroControls: false,
437
+ minHeight: 200.00,
438
+ minWidth: 200.00,
439
+ scale: 1.00,
440
+ scaleMobile: 1.00,
441
+ color: 0x4f46e5,
442
+ backgroundColor: 0x0a0a0a,
443
+ points: 10.00,
444
+ maxDistance: 25.00,
445
+ spacing: 18.00
446
+ });
447
+
448
+ // Initialize Feather Icons
449
+ feather.replace();
450
+
451
+ // Smooth scrolling for navigation links
452
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
453
+ anchor.addEventListener('click', function (e) {
454
+ e.preventDefault();
455
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
456
+ behavior: 'smooth'
457
+ });
458
+ });
459
+ });
460
+
461
+ // Tooltip functionality
462
+ document.querySelectorAll('.tooltip').forEach(element => {
463
+ element.addEventListener('mouseenter', function() {
464
+ this.setAttribute('data-tooltip', this.getAttribute('data-tooltip'));
465
+ });
466
+ });
467
+
468
+ // Animate progress rings
469
+ anime({
470
+ targets: 'circle[stroke-dashoffset]',
471
+ strokeDashoffset: [anime.setDashoffset, 0],
472
+ easing: 'easeInOutSine',
473
+ duration: 2000,
474
+ delay: anime.stagger(200),
475
+ loop: false
476
+ });
477
+ </script>
478
+ </body>
479
  </html>