?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <style>
    /* Your existing CSS styles */
  </style>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <!-- Icon on the left side of the navbar -->
      <a class="navbar-brand" href="sakums.html">
        <img src="roundhollow.png" alt="Icon" width="80" height="80" class="d-inline-block align-text-top">
      </a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="sakums.html">Sākums</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Kategoriju izvēlne
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="kategorija1.html">Kategorija 1</a></li>
              <li><a class="dropdown-item" href="kategorija2.html">Kategorija 2</a></li>
              <li><a class="dropdown-item" href="kategorija3.html">Kategorija 3</a></li>
              <li><a class="dropdown-item" href="kategorija4.html">Kategorija 4</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="lapa.html">Lapa</a>
          </li>
        </ul>
      </div>

      <div class="text-size-buttons">
        <button id="size100" class="btn btn-primary me-2">100%</button>
        <button id="size200" class="btn btn-primary">200%</button>
      </div>
    </div>
  </nav>

  <div class="container mt-3">
    <div class="row">
      <div class="col-md-8">
        <!-- Elements on the top right -->
        <h1>Hollow 2023 Rewind</h1>
        <p>
          Kategorijas: <a href="kategorija1.html">Kategorija 1</a>,
          <a href="kategorija2.html">Kategorija 2</a>,
          <a href="kategorija3.html">Kategorija 3</a>
        </p>
        <p>28.12.2023</p>
      </div>
      <div class="col-md-4">
        <!-- Image on the right side -->
        <img src="hollow2023.PNG" class="img-fluid" alt="Image">
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-md-12">
        <!-- Paragraph content -->
        <p>
          This is a recap video of all that I've uploaded on my channel in 2023! It has been a great year for me, because I passed my first milestone - 10k views. Thank you everyone that has supported me on this channel and I hope I can keep you entertained with my uploads in the following year!
        </p>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
    <div class="container-fluid">
      <!-- Logo on the left side of the footer -->
      <a class="navbar-brand" href="sakums.html">
        <img src="roundhollow.png" alt="Icon" width="50" height="50" class="d-inline-block align-text-top">
      </a>

      <!-- Title on the right side of the footer -->
      <span class="navbar-text ms-auto">
        BootstrapPrakse
      </span>
    </div>
  </footer>

  <!-- Bootstrap JS and your script -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  <script>
    const size100Button = document.getElementById('size100');
    const size200Button = document.getElementById('size200');

    // Function to change text size
    function changeTextSize(size) {
      document.body.style.fontSize = size;
      const dropdownItems = document.querySelectorAll('.dropdown-item');
      dropdownItems.forEach(item => {
        item.style.fontSize = size;
      });
    }

    // Function to set text size to localStorage
    function setTextSizeToStorage(size) {
      localStorage.setItem('textSize', size);
    }

    size100Button.addEventListener('click', function () {
      changeTextSize('100%');
      setTextSizeToStorage('100%');
    });

    size200Button.addEventListener('click', function () {
      changeTextSize('200%');
      setTextSizeToStorage('200%');
    });

    // Retrieve and apply text size from localStorage on page load
    document.addEventListener('DOMContentLoaded', function () {
      const savedTextSize = localStorage.getItem('textSize');
      if (savedTextSize) {
        changeTextSize(savedTextSize);
      }
    });
  </script>
</body>

</html>
