Spaces:

enotkrutoy
/

coder

Running

App Files Files Community

enotkrutoy commited on 4 days ago

Commit

6c510b1

verified ·

1 Parent(s): 2b1939c

Update index.html

Browse files

Files changed (1) hide show

index.html +33 -131

index.html CHANGED Viewed

@@ -1,151 +1,53 @@
-#### Конечный:
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Qwen2.5 Coder Demo</title>
     <style>
-        /* Общие стили для страницы */
         body {
-            margin: 0;
-            font-family: 'Courier New', Courier, monospace;
-            background-color: #1e1e1e;
-            color: #00ff00;
-            line-height: 1.6;
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            overflow: hidden;
-        }
-        /* Шапка */
-        header {
-            padding: 1rem;
-            background-color: #111;
-            color: #00ff00;
-            font-size: 1.5rem;
-            text-align: center;
-            text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
-        }
-        /* Основная часть */
-        main {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            justify-content: center;
-            align-items: center;
-            background: linear-gradient(45deg, #111, #333);
-            border-top: 1px solid #00ff00;
-            padding: 1rem;
-        }
-        /* Ифрейм для контента */
-        .space-iframe {
-            width: 100%;
-            height: 100%;
-            max-height: calc(100vh - 80px); /* Используем max-height для ограничения */
-            border: 2px solid #00ff00;
-            box-shadow: 0 0 15px rgba(0, 255, 0, 0.8);
-            transition: transform 0.3s ease;
-            border-radius: 8px;
-        }
-        .space-iframe:hover {
-            transform: scale(1.02);
         }
-        /* Спиннер, который показывается при загрузке */
-        .spinner-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
             width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.8);
-            color: #00ff00;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 1000;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.5s ease-in-out;
-            font-size: 2rem;
-        }
-        .spinner-overlay.visible {
-            opacity: 1;
-            pointer-events: auto;
-        }
-        /* Крутой хакерский стиль для текста */
-        .hacker-text {
-            font-size: 2rem;
-            text-align: center;
-            color: #00ff00;
-            text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
-            animation: text-blink 1s infinite alternate;
-            margin-bottom: 1rem;
-            word-break: break-word; /* Добавляем перенос слов */
-        }
-        /* Анимация мигающего текста */
-        @keyframes text-blink {
-            0% { opacity: 0.7; }
-            100% { opacity: 1; }
         }
-        /* Адаптивность на экранах до 768px */
-        @media (max-width: 768px) {
-            header {
-                font-size: 1.2rem;
             }
-            .space-iframe {
-                max-height: calc(100vh - 60px); /* Уменьшаем высоту на размер шапки */
             }
         }
-        /* Адаптивность на экранах до 480px */
-        @media (max-width: 480px) {
-            header {
-                font-size: 1rem;
-                padding: 0.5rem;
             }
-            .hacker-text {
-                font-size: 1.5rem;
             }
         }
     </style>
 </head>
-<body>
-    <header>
-        Qwen2.5 Coder Demo
-    </header>
-    <main>
-        <div class="hacker-text">Крутой хакерский интерфейс</div>
-        <iframe class="space-iframe" src="https://qwen-qwen2-5-coder-demo.hf.space/?__theme=dark" title="Qwen2.5 Coder Demo"></iframe>
-        <div class="spinner-overlay" role="alert" aria-live="assertive" aria-busy="true">
-            <div>Загрузка...</div>
-        </div>
-    </main>
-    <script>
-        window.onload = function() {
-            const spinner = document.querySelector('.spinner-overlay');
-            const iframe = document.querySelector('.space-iframe');
-            iframe.onload = function() {
-                spinner.classList.remove('visible');
-            };
-            setTimeout(() => {
-                spinner.classList.add('visible');
-            }, 100); // Уменьшаем время задержки
-        };
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gradio App Demo</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/5.5.0/gradio.js"></script>
     <style>
         body {
+            background-color: #1a1a1a;
+            color: #e2e8f0;
         }
+        iframe {
             width: 100%;
+            height: 100vh;
+            border: none;
         }
+        @media (min-width: 640px) {
+            iframe {
+                height: 80vh;
             }
+        }
+        @media (min-width: 768px) {
+            iframe {
+                height: 70vh;
             }
         }
+        @media (min-width: 1024px) {
+            iframe {
+                height: 60vh;
             }
+        }
+        @media (min-width: 1280px) {
+            iframe {
+                height: 50vh;
             }
         }
     </style>
 </head>
+<body class="flex items-center justify-center min-h-screen">
+    <!-- Gradio App Component -->
+    <!-- <gradio-app src="https://qwen-qwen2-5-coder-demo.hf.space" data-props='{"theme": "dark"}'></gradio-app> -->
+    <!-- Iframe Component -->
+    <iframe
+        src="https://qwen-qwen2-5-coder-demo.hf.space"
+        title="Qwen Qwen2-5 Coder Demo"
+        aria-label="Qwen Qwen2-5 Coder Demo"
+        frameborder="0"
+    ></iframe>
 </body>
 </html>