settings.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Settings</title>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <div id="settingsPage" style="padding: 30px; width: 80%; margin: auto; font-family: sans-serif;">

    <h2>Settings</h2>

    <div>
      <label for="leagueSelector"><strong>NSDA League:</strong></label>
      <select id="leagueSelector">
        <option value="MMSSL">Massachusetts Middle School Speech League (MMSSL)</option>
        <option value="MSDL">Massachusetts Speech and Debate League (MSDL)</option>
      </select>
      <p>Select your league to update category options and time limits.</p>
    </div>

    <hr />

    <h3>Export Options</h3>
    <div class="exportButtons">
      <label class="exportOption">
        <input type="radio" name="exportFormat" value="txt" checked> .txt
      </label>
      <label class="exportOption">
        <input type="radio" name="exportFormat" value="pdf"> .pdf
      </label>
      <button onclick="downloadZip()">Download .ZIP</button>
      <button onclick="emailZip()">Email .ZIP</button>
    </div>

    <hr />

    <h3>Import Options</h3>
    <div>
      <input type="file" id="zipUploadInput" accept=".zip"><br>
      <label>
        <input type="checkbox" id="overwriteZipCheckbox"> Overwrite existing speeches?
      </label>
      <p>(Warning: Will replace speeches if matching titles exist.)</p>
    </div>

    <hr />
    <button onclick="saveSettings()">Save Settings</button>
    <br><br>
    <a href="index.html">← Back to Editor</a>
  </div>
  <script type="module" src="common.js"></script>
</body>
</html>