diff --git a/Todo.html b/Todo.html index 7b720ce..6b84c71 100644 --- a/Todo.html +++ b/Todo.html @@ -3,107 +3,115 @@ - Todo-List + TaskMaster | Your Personal Task Management Hub + - - + + + - -
-

Todo-List

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

Task Master

+

Organize your life, one task at a time

- - -
-
- - - +
+

Add New Task

+
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+ + +
+ +
+
+
+
+ +
+

Export Tasks

+
+ + +
+
+
+ +
+

© 2024 TaskMaster. Made with by Ansh Grover

+ -
-
-
-
+
-
-

© 2024 Made with ❤ by Ansh Grover. All rights reserved.

- -
+ + diff --git a/darkMode.js b/darkMode.js new file mode 100644 index 0000000..e1be377 --- /dev/null +++ b/darkMode.js @@ -0,0 +1,32 @@ +function toggleDarkMode() { + document.body.classList.toggle('dark-mode'); + const darkModeToggle = document.getElementById('dark-mode-toggle'); + if (document.body.classList.contains('dark-mode')) { + darkModeToggle.innerHTML = ' Light Mode'; + localStorage.setItem('darkMode', 'enabled'); + } else { + darkModeToggle.innerHTML = ' Dark Mode'; + localStorage.setItem('darkMode', 'disabled'); + } +} + +function checkDarkModePreference() { + if (localStorage.getItem('darkMode') === 'enabled') { + document.body.classList.add('dark-mode'); + const darkModeToggle = document.getElementById('dark-mode-toggle'); + if (darkModeToggle) { + darkModeToggle.innerHTML = ' Light Mode'; + } + } +} + +document.addEventListener('DOMContentLoaded', () => { + checkDarkModePreference(); + + const darkModeToggle = document.getElementById('dark-mode-toggle'); + if (darkModeToggle) { + darkModeToggle.addEventListener('click', toggleDarkMode); + } else { + console.error('Dark mode toggle button not found'); + } +}); diff --git a/index.html b/index.html index e0fa6a0..50f9d98 100644 --- a/index.html +++ b/index.html @@ -4,55 +4,56 @@ - To-Do List App + TaskMaster - Organize Your Life + + + + - + - + - -
-
-

- Organize Your Life with this easy-to-use app -

-

- Manage tasks effortlessly and boost your productivity. Stay on top of - everything with our intuitive To-Do List. -

- - Start + +
+
+

Organize Your Life
with TaskMaster

+

Effortlessly manage tasks, boost productivity, and achieve your goals with our intuitive todo list application.

+ + Start Organizing Now
-
+ -
+
-

- © 2024 Made with ❤ by Ansh Grover. All rights reserved. +

+ © 2024 TaskMaster. Made with by Ansh Grover. All rights reserved.

+ + diff --git a/script.js b/script.js index 55ea114..d4b6620 100644 --- a/script.js +++ b/script.js @@ -59,18 +59,14 @@ document.querySelector('.js-time-input').addEventListener('blur', () => { function clearInputs() { const inputNameElement = document.querySelector('.js-name-input'); - const inputDateElement = document.querySelector('.js-date-input'); - const inputTimeElement = document.querySelector('.js-time-input'); const inputCategoryElement = document.querySelector('.js-category-input'); const inputPriorityElement = document.querySelector('.js-priority-input'); // Clear the inputs inputNameElement.value = ''; - inputDateElement.value = ''; - inputTimeElement.value = ''; inputCategoryElement.value = ''; inputPriorityElement.value = ''; - setDefaultDateTime(); + setDefaultDateTime(); // Call this function to reset date and time } function addTodo() { @@ -198,32 +194,7 @@ function cancelEditTodo() { } function updateTodoList() { - // Sort todoList based on the current sort method - let filteredTodos = todoList; - - // Apply filtering based on the selected filter method - if (filterMethod === 'pending') { - filteredTodos = todoList.filter((todo) => !todo.completed); - } else if (filterMethod === 'completed') { - filteredTodos = todoList.filter((todo) => todo.completed); - } - - filteredTodos.sort((a, b) => { - if (currentSortMethod === 'date') { - const dateA = new Date(a.date + ' ' + a.time); - const dateB = new Date(b.date + ' ' + b.time); - return dateA - dateB; - } else if (currentSortMethod === 'category') { - return currentCategorySortOrder === 'asc' - ? a.category.localeCompare(b.category) - : b.category.localeCompare(a.category); - } else if (currentSortMethod === 'priority') { - const priorityOrder = { high: 0, medium: 1, low: 2 }; - return currentSortOrder === 'asc' - ? priorityOrder[a.priority] - priorityOrder[b.priority] - : priorityOrder[b.priority] - priorityOrder[a.priority]; - } - }); + let filteredTodos = getFilteredAndSortedTodos(); const addElement = document.querySelector('.js-add-html'); todoListhtml = ''; @@ -232,30 +203,32 @@ function updateTodoList() { const todo = filteredTodos[i]; todoListhtml += `
- +
+ +
${todo.name} - ${todo.category} - ${todo.priority} +
+ ${todo.category} + ${todo.priority} +
+
+ ${todo.date} + ${todo.time} +
+
+ + +
-
-
${todo.date}
-
${todo.time}
- - `; +
`; } - // Show or hide the task container based on the presence of tasks - if (todoList.length === 0) { - addElement.style.display = 'none'; // Hide if no tasks - } else { - addElement.style.display = 'grid'; // Show if tasks exist - addElement.innerHTML = todoListhtml; - } + addElement.innerHTML = todoListhtml; // Add event listeners for delete and edit buttons document.querySelectorAll('.js-delete-button').forEach((button) => { @@ -278,13 +251,22 @@ function setDefaultDateTime() { const inputTimeElement = document.querySelector('.js-time-input'); const now = new Date(); - const date = now.toISOString().split('T')[0]; - const time = now.toTimeString().split(' ')[0].slice(0, 5); - - inputDateElement.value = date; - inputDateElement.min = date; // Set the min attribute to today's date - inputTimeElement.value = time; - inputTimeElement.min = time; // Set the min attribute to current time + + // Format date as YYYY-MM-DD + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const formattedDate = `${year}-${month}-${day}`; + + // Format time as HH:MM + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const formattedTime = `${hours}:${minutes}`; + + inputDateElement.value = formattedDate; + inputDateElement.min = formattedDate; // Set the min attribute to today's date + inputTimeElement.value = formattedTime; + inputTimeElement.min = formattedTime; // Set the min attribute to current time } function sortTodos(sortBy) { @@ -326,7 +308,7 @@ function toggleComplete(index) { // Initialize the todo list and set default date and time on page load document.addEventListener('DOMContentLoaded', () => { updateTodoList(); - setDefaultDateTime(); + setDefaultDateTime(); // Call this function when the page loads // Set focus on the name input field const inputNameElement = document.querySelector('.js-name-input'); @@ -355,3 +337,170 @@ document.addEventListener('DOMContentLoaded', () => { .querySelector('.js-filter-input') .addEventListener('change', filterTodos); }); + +// Add this function to the end of the file + +function exportTasks(format) { + if (format === 'csv') { + exportTasksCSV(); + } else if (format === 'pdf') { + exportTasksPDF(); + } +} + +function exportTasksCSV() { + // Create CSV content + let csvContent = "data:text/csv;charset=utf-8,"; + csvContent += "Name,Date,Time,Category,Priority,Completed\n"; + + todoList.forEach(task => { + const row = [ + task.name, + task.date, + task.time, + task.category, + task.priority, + task.completed + ].map(item => `"${item}"`).join(","); + csvContent += row + "\n"; + }); + + // Create a download link and trigger the download + const encodedUri = encodeURI(csvContent); + const link = document.createElement("a"); + link.setAttribute("href", encodedUri); + link.setAttribute("download", "tasks.csv"); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + // Show a success notification + const success = document.getElementById('js-success-notification'); + success.innerHTML = '

Tasks exported successfully!

'; + success.style.display = 'flex'; + setTimeout(() => { + success.style.display = 'none'; + success.innerHTML = '

Task completed 🎉

'; + }, 4000); +} + +function exportTasksPDF() { + const { jsPDF } = window.jspdf; + const doc = new jsPDF(); + + // Add title + doc.setFontSize(18); + doc.text("Tasks List", 14, 22); + + // Add table headers + doc.setFontSize(12); + doc.setTextColor(100); + + // Table header + const headers = ["Name", "Date", "Time", "Category", "Priority", "Completed"]; + let y = 30; + doc.text(headers[0], 10, y); + doc.text(headers[1], 60, y); + doc.text(headers[2], 85, y); + doc.text(headers[3], 105, y); + doc.text(headers[4], 135, y); + doc.text(headers[5], 160, y); + + // Table content + doc.setTextColor(0); + todoList.forEach((task, i) => { + y = y + 10; + if (y > 280) { + doc.addPage(); + y = 20; + } + doc.text(task.name.substring(0, 25), 10, y); + doc.text(task.date, 60, y); + doc.text(task.time, 85, y); + doc.text(task.category, 105, y); + doc.text(task.priority, 135, y); + doc.text(task.completed.toString(), 160, y); + }); + + // Save the PDF + doc.save("tasks.pdf"); + + // Show a success notification + const success = document.getElementById('js-success-notification'); + success.innerHTML = '

Tasks exported to PDF successfully!

'; + success.style.display = 'flex'; + setTimeout(() => { + success.style.display = 'none'; + success.innerHTML = '

Task completed 🎉

'; + }, 4000); +} + +// Add this new function to get filtered and sorted todos +function getFilteredAndSortedTodos() { + let filteredTodos = todoList; + + // Apply filtering based on the selected filter method + if (filterMethod === 'pending') { + filteredTodos = todoList.filter((todo) => !todo.completed); + } else if (filterMethod === 'completed') { + filteredTodos = todoList.filter((todo) => todo.completed); + } + + // Apply sorting + filteredTodos.sort((a, b) => { + if (currentSortMethod === 'date') { + const dateA = new Date(a.date + ' ' + a.time); + const dateB = new Date(b.date + ' ' + b.time); + return dateA - dateB; + } else if (currentSortMethod === 'category') { + return currentCategorySortOrder === 'asc' + ? a.category.localeCompare(b.category) + : b.category.localeCompare(a.category); + } else if (currentSortMethod === 'priority') { + const priorityOrder = { high: 0, medium: 1, low: 2 }; + return currentSortOrder === 'asc' + ? priorityOrder[a.priority] - priorityOrder[b.priority] + : priorityOrder[b.priority] - priorityOrder[a.priority]; + } + }); + + return filteredTodos; +} + +// Dark mode toggle functionality +function toggleDarkMode() { + document.body.classList.toggle('dark-mode'); + const darkModeToggle = document.getElementById('dark-mode-toggle'); + if (document.body.classList.contains('dark-mode')) { + darkModeToggle.innerHTML = ' Light Mode'; + localStorage.setItem('darkMode', 'enabled'); + } else { + darkModeToggle.innerHTML = ' Dark Mode'; + localStorage.setItem('darkMode', 'disabled'); + } +} + +// Check for saved dark mode preference +function checkDarkModePreference() { + if (localStorage.getItem('darkMode') === 'enabled') { + document.body.classList.add('dark-mode'); + const darkModeToggle = document.getElementById('dark-mode-toggle'); + if (darkModeToggle) { + darkModeToggle.innerHTML = ' Light Mode'; + } + } +} + +// Initialize dark mode +document.addEventListener('DOMContentLoaded', () => { + checkDarkModePreference(); + + const darkModeToggle = document.getElementById('dark-mode-toggle'); + if (darkModeToggle) { + darkModeToggle.addEventListener('click', toggleDarkMode); + } else { + console.error('Dark mode toggle button not found'); + } + + // ... (rest of your initialization code) +}); diff --git a/style.css b/style.css index fe52448..ec526d6 100644 --- a/style.css +++ b/style.css @@ -1,469 +1,602 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); -body { - font-family: Arial, Helvetica, sans-serif; +:root { + --primary-color: #4a90e2; + --secondary-color: #50c878; + --background-color: #f5f7fa; + --text-color: #333333; + --light-gray: #e0e0e0; + --white: #ffffff; + --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +* { margin: 0; padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - background: rgb(136, 0, 255); - background: linear-gradient( - 0deg, - rgba(136, 0, 255, 1) 24%, - rgba(65, 45, 253, 1) 48%, - rgba(29, 29, 29, 1) 100% - ); + box-sizing: border-box; } -.container { - width: 100%; - max-width: 1000px; - padding: 20px; - box-sizing: border-box; - margin-bottom: 170px; +body { + font-family: 'Poppins', sans-serif; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; } -.subtitle { - text-align: center; - color: #f6ac62; - font-family: 'Londrina Outline', cursive; - font-size: 5rem; - padding: 8px 16px; - text-shadow: 0 3px 10px rgba(10, 10, 10, 40); - animation: bounce 1s infinite; +.app-container { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +header { + position: sticky; + top: 0; + z-index: 1000; +} + +header .container { + max-width: 1200px; + margin: 0 auto; +} + +header a, header button { + transition: all 0.3s ease; +} + +header a:hover, header button:hover { + transform: translateY(-2px); } h1 { - text-align: center; - color: #fff; - margin-bottom: 20px; - text-shadow: 2px 2px 4px #000; -} - -.js-name-input, -.js-date-input, -.js-time-input, -.js-category-input, -.js-priority-input, -.js-add-button, -.js-cancel-button { - font-size: 15px; - padding: 10px 15px; - border: 1px solid #ccc; - border-radius: 5px; - background-color: #fff; - color: #333; - outline: none; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - cursor: pointer; + font-size: 2.5rem; + color: var(--primary-color); + margin-bottom: 0.5rem; } -.js-date-input:hover, -.js-time-input:hover { - cursor: pointer; - font-weight: bold; +h2 { + font-size: 1.5rem; + color: var(--primary-color); + margin-bottom: 1rem; } -.js-add-grid { +main { display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; - gap: 10px; - row-gap: 1rem; - background-color: rgba(255, 255, 255, 0.9); - padding: 20px; + gap: 2rem; +} + +.task-input-section, .task-list-section, .export-section { + background-color: var(--white); border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - margin-bottom: 20px; + padding: 1.5rem; + box-shadow: var(--shadow); +} + +.task-input-grid { + display: grid; + gap: 1rem; + grid-template-columns: 1fr; +} + +.date-time-container, .category-priority-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; } -.js-actions-wrapper { +.button-container { display: flex; - justify-content: center; + justify-content: flex-end; gap: 1rem; - grid-row: auto; - grid-column: auto; } -.js-add-button, -.js-cancel-button { - background-color: green; - color: white; - border: none; - font-weight: bold; +input, select, button { + width: 100%; + padding: 0.75rem; + border: 1px solid var(--light-gray); + border-radius: 4px; + font-size: 1rem; +} + +button { cursor: pointer; - transition: background-color 0.3s ease; + transition: background-color 0.3s, transform 0.3s; display: flex; align-items: center; justify-content: center; } -.js-add-button:hover { - background-color: darkgreen; +button:hover { + transform: translateY(-2px); } -.js-cancel-button { - background-color: #ff0000; +.btn-primary { + background-color: var(--primary-color); + color: var(--white); + border: none; } -.js-cancel-button:hover { - background-color: #8b0000; +.btn-secondary { + background-color: var(--secondary-color); + color: var(--white); + border: none; } -.js-add-html { - display: grid; - align-items: center; - grid-template-columns: 3fr 1fr 1fr 1fr 1fr; - gap: 10px; - height: 25px; +.btn-outline { + background-color: transparent; + color: var(--primary-color); + border: 1px solid var(--primary-color); } -.small-container { - display: flex; - justify-content: flex-start; - align-items: center; - border: 1px solid #ccc; - padding: 10px 15px; - border-radius: 5px; - background-color: #fff; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - text-align: left; - min-height: 45px; - max-height: 90px; - height: auto; - box-sizing: border-box; +.task-controls { + margin-bottom: 1.5rem; + background-color: #f0f4f8; + border-radius: 8px; + padding: 1rem; } -.task-info { +.sort-filter-container { display: flex; + justify-content: space-between; align-items: center; - gap: 10px; flex-wrap: wrap; - justify-content: flex-start; + gap: 1rem; } -.task-name { - font-weight: bold; - overflow: auto; - max-height: 40px; +.sort-buttons { + display: flex; + gap: 0.75rem; } -.category-tag, -.priority-tag { - display: inline-block; - padding: 2px 6px; - border-radius: 3px; - font-size: 12px; - font-weight: bold; +.sort-buttons button, .js-filter-input { + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.9rem; + transition: all 0.3s ease; } -.category-tag { - background-color: #e0e0e0; - color: #333; +.sort-buttons button { + background-color: var(--white); + color: var(--primary-color); + border: 1px solid var(--primary-color); } -.priority-high { - background-color: #ffcccb; - color: #d8000c; +.sort-buttons button:hover { + background-color: var(--primary-color); + color: var(--white); } -.priority-medium { - background-color: #feefb3; - color: #9f6000; +.js-filter-input { + background-color: var(--white); + border: 1px solid var(--light-gray); } -.priority-low { - background-color: #d4edda; - color: #155724; +.js-add-html-tasks { + max-height: 500px; + overflow-y: auto; + padding-right: 0.5rem; + border-radius: 8px; + background-color: #f9fafc; } -.js-delete-button, -.js-edit-button { - border: none; - font-size: 15px; - font-weight: bold; - cursor: pointer; - border-radius: 5px; - padding: 10px 15px; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.3s ease; - width: 100%; - justify-content: center; - height: 46px; +.js-add-html-tasks::-webkit-scrollbar { + width: 8px; } -.js-delete-button { - background-color: red; - color: white; +.js-add-html-tasks::-webkit-scrollbar-track { + background: var(--light-gray); + border-radius: 4px; } -.js-delete-button:hover { - background-color: darkred; +.js-add-html-tasks::-webkit-scrollbar-thumb { + background: var(--primary-color); + border-radius: 4px; } -.js-edit-button { - background-color: skyblue; - color: white; +.small-container { + background-color: var(--white); + border: 1px solid #e5e9f0; + border-radius: 8px; + padding: 1rem; + margin-bottom: 1rem; + display: grid; + grid-template-columns: auto 1fr auto; + grid-template-rows: auto; + align-items: start; + gap: 1rem; + transition: all 0.3s ease; } -.js-edit-button:hover { - background-color: deepskyblue; +.small-container:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); } -.js-add-button img, -.js-delete-button img, -.js-edit-button img { - margin-right: 5px; +.task-checkbox { + grid-row: 1 / 2; + display: flex; + align-items: center; + justify-content: center; } -/* Footer Styling */ -footer { - background-color: transparent; - color: white; - text-align: center; - padding: 20px 0; - position: fixed; - width: 100%; - bottom: 0; - font-size: 1rem; - display: flex; - justify-content: space-around; +.task-checkbox input[type="checkbox"] { + width: 1.2rem; + height: 1.2rem; + cursor: pointer; + border: 2px solid var(--primary-color); + border-radius: 4px; + appearance: none; + -webkit-appearance: none; + outline: none; + transition: all 0.3s ease; } -footer p { - margin-top: 10px; - font-size: 12px; +.task-checkbox input[type="checkbox"]:checked { + background-color: var(--primary-color); + border-color: var(--primary-color); } -.social-media { - display: flex; - justify-content: center; - align-items: center; +.task-checkbox input[type="checkbox"]:checked::before { + content: '\2714'; + display: block; + text-align: center; + color: white; + font-size: 0.8rem; + line-height: 1.2rem; } -.social-media a { - margin: 1px 11px; - color: black; - font-size: 15px; - padding: 8px; - border: 2px solid black; - border-radius: 8px; - box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4); +.task-info { + grid-column: 2; + display: flex; + flex-direction: column; + gap: 0.5rem; } -.social-media a:hover { - transform: scale(1.05); - transition: all 0.25s ease-out; - border: none; +.task-name { + font-weight: 600; + font-size: 1.1rem; + color: #2c3e50; } -.social-media .insta:hover { - background: linear-gradient( - 45deg, - #feda75, - #fa7e1e, - #d62976, - #962fbf, - #4f5bd5 - ); - color: white; +.task-details { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + font-size: 0.9rem; + color: #7f8c8d; } -.social-media .facebook:hover { - background-color: #1877f2; - color: white; +.task-date-time { + font-size: 0.85rem; + color: #95a5a6; + display: flex; + align-items: center; + gap: 1rem; } -.social-media .x:hover { - background-color: #000000; - color: white; +.task-date, .task-time { + display: flex; + align-items: center; + gap: 0.25rem; } -.social-media .linkedin:hover { - background-color: #0a66c2; - color: white; +.task-date-time i { + font-size: 0.9rem; } -.social-media .github:hover { - background-color: white; +.category-tag, .priority-tag { + font-size: 0.8rem; + padding: 0.2rem 0.75rem; + border-radius: 12px; + font-weight: 500; } -.social-media .youtube:hover { - background-color: white; - color: #ff0000; +.category-tag { + background-color: #e0f2f1; + color: #009688; } -/* -Animating title -*/ +.priority-high { background-color: #ffebee; color: #e53935; } +.priority-medium { background-color: #fff8e1; color: #f9a825; } +.priority-low { background-color: #e8f5e9; color: #43a047; } -.subtitle { - text-align: center; - color: #f6ac62; - font-family: 'Open sans', sans-serif; - font-family: cursive; - font-size: 5rem; - padding: 8px 16px; - text-shadow: #000000 3px 4px 10px; +.task-actions { + display: flex; + gap: 0.5rem; + margin-top: 0.5rem; } -.sort-buttons { +.task-actions button { + padding: 0.25rem 0.5rem; + font-size: 0.7rem; + border-radius: 12px; + border: none; + background-color: #f0f4f8; + color: #4a5568; + transition: all 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; - justify-content: space-between; - margin-bottom: 10px; + align-items: center; + justify-content: center; } -.sort-filter-container { - display: flex; - gap: 10px; - flex-wrap: wrap; +.task-actions button i { + margin-right: 0.25rem; } -.sort-button, -.js-filter-input { - background-color: #4caf50; - border: none; +.task-actions .js-edit-button { + background-color: #ebf8ff; + color: #3182ce; +} + +.task-actions .js-edit-button:hover { + background-color: #3182ce; color: white; - padding: 10px 20px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - margin: 4px 2px; - cursor: pointer; - border-radius: 5px; - transition: background-color 0.3s; + transform: translateY(-2px); + box-shadow: 0 4px 6px rgba(49, 130, 206, 0.3); } -.sort-button:hover, -.js-filter-input:hover { - background-color: #45a049; +.task-actions .js-delete-button { + background-color: #fff5f5; + color: #e53e3e; } -.js-filter-input { - font-size: 15px; - padding: 10px 15px; - background-color: #4caf50; +.task-actions .js-delete-button:hover { + background-color: #e53e3e; color: white; + transform: translateY(-2px); + box-shadow: 0 4px 6px rgba(229, 62, 62, 0.3); } -.completed { - background-color: #e0e0e0; +.completed .task-name { text-decoration: line-through; + color: #95a5a6; } -.js-add-html { - overflow-y: scroll; - scroll-behavior: smooth; - height: 30vh; +.export-buttons { + display: flex; + gap: 1rem; + justify-content: center; } -.js-add-html::-webkit-scrollbar { - width: 10px; /* Width of the scrollbar */ +footer { + margin-top: 2rem; + text-align: center; } -.js-add-html::-webkit-scrollbar-thumb { - background-color: rgb(136, 132, 132); - border-radius: 7px; +.social-links { + margin-top: 1rem; } -.js-add-html::-webkit-scrollbar-track { - background-color: black; - border-radius: 5px; -} -#js-success-notification { - position: absolute; - border-radius: 5px; - align-items: center; - justify-content: center; - background-color: #46a34a; - width: 15%; - min-width: 200px; - height: 7%; - left: 2%; - bottom: 10%; - color: #d4edda; -} -.js-add-html-tasks { - border: 1px black solid; - height: fit-content; - max-height: 35vh; +.social-links a { + color: var(--primary-color); + font-size: 1.5rem; + margin: 0 0.5rem; + transition: color 0.3s; } -@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Londrina+Outline&display=swap'); +.social-links a:hover { + color: var(--secondary-color); +} -@keyframes bounce { - 0%, - 20%, - 50%, - 80%, - 100% { - transform: translateY(0); +.notification { + position: fixed; + bottom: 20px; + right: 20px; + background-color: var(--secondary-color); + color: var(--white); + padding: 1rem; + border-radius: 4px; + box-shadow: var(--shadow); + display: none; +} + +@media (min-width: 768px) { + .task-input-grid { + grid-template-columns: 1fr 1fr; } - 40% { - transform: translateY(-10px); + .button-container { + grid-column: 1 / -1; } +} - 60% { - transform: translateY(-5px); +@media (max-width: 767px) { + .sort-filter-container { + flex-direction: column; + align-items: stretch; } -} -@media (max-width: 947px) { - .container { - max-width: 100%; - padding: 10px; + .sort-buttons { + flex-direction: column; + width: 100%; } - .subtitle { - font-size: 3rem; + .sort-buttons button, .js-filter-input { + width: 100%; } - .js-add-grid, - .js-add-html { - grid-template-columns: 1fr; + .small-container { + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; } - .js-add-button { - width: 100%; - padding: 10px; + .task-checkbox { + grid-row: 1 / 3; } .task-info { - flex-direction: column; + grid-column: 2 / -1; } - .footer { - font-size: 0.8rem; - flex-direction: column; + .task-actions { + grid-column: 2 / -1; + grid-row: 2; + justify-content: flex-start; + margin-top: 0.5rem; } } -@media (max-width: 480px) { - .subtitle { - font-size: 2rem; - } +.btn-small { + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + line-height: 1.5; + border-radius: 0.2rem; +} - .js-add-grid, - .js-add-html { - grid-template-columns: 1fr; - } +.btn-danger { + background-color: #dc3545; + color: white; +} - h1 { - font-size: 1.5rem; - } +.btn-danger:hover { + background-color: #c82333; +} - .task-info { +/* Dark mode styles */ +body.dark-mode { + background: linear-gradient(to bottom right, #1a202c, #2d3748); + color: #e2e8f0; +} + +body.dark-mode .app-container { + background-color: #2d3748; +} + +body.dark-mode .task-input-section, +body.dark-mode .task-list-section, +body.dark-mode .export-section { + background-color: #4a5568; +} + +body.dark-mode input, +body.dark-mode select, +body.dark-mode button { + background-color: #2d3748; + color: #e2e8f0; + border-color: #4a5568; +} + +body.dark-mode .btn-primary { + background-color: #4299e1; +} + +body.dark-mode .btn-secondary { + background-color: #48bb78; +} + +body.dark-mode .btn-outline { + color: #4299e1; + border-color: #4299e1; +} + +body.dark-mode .task-controls { + background-color: #4a5568; +} + +body.dark-mode .js-add-html-tasks { + background-color: #2d3748; +} + +body.dark-mode .small-container { + background-color: #4a5568; + border-color: #718096; +} + +body.dark-mode .task-name { + color: #e2e8f0; +} + +body.dark-mode .task-details, +body.dark-mode .task-date-time { + color: #a0aec0; +} + +body.dark-mode .category-tag { + background-color: #2c7a7b; + color: #e6fffa; +} + +body.dark-mode .priority-high { background-color: #742a2a; color: #fed7d7; } +body.dark-mode .priority-medium { background-color: #744210; color: #fefcbf; } +body.dark-mode .priority-low { background-color: #22543d; color: #c6f6d5; } + +body.dark-mode .task-actions button { + background-color: #4a5568; + color: #e2e8f0; +} + +body.dark-mode .task-actions .js-edit-button:hover { + background-color: #2b6cb0; +} + +body.dark-mode .task-actions .js-delete-button:hover { + background-color: #9b2c2c; +} + +body.dark-mode .completed .task-name { + color: #718096; +} + +body.dark-mode #dark-mode-toggle { + background-color: #4a5568; + color: #e2e8f0; +} + +body.dark-mode #dark-mode-toggle:hover { + background-color: #2d3748; +} + +/* Dark mode styles for the header */ +body.dark-mode header { + background-color: rgba(26, 32, 44, 0.9); +} + +body.dark-mode header a, +body.dark-mode header button { + color: #e2e8f0; +} + +body.dark-mode header a:hover, +body.dark-mode header button:hover { + color: #fff; +} + +body.dark-mode #dark-mode-toggle { + background-color: rgba(255, 255, 255, 0.1); +} + +body.dark-mode #dark-mode-toggle:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +/* Responsive styles */ +@media (max-width: 768px) { + header .container > div { flex-direction: column; - gap: 5px; + align-items: flex-start; } - .footer p { - font-size: 10px; + header nav { + margin-top: 1rem; + width: 100%; } + + header nav a, header nav button { + display: block; + margin: 0.5rem 0; + width: 100%; + text-align: center; + } +} + +/* Add this new style for the Get Started button in dark mode */ +body.dark-mode .get-started-btn { + background-color: #4a5568; + color: #ffffff; +} + +body.dark-mode .get-started-btn:hover { + background-color: #2d3748; + color: #ffffff; }