index.html

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

<body class="theme-light">
  <div class="toolbar">
    <div class="controls">
      <button id="add-note">New Entry</button>

      <label>Importance:</label>
      <div class="color-swatch low" data-importance="low"></div>
      <div class="color-swatch medium" data-importance="medium"></div>
      <div class="color-swatch high" data-importance="high"></div>

      <button id="toggle-theme">Toggle Theme</button>
      <button id="clear-notes">Clear Board</button>
    </div>
    <div class="help">
      Drag, resize, edit, and color notes. Notes are saved automatically. Click the cat to view completed notes. Use the "Clear Board" button to remove all notes.
    </div>
  </div>

  <div class="board" id="board"></div>

  <div class="completion-cat" id="completion-cat" role="button" aria-label="View completed notes">
    <div class="cat-box">
      <img id="cat-image" src="sleeping-cat.png" alt="Sleeping cat" class="cat-img">
    </div>
  </div>

  <div class="completed-panel" id="completed-panel" aria-hidden="true">
    <div class="completed-panel-header">
      <div>
        <h2>Completed Notes</h2>
        <p class="completed-panel-subtitle">Click the cat to open this list.</p>
      </div>
      <button id="close-completed" class="icon-button" aria-label="Close completed notes">✕</button>
    </div>
    <div id="completed-list" class="completed-list"></div>
    <div class="completed-panel-actions">
      <button id="clear-completed" class="secondary">Clear Completed</button>
    </div>
  </div>

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