EDU HUB NOTED

[aaryan277]

<title>EduNotes Hub</title> <style> body { font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; /* Image URL for background */ background: url('https://images.unsplash.com/photo-1507842217343-583bb7270b66') no-repeat center center/cover; color: #333; } header { background: rgba(0,0,0,0.7); color: white; padding: 20px; text-align: center; } nav { background: #333; padding: 10px; text-align: center; } nav a { color: white; margin: 0 15px; text-decoration: none; font-weight: bold; } section { padding: 20px; } .form-box { max-width: 500px; margin: auto; background: #fdfdf5; padding: 25px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 1px solid #ccc; color: #333; } .form-box input, .form-box textarea, .form-box select { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; background-color: #ffffff; color: #333; } .form-box button { width: 100%; padding: 12px; margin: 15px 0 0; background: #4CAF50; color: white; font-size: 18px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; } .form-box button:hover { background: #45a049; } /* Sections start hidden for dynamic display */ #upload, #library, #login, #register { display: none; } /* Ensure home is visible on load */ #home { display: block !important; }

.notes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.note-card {
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
font-family: "Georgia", serif;
font-style: italic;
font-weight: bold;
border-left: 5px solid #4CAF50;
cursor: pointer;
transition: transform 0.2s;
position: relative;
}
.note-card:hover { transform: translateY(-3px); }
.note-card h3 { margin: 0 0 10px 0; font-size: 1.2em; font-style: normal; }
.note-card p { margin: 5px 0; font-size: 0.9em; font-style: normal; font-weight: normal; }
.color-picker-group { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.color-picker-group > div { flex: 1; text-align: left; }
.color-picker-group label { display: block; font-weight: bold; margin-bottom: 5px; }
.delete-btn {
position: absolute;
top: 5px;
right: 5px;
background: #f44336;
color: white;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: bold;
cursor: pointer;
line-height: 1;
z-index: 10;
padding: 0;
}
.delete-btn:hover { background: #d32f2f; }
footer {
background: #333;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
}
#noteModal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6);
}
.modal-content {
margin: 10% auto;
padding: 20px;
border-radius: 15px;
width: 80%;
max-width: 600px;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
background-color: #fdfdf5;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover { color: #333; }
#modal-note-content { white-space: pre-wrap; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
</style>

📚 EduNotes Hub

Your one-stop platform to share and access notes

Home Register Login Upload Library Logout ()

Welcome to EduNotes Hub

Share your knowledge. Access free notes. Learn together.

Register 📝

Register

Login 🔑

Login

Upload Notes ✏️

Select Subject Physics Chemistry Math Biology Computer Science History

Background Color: Default Light Blue Light Yellow Light Green Violet Light Red

Text Color: Black White Navy Maroon

<textarea id="noteContent" placeholder="Enter note description..." required></textarea> Upload

Notes Library 📖

Here's is code

1)Problem Statement
Students often struggle to organize and access study notes. Many resources are scattered across different apps and platforms, making it difficult to find subject specific material quickly.
There is a need for a simple, centralized platform where students can upload, share, and access notes easily.

2)Proposed Solution
EduNotes Hub is a web-based platform where students can:
a)Upload notes by subject
b)Store them in a shared library
c)Access them anytime
d)The system has a clean, user-friendly interface and works using local storage, so data is saved directly in the browser without needing a server. This makes it simple, lightweight, and student-friendly.

3)Key Features
✔ Upload notes with title, subject, and description
✔ Access all uploaded notes in a shared library
✔ Responsive design with icons and graphics
✔ Works offline using browser local storage
✔ Simple and user-friendly interface suitable for students

4)Flowchart

┌──────────┐
│ Start │
└─────┬────┘
│
▼
┌──────────────┐
│ User opens │
│ EduNotes Hub │
└─────┬────────┘
│
▼
┌──────────────┐
│ Upload Notes │
│ (title, subj,│
│ description) │
└─────┬────────┘
│
▼
┌──────────────┐
│ Save Note │
│ (LocalStorage)│
└─────┬────────┘
│
▼
┌──────────────┐
│ Library │
│ View + Search│
└─────┬────────┘
│
▼
┌──────────┐
│ End │
└──────────┘

5)Conclusion
EduNotes Hub solves the problem of scattered study material by providing a single, easy-to-use platform for uploading and accessing notes.
With its search and upload features, clean design, and flowchart-based structure, it is suitable for school and junior college students.