index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Waves Generator</title>
  </head>
  <body>
    <main>
      <header>
        <img
          width="60"
          height="60"
          src="/icon.svg"
          alt="Waves Generator logo"
        />
        <span class="title-l">Let's make a wave!</span>
      </header>

      <section class="container">
        <div class="controls">
          <!-- Wave Type Selector -->
          <div class="tab-nav">
            <ul class="tab-list">
              <li>
                <button
                  class="wave-type tab active"
                  data-type="wave"
                  x-data="curveSelector"
                  @click="updateCurve"
                >
                  <svg width="16" height="16" viewBox="0 0 16 16">
                    <path
                      d="M0 8C2 8 2 4 4 4S6 12 8 12s2-4 4-4 2 4 4 4"
                      stroke="currentColor"
                      fill="none"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="wave-type tab"
                  data-type="step"
                  x-data="curveSelector"
                  @click="updateCurve"
                >
                  <svg width="16" height="16" viewBox="0 0 16 16">
                    <path
                      d="M0 8H4V4H8V8H12V4H16"
                      stroke="currentColor"
                      fill="none"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="wave-type tab"
                  data-type="peak"
                  x-data="curveSelector"
                  @click="updateCurve"
                >
                  <svg width="16" height="16" viewBox="0 0 16 16">
                    <path
                      d="M0 8L4 4L8 12L12 4L16 8"
                      stroke="currentColor"
                      fill="none"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </li>
            </ul>
          </div>

          <!-- Direction Selector -->
          <div class="tab-nav">
            <ul class="tab-list">
              <li>
                <button
                  class="direction-btn tab active"
                  data-direction="up"
                  x-data="directionSelector"
                  @click="updateDirection"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polyline points="18 15 12 9 6 15"></polyline>
                  </svg>
                </button>
              </li>
              <li>
                <button
                  class="direction-btn tab"
                  data-direction="down"
                  x-data="directionSelector"
                  @click="updateDirection"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </button>
              </li>
            </ul>
          </div>

          <!-- Complexity Slider -->
          <div class="slider-container">
            <svg
              class="complexity-icon"
              width="20"
              height="20"
              viewBox="0 0 16 16"
            >
              <path
                d="M2 8C2 8 4 6 8 8C12 10 14 8 14 8"
                stroke="currentColor"
                fill="none"
                stroke-width="1.5"
              />
            </svg>

            <input
              id="complexity"
              aria-label="Complexity"
              type="range"
              min="2"
              max="50"
              value="10"
              x-data="complexitySlider"
              @input="updateValue"
            />

            <svg
              class="complexity-icon"
              width="20"
              height="20"
              viewBox="0 0 16 16"
            >
              <path
                d="M2 8C2 8 3 4 5 6C7 8 9 4 11 6C13 8 14 8 14 8"
                stroke="currentColor"
                fill="none"
                stroke-width="1.5"
              />
            </svg>
          </div>

          <!-- Randomize Button -->
          <button
            id="btn-randomize"
            aria-label="Randomize waves"
            x-data="waveActions"
            @click="randomize"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <polyline points="17 1 21 5 17 9"></polyline>
              <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
              <polyline points="7 23 3 19 7 15"></polyline>
              <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
            </svg>
          </button>
        </div>

        <!-- Wave Preview -->
        <div id="preview">
          <svg id="wave-preview" viewBox="0 0 500 200"></svg>
        </div>

        <!-- Action Buttons -->
        <div class="button-group" x-data="waveActions">
          <button
            id="btn-download"
            data-appearance="secondary"
            @click="downloadSVG"
          >
            Download
          </button>
          <button id="btn-create" data-appearance="primary" @click="createPattern">
            Create
          </button>
        </div>
      </section>

      <footer class="content-footer">
        <a
          href="https://omikor.in"
          target="_blank"
          rel="noopener noreferrer"
          class="footer-link"
        >
          Made with ❤️ by <span class="footer-accent">Omikorin</span>
        </a>
      </footer>
    </main>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>