bueaty now edit to mvp 3 functional features that save actual human struggle time

README.md

@@ -1,10 +1,13 @@
 ---
-title: Career Command Center
-emoji: 🌍
-colorFrom: pink
-colorTo: purple
+title: Career Command Center 🚀
+colorFrom: yellow
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,86 @@
+class FooterWarrior extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background: #020617;
+                    padding: 4rem 1.5rem;
+                    border-top: 1px solid rgba(255,255,255,0.05);
+                    margin-top: auto;
+                }
+                .container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                }
+                .grid {
+                    display: grid;
+                    grid-template-columns: 1fr;
+                    gap: 2rem;
+                }
+                @media (min-width: 768px) {
+                    .grid {
+                        grid-template-columns: 2fr 1fr 1fr;
+                    }
+                }
+                h3 {
+                    color: #f8fafc;
+                    font-size: 1.1rem;
+                    margin-bottom: 1rem;
+                    font-weight: 600;
+                }
+                p {
+                    color: #64748b;
+                    line-height: 1.6;
+                    font-size: 0.9rem;
+                }
+                .link {
+                    display: block;
+                    color: #64748b;
+                    text-decoration: none;
+                    margin-bottom: 0.75rem;
+                    font-size: 0.9rem;
+                }
+                .link:hover {
+                    color: #6366f1;
+                }
+                .copyright {
+                    margin-top: 3rem;
+                    padding-top: 1.5rem;
+                    border-top: 1px solid rgba(255,255,255,0.05);
+                    text-align: center;
+                    color: #475569;
+                    font-size: 0.85rem;
+                }
+            </style>
+            <div class="container">
+                <div class="grid">
+                    <div>
+                        <h3>About Wage Warrior</h3>
+                        <p>
+                            We believe in testing your worth constantly. If you are doing more for less, 
+                            you are in the wrong place. We provide the data to arm yourself for the negotiation table 
+                            or the exit door.
+                        </p>
+                    </div>
+                    <div>
+                        <h3>Tools</h3>
+                        <a href="#calculator" class="link">Salary Gap Calculator</a>
+                        <a href="#framework" class="link">Negotiation Pseudocode</a>
+                        <a href="#jobs" class="link">Market Scanner</a>
+                    </div>
+                    <div>
+                        <h3>Legal</h3>
+                        <a href="#" class="link">Privacy Protocol</a>
+                        <a href="#" class="link">Terms of Engagement</a>
+                    </div>
+                </div>
+                <div class="copyright">
+                    &copy; 2023 Wage Warrior. Don't settle.
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('footer-warrior', FooterWarrior);

components/job-card.js

@@ -0,0 +1,154 @@
+class JobCard extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        
+        // Get attributes
+        const title = this.getAttribute('title') || 'Unknown Role';
+        const company = this.getAttribute('company') || 'Unknown Corp';
+        const salary = this.getAttribute('salary') || 'Competitive';
+        const type = this.getAttribute('type') || 'Full-time';
+        const url = this.getAttribute('url') || '#';
+        const category = this.getAttribute('category') || 'General';
+        const isSaved = this.getAttribute('saved') === 'true';
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                }
+                .card {
+                    background: #1e293b;
+                    border: 1px solid #334155;
+                    border-radius: 0.75rem;
+                    padding: 1.5rem;
+                    transition: transform 0.2s, box-shadow 0.2s;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    height: 100%;
+                    position: relative;
+                }
+                .card:hover {
+                    transform: translateY(-5px);
+                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+                    border-color: #6366f1;
+                }
+                .cat-tag {
+                    display: inline-block;
+                    background: rgba(99, 102, 241, 0.1);
+                    color: #818cf8;
+                    padding: 0.25rem 0.75rem;
+                    border-radius: 9999px;
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                    text-transform: uppercase;
+                    margin-bottom: 0.75rem;
+                }
+                h3 {
+                    color: #f1f5f9;
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    margin: 0 0 0.5rem 0;
+                    line-height: 1.4;
+                    padding-right: 2rem;
+                }
+                .company {
+                    color: #94a3b8;
+                    font-size: 0.9rem;
+                    margin-bottom: 1.5rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                .meta {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    font-size: 0.85rem;
+                    color: #cbd5e1;
+                    padding-top: 1rem;
+                    border-top: 1px solid #334155;
+                }
+                .salary {
+                    color: #10b981;
+                    font-weight: 600;
+                }
+                .btn {
+                    color: #6366f1;
+                    text-decoration: none;
+                    font-weight: 600;
+                    font-size: 0.9rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.25rem;
+                }
+                .btn:hover {
+                    text-decoration: underline;
+                }
+                .save-btn {
+                    position: absolute;
+                    top: 1.25rem;
+                    right: 1.25rem;
+                    background: rgba(15, 23, 42, 0.5);
+                    border: 1px solid #334155;
+                    color: ${isSaved ? '#ef4444' : '#94a3b8'};
+                    border-radius: 50%;
+                    width: 36px;
+                    height: 36px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                }
+                .save-btn:hover {
+                    background: #ef4444;
+                    color: white;
+                    border-color: #ef4444;
+                }
+                .save-btn.active {
+                    background: #ef4444;
+                    color: white;
+                    border-color: #ef4444;
+                }
+            </style>
+            <div class="card">
+                <div>
+                    <button class="save-btn ${isSaved ? 'active' : ''}" id="saveBtn">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="${isSaved ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                    </button>
+                    <span class="cat-tag">${category}</span>
+                    <h3>${title}</h3>
+                    <div class="company">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
+                        ${company}
+                    </div>
+                </div>
+                <div>
+                    <div class="meta">
+                        <span class="salary">${salary}</span>
+                        <span>${type}</span>
+                    </div>
+                    <a href="${url}" target="_blank" class="btn">
+                        Apply Now 
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
+                    </a>
+                </div>
+            </div>
+        `;
+
+        const saveBtn = this.shadowRoot.getElementById('saveBtn');
+        saveBtn.addEventListener('click', () => {
+            const eventData = { title, company, salary, type, url, category };
+            
+            // Dispatch event to parent script.js
+            const eventName = isSaved ? 'job-removed' : 'job-saved';
+            this.dispatchEvent(new CustomEvent(eventName, { 
+                bubbles: true, 
+                composed: true, 
+                detail: isSaved ? { id: url } : eventData 
+            }));
+        });
+    }
+}
+customElements.define('job-card', JobCard);

components/navbar.js

@@ -0,0 +1,74 @@
+class NavbarWarrior extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    background: rgba(15, 23, 42, 0.9);
+                    backdrop-filter: blur(12px);
+                    position: fixed;
+                    top: 0;
+                    z-index: 50;
+                    border-bottom: 1px solid rgba(255,255,255,0.05);
+                }
+                nav {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 1rem 1.5rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .logo {
+                    font-weight: 800;
+                    font-size: 1.25rem;
+                    color: #ffffff;
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    letter-spacing: -0.025em;
+                }
+                .logo span {
+                    color: #6366f1;
+                }
+                .nav-links {
+                    display: none;
+                }
+                .nav-link {
+                    color: #94a3b8;
+                    text-decoration: none;
+                    margin-left: 2rem;
+                    font-size: 0.95rem;
+                    font-weight: 500;
+                    transition: color 0.2s;
+                }
+                .nav-link:hover {
+                    color: #fff;
+                }
+                .nav-link.active {
+                    color: #10b981;
+                }
+                @media (min-width: 768px) {
+                    .nav-links {
+                        display: block;
+                    }
+                }
+            </style>
+            <nav>
+                <a href="#" class="logo">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary-500"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    Wage<span>Warrior</span>
+                </a>
+                <div class="nav-links">
+                    <a href="#framework" class="nav-link">Framework</a>
+                    <a href="#calculator" class="nav-link">Calculator</a>
+                    <a href="#jobs" class="nav-link">Hunt Jobs</a>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('nav-warrior', NavbarWarrior);

components/salary-calculator.js

@@ -0,0 +1,243 @@
+class SalaryCalculator extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                .card {
+                    background: #1e293b;
+                    border-radius: 1rem;
+                    padding: 2rem;
+                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+                    border: 1px solid rgba(255,255,255,0.05);
+                }
+                .form-grid {
+                    display: grid;
+                    grid-template-columns: 1fr;
+                    gap: 1.5rem;
+                    margin-bottom: 2rem;
+                }
+                @media (min-width: 768px) {
+                    .form-grid {
+                        grid-template-columns: 1fr 1fr;
+                    }
+                }
+                label {
+                    display: block;
+                    color: #94a3b8;
+                    margin-bottom: 0.5rem;
+                    font-size: 0.9rem;
+                }
+                input, select {
+                    width: 100%;
+                    background: #0f172a;
+                    border: 1px solid #334155;
+                    color: white;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    font-size: 1rem;
+                    box-sizing: border-box;
+                }
+                input:focus, select:focus {
+                    outline: none;
+                    border-color: #6366f1;
+                    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+                }
+                .btn {
+                    width: 100%;
+                    background: #10b981;
+                    color: white;
+                    border: none;
+                    padding: 1rem;
+                    border-radius: 0.5rem;
+                    font-weight: bold;
+                    font-size: 1rem;
+                    cursor: pointer;
+                    transition: background 0.2s;
+                }
+                .btn:hover {
+                    background: #059669;
+                }
+                .result {
+                    margin-top: 2rem;
+                    padding: 1.5rem;
+                    background: #0f172a;
+                    border-radius: 0.5rem;
+                    border-left: 4px solid #6366f1;
+                    display: none;
+                }
+                .result.active {
+                    display: block;
+                    animation: fadeIn 0.5s ease;
+                }
+                h4 {
+                    margin: 0 0 0.5rem 0;
+                    color: #e2e8f0;
+                }
+                .value {
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                }
+                .value.positive { color: #10b981; }
+                .value.negative { color: #ef4444; }
+                .desc {
+                    font-size: 0.9rem;
+                    color: #94a3b8;
+                    margin-top: 0.5rem;
+                }
+                @keyframes fadeIn {
+                    from { opacity: 0; transform: translateY(10px); }
+                    to { opacity: 1; transform: translateY(0); }
+                }
+            </style>
+            
+            <div class="card">
+                <h3 style="color: white; font-size: 1.25rem; margin-bottom: 1.5rem;">Underpayment Analysis</h3>
+                <div class="form-grid">
+                    <div>
+                        <label>Your Annual Salary ($)</label>
+                        <input type="number" id="mySalary" placeholder="e.g. 65000">
+                    </div>
+                    <div>
+                        <label>Industry Average for Role ($)</label>
+                        <input type="number" id="marketSalary" placeholder="e.g. 85000">
+                    </div>
+                    <div>
+                        <label>Peer Salary (Lazy Coworker) ($)</label>
+                        <input type="number" id="peerSalary" placeholder="e.g. 90000">
+                    </div>
+                    <div>
+                        <label>Respect Level at Work</label>
+                        <select id="respectLevel">
+                            <option value="high">High (Valued)</option>
+                            <option value="medium">Medium (Ignored)</option>
+                            <option value="low">Low (Disrespected)</option>
+                        </select>
+                    </div>
+                </div>
+                <button class="btn" id="calcBtn">Analyze Worth</button>
+                <div class="result" id="resultBox">
+                    <h4>Analysis Result</h4>
+                    <div class="value" id="gapValue"></div>
+                    <p class="desc" id="adviceText"></p>
+                    
+                    <!-- Feature 2: Email Generator -->
+                    <div style="margin-top: 1.5rem; border-top: 1px solid #334155; padding-top: 1rem;">
+                        <button id="genEmailBtn" style="background: #4f46e5; color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                            Generate Negotiation Email
+                        </button>
+                        <textarea id="emailDraft" readonly style="width: 100%; background: #0f172a; border: 1px solid #334155; color: #cbd5e1; padding: 0.75rem; border-radius: 0.5rem; font-size: 0.85rem; font-family: monospace; resize: vertical; min-height: 120px; display: none;"></textarea>
+                    </div>
+                </div>
+</div>
+        `;
+
+        const btn = this.shadowRoot.getElementById('calcBtn');
+        btn.addEventListener('click', () => this.calculate());
+    }
+
+    calculate() {
+        const mySalary = parseFloat(this.shadowRoot.getElementById('mySalary').value) || 0;
+        const marketSalary = parseFloat(this.shadowRoot.getElementById('marketSalary').value) || 0;
+        const peerSalary = parseFloat(this.shadowRoot.getElementById('peerSalary').value) || 0;
+        const respect = this.shadowRoot.getElementById('respectLevel').value;
+        const resultBox = this.shadowRoot.getElementById('resultBox');
+        const gapValue = this.shadowRoot.getElementById('gapValue');
+        const adviceText = this.shadowRoot.getElementById('adviceText');
+
+        let message = "";
+        let gap = 0;
+        let colorClass = "";
+
+        // Logic: If peer makes more and does less, big issue. 
+        // If market is higher, issue.
+        
+        const peerGap = mySalary - peerSalary;
+        const marketGap = mySalary - marketSalary;
+
+        if (peerGap < 0) {
+            gap = Math.abs(peerGap);
+            message = "Your lazy peer makes $" + gap.toLocaleString() + " more than you. This is unacceptable.";
+            colorClass = "negative";
+        } else if (marketGap < 0) {
+            gap = Math.abs(marketGap);
+            message = "The market pays $" + gap.toLocaleString() + " more for your role.";
+            colorClass = "negative";
+        } else {
+            gap = peerGap; // Positive
+            message = "You are doing surprisingly well financially.";
+            colorClass = "positive";
+        }
+
+        // Respect modifier
+        if (respect === 'low' && colorClass === 'negative') {
+            message += " Combined with the disrespect, you should leave immediately.";
+        }
+
+        gapValue.textContent = (colorClass === 'negative' ? "-$" : "+$") + gap.toLocaleString();
+        gapValue.className = "value " + colorClass;
+        adviceText.textContent = message;
+
+        // Setup Email Generator Button
+        const genBtn = this.shadowRoot.getElementById('genEmailBtn');
+        genBtn.style.display = 'flex';
+        genBtn.onclick = () => {
+            const draftArea = this.shadowRoot.getElementById('emailDraft');
+            draftArea.style.display = 'block';
+            draftArea.value = this.generateEmailDraft(gap, colorClass, respect);
+            genBtn.textContent = 'Email Draft Ready';
+            genBtn.disabled = true;
+            genBtn.style.opacity = '0.7';
+        };
+
+        resultBox.classList.add('active');
+    }
+
+    generateEmailDraft(gap, type, respect) {
+        const date = new Date().toLocaleDateString();
+        if (type === 'positive' && gap > 5000) {
+            return `Subject: Performance Review & Compensation Adjustment
+
+Hi [Manager's Name],
+
+I hope you're having a great week.
+
+I've been reflecting on my contributions over the past year, specifically regarding [Project X] and [Project Y]. 
+
+Based on current market data and my performance metrics, I believe my compensation is no longer aligned with the value I'm bringing to the team. The market rate for my role is approximately ${gap.toLocaleString()} higher than my current salary.
+
+I would love to discuss adjusting my salary to reflect these contributions. I'm committed to the team's success and want to ensure we are aligned on my value here.
+
+Can we schedule a brief time to chat this week?
+
+Best,
+[Your Name]`;
+        } else if (type === 'negative') {
+             return `Subject: Resignation - [Your Name]
+
+Dear [Manager's Name],
+
+Please accept this letter as formal notification that I am resigning from my position as [Your Position]. My last day will be [Date].
+
+I appreciate the opportunities I've had here, but I have accepted a position that offers a compensation package better aligned with my market value and professional growth.
+
+I will do everything possible to wrap up my duties and train other team members during the transition period.
+
+Best regards,
+[Your Name]`;
+        }
+        return `Subject: Career Development Discussion
+
+Hi [Manager's Name],
+
+I'd like to schedule a time to discuss my career path and future goals with the company.
+
+Best,
+[Your Name]`;
+    }
+}
+customElements.define('salary-calculator', SalaryCalculator);

index.html

@@ -1,19 +1,201 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wage Warrior 💸 | Hunt Your Worth</title>
+    <link rel="icon" type="image/x-icon" href="https://cdn-icons-png.flaticon.com/512/3135/3135715.png">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    
+    <!-- Custom Config for "Undefined" Colors mapped to Indigo/Emerald -->
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6366f1', // Indigo-500
+                            600: '#4f46e5', // Indigo-600
+                            900: '#312e81', // Indigo-900
+                        },
+                        secondary: {
+                            500: '#10b981', // Emerald-500
+                            600: '#059669', // Emerald-600
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+
+    <!-- Web Components -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/salary-calculator.js"></script>
+    <script src="components/job-card.js"></script>
+</head>
+<body class="bg-slate-950 text-slate-200 font-sans antialiased selection:bg-primary-500 selection:text-white">
+
+    <!-- Navbar Component -->
+    <nav-warrior></nav-warrior>
+
+    <!-- Hero Section -->
+    <header class="relative pt-20 pb-32 overflow-hidden">
+        <div class="absolute inset-0 z-0 opacity-20 bg-[url('http://static.photos/technology/1200x630/88')] bg-cover bg-center"></div>
+        <div class="absolute inset-0 z-0 bg-gradient-to-b from-slate-950/50 via-slate-950 to-slate-950"></div>
+        
+        <div class="container mx-auto px-6 relative z-10 text-center">
+            <span class="inline-block py-1 px-3 rounded-full bg-primary-900/50 border border-primary-500/30 text-primary-300 text-sm font-semibold tracking-wide mb-6 animate-pulse">
+                v2.0: Context Hungry Engine
+            </span>
+            <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-200 to-slate-400">
+                Stop Rocking the Boat. <br/>
+                <span class="text-primary-500">Sink the Ship.</span>
+            </h1>
+            <p class="text-xl md:text-2xl text-slate-400 mb-10 max-w-3xl mx-auto leading-relaxed">
+                Constantly hunt for upgrades. Stop accepting disrespect. Get paid more than the peers who do less. The ultimate tool for the unappreciated.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#calculator" class="px-8 py-4 bg-primary-600 hover:bg-primary-500 text-white font-bold rounded-lg transition-all transform hover:scale-105 shadow-lg shadow-primary-500/20 flex items-center justify-center gap-2">
+                    <i data-feather="crosshair"></i> Calculate Your Worth
+                </a>
+                <a href="#jobs" class="px-8 py-4 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white font-bold rounded-lg transition-all transform hover:scale-105 flex items-center justify-center gap-2">
+                    <i data-feather="briefcase"></i> Hunt Market Data
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Framework / Pseudocode Section -->
+    <section id="framework" class="py-20 bg-slate-900/50 border-y border-slate-800">
+        <div class="container mx-auto px-6">
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h2 class="text-3xl font-bold text-white mb-4">The Upgrade Algorithm</h2>
+                    <p class="text-slate-400 mb-6">
+                        We don't just list jobs. We provide a <strong>context-hungry framework</strong> to analyze your current position. 
+                        If your inputs meet specific criteria, the system advises an aggressive career pivot.
+                    </p>
+                    <ul class="space-y-4">
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-secondary-500 mt-1 mr-3"></i>
+                            <span class="text-slate-300">Analyze peer performance vs. your output.</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-secondary-500 mt-1 mr-3"></i>
+                            <span class="text-slate-300">Detect "Rocking the Boat" suppression tactics.</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check-circle" class="text-secondary-500 mt-1 mr-3"></i>
+                            <span class="text-slate-300">Execute the Exit Strategy Protocol.</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-slate-950 rounded-xl p-6 shadow-2xl border border-slate-800 font-mono text-sm overflow-hidden relative group">
+                    <div class="absolute top-0 right-0 p-2 opacity-50">
+                        <div class="w-3 h-3 rounded-full bg-red-500 inline-block mr-1"></div>
+                        <div class="w-3 h-3 rounded-full bg-yellow-500 inline-block mr-1"></div>
+                        <div class="w-3 h-3 rounded-full bg-green-500 inline-block"></div>
+                    </div>
+                    <pre class="text-slate-300"><code><span class="text-purple-400">function</span> <span class="text-blue-400">assessLoyalty</span>(salary, respect) {
+  <span class="text-purple-400">if</span> (salary < marketValue && respect == <span class="text-orange-400">false</span>) {
+    <span class="text-slate-500">// Stop rocking the boat</span>
+    <span class="text-purple-400">return</span> <span class="text-green-400">INITIATE_HUNT</span>;
+  }
+  <span class="text-purple-400">if</span> (peerOutput < myOutput && peerSalary > mySalary) {
+    <span class="text-slate-500">// Maximize tool use</span>
+    <span class="text-purple-400">return</span> <span class="text-red-400">RAGE_QUIT_PROBABLY</span>;
+  }
+  <span class="text-purple-400">return</span> <span class="text-slate-500">"Stay and grind (for now)"</span>;
+}</code></pre>
+                    <div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity text-xs text-primary-500">Executing...</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Salary Calculator Component -->
+    <section id="calculator" class="py-20 relative">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center mb-12">Reality Check Calculator</h2>
+            <salary-calculator></salary-calculator>
+        </div>
+    </section>
+    <!-- Job Hunter API Section -->
+    <section id="jobs" class="py-20 bg-slate-900/30">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-4">
+                <div>
+                    <h2 class="text-3xl font-bold text-white mb-2">Active Targets</h2>
+                    <p class="text-slate-400">Real-time feed from the market. Filter for upgrade opportunities.</p>
+                </div>
+                <div class="hidden md:flex items-center gap-3">
+                    <span class="flex items-center text-sm text-secondary-500 bg-secondary-900/20 px-3 py-1 rounded-full border border-secondary-500/20">
+                        <span class="w-2 h-2 bg-secondary-500 rounded-full mr-2 animate-pulse"></span>
+                        Live API Feed
+                    </span>
+                </div>
+            </div>
+
+            <!-- Feature 1: Smart Search & Filter -->
+            <div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700 mb-8 flex flex-col md:flex-row gap-4">
+                <div class="flex-grow">
+                    <label class="block text-xs text-slate-400 mb-1">Keyword Search</label>
+                    <input type="text" id="jobSearch" placeholder="e.g. React, Senior, Remote..." 
+                        class="w-full bg-slate-950 border border-slate-700 text-white px-4 py-2 rounded-lg focus:outline-none focus:border-primary-500 transition-colors">
+                </div>
+                <div class="w-full md:w-64">
+                    <label class="block text-xs text-slate-400 mb-1">Category</label>
+                    <select id="categoryFilter" class="w-full bg-slate-950 border border-slate-700 text-white px-4 py-2 rounded-lg focus:outline-none focus:border-primary-500 transition-colors">
+                        <option value="">All Categories</option>
+                        <option value="software-dev">Software Development</option>
+                        <option value="customer-support">Customer Support</option>
+                        <option value="design">Design</option>
+                        <option value="marketing">Marketing</option>
+                        <option value="product">Product</option>
+                    </select>
+                </div>
+            </div>
+<!-- Job Grid -->
+            <div id="job-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Content injected by script.js via Web Component -->
+                <div class="col-span-full text-center py-12">
+                    <i data-feather="loader" class="animate-spin mx-auto text-primary-500 mb-4"></i>
+                    <p class="text-slate-500">Scanning market for upgrades...</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Feature 3: Application Tracker (Saved Targets) -->
+    <section id="tracker" class="py-20 border-t border-slate-800">
+        <div class="container mx-auto px-6">
+            <div class="flex items-center gap-3 mb-8">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center">
+                    <i data-feather="target" class="text-white"></i>
+                </div>
+                <div>
+                    <h2 class="text-3xl font-bold text-white">My Hitlist</h2>
+                    <p class="text-slate-400 text-sm">Saved opportunities you're actively hunting.</p>
+                </div>
+            </div>
+            
+            <div id="saved-jobs-list" class="grid grid-cols-1 gap-4">
+                <!-- Saved jobs injected here -->
+                <div class="text-center py-12 bg-slate-900/50 rounded-xl border border-dashed border-slate-700">
+                    <p class="text-slate-500">No targets locked yet. Click the heart on job cards to save them.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer Component -->
+    <footer-warrior></footer-warrior>
+<script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,197 @@
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadJobs();
+    loadSavedJobs();
+    setupEventListeners();
+});
+
+// Feature 1 & 3: Global State & Event Listeners
+function setupEventListeners() {
+    const searchInput = document.getElementById('jobSearch');
+    const categorySelect = document.getElementById('categoryFilter');
+
+    searchInput.addEventListener('input', debounce(() => {
+        loadJobs(searchInput.value, categorySelect.value);
+    }, 500));
+
+    categorySelect.addEventListener('change', () => {
+        loadJobs(searchInput.value, categorySelect.value);
+    });
+
+    // Listen for save events from job cards
+    document.addEventListener('job-saved', (e) => {
+        saveJob(e.detail);
+    });
+
+    // Listen for remove events
+    document.addEventListener('job-removed', (e) => {
+        removeJob(e.detail.id);
+    });
+}
+
+// Feature 3: Save Job Logic
+function saveJob(jobData) {
+    let saved = JSON.parse(localStorage.getItem('warriorSavedJobs')) || [];
+    
+    // Avoid duplicates
+    if (saved.some(j => j.url === jobData.url)) {
+        alert('Target already in Hitlist.');
+        return;
+    }
+
+    jobData.savedAt = new Date().toISOString();
+    saved.push(jobData);
+    localStorage.setItem('warriorSavedJobs', JSON.stringify(saved));
+    loadSavedJobs(); // Refresh UI
+}
+
+function removeJob(url) {
+    let saved = JSON.parse(localStorage.getItem('warriorSavedJobs')) || [];
+    saved = saved.filter(j => j.url !== url);
+    localStorage.setItem('warriorSavedJobs', JSON.stringify(saved));
+    loadSavedJobs(); // Refresh UI
+}
+
+function loadSavedJobs() {
+    const container = document.getElementById('saved-jobs-list');
+    const saved = JSON.parse(localStorage.getItem('warriorSavedJobs')) || [];
+
+    if (saved.length === 0) {
+        container.innerHTML = `
+            <div class="text-center py-12 bg-slate-900/50 rounded-xl border border-dashed border-slate-700">
+                <p class="text-slate-500">No targets locked yet. Click the heart on job cards to save them.</p>
+            </div>`;
+        return;
+    }
+
+    container.innerHTML = '';
+    saved.forEach(job => {
+        const el = document.createElement('div');
+        el.className = 'bg-slate-800 p-4 rounded-lg border border-slate-700 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4';
+        el.innerHTML = `
+            <div class="flex-grow">
+                <h4 class="text-white font-bold">${job.title}</h4>
+                <p class="text-slate-400 text-sm">${job.company}</p>
+            </div>
+            <div class="flex items-center gap-3 w-full sm:w-auto">
+                <span class="text-xs text-slate-500 hidden sm:block">Added: ${new Date(job.savedAt).toLocaleDateString()}</span>
+                <a href="${job.url}" target="_blank" class="px-4 py-2 bg-primary-600 hover:bg-primary-500 text-white text-sm rounded-lg font-medium">Apply</a>
+                <button onclick="removeJob('${job.url}')" class="p-2 text-red-400 hover:bg-red-900/20 rounded-lg">
+                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                </button>
+            </div>
+        `;
+        container.appendChild(el);
+    });
+    feather.replace();
+}
+
+// Feature 1: Enhanced Load Jobs with Filtering
+async function loadJobs(searchTerm = '', category = '') {
+    const grid = document.getElementById('job-grid');
+    
+    // Show loading state if it's empty
+    if (grid.innerHTML.trim() === '') {
+        grid.innerHTML = `<div class="col-span-full text-center py-12"><i data-feather="loader" class="animate-spin mx-auto text-primary-500 mb-4"></i><p class="text-slate-500">Scanning market...</p></div>`;
+        feather.replace();
+    }
+    
+    try {
+        const response = await fetch('https://remotive.com/api/remote-jobs?limit=12');
+        const data = await response.json();
+        
+        grid.innerHTML = ''; 
+
+        if(data.jobs && data.jobs.length > 0) {
+            const filtered = data.jobs.filter(job => {
+                // Category Filter Logic
+                if (category && job.category !== category) return false;
+                
+                // Search Logic
+                if (searchTerm) {
+                    const term = searchTerm.toLowerCase();
+                    const title = job.title.toLowerCase();
+                    const company = job.company_name.toLowerCase();
+                    return title.includes(term) || company.includes(term);
+                }
+                return true;
+            });
+
+            if (filtered.length === 0) {
+                grid.innerHTML = '<p class="col-span-full text-center text-slate-500 py-10">No targets match your filters.</p>';
+                return;
+            }
+
+            filtered.forEach(job => {
+                // Check if already saved
+                const saved = JSON.parse(localStorage.getItem('warriorSavedJobs')) || [];
+                const isSaved = saved.some(j => j.url === job.url);
+
+                const card = document.createElement('job-card');
+                card.setAttribute('title', job.title);
+                card.setAttribute('company', job.company_name);
+                card.setAttribute('salary', job.salary || 'Competitive');
+                card.setAttribute('type', job.job_type);
+                card.setAttribute('url', job.url);
+                card.setAttribute('category', job.category);
+                card.setAttribute('saved', isSaved); // Pass state
+                
+                grid.appendChild(card);
+            });
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        grid.innerHTML = `<div class="col-span-full text-center p-6 border border-red-900/50 bg-red-900/10 rounded-lg"><p class="text-red-400">Connection lost.</p></div>`;
+    }
+}
+
+// Utility: Debounce search input
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+async function loadJobs() {
+    const grid = document.getElementById('job-grid');
+    
+    try {
+        // Using Remotive API for remote jobs (Public, No Key needed usually)
+        const response = await fetch('https://remotive.com/api/remote-jobs?limit=9');
+        const data = await response.json();
+        
+        grid.innerHTML = ''; // Clear loading state
+
+        if(data.jobs && data.jobs.length > 0) {
+            data.jobs.forEach(job => {
+                // Create a job-card element
+                const card = document.createElement('job-card');
+                
+                // Set attributes (Passing data to component)
+                card.setAttribute('title', job.title);
+                card.setAttribute('company', job.company_name);
+                card.setAttribute('salary', job.salary || 'Competitive');
+                card.setAttribute('type', job.job_type);
+                card.setAttribute('url', job.url);
+                card.setAttribute('category', job.category);
+                
+                grid.appendChild(card);
+            });
+        } else {
+            grid.innerHTML = '<p class="col-span-full text-center text-slate-500">No targets found at this moment.</p>';
+        }
+    } catch (error) {
+        console.error('Error fetching jobs:', error);
+        grid.innerHTML = `
+            <div class="col-span-full text-center p-6 border border-red-900/50 bg-red-900/10 rounded-lg">
+                <p class="text-red-400">Connection lost to the network.</p>
+                <button onclick="location.reload()" class="mt-2 text-sm underline text-slate-400">Retry</button>
+            </div>
+        `;
+    }
+}

style.css

@@ -1,28 +1,33 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
 }
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #0f172a; 
 }
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #334155; 
+    border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #475569; 
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Base transitions */
+a, button, .transition-all {
+    transition: all 0.3s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Glassmorphism utility */
+.glass {
+    background: rgba(15, 23, 42, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
 }
+
+/* Text selection handled by Tailwind, enforcing fallback */
+::selection {
+    background: #4f46e5;
+    color: white;
+}