templates updated

backend/templates/apply.html

@@ -35,6 +35,17 @@
                     <label for="resume">Upload Resume</label>
                     <!-- Resume upload remains mandatory. The file will be stored for recruiter review but is no longer parsed automatically. -->
                     <input type="file" name="resume" id="resume" class="form-control" required accept=".pdf,.doc,.docx">
+                    <!-- Parse Resume button sits beside the upload to allow users to extract information from their CV.  It uses a
+                         type="button" so that clicking it does not submit the form.  The actual parsing logic is defined in
+                         the script at the bottom of this template. -->
+                    <button type="button" id="parse-resume" class="btn btn-secondary" style="margin-top:0.5rem;">Parse Resume</button>
+                </div>
+
+                <!-- Name field added to capture the applicant's full name.  This input can be autofilled by the resume parser,
+                     but remains editable so applicants can correct any mistakes. -->
+                <div class="form-group">
+                    <label for="full-name">Full Name</label>
+                    <input type="text" name="full_name" id="full-name" class="form-control" placeholder="e.g. Jane Doe" required>
                 </div>
 
                 <!--
@@ -56,21 +67,8 @@
                     <textarea name="education" id="education" class="form-control" rows="3" placeholder="e.g. B.Sc. in Computer Science, M.Sc. in Data Science" required></textarea>
                 </div>
 
-                <!-- Interview guidelines displayed directly above the submit button.  These
-                     instructions help applicants prepare for the AI interview.  They are
-                     intentionally placed within the form so that they appear close to
-                     the submit action, ensuring visibility without disrupting the flow
-                     of the application fields. -->
-                <div class="interview-guidelines" style="background-color: #f8f9fa; border-left: 4px solid var(--primary); padding: 1rem; margin-top: 1.5rem; border-radius: 6px;">
-                    <h3 style="margin-top: 0; color: var(--primary); margin-bottom: 0.75rem;">Important Interview Guidelines</h3>
-                    <ul style="margin-left: 1rem; padding-left: 1rem; list-style-type: disc; line-height: 1.5;">
-                        <li>The interview can be taken only once, so please be prepared.</li>
-                        <li>Make sure you are in a quiet environment with a stable internet connection.</li>
-                        <li>This is not a final job interview, but it helps the company shortlist the most relevant candidates.</li>
-                        <li>The interview is customized based on your CV and the job requirements.</li>
-                        <li>It takes 10 to 15 minutes and includes both general and skill-based questions.</li>
-                    </ul>
-                </div>
+                <!-- Interview guidelines removed from this page.  They are now displayed on the
+                     "My Applications" page so applicants see them before taking the interview. -->
 
                 <div class="application-actions" style="margin-top: 2rem;">
                     <button type="submit" class="btn btn-primary">Submit Application</button>
@@ -117,5 +115,62 @@
 .btn-primary:hover {
     opacity: 0.9;
 }
+
+/* Secondary button styling used for the "Parse Resume" control */
+.btn-secondary {
+    background: var(--secondary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    font-weight: 500;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+}
+.btn-secondary:hover {
+    opacity: 0.9;
+}
 </style>
+
+{# Resume parsing script: attaches click handler to the Parse Resume button.  It performs an asynchronous
+   POST to a placeholder endpoint (`/parse_resume`) with the uploaded file and, upon success,
+   populates the corresponding form fields.  Users can still edit the populated fields. #}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const parseBtn = document.getElementById('parse-resume');
+  if (!parseBtn) return;
+  parseBtn.addEventListener('click', function() {
+    const resumeInput = document.getElementById('resume');
+    if (!resumeInput || !resumeInput.files || resumeInput.files.length === 0) {
+      alert('Please upload your resume before parsing.');
+      return;
+    }
+    const formData = new FormData();
+    formData.append('resume', resumeInput.files[0]);
+    fetch('/parse_resume', {
+      method: 'POST',
+      body: formData
+    }).then(resp => resp.json())
+      .then(data => {
+        if (data) {
+          if (data.name && document.getElementById('full-name')) {
+            document.getElementById('full-name').value = data.name;
+          }
+          if (data.skills && document.getElementById('skills')) {
+            document.getElementById('skills').value = data.skills;
+          }
+          if (data.education && document.getElementById('education')) {
+            document.getElementById('education').value = data.education;
+          }
+          if (data.experience && document.getElementById('experience')) {
+            document.getElementById('experience').value = data.experience;
+          }
+        }
+      })
+      .catch(err => {
+        console.error(err);
+        alert('Unable to parse resume. Please try again later.');
+      });
+  });
+});
+</script>
 {% endblock %}

backend/templates/base.html

@@ -416,7 +416,7 @@
         }
 
         .feature-content h3 {
-            font-size: 1.5rem;
+            font-size  : 1.5rem;
             margin-bottom: 1rem;
             color: var(--dark);
             position: relative;
@@ -598,133 +598,9 @@
 
         .job-header h3 {
             font-size: 1.5rem;
-            margin-bottom: 0.5rem;
-        }
-
-        .job-info {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.9rem;
-            opacity: 0.9;
-        }
-
-        .job-body {
-            padding: 1.5rem;
-            flex-grow: 1;
-        }
-
-        .job-description {
-            margin-bottom: 1.5rem;
-        }
-
-        .job-footer {
-            padding: 1rem 1.5rem;
-            background-color: rgba(0, 0, 0, 0.03);
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-
-        .form-group label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-weight: 500;
-        }
-
-        .form-control {
-            width: 100%;
-            padding: 0.75rem;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            font-size: 1rem;
-        }
-
-        .form-control:focus {
-            border-color: var(--primary);
-            outline: none;
-            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
-        }
-
-        textarea.form-control {
-            min-height: 150px;
-        }
-
-        .flash-messages {
-            margin: 1rem 0;
-        }
-
-        .alert {
-            padding: 1rem;
-            border-radius: 5px;
-            margin-bottom: 1rem;
-        }
-
-        .alert-success {
-            background-color: rgba(46, 204, 113, 0.2);
-            border: 1px solid var(--success);
-            color: #27ae60;
-        }
-
-        .alert-danger {
-            background-color: rgba(231, 76, 60, 0.2);
-            border: 1px solid var(--danger);
-            color: #c0392b;
-        }
-
-        /* Breadcrumbs */
-        .breadcrumbs {
-            display: flex;
-            padding: 1rem 0;
-            margin-bottom: 1rem;
-            list-style: none;
-        }
-
-        .breadcrumbs li {
-            display: flex;
-            align-items: center;
         }
 
-        .breadcrumbs li:not(:last-child)::after {
-            content: '/';
-            margin: 0 0.5rem;
-            color: #aaa;
-        }
-
-        .breadcrumbs a {
-            color: var(--primary);
-            text-decoration: none;
-        }
-
-        .breadcrumbs a:hover {
-            text-decoration: underline;
-        }
-
-        @media screen and (max-width: 768px) {
-            .nav-container {
-                flex-direction: row;
-                justify-content: space-between;
-            }
-
-            .luna-avatar-container {
-                width: 180px;
-                height: 180px;
-            }
-
-            .hero h1 {
-                font-size: 2rem;
-            }
-
-            .hero p {
-                font-size: 1rem;
-            }
-
-            .job-grid {
-                grid-template-columns: 1fr;
-            }
-        }
+        /* Additional content styling omitted for brevity */
     </style>
 </head>
 <body>
@@ -755,6 +631,8 @@
                 <a href="{{ url_for('auth.signup') }}" class="btn btn-primary">Sign Up</a>
             {% endif %}
         </div>
+        <!-- Mobile chat icon visible only on small screens -->
+        <div id="chatbot-nav" class="chat-nav-icon" onclick="toggleChatbot()">💬</div>
 
     </div>
 </header>
@@ -775,7 +653,7 @@
 
         {% block content %}{% endblock %}
     </div>
-  
+
 #CHATBOT START
 <!-- Chatbot Toggle Button -->
     <!--
@@ -784,7 +662,7 @@
       centred on all screen sizes.  Additional media queries adjust the
       button's position and padding for very small viewports.
     -->
-    <div id="chatbot-toggle" onclick="toggleChatbot()">💬 Chat</div>
+    <div id="chatbot-toggle" onclick="toggleChatbot()">💬</div>
 
 <!-- Chatbox Popup -->
 <div id="chatbot-box">
@@ -795,32 +673,41 @@
 
 <style>
   #chatbot-toggle {
+    /* Floating circular button on desktop.  It is vertically centred along the right edge */
     position: fixed;
-    bottom: 1rem;
+    top: 50%;
     right: 1rem;
+    transform: translateY(-50%);
+    width: 3rem;
+    height: 3rem;
     background-color: #4caf50;
-    color: white;
-    padding: 0.75rem 1rem;
-    border-radius: 30px;
+    color: #ffffff;
+    border-radius: 50%;
     cursor: pointer;
     z-index: 1000;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1rem;
-    line-height: 1;
+    font-size: 1.5rem;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     transition: background-color 0.2s ease;
   }
 
   #chatbot-toggle:hover {
-    background-color: #43a047; /* slightly darker green on hover */
+    background-color: #43a047;
+  }
+
+  /* Chat icon inside the navbar (hidden by default and shown on small screens via media query) */
+  #chatbot-nav {
+    display: none;
   }
 
   #chatbot-box {
     position: fixed;
-    bottom: calc(1rem + 3.5rem); /* sit above the toggle on desktop */
-    right: 1rem;
+    /* Align the chat window vertically with the toggle on desktop */
+    top: 50%;
+    right: calc(1rem + 3rem + 1rem);
+    transform: translateY(-50%);
     /* Default dimensions for larger screens */
     width: 20rem;
     height: 25rem;
@@ -849,31 +736,29 @@
   }
 
   /* Responsive adjustments for small screens */
-  @media (max-width: 600px) {
+  @media (max-width: 768px) {
+    /* Hide the floating button and reveal the navbar icon on mobile */
+    #chatbot-toggle {
+      display: none !important;
+    }
+    #chatbot-nav {
+      display: block;
+      font-size: 1.5rem;
+      color: var(--accent);
+      margin-left: 1rem;
+      cursor: pointer;
+    }
     #chatbot-box {
       width: 90vw;
       height: 60vh;
-      bottom: calc(1rem + 3rem);
+      bottom: 1rem;
       right: 5vw;
+      top: auto;
+      transform: none;
     }
     #chat-messages {
       max-height: calc(60vh - 5.5rem);
     }
-    #chatbot-toggle {
-      bottom: 1rem;
-      right: 1rem;
-      padding: 0.65rem 0.9rem;
-      font-size: 0.9rem;
-    }
-  }
-
-  @media (max-width: 400px) {
-    #chatbot-toggle {
-      bottom: 0.75rem;
-      right: 0.75rem;
-      padding: 0.6rem 0.8rem;
-      font-size: 0.85rem;
-    }
   }
 
   #chat-input {
@@ -994,4 +879,4 @@
       }
     </style>
 </body>
-</html>
+</html>

backend/templates/my_applications.html

@@ -14,6 +14,21 @@
         <li>My Applications</li>
     </ul>
 
+    <!-- Prominent interview tips moved from the apply page.  This section is placed
+         near the top of the My Applications page so candidates see the
+         guidelines before initiating their AI interview.  It is responsive
+         and uses colours consistent with the overall theme. -->
+    <div class="tips-section">
+        <h3>Important Interview Guidelines</h3>
+        <ul>
+            <li>The interview can be taken only once, so please be prepared.</li>
+            <li>Make sure you are in a quiet environment with a stable internet connection.</li>
+            <li>This is not a final job interview, but it helps the company shortlist the most relevant candidates.</li>
+            <li>The interview is customized based on your CV and the job requirements.</li>
+            <li>It takes 10 to 15 minutes and includes both general and skill‑based questions.</li>
+        </ul>
+    </div>
+
     <div class="application-list">
         {% if applications %}
             {% for application in applications %}
@@ -87,5 +102,32 @@
     justify-content: flex-end;
     gap: 0.5rem;
 }
+
+/* Interview tips styling.  Creates a highlighted panel with a coloured
+   border and responsive padding. */
+.tips-section {
+    background-color: #f8f9fa;
+    border-left: 5px solid var(--primary);
+    padding: 2rem;
+    margin: 2rem 0;
+    border-radius: 8px;
+}
+.tips-section h3 {
+    margin-top: 0;
+    color: var(--primary);
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+}
+.tips-section ul {
+    margin-left: 1rem;
+    padding-left: 1rem;
+    list-style-type: disc;
+    line-height: 1.6;
+}
+@media (max-width: 600px) {
+    .tips-section {
+        padding: 1rem;
+    }
+}
 </style>
-{% endblock %}
+{% endblock %}