Create index.html

index.html

@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>REAL HF SERVER // MONITOR_v3.0</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+        
+        :root {
+            --neon-cyan: #00f0ff;
+            --neon-magenta: #ff0055;
+            --neon-yellow: #feed01;
+            --bg-dark: #03030a;
+            --panel-bg: rgba(10, 10, 25, 0.85);
+        }
+
+        body {
+            background-color: var(--bg-dark);
+            color: var(--neon-cyan);
+            font-family: 'Share Tech Mono', monospace;
+            margin: 0;
+            padding: 20px;
+            overflow-x: hidden;
+            background-image: 
+                radial-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 0),
+                radial-gradient(rgba(255, 0, 85, 0.1) 1px, transparent 0);
+            background-size: 40px 40px;
+            background-position: 0 0, 20px 20px;
+        }
+
+        body::after {
+            content: " ";
+            display: block;
+            position: fixed;
+            top: 0; left: 0; bottom: 0; right: 0;
+            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));
+            z-index: 99999;
+            background-size: 100% 3px, 6px 100%;
+            pointer-events: none;
+        }
+
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        header {
+            border: 2px solid var(--neon-magenta);
+            padding: 15px;
+            background: var(--panel-bg);
+            box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
+            margin-bottom: 25px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            clip-path: polygon(0 0, 97% 0, 100% 30%, 100% 100%, 3% 100%, 0 70%);
+        }
+
+        h1 {
+            margin: 0;
+            font-size: 1.6rem;
+            color: var(--neon-yellow);
+            text-shadow: 0 0 10px rgba(254, 237, 1, 0.6);
+            letter-spacing: 2px;
+        }
+
+        .lang-btn {
+            background: transparent;
+            border: 1px solid var(--neon-cyan);
+            color: var(--neon-cyan);
+            padding: 5px 15px;
+            cursor: pointer;
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 1rem;
+            box-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
+            transition: all 0.2s;
+        }
+
+        .lang-btn:hover {
+            background: var(--neon-cyan);
+            color: var(--bg-dark);
+            box-shadow: 0 0 15px var(--neon-cyan);
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .card {
+            background: var(--panel-bg);
+            border-left: 4px solid var(--neon-cyan);
+            border-right: 1px solid rgba(0, 240, 255, 0.1);
+            border-top: 1px solid rgba(0, 240, 255, 0.1);
+            border-bottom: 1px solid rgba(0, 240, 255, 0.1);
+            padding: 15px;
+            box-shadow: 0 0 10px rgba(0, 240, 255, 0.05);
+        }
+
+        .card-title {
+            font-size: 1.1rem;
+            color: var(--neon-magenta);
+            margin-bottom: 10px;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .spec-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .spec-list li {
+            margin-bottom: 8px;
+            font-size: 1.05rem;
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px dashed rgba(0, 240, 255, 0.15);
+            padding-bottom: 4px;
+        }
+
+        .spec-list li span:last-child {
+            color: #fff;
+            text-shadow: 0 0 5px rgba(255,255,255,0.3);
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: rgba(255,255,255,0.05);
+            margin-top: 8px;
+            border: 1px solid var(--neon-cyan);
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: var(--neon-cyan);
+            width: 0%;
+            transition: width 0.3s ease-in-out;
+        }
+
+        .terminal {
+            background: rgba(5, 5, 15, 0.95);
+            border: 1px solid var(--neon-yellow);
+            padding: 15px;
+            font-size: 0.95rem;
+            color: var(--neon-yellow);
+            box-shadow: 0 0 10px rgba(254, 237, 1, 0.2);
+            height: 120px;
+            overflow-y: hidden;
+            margin-top: 20px;
+        }
+
+        .footer {
+            margin-top: 30px;
+            text-align: center;
+            font-size: 0.8rem;
+            color: rgba(0, 240, 255, 0.3);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1 id="main-title">REAL HF SERVER // MONITOR_v3.0</h1>
+            <button class="lang-btn" id="lang-toggle" onclick="toggleLang()">EN</button>
+        </header>
+
+        <div class="grid">
+            <div class="card">
+                <div class="card-title" id="t-sys">> CLOUD_SESSION</div>
+                <ul class="spec-list">
+                    <li><span id="t-uptime">Время аптайма:</span><span id="uptime">00h 00m 00s</span></li>
+                    <li><span id="t-status">Статус ядра:</span><span style="color: #00ff66 !important; text-shadow: 0 0 5px #00ff66;">ONLINE</span></li>
+                    <li><span id="t-node">Тип ОС:</span><span>Linux (Ubuntu)</span></li>
+                </ul>
+            </div>
+
+            <div class="card">
+                <div class="card-title" id="t-cpu">> REAL_HF_CPU</div>
+                <ul class="spec-list">
+                    <li><span id="t-cpuname">Модель ЦП:</span><span id="cpu-model" style="font-size:0.9rem;">Loading...</span></li>
+                    <li><span id="t-cores">Доступно ядер:</span><span id="cpu-cores">0</span></li>
+                    <li><span id="t-cpuload">Загрузка ЦП:</span><span id="cpu-val">0%</span></li>
+                </ul>
+                <div class="progress-bar"><div class="progress-fill" id="cpu-bar"></div></div>
+            </div>
+
+            <div class="card">
+                <div class="card-title" id="t-mem">> REAL_HF_RAM</div>
+                <ul class="spec-list">
+                    <li><span id="t-ram">Всего памяти:</span><span id="ram-total">0 GB</span></li>
+                    <li><span id="t-ram-used">Занято ОЗУ:</span><span id="ram-used">0 GB</span></li>
+                    <li><span id="t-ram-pct">Процент:</span><span id="ram-val">0%</span></li>
+                </ul>
+                <div class="progress-bar"><div class="progress-fill" id="ram-bar" style="background: var(--neon-magenta);"></div></div>
+            </div>
+
+            <div class="card">
+                <div class="card-title" id="t-store">> CONTAINER_STORAGE</div>
+                <ul class="spec-list">
+                    <li><span>Всего на Диске:</span><span id="disk-total">0 GB</span></li>
+                    <li><span>Свободно места:</span><span id="disk-free">0 GB</span></li>
+                    <li><span>Занято под проект:</span><span id="disk-used">0 GB</span></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="terminal" id="term-logs">
+            [SYS] Подключение к подсистеме Linux выполнено...<br>
+            [OK] Чтение файлов /proc/cpuinfo и метрик psutil запущено.<br>
+        </div>
+
+        <div class="footer">
+            ENVIRONMENT: HUGGING_FACE_SPACES_DOCKER // API: FASTAPI // PORT: 7860
+        </div>
+    </div>
+
+    <script>
+        let currentLang = 'RU';
+        
+        const dictionary = {
+            RU: {
+                title: "REAL HF SERVER // MONITOR_v3.0",
+                sys: "> ИНФОРМАЦИЯ_ОБЛАКА",
+                uptime: "Время аптайма:",
+                status: "Статус ядра:",
+                node: "Тип ОС:",
+                cpu: "> РЕАЛЬНЫЙ_ЦП_HF",
+                cpuname: "Модель ЦП:",
+                cores: "Доступно ядер:",
+                cpuload: "Загрузка ЦП:",
+                mem: "> РЕАЛЬНАЯ_ОЗУ_HF",
+                ram: "Всего памяти:",
+                ram_used: "Занято ОЗУ:",
+                ram_pct: "Процент:",
+                store: "> ДИСК_КОНТЕЙНЕРА"
+            },
+            EN: {
+                title: "REAL HF SERVER // MONITOR_v3.0",
+                sys: "> CLOUD_SESSION",
+                uptime: "Uptime Counter:",
+                status: "Core Status:",
+                node: "OS Type:",
+                cpu: "> REAL_HF_CPU",
+                cpuname: "CPU Model:",
+                cores: "Available Cores:",
+                cpuload: "CPU Load:",
+                mem: "> REAL_HF_RAM",
+                ram: "Total RAM:",
+                ram_used: "Used RAM:",
+                ram_pct: "Percentage:",
+                store: "> CONTAINER_STORAGE"
+            }
+        };
+
+        function toggleLang() {
+            currentLang = currentLang === 'RU' ? 'EN' : 'RU';
+            document.getElementById('lang-toggle').innerText = currentLang === 'RU' ? 'EN' : 'RU';
+            
+            let d = dictionary[currentLang];
+            document.getElementById('main-title').innerText = d.title;
+            document.getElementById('t-sys').innerText = d.sys;
+            document.getElementById('t-uptime').innerText = d.uptime;
+            document.getElementById('t-status').innerText = d.status;
+            document.getElementById('t-node').innerText = d.node;
+            document.getElementById('t-cpu').innerText = d.cpu;
+            document.getElementById('t-cpuname').innerText = d.cpuname;
+            document.getElementById('t-cores').innerText = d.cores;
+            document.getElementById('t-cpuload').innerText = d.cpuload;
+            document.getElementById('t-mem').innerText = d.mem;
+            document.getElementById('t-ram').innerText = d.ram;
+            document.getElementById('t-store').innerText = d.store;
+        }
+
+        async function updateStats() {
+            try {
+                let currentPath = window.location.pathname;
+                if (!currentPath.endsWith('/')) currentPath += '/';
+                
+                let res = await fetch(currentPath + 'api/real_specs');
+                let data = await res.json();
+                
+                document.getElementById('uptime').innerText = data.uptime;
+                document.getElementById('cpu-model').innerText = data.cpu_model;
+                document.getElementById('cpu-cores').innerText = data.cpu_cores;
+                document.getElementById('cpu-val').innerText = data.cpu_usage + '%';
+                document.getElementById('cpu-bar').style.width = data.cpu_usage + '%';
+                
+                document.getElementById('ram-total').innerText = data.ram_total + ' GB';
+                document.getElementById('ram-used').innerText = data.ram_used + ' GB';
+                document.getElementById('ram-val').innerText = data.ram_percent + '%';
+                document.getElementById('ram-bar').style.width = data.ram_percent + '%';
+                
+                document.getElementById('disk-total').innerText = data.disk_total + ' GB';
+                document.getElementById('disk-free').innerText = data.disk_free + ' GB';
+                document.getElementById('disk-used').innerText = data.disk_used + ' GB';
+                
+            } catch (e) {
+                console.log("Matrix API read error...");
+            }
+        }
+
+        const terminalPhrases = [
+            "[OK] Чтение системных метрик Linux выполнено.",
+            "[SYS] Метрики ОЗУ и диска синхронизированы.",
+            "[NET] UptimeRobot удерживает веб-сокет в активном состоянии.",
+            "[SYS] Запрос к /proc/cpuinfo обработан успешно."
+        ];
+
+        function updateTerminal() {
+            const term = document.getElementById('term-logs');
+            const randomPhrase = terminalPhrases[Math.floor(Math.random() * terminalPhrases.length)];
+            term.innerHTML += randomPhrase + "<br>";
+            term.scrollTop = term.scrollHeight;
+            if (term.innerHTML.split("<br>").length > 6) {
+                term.innerHTML = term.innerHTML.split("<br>").slice(1).join("<br>");
+            }
+        }
+
+        setInterval(updateStats, 3000);
+        setInterval(updateTerminal, 6000);
+        updateStats();
+    </script>
+</body>
+</html>