Update templates/teacher_eval.html

templates/teacher_eval.html

@@ -10,12 +10,11 @@
         :root {
             --primary-color: #3498db;
             --secondary-color: #2c3e50;
-            --background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent for readability */
+            --background-color: rgba(255, 255, 255, 0.9);
             --text-color: #333;
             --input-bg: #fff;
             --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
-
         body {
             font-family: 'Roboto', Arial, sans-serif;
             line-height: 1.6;
@@ -25,7 +24,6 @@
             position: relative;
             background-color: var(--background-color);
         }
-
         .background-video {
             position: fixed;
             top: 0;
@@ -33,9 +31,8 @@
             width: 100%;
             height: 100%;
             object-fit: cover;
-            z-index: -1; /* Make sure the video is behind everything else */
+            z-index: -1;
         }
-
         .header {
             background-color: var(--secondary-color);
             padding: 20px 0;
@@ -60,40 +57,33 @@
             align-items: center;
             text-decoration: none;
         }
-
         .back-button:hover {
             background-color: #2980b9;
             transform: scale(1.1);
         }
-
         .back-button i {
             transition: transform 0.3s ease;
         }
-
         .back-button:hover i {
             transform: translateX(-5px);
         }
-
         .logo {
             display: flex;
             justify-content: center;
             align-items: center;
             margin-bottom: 10px;
         }
-
         .logo i {
             font-size: 2.5em;
             color: var(--primary-color);
             margin-right: 10px;
         }
-
         h1 {
             color: #fff;
             font-size: 2.5em;
             margin: 0;
             text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
         }
-
         .container {
             max-width: 800px;
             margin: 40px auto;
@@ -104,18 +94,15 @@
             position: relative;
             z-index: 1;
         }
-
         form {
             display: grid;
             gap: 20px;
         }
-
         label {
             font-weight: 500;
             margin-bottom: 5px;
             color: var(--secondary-color);
         }
-
         select, input[type="text"], textarea {
             width: 100%;
             padding: 12px;
@@ -125,13 +112,11 @@
             font-size: 16px;
             transition: border-color 0.3s, box-shadow 0.3s;
         }
-
         select:focus, input[type="text"]:focus, textarea:focus {
             outline: none;
             border-color: var(--primary-color);
             box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
         }
-
         input[type="submit"] {
             background-color: var(--primary-color);
             color: #fff;
@@ -143,12 +128,10 @@
             font-weight: 500;
             transition: background-color 0.3s, transform 0.1s;
         }
-
         input[type="submit"]:hover {
             background-color: #2980b9;
             transform: translateY(-2px);
         }
-
         .input-section {
             display: none;
             background-color: rgba(249, 249, 249, 0.8);
@@ -156,40 +139,32 @@
             border-radius: 4px;
             border: 1px solid #e0e0e0;
         }
-
         #max-marks-section {
             margin-top: 20px;
         }
-
         .icon-input {
             display: flex;
             align-items: center;
             position: relative;
         }
-
         .icon-input i {
             margin-right: 10px;
             color: var(--secondary-color);
         }
-
         .icon-input input, .icon-input select, .icon-input textarea {
             flex: 1;
         }
-
         .input-section .icon-input {
             margin-bottom: 20px;
         }
-
         .input-section label {
             display: block;
             margin-bottom: 5px;
             font-weight: bold;
         }
-
         .input-section input[type="file"] {
             height: 40px;
         }
-
         input[type="file"] {
             border: 1px solid #ddd;
             border-radius: 4px;
@@ -198,12 +173,10 @@
             width: 100%;
             box-sizing: border-box;
         }
-
         input[type="file"]::-webkit-file-upload-button {
             visibility: hidden;
             width: 0;
         }
-
         input[type="file"]::before {
             content: 'Choose file';
             display: inline-block;
@@ -217,12 +190,9 @@
             font-weight: 700;
             font-size: 10pt;
         }
-
         input[type="file"]:hover::before {
             background-color: #2980b9;
         }
-
-        /* Styles for the drive link button and text */
         .drive-link-container {
             position: fixed;
             top: 20px;
@@ -234,14 +204,12 @@
             border-radius: 8px;
             box-shadow: var(--shadow);
         }
-
         .drive-link-container p {
             margin: 0;
             color: var(--secondary-color);
             font-weight: 500;
             font-size: 14px;
         }
-
         .drive-link-button {
             display: inline-block;
             background-color: var(--primary-color);
@@ -254,20 +222,47 @@
             font-size: 14px;
             transition: background-color 0.3s ease;
         }
-
         .drive-link-button:hover {
             background-color: #2980b9;
         }
-
         @media (max-width: 600px) {
             .container {
                 padding: 20px;
             }
         }
+        #loading-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 9999;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        .spinner {
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid var(--primary-color);
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+        }
+        .loading-text {
+            color: #fff;
+            font-size: 18px;
+            margin-top: 20px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body>
-    <!-- Background Video -->
     <video class="background-video" autoplay loop muted playsinline>
         <source src="../static/Eval.mp4" type="video/mp4">
         <source src="../static/Eval.webm" type="video/webm">
@@ -282,15 +277,20 @@
     </header>
     <a href="teacher" class="back-button" title="Back to Home">
         <i class="fas fa-arrow-left"></i>
-        </a>
+    </a>
 
     <div class="drive-link-container">
         <p>We have used the following documents in the demo video, which are given in the drive link. You can use your own docs also.</p>
         <a href="https://drive.google.com/drive/folders/10NI8gwA16V1wc57a8I4AtRcXU0NG4hzD?usp=drive_link" class="drive-link-button" target="_blank">Sample documents</a>
     </div>
 
+    <div id="loading-overlay">
+        <div class="spinner"></div>
+        <p class="loading-text">Evaluating answers...</p>
+    </div>
+
     <div class="container">
-        <form action="/eval" method="post" enctype="multipart/form-data">
+        <form action="/eval" method="post" enctype="multipart/form-data" onsubmit="showLoading()">
             <div class="icon-input">
                 <i class="fas fa-clipboard-list"></i>
                 <select name="input_type" id="input_type" onchange="showInputForm()">
@@ -341,7 +341,10 @@
             document.getElementById('file-input').style.display = inputType === 'file' ? 'block' : 'none';
             document.getElementById('text-input').style.display = inputType === 'text' ? 'block' : 'none';
         }
+
+        function showLoading() {
+            document.getElementById('loading-overlay').style.display = 'flex';
+        }
     </script>
 </body>
 </html>
-