index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Salary Predictor AI • Cosmic Portal</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Google Fonts: Space Grotesk for sci-fi look and Plus Jakarta Sans for clean reading -->
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
  
  <style>
    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: #020205;
      overflow-x: hidden;
      position: relative;
    }
    
    /* Cosmic mesh gradients representing deep space, nebula clouds, and stellar dust */
    .space-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(217, 70, 239, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
    }

    /* Twinkling star simulation background */
    .stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
      background-size: 550px 550px, 350px 350px;
      background-position: 0 0, 40px 60px;
      opacity: 0.4;
    }

    .space-title {
      font-family: 'Space Grotesk', sans-serif;
    }

    /* Custom input focus glowing shadows */
    .cosmic-input:focus {
      box-shadow: 0 0 15px rgba(217, 70, 239, 0.25);
    }

    /* Shimmer effect for the prediction outcome card */
    @keyframes pulse-border {
      0%, 100% { border-color: rgba(217, 70, 239, 0.2); }
      50% { border-color: rgba(6, 182, 212, 0.6); }
    }
    
    .glowing-result {
      animation: pulse-border 3s infinite;
    }
  </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4 sm:p-6 md:p-8 text-slate-100">

  <!-- Deep space backdrops -->
  <div class="stars"></div>
  <div class="space-bg"></div>

  <!-- Glassmorphic Container -->
  <div class="max-w-lg w-full bg-slate-950/70 backdrop-blur-xl rounded-3xl p-6 sm:p-8 border border-slate-800/80 shadow-2xl shadow-indigo-950/20 relative overflow-hidden">
    
    <!-- Decorative Ambient Glow behind card -->
    <div class="absolute -top-12 -left-12 w-32 h-32 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute -bottom-12 -right-12 w-32 h-32 bg-fuchsia-500/10 rounded-full blur-3xl pointer-events-none"></div>

    <!-- Header Section -->
    <div class="mb-8 text-center relative z-10">
      <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-900/80 border border-slate-800 text-xs font-semibold tracking-wider text-cyan-400 uppercase mb-3">
        <span class="w-2 h-2 rounded-full bg-cyan-400 animate-ping"></span>
        AI Classifier Activated
      </div>
      <h1 class="space-title text-3xl sm:text-4xl font-bold tracking-tight bg-gradient-to-r from-violet-200 via-fuchsia-300 to-cyan-200 text-transparent bg-clip-text">
        Salary Predictor AI
      </h1>
      <p class="text-slate-400 text-sm mt-2 font-light">
        Pre-process parameters and map coordinates to classify income tier
      </p>
    </div>

    <!-- Form -->
    <form id="predictionForm" class="space-y-6 relative z-10">
      
      <!-- Grid wrapper for compact fields -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        
        <!-- Age Input -->
        <div>
          <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">Age</label>
          <input type="number" name="age" min="18" max="100" value="30" required
            class="cosmic-input w-full px-4 py-3 bg-slate-900/60 border border-slate-800 rounded-xl text-slate-200 placeholder-slate-600 focus:border-fuchsia-500/80 focus:ring-1 focus:ring-fuchsia-500/30 focus:outline-none transition-all duration-300">
        </div>

        <!-- Hours Worked / Week Slider -->
        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">Hours Per Week</label>
            <span id="hoursVal" class="text-xs font-bold text-cyan-400 bg-cyan-950/40 px-2 py-0.5 rounded border border-cyan-800/40">40 hrs</span>
          </div>
          <div class="h-11 flex items-center">
            <input type="range" name="hours" min="1" max="80" value="40" id="hoursSlider"
              class="w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-fuchsia-500 hover:accent-fuchsia-400 transition-colors">
          </div>
        </div>

      </div>

      <!-- Education Level Select -->
      <div>
        <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">Education Level</label>
        <select name="education" class="cosmic-input w-full px-4 py-3 bg-slate-900/60 border border-slate-800 rounded-xl text-slate-200 focus:border-fuchsia-500/80 focus:ring-1 focus:ring-fuchsia-500/30 focus:outline-none transition-all duration-300 cursor-pointer">
          <option value="HS-grad">High School Graduate</option>
          <option value="Assoc-voc">Associate Degree / Voc</option>
          <option value="Bachelors" selected>Bachelors Degree</option>
          <option value="Masters">Masters Degree</option>
          <option value="Doctorate">Doctorate (PhD)</option>
        </select>
      </div>

      <!-- Occupation Select -->
      <div>
        <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">Occupation</label>
        <select name="occupation" class="cosmic-input w-full px-4 py-3 bg-slate-900/60 border border-slate-800 rounded-xl text-slate-200 focus:border-fuchsia-500/80 focus:ring-1 focus:ring-fuchsia-500/30 focus:outline-none transition-all duration-300 cursor-pointer">
          <option value="Tech-support" selected>Tech-support</option>
          <option value="Sales">Sales</option>
          <option value="Craft-repair">Craft-repair</option>
          <option value="Prof-specialty">Professional Specialty</option>
          <option value="Exec-managerial">Executive Managerial</option>
        </select>
      </div>

      <!-- Launch Button -->
      <button type="submit" 
        class="w-full bg-gradient-to-r from-violet-600 via-fuchsia-600 to-cyan-600 hover:from-violet-500 hover:via-fuchsia-500 hover:to-cyan-500 text-white font-semibold py-3.5 rounded-xl transition-all duration-300 shadow-lg shadow-fuchsia-900/20 hover:shadow-fuchsia-500/30 active:scale-[0.98]">
        Compute Income Classification
      </button>

    </form>

    <!-- Results Box -->
    <div id="resultBox" class="mt-8 hidden p-6 rounded-2xl text-center border font-medium relative overflow-hidden transition-all duration-500">
      <div id="resultAccent" class="absolute inset-0 opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <h3 class="text-xs uppercase tracking-widest text-slate-400 mb-1">Model Inference Result</h3>
        <p id="resultText" class="text-2xl space-title font-bold tracking-wide mt-2"></p>
        <p id="resultDetail" class="text-xs text-slate-400 mt-2 font-light"></p>
      </div>
    </div>

  </div>

  <script>
    // Update Slider indicators in real-time
    const slider = document.getElementById('hoursSlider');
    const display = document.getElementById('hoursVal');
    
    slider.addEventListener('input', (e) => {
      display.textContent = `${e.target.value} hrs`;
    });

    // Form Submission Action Interception
    document.getElementById('predictionForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const resultBox = document.getElementById('resultBox');
      const resultText = document.getElementById('resultText');
      const resultDetail = document.getElementById('resultDetail');
      const resultAccent = document.getElementById('resultAccent');
      
      const formData = new FormData(e.target);
      const payload = Object.fromEntries(formData.entries());

      // Prepare UI for the API request process
      resultBox.className = "mt-8 p-6 rounded-2xl text-center border border-slate-800 bg-slate-900/40 text-slate-400 animate-pulse block";
      resultAccent.className = "absolute inset-0 bg-transparent";
      resultText.innerHTML = "🌀 Calculating Orbital Inference...";
      resultDetail.textContent = "Formatting arrays and analyzing model decision boundaries...";

      try {
        // Send inputs to your app.py Flask endpoint running on port 5000
        const response = await fetch('https://salary-prediction-classification.onrender.com/predict', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        
        const data = await response.json();
        resultBox.classList.remove('animate-pulse');

        if (data.prediction === '>50K') {
          // Success/High-income style: Neon emeralds, stellar cyans, and rich success accents
          resultBox.className = "mt-8 p-6 rounded-2xl text-center border glowing-result bg-emerald-950/20 text-emerald-400 border-emerald-500/30 shadow-lg shadow-emerald-500/5 block";
          resultAccent.className = "absolute inset-0 bg-gradient-to-r from-emerald-500 to-teal-500 opacity-10 pointer-events-none";
          resultText.innerHTML = "✨ High Tier Income (&gt;50K/year)";
          resultDetail.textContent = "Model confidently predicts financial markers typical of the top wage bracket.";
        } else {
          // Low-income style: Cool cyans, sleeks, and amber accents
          resultBox.className = "mt-8 p-6 rounded-2xl text-center border glowing-result bg-cyan-950/20 text-cyan-400 border-cyan-500/30 shadow-lg shadow-cyan-500/5 block";
          resultAccent.className = "absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-500 opacity-10 pointer-events-none";
          resultText.innerHTML = "📉 Standard Tier Income (&le;50K/year)";
          resultDetail.textContent = "Model trends map standard demographic attributes pointing to threshold metrics.";
        }
      } catch (err) {
        // Error / Connection error alerts
        resultBox.className = "mt-8 p-6 rounded-2xl text-center border border-red-500/30 bg-red-950/20 text-red-400 block";
        resultBox.classList.remove('animate-pulse');
        resultAccent.className = "absolute inset-0 bg-red-500 opacity-5";
        resultText.innerHTML = "⚠️ Comms Bridge Offline";
        resultDetail.textContent = "Verify that 'python app.py' is running in your local terminal window.";
      }
    });
  </script>
</body>
</html>