Update templates/teacher_paper_gen.html

templates/teacher_paper_gen.html

@@ -13,7 +13,6 @@
             --text-color: #333;
             --card-background: rgba(255, 255, 255, 0.8);
         }
-
         body {
             font-family: 'Roboto', sans-serif;
             background-color: var(--background-color);
@@ -26,7 +25,6 @@
             flex-direction: column;
             align-items: center;
         }
-
         .background-video {
             position: fixed;
             right: 0;
@@ -36,7 +34,6 @@
             z-index: -1;
             object-fit: cover;
         }
-
         .container {
             max-width: 1200px;
             width: 95%;
@@ -49,38 +46,31 @@
             max-height: 90vh;
             overflow-y: auto;
         }
-
         h1 {
             color: var(--primary-color);
             text-align: center;
             margin-bottom: 30px;
             font-size: 2.5em;
         }
-
         .content-wrapper {
             display: flex;
             gap: 30px;
         }
-
         .form-container {
             flex: 1;
         }
-
         .generated-paper-container {
             flex: 1;
         }
-
         form {
             display: grid;
             gap: 15px;
         }
-
         label {
             font-weight: 500;
             display: block;
             margin-bottom: 5px;
         }
-
         input[type="number"],
         input[type="text"],
         input[type="file"] {
@@ -90,11 +80,9 @@
             border-radius: 5px;
             font-size: 14px;
         }
-
         input[type="file"] {
             padding: 8px 0;
         }
-
         button {
             background-color: var(--primary-color);
             color: white;
@@ -105,11 +93,9 @@
             cursor: pointer;
             transition: background-color 0.3s ease;
         }
-
         button:hover {
             background-color: #2980b9;
         }
-
         .generated-paper {
             margin-top: 0;
             padding: 20px;
@@ -119,24 +105,21 @@
             height: 100%;
             overflow-y: auto;
         }
-
         .generated-paper h2 {
             color: var(--secondary-color);
             margin-bottom: 20px;
         }
-
         @media (max-width: 900px) {
             .content-wrapper {
                 flex-direction: column;
             }
         }
-
         @media (max-width: 600px) {
             .container {
                 padding: 20px;
             }
         }
-      .back-button {
+        .back-button {
             position: fixed;
             top: 20px;
             left: 20px;
@@ -154,20 +137,61 @@
             justify-content: center;
             align-items: center;
             text-decoration: none;
+            z-index: 1;
         }
-
         .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 {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 15px;
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            z-index: 1;
+            max-width: 300px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            transition: transform 0.3s ease;
+        }
+
+        .info-drive-box:hover {
+            transform: translateY(-5px); /* Moves up on hover */
+        }
+
+        .drive-button {
+            background-color: #e74c3c;
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            transition: all 0.3s ease;
+            margin-top: 10px;
+        }
+
+        .drive-button:hover {
+            background-color: #c0392b;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .drive-button i {
+            margin-right: 0.5rem;
+        }
     </style>
 </head>
 <body>
@@ -175,10 +199,16 @@
         <source src="../static/paper.mp4" type="video/mp4">
         Your browser does not support the video tag.
     </video>
-    <a href="teacher" class="back-button" title="Back to Home">Back
-        <i class="fas fa-arrow-left"></i>
-        </a>
+    <a href="teacher" class="back-button" title= "Back to Home">
+        <i class="fas fa-arrow-left"></i>Back
+    </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
+        </button>
+    </div>
 
     <div class="container">
         <h1>Question Paper Generator</h1>
@@ -228,5 +258,11 @@
             </div>
         </div>
     </div>
+
+    <script>
+        function openDriveLink() {
+            window.open('https://drive.google.com/drive/folders/1g135rBls7OROtbEpEhfjScT5gsODB0mR?usp=sharing', '_blank');
+        }
+    </script>
 </body>
-</html> 
+</html>