forked from arjad/chrome-notes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
78 lines (73 loc) · 2.5 KB
/
popup.html
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
<!--boilerplate-->
<!DOCTYPE html>
<html>
<head>
<title>I Notes</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="popup.css" />
</head>
<body data-size="small">
<div class="container-fluid p-0">
<!-- Header -->
<nav class="d-flex align-items-center justify-content-between mb-3">
<div class="d-flex align-items-center">
<h6 class="d-flex align-items-center mb-0">
<img src="assets/note.png" width="22" height="22" />
<span>
<i class="i-notes bold mx-1"> i </i>
Notes
</span>
</h6>
</div>
<div class="d-flex align-items-center gap-2">
<input
type="text"
id="search-input"
class="form-control form-control-sm input-tag"
placeholder="Search notes..."
/>
<i
class="fa-solid fa-gear"
id="settings-icon"
style="cursor: pointer"
></i>
</div>
</nav>
<!-- Notes List -->
<div id="notes-list" class=""></div>
<!-- Note Input -->
<textarea
id="note-input"
class="form-control bg-transparent input-tag mb-2"
rows="4"
placeholder="Enter your note here..."
></textarea>
<!-- Save Button Area -->
<div class="position-relative py-2 my-2">
<div class="error-msg text-danger small">
<i class="fa-solid fa-circle-info me-1"></i>
<span>Please enter a note.</span>
</div>
<button id="save-btn" class="btn btn-sm rounded-pill px-3 text-white position-absolute end-0">
Save Note
</button>
<br>
</div>
<!-- Delete Modal -->
<div id="delete-modal" class="delete-modal">
<div class="modal-content p-3">
<h3 class="fs-6 mb-3">Are you sure you want to delete this note?</h3>
<div class="d-flex justify-content-center gap-2">
<button id="confirm-delete" class="btn btn-sm btn-danger">
Delete
</button>
<button id="cancel-delete" class="btn btn-sm btn-secondary">
Cancel
</button>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>