Spaces:

enotkrutoy
/

coder

Running

App Files Files Community

enotkrutoy commited on Mar 9

Commit

0147d64

verified ·

1 Parent(s): b5ca71a

Update index.html

Browse files

Files changed (1) hide show

index.html +37 -17

index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -37,25 +38,27 @@
             align-items: center;
             background: linear-gradient(45deg, #111, #333);
             border-top: 1px solid #00ff00;
-            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;
         }
         .space-iframe:hover {
-            transform: scale(1.05);
         }
         /* Спиннер, который показывается при загрузке */
         .spinner-overlay {
-            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
@@ -66,15 +69,15 @@
             justify-content: center;
             align-items: center;
             z-index: 1000;
-            opacity: 1;
-            pointer-events: auto;
             transition: opacity 0.3s ease;
             font-size: 2rem;
         }
-        .spinner-overlay.hidden {
-            opacity: 0;
-            pointer-events: none;
         }
         /* Крутой хакерский стиль для текста */
@@ -84,6 +87,8 @@
             color: #00ff00;
             text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
             animation: text-blink 1s infinite alternate;
         }
         /* Анимация мигающего текста */
@@ -94,8 +99,12 @@
         /* Адаптивность на экранах до 768px */
         @media (max-width: 768px) {
             .space-iframe {
-                height: calc(100vh - 60px); /* Уменьшаем высоту на размер шапки */
             }
         }
@@ -105,27 +114,38 @@
                 font-size: 1rem;
                 padding: 0.5rem;
             }
         }
     </style>
 </head>
 <body>
     <header>
-        <div class="SVELTE_HYDRATER contents" data-target="SSOBanner" data-props='{"organizations":[]}'></div>
     </header>
     <main>
-        <section class="SVELTE_HYDRATER contents" data-target="SpacePageInner" data-props='{"authLight":{"csrfToken":"eyJkYXRhIjp7ImV4cGlyYXRpb24iOjE3NDE2MDM3NzkzMjIsInVzZXJJZCI6IjY2NzY5MmFkYWFjYWNmNjIwZTQyYjU1NCJ9LCJzaWduYXR1cmUiOiJiOWZjNjRlMzBkODI5MDdmMDNkODY1YjMwNDhjZmI3ZjFiY2I3ZTVjYzk4MjUwN2Q4OTJjNmJmODhkZWQ4YzkwIn0=","hasHfLevelAccess":false,"u":{"avatarUrl":"/avatars/e81e7833202cff8fa212af4b15415efb.svg","isPro":false,"orgs":[],"user":"enotkrutoy","canPost":false,"canHaveBilling":true,"canCreateOrg":true,"theme":"system","notifications":{"org_suggestions":false},"hardwareItems":[{"sku":["CPU","Intel","Intel Core 13th Generation (i9)"],"mem":16,"num":1}],"hardwareItemsPrivate":false,"usage":{"storage":{"summary":{"space":{"used":800268075,"usedPrivate":721689336,"usedPublic":78578739,"count":77}},"used":800268075,"count":77,"limit":100000000000,"usedPrivate":721689336,"usedPublic":78578739,"historicalGrant":721689336},"inferenceApi":{"used":23,"limit":1000,"duration":86400,"renewal":75674,"lastUpdated":"2025-02-04T02:58:46.736Z"},"zeroGpu":{"base":300,"current":300,"lastUpdated":"2025-03-09T10:49:35.082Z"},"inference":{"usedNanoUsd":213487996,"numRequests":85,"providerDetails":[{"provider":"hf-inference","numRequests":85,"totalCostNanoUsd":213487996,"totalDurationMs":7680363}],"periodEnd":"2025-03-31T23:59:59.999Z","periodStart":"2025-03-01T00:00:00.000Z","includedNanoUsd":100000000,"limitNanoUsd":100000000,"lastUpdated":"2025-03-09T10:49:35.082Z"}}}},"canRestart":false,"canWrite":false,"csrf":"eyJkYXRhIjp7ImV4cGlyYXRpb24iOjE3NDE2MDM3NzkzMjIsInVzZXJJZCI6IjY2NzY5MmFkYWFjYWNmNjIwZTQyYjU1NCJ9LCJzaWduYXR1cmUiOiJiOWZjNjRlMzBkODI5MDdmMDNkODY1YjMwNDhjZmI3ZjFiY2I3ZTVjYzk4MjUwN2Q4OTJjNmJmODhkZWQ4YzkwIn0=","hideNFAA":false,"readmeTemplate":"---\ntitle: {{title}}\nemoji: {{emoji}}\ncolorFrom: {{colorFrom}}\ncolorTo: {{colorTo}}\nsdk: {{sdk}}\nsdk_version":"{{sdkVersion}}\"\napp_file: app.py\npinned: false\n---\n\nCheck out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference\n","space":{"author":"Qwen","colorFrom":"indigo","colorTo":"purple","cardData":{"title":"Qwen2.5 Coder Demo","emoji":"👁","colorFrom":"indigo","colorTo":"purple","sdk":"gradio","sdk_version":"5.5.0","app_file":"app.py","pinned":false,"license":"apache-2.0"},"createdAt":"2024-11-11T06:34:48.000Z","emoji":"👁","discussionsDisabled":false,"duplicationDisabled":false,"id":"Qwen/Qwen2.5-Coder-demo","isLikedByUser":false,"watched":{"isWatching":false,"isMuted":false,"mode":"none"},"lastModified":"2024-11-15T02:20:02.000Z","likes":425,"pinned":false,"private":false,"gated":false,"repoType":"space","subdomain":"qwen-qwen2-5-coder-demo","sdk":"gradio","sdkVersion":"5.5.0","title":"Qwen2.5 Coder Demo","runtime":{"stage":"RUNNING","hardware":{"current":"cpu-basic","requested":"cpu-basic"},"storage":null,"gcTimeout":172800,"gclimit":1000}},"iframeUrl":"https://qwen-qwen2-5-coder-demo.hf.space/?__theme=dark"}}
         <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" onload="hideSpinner()"></iframe>
-        <div class="spinner-overlay" id="spinner">
             <div>Загрузка...</div>
         </div>
     </main>
     <script>
-        function hideSpinner() {
-            var spinner = document.getElementById('spinner');
-            spinner.classList.add('hidden');
         }
     </script>
 </body>
-</html>

+#### Конечный:
 <!DOCTYPE html>
 <html lang="en">
 <head>
             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%;
             justify-content: center;
             align-items: center;
             z-index: 1000;
+            opacity: 0;
+            pointer-events: none;
             transition: opacity 0.3s ease;
             font-size: 2rem;
         }
+        .spinner-overlay.visible {
+            opacity: 1;
+            pointer-events: auto;
         }
         /* Крутой хакерский стиль для текста */
             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; /* Добавляем перенос слов */
         }
         /* Анимация мигающего текста */
         /* Адаптивность на экранах до 768px */
         @media (max-width: 768px) {
+            header {
+                font-size: 1.2rem;
+            }
             .space-iframe {
+                max-height: calc(100vh - 60px); /* Уменьшаем высоту на размер шапки */
             }
         }
                 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">
             <div>Загрузка...</div>
         </div>
     </main>
     <script>
+        window.onload = function() {
+            var spinner = document.querySelector('.spinner-overlay');
+            var iframe = document.querySelector('.space-iframe');
+            iframe.onload = function() {
+                spinner.classList.remove('visible');
+            }
+            setTimeout(function() {
+                spinner.classList.add('visible');
+            }, 100); // Уменьшаем время задержки
         }
     </script>
 </body>
+</html>