PixelStudy/index.html at main · pixelwing/PixelStudy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Study Resource Hub — Enhanced</title>
  <!-- Google fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="icon" type="image/x-icon" href="./assets/PixelStudyLogo.png">
</head>

<body class="light">
  <header>
    <div class="brand">
      <div class="logo"><img src="./assets/PixelStudyLogo.png" alt="logo" srcset=""></div>
      <div>
        <h1>Study Resource Hub</h1>
        <p>Curated learning links — quick, pretty, and persistent</p>
      </div>
    </div>

    <div class="controls">
      <div class="search" role="search" aria-label="Search resources">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            d="M21 21l-4.35-4.35" />
          <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round" />
        </svg>
        <input id="search" placeholder="Search resources or subjects..." />
        <button id="clear-search" class="icon-btn" title="Clear search" aria-label="Clear search">✖</button>
      </div>

      <button id="theme-toggle" class="icon-btn" title="Toggle theme" aria-pressed="false">🌙</button>
      <a class="icon-btn" href="https://github.com/pixelwing/PixelStudy" target="_blank" rel="noopener"
        title="View repository">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path
            d="M12 .5C5.73.5.98 5.25.98 11.5c0 4.68 3.03 8.63 7.25 10.03.53.1.73-.23.73-.51 0-.25-.01-.91-.01-1.79-2.95.64-3.57-1.27-3.57-1.27-.48-1.21-1.17-1.54-1.17-1.54-.96-.66.07-.65.07-.65 1.06.08 1.62 1.09 1.62 1.09.94 1.6 2.46 1.14 3.06.87.09-.67.37-1.14.67-1.4-2.36-.27-4.84-1.2-4.84-5.36 0-1.18.42-2.14 1.11-2.89-.12-.27-.48-1.35.11-2.81 0 0 .9-.29 2.95 1.1A10.2 10.2 0 0112 6.3c.91.004 1.83.12 2.69.35 2.05-1.39 2.95-1.1 2.95-1.1.59 1.46.23 2.54.11 2.81.69.75 1.11 1.71 1.11 2.89 0 4.17-2.49 5.09-4.86 5.35.38.33.72.99.72 2v2.96c0 .28.2.61.74.5C19.99 20.12 23 16.17 23 11.5 23 5.25 18.27.5 12 .5z"
            fill="currentColor" />
        </svg>
      </a>
    </div>
  </header>

  <main>
    <aside class="tabs" aria-labelledby="subject-list">
      <h2 id="subject-list">Subjects</h2>
      <div class="subject-list" id="subjects"></div>

      <div class="add-subject">
        <input id="new-subject-name" placeholder="Add subject (e.g., Math)" aria-label="New subject name">
        <button id="add-subject-btn" class="btn-primary">Add</button>
      </div>
    </aside>

    <section class="content" id="main-content" aria-live="polite">
      <div class="content-header">
        <h3 id="current-subject-title">All Resources</h3>
        <div style="display:flex;gap:0.5rem;align-items:center">
          <button id="open-add" class="btn-primary">+ Add Resource</button>
          <button id="reset-sample" class="btn-ghost" title="Reset sample data">Reset</button>
        </div>
      </div>

      <div id="resources-area">
        <div class="resource-grid" id="resource-grid"></div>
      </div>

      <p style="margin-top:0.8rem;font-size:0.85rem;color:var(--muted)">Tip: Use the search box to filter resources.
        Click a subject to focus on it.</p>
    </section>
  </main>

  <footer>
    <small>Made with ❤️ by PixelStudy </small>
  </footer>

  <!-- Modal -->
  <div class="modal" id="modal">
    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modal-title">
      <h4 id="modal-title">Add New Resource</h4>
      <div style="display:flex;flex-direction:column;gap:0.6rem;margin-top: 24px;">
        <div class="form-row">
          <label for="modal-subject">Subject</label>
          <input id="modal-subject" placeholder="Subject (e.g., Biology)" />
        </div>
        <div class="form-row">
          <label for="modal-name">Resource</label>
          <input id="modal-name" placeholder="Resource name (e.g., Khan Academy)" />
        </div>
        <div class="form-row">
          <label for="modal-link">URL</label>
          <input id="modal-link" placeholder="https://example.com" />
        </div>
        <div style="display:flex;justify-content:flex-end;gap:0.5rem;margin-top:0.4rem">
          <button id="modal-cancel" class="btn-ghost">Cancel</button>
          <button id="modal-save" class="btn-primary">Save</button>
        </div>
      </div>
    </div>
  </div>

  <script src="./js/index.js" defer></script>
</body>

</html>