index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuoteHarbor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="site-data/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="180x180" href="site-data/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="site-data/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="site-data/favicon-16x16.png">
    <link rel="manifest" href="site-data/site.webmanifest">
  </head>
  <body>
    <header>
      <div class="theme-toggle">
        <i class="fas fa-sun"></i>
        <div class="toggle-slider">
          <div class="toggle-button"></div>
        </div>
        <i class="fas fa-moon"></i>
      </div>
    </header>
    <main>
      <div class="quote-options">
        <h1>Choose your style</h1>
        <div class="buttons">
          <button class="quote-btn" id="text-quote-btn">Text Quote</button>
          <button class="quote-btn" id="image-quote-btn">Image Quote</button>
        </div>
      </div>
      <div class="quote-container">
        <div class="loading-container" style="display: none;">
          <p class="loading-text">Finding a quote for you <span class="loading-dots"></span>
          </p>
        </div>
      </div>
      <button class="get-quote-btn" id="get-quote-btn" style="display: none;">Get Another Quote</button>
    </main>
    <footer>
      <a href="https://discord.com/invite/2nHHHBWNDw" target="_blank">
        <i class="fab fa-discord"></i>
      </a>
      <a href="https://github.com/ThatSINEWAVE/QuoteHarbor" target="_blank">
        <i class="fas fa-heart"></i>
      </a>
      <a href="https://ko-fi.com/thatsinewave" target="_blank">
        <i class="fab fa-github"></i>
      </a>
    </footer>
    <script src="script.js"></script>
  </body>
</html>