ismis-helper/popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <header class="top">
    <h1>ISMIS Helper</h1>
    <div class="master">
      <label class="switch">
        <input type="checkbox" id="masterToggle">
        <span class="slider"></span>
      </label>
      <span id="masterLabel">Enabled</span>
    </div>
  </header>

  <section class="tab">
    <h2>Profiles</h2>
    <ul id="profileList" class="profile-list"></ul>
    <button id="addProfile" class="btn">+ Add Profile</button>
    <div id="profileForm" class="form" hidden>
      <input id="pName" placeholder="Profile name">
      <input id="pUsername" placeholder="Username">
      <input id="pPassword" type="password" placeholder="Password">
      <label class="row"><input type="checkbox" id="pEnabled"> Enabled</label>
      <div class="btn-row">
        <button id="saveProfile" class="btn primary">Save</button>
        <button id="cancelProfile" class="btn">Cancel</button>
      </div>
    </div>
  </section>

  <section class="tab">
    <h2>PDF Settings</h2>
    <label class="row"><input type="checkbox" id="truncateToggle"> Truncate long course descriptions (official PDF style)</label>
    <label class="row"><input type="checkbox" id="showYearToggle"> Show Year Level on the PDF</label>
    <div class="row">Year Level mode:
      <select id="yearMode">
        <option value="auto">Auto (recommended)</option>
        <option value="custom">Use custom value</option>
        <option value="off">Profile value only</option>
      </select>
    </div>
    <label class="row">Custom Year Level (optional):
      <input type="text" id="customYear" placeholder="e.g. 3">
    </label>
    <p class="hint">Auto derives the standing of the semester being printed (from
      View Grades, or remaining units). Profile value only disables derivation.</p>
  </section>

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