Spaces:

enotkrutoy
/

coder

Running

App Files Files Community

enotkrutoy commited on 4 days ago

Commit

2b1939c

verified ·

1 Parent(s): bf9b443

Update index.html

Browse files

Files changed (1) hide show

index.html +19 -17

index.html CHANGED Viewed

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Qwen2.5 Coder Demo</title>
-    <link href="https://fonts.googleapis.com/css2?family=Courier+New:wght@400;700&display=swap" rel="stylesheet"> <!-- Подключаем шрифт -->
     <style>
-        /* Общие стили */
         body {
             margin: 0;
             font-family: 'Courier New', Courier, monospace;
@@ -39,13 +39,13 @@
             background: linear-gradient(45deg, #111, #333);
             border-top: 1px solid #00ff00;
             padding: 1rem;
-            position: relative;
         }
-        /* Ифрейм */
         .space-iframe {
             width: 100%;
             height: 100%;
             border: 2px solid #00ff00;
             box-shadow: 0 0 15px rgba(0, 255, 0, 0.8);
             transition: transform 0.3s ease;
@@ -56,9 +56,9 @@
             transform: scale(1.02);
         }
-        /* Спиннер */
         .spinner-overlay {
-            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
@@ -71,7 +71,7 @@
             z-index: 1000;
             opacity: 0;
             pointer-events: none;
-            transition: opacity 0.3s ease;
             font-size: 2rem;
         }
@@ -80,7 +80,7 @@
             pointer-events: auto;
         }
-        /* Хакерский стиль текста */
         .hacker-text {
             font-size: 2rem;
             text-align: center;
@@ -88,24 +88,27 @@
             text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
             animation: text-blink 1s infinite alternate;
             margin-bottom: 1rem;
         }
         @keyframes text-blink {
             0% { opacity: 0.7; }
             100% { opacity: 1; }
         }
-        /* Адаптивность */
         @media (max-width: 768px) {
             header {
                 font-size: 1.2rem;
             }
             .space-iframe {
-                height: calc(100vh - 80px); /* Уменьшаем высоту на размер шапки */
             }
         }
         @media (max-width: 480px) {
             header {
                 font-size: 1rem;
@@ -125,7 +128,7 @@
     <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">
             <div>Загрузка...</div>
         </div>
     </main>
@@ -137,13 +140,12 @@
             iframe.onload = function() {
                 spinner.classList.remove('visible');
-            }
-            // Показываем спиннер сразу после загрузки страницы
             setTimeout(() => {
                 spinner.classList.add('visible');
-            }, 500);
-        }
     </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>Qwen2.5 Coder Demo</title>
     <style>
+        /* Общие стили для страницы */
         body {
             margin: 0;
             font-family: 'Courier New', Courier, monospace;
             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;
             transform: scale(1.02);
         }
+        /* Спиннер, который показывается при загрузке */
         .spinner-overlay {
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             z-index: 1000;
             opacity: 0;
             pointer-events: none;
+            transition: opacity 0.5s ease-in-out;
             font-size: 2rem;
         }
             pointer-events: auto;
         }
+        /* Крутой хакерский стиль для текста */
         .hacker-text {
             font-size: 2rem;
             text-align: center;
             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;
     <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>
             iframe.onload = function() {
                 spinner.classList.remove('visible');
+            };
             setTimeout(() => {
                 spinner.classList.add('visible');
+            }, 100); // Уменьшаем время задержки
+        };
     </script>
 </body>
+</html>