-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlibrary-management.html
286 lines (241 loc) · 13.7 KB
/
library-management.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
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!--
*********************************************************************************************
* File: library-management.html
* Author: Madhurima Rawat
* Date: January 26, 2025
* Description: This is the webpage for the Library Management System, a project developed by
* Madhurima Rawat. The page provides an overview of the system, its purpose,
* the technologies used, and the inspiration behind the project. It includes
* detailed sections such as "Inspiration Behind", "Technologies", and "Conclusion",
* offering a complete look at the development process and final product.
* Version: 1.0
* GitHub Repository: https://github.com/madhurimarawat/Library-Management-System
* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section.
* Comments:
- The page introduces the Library Management System project and highlights its purpose of streamlining
library operations with a modern, user-friendly interface.
- It features images and memes that illustrate the inspiration and process behind the project.
- Links to the GitHub repository and deployed website are provided for further exploration.
- Sections provide insight into the technologies used, the project journey, and the inspiration behind its development.
- The page is styled using Bootstrap 4.6.1 and custom CSS, with Font Awesome icons for navigation and links.
* Dependencies:
- Font Awesome 5.15.4: Provides icons for social links and external links.
- Bootstrap 4.6.1: Ensures responsive layout and styling for the page.
- Custom CSS (index.css): Defines the unique styling for the webpage.
- JavaScript (index.js): Manages dynamic interactions and functionalities.
*********************************************************************************************
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Madhurima Mindscape</title>
<!-- Meta Tags for SEO -->
<meta name="description"
content="Madhurima Mindscape is a personal website showcasing the blend of technology, creativity, and personal insights. Explore projects, tech insights, and creative photography.">
<meta name="keywords"
content="Madhurima Mindscape, Library Management System, tech insights, creative photography, web development projects, portfolio, JavaScript, HTML, CSS, Bootstrap, front-end development">
<meta name="author" content="Madhurima Rawat">
<meta name="robots" content="index, follow">
<!--
Specifies the publication date and time in ISO 8601 format.
The structure includes:
- Date in YYYY-MM-DD format:
YYYY = 4-digit year (e.g., 2024)
MM = 2-digit month (e.g., 12 for December)
DD = 2-digit day (e.g., 18)
- A literal 'T' separator between date and time.
- Time in HH:MM:SS format:
HH = 2-digit hour in 24-hour format (e.g., 15 for 3 PM in UTC)
MM = 2-digit minutes (e.g., 20)
SS = 2-digit seconds (e.g., 13)
- 'Z' at the end indicates the time is in Coordinated Universal Time (UTC).
Example: "2024-12-18T15:20:13Z" represents December 18, 2024, at 3:20:13 PM UTC.
-->
<!-- Specifies the publication date and time in ISO 8601 format -->
<meta name="date" content="2024-12-18T15:20:13Z" />
<!-- Last Updated -->
<meta name="last-modified" content="2025-01-26T13:04:28Z">
<!-- Open Graph Meta Tags for social sharing -->
<meta property="og:title" content="Madhurima Mindscape - Explore Personal and Tech Insights" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://madhurimarawat.github.io/Madhurima-Mindscape/" />
<meta property="og:description"
content="Dive into Madhurima Mindscape - a space for personal reflections, tech insights, project stories, and creative photography." />
<meta property="og:image"
content="https://github.com/madhurimarawat/Library-Management-System/blob/main/Image/library-3.jpg" />
<meta property="og:image:alt" content="Big Data Blog Snapshot" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Madhurima Mindscape - Explore Personal and Tech Insights" />
<meta name="twitter:description"
content="Dive into Madhurima Mindscape - a space for personal reflections, tech insights, project stories, and creative photography." />
<meta name="twitter:image"
content="https://github.com/madhurimarawat/Library-Management-System/blob/main/Image/library-3.jpg" />
<!-- For PNG and SVG logos -->
<link rel="icon" href="images/Logo.png" type="image/png">
<!-- Bootstrap CSS CDN-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/contents.css">
<!-- Link to Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<script defer src="js/index.js"></script>
</head>
<body>
<!-- Placing the div with a specific id to insert the navbar -->
<div id="header-container"></div>
<h2>Library Management System</h2>
<section class="intro">
<p>
<blockquote class="blockquote">
“A well-organized library system is essential for enhancing user experience and ensuring smooth operations.”
</blockquote>
</p>
<p>
This is the Library Management System Website, developed as an independent project for the Third Semester of
my
College. The system is designed to simplify the management of books, patrons, and staff interactions,
ensuring
efficient library operations.
</p>
<p>
The project leverages modern web technologies, including HTML, CSS, JavaScript, and Bootstrap, to create a
user-friendly platform for library management. The system is responsive, making it accessible on both
desktop
and mobile devices, offering a seamless user experience.
</p>
<p>
The primary goal was to create a frictionless user experience, which has been achieved through responsive
design
and a simple, attractive interface. The website works seamlessly across different devices and screen sizes,
making library management accessible anywhere, anytime.
</p>
<div class="image-caption">
<p>
GitHub Repository:
<a href="https://github.com/madhurimarawat/Library-Management-System" target="_blank"
class="image-caption-link">
<i class="fab fa-github"></i> GitHub
</a>
</p>
<p>
Deployed Link:
<a href="https://library-management-website.netlify.app/" target="_blank" class="image-caption-link">
<i class="fa fa-globe"></i> Visit Website
</a>
</p>
</div>
</section>
<section>
<h3>Inspiration Behind</h3>
<blockquote class="blockquote">
“Sometimes, the best ideas come from the moments of frustration that make you realize there’s a better way.”
</blockquote>
<p>
Now, this was all about the professional coder details and stuff, but let me tell you the main reason behind
this idea.
</p>
<p>
So one day, I went to the library with a friend (this happens rarely, much rarer than a comet these days,
especially with e-books everywhere). And here’s what happened:
</p>
<div style="display: flex; justify-content: center; align-items: center;" class="meme">
<img src="https://i.pinimg.com/originals/3f/e3/91/3fe391c07970301c5bda479ecde87c64.jpg" alt="Library Image"
height="400px" class="image">
</div>
<div>
<p class="image-caption">Library Books (<a
href="https://media.makeameme.org/created/big-data-big-ce2802fe07.jpg" target="_blank"
class="image-caption-link">Source</a>)</p>
</div>
<p>
As we walked through the aisles, we found ourselves looking through books, not to read them, but to admire
the
beautiful cover pages of other books. It’s funny how much time we spent on that, instead of actually reading
📖.
<br>
And the real kicker? When we finally went to return the book, we spent ages searching through old register
logs
to find our names. This was basically us:
</p>
<div style="display: flex; justify-content: center; align-items: center;" class="meme">
<img src="https://i.imgflip.com/17wzbd.jpg" alt="Meme: Searching in the Register" height="400px"
class="image">
</div>
<div>
<p class="image-caption">Searching (<a href="https://i.imgflip.com/17wzbd.jpg" target="_blank"
class="image-caption-link">Source</a>)</p>
</div>
<p>
After searching through a couple of registers, we finally found our names and returned the book. During this
whole process, I got notified about the third-semester project and thought: Why not create a system that can
save time? Instead of spending all that time looking for books or waiting in line, why not use technology to
help us check if a book is available and streamline the name search process?
</p>
<p>
The idea was simple: to save time ⏰ and make library visits more efficient, all while making the experience
smoother for everyone.
</p>
</section>
<section>
<h3>Technologies</h3>
<blockquote class="blockquote">
“From a simple thought to something tangible — that’s the real magic of creating.”
</blockquote>
<p>So, this is how the idea came together. The next challenge was deciding which technologies to use. Since I
had
experience with front-end development, I decided to use technologies I was familiar with—HTML, CSS, and
JavaScript.</p>
<p>This meme pretty much sums up how I felt about HTML, CSS, and JavaScript:</p>
<div style="display: flex; justify-content: center; align-items: center;">
<img src="https://programmerhumor.io/wp-content/uploads/2022/08/programmerhumor-io-java-memes-javascript-memes-563425cde539e29-758x844.jpg"
height="400px" alt="HTML CSS JavaScript Meme" class="image">
</div>
<div>
<p class="image-caption">Frontend Tech (<a
href="https://programmerhumor.io/wp-content/uploads/2022/08/programmerhumor-io-java-memes-javascript-memes-563425cde539e29-758x844.jpg"
target="_blank" class="image-caption-link">Source</a>)</p>
</div>
<p>Once the front-end was designed, my teammate took charge of the back-end. After the development phase, we
were
able to complete the project. I then deployed the front-end using Netlify and GitHub Pages.</p>
<p>It was a fun experience, and this was my first project where I felt so fulfilled—executing an idea and
turning it
into a fully functional product. The capability to actually create something from scratch was truly amazing.
</p>
</section>
<section class="conclusion">
<p>
So, that’s the thought process behind my project. It’s not just about the technical details but also about
how
it all began. I wanted to share some of the fun moments along the way—because every project has its own
unique
journey! I hope you found this explanation both enjoyable and insightful.
</p>
<p>
If you’re curious about the technical aspects, feel free to visit my <a
href="https://github.com/madhurimarawat/Library-Management-System" target="_blank"
class="link">GitHub</a> for more in-depth
information. For the website’s design and all
related links, you can check out the deployed website. The aim here was to show how the idea took shape and
was
brought to life.
</p>
<p>
If you have any questions or would like to get in touch, feel free to contact me at:
<a href="mailto:rawatmadhurima@gmail.com" class="link">email</a>
</p>
</section>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<br>
</body>
<footer class="footer-section">
<p>© 2024 Madhurima Mindscape. All rights reserved.</p>
</footer>
</html>