İndex.Html

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BalHesabla - 11-ci Sinif İmtahan və İxtisas Portalı</title>
  <meta name="description" content="11-ci sinif DİM imtahan balını hesabla, universitet və ixtisas keçid ballarını öyrən!">
  <style>
    :root {
      --primary: #4f46e5;
      --primary-hover: #4338ca;
      --bg-overlay: rgba(15, 23, 42, 0.85);
      --card-bg: rgba(30, 41, 59, 0.90);
      --text: #f8fafc;
      --subtext: #94a3b8;
      --success: #22c55e;
      --warning: #f59e0b;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    
    body { 
      /* Arxa planda keyfiyyətli tələbə fotosu */
      background: linear-gradient(var(--bg-overlay), var(--bg-overlay)), 
                  url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1200&auto=format&fit=crop') no-repeat center center fixed;
      background-size: cover;
      color: var(--text); 
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Yuxarı Naviqasiya Menyusu (Çox səhifəli hissə) */
    nav {
      width: 100%;
      max-width: 600px;
      display: flex;
      justify-content: space-around;
      background: rgba(15, 23, 42, 0.95);
      padding: 12px;
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid #334155;
      backdrop-filter: blur(8px);
    }

    .nav-btn {
      background: none;
      border: none;
      color: var(--subtext);
      font-size: 0.9rem;
      font-weight: 600;
      padding: 8px 12px;
      cursor: pointer;
      border-radius: 8px;
      transition: 0.3s;
    }

    .nav-btn.active {
      background: var(--primary);
      color: #fff;
    }

    /* Əsas Konteynir */
    .container { 
      width: 92%; 
      max-width: 550px; 
      background: var(--card-bg); 
      padding: 25px; 
      border-radius: 20px; 
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); 
      margin: 20px 0;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .page { display: none; }
    .page.active { display: block; }

    h1 { font-size: 1.6rem; text-align: center; margin-bottom: 20px; color: #fff; }
    
    .form-group { margin-bottom: 16px; }
    label { display: block; font-size: 0.85rem; color: var(--subtext); margin-bottom: 6px; }
    input, select { 
      width: 100%; 
      padding: 12px 14px; 
      background: rgba(15, 23, 42, 0.8); 
      border: 1px solid #334155; 
      border-radius: 10px; 
      color: #fff; 
      font-size: 1rem;
      outline: none;
    }
    input:focus, select:focus { border-color: var(--primary); }

    .grid-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    .submit-btn { 
      width: 100%; 
      padding: 14px; 
      background: var(--primary); 
      border: none; 
      border-radius: 10px; 
      color: white; 
      font-weight: bold; 
      font-size: 1rem; 
      margin-top: 10px; 
      cursor: pointer; 
      transition: 0.2s; 
    }
    .submit-btn:hover { background: var(--primary-hover); }

    /* Nəticə Hissəsi */
    .result-box { 
      display: none; 
      margin-top: 25px; 
      border-top: 1px solid #334155; 
      padding-top: 20px; 
    }
    .score-title { text-align: center; font-size: 2.2rem; font-weight: 800; color: #38bdf8; }
    .score-sub { text-align: center; color: var(--subtext); font-size: 0.85rem; margin-bottom: 20px; }

    .uni-card { 
      background: rgba(15, 23, 42, 0.7); 
      border-radius: 10px; 
      padding: 14px; 
      margin-bottom: 12px; 
      border-left: 5px solid var(--primary); 
    }
    .uni-card.free { border-left-color: var(--success); }
    .uni-card.paid { border-left-color: var(--warning); }
    .uni-name { font-weight: 700; font-size: 1rem; }
    .uni-details { font-size: 0.8rem; color: var(--subtext); margin-top: 5px; }
    .badge { 
      display: inline-block; 
      padding: 4px 8px; 
      font-size: 0.75rem; 
      border-radius: 6px; 
      font-weight: bold; 
      margin-top: 8px; 
    }
    .badge-free { background: rgba(34, 197, 94, 0.2); color: var(--success); }
    .badge-paid { background: rgba(245, 158, 11, 0.2); color: var(--warning); }

    .info-card {
      background: rgba(15, 23, 42, 0.6);
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 10px;
      font-size: 0.9rem;
      line-height: 1.5;
    }
  </style>
</head>
<body>

  <!-- Səhifələr Arası Menyu -->
  <nav>
    <button class="nav-btn active" onclick="switchPage('hesabla')">Bal Hesabla</button>
    <button class="nav-btn" onclick="switchPage('ixtisaslar')">İxtisaslar</button>
    <button class="nav-btn" onclick="switchPage('test')">Dostluq Testi</button>
    <button class="nav-btn" onclick="switchPage('haqqimizda')">Haqqımızda</button>
  </nav>

  <div class="container">
    
    <!-- SƏHİFƏ 1: Bal Hesablama -->
    <div id="hesabla" class="page active">
      <h1>DİM Bal Hesablama 🎓</h1>
      
      <div class="form-group">
        <label>İxtisas Qrupu Seçin</label>
        <select id="group">
          <option value="1">1-ci Qrup (Riyaziyyat - Fizika/İnformatika)</option>
          <option value="2">2-ci Qrup (Riyaziyyat - Coğrafiya)</option>
          <option value="3">3-cü Qrup (Tarix - Ədəbiyyat)</option>
          <option value="4">4-cü Qrup (Biologiya - Kimya)</option>
        </select>
      </div>

      <div class="grid-inputs">
        <div class="form-group">
          <label>Buraxılış Balı (max 300)</label>
          <input type="number" id="buraxilis" placeholder="Məs: 210" max="300">
        </div>
        <div class="form-group">
          <label>Blok Balı (max 400)</label>
          <input type="number" id="blok" placeholder="Məs: 280" max="400">
        </div>
      </div>

      <button class="submit-btn" onclick="hesabla()">Balı və İxtisasları Hesabla</button>

      <div class="result-box" id="results">
        <div class="score-title" id="totalScore">0</div>
        <div class="score-sub">Ümumi Toplanan Bal</div>

        <h3 style="font-size: 1rem; margin-bottom: 12px; color: var(--subtext);">Bu bala uyğun gələn ixtisaslar:</h3>
        <div id="uniList"></div>
      </div>
    </div>

    <!-- SƏHİFƏ 2: İxtisas Məlumatları -->
    <div id="ixtisaslar" class="page">
      <h1>İxtisas Məlumatları 📚</h1>
      <div class="info-card">
        <strong>1-ci Qrup:</strong> Kompüter Elmləri, Proqram Təminatı və İT sahələrinə keçid balları yüksək olaraq qalmaqdadır.
      </div>
      <div class="info-card">
        <strong>2-ci Qrup:</strong> UNEC və BDU-da Maliyyə, İqtisadiyyat ixtisasları ən çox seçilənlər arasındadır.
      </div>
      <div class="info-card">
        <strong>3-cü Qrup:</strong> Hüquqşünaslıq üçün keçid balı əsasən 550+ üzərində formalılaşır.
      </div>
    </div>

    <!-- SƏHİFƏ 3: Dostluq Testi (Tezliklə) -->
    <div id="test" class="page">
      <h1>Dostluq Testi ⚔️</h1>
      <p style="text-align: center; color: var(--subtext); margin-top: 20px;">
        Tezliklə! Dostlarınla imtahan biliklərini yarışdıracağın viral test funksiyası bura əlavə olunacaq.
      </p>
    </div>

    <!-- SƏHİFƏ 4: Haqqımızda -->
    <div id="haqqimizda" class="page">
      <h1>BalHesabla Haqqında ℹ️</h1>
      <p style="color: var(--subtext); text-align: center; line-height: 1.6;">
        BalHesabla portalı 11-ci sinif şagirdlərinə DİM imtahanı ballarını hesablamağa və düzgün ixtisas seçimi etməyə kömək etmək üçün yaradılmışdır.
      </p>
    </div>

  </div>

  <script>
    // Səhifələr arasında keçid funksiyası
    function switchPage(pageId) {
      document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
      document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
      
      document.getElementById(pageId).classList.add('active');
      event.target.classList.add('active');
    }

    // İxtisas bazası
    const ixtisaslar = [
      { group: 1, name: "BDU - Kompüter Elmləri", minFree: 540, minPaid: 450 },
      { group: 1, name: "ADNSU - İnformasiya Təhlükəsizliyi", minFree: 560, minPaid: 480 },
      { group: 1, name: "BMU - Proqram Təminatı Mühəndisliyi", minFree: 520, minPaid: 420 },
      { group: 1, name: "AzTU - İnformatika Mühəndisliyi", minFree: 380, minPaid: 280 },
      
      { group: 2, name: "UNEC - Maliyyə", minFree: 510, minPaid: 390 },
      { group: 2, name: "BDU - Beynəlxalq Münasibətlər", minFree: 480, minPaid: 350 },
      { group: 2, name: "ADNSU - Menecment", minFree: 400, minPaid: 290 },

      { group: 3, name: "BDU - Hüquqşünaslıq", minFree: 620, minPaid: 530 },
      { group: 3, name: "ADPU - Xarici Dili Müəllimliyi", minFree: 490, minPaid: 380 },
      { group: 3, name: "BSU - Tərcümə (İngilis dili)", minFree: 430, minPaid: 320 },

      { group: 4, name: "ATU - Müalicə İşi (Həkimlik)", minFree: 610, minPaid: 550 },
      { group: 4, name: "ATU - Stomatologiya", minFree: 580, minPaid: 510 },
      { group: 4, name: "BDU - Biologiya", minFree: 390, minPaid: 270 }
    ];

    // Hesablama funksiyası
    function hesabla() {
      const buraxilis = Number(document.getElementById('buraxilis').value) || 0;
      const blok = Number(document.getElementById('blok').value) || 0;
      const selectedGroup = Number(document.getElementById('group').value);

      const umumiBal = buraxilis + blok;
      document.getElementById('totalScore').innerText = umumiBal + " Bal";

      const uniListContainer = document.getElementById('uniList');
      uniListContainer.innerHTML = '';

      const uygunIxtisaslar = ixtisaslar.filter(i => i.group === selectedGroup);

      uygunIxtisaslar.forEach(item => {
        if (umumiBal >= item.minPaid) {
          const isFree = umumiBal >= item.minFree;
          const card = document.createElement('div');
          card.className = `uni-card ${isFree ? 'free' : 'paid'}`;
          card.innerHTML = `
            <div class="uni-name">${item.name}</div>
            <div class="uni-details">Keçid balı: Pulsuz ${item.minFree} / Ödənişli ${item.minPaid}</div>
            <span class="badge ${isFree ? 'badge-free' : 'badge-paid'}">
              ${isFree ? 'Ödənişsiz (Dövlət Hesabına)' : 'Ödənişli Qəbul'}
            </span>
          `;
          uniListContainer.appendChild(card);
        }
      });

      if (uniListContainer.innerHTML === '') {
        uniListContainer.innerHTML = '<div style="color: var(--subtext); text-align: center; padding: 15px;">Bu bala uyğun ixtisas tapılmadı.</div>';
      }

      document.getElementById('results').style.display = 'block';
    }
  </script>
</body>
</html>