Spaces:

Kuautli
/

ProyectoDS-AnalizaTube

Runtime error

App Files Files Community

Kuautli commited on 29 days ago

Commit

8aea391

verified ·

1 Parent(s): 7341cb3

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +20 -8

templates/index.html CHANGED Viewed

@@ -29,24 +29,36 @@
             color: gray;
             margin-top: 5px;
         }
-        #processing-message {
-            display: none; /* Ocultamos el mensaje inicialmente */
-            color: yellow; /* Color del mensaje */
-            font-weight: bold; /* Estilo del mensaje */
             margin-top: 10px; /* Espaciado */
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Análisis de Comentarios de YouTube</h1>
         <h2>by Cuauhtémoc Bautista</h2>
-        <form method="POST" action="/" onsubmit="showProcessingMessage()">
             <label for="url">Ingresa una URL de un video de YouTube:</label>
             <input type="text" id="url" name="url" required>
             <button type="submit">Analizar</button>
         </form>
-        <div id="processing-message">Procesando, por favor espere...</div> <!-- Mensaje de procesamiento -->
         {% if video_details %}
             <div class="video-details">
                 <h2>Detalles del Video</h2>
@@ -73,8 +85,8 @@
         {% endif %}
     </div>
     <script>
-        function showProcessingMessage() {
-            document.getElementById("processing-message").style.display = "block"; // Mostrar el mensaje
         }
     </script>
 </body>

             color: gray;
             margin-top: 5px;
         }
+        #processing-spinner {
+            display: none; /* Ocultamos el spinner inicialmente */
             margin-top: 10px; /* Espaciado */
         }
+        .spinner {
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-left-color: #ffffff; /* Color del spinner */
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite; /* Animación de giro */
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); } /* Giro completo */
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Análisis de Comentarios de YouTube</h1>
         <h2>by Cuauhtémoc Bautista</h2>
+        <form method="POST" action="/" onsubmit="showProcessingSpinner()">
             <label for="url">Ingresa una URL de un video de YouTube:</label>
             <input type="text" id="url" name="url" required>
             <button type="submit">Analizar</button>
         </form>
+        <div id="processing-spinner" aria-live="polite">
+            <div class="spinner"></div> <!-- Spinner de carga -->
+            Procesando, por favor espere...
+        </div>
         {% if video_details %}
             <div class="video-details">
                 <h2>Detalles del Video</h2>
         {% endif %}
     </div>
     <script>
+        function showProcessingSpinner() {
+            document.getElementById("processing-spinner").style.display = "block"; // Mostrar el spinner
         }
     </script>
 </body>