numex-candy/public/index.html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Numex Candy — Şeker Eşleştirme Oyunu</title>
  <meta name="description" content="Numex Candy — 20 bölümlük, profesyonel şeker eşleştirme oyunu. Numex AI tarafından geliştirildi." />
  <link rel="stylesheet" href="css/style.css?v=10" />
</head>
<body>
  <!-- Arka plan süslemesi -->
  <div class="bg-deco" aria-hidden="true">
    <span class="blob blob-1"></span>
    <span class="blob blob-2"></span>
    <span class="blob blob-3"></span>
  </div>

  <!-- ==================== ÜST BAR ==================== -->
  <header class="topbar" id="topbar">
    <div class="topbar-inner">
      <div class="brand">
        <span class="brand-logo" aria-hidden="true">
          <span class="candy-dot c1"></span>
          <span class="candy-dot c2"></span>
          <span class="candy-dot c3"></span>
          <span class="candy-dot c4"></span>
        </span>
        <span class="brand-text">Numex<b>Candy</b></span>
      </div>

      <div class="hud" id="hud" hidden>
        <div class="hud-item">
          <span class="hud-label">Bölüm</span>
          <span class="hud-value" id="hudLevel">1</span>
        </div>
        <div class="hud-item">
          <span class="hud-label">Puan</span>
          <span class="hud-value" id="hudScore">0</span>
        </div>
        <div class="hud-item hud-moves">
          <span class="hud-label">Hamle</span>
          <span class="hud-value" id="hudMoves">0</span>
        </div>
      </div>

      <div class="topbar-actions">
        <button class="icon-btn" id="btnSound" title="Ses aç/kapat" aria-label="Sesi aç veya kapat">🔊</button>
        <button class="icon-btn" id="btnHome" title="Ana menüye dön" aria-label="Ana menüye dön" hidden>⌂</button>
      </div>
    </div>
  </header>

  <main class="app">
    <!-- ==================== ANA MENÜ ==================== -->
    <section class="screen screen-menu active" id="screenMenu">
      <div class="menu-card">
        <div class="menu-candy-row" aria-hidden="true">
          <span class="candy c-t0 s-kare"></span>
          <span class="candy c-t1 s-daire"></span>
          <span class="candy c-t2 s-baklava"></span>
          <span class="candy c-t3 s-kare"></span>
          <span class="candy c-t4 s-daire"></span>
        </div>

        <h1 class="menu-title">Numex <span>Candy</span></h1>
        <p class="menu-sub">Şekerleri eşleştir, zincirleri kur, bölümleri devir.</p>

        <div class="menu-stats" id="menuStats">
          <div class="stat">
            <span class="stat-value" id="statStars">0</span>
            <span class="stat-label">Yıldız</span>
          </div>
          <div class="stat">
            <span class="stat-value" id="statLevel">1</span>
            <span class="stat-label">Açık Bölüm</span>
          </div>
          <div class="stat">
            <span class="stat-value" id="statBest">0</span>
            <span class="stat-label">En İyi Puan</span>
          </div>
        </div>

        <div class="menu-buttons">
          <button class="btn btn-primary" id="btnPlay">
            <span class="btn-icon">▶</span> Oyna
          </button>
          <button class="btn btn-ghost" id="btnLevels">
            <span class="btn-icon">☰</span> Bölümler
          </button>
        </div>
      </div>
    </section>

    <!-- ==================== BÖLÜM SEÇİM ==================== -->
    <section class="screen screen-levels" id="screenLevels">
      <div class="panel">
        <div class="panel-head">
          <h2 class="panel-title">Bölümler</h2>
          <p class="panel-sub" id="levelsProgress">0 / 20 tamamlandı</p>
        </div>
        <div class="levels-grid" id="levelsGrid"><!-- JS ile doldurulur --></div>
        <div class="panel-foot">
          <button class="btn btn-ghost" id="btnLevelsBack">← Geri</button>
        </div>
      </div>
    </section>

    <!-- ==================== OYUN ==================== -->
    <section class="screen screen-game" id="screenGame">
      <div class="baslat-hata" id="baslatHata" hidden role="alert"></div>
      <div class="game-layout">
        <!-- Sol/sol üst: hedefler ve güçlendiriciler -->
        <aside class="game-side">
          <div class="side-block">
            <h3 class="side-title">Hedefler</h3>
            <div class="goals" id="goals"><!-- JS --></div>
          </div>

          <div class="side-block">
            <h3 class="side-title">Güçlendiriciler</h3>
            <div class="boosters" id="boosters"><!-- JS --></div>
          </div>
        </aside>

        <!-- Orta: tahta -->
        <div class="game-main">
          <div class="board-wrap">
            <div class="board" id="board" role="grid" aria-label="Oyun tahtası"></div>
            <div class="board-overlay" id="boardOverlay" hidden>
              <div class="overlay-content" id="overlayContent"></div>
            </div>
          </div>
          <div class="combo-banner" id="comboBanner" hidden></div>
        </div>

        <!-- Sağ/alt: yıldız çubuğu -->
        <aside class="game-meta">
          <div class="stars-track" id="starsTrack">
            <div class="star" data-i="1">★</div>
            <div class="star" data-i="2">★</div>
            <div class="star" data-i="3">★</div>
            <div class="stars-progress"><i id="starsBar"></i></div>
          </div>
          <p class="stars-next" id="starsNext">Sonraki yıldız: 2000</p>
          <button class="btn btn-ghost btn-sm" id="btnRestart">↻ Yeniden Başlat</button>
          <button class="btn btn-ghost btn-sm" id="btnQuit">Çık</button>
        </aside>
      </div>
    </section>
  </main>

  <!-- ==================== ALT BİLGİ ==================== -->
  <footer class="site-footer">
    <p class="footer-credit">Numex Codex tarafından oluşturulmuştur</p>
    <p class="footer-brand">Numex AI Bilişim Teknolojileri</p>
  </footer>

  <!-- ==================== MODAL: BÖLÜM SONU ==================== -->
  <div class="modal" id="modalResult" hidden>
    <div class="modal-box">
      <div class="result-stars" id="resultStars"></div>
      <h2 class="modal-title" id="resultTitle">Bölüm Tamam!</h2>
      <p class="modal-score">Puan: <b id="resultScore">0</b></p>
      <div class="modal-buttons">
        <button class="btn btn-primary" id="btnNextLevel">Sonraki Bölüm →</button>
        <button class="btn btn-ghost" id="btnRetry">Tekrar Dene</button>
        <button class="btn btn-ghost" id="btnResultMenu">Ana Menü</button>
      </div>
    </div>
  </div>

  <!-- ==================== MODAL: SKOR TABLOSU ==================== -->
  <div class="modal" id="modalBoard" hidden>
    <div class="modal-box modal-wide">
      <h2 class="modal-title">🏆 Bölüm Skorları</h2>
      <ol class="leaderboard" id="leaderboardList"></ol>
      <div class="modal-buttons">
        <button class="btn btn-ghost" id="btnCloseBoard">Kapat</button>
      </div>
    </div>
  </div>

  <script type="module" src="js/oyun.js?v=11"></script>
</body>
</html>