Update templates/teacher_paper_gen.html

templates/teacher_paper_gen.html

@@ -13,7 +13,6 @@
             --text-color: #333;
             --card-background: #fff;
         }
-
         body {
             font-family: 'Roboto', sans-serif;
             background-color: var(--background-color);
@@ -21,8 +20,22 @@
             line-height: 1.6;
             margin: 0;
             padding: 0;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+        }
+        .background-video {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            z-index: -1;
         }
-
         .container {
             max-width: 800px;
             margin: 40px auto;
@@ -30,26 +43,23 @@
             background: var(--card-background);
             border-radius: 15px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            z-index: 1;
         }
-
         h1 {
             color: var(--primary-color);
             text-align: center;
             margin-bottom: 30px;
             font-size: 2.5em;
         }
-
         form {
             display: grid;
             gap: 20px;
         }
-
         label {
             font-weight: 500;
             display: block;
             margin-bottom: 5px;
         }
-
         input[type="number"],
         input[type="text"],
         input[type="file"] {
@@ -59,11 +69,9 @@
             border-radius: 5px;
             font-size: 16px;
         }
-
         input[type="file"] {
             padding: 10px 0;
         }
-
         button {
             background-color: var(--primary-color);
             color: white;
@@ -74,11 +82,9 @@
             cursor: pointer;
             transition: background-color 0.3s ease;
         }
-
         button:hover {
             background-color: #2980b9;
         }
-
         .generated-paper {
             margin-top: 40px;
             padding: 20px;
@@ -86,12 +92,10 @@
             border-radius: 10px;
             border: 1px solid #e0e0e0;
         }
-
         .generated-paper h2 {
             color: var(--secondary-color);
             margin-bottom: 20px;
         }
-
         @media (max-width: 600px) {
             .container {
                 padding: 20px;
@@ -102,7 +106,6 @@
             text-align: center;
             margin-top: 20px;
         }
-
         .loading-icon {
             border: 5px solid #f3f3f3;
             border-top: 5px solid var(--primary-color);
@@ -112,31 +115,22 @@
             animation: spin 1s linear infinite;
             margin: 0 auto;
         }
-
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-
         .part {
             margin-bottom: 20px;
         }
-
         .part h3 {
             margin-bottom: 10px;
             color: var(--primary-color);
         }
-
         .question {
             margin-left: 20px;
             margin-bottom: 10px;
         }
-        @media (max-width: 600px) {
-            .container {
-                padding: 20px;
-            }
-        }
-      .back-button {
+        .back-button {
             position: fixed;
             top: 20px;
             left: 20px;
@@ -154,20 +148,38 @@
             justify-content: center;
             align-items: center;
             text-decoration: none;
+            z-index: 2;
         }
-
         .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);
         }
+        .info-drive-box {
+            background-color: rgba(255, 255, 255, 0.8);
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            z-index: 1;
+        }
+        .drive-button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s;
+        }
+        .drive-button:hover {
+            background-color: #45a049;
+        }
     </style>
 </head>
 <body>
@@ -177,8 +189,8 @@
     </video>
     <a href="teacher" class="back-button" title="Back to Home">Back
         <i class="fas fa-arrow-left"></i>
-        </a>
-  <div class="info-drive-box">
+    </a>
+    <div class="info-drive-box">
         <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>
         <button class="drive-button" onclick="openDriveLink()">
             <i class="fas fa-cloud-upload-alt"></i> Open in Drive
@@ -228,18 +240,14 @@
             document.addEventListener("DOMContentLoaded", function() {
                 const questionsText =` {{ questions|tojson }}`;
                 const parts = questionsText.split("Part ");
-
                 const generatedPaper = document.getElementById("generated-paper");
-
                 parts.forEach((partText, index) => {
                     if (index > 0) {
                         const partDiv = document.createElement("div");
                         partDiv.className = "part";
-
                         const partHeader = document.createElement("h3");
                         partHeader.textContent = "Part " + index;
                         partDiv.appendChild(partHeader);
-
                         const questions = partText.split(/[0-9]+\./).slice(1);
                         questions.forEach((question, qIndex) => {
                             const questionDiv = document.createElement("div");
@@ -247,7 +255,6 @@
                             questionDiv.textContent = (qIndex + 1) + ". " + question.trim();
                             partDiv.appendChild(questionDiv);
                         });
-
                         generatedPaper.appendChild(partDiv);
                     }
                 });
@@ -255,10 +262,10 @@
         </script>
         {% endif %}
     </div>
-<script>
+    <script>
         function openDriveLink() {
             window.open('https://drive.google.com/drive/folders/1g135rBls7OROtbEpEhfjScT5gsODB0mR?usp=sharing', '_blank');
         }
     </script>
 </body>
-</html>
+</html>