Changes to studybuddy.scroll.pub

root
root
26 days ago
Initial commit
.log.txt
Changed around line 1
+ 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
.stats.json
Changed around line 1
+ {
+ "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"
+ }
+ }
body.html
Changed around line 1
-
-
-
-
-
-
+

Homework Helper

+

Your fun study organization tool

-
-

Make Homework Fun!

-

Organize your studies with colorful lists, timers, and rewards

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+

Create Your To-Do List

+
+
+
-
-
+
+
    -
    +
    +

    Study Timer

    +
    +
    +
    +
    +
    - 25:00
    -
    -
    -
    -
    + 25:00
    -
    -

    Your Achievements

    -
    +
    +

    Your Progress

    +
    +
    +
    +
    +
    +
    -

    Made with 💖 for students everywhere

    -
    +

    Made with ❤ī¸ for students everywhere

    +
    index.html
    Changed around line 1
    +
    +
    +
    +
    + Homework Helper - Make Studying Fun!
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Make Homework Fun!

    +

    Organize your studies with colorful lists, timers, and rewards

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 25:00
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Your Achievements

    +
    +
    +
    +
    +
    +

    Made with 💖 for students everywhere

    +
    +
    +
    +
    +
    index.scroll
    Changed around line 2: buildHtml
    - title Homework Helper - Make Studying Fun!
    + title Homework Helper - Study Organization Tool
    - script.js
    + script.js
    readme.scroll
    Changed around line 1
    - 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.
    + 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.
    script.js
    Changed around line 1
    - 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 = `
    + ${taskInput.value}
    +
    + `;
    + taskList.appendChild(li);
    + taskInput.value = '';
    + });
    - function renderTasks() {
    - tasksList.innerHTML = tasks.map(task => `
    -
    -
    - ${task.text}
    -
    -
    -
    - `).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) {
    - 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';
    + }
    + });
    style.css
    Changed around line 1
    - --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;
    - box-sizing: border-box;
    - 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;
    - padding: 2rem 1rem;
    - .hero {
    + header {
    - 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 {
    - 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 {
    - gap: 1rem;
    - margin-bottom: 2rem;
    + gap: 10px;
    + margin-bottom: 1rem;
    - .add-task input {
    + input[type="text"], input[type="number"], select {
    - padding: 0.8rem;
    - border: 2px solid var(--secondary);
    - border-radius: 0.5rem;
    + padding: 0.5rem;
    + border: 1px solid #ddd;
    + border-radius: 5px;
    - .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);
    + border: none;
    + border-radius: 5px;
    - 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;
    - font-size: 3rem;
    + text-align: center;
    + font-size: 2rem;
    - 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 {
    - 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;
    - .hero h1 {
    + h1 {
    - .tasks-container {
    - padding: 1rem;
    + .input-group, .timer-controls {
    + flex-direction: column;
    - .timer-display {
    - font-size: 2rem;
    + button, input, select {
    + width: 100%;
    - }
    + }
    root
    root
    26 days ago
    Initial commit
    body.html
    Changed around line 1
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Make Homework Fun!

    +

    Organize your studies with colorful lists, timers, and rewards

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 25:00
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Your Achievements

    +
    +
    +
    +
    +
    +

    Made with 💖 for students everywhere

    +
    index.scroll
    Changed around line 1
    + buildHtml
    + baseUrl https://studybuddy.scroll.pub
    + metaTags
    + editButton /edit.html
    + title Homework Helper - Make Studying Fun!
    + style.css
    + body.html
    + script.js
    readme.scroll
    Changed around line 1
    + # 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.
    script.js
    Changed around line 1
    + 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 => `
    +
    +
    + ${task.text}
    +
    +
    +
    + `).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');
    + }
    + });
    + });
    style.css
    Changed around line 1
    + :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;
    + }
    + }