index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mosaic Threads</title>
  <link rel="stylesheet" href="assets/style.css" />
</head>
<body>
  <main class="container">
    <section class="hero card">
      <h1>Mosaic Threads</h1>
      <p>Transform personal images into simplified knitting patterns with yarn-inspired color palettes.</p>
    </section>

    <section class="card">
      <h2>Upload an Image</h2>
      <input type="file" id="imageUpload" accept="image/png,image/jpeg,image/jpg,image/gif" />
      <p class="helper">Supported formats: JPG, PNG, GIF</p>
      <div id="imagePreview" class="image-preview"></div>
    </section>

    <section class="card">
      <h2>Pattern Settings</h2>

      <label for="yarnWeight">Yarn Weight</label>
      <select id="yarnWeight">
        <option value="lace">Lace (2-ply)</option>
        <option value="fingering">Fingering (4-ply)</option>
        <option value="sport">Sport (5-ply)</option>
        <option value="dk">DK (8-ply)</option>
        <option value="worsted" selected>Worsted (10-ply)</option>
        <option value="bulky">Bulky (12-ply)</option>
      </select>

      <label for="stitchesPerInch">Stitches per Inch</label>
      <input type="number" id="stitchesPerInch" min="2" max="12" step="0.5" value="5" />

      <label for="gridWidth">Pattern Width (stitches)</label>
      <input type="number" id="gridWidth" min="10" max="120" step="2" value="40" />
      <p class="helper">Higher numbers create more detail. Lower numbers create simpler patterns.</p>
    </section>

    <section class="card">
      <h2>Choose a Color Palette</h2>
      <div class="palette-list">
        <button type="button" class="palette-btn active" data-palette="rose">Rose Garden</button>
        <button type="button" class="palette-btn" data-palette="earth">Earthbound Harmony</button>
        <button type="button" class="palette-btn" data-palette="morning">Morning Prayer</button>
        <button type="button" class="palette-btn" data-palette="ocean">Ocean Depths</button>
        <button type="button" class="palette-btn" data-palette="forest">Forest Floor</button>
      </div>
    </section>

    <section class="card">
      <h2>Generate Your Pattern</h2>
      <div class="action-group">
        <button id="generateBtn" type="button">Generate Pattern</button>
        <button id="downloadBtn" type="button" disabled>Download Pattern</button>
      </div>
      <div id="statusMessage" class="status-message" style="display:none;"></div>
    </section>

    <section class="card">
      <h2>Your Knitting Pattern</h2>
      <div id="patternGrid"></div>
    </section>

    <section class="card">
      <h2>Instructions</h2>
      <div id="writtenInstructions"></div>
    </section>
  </main>

  <script src="js/script.js"></script>
</body>
</html>