NoteNest/admin.html at main · CodewithsushilOfficial/NoteNest · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NoteNest Admin - Notes Management</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="admin-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- Navigation Bar -->
    <nav class="navbar">
        <div class="container">
            <div class="logo">
                <h1>NoteNest</h1>
            </div>
            <ul class="nav-links">
                <li><a href="index.html">Back to Website</a></li>
                <li><a href="#" id="logoutBtn" class="logout-link" style="display: none;">Logout</a></li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </div>
    </nav>

    <!-- Admin Login Section -->
    <section id="adminLogin" class="admin-login">
        <div class="container">
            <h2 class="section-title">Admin Login</h2>
            <div class="login-container">
                <form id="loginForm" class="login-form">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" id="username" placeholder="Enter your username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" id="password" placeholder="Enter your password" required>
                    </div>
                    <button type="submit" class="cta-button login-btn">Login</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Admin Dashboard Section -->
    <section id="adminDashboard" class="admin-dashboard" style="display: none;">
        <div class="container">
            <h2 class="section-title">Admin Dashboard</h2>
            <div class="dashboard-container">
                <div class="dashboard-header">
                    <h3>Manage Notes</h3>
                    <button id="addNoteBtn" class="cta-button">Add New Note</button>
                </div>

                <!-- Add/Edit Note Form -->
                <div id="noteFormContainer" class="note-form-container" style="display: none;">
                    <h3 id="formTitle">Add New Note</h3>
                    <form id="noteForm" class="note-form">
                        <input type="hidden" id="noteId">
                        <div class="form-group">
                            <label for="noteTitle">Title</label>
                            <input type="text" id="noteTitle" placeholder="Enter note title" required>
                        </div>
                        <div class="form-group">
                            <label for="noteSemester">Semester</label>
                            <select id="noteSemester" required>
                                <option value="">Select Semester</option>
                                <option value="1">1st Semester</option>
                                <option value="2">2nd Semester</option>
                                <option value="3">3rd Semester</option>
                                <option value="4">4th Semester</option>
                                <option value="5">5th Semester</option>
                                <option value="6">6th Semester</option>
                                <option value="7">7th Semester</option>
                                <option value="8">8th Semester</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="noteDescription">Description</label>
                            <textarea id="noteDescription" placeholder="Enter note description" rows="4" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="noteDriveLink">Google Drive Link</label>
                            <input type="url" id="noteDriveLink" placeholder="Enter Google Drive link" required>
                        </div>
                        <div class="form-buttons">
                            <button type="submit" class="cta-button save-btn">Save Note</button>
                            <button type="button" id="cancelBtn" class="cancel-btn">Cancel</button>
                        </div>
                    </form>
                </div>

                <!-- Notes Table -->
                <div class="notes-table-container">
                    <div class="table-filters">
                        <div class="search-container">
                            <input type="text" id="adminSearchInput" placeholder="Search notes...">
                            <button id="adminSearchButton"><i class="fas fa-search"></i></button>
                        </div>
                        <div class="filter-container">
                            <label for="adminSemesterFilter">Filter by Semester:</label>
                            <select id="adminSemesterFilter">
                                <option value="all">All Semesters</option>
                                <option value="1">1st Semester</option>
                                <option value="2">2nd Semester</option>
                                <option value="3">3rd Semester</option>
                                <option value="4">4th Semester</option>
                                <option value="5">5th Semester</option>
                                <option value="6">6th Semester</option>
                                <option value="7">7th Semester</option>
                                <option value="8">8th Semester</option>
                            </select>
                        </div>
                    </div>
                    <table class="notes-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Semester</th>
                                <th>Description</th>
                                <th>Drive Link</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="notesTableBody">
                            <!-- Notes will be dynamically loaded here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- Notification System -->
    <div id="notification" class="notification">
        <span id="notificationMessage"></span>
        <button id="closeNotification"><i class="fas fa-times"></i></button>
    </div>

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