İndex.html.

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DiyarAz — Azərbaycanın Tarixi, Yeməkləri və Görməli Yerləri</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Georgia', 'Times New Roman', serif;
    }

    body {
      /* Qədim/Vintage ab-hava üçün tünd xalça/buta teksturalı arxa fon */
      background: #0d0805 url('https://www.transparenttextures.com/patterns/oriental-tiles.png');
      color: #f1e7d0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 10px;
    }

    /* Qədim Glass Container */
    .container {
      width: 100%;
      max-width: 600px;
      background: rgba(26, 18, 11, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(212, 160, 23, 0.3);
      border-radius: 20px;
      padding: 25px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(212, 160, 23, 0.1);
    }

    header {
      text-align: center;
      margin-bottom: 25px;
      border-bottom: 1px solid rgba(212, 160, 23, 0.2);
      padding-bottom: 15px;
    }

    h1 {
      font-size: 2rem;
      color: #d4a017; /* Qızılı ton */
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }

    p.subtitle {
      font-size: 0.95rem;
      color: #c5a880;
      margin-top: 5px;
      font-style: italic;
    }

    /* Rayon Seçim Düymələri */
    .region-selector {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 10px;
      margin-bottom: 20px;
      scrollbar-width: thin;
      scrollbar-color: #d4a017 transparent;
    }

    .region-btn {
      background: rgba(45, 30, 18, 0.8);
      border: 1px solid #7a5c1e;
      color: #e5d3b3;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.9rem;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    .region-btn.active, .region-btn:hover {
      background: #d4a017;
      color: #0d0805;
      font-weight: bold;
      box-shadow: 0 0 10px rgba(212, 160, 23, 0.5);
    }

    /* Kontent Kartları */
    .content-box {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .card {
      background: rgba(15, 10, 6, 0.6);
      border: 1px solid rgba(212, 160, 23, 0.2);
      border-radius: 12px;
      padding: 18px;
    }

    .card-title {
      font-size: 1.1rem;
      color: #d4a017;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px dashed rgba(212, 160, 23, 0.2);
      padding-bottom: 5px;
    }

    .card-text {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #e2d5c3;
    }

    ul.custom-list {
      list-style-type: none;
      padding-left: 5px;
    }

    ul.custom-list li {
      margin-bottom: 8px;
      position: relative;
      padding-left: 20px;
    }

    ul.custom-list li::before {
      content: "✦";
      position: absolute;
      left: 0;
      color: #d4a017;
    }

    footer {
      margin-top: 25px;
      text-align: center;
      font-size: 0.8rem;
      color: #8c765c;
    }
  </style>
</head>
<body>

  <div class="container">
    <header>
      <h1>DiyarAz</h1>
      <p class="subtitle">Azərbaycan rayonlarının tarixi, adətləri və gəzməli yerləri</p>
    </header>

    <!-- Rayon Düymələri -->
    <div class="region-selector" id="region-buttons">
      <!-- JavaScript ilə dolacaq -->
    </div>

    <!-- Məlumat Səhifəsi -->
    <div class="content-box">
      <!-- Görəli Yerlər -->
      <div class="card">
        <div class="card-title">📍 Gəzməli və Görməli Yerlər</div>
        <div id="places-list" class="card-text">
          <ul class="custom-list"></ul>
        </div>
      </div>

      <!-- Milli Yeməklər -->
      <div class="card">
        <div class="card-title">🍲 Milli Yeməklər & Süfrə</div>
        <div id="food-list" class="card-text">
          <ul class="custom-list"></ul>
        </div>
      </div>

      <!-- Tarix və Adət-ənənə -->
      <div class="card">
        <div class="card-title">📜 Tarixi & Unikal Adətlər</div>
        <p id="history-text" class="card-text"></p>
      </div>
    </div>

    <footer>
      DiyarAz — Keçmişdən Gələcəyə Milli Mirasımız
    </footer>
  </div>

  <script>
    // Rayonların Məlumat Bazası
    const regions = {
      seki: {
        name: "Şəki",
        places: [
          "Şəki Xan Sarayı (İynəsiz, mıxsız tikilən tarixi möcüzə)",
          "Kiş Alban Məbədi (Qədim Qafqaz Albaniyası irsi)",
          "Yuxarı Karvansaray (Böyük İpək Yolu dayanacağı)",
          "Gəlirsən-Görərsən Qalası"
        ],
        food: ["Şəki Piti (Xüsusi gil küpələrdə)", "Şəki Halvası", "Girməşək", "Sürsüllü"],
        history: "Şəki Azərbaycanın en qədim sənətkarlıq və ipəkçilik mərkəzlərindən biridir. Özünəməxsus ləhcəsi, yumoru və zəngin memarlığı ilə seçilir."
      },
      lenkeran: {
        name: "Lənkəran",
        places: [
          "Xan Evi (Lənkəran Tarix-Diyarşünaslıq Muzeyi)",
          "Dairəvi Qala (Zindan)",
          "Samovar Heykəli və Çay Zəmiləri",
          "Xanbulan Gölülü və Hirkan Milli Parkı"
        ],
        food: ["Ləvəngi (Balıq və Toyuq)", "Boranı Plov", "Tırşılı Plov", "Həftəbecər Turşusu"],
        history: "Cənubun mirvarisi sayılan Lənkəran özünün çay plantasiyaları, sitrus meyvələri və Talış dağlarının füsunkar təbiəti ilə məşhurdur."
      },
      susa: {
        name: "Şuşa (Qarabağ)",
        places: [
          "Cıdır Düzü",
          "Şuşa Qalası və Gəncə Qapısı",
          "Xurşidbanu Natəvanın Evi və Bulağı",
          "Yuxarı Gövhər Ağa Məscidi",
          "Xarıbülbülün Vətəni"
        ],
        food: ["Qarabağ Kətəsi", "Şah Plov", "Qarabağ Bükməsi"],
        history: "Azərbaycanın Mədəniyyət Paytaxtı. Pənahəli xan tərəfindən təməli qoyulan Şuşa, yetirdiyi böyük şairlər, xanəndələr və bəstəkarlarla tariximizin tacıdır."
      },
      naxcivan: {
        name: "Naxçıvan",
        places: [
          "Mömünə Xatun Türbəsi",
          "Əlincə Qalası (Qafqazın Maçku-Piçkusu)",
          "Düzdağ Fizioterapiya Mərkəzi",
          "Ashabı-Kəhf Ziyarətgahı"
        ],
        food: ["Ordubad Qayğanağı", "Qovurma Xəngəli", "Naxçıvan Çörəyi (Lavaş)"],
        history: "Dünyanın ən qədim yaşayış məskənlərindən biridir. Nuh peyğəmbərin gəmisi və əfsanələri ilə bağlı olan zəngin tarixi abidələr diyarıdır."
      },
      quba: {
        name: "Quba",
        places: [
          "Xınalıq Kəndi (Buludlar üzərindəki qədim kənd)",
          "Qırmızı Qəsəbə (Dağ yəhudilərinin dünyada tək məskəni)",
          "Afurca Şəlaləsi",
          "Qəçreş Meşələri"
        ],
        food: ["Quba Bükməsi", "Quba Xıngalı", "Quba Alması"],
        history: "Böyük Qafqaz dağlarının ətəyində yerləşən Quba xalçaçılıq məktəbi, sıx meşələri və qədim kəndləri ilə tanınır."
      }
    };

    // Düymələri və Kontenti Yaradan Funksiya
    const buttonsContainer = document.getElementById('region-buttons');

    function loadRegion(key) {
      const data = regions[key];
      
      // Active Button Update
      document.querySelectorAll('.region-btn').forEach(btn => btn.classList.remove('active'));
      document.getElementById(`btn-${key}`).classList.add('active');

      // Update Places
      const placesList = document.getElementById('places-list').querySelector('ul');
      placesList.innerHTML = data.places.map(p => `<li>${p}</li>`).join('');

      // Update Food
      const foodList = document.getElementById('food-list').querySelector('ul');
      foodList.innerHTML = data.food.map(f => `<li>${f}</li>`).join('');

      // Update History
      document.getElementById('history-text').innerText = data.history;
    }

    // İlk yüklənmə
    Object.keys(regions).forEach((key, index) => {
      const btn = document.createElement('button');
      btn.className = `region-btn ${index === 0 ? 'active' : ''}`;
      btn.id = `btn-${key}`;
      btn.innerText = regions[key].name;
      btn.onclick = () => loadRegion(key);
      buttonsContainer.appendChild(btn);
    });

    // Başlanğıc olaraq ilk rayonu yüklə
    loadRegion('seki');
  </script>
</body>
</html>