Skip to content

Commit 49af6c9

Browse files
Dhureen7Dhureen7
committed
2 parents eb557df + 79f1a5c commit 49af6c9

File tree

3 files changed

+1271
-810
lines changed

3 files changed

+1271
-810
lines changed

‎projects/notes/index.html‎

Lines changed: 65 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,62 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Notes App</title>
7+
<title>Notes App with Theme Switcher</title>
78
<link rel="stylesheet" href="styles.css">
9+
810
</head>
11+
912
<body>
13+
<div class="theme-toggle-container">
14+
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme" aria-pressed="false">
15+
<svg class="theme-icon" id="themeIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
16+
<!-- Moon icon (default) -->
17+
<path class="moon-icon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor"
18+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
19+
<!-- Sun icon (hidden by default) -->
20+
<g class="sun-icon" style="display: none;">
21+
<circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" />
22+
<line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
23+
<line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2"
24+
stroke-linecap="round" />
25+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2"
26+
stroke-linecap="round" />
27+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2"
28+
stroke-linecap="round" />
29+
<line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
30+
<line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"
31+
stroke-linecap="round" />
32+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2"
33+
stroke-linecap="round" />
34+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2"
35+
stroke-linecap="round" />
36+
</g>
37+
</svg>
38+
<span class="sr-only">Dark Mode</span>
39+
</button>
40+
</div>
41+
1042
<div class="container">
1143
<div class="left-panel">
1244
<div class="header-row">
1345
<h1>Create Note</h1>
14-
<button class="toggle-btn" id="themeToggle">🌙</button>
1546
</div>
16-
47+
1748
<!-- Enhanced Form -->
1849
<div class="notes-form-container">
1950
<form id="form" class="notes-form" aria-labelledby="form-title">
2051
<h2 id="form-title" class="form-title">Add New Note</h2>
21-
52+
2253
<div class="form-group">
2354
<label for="title" class="form-label">
2455
Title
2556
<span class="required-indicator" aria-hidden="true">*</span>
2657
</label>
27-
<input
28-
type="text"
29-
id="title"
30-
class="form-input"
31-
placeholder="Enter note title"
32-
aria-required="true"
33-
required
34-
maxlength="100"
35-
>
58+
<input type="text" id="title" class="form-input" placeholder="Enter note title"
59+
aria-required="true" required maxlength="100">
3660
<div class="character-count">
3761
<span id="title-count">0</span>/100
3862
</div>
@@ -55,15 +79,8 @@ <h2 id="form-title" class="form-title">Add New Note</h2>
5579
Content
5680
<span class="required-indicator" aria-hidden="true">*</span>
5781
</label>
58-
<textarea
59-
id="content"
60-
class="form-textarea"
61-
placeholder="Write your note here..."
62-
aria-required="true"
63-
required
64-
maxlength="1000"
65-
rows="5"
66-
></textarea>
82+
<textarea id="content" class="form-textarea" placeholder="Write your note here..."
83+
aria-required="true" required maxlength="1000" rows="4"></textarea>
6784
<div class="character-count">
6885
<span id="content-count">0</span>/1000
6986
</div>
@@ -80,26 +97,47 @@ <h2 id="form-title" class="form-title">Add New Note</h2>
8097
</form>
8198
</div>
8299
</div>
83-
100+
84101
<div class="right-panel">
85102
<h1>My Notes</h1>
86103
<div class="notes-header">
87104
<input type="text" id="search" placeholder="Search notes...">
88105
</div>
89106
<div class="filter-bar">
90-
<label>Filter by tag:</label>
91-
<select id="tagFilter">
107+
<label for="tagFilter">Filter by tag:</label>
108+
<select id="tagFilter" class="form-select">
92109
<option value="">All tags</option>
93110
<option value="personal">Personal</option>
94111
<option value="work">Work</option>
95112
<option value="ideas">Ideas</option>
113+
<option value="important">Important</option>
96114
<option value="study">Study</option>
97115
</select>
98116
</div>
99117
<div class="grid" id="notes"></div>
100118
</div>
101119
</div>
102-
103-
<script src="main.js"></script>
120+
121+
<!-- Delete Confirmation Modal -->
122+
<div class="modal-overlay" id="deleteModal">
123+
<div class="modal">
124+
<div class="modal-header">
125+
<svg class="modal-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
126+
<path
127+
d="M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
128+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
129+
</svg>
130+
<h3 class="modal-title">Delete Note</h3>
131+
</div>
132+
<div class="modal-body">
133+
Are you sure you want to delete this note? This action cannot be undone.
134+
</div>
135+
<div class="modal-footer">
136+
<button class="modal-btn modal-btn-cancel" id="cancelDelete">Cancel</button>
137+
<button class="modal-btn modal-btn-confirm" id="confirmDelete">Delete</button>
138+
</div>
139+
</div>
140+
</div>
104141
</body>
142+
<script src="main.js"></script>
105143
</html>

0 commit comments

Comments
 (0)