Hugging Face's logo

Spaces:
TrikozikGames
/
Test
Sleeping

App Files Community
1
TrikozikGames commited on
Commit
5a9f1b3
·
verified ·
1 Parent(s): 1c9214b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +127 -288
index.html CHANGED
@@ -1,330 +1,169 @@
1
- <!DOCTYPE html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  <html lang="ru">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>REAL HF SERVER // MONITOR_v3.0</title>
7
  <style>
8
- @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
9
-
10
- :root {
11
- --neon-cyan: #00f0ff;
12
- --neon-magenta: #ff0055;
13
- --neon-yellow: #feed01;
14
- --bg-dark: #03030a;
15
- --panel-bg: rgba(10, 10, 25, 0.85);
16
- }
17
 
18
  body {
19
- background-color: var(--bg-dark);
20
- color: var(--neon-cyan);
21
- font-family: 'Share Tech Mono', monospace;
22
- margin: 0;
23
- padding: 20px;
24
- overflow-x: hidden;
25
- background-image:
26
- radial-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 0),
27
- radial-gradient(rgba(255, 0, 85, 0.1) 1px, transparent 0);
28
- background-size: 40px 40px;
29
- background-position: 0 0, 20px 20px;
30
  }
31
 
32
- body::after {
33
- content: " ";
34
- display: block;
35
  position: fixed;
36
- top: 0; left: 0; bottom: 0; right: 0;
37
- background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 255, 0, 0.06));
38
- z-index: 99999;
39
- background-size: 100% 3px, 6px 100%;
40
  pointer-events: none;
41
  }
42
-
43
- .container {
44
- max-width: 1000px;
45
- margin: 0 auto;
 
46
  }
47
-
48
- header {
49
- border: 2px solid var(--neon-magenta);
50
- padding: 15px;
51
- background: var(--panel-bg);
52
- box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
53
- margin-bottom: 25px;
54
- display: flex;
55
- justify-content: space-between;
56
- align-items: center;
57
- clip-path: polygon(0 0, 97% 0, 100% 30%, 100% 100%, 3% 100%, 0 70%);
58
  }
59
 
60
- h1 {
61
- margin: 0;
62
- font-size: 1.6rem;
63
- color: var(--neon-yellow);
64
- text-shadow: 0 0 10px rgba(254, 237, 1, 0.6);
65
- letter-spacing: 2px;
 
 
 
 
 
 
 
 
66
  }
67
-
68
- .lang-btn {
69
- background: transparent;
70
- border: 1px solid var(--neon-cyan);
71
- color: var(--neon-cyan);
72
- padding: 5px 15px;
73
- cursor: pointer;
74
- font-family: 'Share Tech Mono', monospace;
75
- font-size: 1rem;
76
- box-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
77
- transition: all 0.2s;
78
  }
79
 
80
- .lang-btn:hover {
81
- background: var(--neon-cyan);
82
- color: var(--bg-dark);
83
- box-shadow: 0 0 15px var(--neon-cyan);
84
  }
85
-
86
- .grid {
87
- display: grid;
88
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
89
- gap: 20px;
90
- margin-bottom: 20px;
91
  }
92
 
93
- .card {
94
- background: var(--panel-bg);
95
- border-left: 4px solid var(--neon-cyan);
96
- border-right: 1px solid rgba(0, 240, 255, 0.1);
97
- border-top: 1px solid rgba(0, 240, 255, 0.1);
98
- border-bottom: 1px solid rgba(0, 240, 255, 0.1);
99
- padding: 15px;
100
- box-shadow: 0 0 10px rgba(0, 240, 255, 0.05);
101
  }
102
 
103
- .card-title {
 
104
  font-size: 1.1rem;
105
- color: var(--neon-magenta);
106
- margin-bottom: 10px;
107
- letter-spacing: 1px;
108
- text-transform: uppercase;
109
  }
110
 
111
- .spec-list {
112
- list-style: none;
113
- padding: 0;
114
- margin: 0;
115
- }
116
-
117
- .spec-list li {
118
- margin-bottom: 8px;
119
- font-size: 1.05rem;
120
  display: flex;
121
- justify-content: space-between;
122
- border-bottom: 1px dashed rgba(0, 240, 255, 0.15);
123
- padding-bottom: 4px;
124
- }
125
-
126
- .spec-list li span:last-child {
127
- color: #fff;
128
- text-shadow: 0 0 5px rgba(255,255,255,0.3);
129
- }
130
-
131
- .progress-bar {
132
- width: 100%;
133
- height: 8px;
134
- background: rgba(255,255,255,0.05);
135
- margin-top: 8px;
136
- border: 1px solid var(--neon-cyan);
137
- }
138
-
139
- .progress-fill {
140
- height: 100%;
141
- background: var(--neon-cyan);
142
- width: 0%;
143
- transition: width 0.3s ease-in-out;
144
  }
145
 
146
- .terminal {
147
- background: rgba(5, 5, 15, 0.95);
148
- border: 1px solid var(--neon-yellow);
149
- padding: 15px;
150
- font-size: 0.95rem;
151
- color: var(--neon-yellow);
152
- box-shadow: 0 0 10px rgba(254, 237, 1, 0.2);
153
- height: 120px;
154
- overflow-y: hidden;
155
- margin-top: 20px;
156
  }
157
-
158
- .footer {
159
- margin-top: 30px;
160
- text-align: center;
161
- font-size: 0.8rem;
162
- color: rgba(0, 240, 255, 0.3);
163
  }
164
  </style>
165
  </head>
166
  <body>
167
- <div class="container">
168
- <header>
169
- <h1 id="main-title">REAL HF SERVER // MONITOR_v3.0</h1>
170
- <button class="lang-btn" id="lang-toggle" onclick="toggleLang()">EN</button>
171
- </header>
172
 
173
- <div class="grid">
174
- <div class="card">
175
- <div class="card-title" id="t-sys">> CLOUD_SESSION</div>
176
- <ul class="spec-list">
177
- <li><span id="t-uptime">Время аптайма:</span><span id="uptime">00h 00m 00s</span></li>
178
- <li><span id="t-status">Статус ядра:</span><span style="color: #00ff66 !important; text-shadow: 0 0 5px #00ff66;">ONLINE</span></li>
179
- <li><span id="t-node">Тип ОС:</span><span>Linux (Ubuntu)</span></li>
180
- </ul>
181
- </div>
182
-
183
- <div class="card">
184
- <div class="card-title" id="t-cpu">> REAL_HF_CPU</div>
185
- <ul class="spec-list">
186
- <li><span id="t-cpuname">Модель ЦП:</span><span id="cpu-model" style="font-size:0.9rem;">Loading...</span></li>
187
- <li><span id="t-cores">Доступно ядер:</span><span id="cpu-cores">0</span></li>
188
- <li><span id="t-cpuload">Загрузка ЦП:</span><span id="cpu-val">0%</span></li>
189
- </ul>
190
- <div class="progress-bar"><div class="progress-fill" id="cpu-bar"></div></div>
191
- </div>
192
 
193
- <div class="card">
194
- <div class="card-title" id="t-mem">> REAL_HF_RAM</div>
195
- <ul class="spec-list">
196
- <li><span id="t-ram">Всего памяти:</span><span id="ram-total">0 GB</span></li>
197
- <li><span id="t-ram-used">Занято ОЗУ:</span><span id="ram-used">0 GB</span></li>
198
- <li><span id="t-ram-pct">Процент:</span><span id="ram-val">0%</span></li>
199
- </ul>
200
- <div class="progress-bar"><div class="progress-fill" id="ram-bar" style="background: var(--neon-magenta);"></div></div>
201
- </div>
202
 
203
- <div class="card">
204
- <div class="card-title" id="t-store">> CONTAINER_STORAGE</div>
205
- <ul class="spec-list">
206
- <li><span>Всего на Диске:</span><span id="disk-total">0 GB</span></li>
207
- <li><span>Свободно места:</span><span id="disk-free">0 GB</span></li>
208
- <li><span>Занято под проект:</span><span id="disk-used">0 GB</span></li>
209
- </ul>
210
- </div>
211
  </div>
212
 
213
- <div class="terminal" id="term-logs">
214
- [SYS] Подключение к подсистеме Linux выполнено...<br>
215
- [OK] Чтение файлов /proc/cpuinfo и метрик psutil запущено.<br>
216
- </div>
217
-
218
- <div class="footer">
219
- ENVIRONMENT: HUGGING_FACE_SPACES_DOCKER // API: FASTAPI // PORT: 7860
220
- </div>
221
  </div>
222
 
223
- <script>
224
- let currentLang = 'RU';
225
-
226
- const dictionary = {
227
- RU: {
228
- title: "REAL HF SERVER // MONITOR_v3.0",
229
- sys: "> ИНФОРМАЦИЯ_ОБЛАКА",
230
- uptime: "Время аптайма:",
231
- status: "Статус ядра:",
232
- node: "Тип ОС:",
233
- cpu: "> РЕАЛЬНЫЙ_ЦП_HF",
234
- cpuname: "Модель ЦП:",
235
- cores: "Доступно ядер:",
236
- cpuload: "Загрузка ЦП:",
237
- mem: "> РЕАЛЬНАЯ_ОЗУ_HF",
238
- ram: "Всего памяти:",
239
- ram_used: "Занято ОЗУ:",
240
- ram_pct: "Процент:",
241
- store: "> ДИСК_КОНТЕЙНЕРА"
242
- },
243
- EN: {
244
- title: "REAL HF SERVER // MONITOR_v3.0",
245
- sys: "> CLOUD_SESSION",
246
- uptime: "Uptime Counter:",
247
- status: "Core Status:",
248
- node: "OS Type:",
249
- cpu: "> REAL_HF_CPU",
250
- cpuname: "CPU Model:",
251
- cores: "Available Cores:",
252
- cpuload: "CPU Load:",
253
- mem: "> REAL_HF_RAM",
254
- ram: "Total RAM:",
255
- ram_used: "Used RAM:",
256
- ram_pct: "Percentage:",
257
- store: "> CONTAINER_STORAGE"
258
- }
259
- };
260
-
261
- function toggleLang() {
262
- currentLang = currentLang === 'RU' ? 'EN' : 'RU';
263
- document.getElementById('lang-toggle').innerText = currentLang === 'RU' ? 'EN' : 'RU';
264
-
265
- let d = dictionary[currentLang];
266
- document.getElementById('main-title').innerText = d.title;
267
- document.getElementById('t-sys').innerText = d.sys;
268
- document.getElementById('t-uptime').innerText = d.uptime;
269
- document.getElementById('t-status').innerText = d.status;
270
- document.getElementById('t-node').innerText = d.node;
271
- document.getElementById('t-cpu').innerText = d.cpu;
272
- document.getElementById('t-cpuname').innerText = d.cpuname;
273
- document.getElementById('t-cores').innerText = d.cores;
274
- document.getElementById('t-cpuload').innerText = d.cpuload;
275
- document.getElementById('t-mem').innerText = d.mem;
276
- document.getElementById('t-ram').innerText = d.ram;
277
- document.getElementById('t-store').innerText = d.store;
278
- }
279
-
280
- async function updateStats() {
281
- try {
282
- let currentPath = window.location.pathname;
283
- if (!currentPath.endsWith('/')) currentPath += '/';
284
-
285
- let res = await fetch(currentPath + 'api/real_specs');
286
- let data = await res.json();
287
-
288
- document.getElementById('uptime').innerText = data.uptime;
289
- document.getElementById('cpu-model').innerText = data.cpu_model;
290
- document.getElementById('cpu-cores').innerText = data.cpu_cores;
291
- document.getElementById('cpu-val').innerText = data.cpu_usage + '%';
292
- document.getElementById('cpu-bar').style.width = data.cpu_usage + '%';
293
-
294
- document.getElementById('ram-total').innerText = data.ram_total + ' GB';
295
- document.getElementById('ram-used').innerText = data.ram_used + ' GB';
296
- document.getElementById('ram-val').innerText = data.ram_percent + '%';
297
- document.getElementById('ram-bar').style.width = data.ram_percent + '%';
298
-
299
- document.getElementById('disk-total').innerText = data.disk_total + ' GB';
300
- document.getElementById('disk-free').innerText = data.disk_free + ' GB';
301
- document.getElementById('disk-used').innerText = data.disk_used + ' GB';
302
-
303
- } catch (e) {
304
- console.log("Matrix API read error...");
305
- }
306
- }
307
-
308
- const terminalPhrases = [
309
- "[OK] Чтение системных метрик Linux выполнено.",
310
- "[SYS] Метрики ОЗУ и диска синхронизированы.",
311
- "[NET] UptimeRobot удерживает веб-сокет в активном состоянии.",
312
- "[SYS] Запрос к /proc/cpuinfo обработан успешно."
313
- ];
314
-
315
- function updateTerminal() {
316
- const term = document.getElementById('term-logs');
317
- const randomPhrase = terminalPhrases[Math.floor(Math.random() * terminalPhrases.length)];
318
- term.innerHTML += randomPhrase + "<br>";
319
- term.scrollTop = term.scrollHeight;
320
- if (term.innerHTML.split("<br>").length > 6) {
321
- term.innerHTML = term.innerHTML.split("<br>").slice(1).join("<br>");
322
- }
323
- }
324
-
325
- setInterval(updateStats, 3000);
326
- setInterval(updateTerminal, 6000);
327
- updateStats();
328
- </script>
329
  </body>
330
  </html>
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <style>
8
+ body {
9
+ background-color: white; /* Ensure the iframe has a white background */
10
+ }
11
+
12
+
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <!DOCTYPE html>
17
  <html lang="ru">
18
  <head>
19
  <meta charset="UTF-8">
20
+ <title>🚀 Space Status</title>
 
21
  <style>
22
+ * { margin: 0; padding: 0; box-sizing: border-box; }
 
 
 
 
 
 
 
 
23
 
24
  body {
25
+ background: #0a0a0f;
26
+ display: flex;
27
+ justify-content: center;
28
+ align-items: center;
29
+ min-height: 100vh;
30
+ font-family: 'Segoe UI', system-ui, sans-serif;
31
+ overflow: hidden;
 
 
 
 
32
  }
33
 
34
+ /* Анимированные частицы */
35
+ .particles {
 
36
  position: fixed;
37
+ top: 0; left: 0;
38
+ width: 100%; height: 100%;
 
 
39
  pointer-events: none;
40
  }
41
+ .particle {
42
+ position: absolute;
43
+ background: radial-gradient(circle, #58a6ff 0%, transparent 70%);
44
+ border-radius: 50%;
45
+ animation: float 6s infinite ease-in-out;
46
  }
47
+ @keyframes float {
48
+ 0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
49
+ 50% { transform: translateY(-40px) scale(1.5); opacity: 0.8; }
 
 
 
 
 
 
 
 
50
  }
51
 
52
+ /* Основная карточка */
53
+ .card {
54
+ background: rgba(22, 27, 34, 0.9);
55
+ backdrop-filter: blur(20px);
56
+ border: 1px solid rgba(88, 166, 255, 0.3);
57
+ border-radius: 20px;
58
+ padding: 50px 70px;
59
+ text-align: center;
60
+ position: relative;
61
+ z-index: 1;
62
+ box-shadow:
63
+ 0 0 60px rgba(88, 166, 255, 0.1),
64
+ inset 0 0 30px rgba(88, 166, 255, 0.05);
65
+ animation: glow 3s infinite alternate;
66
  }
67
+ @keyframes glow {
68
+ 0% { box-shadow: 0 0 40px rgba(88, 166, 255, 0.1); }
69
+ 100% { box-shadow: 0 0 80px rgba(88, 166, 255, 0.25); }
 
 
 
 
 
 
 
 
70
  }
71
 
72
+ .icon {
73
+ font-size: 4rem;
74
+ animation: bounce 2s infinite;
 
75
  }
76
+ @keyframes bounce {
77
+ 0%, 100% { transform: translateY(0); }
78
+ 50% { transform: translateY(-12px); }
 
 
 
79
  }
80
 
81
+ h1 {
82
+ color: #58a6ff;
83
+ font-size: 2.4rem;
84
+ margin: 16px 0 8px;
85
+ letter-spacing: -0.5px;
 
 
 
86
  }
87
 
88
+ .subtitle {
89
+ color: #8b949e;
90
  font-size: 1.1rem;
 
 
 
 
91
  }
92
 
93
+ .status-row {
 
 
 
 
 
 
 
 
94
  display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ gap: 10px;
98
+ margin: 24px 0 12px;
99
+ }
100
+ .pulse {
101
+ width: 10px; height: 10px;
102
+ background: #3fb950;
103
+ border-radius: 50%;
104
+ animation: pulse 1.5s infinite;
105
+ }
106
+ @keyframes pulse {
107
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.7); }
108
+ 50% { box-shadow: 0 0 0 14px rgba(63, 185, 80, 0); }
109
+ }
110
+ .status-text {
111
+ color: #3fb950;
112
+ font-weight: 600;
113
+ font-size: 1rem;
114
+ letter-spacing: 1px;
115
+ text-transform: uppercase;
 
 
116
  }
117
 
118
+ .uptime {
119
+ color: #6e7681;
120
+ font-size: 0.85rem;
121
+ margin-top: 16px;
122
+ border-top: 1px solid rgba(255,255,255,0.06);
123
+ padding-top: 16px;
 
 
 
 
124
  }
125
+ .uptime span {
126
+ color: #e6edf3;
127
+ font-weight: 600;
 
 
 
128
  }
129
  </style>
130
  </head>
131
  <body>
 
 
 
 
 
132
 
133
+ <!-- Частицы -->
134
+ <div class="particles">
135
+ <div class="particle" style="left:10%; top:20%; width:8px; height:8px; animation-delay:0s;"></div>
136
+ <div class="particle" style="left:25%; top:60%; width:6px; height:6px; animation-delay:1s;"></div>
137
+ <div class="particle" style="left:50%; top:30%; width:10px; height:10px; animation-delay:2s;"></div>
138
+ <div class="particle" style="left:70%; top:50%; width:5px; height:5px; animation-delay:3s;"></div>
139
+ <div class="particle" style="left:85%; top:15%; width:7px; height:7px; animation-delay:4s;"></div>
140
+ <div class="particle" style="left:40%; top:75%; width:9px; height:9px; animation-delay:5s;"></div>
141
+ </div>
 
 
 
 
 
 
 
 
 
 
142
 
143
+ <!-- Карточка -->
144
+ <div class="card">
145
+ <div class="icon">🛰️</div>
146
+ <h1>Space Активен</h1>
147
+ <p class="subtitle">Docker · Hugging Face · Online</p>
 
 
 
 
148
 
149
+ <div class="status-row">
150
+ <div class="pulse"></div>
151
+ <span class="status-text">Running 24/7</span>
 
 
 
 
 
152
  </div>
153
 
154
+ <p class="uptime">
155
+ Сервер: <span>Online</span> &nbsp;|&nbsp;
156
+ Порт: <span>80</span> &nbsp;|&nbsp;
157
+ Готов к работе
158
+ </p>
 
 
 
159
  </div>
160
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  </body>
162
  </html>
163
+
164
+ <script>
165
+
166
+ </script>
167
+ </body>
168
+ </html>
169
+