DSAProgresstracker/index.html at main · shubhd556/DSAProgresstracker · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <title>NeetCode 150 — Personal Tracker</title>

    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <!-- Decorative background -->
    <div class="bg-stage" aria-hidden="true">
        <div class="bg-blob b1"></div>
        <div class="bg-blob b2"></div>
        <div class="bg-blob b3"></div>
        <div class="bg-noise"></div>
    </div>

    <!-- App shell -->
    <div class="app-shell">
        <header class="app-header glass">
            <div class="title">
                <!-- Inline logo icon -->
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <defs>
                        <linearGradient id="g" x1="0" x2="1" y1="1" y2="0">
                            <stop offset="0" stop-color="#3b82f6" />
                            <stop offset="1" stop-color="#a78bfa" />
                        </linearGradient>
                    </defs>
                    <path d="M12 2l2.5 5 5 .7-3.6 3.6.9 5-4.8-2.6L7.2 16l.9-5L4.5 7.7l5-.7L12 2z" fill="url(#g)"
                        opacity=".95" />
                </svg>
                <div class="title-text">
                    <h1>NeetCode 150 — Personal Tracker</h1>
                    <div class="subtitle">Your interview prep, beautifully organized</div>
                </div>
            </div>

            <nav class="tabs" role="tablist" aria-label="Views">
                <button class="tab active" data-tab="topics" role="tab" aria-selected="true">Topics</button>
                <button class="tab" data-tab="all-problems" role="tab" aria-selected="false">All Problems</button>
                <button class="tab" data-tab="stats" role="tab" aria-selected="false">Stats</button>
            </nav>
        </header>

        <section class="toolbar glass">
            <div class="points">
                <span class="label">Glory Points</span>
                <div class="points-value">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M12 2l2.09 6.26H20l-5.17 3.76L16.91 18 12 14.73 7.09 18l2.08-5.98L4 8.26h5.91L12 2z"
                            fill="#f59e0b" />
                    </svg>
                    <strong id="gloryPoints">0</strong>
                </div>
            </div>
            <div class="actions">
                <button id="btnImport" class="secondary" title="Import JSON">Import</button>
                <button id="btnExport" class="secondary" title="Export progress JSON">Export</button>
                <button id="btnReset" class="danger" title="Reset progress">Reset</button>
            </div>
        </section>

        <!-- Panels -->
        <main class="panels">
            <!-- Topics -->
            <section id="tab-topics" class="tab-panel glass active" role="tabpanel">
                <div id="topicsContainer" class="accordion"></div>
            </section>

            <!-- All Problems -->
            <section id="tab-all-problems" class="tab-panel glass" role="tabpanel" hidden>
                <div class="filters">
                    <div class="field">
                        <label for="searchInput">Search</label>
                        <input id="searchInput" type="search" placeholder="Search by title…" />
                    </div>
                    <div class="field">
                        <label for="filterTopic">Topic</label>
                        <select id="filterTopic">
                            <option value="">All Topics</option>
                        </select>
                    </div>
                    <div class="field">
                        <label for="filterDifficulty">Difficulty</label>
                        <select id="filterDifficulty">
                            <option value="">All</option>
                            <option value="Easy">Easy</option>
                            <option value="Medium">Medium</option>
                            <option value="Hard">Hard</option>
                        </select>
                    </div>
                    <div class="field">
                        <label for="filterStatus">Status</label>
                        <select id="filterStatus">
                            <option value="">All</option>
                            <option value="done">Completed</option>
                            <option value="todo">Not Completed</option>
                        </select>
                    </div>
                    <div class="field">
                        <label for="sortBy">Sort</label>
                        <select id="sortBy">
                            <option value="title-asc">Title ↑</option>
                            <option value="title-desc">Title ↓</option>
                            <option value="difficulty-asc">Difficulty ↑</option>
                            <option value="difficulty-desc">Difficulty ↓</option>
                            <option value="topic-asc">Topic ↑</option>
                            <option value="topic-desc">Topic ↓</option>
                        </select>
                    </div>
                </div>

                <div class="table-wrap">
                    <table class="problems-table">
                        <thead>
                            <tr>
                                <th>Status</th>
                                <th>Title</th>
                                <th>Difficulty</th>
                                <th>Topic</th>
                                <th>Points</th>
                            </tr>
                        </thead>
                        <tbody id="allProblemsTbody"></tbody>
                    </table>
                </div>
            </section>

            <!-- Stats -->
            <section id="tab-stats" class="tab-panel glass" role="tabpanel" hidden>
                <div class="stats-grid">
                    <div class="card glass">
                        <h3>Total Progress</h3>
                        <div class="progress">
                            <div class="bar"><span id="overallProgressBar"></span></div>
                            <div class="meta"><span id="overallCount">0/150</span></div>
                        </div>
                    </div>

                    <div class="card glass">
                        <h3>By Difficulty</h3>
                        <ul id="difficultyBreakdown" class="list"></ul>
                    </div>

                    <div class="card glass">
                        <h3>By Topic</h3>
                        <ul id="topicBreakdown" class="list"></ul>
                    </div>
                </div>
            </section>
        </main>

        <footer class="app-footer glass">
            <small>Built for your NeetCode 150 journey. Progress is saved locally in your browser.</small>
        </footer>
    </div><!-- /.app-shell -->

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

</html>