Refactor jobs.html for updated layout and functionality

simpaticohr · web-flow · commit d6483fd6bda7 · 2026-01-04T11:01:54.000+05:30
diff --git a/jobs.html b/jobs.html
@@ -1,46 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Elevate Your Career | Simpatico HR</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Current Openings | Simpatico HR</title>
     <link rel="stylesheet" href="CSS/style.css">
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
     <style>
-        /* This removes the boring white background */
-        body {
-            background: linear-gradient(135deg, #0a0a1a 0%, #001a33 100%);
-            color: white;
-            min-height: 100vh;
-        }
-
-        /* This creates a professional 'Glass' card for the form */
-        .glass-container {
-            max-width: 900px;
-            margin: -80px auto 60px; /* Pulls the form up into the banner area */
-            padding: 30px;
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(15px);
-            border-radius: 24px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
-            z-index: 10;
-            position: relative;
-        }
-
-        iframe {
-            width: 100%;
-            height: 1800px;
-            border-radius: 12px;
-            background: #ffffff; /* Contrast so the form is easy to read */
-            border: none;
-        }
+        .job-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 40px 20px; max-width: 1200px; margin: auto; }
+        .job-card { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-left: 5px solid #007bff; }
+        .job-card h3 { margin-bottom: 10px; color: #333; }
+        .job-card p { font-size: 0.9rem; color: #666; margin-bottom: 15px; }
+        .apply-btn { display: inline-block; background: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 6px; font-weight: bold; }
     </style>
 </head>
 <body>
-
     <nav>
         <div class="nav-inner">
-            <a href="index.html" class="logo-link">Simpatico HR</a>
+            <div class="logo"><strong style="font-size: 1.6rem; color: #007bff;">Simpatico HR</strong></div>
             <ul class="nav-links">
                 <li><a href="index.html">Home</a></li>
                 <li><a href="about.html">About</a></li>
@@ -50,22 +27,47 @@
         </div>
     </nav>
 
-    <header class="page-banner" style="height: 60vh;">
-        <h1>Elevate Your Career</h1>
-        <p>Apply to Simpatico HR Consultancy</p>
+    <header class="page-banner-small">
+        <h1>Current Job Openings</h1>
+        <p>Find your next global opportunity</p>
     </header>
 
-    <div class="glass-container">
-        <iframe 
-            src="https://docs.google.com/forms/d/e/1FAIpQLSdB_kE4VNDfxRINcg125miaAo-v-vBNnGW7TuXWPzAribpLwQ/viewform?embedded=true">
-            Loading…
-        </iframe>
+    <div id="jobList" class="job-grid">
+        <p>Loading jobs...</p>
     </div>
 
-    <footer>
-        <p>&copy; 2026 Simpatico HR Consultancy. All rights reserved.</p>
-    </footer>
+    <script>
+        const SUPABASE_URL = "https://cvkxtsvgnynxexmemfuy.supabase.co";
+        const SUPABASE_ANON_KEY = "sb_publishable_DGT-x86M-BwI4zA7S_97CA_3v3O3b0A";
+        const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+        async function fetchJobs() {
+            const { data: jobs, error } = await supabase
+                .from('jobs')
+                .select('*')
+                .eq('is_active', true);
+
+            const container = document.getElementById('jobList');
+            container.innerHTML = '';
 
+            if (error || !jobs.length) {
+                container.innerHTML = '<p>No active openings at the moment. Please check back soon!</p>';
+                return;
+            }
+
+            jobs.forEach(job => {
+                container.innerHTML += `
+                    <div class="job-card">
+                        <h3>${job.title}</h3>
+                        <p><strong>Location:</strong> ${job.location || 'Remote / Global'}</p>
+                        <p>${job.description ? job.description.substring(0, 100) + '...' : 'Click apply to view details.'}</p>
+                        <a href="apply.html?job_id=${job.id}" class="apply-btn">Apply Now</a>
+                    </div>
+                `;
+            });
+        }
+        fetchJobs();
+    </script>
 </body>
 </html>
 
