<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kana Quiz</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
  <link rel="icon" type="image/png" href="https://fluencytool.my-senpai.com/images/favicon.png">

  <style>
    /* Force one-screen layout */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow:visible; /* Prevent scrolling */
    }
    /* Use full viewport height for the app container */
    .app-wrapper {
      height: 90vh;
      max-width: 500px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 0.5rem;
    }
    /* Custom Background & Button Colors */
    .bg-custom {
      background-color: #f5f5f5;
    }
    .skull-icon {
        min-height: 20vh; /* Limit height to 20% of the viewport height */
        width: auto; /* Maintain aspect ratio */
        display: block;
        margin: 0 auto; /* Center horizontally */
    }
    .btn-custom {
      background-color: #008080;
      color: #fff;
      border: none;
    }
    .btn-custom:hover {
      background-color: #006666;
    }
    .text-primary-custom {
      color: #007bff;
    }
    .text-accent-custom {
      color: #ff4081;
    }
    /* Dialog Styles */
    .dialog {
      display: none;
      width: 80%;
      max-width: 400px;
      padding: 24px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      text-align: center;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1050;
    }
    .dialog-content {
      padding: 20px;
      border-radius: 8px;
    }
    .dialog-icon {
      width: 64px;
      height: 64px;
    }
    .dialog-title {
      color: #e74c3c;
      font-size: 22px;
      font-weight: bold;
      margin-top: 16px;
    }
    .dialog-question,
    .dialog-correct-answer {
      color: #333;
      font-size: 18px;
      margin-top: 8px;
      text-align: center;
    }
    .heart-container {
      display: flex;
      justify-content: center;
      margin-top: 16px;
    }
    .heart {
      width: 40px;
      height: 40px;
      margin: 0 5px;
    }
    .dialog-ok-button {
      background-color: #3498db;
      color: white;
      font-size: 16px;
      padding: 12px;
      margin-top: 20px;
      width: 100%;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .dialog-ok-button:hover {
      background-color: #2980b9;
    }
    /* Active button style */
    .btn.active {
      background-color: #007bff;
      color: white;
    }
    /* Optional: reduce margins/padding on sections to better fit content */
    .mb-3 {
      margin-bottom: 0.5rem !important;
    }
    header,
    section,
    #selection-container,
    #choices_container {
      /* Flex children can shrink if needed */
      flex-shrink: 1;
    }
  </style>
</head>
<body class="bg-custom">
  <div class="container app-wrapper">
    <!-- Title and Centered Heading -->
    <header class="text-center">
      <h1 class="text-primary-custom">Kana Quiz</h1>
    </header>

    <!-- Wrap script and level selection sections -->
    <div id="selection-container">
      <!-- Script Selection -->
      <section class="mb-3">
        <div class="row g-2">
          <div class="col">
            <button id="hiragana_button" class="btn btn-outline-dark w-100">Hiragana</button>
          </div>
          <div class="col">
            <button id="katakana_button" class="btn btn-outline-dark w-100">Katakana</button>
          </div>
        </div>
      </section>
    
      <!-- Level Selection -->
      <section class="mb-3">
        <div class="row g-2">
          <div class="col">
            <button id="button_single_sounds" class="btn btn-outline-dark w-100">Single Sounds</button>
          </div>
          <div class="col">
            <button id="button_words" class="btn btn-outline-dark w-100">Words</button>
          </div>
        </div>
      </section>
    </div>
  
    <!-- Start Button -->
    <section class="mb-3">
      <button id="start_button" class="btn btn-outline-dark w-100">Start</button>
    </section>

    <!-- Timer and Level Text -->
    <section class="mb-3 text-center">
      <p id="timer_text" class="text-accent-custom fs-3 mb-2">00:00</p>
      <p id="level_text_view" class="text-primary-custom fs-5">Level: 1</p>
    </section>

    <!-- Correct/Incorrect Counter -->
    <section class="mb-3">
      <div class="row">
        <div class="col text-center">
          <p id="correct_counter_text" class="text-success fs-5">Correct: 0</p>
        </div>
        <div class="col text-center">
          <p id="incorrect_counter_text" class="text-danger fs-5">Incorrect: 0</p>
        </div>
      </div>
    </section>

    <!-- English Translation -->
    <section class="mb-3 text-center">
      <p id="english_translation" class="fs-5"></p>
    </section>

    <!-- Kana Letter Display -->
    <section class="mb-3 text-center">
      <h2 id="letter_display" class="fw-bold fs-1"></h2>
    </section>

    <!-- Audio Icon -->
    <section class="mb-3 text-center">
      <img
        id="ic_audio"
        src="assets/images/ic_audio.svg"
        alt="Audio Icon"
        class="img-fluid d-none"
        style="width: 45px; height: 45px;"
      />
    </section>

    <!-- Answer Choices -->
    <section class="mb-3 d-none" id="choices_container">
      <button class="btn btn-outline-dark mb-2">Choice 1</button>
      <button class="btn btn-outline-dark mb-2">Choice 2</button>
      <button class="btn btn-outline-dark mb-2">Choice 3</button>
      <button class="btn btn-outline-dark mb-2">Choice 4</button>
    </div>
</section>
    <!-- Ad Banner -->
    <section class="mb-3">
      <div class="text-center border p-2">Ad Banner</div>
    </section>
  </div>

  <!-- Incorrect Answer Dialog -->
  <div id="dialog_incorrect_answer" class="dialog">
    <img
      src="assets/images/ic_incorrect_answer.svg"
      alt="Incorrect Answer"
      class="dialog-icon"
    />
    <h2 class="dialog-title">Incorrect Answer</h2>
    <!-- Question & Correct Answer -->
    <p id="tv_question" class="dialog-question">The question will appear here.</p>
    <p id="tv_correct_answer" class="dialog-correct-answer">The correct answer is: </p>
    <!-- Hearts Row -->
    <div id="heart_container" class="heart-container">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart" />
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart" />
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart" />
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart" />
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart" />
    </div>
    <button id="btn_ok" class="dialog-ok-button">OK</button>
  </div>

  <!-- Kana Rows Selection Dialog -->
  <div id="dialog" class="dialog">
    <div class="dialog-content">
      <h2>Select Kana Rows</h2>
      <ul id="row-list" class="list-group mb-3">
        <!-- Dynamically populated rows will go here -->
      </ul>
      <div class="form-check mb-3">
        <input
          class="form-check-input"
          type="checkbox"
          id="select-all-checkbox"
        />
        <label class="form-check-label" for="select-all-checkbox">
          Select All
        </label>
      </div>
      <div class="d-grid gap-2">
        <button id="confirm-button" class="btn btn-primary">Confirm</button>
        <button id="close-button" class="btn btn-secondary">Close</button>
      </div>
    </div>
  </div>
<!-- Game Over Modal -->
<div id="game-over-dialog" class="modal fade" tabindex="-1" aria-labelledby="game-over-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header bg-danger text-white text-center">
                <h5 class="modal-title w-100" id="game-over-title">
                    Game Over
                </h5>
            </div>
            <!-- Modal Body -->
            <div class="modal-body text-center">
                <!-- SVG Icon -->
                <img src="assets/images/skull.svg" alt="Game Over Icon" class="skull-icon mb-3">
                <!-- Message -->
                <div id="dialog_message"></div>
            </div>
            <!-- Modal Footer -->
            <div class="modal-footer justify-content-center">
                <button id="btn_exit" type="button" class="btn btn-primary" data-bs-dismiss="modal">Exit</button>
            </div>
        </div>
    </div>
</div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="scripts.js"></script>
</body>
</html>
