advanced web app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Web App</title>
<style>
/* Global CSS */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #ffe6f2; color: #333; }
header { background-color: #ff66b2; color: white; text-align: center; padding: 20px; font-size: 1.8rem; border-radius: 0 0 15px 15px; }
nav { background-color: #ff99cc; overflow: hidden; border-radius: 0 0 15px 15px; }
nav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; transition: background 0.3s; }
nav a:hover { background-color: #ff66b2; }
section { padding: 20px; display: none; animation: fadeIn 0.5s ease-in-out; }
section.active { display: block; }
img { width: 250px; border-radius: 15px; display: block; margin: 20px auto; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
button { background-color: #ff66b2; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 8px; transition: background 0.3s; }
button:hover { background-color: #e0559a; }
footer { background-color: #ff66b2; color: white; text-align: center; padding: 10px; margin-top: 20px; border-radius: 15px 15px 0 0; }
/* To-Do List */
.todo-container { background-color: #fff0f5; border-radius: 12px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); width: 380px; padding: 20px; margin: 0 auto; }
/* Notes Organizer */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
.note { background-color: #f0f8ff; padding: 15px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
/* Health Tracker */
.health-container { background-color: #e6ffe6; border-radius: 12px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); width: 380px; padding: 20px; margin: 0 auto; }
/* Sleep Scheduler */
.sleep-container { background-color: #e6f7ff; border-radius: 12px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); width: 380px; padding: 20px; margin: 0 auto; }
/* Progress Bars */
.progress { background-color: #ddd; border-radius: 5px; overflow: hidden; margin: 10px 0; }
.progress-bar { height: 20px; background-color: #ff66b2; width: 0%; transition: width 0.3s ease-in-out; }
/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>
<header>
<h1>All-in-One Advanced Web App</h1>
</header>
<nav>
<a href="#" onclick="showSection('favoritePerson')">Favorite Person</a>
<a href="#" onclick="showSection('todoList')">To-Do List</a>
<a href="#" onclick="showSection('notesOrganizer')">Notes</a>
<a href="#" onclick="showSection('healthTracker')">Health Tracker</a>
<a href="#" onclick="showSection('sleepScheduler')">Sleep Scheduler</a>
</nav>
<section id="favoritePerson" class="active">
<h2>My Favorite Person</h2>
<img src="https://via.placeholder.com/250" alt="Favorite Person">
<p><strong>Name:</strong> <span id="favName">Amarnath</span></p>
<p><strong>Profession:</strong> <span id="favProfession">Software Engineer</span></p>
<input type="text" id="newFavName" placeholder="New Name">
<input type="text" id="newFavProfession" placeholder="New Profession">
<button onclick="updateFavoritePerson()">Update</button>
<button onclick="showFact()">Show Fact</button>
<p id="facts"></p>
</section>
<section id="todoList">
<div class="todo-container">
<h2>To-Do List ✅</h2>
<input type="text" id="taskInput" placeholder="Add a new task">
<button onclick="addTask()">Add</button>
<ul id="taskList">
<li>Complete web app project <button class="delete-btn" onclick="this.parentElement.remove()">Delete</button></li>
</ul>
</div>
</section>
<section id="notesOrganizer">
<h2>Notes Organizer 📝</h2>
<button onclick="addNote()">Add New Note</button>
<div class="notes-grid" id="notesGrid">
<div class="note">
<textarea>Example note: Buy groceries</textarea>
<div class="note-actions"><button onclick="this.closest('.note').remove()">Delete</button></div>
</div>
</div>
</section>
<section id="healthTracker">
<div class="health-container">
<h2>Health Tracker 💖</h2>
<label>Water Intake (ml): <input type="number" id="waterInput" value="1500"></label>
<label>Calories (kcal): <input type="number" id="caloriesInput" value="1200"></label>
<label>Steps Walked: <input type="number" id="stepsInput" value="5000"></label>
<button onclick="updateHealth()">Update</button>
<div class="progress"><div id="waterBar" class="progress-bar" style="width: 50%"></div></div>
<div class="progress"><div id="caloriesBar" class="progress-bar" style="width: 60%"></div></div>
<div class="progress"><div id="stepsBar" class="progress-bar" style="width: 50%"></div></div>
</div>
</section>
<section id="sleepScheduler">
<div class="sleep-container">
<h2>Sleep Scheduler 😴</h2>
<label>Bedtime: <input type="time" id="bedtime" value="22:00"></label>
<label>Wake-up Time: <input type="time" id="wakeTime" value="06:00"></label>
<button onclick="scheduleSleep()">Schedule</button>
<p id="sleepMessage">Scheduled: Bedtime at 22:00, Wake-up at 06:00</p>
</div>
</section>
<footer>© 2025 Advanced Web App</footer>
<script>
function showSection(sectionId) {
document.querySelectorAll('section').forEach(sec => sec.classList.remove('active'));
document.getElementById(sectionId).classList.add('active');
}
const facts = ["Loves space exploration.", "Can play 5 instruments.", "Has run 10 marathons."];
function showFact() {
const randomFact = facts[Math.floor(Math.random() * facts.length)];
document.getElementById("facts").innerText = randomFact;
}
function addTask() {
const taskText = document.getElementById("taskInput").value.trim();
if (!taskText) return alert("Enter a task!");
const li = document.createElement("li");
li.textContent = taskText;
li.onclick = () => li.classList.toggle("completed");
const delBtn = document.createElement("button");
delBtn.textContent = "Delete";
delBtn.className = "delete-btn";
delBtn.onclick = e => { e.stopPropagation(); li.remove(); };
li.appendChild(delBtn);
document.getElementById("taskList").appendChild(li);
document.getElementById("taskInput").value = "";
}
function addNote() {
const note = document.createElement("div");
note.className = "note";
note.innerHTML = `<textarea placeholder='Write here...'></textarea><div class='note-actions'><button onclick='this.closest(".note").remove()'>Delete</button></div>`;
document.getElementById("notesGrid").appendChild(note);
}
function updateHealth() {
const water = document.getElementById("waterInput").value;
const calories = document.getElementById("caloriesInput").value;
const steps = document.getElementById("stepsInput").value;
document.getElementById("waterBar").style.width = Math.min(water / 3000 * 100, 100) + "%";
document.getElementById("caloriesBar").style.width = Math.min(calories / 2000 * 100, 100) + "%";
document.getElementById("stepsBar").style.width = Math.min(steps / 10000 * 100, 100) + "%";
}
function scheduleSleep() {
const bed = document.getElementById("bedtime").value;
const wake = document.getElementById("wakeTime").value;
if (bed && wake) {
document.getElementById("sleepMessage").innerText = `Scheduled: Bedtime at ${bed}, Wake-up at ${wake}`;
} else {
document.getElementById("sleepMessage").innerText = "Please select both times.";
}
}
function updateFavoritePerson() {
const newName = document.getElementById("newFavName").value;
const newProfession = document.getElementById("newFavProfession").value;
if (newName) document.getElementById("favName").innerText = newName;
if (newProfession) document.getElementById("favProfession").innerText = newProfession;
}
window.onload = () => updateHealth();
</script>