updated

backend/templates/base.html

@@ -14,7 +14,6 @@
             --success: #2ecc71;
             --warning: #f39c12;
             --danger: #e74c3c;
-            --info: #3498db;
         }
 
         * {
@@ -30,12 +29,8 @@
             line-height: 1.6;
             perspective: 1000px;
             overflow-x: hidden;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
         }
 
-        /* Header Styles */
         header {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: white;
@@ -57,11 +52,8 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            flex-wrap: wrap;
-            gap: 1rem;
         }
 
-        /* Logo Styles */
         .logo {
             display: flex;
             align-items: center;
@@ -100,37 +92,23 @@
             color: var(--accent);
         }
 
-        /* Navigation Buttons */
         .login-buttons {
             display: flex;
             align-items: center;
-            gap: 0.75rem;
-            flex-wrap: wrap;
-        }
-
-        /* Mobile Menu Toggle */
-        .mobile-menu-toggle {
-            display: none;
-            background: transparent;
-            border: 2px solid var(--accent);
-            color: var(--accent);
-            padding: 0.5rem;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 1.5rem;
+            gap: 1rem;
         }
 
-        /* Welcome Message */
+        /* Style for the welcome message */
         .welcome-message {
             color: white;
             font-weight: 500;
+            margin-right: 0.5rem;
             display: flex;
             align-items: center;
             background-color: rgba(255, 255, 255, 0.1);
             padding: 0.5rem 1rem;
             border-radius: 5px;
             transition: all 0.3s ease;
-            white-space: nowrap;
         }
 
         .welcome-message:before {
@@ -138,7 +116,24 @@
             margin-right: 0.5rem;
         }
 
-        /* Button Styles */
+        /* Enhanced logout button */
+        .btn-logout {
+            background-color: transparent;
+            border: 2px solid var(--accent);
+            color: var(--accent);
+            font-weight: 600;
+            padding: 0.5rem 1.5rem;
+            border-radius: 5px;
+            transition: all 0.3s ease;
+        }
+
+        .btn-logout:hover {
+            background-color: var(--accent);
+            color: var(--dark);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(76, 201, 240, 0.3);
+        }
+
         .btn {
             padding: 0.5rem 1.5rem;
             border-radius: 5px;
@@ -150,8 +145,6 @@
             position: relative;
             overflow: hidden;
             z-index: 1;
-            display: inline-block;
-            white-space: nowrap;
         }
 
         .btn::before {
@@ -182,99 +175,11 @@
             color: white;
         }
 
-        .btn-logout {
-            background-color: transparent;
-            border: 2px solid var(--accent);
-            color: var(--accent);
-            font-weight: 600;
-        }
-
-        .btn-logout:hover {
-            background-color: var(--accent);
-            color: var(--dark);
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(76, 201, 240, 0.3);
-        }
-
         .btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         }
 
-        /* Flash Messages */
-        .flash-messages {
-            margin: 1rem 0;
-        }
-
-        .alert {
-            padding: 1rem 1.5rem;
-            border-radius: 8px;
-            margin-bottom: 1rem;
-            font-weight: 500;
-            position: relative;
-            animation: slideIn 0.3s ease-out;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
-
-        @keyframes slideIn {
-            from {
-                transform: translateY(-20px);
-                opacity: 0;
-            }
-            to {
-                transform: translateY(0);
-                opacity: 1;
-            }
-        }
-
-        .alert::before {
-            font-size: 1.2rem;
-        }
-
-        .alert-success {
-            background-color: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
-        }
-
-        .alert-success::before {
-            content: '✓';
-        }
-
-        .alert-danger, .alert-error {
-            background-color: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
-        }
-
-        .alert-danger::before, .alert-error::before {
-            content: '⚠';
-        }
-
-        .alert-warning {
-            background-color: #fff3cd;
-            color: #856404;
-            border: 1px solid #ffeaa7;
-        }
-
-        .alert-warning::before {
-            content: '!';
-        }
-
-        .alert-info {
-            background-color: #d1ecf1;
-            color: #0c5460;
-            border: 1px solid #bee5eb;
-        }
-
-        .alert-info::before {
-            content: 'ℹ';
-        }
-
-        /* Hero Section */
         .hero {
             background: linear-gradient(rgba(67, 97, 238, 0.8), rgba(58, 12, 163, 0.9)), url("/api/placeholder/1200/600") no-repeat center center/cover;
             color: white;
@@ -343,117 +248,249 @@
             animation: fadeIn 1s ease-out 0.3s both;
         }
 
-        /* Main Content */
-        main {
-            flex: 1;
-            padding: 2rem 0;
+        .luna-avatar-container {
+            position: relative;
+            width: 250px;
+            height: 250px;
+            margin-bottom: 2rem;
+            perspective: 1000px;
         }
 
-        /* Breadcrumbs */
-        .breadcrumbs {
-            list-style: none;
+        .luna-avatar {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            border: 4px solid var(--accent);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(76, 201, 240, 0.5);
+            overflow: hidden;
+            animation: float 4s ease-in-out infinite;
+            position: relative;
+            z-index: 2;
+            background: linear-gradient(135deg, rgba(76, 201, 240, 0.2), rgba(58, 12, 163, 0.2));
             display: flex;
+            justify-content: center;
             align-items: center;
-            gap: 0.5rem;
-            margin-bottom: 2rem;
-            padding: 0.75rem 1rem;
-            background-color: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-            flex-wrap: wrap;
         }
 
-        .breadcrumbs li {
+        .luna-glow {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(76, 201, 240, 0.8) 0%, rgba(76, 201, 240, 0) 70%);
+            filter: blur(15px);
+            opacity: 0.7;
+            z-index: 1;
+            animation: pulse 4s ease-in-out infinite alternate;
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: scale(0.9);
+                opacity: 0.5;
+            }
+            100% {
+                transform: scale(1.1);
+                opacity: 0.7;
+            }
+        }
+
+        @keyframes float {
+            0% {
+                transform: translateY(0px) rotateY(0deg);
+            }
+            50% {
+                transform: translateY(-15px) rotateY(5deg);
+            }
+            100% {
+                transform: translateY(0px) rotateY(0deg);
+            }
+        }
+
+        .luna-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center -10px;
+            top: 0;
+            left: 0;
+        }
+
+        .hero-buttons {
             display: flex;
-            align-items: center;
+            justify-content: center;
+            gap: 1.5rem;
+            flex-wrap: wrap;
+            transform: translateZ(15px);
+            animation: fadeIn 1s ease-out 0.6s both;
+        }
+
+        .features {
+            padding: 5rem 1rem;
+            background-color: white;
+            position: relative;
+            z-index: 1;
         }
 
-        .breadcrumbs li:not(:last-child)::after {
-            content: '›';
-            margin-left: 0.5rem;
-            color: #999;
+        .section-title {
+            text-align: center;
+            margin-bottom: 3rem;
+            transform-style: preserve-3d;
+            transition: transform 0.3s ease;
         }
 
-        .breadcrumbs a {
+        .section-title h2 {
+            font-size: 2.5rem;
             color: var(--primary);
-            text-decoration: none;
-            transition: color 0.3s ease;
+            margin-bottom: 1rem;
+            position: relative;
+            display: inline-block;
         }
 
-        .breadcrumbs a:hover {
-            color: var(--secondary);
+        .section-title h2::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80px;
+            height: 3px;
+            background: linear-gradient(to right, var(--primary), var(--accent));
         }
 
-        /* Content Section */
-        .content-section {
-            padding: 3rem 1rem;
-            background-color: white;
-            min-height: 50vh;
+        .section-title p {
+            max-width: 600px;
+            margin: 0 auto;
+            color: #666;
         }
 
-        /* Cards */
-        .card {
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+        }
+
+        .feature-card {
             background-color: white;
             border-radius: 10px;
             overflow: hidden;
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
             transition: all 0.5s ease;
-            margin-bottom: 2rem;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            transform-style: preserve-3d;
+            perspective: 1000px;
         }
 
-        .card:hover {
-            transform: translateY(-5px);
+        .feature-card:hover {
+            transform: translateY(-10px) rotateX(5deg);
             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
         }
 
-        .card-header {
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            color: white;
-            padding: 1.5rem;
+        .feature-icon {
+            background: linear-gradient(135deg, rgba(67, 97, 238, 0.1), rgba(76, 201, 240, 0.1));
+            padding: 2rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 2.5rem;
+            color: var(--primary);
+            transition: all 0.3s ease;
         }
 
-        .card-body {
+        .feature-card:hover .feature-icon {
+            transform: translateZ(20px);
+            color: var(--accent);
+        }
+
+        .feature-content {
             padding: 1.5rem;
+            flex-grow: 1;
+            transform: translateZ(0);
+            transition: transform 0.3s ease;
         }
 
-        /* Form Styles */
-        .form-group {
-            margin-bottom: 1.5rem;
+        .feature-card:hover .feature-content {
+            transform: translateZ(10px);
         }
 
-        .form-group label {
-            font-weight: 600;
-            color: var(--primary);
-            margin-bottom: 0.5rem;
-            display: block;
+        .feature-content h3 {
+            font-size  : 1.5rem;
+            margin-bottom: 1rem;
+            color: var(--dark);
+            position: relative;
+            display: inline-block;
+        }
+
+        .feature-content h3::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 40px;
+            height: 2px;
+            background: var(--primary);
+            transition: width 0.3s ease;
         }
 
-        .form-control {
+        .feature-card:hover .feature-content h3::after {
             width: 100%;
-            padding: 0.75rem;
-            font-size: 1rem;
-            border-radius: 6px;
-            border: 1px solid #ddd;
-            transition: all 0.3s ease;
         }
 
-        .form-control:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
+        .content-section {
+            padding: 5rem 1rem;
+            background-color: white;
+            min-height: 50vh;
+        }
+
+        .cta {
+            background: linear-gradient(135deg, var(--secondary), var(--primary));
+            color: white;
+            padding: 5rem 1rem;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .cta::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
+            animation: rotate 20s linear infinite;
+            z-index: 1;
+        }
+
+        .cta .container {
+            position: relative;
+            z-index: 2;
+        }
+
+        .cta h2 {
+            font-size: 2.5rem;
+            margin-bottom: 1.5rem;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .cta p {
+            max-width: 600px;
+            margin: 0 auto 2rem;
+            font-size: 1.2rem;
         }
 
-        /* Footer */
         footer {
             background-color: var(--dark);
             color: white;
             padding: 3rem 1rem;
-            margin-top: auto;
         }
 
         .footer-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 2rem;
         }
 
@@ -507,236 +544,63 @@
             color: #aaa;
         }
 
-        /* Chatbot Styles */
-        #chatbot-toggle {
-            position: fixed;
-            bottom: 2rem;
-            right: 2rem;
-            width: 3.5rem;
-            height: 3.5rem;
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            color: white;
-            border-radius: 50%;
-            cursor: pointer;
-            z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            transition: all 0.3s ease;
-        }
-
-        #chatbot-toggle:hover {
-            transform: scale(1.1);
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-        }
-
-        .chat-nav-icon {
-            display: none;
-            font-size: 1.5rem;
-            color: var(--accent);
-            cursor: pointer;
-        }
-
-        #chatbot-box {
-            position: fixed;
-            bottom: 6rem;
-            right: 2rem;
-            width: 350px;
-            height: 500px;
-            background: white;
-            border-radius: 15px;
-            display: none;
-            flex-direction: column;
-            z-index: 1000;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+        .card {
+            background-color: white;
+            border-radius: 10px;
             overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            transition: all 0.5s ease;
+            margin-bottom: 2rem;
         }
 
-        #chat-header {
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            color: white;
-            padding: 1rem;
-            text-align: center;
-            font-weight: bold;
-            font-size: 1.2rem;
-        }
-
-        #chat-messages {
-            flex: 1;
-            padding: 1rem;
-            overflow-y: auto;
-            background-color: #f9f9f9;
-        }
-
-        #chat-messages .user-message {
-            display: flex;
-            justify-content: flex-end;
-            margin-bottom: 1rem;
-        }
-
-        #chat-messages .bot-message {
-            display: flex;
-            justify-content: flex-start;
-            margin-bottom: 1rem;
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
         }
 
-        #chat-messages .user-bubble {
+        .card-header {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: white;
-            padding: 0.75rem 1rem;
-            border-radius: 18px 18px 4px 18px;
-            max-width: 80%;
-            word-wrap: break-word;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            padding: 1.5rem;
         }
 
-        #chat-messages .bot-bubble {
-            background-color: white;
-            color: var(--dark);
-            padding: 0.75rem 1rem;
-            border-radius: 18px 18px 18px 4px;
-            max-width: 80%;
-            word-wrap: break-word;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-            border: 1px solid #eee;
+        .card-body {
+            padding: 1.5rem;
         }
 
-        #chat-input {
-            border: none;
-            border-top: 1px solid #eee;
-            padding: 1rem;
-            width: 100%;
-            box-sizing: border-box;
-            font-size: 1rem;
-            transition: all 0.3s ease;
+        .job-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 2rem;
         }
 
-        #chat-input:focus {
-            outline: none;
-            background-color: #f9f9f9;
+        .job-card {
+            background-color: white;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            transition: all 0.5s ease;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
         }
 
-        /* Responsive Styles */
-        @media (max-width: 768px) {
-            .nav-container {
-                padding: 0.5rem 0;
-            }
-
-            .logo {
-                font-size: 1.5rem;
-            }
-
-            .mobile-menu-toggle {
-                display: block;
-            }
-
-            .login-buttons {
-                width: 100%;
-                order: 3;
-                justify-content: center;
-                padding: 1rem 0;
-                background-color: rgba(0, 0, 0, 0.1);
-                margin: 0 -1rem;
-                border-radius: 8px;
-                display: none;
-            }
-
-            .login-buttons.show {
-                display: flex;
-            }
-
-            .welcome-message {
-                font-size: 0.9rem;
-                padding: 0.4rem 0.8rem;
-            }
-
-            .btn {
-                padding: 0.4rem 1rem;
-                font-size: 0.9rem;
-            }
-
-            .hero h1 {
-                font-size: 2rem;
-            }
-
-            .hero p {
-                font-size: 1rem;
-            }
-
-            #chatbot-toggle {
-                display: none !important;
-            }
-
-            .chat-nav-icon {
-                display: block;
-            }
-
-            #chatbot-box {
-                width: 90vw;
-                height: 70vh;
-                bottom: 1rem;
-                right: 5vw;
-                max-width: 400px;
-            }
-
-            .card {
-                margin-bottom: 1rem;
-            }
-
-            .content-section {
-                padding: 2rem 1rem;
-            }
-
-            .footer-grid {
-                grid-template-columns: 1fr;
-                text-align: center;
-            }
-
-            .social-links {
-                justify-content: center;
-            }
+        .job-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
         }
 
-        @media (max-width: 480px) {
-            .hero h1 {
-                font-size: 1.75rem;
-            }
-
-            .btn {
-                width: 100%;
-                margin-bottom: 0.5rem;
-            }
-
-            .login-buttons {
-                flex-direction: column;
-                gap: 0.5rem;
-            }
-
-            .breadcrumbs {
-                font-size: 0.9rem;
-            }
+        .job-header {
+            background: linear-gradient(135deg, rgba(67, 97, 238, 0.9), rgba(58, 12, 163, 0.9));
+            color: white;
+            padding: 1.5rem;
         }
 
-        /* Utility Classes */
-        .text-center {
-            text-align: center;
+        .job-header h3 {
+            font-size: 1.5rem;
         }
 
-        .mt-1 { margin-top: 0.5rem; }
-        .mt-2 { margin-top: 1rem; }
-        .mt-3 { margin-top: 1.5rem; }
-        .mt-4 { margin-top: 2rem; }
-
-        .mb-1 { margin-bottom: 0.5rem; }
-        .mb-2 { margin-bottom: 1rem; }
-        .mb-3 { margin-bottom: 1.5rem; }
-        .mb-4 { margin-bottom: 2rem; }
-
-        .gap-1 { gap: 0.5rem; }
-        .gap-2 { gap: 1rem; }
-        .gap-3 { gap: 1.5rem; }
+        /* Additional content styling omitted for brevity */
     </style>
 </head>
 <body>
@@ -745,11 +609,13 @@
         <a href="{{ url_for('index') }}" class="logo">
             <span class="logo-part1">Cod</span><span class="logo-part2">in</span><span class="logo-part3">go</span>
         </a>
-        
-        <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">☰</button>
-        
-        <div class="login-buttons" id="nav-menu">
+        <div class="login-buttons">
             {% if current_user.is_authenticated %}
+                {#
+                  Display navigation options based on the authenticated user's role.
+                  Job seekers (role: "unemployed") can view available jobs and their own applications.
+                  Recruiters and admins can post new jobs, view the jobs list and access the recruiter dashboard.
+                #}
                 {% if current_user.role == 'unemployed' %}
                     <a href="{{ url_for('jobs') }}" class="btn btn-outline">Jobs</a>
                     <a href="{{ url_for('my_applications') }}" class="btn btn-outline">My Applications</a>
@@ -765,8 +631,9 @@
                 <a href="{{ url_for('auth.signup') }}" class="btn btn-primary">Sign Up</a>
             {% endif %}
         </div>
-        
-        <div class="chat-nav-icon" onclick="toggleChatbot()">💬</div>
+        <!-- Mobile chat icon visible only on small screens -->
+        <div id="chatbot-nav" class="chat-nav-icon" onclick="toggleChatbot()">💬</div>
+
     </div>
 </header>
 
@@ -787,15 +654,123 @@
         {% block content %}{% endblock %}
     </div>
 
-    <!-- Chatbot Toggle Button -->
+#CHATBOT START
+<!-- Chatbot Toggle Button -->
+    <!--
+      The floating chat button toggles the visibility of the chat window.
+      We use a flex container here to ensure the emoji and text remain
+      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()">💬</div>
 
-    <!-- Chatbox Popup -->
-    <div id="chatbot-box">
-        <div id="chat-header">LUNA AI Assistant</div>
-        <div id="chat-messages"></div>
-        <input id="chat-input" type="text" placeholder="Ask me anything..." onkeydown="sendChat(event)">
-    </div>
+<!-- Chatbox Popup -->
+<div id="chatbot-box">
+  <div id="chat-header">LUNA AI</div>
+  <div id="chat-messages"></div>
+  <input id="chat-input" type="text" placeholder="Ask me anything..." onkeydown="sendChat(event)">
+</div>
+
+<style>
+  #chatbot-toggle {
+    /* Floating circular button on desktop.  It is vertically centred along the right edge */
+    position: fixed;
+    top: 50%;
+    right: 1rem;
+    transform: translateY(-50%);
+    width: 3rem;
+    height: 3rem;
+    background-color: #4caf50;
+    color: #ffffff;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    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;
+  }
+
+  /* Chat icon inside the navbar (hidden by default and shown on small screens via media query) */
+  #chatbot-nav {
+    display: none;
+  }
+
+  #chatbot-box {
+    position: fixed;
+    /* 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;
+    background: white;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    display: none;
+    flex-direction: column;
+    z-index: 1000;
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+  }
+
+  #chat-header {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    font-weight: bold;
+  }
+
+  #chat-messages {
+    flex: 1;
+    padding: 10px;
+    overflow-y: auto;
+    max-height: 300px;
+  }
+
+  /* Responsive adjustments for small screens */
+  @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: 1rem;
+      right: 5vw;
+      top: auto;
+      transform: none;
+    }
+    #chat-messages {
+      max-height: calc(60vh - 5.5rem);
+    }
+  }
+
+  #chat-input {
+    border: none;
+    border-top: 1px solid #ccc;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+</style>
+
+#CHATBOT END  
 </main>
 
 <footer>
@@ -805,9 +780,9 @@
                 <h3>Codingo</h3>
                 <p>AI-powered recruitment platform that revolutionizes how companies hire technical talent.</p>
                 <div class="social-links">
-                    <a href="#" aria-label="Facebook"><span>f</span></a>
-                    <a href="#" aria-label="Twitter"><span>t</span></a>
-                    <a href="#" aria-label="LinkedIn"><span>in</span></a>
+                    <a href="#"><span>f</span></a>
+                    <a href="#"><span>t</span></a>
+                    <a href="#"><span>in</span></a>
                 </div>
             </div>
         </div>
@@ -817,83 +792,91 @@
     </div>
 </footer>
 
-<script type="text/javascript">
-    // Mobile menu toggle
-    function toggleMobileMenu() {
-        const menu = document.getElementById('nav-menu');
-        menu.classList.toggle('show');
-    }
-
-    // Chatbot functionality
-    function toggleChatbot() {
+    {# -------------------------------------------------------------------------
+       Chatbot UI scripts and styles
+
+       The following script powers the floating chatbot widget located at the
+       bottom right of every page.  When the user clicks the 💬 button, the
+       widget toggles visibility.  Pressing Enter in the input box sends the
+       message to the `/chatbot` endpoint defined in ``app.py``.  Both user
+       and bot messages are appended to the conversation pane with simple
+       styling defined below.  Jinja's ``url_for`` helper is used to
+       dynamically generate the correct path to the endpoint at render time.
+    #}
+    <script type="text/javascript">
+      function toggleChatbot() {
         const box = document.getElementById('chatbot-box');
         if (!box) return;
+        // Toggle between flex (visible) and none (hidden)
         box.style.display = (box.style.display === 'flex') ? 'none' : 'flex';
-    }
+      }
 
-    function sendChat(event) {
+      function sendChat(event) {
         if (event.key === 'Enter') {
-            event.preventDefault();
-            const input = document.getElementById('chat-input');
-            const message = input.value.trim();
-            if (!message) return;
-            
-            appendChatMessage(message, 'user');
-            input.value = '';
-            
-            // Show typing indicator
-            const typingIndicator = appendChatMessage('...', 'bot');
-            
-            fetch("{{ url_for('chatbot_endpoint') }}", {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message: message })
-            })
-            .then(response => response.json())
+          event.preventDefault();
+          const input = document.getElementById('chat-input');
+          const message = input.value.trim();
+          if (!message) return;
+          appendChatMessage(message, 'user');
+          input.value = '';
+          fetch("{{ url_for('chatbot_endpoint') }}", {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: message })
+          }).then(response => response.json())
             .then(data => {
-                // Remove typing indicator
-                typingIndicator.remove();
-                
-                if (data.response) {
-                    appendChatMessage(data.response, 'bot');
-                } else {
-                    appendChatMessage(data.error || 'Error occurred.', 'bot');
-                }
-            })
-            .catch(() => {
-                typingIndicator.remove();
-                appendChatMessage('Network error. Please try again.', 'bot');
+              if (data.response) {
+                appendChatMessage(data.response, 'bot');
+              } else {
+                appendChatMessage(data.error || 'Error occurred.', 'bot');
+              }
+            }).catch(() => {
+              appendChatMessage('Network error.', 'bot');
             });
         }
-    }
+      }
 
-    function appendChatMessage(text, sender) {
+      function appendChatMessage(text, sender) {
         const container = document.getElementById('chat-messages');
         if (!container) return;
-        
         const wrapper = document.createElement('div');
         wrapper.className = sender === 'user' ? 'user-message' : 'bot-message';
-        
         const bubble = document.createElement('div');
         bubble.className = sender === 'user' ? 'user-bubble' : 'bot-bubble';
         bubble.textContent = text;
-        
         wrapper.appendChild(bubble);
         container.appendChild(wrapper);
         container.scrollTop = container.scrollHeight;
-        
-        return wrapper;
-    }
-
-    // Close mobile menu when clicking outside
-    document.addEventListener('click', function(event) {
-        const menu = document.getElementById('nav-menu');
-        const toggle = document.querySelector('.mobile-menu-toggle');
-        
-        if (!menu.contains(event.target) && !toggle.contains(event.target)) {
-            menu.classList.remove('show');
-        }
-    });
-</script>
+      }
+    </script>
+    <style>
+      /* Chat message styling for user and bot */
+      #chat-messages .user-message {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 8px;
+      }
+      #chat-messages .bot-message {
+        display: flex;
+        justify-content: flex-start;
+        margin-bottom: 8px;
+      }
+      #chat-messages .user-bubble {
+        background-color: #4caf50;
+        color: #ffffff;
+        padding: 8px 12px;
+        border-radius: 12px;
+        max-width: 80%;
+        word-wrap: break-word;
+      }
+      #chat-messages .bot-bubble {
+        background-color: #f1f0f0;
+        color: #000000;
+        padding: 8px 12px;
+        border-radius: 12px;
+        max-width: 80%;
+        word-wrap: break-word;
+      }
+    </style>
 </body>
-</html>
+</html>

backend/templates/my_applications.html

@@ -4,9 +4,9 @@
 
 {% block content %}
 <section class="content-section">
-    <div class="section-header">
+    <div class="section-title">
         <h2>My Applications</h2>
-        <p>Track and manage your job applications</p>
+        <p>Your submitted job applications are listed below.</p>
     </div>
 
     <ul class="breadcrumbs">
@@ -14,525 +14,120 @@
         <li>My Applications</li>
     </ul>
 
-    <!-- Interview Guidelines Section -->
-    <div class="interview-guidelines">
-        <div class="guidelines-header">
-            <h3><span class="icon">🎯</span> Important Interview Guidelines</h3>
-        </div>
-        <div class="guidelines-content">
-            <div class="guideline-item">
-                <span class="guideline-icon">⚡</span>
-                <div class="guideline-text">
-                    <strong>One-time opportunity:</strong> The interview can be taken only once, so please be well-prepared.
-                </div>
-            </div>
-            <div class="guideline-item">
-                <span class="guideline-icon">🎧</span>
-                <div class="guideline-text">
-                    <strong>Environment:</strong> Ensure you're in a quiet space with a stable internet connection.
-                </div>
-            </div>
-            <div class="guideline-item">
-                <span class="guideline-icon">📋</span>
-                <div class="guideline-text">
-                    <strong>Purpose:</strong> This helps companies shortlist the most relevant candidates for the role.
-                </div>
-            </div>
-            <div class="guideline-item">
-                <span class="guideline-icon">🎯</span>
-                <div class="guideline-text">
-                    <strong>Customization:</strong> Questions are tailored based on your CV and job requirements.
-                </div>
-            </div>
-            <div class="guideline-item">
-                <span class="guideline-icon">⏱️</span>
-                <div class="guideline-text">
-                    <strong>Duration:</strong> 10-15 minutes including general and skill-based questions.
-                </div>
-            </div>
-        </div>
+    <!-- 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>
 
-    <!-- Applications Grid -->
-    <div class="applications-container">
+    <div class="application-list">
         {% if applications %}
-            <div class="applications-grid">
-                {% for application in applications %}
-                    <div class="application-card" data-status="{{ application.status }}">
-                        <div class="card-status-badge status-{{ application.status.lower().replace(' ', '-') }}">
-                            {{ application.status }}
-                        </div>
-                        
-                        <div class="application-header">
-                            <h3>{{ application.job.role if application.job else 'Unknown Role' }}</h3>
-                            <div class="company-info">
-                                <span class="company-name">{{ application.job.company if application.job else '' }}</span>
-                                {% if application.job and application.job.location %}
-                                    <span class="location">📍 {{ application.job.location }}</span>
-                                {% endif %}
-                            </div>
-                        </div>
-                        
-                        <div class="application-body">
-                            <div class="application-meta">
-                                <span class="meta-item">
-                                    <i class="icon">📅</i>
-                                    Applied {{ application.date_applied.strftime('%B %d, %Y') }}
-                                </span>
-                                {% if application.job and application.job.seniority %}
-                                    <span class="meta-item">
-                                        <i class="icon">💼</i>
-                                        {{ application.job.seniority }}
-                                    </span>
-                                {% endif %}
-                            </div>
-                            
-                            {% if application.job %}
-                                <p class="job-description">
-                                    {{ application.job.description[:150] }}{% if application.job.description|length > 150 %}...{% endif %}
-                                </p>
-                            {% endif %}
-                        </div>
-                        
-                        <div class="application-footer">
-                            {% if application.job %}
-                                <a href="{{ url_for('job_detail', job_id=application.job.id) }}" class="btn btn-outline btn-sm">
-                                    <span class="btn-icon">👁️</span> View Job
-                                </a>
-                            {% endif %}
-                            
-                            {% if application.extracted_features %}
-                                <a href="{{ url_for('interview_page', job_id=application.job.id) }}" class="btn btn-primary btn-sm">
-                                    <span class="btn-icon">🎤</span> Take Interview
-                                </a>
-                            {% endif %}
+            {% for application in applications %}
+                <div class="application-card">
+                    <div class="application-header">
+                        <h3>{{ application.job.role if application.job else 'Unknown Role' }}</h3>
+                        <div class="application-info">
+                            <span>{{ application.job.company if application.job else '' }}</span>
+                            <span>Status: {{ application.status }}</span>
                         </div>
                     </div>
-                {% endfor %}
-            </div>
+                    <div class="application-body">
+                        <p>Applied on {{ application.date_applied.strftime('%B %d, %Y') }}</p>
+                        {% if application.job %}
+                            <p>{{ application.job.description[:150] }}{% if application.job.description|length > 150 %}...{% endif %}</p>
+                        {% endif %}
+                    </div>
+                    <div class="application-footer">
+                        {% if application.job %}
+                            <a href="{{ url_for('job_detail', job_id=application.job.id) }}" class="btn btn-outline">View Job</a>
+                        {% endif %}
+                        {% if application.extracted_features %}
+                            <!-- Offer to take the interview if CV data exists -->
+                            <a href="{{ url_for('interview_page', job_id=application.job.id) }}" class="btn btn-primary">Take Interview</a>
+                        {% endif %}
+                    </div>
+                </div>
+            {% endfor %}
         {% else %}
-            <div class="empty-state">
-                <div class="empty-state-icon">📋</div>
-                <h3>No Applications Yet</h3>
-                <p>You haven't applied to any jobs yet. Start exploring opportunities!</p>
-                <a href="{{ url_for('jobs') }}" class="btn btn-primary">
-                    <span class="btn-icon">🔍</span> Browse Jobs
-                </a>
+            <div class="card">
+                <div class="card-body">
+                    <p>You haven't applied to any jobs yet. Browse available positions on the <a href="{{ url_for('jobs') }}">jobs page</a>.</p>
+                </div>
             </div>
         {% endif %}
     </div>
-
-    <!-- Stats Section -->
-    {% if applications %}
-    <div class="applications-stats">
-        <div class="stat-card">
-            <div class="stat-number">{{ applications|length }}</div>
-            <div class="stat-label">Total Applications</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-number">{{ applications|selectattr('status', 'equalto', 'pending')|list|length }}</div>
-            <div class="stat-label">Pending Review</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-number">{{ applications|selectattr('extracted_features')|list|length }}</div>
-            <div class="stat-label">Ready for Interview</div>
-        </div>
-    </div>
-    {% endif %}
 </section>
 
 <style>
-/* Section Header */
-.section-header {
-    text-align: center;
-    margin-bottom: 3rem;
-}
-
-.section-header h2 {
-    font-size: 2.5rem;
-    color: var(--primary);
-    margin-bottom: 0.5rem;
-    position: relative;
-    display: inline-block;
-}
-
-.section-header h2::after {
-    content: '';
-    position: absolute;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80px;
-    height: 3px;
-    background: linear-gradient(to right, var(--primary), var(--accent));
-}
-
-.section-header p {
-    color: #666;
-    font-size: 1.1rem;
-}
-
-/* Interview Guidelines */
-.interview-guidelines {
-    background: linear-gradient(135deg, #f5f7ff 0%, #e8ecff 100%);
-    border-radius: 12px;
-    padding: 2rem;
-    margin: 2rem 0;
-    box-shadow: 0 5px 15px rgba(67, 97, 238, 0.1);
-    border: 1px solid rgba(67, 97, 238, 0.1);
-}
-
-.guidelines-header {
-    margin-bottom: 1.5rem;
-}
-
-.guidelines-header h3 {
-    color: var(--primary);
-    font-size: 1.5rem;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.guidelines-header .icon {
-    font-size: 1.75rem;
-}
-
-.guidelines-content {
-    display: grid;
-    gap: 1rem;
-}
-
-.guideline-item {
-    display: flex;
-    align-items: flex-start;
-    gap: 1rem;
-    padding: 0.75rem;
-    background: white;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-}
-
-.guideline-item:hover {
-    transform: translateX(5px);
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
-}
-
-.guideline-icon {
-    font-size: 1.5rem;
-    min-width: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.guideline-text {
-    flex: 1;
-    line-height: 1.6;
-}
-
-.guideline-text strong {
-    color: var(--primary);
-}
-
-/* Applications Container */
-.applications-container {
-    margin: 3rem 0;
-}
-
-/* Applications Grid */
-.applications-grid {
+.application-list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 1.5rem;
 }
 
-/* Application Card */
 .application-card {
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
-    position: relative;
-    transition: all 0.3s ease;
-    overflow: hidden;
+    background-color: var(--light);
+    border: 1px solid #eee;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
     display: flex;
     flex-direction: column;
-}
-
-.application-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
-}
-
-/* Status Badge */
-.card-status-badge {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding: 0.25rem 0.75rem;
-    border-radius: 20px;
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.status-pending {
-    background-color: #fff3cd;
-    color: #856404;
-}
-
-.status-approved {
-    background-color: #d4edda;
-    color: #155724;
-}
-
-.status-rejected {
-    background-color: #f8d7da;
-    color: #721c24;
-}
-
-.status-interview-scheduled {
-    background-color: #d1ecf1;
-    color: #0c5460;
-}
-
-/* Application Header */
-.application-header {
-    padding: 1.5rem 1.5rem 0;
+    justify-content: space-between;
+    padding: 1rem;
 }
 
 .application-header h3 {
+    margin-bottom: 0.5rem;
     color: var(--primary);
-    margin: 0 0 0.5rem 0;
-    font-size: 1.5rem;
 }
 
-.company-info {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    color: #666;
-    font-size: 0.95rem;
-}
-
-.company-name {
-    font-weight: 600;
+.application-info span {
+    margin-right: 1rem;
     color: var(--dark);
+    font-weight: 500;
 }
 
-/* Application Body */
-.application-body {
-    padding: 1rem 1.5rem;
-    flex: 1;
-}
-
-.application-meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    margin-bottom: 1rem;
-    font-size: 0.9rem;
-    color: #666;
-}
-
-.meta-item {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-.meta-item .icon {
-    font-size: 1rem;
-}
-
-.job-description {
-    color: #495057;
-    line-height: 1.6;
-    margin: 0;
-}
-
-/* Application Footer */
 .application-footer {
-    padding: 0 1.5rem 1.5rem;
+    margin-top: 1rem;
     display: flex;
-    gap: 0.75rem;
-    flex-wrap: wrap;
-}
-
-.btn-sm {
-    padding: 0.5rem 1rem;
-    font-size: 0.9rem;
-}
-
-/* Empty State */
-.empty-state {
-    text-align: center;
-    padding: 4rem 2rem;
-    background: #f8f9fa;
-    border-radius: 12px;
-    border: 2px dashed #dee2e6;
-}
-
-.empty-state-icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-    opacity: 0.5;
-}
-
-.empty-state h3 {
-    color: var(--primary);
-    margin-bottom: 0.5rem;
-}
-
-.empty-state p {
-    color: #666;
-    margin-bottom: 2rem;
-}
-
-/* Stats Section */
-.applications-stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1.5rem;
-    margin-top: 3rem;
+    justify-content: flex-end;
+    gap: 0.5rem;
 }
 
-.stat-card {
-    background: white;
+/* 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;
-    border-radius: 12px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
-    text-align: center;
-    transition: all 0.3s ease;
-}
-
-.stat-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+    margin: 2rem 0;
+    border-radius: 8px;
 }
-
-.stat-number {
-    font-size: 2.5rem;
-    font-weight: 700;
+.tips-section h3 {
+    margin-top: 0;
     color: var(--primary);
-    margin-bottom: 0.5rem;
-}
-
-.stat-label {
-    color: #666;
-    font-size: 1rem;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .section-header h2 {
-        font-size: 2rem;
-    }
-    
-    .interview-guidelines {
-        padding: 1.5rem;
-    }
-    
-    .guidelines-header h3 {
-        font-size: 1.25rem;
-    }
-    
-    .guideline-item {
-        padding: 0.5rem;
-    }
-    
-    .guideline-icon {
-        font-size: 1.25rem;
-    }
-    
-    .applications-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .application-card {
-        margin-bottom: 1rem;
-    }
-    
-    .applications-stats {
-        grid-template-columns: 1fr;
-    }
-    
-    .stat-card {
-        padding: 1.5rem;
-    }
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
 }
-
-@media (max-width: 480px) {
-    .company-info {
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-    
-    .application-meta {
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-    
-    .application-footer {
-        flex-direction: column;
-    }
-    
-    .application-footer .btn {
-        width: 100%;
-        justify-content: center;
-    }
+.tips-section ul {
+    margin-left: 1rem;
+    padding-left: 1rem;
+    list-style-type: disc;
+    line-height: 1.6;
 }
-
-/* Loading Animation */
-@keyframes shimmer {
-    0% {
-        background-position: -1000px 0;
-    }
-    100% {
-        background-position: 1000px 0;
+@media (max-width: 600px) {
+    .tips-section {
+        padding: 1rem;
     }
 }
-
-.loading {
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 1000px 100%;
-    animation: shimmer 2s infinite;
-}
 </style>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Add animation to cards on page load
-    const cards = document.querySelectorAll('.application-card');
-    cards.forEach((card, index) => {
-        setTimeout(() => {
-            card.style.opacity = '0';
-            card.style.transform = 'translateY(20px)';
-            card.style.animation = 'fadeInUp 0.5s ease forwards';
-        }, index * 100);
-    });
-    
-    // Filter functionality (if needed in future)
-    const statusBadges = document.querySelectorAll('.card-status-badge');
-    statusBadges.forEach(badge => {
-        badge.addEventListener('click', function() {
-            const status = this.textContent.trim();
-            // Add filter logic here if needed
-        });
-    });
-});
-
-// Animation keyframes
-const style = document.createElement('style');
-style.textContent = `
-    @keyframes fadeInUp {
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-`;
-document.head.appendChild(style);
-</script>
-{% endblock %}
+{% endblock %}