commit 239fc02000628e28ba837170d743c5128cde07fe

Author: root <root@hub.scroll.pub> Date: 2024-12-27 02:13:55 +0000 Subject: Initial commit diff --git a/.log.txt b/.log.txt new file mode 100644 index 0000000..87c208c --- /dev/null +++ b/.log.txt @@ -0,0 +1,9 @@ +read studybuddy.scroll.pub https://hub.scroll.pub/edit.html?folderName=studybuddy.scroll.pub 1735265630465 ::ffff:99.48.53.75 0.0 200 Chrome.131 MacOSX.10.15.7 +read studybuddy.scroll.pub https://hub.scroll.pub/ls.json?folderName=studybuddy.scroll.pub 1735265631285 ::ffff:99.48.53.75 0.0 200 Chrome.131 MacOSX.10.15.7 +read studybuddy.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=studybuddy.scroll.pub&filePath=studybuddy.scroll.pub%2Findex.scroll 1735265631356 ::ffff:99.48.53.75 0.0 200 Chrome.131 MacOSX.10.15.7 +read studybuddy.scroll.pub http://studybuddy.scroll.pub/.well-known/acme-challenge/OTDGo4jNgeSELeQr8br0B1pqIeVml68hMwBfq1ScUKI 1735265632879 ::ffff:10.48.0.2 0.0 200 Other +read studybuddy.scroll.pub http://studybuddy.scroll.pub/.well-known/acme-challenge/OTDGo4jNgeSELeQr8br0B1pqIeVml68hMwBfq1ScUKI 1735265633267 ::ffff:23.178.112.107 0.0 200 Other +read studybuddy.scroll.pub http://studybuddy.scroll.pub/.well-known/acme-challenge/OTDGo4jNgeSELeQr8br0B1pqIeVml68hMwBfq1ScUKI 1735265633860 ::ffff:35.92.126.152 0.0 200 Other +read studybuddy.scroll.pub http://studybuddy.scroll.pub/.well-known/acme-challenge/OTDGo4jNgeSELeQr8br0B1pqIeVml68hMwBfq1ScUKI 1735265633883 ::ffff:13.48.177.80 0.0 200 Other +read studybuddy.scroll.pub http://studybuddy.scroll.pub/.well-known/acme-challenge/OTDGo4jNgeSELeQr8br0B1pqIeVml68hMwBfq1ScUKI 1735265633978 ::ffff:18.118.101.211 0.0 200 Other +read studybuddy.scroll.pub http://studybuddy.scroll.pub/.well-known/acme-challenge/OTDGo4jNgeSELeQr8br0B1pqIeVml68hMwBfq1ScUKI 1735265634027 ::ffff:54.179.175.214 0.0 200 Other diff --git a/.stats.json b/.stats.json new file mode 100644 index 0000000..e22b9c8 --- /dev/null +++ b/.stats.json @@ -0,0 +1,19 @@ +{ + "files": [ + "body.html", + "index.scroll", + "readme.scroll", + "script.js", + "style.css" + ], + "stats": { + "folder": "studybuddy.scroll.pub", + "folderLink": "https://studybuddy.scroll.pub", + "created": "2024-12-27T02:13:49.000Z", + "revised": "2024-12-27T02:13:49.000Z", + "files": 5, + "mb": 1, + "revisions": 1, + "hash": "7ba4d22ae3" + } +} \ No newline at end of file diff --git a/body.html b/body.html index 8b2b3f4..1c8fb67 100644 --- a/body.html +++ b/body.html @@ -1,52 +1,47 @@ <header> - <nav> - <div class="logo">📚 Homework Helper</div> - <div class="nav-links"> - <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button> - </div> - </nav> + <h1>Homework Helper</h1> + <p>Your fun study organization tool</p> </header> <main> - <section class="hero"> - <h1>Make Homework Fun!</h1> - <p>Organize your studies with colorful lists, timers, and rewards</p> - </section> - - <section class="tasks-container"> - <div class="add-task"> - <input type="text" id="taskInput" placeholder="Add new task..." aria-label="Add new task"> - <button id="recordVoice" aria-label="Record voice note">🎤</button> - <button id="addTask" aria-label="Add task">➕</button> - </div> - - <div class="subjects-filter"> - <button data-subject="all" class="active">All</button> - <button data-subject="math">Math</button> - <button data-subject="science">Science</button> - <button data-subject="english">English</button> - <button data-subject="other">Other</button> + <section id="todo-section"> + <h2>Create Your To-Do List</h2> + <div class="input-group"> + <input type="text" id="task-input" placeholder="Add a new task..."> + <button id="add-task">Add</button> </div> - - <div class="tasks-list" id="tasksList"></div> + <button id="record-btn" class="voice-btn">🎤 Record Note</button> + <ul id="task-list"></ul> </section> - <section class="timer-section"> + <section id="timer-section"> + <h2>Study Timer</h2> + <div class="timer-controls"> + <select id="subject-select"> + <option value="math">Math</option> + <option value="science">Science</option> + <option value="history">History</option> + <option value="english">English</option> + </select> + <input type="number" id="timer-input" min="1" max="120" value="25"> + <button id="start-timer">Start Timer</button> + </div> <div class="timer-display"> - <span id="timerDisplay">25:00</span> - <div class="timer-controls"> - <button id="startTimer">Start</button> - <button id="resetTimer">Reset</button> - </div> + <span id="timer">25:00</span> </div> </section> - <section class="rewards"> - <h2>Your Achievements</h2> - <div class="stickers-container" id="stickersContainer"></div> + <section id="progress-section"> + <h2>Your Progress</h2> + <div class="sticker-board"> + <div id="sticker-container"></div> + </div> + <div class="progress-chart"> + <canvas id="progress-chart"></canvas> + </div> </section> </main> <footer> - <p>Made with 💖 for students everywhere</p> -</footer> + <p>Made with ❤️ for students everywhere</p> +</footer> \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..fa86c10 --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Homework Helper - Make Studying Fun!</title> + <script>/* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */</script> + <style>@media print {.doNotPrint {display: none !important;}}</style> + <link rel="canonical" href="https://studybuddy.scroll.pub/index.html"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content=""> + <meta name="generator" content="Scroll v164.7.0"> + <meta property="og:title" content="Homework Helper - Make Studying Fun!"> + <meta property="og:description" content=""> + <meta property="og:image" content=""> + + <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll"> + + <meta name="twitter:card" content="summary_large_image"> +</head> +<body> +<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a> +<link rel="stylesheet" type="text/css" href="style.css"> +<header> + <nav> + <div class="logo">📚 Homework Helper</div> + <div class="nav-links"> + <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button> + </div> + </nav> +</header> + +<main> + <section class="hero"> + <h1>Make Homework Fun!</h1> + <p>Organize your studies with colorful lists, timers, and rewards</p> + </section> + + <section class="tasks-container"> + <div class="add-task"> + <input type="text" id="taskInput" placeholder="Add new task..." aria-label="Add new task"> + <button id="recordVoice" aria-label="Record voice note">🎤</button> + <button id="addTask" aria-label="Add task">➕</button> + </div> + + <div class="subjects-filter"> + <button data-subject="all" class="active">All</button> + <button data-subject="math">Math</button> + <button data-subject="science">Science</button> + <button data-subject="english">English</button> + <button data-subject="other">Other</button> + </div> + + <div class="tasks-list" id="tasksList"></div> + </section> + + <section class="timer-section"> + <div class="timer-display"> + <span id="timerDisplay">25:00</span> + <div class="timer-controls"> + <button id="startTimer">Start</button> + <button id="resetTimer">Reset</button> + </div> + </div> + </section> + + <section class="rewards"> + <h2>Your Achievements</h2> + <div class="stickers-container" id="stickersContainer"></div> + </section> +</main> + +<footer> + <p>Made with 💖 for students everywhere</p> +</footer> + +<script src="script.js"></script> +</body> +</html> \ No newline at end of file diff --git a/index.scroll b/index.scroll index 5e7a7fa..236aa66 100644 --- a/index.scroll +++ b/index.scroll @@ -2,7 +2,7 @@ buildHtml baseUrl https://studybuddy.scroll.pub metaTags editButton /edit.html -title Homework Helper - Make Studying Fun! +title Homework Helper - Study Organization Tool style.css body.html -script.js +script.js \ No newline at end of file diff --git a/readme.scroll b/readme.scroll index 0ff64d8..4eeee34 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # studybuddy.scroll.pub -Website generated by Claude from prompt: create a website for my daughter. "Homework Helper" - A fun study organization tool: Create colorful to-do lists with voice recording Set fun timers for different subjects Add stickers/rewards for completed assignments Track favorite subjects and improvements This would make homework management more engaging. \ No newline at end of file +Website generated by DeepSeek from prompt: "Homework Helper" - A fun study organization tool: Create colorful to-do lists with voice recording Set fun timers for different subjects Add stickers/rewards for completed assignments Track favorite subjects and improvements This would make homework management more engaging. \ No newline at end of file diff --git a/script.js b/script.js index 058d77a..2170616 100644 --- a/script.js +++ b/script.js @@ -1,110 +1,118 @@ -document.addEventListener('DOMContentLoaded', () => { - // Theme Toggle - const themeToggle = document.querySelector('.theme-toggle'); - themeToggle.addEventListener('click', () => { - document.body.classList.toggle('dark-mode'); - themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙'; - }); +// Task Management +const taskInput = document.getElementById('task-input'); +const addTaskBtn = document.getElementById('add-task'); +const taskList = document.getElementById('task-list'); - // Tasks Management - const taskInput = document.getElementById('taskInput'); - const addTaskBtn = document.getElementById('addTask'); - const tasksList = document.getElementById('tasksList'); - const recordVoiceBtn = document.getElementById('recordVoice'); - - let tasks = []; - - addTaskBtn.addEventListener('click', () => { - if (taskInput.value.trim()) { - addTask(taskInput.value); - taskInput.value = ''; - } - }); - - taskInput.addEventListener('keypress', (e) => { - if (e.key === 'Enter' && taskInput.value.trim()) { - addTask(taskInput.value); - taskInput.value = ''; - } - }); - - function addTask(text) { - const task = { - id: Date.now(), - text, - completed: false, - subject: 'other' - }; - tasks.push(task); - renderTasks(); +addTaskBtn.addEventListener('click', () => { + if (taskInput.value.trim() !== '') { + const li = document.createElement('li'); + li.innerHTML = ` + <span>${taskInput.value}</span> + <button class="complete-btn">✔️</button> + `; + taskList.appendChild(li); + taskInput.value = ''; } +}); - function renderTasks() { - tasksList.innerHTML = tasks.map(task => ` - <div class="task ${task.completed ? 'completed' : ''}" data-id="${task.id}"> - <input type="checkbox" ${task.completed ? 'checked' : ''}> - <span>${task.text}</span> - <select> - <option value="other" ${task.subject === 'other' ? 'selected' : ''}>Other</option> - <option value="math" ${task.subject === 'math' ? 'selected' : ''}>Math</option> - <option value="science" ${task.subject === 'science' ? 'selected' : ''}>Science</option> - <option value="english" ${task.subject === 'english' ? 'selected' : ''}>English</option> - </select> - <button class="delete">🗑️</button> - </div> - `).join(''); +taskList.addEventListener('click', (e) => { + if (e.target.classList.contains('complete-btn')) { + const taskItem = e.target.parentElement; + taskItem.classList.add('completed'); + addSticker(); + setTimeout(() => taskItem.remove(), 500); } +}); - // Timer - const timerDisplay = document.getElementById('timerDisplay'); - const startTimerBtn = document.getElementById('startTimer'); - const resetTimerBtn = document.getElementById('resetTimer'); +// Timer Functionality +const timerInput = document.getElementById('timer-input'); +const startTimerBtn = document.getElementById('start-timer'); +const timerDisplay = document.getElementById('timer'); +let timerInterval; - let timeLeft = 25 * 60; // 25 minutes - let timerId = null; +startTimerBtn.addEventListener('click', () => { + const minutes = parseInt(timerInput.value); + if (minutes > 0) { + let time = minutes * 60; + clearInterval(timerInterval); + timerInterval = setInterval(() => { + const minutesLeft = Math.floor(time / 60); + const secondsLeft = time % 60; + timerDisplay.textContent = `${String(minutesLeft).padStart(2, '0')}:${String(secondsLeft).padStart(2, '0')}`; + if (time <= 0) { + clearInterval(timerInterval); + alert('Time is up!'); + } + time--; + }, 1000); + } +}); - startTimerBtn.addEventListener('click', () => { - if (timerId === null) { - timerId = setInterval(() => { - timeLeft--; - updateTimerDisplay(); - if (timeLeft === 0) { - clearInterval(timerId); - timerId = null; - alert('Time\'s up! Take a break!'); - } - }, 1000); - startTimerBtn.textContent = 'Pause'; - } else { - clearInterval(timerId); - timerId = null; - startTimerBtn.textContent = 'Start'; - } - }); +// Sticker Board +const stickerContainer = document.getElementById('sticker-container'); +const stickers = ['🌟', '🎉', '🏆', '💯', '👏', '🎓', '📚', '✨']; - resetTimerBtn.addEventListener('click', () => { - clearInterval(timerId); - timerId = null; - timeLeft = 25 * 60; - updateTimerDisplay(); - startTimerBtn.textContent = 'Start'; - }); +function addSticker() { + const sticker = document.createElement('div'); + sticker.className = 'sticker'; + sticker.textContent = stickers[Math.floor(Math.random() * stickers.length)]; + sticker.style.left = `${Math.random() * 80}%`; + sticker.style.top = `${Math.random() * 80}%`; + stickerContainer.appendChild(sticker); +} - function updateTimerDisplay() { - const minutes = Math.floor(timeLeft / 60); - const seconds = timeLeft % 60; - timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; +// Progress Chart +const ctx = document.getElementById('progress-chart').getContext('2d'); +const progressChart = new Chart(ctx, { + type: 'line', + data: { + labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'], + datasets: [{ + label: 'Tasks Completed', + data: [3, 7, 12, 18], + borderColor: var(--primary-color), + fill: false + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + y: { + beginAtZero: true + } + } } +}); + +// Voice Recording +const recordBtn = document.getElementById('record-btn'); +let mediaRecorder; +let audioChunks = []; - // Voice Recording - recordVoiceBtn.addEventListener('click', async () => { +recordBtn.addEventListener('click', async () => { + if (!mediaRecorder) { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); - alert('Voice recording feature coming soon!'); - stream.getTracks().forEach(track => track.stop()); - } catch (err) { - console.error('Error accessing microphone:', err); - alert('Could not access microphone'); + mediaRecorder = new MediaRecorder(stream); + mediaRecorder.ondataavailable = event => { + audioChunks.push(event.data); + }; + mediaRecorder.onstop = () => { + const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); + const audioUrl = URL.createObjectURL(audioBlob); + const audio = new Audio(audioUrl); + audio.play(); + audioChunks = []; + }; + mediaRecorder.start(); + recordBtn.textContent = '⏹️ Stop Recording'; + } catch (error) { + alert('Error accessing microphone'); } - }); -}); + } else { + mediaRecorder.stop(); + mediaRecorder = null; + recordBtn.textContent = '🎤 Record Note'; + } +}); \ No newline at end of file diff --git a/style.css b/style.css index f99601b..07ddf38 100644 --- a/style.css +++ b/style.css @@ -1,183 +1,144 @@ :root { - --primary: #ff6b6b; - --secondary: #4ecdc4; - --background: #ffffff; - --text: #2d3436; - --shadow: rgba(0,0,0,0.1); -} - -.dark-mode { - --primary: #ff8787; - --secondary: #66d9e8; - --background: #2d3436; - --text: #f8f9fa; - --shadow: rgba(255,255,255,0.1); + --primary-color: #4a90e2; + --secondary-color: #50e3c2; + --accent-color: #f5a623; + --background-color: #f8f9fa; + --text-color: #333; + --font-family: 'Segoe UI', system-ui, sans-serif; } * { + box-sizing: border-box; margin: 0; padding: 0; - box-sizing: border-box; } body { - font-family: 'Segoe UI', system-ui, sans-serif; - background-color: var(--background); - color: var(--text); - transition: all 0.3s ease; -} - -header { - padding: 1rem; - background: var(--primary); - box-shadow: 0 2px 10px var(--shadow); -} - -nav { - max-width: 1200px; - margin: 0 auto; - display: flex; - justify-content: space-between; - align-items: center; -} - -.logo { - font-size: 1.5rem; - font-weight: bold; - color: white; -} - -.theme-toggle { - background: none; - border: none; - font-size: 1.5rem; - cursor: pointer; - padding: 0.5rem; -} - -main { + font-family: var(--font-family); + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); + padding: 20px; max-width: 800px; margin: 0 auto; - padding: 2rem 1rem; } -.hero { +header { text-align: center; - margin-bottom: 3rem; + margin-bottom: 2rem; + padding: 2rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; + border-radius: 15px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } -.hero h1 { - font-size: 3rem; - color: var(--primary); - margin-bottom: 1rem; +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; } -.tasks-container { +section { background: white; - border-radius: 1rem; - padding: 2rem; - box-shadow: 0 4px 20px var(--shadow); + padding: 1.5rem; + margin-bottom: 1.5rem; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } -.add-task { +.input-group { display: flex; - gap: 1rem; - margin-bottom: 2rem; + gap: 10px; + margin-bottom: 1rem; } -.add-task input { +input[type="text"], input[type="number"], select { flex: 1; - padding: 0.8rem; - border: 2px solid var(--secondary); - border-radius: 0.5rem; + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: 5px; font-size: 1rem; } -.add-task button { - padding: 0.8rem; - border: none; - border-radius: 0.5rem; - background: var(--secondary); +button { + padding: 0.5rem 1rem; + background-color: var(--primary-color); color: white; + border: none; + border-radius: 5px; cursor: pointer; - transition: transform 0.2s; + transition: background-color 0.3s ease; } -.add-task button:hover { - transform: scale(1.05); +button:hover { + background-color: var(--secondary-color); } -.subjects-filter { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - margin-bottom: 2rem; +.voice-btn { + width: 100%; + margin-bottom: 1rem; } -.subjects-filter button { - padding: 0.5rem 1rem; - border: none; - border-radius: 2rem; - background: var(--secondary); - color: white; - cursor: pointer; - transition: all 0.2s; +#task-list { + list-style: none; } -.subjects-filter button.active { - background: var(--primary); - transform: scale(1.05); +#task-list li { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem; + margin-bottom: 0.5rem; + background-color: var(--background-color); + border-radius: 5px; } -.timer-section { - margin: 3rem 0; - text-align: center; +.timer-controls { + display: flex; + gap: 10px; + margin-bottom: 1rem; } .timer-display { - font-size: 3rem; + text-align: center; + font-size: 2rem; font-weight: bold; - color: var(--primary); - margin-bottom: 1rem; + color: var(--primary-color); + padding: 1rem; + background-color: var(--background-color); + border-radius: 10px; } -.timer-controls button { - padding: 0.8rem 2rem; - margin: 0 0.5rem; - border: none; - border-radius: 0.5rem; - background: var(--secondary); - color: white; - cursor: pointer; - transition: transform 0.2s; +.sticker-board { + min-height: 100px; + background-color: var(--background-color); + border-radius: 10px; + padding: 1rem; + margin-bottom: 1rem; } -.timer-controls button:hover { - transform: scale(1.05); +.progress-chart { + width: 100%; + height: 200px; } -.rewards { +footer { text-align: center; - margin-top: 3rem; -} - -.stickers-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); - gap: 1rem; - margin-top: 1rem; + padding: 1rem; + margin-top: 2rem; + color: #666; } @media (max-width: 600px) { - .hero h1 { + h1 { font-size: 2rem; } - .tasks-container { - padding: 1rem; + .input-group, .timer-controls { + flex-direction: column; } - .timer-display { - font-size: 2rem; + button, input, select { + width: 100%; } -} +} \ No newline at end of file

commit 7ba4d22ae3539e96c162a25dc832869785a09634

Author: root <root@hub.scroll.pub> Date: 2024-12-27 02:13:49 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..8b2b3f4 --- /dev/null +++ b/body.html @@ -0,0 +1,52 @@ +<header> + <nav> + <div class="logo">📚 Homework Helper</div> + <div class="nav-links"> + <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button> + </div> + </nav> +</header> + +<main> + <section class="hero"> + <h1>Make Homework Fun!</h1> + <p>Organize your studies with colorful lists, timers, and rewards</p> + </section> + + <section class="tasks-container"> + <div class="add-task"> + <input type="text" id="taskInput" placeholder="Add new task..." aria-label="Add new task"> + <button id="recordVoice" aria-label="Record voice note">🎤</button> + <button id="addTask" aria-label="Add task">➕</button> + </div> + + <div class="subjects-filter"> + <button data-subject="all" class="active">All</button> + <button data-subject="math">Math</button> + <button data-subject="science">Science</button> + <button data-subject="english">English</button> + <button data-subject="other">Other</button> + </div> + + <div class="tasks-list" id="tasksList"></div> + </section> + + <section class="timer-section"> + <div class="timer-display"> + <span id="timerDisplay">25:00</span> + <div class="timer-controls"> + <button id="startTimer">Start</button> + <button id="resetTimer">Reset</button> + </div> + </div> + </section> + + <section class="rewards"> + <h2>Your Achievements</h2> + <div class="stickers-container" id="stickersContainer"></div> + </section> +</main> + +<footer> + <p>Made with 💖 for students everywhere</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..5e7a7fa --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://studybuddy.scroll.pub +metaTags +editButton /edit.html +title Homework Helper - Make Studying Fun! +style.css +body.html +script.js diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..0ff64d8 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# studybuddy.scroll.pub +Website generated by Claude from prompt: create a website for my daughter. "Homework Helper" - A fun study organization tool: Create colorful to-do lists with voice recording Set fun timers for different subjects Add stickers/rewards for completed assignments Track favorite subjects and improvements This would make homework management more engaging. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..058d77a --- /dev/null +++ b/script.js @@ -0,0 +1,110 @@ +document.addEventListener('DOMContentLoaded', () => { + // Theme Toggle + const themeToggle = document.querySelector('.theme-toggle'); + themeToggle.addEventListener('click', () => { + document.body.classList.toggle('dark-mode'); + themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙'; + }); + + // Tasks Management + const taskInput = document.getElementById('taskInput'); + const addTaskBtn = document.getElementById('addTask'); + const tasksList = document.getElementById('tasksList'); + const recordVoiceBtn = document.getElementById('recordVoice'); + + let tasks = []; + + addTaskBtn.addEventListener('click', () => { + if (taskInput.value.trim()) { + addTask(taskInput.value); + taskInput.value = ''; + } + }); + + taskInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter' && taskInput.value.trim()) { + addTask(taskInput.value); + taskInput.value = ''; + } + }); + + function addTask(text) { + const task = { + id: Date.now(), + text, + completed: false, + subject: 'other' + }; + tasks.push(task); + renderTasks(); + } + + function renderTasks() { + tasksList.innerHTML = tasks.map(task => ` + <div class="task ${task.completed ? 'completed' : ''}" data-id="${task.id}"> + <input type="checkbox" ${task.completed ? 'checked' : ''}> + <span>${task.text}</span> + <select> + <option value="other" ${task.subject === 'other' ? 'selected' : ''}>Other</option> + <option value="math" ${task.subject === 'math' ? 'selected' : ''}>Math</option> + <option value="science" ${task.subject === 'science' ? 'selected' : ''}>Science</option> + <option value="english" ${task.subject === 'english' ? 'selected' : ''}>English</option> + </select> + <button class="delete">🗑️</button> + </div> + `).join(''); + } + + // Timer + const timerDisplay = document.getElementById('timerDisplay'); + const startTimerBtn = document.getElementById('startTimer'); + const resetTimerBtn = document.getElementById('resetTimer'); + + let timeLeft = 25 * 60; // 25 minutes + let timerId = null; + + startTimerBtn.addEventListener('click', () => { + if (timerId === null) { + timerId = setInterval(() => { + timeLeft--; + updateTimerDisplay(); + if (timeLeft === 0) { + clearInterval(timerId); + timerId = null; + alert('Time\'s up! Take a break!'); + } + }, 1000); + startTimerBtn.textContent = 'Pause'; + } else { + clearInterval(timerId); + timerId = null; + startTimerBtn.textContent = 'Start'; + } + }); + + resetTimerBtn.addEventListener('click', () => { + clearInterval(timerId); + timerId = null; + timeLeft = 25 * 60; + updateTimerDisplay(); + startTimerBtn.textContent = 'Start'; + }); + + function updateTimerDisplay() { + const minutes = Math.floor(timeLeft / 60); + const seconds = timeLeft % 60; + timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; + } + + // Voice Recording + recordVoiceBtn.addEventListener('click', async () => { + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + alert('Voice recording feature coming soon!'); + stream.getTracks().forEach(track => track.stop()); + } catch (err) { + console.error('Error accessing microphone:', err); + alert('Could not access microphone'); + } + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..f99601b --- /dev/null +++ b/style.css @@ -0,0 +1,183 @@ +:root { + --primary: #ff6b6b; + --secondary: #4ecdc4; + --background: #ffffff; + --text: #2d3436; + --shadow: rgba(0,0,0,0.1); +} + +.dark-mode { + --primary: #ff8787; + --secondary: #66d9e8; + --background: #2d3436; + --text: #f8f9fa; + --shadow: rgba(255,255,255,0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + background-color: var(--background); + color: var(--text); + transition: all 0.3s ease; +} + +header { + padding: 1rem; + background: var(--primary); + box-shadow: 0 2px 10px var(--shadow); +} + +nav { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + color: white; +} + +.theme-toggle { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + padding: 0.5rem; +} + +main { + max-width: 800px; + margin: 0 auto; + padding: 2rem 1rem; +} + +.hero { + text-align: center; + margin-bottom: 3rem; +} + +.hero h1 { + font-size: 3rem; + color: var(--primary); + margin-bottom: 1rem; +} + +.tasks-container { + background: white; + border-radius: 1rem; + padding: 2rem; + box-shadow: 0 4px 20px var(--shadow); +} + +.add-task { + display: flex; + gap: 1rem; + margin-bottom: 2rem; +} + +.add-task input { + flex: 1; + padding: 0.8rem; + border: 2px solid var(--secondary); + border-radius: 0.5rem; + font-size: 1rem; +} + +.add-task button { + padding: 0.8rem; + border: none; + border-radius: 0.5rem; + background: var(--secondary); + color: white; + cursor: pointer; + transition: transform 0.2s; +} + +.add-task button:hover { + transform: scale(1.05); +} + +.subjects-filter { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 2rem; +} + +.subjects-filter button { + padding: 0.5rem 1rem; + border: none; + border-radius: 2rem; + background: var(--secondary); + color: white; + cursor: pointer; + transition: all 0.2s; +} + +.subjects-filter button.active { + background: var(--primary); + transform: scale(1.05); +} + +.timer-section { + margin: 3rem 0; + text-align: center; +} + +.timer-display { + font-size: 3rem; + font-weight: bold; + color: var(--primary); + margin-bottom: 1rem; +} + +.timer-controls button { + padding: 0.8rem 2rem; + margin: 0 0.5rem; + border: none; + border-radius: 0.5rem; + background: var(--secondary); + color: white; + cursor: pointer; + transition: transform 0.2s; +} + +.timer-controls button:hover { + transform: scale(1.05); +} + +.rewards { + text-align: center; + margin-top: 3rem; +} + +.stickers-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); + gap: 1rem; + margin-top: 1rem; +} + +@media (max-width: 600px) { + .hero h1 { + font-size: 2rem; + } + + .tasks-container { + padding: 1rem; + } + + .timer-display { + font-size: 2rem; + } +}