Hugging Face's logo

Spaces:
M0zzi
/
glowup-premium-optimizer
Running

App Files Community
M0zzi commited on
Commit
1142709
·
verified ·
1 Parent(s): 6702333

https://xenforo.com/

Browse files
Files changed (4) hide show
  1. components/forum.js +98 -0
  2. components/navbar.js +3 -1
  3. forum.html +179 -0
  4. index.html +3 -3
components/forum.js ADDED
@@ -0,0 +1,98 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class ForumThread extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+
5
+ const title = this.getAttribute('title') || '';
6
+ const author = this.getAttribute('author') || '';
7
+ const time = this.getAttribute('time') || '';
8
+ const replies = this.getAttribute('replies') || '0';
9
+ const views = this.getAttribute('views') || '0';
10
+ const latestAuthor = this.getAttribute('latest-author') || '';
11
+ const latestTime = this.getAttribute('latest-time') || '';
12
+
13
+ this.shadowRoot.innerHTML = `
14
+ <style>
15
+ .thread {
16
+ transition: background-color 0.2s ease;
17
+ }
18
+ .thread:hover {
19
+ background-color: #f9fafb;
20
+ }
21
+ </style>
22
+ <div class="thread px-6 py-4 flex justify-between items-center">
23
+ <div class="flex items-start space-x-4">
24
+ <img src="http://static.photos/people/200x200/${Math.floor(Math.random() * 20)}" alt="User" class="w-10 h-10 rounded-full">
25
+ <div>
26
+ <h3 class="font-medium text-gray-900 hover:text-primary cursor-pointer">${title}</h3>
27
+ <div class="flex items-center space-x-3 text-sm text-gray-500 mt-1">
28
+ <span>Started by <a href="#" class="text-primary">${author}</a></span>
29
+ <span><i data-feather="clock" class="w-3 h-3 inline mr-1"></i> ${time}</span>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ <div class="flex items-center space-x-6">
34
+ <div class="text-center">
35
+ <div class="text-gray-900 font-medium">${replies}</div>
36
+ <div class="text-xs text-gray-500">Replies</div>
37
+ </div>
38
+ <div class="text-center">
39
+ <div class="text-gray-900 font-medium">${views}</div>
40
+ <div class="text-xs text-gray-500">Views</div>
41
+ </div>
42
+ <div class="w-40">
43
+ <div class="flex items-center space-x-2">
44
+ <img src="http://static.photos/people/200x200/${Math.floor(Math.random() * 20)}" alt="User" class="w-8 h-8 rounded-full">
45
+ <div class="text-sm">
46
+ <div class="text-gray-900 font-medium truncate">${latestAuthor}</div>
47
+ <div class="text-xs text-gray-500">${latestTime}</div>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ `;
54
+
55
+ // Replace icons after shadow DOM renders
56
+ setTimeout(() => feather.replace(), 100);
57
+ }
58
+ }
59
+
60
+ customElements.define('forum-thread', ForumThread);
61
+
62
+ class ForumCategory extends HTMLElement {
63
+ connectedCallback() {
64
+ this.attachShadow({ mode: 'open' });
65
+
66
+ const title = this.getAttribute('title') || '';
67
+ const description = this.getAttribute('description') || '';
68
+ const icon = this.getAttribute('icon') || 'help-circle';
69
+
70
+ this.shadowRoot.innerHTML = `
71
+ <style>
72
+ .category-header {
73
+ background-color: #f3f4f6;
74
+ border-left: 4px solid #6366F1;
75
+ }
76
+ </style>
77
+ <div class="rounded-lg overflow-hidden shadow-sm">
78
+ <div class="category-header px-6 py-3 flex items-center">
79
+ <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4">
80
+ <i data-feather="${icon}" class="text-white w-5 h-5"></i>
81
+ </div>
82
+ <div>
83
+ <h2 class="text-lg font-bold text-gray-900">${title}</h2>
84
+ <p class="text-gray-600 text-sm">${description}</p>
85
+ </div>
86
+ </div>
87
+ <div class="bg-white divide-y divide-gray-100">
88
+ <slot></slot>
89
+ </div>
90
+ </div>
91
+ `;
92
+
93
+ // Replace icons after shadow DOM renders
94
+ setTimeout(() => feather.replace(), 100);
95
+ }
96
+ }
97
+
98
+ customElements.define('forum-category', ForumCategory);
components/navbar.js CHANGED
@@ -42,6 +42,7 @@ class CustomNavbar extends HTMLElement {
42
  <a href="#features" class="nav-link text-gray-700 hover:text-primary">Funktionen</a>
43
  <a href="#pricing" class="nav-link text-gray-700 hover:text-primary">Preise</a>
44
  <a href="#" class="nav-link text-gray-700 hover:text-primary">Ressourcen</a>
 
45
  <a href="#" class="nav-link text-gray-700 hover:text-primary">Über uns</a>
46
  </div>
47
 
@@ -65,8 +66,9 @@ class CustomNavbar extends HTMLElement {
65
  <a href="#features" class="block text-gray-700 hover:text-primary">Features</a>
66
  <a href="#pricing" class="block text-gray-700 hover:text-primary">Pricing</a>
67
  <a href="#" class="block text-gray-700 hover:text-primary">Resources</a>
 
68
  <a href="#" class="block text-gray-700 hover:text-primary">About</a>
69
- <div class="border-t border-gray-200 pt-4 mt-2">
70
  <a href="#" class="block text-gray-700 hover:text-primary mb-3">Log In</a>
71
  <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full font-medium transition duration-300">Sign Up</a>
72
  </div>
 
42
  <a href="#features" class="nav-link text-gray-700 hover:text-primary">Funktionen</a>
43
  <a href="#pricing" class="nav-link text-gray-700 hover:text-primary">Preise</a>
44
  <a href="#" class="nav-link text-gray-700 hover:text-primary">Ressourcen</a>
45
+ <a href="forum.html" class="nav-link text-gray-700 hover:text-primary">Forum</a>
46
  <a href="#" class="nav-link text-gray-700 hover:text-primary">Über uns</a>
47
  </div>
48
 
 
66
  <a href="#features" class="block text-gray-700 hover:text-primary">Features</a>
67
  <a href="#pricing" class="block text-gray-700 hover:text-primary">Pricing</a>
68
  <a href="#" class="block text-gray-700 hover:text-primary">Resources</a>
69
+ <a href="forum.html" class="block text-gray-700 hover:text-primary">Forum</a>
70
  <a href="#" class="block text-gray-700 hover:text-primary">About</a>
71
+ <div class="border-t border-gray-200 pt-4 mt-2">
72
  <a href="#" class="block text-gray-700 hover:text-primary mb-3">Log In</a>
73
  <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full font-medium transition duration-300">Sign Up</a>
74
  </div>
forum.html ADDED
@@ -0,0 +1,179 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Discussions | GlowUp Premium</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
+ <style>
13
+ .thread:hover {
14
+ background-color: #f9fafb;
15
+ }
16
+ .category-header {
17
+ background-color: #f3f4f6;
18
+ border-left: 4px solid #6366F1;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-50 min-h-screen flex flex-col">
23
+ <custom-navbar></custom-navbar>
24
+
25
+ <main class="flex-grow container mx-auto px-4 py-8">
26
+ <!-- Forum Header -->
27
+ <div class="flex justify-between items-center mb-8">
28
+ <h1 class="text-3xl font-bold text-gray-900">Community Forum</h1>
29
+ <div class="flex space-x-4">
30
+ <button class="flex items-center space-x-2 bg-primary text-white px-4 py-2 rounded">
31
+ <i data-feather="plus" class="w-5 h-5"></i>
32
+ <span>New Thread</span>
33
+ </button>
34
+ <div class="relative">
35
+ <input type="text" placeholder="Search forum..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
36
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
37
+ </div>
38
+ </div>
39
+ </div>
40
+
41
+ <!-- Categories -->
42
+ <div class="space-y-8">
43
+ <!-- Category 1 -->
44
+ <div class="rounded-lg overflow-hidden shadow-sm">
45
+ <div class="category-header px-6 py-3 flex items-center">
46
+ <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4">
47
+ <i data-feather="zap" class="text-white w-5 h-5"></i>
48
+ </div>
49
+ <div>
50
+ <h2 class="text-lg font-bold text-gray-900">Performance Optimization</h2>
51
+ <p class="text-gray-600 text-sm">Discuss optimization techniques and strategies</p>
52
+ </div>
53
+ </div>
54
+
55
+ <div class="bg-white divide-y divide-gray-100">
56
+ <!-- Thread -->
57
+ <div class="thread px-6 py-4 flex justify-between items-center">
58
+ <div class="flex items-start space-x-4">
59
+ <img src="http://static.photos/people/200x200/10" alt="User" class="w-10 h-10 rounded-full">
60
+ <div>
61
+ <h3 class="font-medium text-gray-900 hover:text-primary cursor-pointer">Best practices for daily optimization routines</h3>
62
+ <div class="flex items-center space-x-3 text-sm text-gray-500 mt-1">
63
+ <span>Started by <a href="#" class="text-primary">Alex_Morgan</a></span>
64
+ <span><i data-feather="clock" class="w-3 h-3 inline mr-1"></i> 2 days ago</span>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ <div class="flex items-center space-x-6">
69
+ <div class="text-center">
70
+ <div class="text-gray-900 font-medium">24</div>
71
+ <div class="text-xs text-gray-500">Replies</div>
72
+ </div>
73
+ <div class="text-center">
74
+ <div class="text-gray-900 font-medium">152</div>
75
+ <div class="text-xs text-gray-500">Views</div>
76
+ </div>
77
+ <div class="w-40">
78
+ <div class="flex items-center space-x-2">
79
+ <img src="http://static.photos/people/200x200/11" alt="User" class="w-8 h-8 rounded-full">
80
+ <div class="text-sm">
81
+ <div class="text-gray-900 font-medium truncate">Jordan_Taylor</div>
82
+ <div class="text-xs text-gray-500">Today, 02:15 PM</div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Thread -->
90
+ <div class="thread px-6 py-4 flex justify-between items-center">
91
+ <div class="flex items-start space-x-4">
92
+ <img src="http://static.photos/people/200x200/12" alt="User" class="w-10 h-10 rounded-full">
93
+ <div>
94
+ <h3 class="font-medium text-gray-900 hover:text-primary cursor-pointer">Measuring optimization impact - what metrics matter?</h3>
95
+ <div class="flex items-center space-x-3 text-sm text-gray-500 mt-1">
96
+ <span>Started by <a href="#" class="text-primary">Sam_Williams</a></span>
97
+ <span><i data-feather="clock" class="w-3 h-3 inline mr-1"></i> 1 week ago</span>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ <div class="flex items-center space-x-6">
102
+ <div class="text-center">
103
+ <div class="text-gray-900 font-medium">18</div>
104
+ <div class="text-xs text-gray-500">Replies</div>
105
+ </div>
106
+ <div class="text-center">
107
+ <div class="text-gray-900 font-medium">87</div>
108
+ <div class="text-xs text-gray-500">Views</div>
109
+ </div>
110
+ <div class="w-40">
111
+ <div class="flex items-center space-x-2">
112
+ <img src="http://static.photos/people/200x200/13" alt="User" class="w-8 h-8 rounded-full">
113
+ <div class="text-sm">
114
+ <div class="text-gray-900 font-medium truncate">Casey_Smith</div>
115
+ <div class="text-xs text-gray-500">Yesterday, 08:45 AM</div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Category 2 -->
125
+ <div class="rounded-lg overflow-hidden shadow-sm">
126
+ <div class="category-header px-6 py-3 flex items-center">
127
+ <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4">
128
+ <i data-feather="shield" class="text-white w-5 h-5"></i>
129
+ </div>
130
+ <div>
131
+ <h2 class="text-lg font-bold text-gray-900">Troubleshooting</h2>
132
+ <p class="text-gray-600 text-sm">Get help with issues and bugs</p>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="bg-white divide-y divide-gray-100">
137
+ <!-- Thread -->
138
+ <div class="thread px-6 py-4 flex justify-between items-center">
139
+ <div class="flex items-start space-x-4">
140
+ <img src="http://static.photos/people/200x200/14" alt="User" class="w-10 h-10 rounded-full">
141
+ <div>
142
+ <h3 class="font-medium text-gray-900 hover:text-primary cursor-pointer">Version 2.3 causing performance issues?</h3>
143
+ <div class="flex items-center space-x-3 text-sm text-gray-500 mt-1">
144
+ <span>Started by <a href="#" class="text-primary">Taylor_Roby</a></span>
145
+ <span><i data-feather="clock" class="w-3 h-3 inline mr-1"></i> 3 days ago</span>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ <div class="flex items-center space-x-6">
150
+ <div class="text-center">
151
+ <div class="text-gray-900 font-medium">7</div>
152
+ <div class="text-xs text-gray-500">Replies</div>
153
+ </div>
154
+ <div class="text-center">
155
+ <div class="text-gray-900 font-medium">42</div>
156
+ <div class="text-xs text-gray-500">Views</div>
157
+ </div>
158
+ <div class="w-40">
159
+ <div class="flex items-center space-x-2">
160
+ <img src="http://static.photos/people/200x200/15" alt="User" class="w-8 h-8 rounded-full">
161
+ <div class="text-sm">
162
+ <div class="text-gray-900 font-medium truncate">Team_GlowUp</div>
163
+ <div class="text-xs text-gray-500">Today, 10:30 AM</div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </main>
173
+
174
+ <custom-footer></custom-footer>
175
+
176
+ <script src="script.js"></script>
177
+ <script>feather.replace();</script>
178
+ </body>
179
+ </html>
index.html CHANGED
@@ -228,9 +228,9 @@
228
  </main>
229
 
230
  <custom-footer></custom-footer>
231
-
232
- <script src="script.js"></script>
233
- <script>feather.replace();</script>
234
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
235
  </body>
236
  </html>
 
228
  </main>
229
 
230
  <custom-footer></custom-footer>
231
+ <script src="script.js"></script>
232
+ <script src="components/forum.js" defer></script>
233
+ <script>feather.replace();</script>
234
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
235
  </body>
236
  </html>