From 7c885aa39dc781dccc3a9a1dbdf662e9b57c267b Mon Sep 17 00:00:00 2001
From: KanishkaSingh-18 <singh2007kanishka@gmail.com>
Date: Sun, 24 May 2026 01:14:33 +0530
Subject: [PATCH 1/2] Improve submit achievements UI

---
 templates/submit_achievements.html | 129 ++++++++++++++++++++++++++++-
 1 file changed, 128 insertions(+), 1 deletion(-)

diff --git a/templates/submit_achievements.html b/templates/submit_achievements.html
index acc2a917..61333dc0 100644
--- a/templates/submit_achievements.html
+++ b/templates/submit_achievements.html
@@ -41,13 +41,140 @@
           </div>
         </div>
 
-        <div class="button">
+        <div class="button" style="display:flex; gap:0.5rem; align-items:center;">
+          <!-- Preview button: uses type="button" so it does not submit the form immediately -->
+          <button id="previewBtn" type="button" class="btn-secondary">Preview</button>
           <input type="submit" value="Register Achievement">
         </div>
+      
+      <!-- Preview modal: hidden by default. It reads values from the original form and shows them to the user. -->
+      <div id="previewModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="previewTitle" hidden>
+        <div class="modal-content" role="document">
+          <h2 id="previewTitle">Preview Achievement</h2>
+          <div class="preview-body">
+            <p><strong>Student ID:</strong> <span id="previewStudentId">&nbsp;</span></p>
+            <p><strong>Certificate file:</strong> <span id="previewFileName">&nbsp;</span></p>
+          </div>
+          <div class="modal-actions" style="display:flex; gap:0.5rem; justify-content:flex-end; margin-top:1rem;">
+            <button id="editBtn" type="button" class="btn-secondary">Back to edit</button>
+            <button id="confirmBtn" type="button" class="btn-primary">Confirm & Submit</button>
+          </div>
+        </div>
+      </div>
       </form>
       {% endif %}
 
     </div>
   </div>
 </body>
+<!-- Lightweight styles for the preview modal (kept minimal to avoid changing existing styles) -->
+<style>
+  .modal {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0,0,0,0.4);
+    padding: 1rem;
+    z-index: 9999;
+  }
+  .modal-content {
+    background: var(--card-bg, #fff);
+    color: var(--text-color, #111);
+    max-width: 480px;
+    width: 100%;
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  }
+  .preview-body p { margin: 0.5rem 0; }
+  /* Simple responsive tweak */
+  @media (max-width: 520px) {
+    .modal-content { padding: 0.75rem; }
+  }
+</style>
+
+<script>
+// Preview modal script: reads values from the existing form and shows them to the user.
+// The script does NOT change form fields or submit URL; it only intercepts the flow temporarily.
+document.addEventListener('DOMContentLoaded', function () {
+  var previewBtn = document.getElementById('previewBtn');
+  var previewModal = document.getElementById('previewModal');
+  var previewStudentId = document.getElementById('previewStudentId');
+  var previewFileName = document.getElementById('previewFileName');
+  var editBtn = document.getElementById('editBtn');
+  var confirmBtn = document.getElementById('confirmBtn');
+
+  // Find the form and its inputs by name (do not rename these fields)
+  var form = document.querySelector('form[action="/submit_achievements"]');
+  if (!form) {
+    // Fallback: pick the first form on the page
+    form = document.querySelector('form');
+  }
+  var studentInput = form.querySelector('input[name="student_id"]');
+  var fileInput = form.querySelector('input[type="file"][name="certificate"]');
+
+  // Helper to open the modal and populate values
+  function openPreview() {
+    // Populate Student ID
+    previewStudentId.textContent = studentInput && studentInput.value ? studentInput.value : '(none)';
+
+    // Populate filename: use File API if available and a file is selected
+    var fileName = '(none)';
+    if (fileInput && fileInput.files && fileInput.files.length > 0) {
+      fileName = fileInput.files[0].name;
+    }
+    previewFileName.textContent = fileName;
+
+    // Show modal (remove hidden attribute)
+    previewModal.removeAttribute('hidden');
+
+    // For accessibility: focus the first interactive element in the modal
+    editBtn.focus();
+  }
+
+  // Helper to close/hide the modal
+  function closePreview() {
+    previewModal.setAttribute('hidden', '');
+    // Return focus to the Preview button so keyboard users can continue
+    previewBtn.focus();
+  }
+
+  // When Preview is clicked, prevent form submission and show modal
+  previewBtn && previewBtn.addEventListener('click', function (e) {
+    e.preventDefault(); // ensure no submission
+    openPreview();
+  });
+
+  // Back to edit
+  editBtn && editBtn.addEventListener('click', function (e) {
+    e.preventDefault();
+    closePreview();
+  });
+
+  // Confirm and submit original form
+  confirmBtn && confirmBtn.addEventListener('click', function (e) {
+    e.preventDefault();
+    // Close modal first for a cleaner submit; then submit the original form
+    closePreview();
+    // Submit the original form normally. This preserves method, enctype, CSRF token, and file input.
+    form.submit();
+  });
+
+  // Allow closing modal with Escape key
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !previewModal.hasAttribute('hidden')) {
+      closePreview();
+    }
+  });
+
+  // Clicking outside modal-content closes the modal (but not clicks inside)
+  previewModal && previewModal.addEventListener('click', function (e) {
+    if (e.target === previewModal) {
+      closePreview();
+    }
+  });
+});
+</script>
 </html>
\ No newline at end of file

From 495c35ae46449926c43a6ff10ebc09935e561c7d Mon Sep 17 00:00:00 2001
From: KanishkaSingh-18 <singh2007kanishka@gmail.com>
Date: Sun, 24 May 2026 11:04:47 +0530
Subject: [PATCH 2/2] fix: modal visibility and form null crash in submit
 achievements

---
 templates/submit_achievements.html | 302 ++++++++++++++---------------
 1 file changed, 147 insertions(+), 155 deletions(-)

diff --git a/templates/submit_achievements.html b/templates/submit_achievements.html
index 61333dc0..c5b8ae83 100644
--- a/templates/submit_achievements.html
+++ b/templates/submit_achievements.html
@@ -1,180 +1,172 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Submit Achievements</title>
-  <link rel="stylesheet" href="{{ url_for('static', filename = 'styles.css') }}" />
-  <script src="{{ url_for('static', filename = 'script.js') }}"></script>
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
+  <script src="{{ url_for('static', filename='script.js') }}"></script>
 </head>
+
 <body>
   <div class="toggle-container">
     <button id="mode-toggle">Dark Mode 🌙</button>
   </div>
 
   {% if error %}
-      <div class="error-box" style="background-color: #ffebee; color: #c62828; padding: 15px; border-radius: 8px; border: 1px solid #ef9a9a; margin-bottom: 20px; text-align: center; font-weight: bold;">
-        ⚠️ {{ error }}
-      </div>
-      {% endif %}
+  <div class="error-box"
+    style="background-color: #ffebee; color: #c62828; padding: 15px; border-radius: 8px; border: 1px solid #ef9a9a; margin-bottom: 20px; text-align: center; font-weight: bold;">
+    ⚠️ {{ error }}
+  </div>
+  {% endif %}
+
+  {% if success %}
+  <div class="welcome-text">
+    <p style="color: #2e7d32; font-weight: bold;">
+      Congratulations! <br> {{ success }}
+    </p>
+  </div>
+  <div class="button">
+    <a href="/teacher-dashboard" class="btn-primary">Back to Dashboard</a>
+  </div>
+  {% else %}
+
+  <form action="/submit_achievements" method="POST" enctype="multipart/form-data">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
 
-      {% if success %}
-      <div class="welcome-text">
-        <p style="color: #2e7d32; font-weight: bold;">Congratulations! <br> {{ success }}</p>
+    <div class="user-details">
+      <div class="input-box">
+        <span class="details">Student ID</span>
+        <input type="text" name="student_id" placeholder="Enter Student ID" required>
       </div>
-      <div class="button">
-        <a href="/teacher-dashboard" class="btn-primary">Back to Dashboard</a>
+
+      <div class="input-box">
+        <span class="details">Certificate File</span>
+        <input type="file" name="certificate" required>
       </div>
-      {% else %}
-
-      <form action="/submit_achievements" method="POST" enctype="multipart/form-data">
-        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-        
-        <div class="user-details">
-          <div class="input-box">
-            <span class="details">Student ID</span>
-            <input type="text" name="student_id" placeholder="Enter Student ID" required>
-          </div>
-          <div class="input-box">
-            <span class="details">Certificate File</span>
-            <input type="file" name="certificate" required>
-          </div>
-        </div>
+    </div>
+
+    <div class="button" style="display:flex; gap:0.5rem; align-items:center;">
+      <button id="previewBtn" type="button" class="btn-secondary">Preview</button>
+      <input type="submit" value="Register Achievement">
+    </div>
+
+    <!-- Preview modal -->
+    <div id="previewModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="previewTitle" hidden>
+      <div class="modal-content" role="document">
+        <h2 id="previewTitle">Preview Achievement</h2>
 
-        <div class="button" style="display:flex; gap:0.5rem; align-items:center;">
-          <!-- Preview button: uses type="button" so it does not submit the form immediately -->
-          <button id="previewBtn" type="button" class="btn-secondary">Preview</button>
-          <input type="submit" value="Register Achievement">
+        <div class="preview-body">
+          <p><strong>Student ID:</strong> <span id="previewStudentId">&nbsp;</span></p>
+          <p><strong>Certificate file:</strong> <span id="previewFileName">&nbsp;</span></p>
         </div>
-      
-      <!-- Preview modal: hidden by default. It reads values from the original form and shows them to the user. -->
-      <div id="previewModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="previewTitle" hidden>
-        <div class="modal-content" role="document">
-          <h2 id="previewTitle">Preview Achievement</h2>
-          <div class="preview-body">
-            <p><strong>Student ID:</strong> <span id="previewStudentId">&nbsp;</span></p>
-            <p><strong>Certificate file:</strong> <span id="previewFileName">&nbsp;</span></p>
-          </div>
-          <div class="modal-actions" style="display:flex; gap:0.5rem; justify-content:flex-end; margin-top:1rem;">
-            <button id="editBtn" type="button" class="btn-secondary">Back to edit</button>
-            <button id="confirmBtn" type="button" class="btn-primary">Confirm & Submit</button>
-          </div>
+
+        <div class="modal-actions" style="display:flex; gap:0.5rem; justify-content:flex-end; margin-top:1rem;">
+          <button id="editBtn" type="button" class="btn-secondary">Back to edit</button>
+          <button id="confirmBtn" type="button" class="btn-primary">Confirm & Submit</button>
         </div>
       </div>
-      </form>
-      {% endif %}
-
     </div>
-  </div>
-</body>
-<!-- Lightweight styles for the preview modal (kept minimal to avoid changing existing styles) -->
-<style>
-  .modal {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0,0,0,0.4);
-    padding: 1rem;
-    z-index: 9999;
-  }
-  .modal-content {
-    background: var(--card-bg, #fff);
-    color: var(--text-color, #111);
-    max-width: 480px;
-    width: 100%;
-    border-radius: 8px;
-    padding: 1rem 1.25rem;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
-  }
-  .preview-body p { margin: 0.5rem 0; }
-  /* Simple responsive tweak */
-  @media (max-width: 520px) {
-    .modal-content { padding: 0.75rem; }
-  }
-</style>
-
-<script>
-// Preview modal script: reads values from the existing form and shows them to the user.
-// The script does NOT change form fields or submit URL; it only intercepts the flow temporarily.
-document.addEventListener('DOMContentLoaded', function () {
-  var previewBtn = document.getElementById('previewBtn');
-  var previewModal = document.getElementById('previewModal');
-  var previewStudentId = document.getElementById('previewStudentId');
-  var previewFileName = document.getElementById('previewFileName');
-  var editBtn = document.getElementById('editBtn');
-  var confirmBtn = document.getElementById('confirmBtn');
-
-  // Find the form and its inputs by name (do not rename these fields)
-  var form = document.querySelector('form[action="/submit_achievements"]');
-  if (!form) {
-    // Fallback: pick the first form on the page
-    form = document.querySelector('form');
-  }
-  var studentInput = form.querySelector('input[name="student_id"]');
-  var fileInput = form.querySelector('input[type="file"][name="certificate"]');
-
-  // Helper to open the modal and populate values
-  function openPreview() {
-    // Populate Student ID
-    previewStudentId.textContent = studentInput && studentInput.value ? studentInput.value : '(none)';
-
-    // Populate filename: use File API if available and a file is selected
-    var fileName = '(none)';
-    if (fileInput && fileInput.files && fileInput.files.length > 0) {
-      fileName = fileInput.files[0].name;
+
+  </form>
+  {% endif %}
+
+  <style>
+    .modal:not([hidden]) {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.4);
+      padding: 1rem;
+      z-index: 9999;
+    }
+
+    .modal-content {
+      background: var(--card-bg, #fff);
+      color: var(--text-color, #111);
+      max-width: 480px;
+      width: 100%;
+      border-radius: 8px;
+      padding: 1rem 1.25rem;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     }
-    previewFileName.textContent = fileName;
-
-    // Show modal (remove hidden attribute)
-    previewModal.removeAttribute('hidden');
-
-    // For accessibility: focus the first interactive element in the modal
-    editBtn.focus();
-  }
-
-  // Helper to close/hide the modal
-  function closePreview() {
-    previewModal.setAttribute('hidden', '');
-    // Return focus to the Preview button so keyboard users can continue
-    previewBtn.focus();
-  }
-
-  // When Preview is clicked, prevent form submission and show modal
-  previewBtn && previewBtn.addEventListener('click', function (e) {
-    e.preventDefault(); // ensure no submission
-    openPreview();
-  });
-
-  // Back to edit
-  editBtn && editBtn.addEventListener('click', function (e) {
-    e.preventDefault();
-    closePreview();
-  });
-
-  // Confirm and submit original form
-  confirmBtn && confirmBtn.addEventListener('click', function (e) {
-    e.preventDefault();
-    // Close modal first for a cleaner submit; then submit the original form
-    closePreview();
-    // Submit the original form normally. This preserves method, enctype, CSRF token, and file input.
-    form.submit();
-  });
-
-  // Allow closing modal with Escape key
-  document.addEventListener('keydown', function (e) {
-    if (e.key === 'Escape' && !previewModal.hasAttribute('hidden')) {
-      closePreview();
+
+    .preview-body p {
+      margin: 0.5rem 0;
     }
-  });
 
-  // Clicking outside modal-content closes the modal (but not clicks inside)
-  previewModal && previewModal.addEventListener('click', function (e) {
-    if (e.target === previewModal) {
-      closePreview();
+    @media (max-width: 520px) {
+      .modal-content {
+        padding: 0.75rem;
+      }
     }
-  });
-});
-</script>
+  </style>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const previewBtn = document.getElementById('previewBtn');
+      const previewModal = document.getElementById('previewModal');
+      const previewStudentId = document.getElementById('previewStudentId');
+      const previewFileName = document.getElementById('previewFileName');
+      const editBtn = document.getElementById('editBtn');
+      const confirmBtn = document.getElementById('confirmBtn');
+
+      let form = document.querySelector('form[action="/submit_achievements"]') ||
+                 document.querySelector('form');
+
+      let studentInput = form ? form.querySelector('input[name="student_id"]') : null;
+      let fileInput = form ? form.querySelector('input[type="file"][name="certificate"]') : null;
+
+      function openPreview() {
+        previewStudentId.textContent = studentInput?.value || '(none)';
+
+        let fileName = '(none)';
+        if (fileInput?.files?.length) {
+          fileName = fileInput.files[0].name;
+        }
+        previewFileName.textContent = fileName;
+
+        previewModal.removeAttribute('hidden');
+        editBtn.focus();
+      }
+
+      function closePreview() {
+        previewModal.setAttribute('hidden', '');
+        previewBtn.focus();
+      }
+
+      previewBtn?.addEventListener('click', (e) => {
+        e.preventDefault();
+        openPreview();
+      });
+
+      editBtn?.addEventListener('click', (e) => {
+        e.preventDefault();
+        closePreview();
+      });
+
+      confirmBtn?.addEventListener('click', (e) => {
+        e.preventDefault();
+        closePreview();
+        form.submit();
+      });
+
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !previewModal.hasAttribute('hidden')) {
+          closePreview();
+        }
+      });
+
+      previewModal?.addEventListener('click', (e) => {
+        if (e.target === previewModal) {
+          closePreview();
+        }
+      });
+    });
+  </script>
+
+</body>
 </html>
\ No newline at end of file