Hugging Face's logo

Spaces:
Gabszap
/
extensiondash-pro
Running

App Files Community
Gabszap commited on
Commit
c9aa735
·
verified ·
1 Parent(s): d6163ae

based on this pic, https://litter.catbox.moe/hygr3ys83bsoyu4m.png, made a better site based on them (is mine, i just want a better version of my dashboard for my extension)

Browse files
Files changed (5) hide show
  1. README.md +7 -4
  2. components/navbar.js +15 -0
  3. index.html +152 -19
  4. script.js +23 -0
  5. style.css +36 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Extensiondash Pro
3
- emoji: 📊
4
  colorFrom: green
5
- colorTo: pink
 
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: ExtensionDash Pro 🚀
 
3
  colorFrom: green
4
+ colorTo: purple
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://huggingface.co/deepsite).
components/navbar.js ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ width: 100%;
9
+ }
10
+ nav {
11
+ background-color: #1a202c;
12
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
13
+ }
14
+ .nav-link:hover {
15
+ color: #a0aec0;
index.html CHANGED
@@ -1,19 +1,152 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ExtensionDash Pro</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/stats-card.js"></script>
13
+ <script src="components/feature-card.js"></script>
14
+ </head>
15
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
16
+ <custom-navbar></custom-navbar>
17
+
18
+ <main class="container mx-auto px-4 py-8">
19
+ <div class="flex flex-col lg:flex-row gap-6 mb-8">
20
+ <div class="lg:w-1/4">
21
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
22
+ <div class="flex items-center mb-6">
23
+ <div class="w-16 h-16 rounded-full bg-indigo-600 flex items-center justify-center">
24
+ <i data-feather="user" class="w-8 h-8"></i>
25
+ </div>
26
+ <div class="ml-4">
27
+ <h2 class="text-xl font-bold">User Profile</h2>
28
+ <p class="text-gray-400">Premium Member</p>
29
+ </div>
30
+ </div>
31
+ <div class="space-y-4">
32
+ <div class="flex items-center text-gray-300 hover:text-white cursor-pointer">
33
+ <i data-feather="settings" class="w-5 h-5 mr-3"></i>
34
+ <span>Settings</span>
35
+ </div>
36
+ <div class="flex items-center text-gray-300 hover:text-white cursor-pointer">
37
+ <i data-feather="help-circle" class="w-5 h-5 mr-3"></i>
38
+ <span>Help & Support</span>
39
+ </div>
40
+ <div class="flex items-center text-gray-300 hover:text-white cursor-pointer">
41
+ <i data-feather="log-out" class="w-5 h-5 mr-3"></i>
42
+ <span>Logout</span>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </div>
47
+
48
+ <div class="lg:w-3/4">
49
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
50
+ <stats-card
51
+ icon="activity"
52
+ title="Total Usage"
53
+ value="1,248"
54
+ change="+12%"
55
+ color="indigo">
56
+ </stats-card>
57
+
58
+ <stats-card
59
+ icon="zap"
60
+ title="Active Features"
61
+ value="8"
62
+ change="+2"
63
+ color="green">
64
+ </stats-card>
65
+
66
+ <stats-card
67
+ icon="clock"
68
+ title="Avg. Time Saved"
69
+ value="3.2h"
70
+ change="+0.5h"
71
+ color="yellow">
72
+ </stats-card>
73
+ </div>
74
+
75
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
76
+ <div class="flex justify-between items-center mb-6">
77
+ <h2 class="text-xl font-bold">Quick Actions</h2>
78
+ <button class="text-indigo-400 hover:text-indigo-300 flex items-center">
79
+ <i data-feather="plus" class="w-4 h-4 mr-1"></i>
80
+ Add New
81
+ </button>
82
+ </div>
83
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
84
+ <feature-card
85
+ icon="bookmark"
86
+ title="Bookmarks"
87
+ description="Manage your saved items">
88
+ </feature-card>
89
+
90
+ <feature-card
91
+ icon="eye"
92
+ title="Tracker Blocker"
93
+ description="Block unwanted trackers">
94
+ </feature-card>
95
+
96
+ <feature-card
97
+ icon="shield"
98
+ title="Privacy"
99
+ description="Enhance your privacy">
100
+ </feature-card>
101
+
102
+ <feature-card
103
+ icon="layout"
104
+ title="Themes"
105
+ description="Customize appearance">
106
+ </feature-card>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
111
+ <h2 class="text-xl font-bold mb-6">Recent Activity</h2>
112
+ <div class="space-y-4">
113
+ <div class="flex items-start">
114
+ <div class="bg-indigo-600 rounded-full p-2 mr-4">
115
+ <i data-feather="check" class="w-4 h-4"></i>
116
+ </div>
117
+ <div>
118
+ <p class="font-medium">Enabled Dark Mode</p>
119
+ <p class="text-sm text-gray-400">2 minutes ago</p>
120
+ </div>
121
+ </div>
122
+ <div class="flex items-start">
123
+ <div class="bg-green-600 rounded-full p-2 mr-4">
124
+ <i data-feather="zap" class="w-4 h-4"></i>
125
+ </div>
126
+ <div>
127
+ <p class="font-medium">Activated Tracker Blocker</p>
128
+ <p class="text-sm text-gray-400">15 minutes ago</p>
129
+ </div>
130
+ </div>
131
+ <div class="flex items-start">
132
+ <div class="bg-yellow-600 rounded-full p-2 mr-4">
133
+ <i data-feather="alert-triangle" class="w-4 h-4"></i>
134
+ </div>
135
+ <div>
136
+ <p class="font-medium">Blocked 3 trackers</p>
137
+ <p class="text-sm text-gray-400">1 hour ago</p>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </main>
145
+
146
+ <script>
147
+ feather.replace();
148
+ </script>
149
+ <script src="script.js"></script>
150
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
151
+ </body>
152
+ </html>
script.js ADDED
@@ -0,0 +1,23 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ // Initialize tooltips
3
+ const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
4
+ tooltipTriggerList.map(function (tooltipTriggerEl) {
5
+ return new bootstrap.Tooltip(tooltipTriggerEl);
6
+ });
7
+
8
+ // Add animation classes to cards
9
+ const cards = document.querySelectorAll('.bg-gray-800');
10
+ cards.forEach((card, index) => {
11
+ card.classList.add('animate-fade-in');
12
+ card.classList.add(`delay-${(index % 3) * 100}`);
13
+ });
14
+
15
+ // Theme toggle functionality
16
+ const themeToggle = document.getElementById('theme-toggle');
17
+ if (themeToggle) {
18
+ themeToggle.addEventListener('click', () => {
19
+ document.documentElement.classList.toggle('dark');
20
+ localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
21
+ });
22
+ }
23
+ });
style.css CHANGED
@@ -1,28 +1,45 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ /* Custom scrollbar */
6
+ ::-webkit-scrollbar {
7
+ width: 8px;
8
+ height: 8px;
9
+ }
10
+
11
+ ::-webkit-scrollbar-track {
12
+ background: #1a202c;
13
+ }
14
+
15
+ ::-webkit-scrollbar-thumb {
16
+ background: #4a5568;
17
+ border-radius: 4px;
18
+ }
19
+
20
+ ::-webkit-scrollbar-thumb:hover {
21
+ background: #718096;
22
  }
23
 
24
+ /* Animation for cards */
25
+ @keyframes fadeIn {
26
+ from { opacity: 0; transform: translateY(10px); }
27
+ to { opacity: 1; transform: translateY(0); }
28
  }
29
 
30
+ .animate-fade-in {
31
+ animation: fadeIn 0.3s ease-out forwards;
 
 
 
32
  }
33
 
34
+ /* Delay animations for staggered effect */
35
+ .delay-100 {
36
+ animation-delay: 0.1s;
 
 
 
37
  }
38
 
39
+ .delay-200 {
40
+ animation-delay: 0.2s;
41
  }
42
+
43
+ .delay-300 {
44
+ animation-delay: 0.3s;
45
+ }