Hugging Face's logo

Spaces:
rehankhan5hhi5
/
ALLTOOLS
Running

App Files Community
rehankhan5hhi5 commited on
Commit
e5038f0
·
verified ·
1 Parent(s): c6f7082

index.html

Browse files
Files changed (1) hide show
  1. index.html +315 -18
index.html CHANGED
@@ -1,19 +1,316 @@
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>Tool Hub</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root{
11
+ --bg:#0B0E14;
12
+ --panel:#12151D;
13
+ --panel-2:#171B26;
14
+ --line:#242938;
15
+ --text:#E8EAF0;
16
+ --sub:#8A90A6;
17
+ --violet:#7C5CFC;
18
+ --teal:#34D8C6;
19
+ }
20
+ *{box-sizing:border-box; margin:0; padding:0;}
21
+ html,body{height:100%;}
22
+ body{
23
+ background:var(--bg);
24
+ color:var(--text);
25
+ font-family:'Inter', sans-serif;
26
+ display:flex;
27
+ flex-direction:column;
28
+ overflow:hidden;
29
+ }
30
+
31
+ /* Top bar */
32
+ header{
33
+ display:flex;
34
+ align-items:center;
35
+ justify-content:space-between;
36
+ padding:14px 20px;
37
+ background:var(--panel);
38
+ border-bottom:1px solid var(--line);
39
+ position:relative;
40
+ z-index:20;
41
+ flex-shrink:0;
42
+ }
43
+ .brand{
44
+ display:flex;
45
+ align-items:center;
46
+ gap:10px;
47
+ }
48
+ .brand-mark{
49
+ width:28px; height:28px;
50
+ border-radius:7px;
51
+ background:linear-gradient(135deg, var(--violet), var(--teal));
52
+ flex-shrink:0;
53
+ }
54
+ .brand-text{
55
+ font-family:'Space Grotesk', sans-serif;
56
+ font-weight:700;
57
+ font-size:16px;
58
+ letter-spacing:-0.01em;
59
+ }
60
+ .brand-text span{
61
+ display:block;
62
+ font-family:'JetBrains Mono', monospace;
63
+ font-weight:400;
64
+ font-size:10.5px;
65
+ color:var(--sub);
66
+ letter-spacing:0.04em;
67
+ margin-top:1px;
68
+ }
69
+
70
+ .current-tool{
71
+ font-family:'JetBrains Mono', monospace;
72
+ font-size:12px;
73
+ color:var(--sub);
74
+ display:flex;
75
+ align-items:center;
76
+ gap:8px;
77
+ }
78
+ .current-tool .dot{
79
+ width:7px; height:7px;
80
+ border-radius:50%;
81
+ background:var(--teal);
82
+ box-shadow:0 0 8px var(--teal);
83
+ }
84
+ .current-tool b{ color:var(--text); font-weight:600; }
85
+
86
+ /* Menu button */
87
+ .menu-wrap{ position:relative; }
88
+ .menu-btn{
89
+ width:38px; height:38px;
90
+ border-radius:9px;
91
+ border:1px solid var(--line);
92
+ background:var(--panel-2);
93
+ color:var(--text);
94
+ display:flex;
95
+ align-items:center;
96
+ justify-content:center;
97
+ cursor:pointer;
98
+ transition:border-color .15s ease, background .15s ease;
99
+ }
100
+ .menu-btn:hover{ border-color:var(--violet); background:#1B1F2C; }
101
+ .menu-btn svg{ width:18px; height:18px; }
102
+
103
+ .dropdown{
104
+ position:absolute;
105
+ top:48px;
106
+ right:0;
107
+ width:260px;
108
+ background:var(--panel-2);
109
+ border:1px solid var(--line);
110
+ border-radius:12px;
111
+ box-shadow:0 12px 32px rgba(0,0,0,0.45);
112
+ padding:6px;
113
+ opacity:0;
114
+ transform:translateY(-6px) scale(0.98);
115
+ pointer-events:none;
116
+ transition:opacity .16s ease, transform .16s ease;
117
+ }
118
+ .dropdown.open{
119
+ opacity:1;
120
+ transform:translateY(0) scale(1);
121
+ pointer-events:auto;
122
+ }
123
+ .dropdown-item{
124
+ display:flex;
125
+ align-items:center;
126
+ gap:12px;
127
+ padding:10px 12px;
128
+ border-radius:8px;
129
+ cursor:pointer;
130
+ transition:background .12s ease;
131
+ }
132
+ .dropdown-item:hover{ background:#1F2432; }
133
+ .dropdown-item.active{ background:#1B2030; }
134
+ .item-icon{
135
+ width:32px; height:32px;
136
+ border-radius:8px;
137
+ flex-shrink:0;
138
+ display:flex;
139
+ align-items:center;
140
+ justify-content:center;
141
+ font-size:14px;
142
+ }
143
+ .item-text{ flex:1; min-width:0; }
144
+ .item-title{ font-size:13.5px; font-weight:600; }
145
+ .item-sub{ font-size:11px; color:var(--sub); font-family:'JetBrains Mono', monospace; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
146
+ .item-check{ width:14px; color:var(--teal); flex-shrink:0; opacity:0; }
147
+ .dropdown-item.active .item-check{ opacity:1; }
148
+ .dropdown-divider{ height:1px; background:var(--line); margin:6px 4px; }
149
+ .open-tab{
150
+ display:flex; align-items:center; gap:8px;
151
+ padding:9px 12px; font-size:12px; color:var(--sub);
152
+ border-radius:8px; cursor:pointer;
153
+ }
154
+ .open-tab:hover{ background:#1F2432; color:var(--text); }
155
+
156
+ /* Body */
157
+ main{
158
+ flex:1;
159
+ position:relative;
160
+ min-height:0;
161
+ }
162
+ iframe{
163
+ width:100%; height:100%;
164
+ border:none;
165
+ display:block;
166
+ background:#000;
167
+ }
168
+ .frame-wrap{
169
+ position:absolute; inset:0;
170
+ display:none;
171
+ }
172
+ .frame-wrap.visible{ display:block; }
173
+
174
+ .loading{
175
+ position:absolute; inset:0;
176
+ display:flex; align-items:center; justify-content:center;
177
+ flex-direction:column; gap:10px;
178
+ color:var(--sub);
179
+ font-family:'JetBrains Mono', monospace;
180
+ font-size:12px;
181
+ background:var(--bg);
182
+ pointer-events:none;
183
+ opacity:1;
184
+ transition:opacity .25s ease;
185
+ }
186
+ .loading.hidden{ opacity:0; }
187
+ .spinner{
188
+ width:22px; height:22px;
189
+ border-radius:50%;
190
+ border:2px solid var(--line);
191
+ border-top-color:var(--violet);
192
+ animation:spin 0.8s linear infinite;
193
+ }
194
+ @keyframes spin{ to{ transform:rotate(360deg); } }
195
+
196
+ @media (max-width:520px){
197
+ .current-tool{ display:none; }
198
+ .dropdown{ width:230px; }
199
+ }
200
+ </style>
201
+ </head>
202
+ <body>
203
+
204
+ <header>
205
+ <div class="brand">
206
+ <div class="brand-mark"></div>
207
+ <div class="brand-text">Tool Hub<span>3 apps &middot; 1 window</span></div>
208
+ </div>
209
+
210
+ <div class="current-tool" id="currentToolLabel">
211
+ <span class="dot"></span><b>Spider Fighter</b>
212
+ </div>
213
+
214
+ <div class="menu-wrap">
215
+ <button class="menu-btn" id="menuBtn" aria-label="Switch tool">
216
+ <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="5" r="1.8" fill="currentColor"/><circle cx="12" cy="12" r="1.8" fill="currentColor"/><circle cx="12" cy="19" r="1.8" fill="currentColor"/></svg>
217
+ </button>
218
+ <div class="dropdown" id="dropdown">
219
+ <div class="dropdown-item active" data-id="spider">
220
+ <div class="item-icon" style="background:rgba(124,92,252,0.15);">🕷️</div>
221
+ <div class="item-text">
222
+ <div class="item-title">Spider Fighter</div>
223
+ <div class="item-sub">rehankhan5hhi5</div>
224
+ </div>
225
+ <svg class="item-check" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
226
+ </div>
227
+ <div class="dropdown-item" data-id="video">
228
+ <div class="item-icon" style="background:rgba(52,216,198,0.15);">🎬</div>
229
+ <div class="item-text">
230
+ <div class="item-title">AI Video Generator</div>
231
+ <div class="item-sub">rehankhan5hhi5</div>
232
+ </div>
233
+ <svg class="item-check" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
234
+ </div>
235
+ <div class="dropdown-item" data-id="stitcher">
236
+ <div class="item-icon" style="background:rgba(255,180,90,0.15);">🧵</div>
237
+ <div class="item-text">
238
+ <div class="item-title">Stitcher</div>
239
+ <div class="item-sub">chief24434</div>
240
+ </div>
241
+ <svg class="item-check" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
242
+ </div>
243
+ <div class="dropdown-divider"></div>
244
+ <div class="open-tab" id="openNewTab">
245
+ <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M14 5h5v5M19 5l-9 9M9 5H6a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1v-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
246
+ Open current tool in new tab
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </header>
251
+
252
+ <main>
253
+ <div class="frame-wrap visible" id="frame-spider">
254
+ <iframe src="https://rehankhan5hhi5-spiderfighter1.hf.space" title="Spider Fighter" allow="camera; microphone; fullscreen; clipboard-write" onload="hideLoading('spider')"></iframe>
255
+ <div class="loading" id="loading-spider"><div class="spinner"></div>Loading Spider Fighter…</div>
256
+ </div>
257
+ <div class="frame-wrap" id="frame-video">
258
+ <iframe src="https://rehankhan5hhi5-aivideogenerator1.hf.space" title="AI Video Generator" allow="camera; microphone; fullscreen; clipboard-write" onload="hideLoading('video')"></iframe>
259
+ <div class="loading" id="loading-video"><div class="spinner"></div>Loading AI Video Generator…</div>
260
+ </div>
261
+ <div class="frame-wrap" id="frame-stitcher">
262
+ <iframe src="https://chief24434-stitcher.hf.space" title="Stitcher" allow="camera; microphone; fullscreen; clipboard-write" onload="hideLoading('stitcher')"></iframe>
263
+ <div class="loading" id="loading-stitcher"><div class="spinner"></div>Loading Stitcher…</div>
264
+ </div>
265
+ </main>
266
+
267
+ <script>
268
+ const tools = {
269
+ spider: { title: "Spider Fighter", url: "https://huggingface.co/spaces/rehankhan5hhi5/SPIDERFIGHTER1" },
270
+ video: { title: "AI Video Generator", url: "https://huggingface.co/spaces/rehankhan5hhi5/Aivideogenerator1" },
271
+ stitcher: { title: "Stitcher", url: "https://huggingface.co/spaces/chief24434/stitcher" }
272
+ };
273
+
274
+ const menuBtn = document.getElementById('menuBtn');
275
+ const dropdown = document.getElementById('dropdown');
276
+ const currentToolLabel = document.getElementById('currentToolLabel');
277
+
278
+ menuBtn.addEventListener('click', (e) => {
279
+ e.stopPropagation();
280
+ dropdown.classList.toggle('open');
281
+ });
282
+ document.addEventListener('click', () => dropdown.classList.remove('open'));
283
+ dropdown.addEventListener('click', (e) => e.stopPropagation());
284
+
285
+ document.querySelectorAll('.dropdown-item').forEach(item => {
286
+ item.addEventListener('click', () => {
287
+ const id = item.dataset.id;
288
+ switchTool(id);
289
+ dropdown.classList.remove('open');
290
+ });
291
+ });
292
+
293
+ function switchTool(id){
294
+ document.querySelectorAll('.frame-wrap').forEach(f => f.classList.remove('visible'));
295
+ document.getElementById('frame-' + id).classList.add('visible');
296
+
297
+ document.querySelectorAll('.dropdown-item').forEach(i => i.classList.remove('active'));
298
+ document.querySelector('.dropdown-item[data-id="' + id + '"]').classList.add('active');
299
+
300
+ currentToolLabel.innerHTML = '<span class="dot"></span><b>' + tools[id].title + '</b>';
301
+ }
302
+
303
+ function hideLoading(id){
304
+ const el = document.getElementById('loading-' + id);
305
+ if (el) el.classList.add('hidden');
306
+ }
307
+
308
+ document.getElementById('openNewTab').addEventListener('click', () => {
309
+ const activeItem = document.querySelector('.dropdown-item.active');
310
+ const id = activeItem.dataset.id;
311
+ window.open(tools[id].url, '_blank');
312
+ });
313
+ </script>
314
+
315
+ </body>
316
  </html>