newtab.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coretab</title>
  <link rel="stylesheet" href="variables.css">
  <link rel="stylesheet" href="newtab.css">
</head>
<body>

  <!-- Background layer -->
  <div id="bg" aria-hidden="true"></div>
  <div id="bg-overlay" aria-hidden="true"></div>

  <!-- Clock & Date -->
  <main class="center-stage" role="main">
    <time id="time" class="clock" aria-live="polite" aria-label="Current time">00:00</time>
    <p id="date" class="date-label" aria-live="polite" aria-label="Current date">Monday, January 1</p>

    <!-- Search -->
    <div class="search-wrap" role="search">
      <label for="search-input" class="sr-only">Search the web</label>
      <div class="search-field">
        <span class="search-icon icon icon-search" aria-hidden="true"></span>
        <input
          id="search-input"
          type="search"
          autocomplete="off"
          spellcheck="false"
          placeholder="Search…"
          aria-label="Search the web"
        >
      </div>
    </div>

    <!-- Quick Links -->
    <nav id="quick-links" class="quick-links" aria-label="Quick links"></nav>
  </main>

  <!-- Settings toggle -->
  <button id="settings-btn" class="settings-btn" aria-label="Open settings" aria-expanded="false" aria-controls="sidebar">
    <span class="icon icon-settings" aria-hidden="true"></span>
  </button>

  <!-- Settings Sidebar -->
  <aside id="sidebar" class="sidebar" aria-label="Settings panel" aria-hidden="true" role="complementary">
    <div class="sidebar-inner">
      <header class="sidebar-header">
        <h2 class="sidebar-title">Settings</h2>
        <button id="sidebar-close" class="icon-btn" aria-label="Close settings">
          <span class="icon icon-close" aria-hidden="true"></span>
        </button>
      </header>

      <div class="sidebar-scroll">

        <div id="dnd-hint" class="sr-only">Use drag handles to reorder quick links, or use the move up and move down buttons.</div>

        <!-- Background -->
        <section class="setting-section" aria-labelledby="bg-heading">
          <h3 id="bg-heading" class="section-label">Background</h3>

          <div class="setting-row">
            <label class="row-label" for="bg-type">Type</label>
            <select id="bg-type" class="select-input">
              <option value="color">Solid color</option>
              <option value="gradient">Gradient</option>
              <option value="image">Image</option>
              <option value="video">Video</option>
            </select>
          </div>

          <div id="bg-options-wrap"></div>

          <div class="setting-row mt-2" id="bg-anim-row" hidden>
            <label class="row-label" for="bg-anim">Animate gradient</label>
            <label class="toggle" aria-label="Animate gradient background">
              <input type="checkbox" id="bg-anim" role="switch">
              <span class="toggle-track" aria-hidden="true"></span>
            </label>
          </div>
        </section>

        <!-- Overlay -->
        <section class="setting-section" aria-labelledby="overlay-heading">
          <h3 id="overlay-heading" class="section-label">Overlay</h3>

          <div class="setting-row">
            <label class="row-label" for="overlay-opacity">Dim intensity</label>
            <div class="range-wrap">
              <input type="range" id="overlay-opacity" class="range-input" min="0" max="80" step="5">
              <span id="overlay-opacity-val" class="range-val">0%</span>
            </div>
          </div>
          <p class="tip">Darkens the background so text stays readable.</p>
        </section>

        <!-- Glass -->
        <section class="setting-section" aria-labelledby="glass-heading">
          <h3 id="glass-heading" class="section-label">Glass</h3>

          <div class="setting-row">
            <label class="row-label" for="glass-blur">Blur</label>
            <div class="range-wrap">
              <input type="range" id="glass-blur" class="range-input" min="0" max="40" step="1">
              <span id="glass-blur-val" class="range-val">16px</span>
            </div>
          </div>

          <div class="setting-row">
            <label class="row-label" for="glass-opacity">Surface opacity</label>
            <div class="range-wrap">
              <input type="range" id="glass-opacity" class="range-input" min="0" max="30" step="1">
              <span id="glass-opacity-val" class="range-val">8%</span>
            </div>
          </div>

          <div class="setting-row">
            <label class="row-label" for="glass-border-opacity">Border opacity</label>
            <div class="range-wrap">
              <input type="range" id="glass-border-opacity" class="range-input" min="0" max="30" step="1">
              <span id="glass-border-opacity-val" class="range-val">12%</span>
            </div>
          </div>
        </section>

        <!-- Clock -->
        <section class="setting-section" aria-labelledby="clock-heading">
          <h3 id="clock-heading" class="section-label">Clock</h3>

          <div class="setting-row">
            <label class="row-label" for="clock-24h">24-hour format</label>
            <label class="toggle" aria-label="Enable 24-hour time">
              <input type="checkbox" id="clock-24h" role="switch">
              <span class="toggle-track" aria-hidden="true"></span>
            </label>
          </div>

          <div class="setting-row">
            <label class="row-label" for="show-seconds">Show seconds</label>
            <label class="toggle" aria-label="Show seconds">
              <input type="checkbox" id="show-seconds" role="switch">
              <span class="toggle-track" aria-hidden="true"></span>
            </label>
          </div>

          <div class="setting-row">
            <label class="row-label" for="show-date">Show date</label>
            <label class="toggle" aria-label="Show date below clock">
              <input type="checkbox" id="show-date" role="switch" checked>
              <span class="toggle-track" aria-hidden="true"></span>
            </label>
          </div>

          <div class="setting-row">
            <label class="row-label" for="clock-size">Clock size</label>
            <select id="clock-size" class="select-input">
              <option value="sm">Small</option>
              <option value="md" selected>Medium</option>
              <option value="lg">Large</option>
            </select>
          </div>

          <div class="setting-row">
            <label class="row-label" for="clock-color">Clock color</label>
            <input type="color" id="clock-color" class="color-input" value="#ffffff">
          </div>

          <div class="setting-row">
            <label class="row-label" for="date-color">Date color</label>
            <input type="color" id="date-color" class="color-input" value="#ffffff">
          </div>
        </section>

        <!-- Typography -->
        <section class="setting-section" aria-labelledby="font-heading">
          <h3 id="font-heading" class="section-label">Typography</h3>

          <div class="setting-row">
            <label class="row-label" for="font-family">Font family</label>
            <select id="font-family" class="select-input">
              <option value="inter">Inter</option>
              <option value="system">System UI</option>
              <option value="mono">Monospace</option>
              <option value="serif">Serif</option>
            </select>
          </div>

          <div class="setting-row">
            <label class="row-label" for="font-weight">Clock weight</label>
            <select id="font-weight" class="select-input">
              <option value="200">Thin (200)</option>
              <option value="300">Light (300)</option>
              <option value="400">Regular (400)</option>
              <option value="500" selected>Medium (500)</option>
              <option value="600">Semibold (600)</option>
              <option value="700">Bold (700)</option>
            </select>
          </div>

          <div class="setting-row">
            <label class="row-label" for="font-variation">Optical size</label>
            <div class="range-wrap">
              <input type="range" id="font-variation" class="range-input" min="-50" max="100" step="1" value="0">
              <span id="font-variation-val" class="range-val">0</span>
            </div>
          </div>
          <p class="tip">Inter Variable's optical size axis sharpens or softens letter forms.</p>

          <div class="setting-row">
            <label class="row-label" for="letter-spacing">Letter spacing</label>
            <div class="range-wrap">
              <input type="range" id="letter-spacing" class="range-input" min="-5" max="20" step="1" value="-2">
              <span id="letter-spacing-val" class="range-val">-2</span>
            </div>
          </div>
        </section>

        <!-- Text -->
        <section class="setting-section" aria-labelledby="text-heading">
          <h3 id="text-heading" class="section-label">Text</h3>

          <div class="setting-row">
            <label class="row-label" for="text-primary-opacity">Primary opacity</label>
            <div class="range-wrap">
              <input type="range" id="text-primary-opacity" class="range-input" min="50" max="100" step="1">
              <span id="text-primary-opacity-val" class="range-val">95%</span>
            </div>
          </div>

          <div class="setting-row">
            <label class="row-label" for="text-secondary-opacity">Secondary opacity</label>
            <div class="range-wrap">
              <input type="range" id="text-secondary-opacity" class="range-input" min="20" max="80" step="1">
              <span id="text-secondary-opacity-val" class="range-val">55%</span>
            </div>
          </div>
        </section>

        <!-- Search -->
        <section class="setting-section" aria-labelledby="search-heading">
          <h3 id="search-heading" class="section-label">Search</h3>

          <div class="setting-row">
            <label class="row-label" for="search-engine">Engine</label>
            <select id="search-engine" class="select-input">
              <option value="google">Google</option>
              <option value="bing">Bing</option>
              <option value="duckduckgo">DuckDuckGo</option>
              <option value="ecosia">Ecosia</option>
              <option value="startpage">Startpage</option>
              <option value="brave">Brave Search</option>
              <option value="yahoo">Yahoo</option>
            </select>
          </div>

          <div class="setting-row">
            <label class="row-label" for="open-new-tab">New tab</label>
            <label class="toggle" aria-label="Open results in new tab">
              <input type="checkbox" id="open-new-tab" role="switch" checked>
              <span class="toggle-track" aria-hidden="true"></span>
            </label>
          </div>
          <p class="tip">When on, searches open in a new tab instead of the current one.</p>

          <div class="setting-row">
            <label class="row-label" for="search-radius">Border radius</label>
            <div class="range-wrap">
              <input type="range" id="search-radius" class="range-input" min="0" max="100" step="1">
              <span id="search-radius-val" class="range-val">100px</span>
            </div>
          </div>
        </section>

        <!-- Quick Links -->
        <section class="setting-section" aria-labelledby="links-heading">
          <h3 id="links-heading" class="section-label">Quick Links</h3>

          <div class="setting-row">
            <label class="row-label" for="show-favicons">Show favicons</label>
            <label class="toggle" aria-label="Show favicon icons on quick links">
              <input type="checkbox" id="show-favicons" role="switch">
              <span class="toggle-track" aria-hidden="true"></span>
            </label>
          </div>
          <p class="tip">Add up to 8 shortcut links shown below the clock. Drag items to reorder. Use full URLs including <code>https://</code>.</p>
          <div id="links-list" class="links-list" role="list" aria-label="Quick links list"></div>
          <button id="add-link-btn" class="full-btn" aria-label="Add a new quick link">
            <span class="icon icon-add" aria-hidden="true"></span>
            Add Link
          </button>
        </section>

        <!-- Custom CSS -->
        <section class="setting-section" aria-labelledby="custom-css-heading">
          <h3 id="custom-css-heading" class="section-label">Custom CSS</h3>
          <p class="tip">Write your own CSS to override any style. Useful for advanced gradients, animations, or layout tweaks.</p>
          <p class="tip"><strong>Examples:</strong></p>
          <p class="tip"><code>.clock { text-shadow: 0 0 20px #ff00ff; }</code> — glow effect</p>
          <p class="tip"><code>#bg { background: radial-gradient(circle at 30% 30%, #1a1a2e, #0d0d10); }</code> — radial gradient</p>
          <p class="tip"><code>.quick-link { border-radius: 8px; }</code> — square quick links</p>
          <p class="tip"><code>.center-stage { gap: 2rem; }</code> — more spacing</p>
          <textarea id="custom-css-input" class="notes-textarea" placeholder="/* Your custom CSS here */" aria-label="Custom CSS" spellcheck="false"></textarea>
        </section>

        <!-- Data Management -->
        <section class="setting-section" aria-labelledby="data-heading">
          <h3 id="data-heading" class="section-label">Data Management</h3>
          <p class="tip">Export your settings to a file, import from a file, or reset everything to defaults.</p>

          <div class="setting-row mt-2">
            <span class="row-label">Export settings</span>
            <button id="export-btn" class="full-btn" style="width:auto; padding:0.45rem 1rem;" aria-label="Export settings to JSON file">
              <span class="icon icon-download" aria-hidden="true"></span>
              Export
            </button>
          </div>

          <div class="setting-row mt-2">
            <span class="row-label">Import settings</span>
            <label class="file-btn" style="width:auto; padding:0.45rem 1rem;" aria-label="Import settings from JSON file">
              <span class="icon icon-upload" aria-hidden="true"></span>
              Import
              <input type="file" id="import-file" accept=".json,application/json">
            </label>
          </div>
          <p id="import-status" class="tip" aria-live="polite"></p>

          <div class="setting-row mt-2" style="margin-top:0.75rem;">
            <span class="row-label" style="color:var(--danger);">Reset all data</span>
            <button id="reset-btn" class="full-btn" style="width:auto; padding:0.45rem 1rem; color:var(--danger);" aria-label="Reset all settings to default">
              <span class="icon icon-delete" aria-hidden="true"></span>
              Reset
            </button>
          </div>
          <p class="tip"><span class="icon icon-warning" style="width:0.75em;height:0.75em;vertical-align:middle;margin-right:0.25em;"></span>This cannot be undone. All your settings and quick links will be lost.</p>
        </section>

      </div>
    </div>
  </aside>

  <!-- Backdrop -->
  <div id="backdrop" class="backdrop" aria-hidden="true"></div>

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