|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Taskly - Smart To-Do List</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #5e72e4; |
|
|
--primary-dark: #3f51b5; |
|
|
--accent-color: #ff4081; |
|
|
--text-primary: #2d3748; |
|
|
--text-secondary: #4a5568; |
|
|
--bg-color: #f8f9fa; |
|
|
--card-bg: #ffffff; |
|
|
--border-color: #e2e8f0; |
|
|
--success-color: #48bb78; |
|
|
--warning-color: #ed8936; |
|
|
--danger-color: #f56565; |
|
|
--low-priority: #4299e1; |
|
|
--medium-priority: #ed8936; |
|
|
--high-priority: #f56565; |
|
|
} |
|
|
|
|
|
[data-theme="dark"] { |
|
|
--primary-color: #667eea; |
|
|
--primary-dark: #5a67d8; |
|
|
--text-primary: #f7fafc; |
|
|
--text-secondary: #cbd5e0; |
|
|
--bg-color: #1a202c; |
|
|
--card-bg: #2d3748; |
|
|
--border-color: #4a5568; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: var(--bg-color); |
|
|
color: var(--text-primary); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 100%; |
|
|
width: 100%; |
|
|
height: 100vh; |
|
|
max-height: 100vh; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 1rem 1.5rem; |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
font-weight: 700; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
font-size: 1.4rem; |
|
|
} |
|
|
|
|
|
.header-actions { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.theme-toggle, .user-avatar { |
|
|
width: 35px; |
|
|
height: 35px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
background-color: rgba(255, 255, 255, 0.2); |
|
|
cursor: pointer; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.user-avatar { |
|
|
background-color: white; |
|
|
color: var(--primary-color); |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
|
|
|
.main-content { |
|
|
flex: 1; |
|
|
padding: 1rem; |
|
|
overflow-y: auto; |
|
|
padding-bottom: 80px; |
|
|
} |
|
|
|
|
|
|
|
|
.date-section { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.current-date h2 { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.current-date p { |
|
|
color: var(--text-secondary); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.calendar-btn { |
|
|
background-color: var(--card-bg); |
|
|
border: 1px solid var(--border-color); |
|
|
padding: 0.7rem; |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.stats-section { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
flex: 1; |
|
|
background-color: var(--card-bg); |
|
|
border-radius: 12px; |
|
|
padding: 1rem; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.stat-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.completed .stat-icon { |
|
|
background-color: rgba(73, 187, 120, 0.1); |
|
|
color: var(--success-color); |
|
|
} |
|
|
|
|
|
.pending .stat-icon { |
|
|
background-color: rgba(237, 137, 54, 0.1); |
|
|
color: var(--warning-color); |
|
|
} |
|
|
|
|
|
.overdue .stat-icon { |
|
|
background-color: rgba(245, 101, 101, 0.1); |
|
|
color: var(--danger-color); |
|
|
} |
|
|
|
|
|
.stat-card h3 { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.3rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.stat-card p { |
|
|
font-size: 0.8rem; |
|
|
color: var(--text-secondary); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
|
|
|
.add-task-container { |
|
|
position: fixed; |
|
|
bottom: 80px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: calc(100% - 2rem); |
|
|
z-index: 50; |
|
|
} |
|
|
|
|
|
.add-task-btn { |
|
|
width: 100%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.5rem; |
|
|
padding: 1rem; |
|
|
background-color: var(--primary-color); |
|
|
border: none; |
|
|
border-radius: 12px; |
|
|
color: white; |
|
|
font-size: 1rem; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 4px 12px rgba(94, 114, 228, 0.3); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
|
|
|
.tasks-container { |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.section-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.section-header h3 { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.section-header span { |
|
|
background-color: var(--border-color); |
|
|
color: var(--text-secondary); |
|
|
padding: 0.2rem 0.5rem; |
|
|
border-radius: 10px; |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
|
|
|
.task-list { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 0.8rem; |
|
|
} |
|
|
|
|
|
.task-item { |
|
|
background-color: var(--card-bg); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 12px; |
|
|
padding: 1rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
transition: all 0.2s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.task-item:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.task-checkbox { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 6px; |
|
|
border: 2px solid var(--border-color); |
|
|
appearance: none; |
|
|
cursor: pointer; |
|
|
flex-shrink: 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.task-checkbox:checked { |
|
|
background-color: var(--primary-color); |
|
|
border-color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.task-checkbox:checked::after { |
|
|
content: "\f00c"; |
|
|
font-family: "Font Awesome 6 Free"; |
|
|
font-weight: 900; |
|
|
color: white; |
|
|
font-size: 0.7rem; |
|
|
} |
|
|
|
|
|
.task-content { |
|
|
flex: 1; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.task-title { |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.2rem; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.task-title.completed { |
|
|
text-decoration: line-through; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.task-details { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.7rem; |
|
|
margin-top: 0.4rem; |
|
|
} |
|
|
|
|
|
.task-detail { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.3rem; |
|
|
font-size: 0.8rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.task-detail i { |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
|
|
|
.task-priority { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.priority-low { |
|
|
background-color: var(--low-priority); |
|
|
} |
|
|
|
|
|
.priority-medium { |
|
|
background-color: var(--medium-priority); |
|
|
} |
|
|
|
|
|
.priority-high { |
|
|
background-color: var(--high-priority); |
|
|
} |
|
|
|
|
|
.task-actions { |
|
|
display: flex; |
|
|
gap: 0.5rem; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.task-action-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
color: var(--text-secondary); |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.task-action-btn:hover { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
|
|
|
.bottom-nav { |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
background-color: var(--card-bg); |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
padding: 0.8rem 0; |
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.nav-item { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
gap: 0.2rem; |
|
|
color: var(--text-secondary); |
|
|
text-decoration: none; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.nav-item.active { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.nav-item i { |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 200; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.modal.active { |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background-color: var(--card-bg); |
|
|
width: 90%; |
|
|
max-width: 500px; |
|
|
border-radius: 16px; |
|
|
padding: 1.5rem; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
transform: translateY(20px); |
|
|
transition: all 0.3s ease; |
|
|
max-height: 90vh; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.modal.active .modal-content { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.modal-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.modal-title { |
|
|
font-size: 1.3rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.modal-close { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
color: var(--text-secondary); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 1.2rem; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 0.5rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.form-control { |
|
|
width: 100%; |
|
|
padding: 0.8rem; |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 10px; |
|
|
background-color: var(--card-bg); |
|
|
color: var(--text-primary); |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.form-control:focus { |
|
|
outline: none; |
|
|
border-color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.priority-buttons { |
|
|
display: flex; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.priority-btn { |
|
|
flex: 1; |
|
|
padding: 0.5rem; |
|
|
border-radius: 8px; |
|
|
border: 1px solid var(--border-color); |
|
|
background-color: transparent; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.3rem; |
|
|
cursor: pointer; |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.priority-btn.active { |
|
|
border-color: var(--primary-color); |
|
|
color: var(--primary-color); |
|
|
background-color: rgba(94, 114, 228, 0.1); |
|
|
} |
|
|
|
|
|
.priority-dot { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.category-tags { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 0.5rem; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.category-tag { |
|
|
padding: 0.3rem 0.8rem; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8rem; |
|
|
background-color: var(--border-color); |
|
|
color: var(--text-secondary); |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.category-tag.active { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.date-time-row { |
|
|
display: flex; |
|
|
gap: 0.8rem; |
|
|
} |
|
|
|
|
|
.date-time-row .form-group { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.input-with-icon { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.input-with-icon i { |
|
|
position: absolute; |
|
|
right: 12px; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.modal-footer { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-top: 1.5rem; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 0.8rem 1.5rem; |
|
|
border-radius: 10px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background-color: transparent; |
|
|
border: 1px solid var(--border-color); |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.task-item { |
|
|
animation: fadeIn 0.3s ease forwards; |
|
|
} |
|
|
|
|
|
|
|
|
@media (min-width: 768px) { |
|
|
.container { |
|
|
max-width: 500px; |
|
|
margin: 0 auto; |
|
|
height: 90vh; |
|
|
max-height: 900px; |
|
|
margin-top: 5vh; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.bottom-nav { |
|
|
width: 500px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
border-bottom-left-radius: 16px; |
|
|
border-bottom-right-radius: 16px; |
|
|
} |
|
|
|
|
|
.add-task-container { |
|
|
width: 460px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<header> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-tasks"></i> |
|
|
<span>Taskly</span> |
|
|
</div> |
|
|
<div class="header-actions"> |
|
|
<button class="theme-toggle" id="themeToggle"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
<button class="user-avatar">JS</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="main-content"> |
|
|
<section class="date-section"> |
|
|
<div class="current-date"> |
|
|
<h2 id="currentDate">Today, June 15</h2> |
|
|
<p id="currentTodos">You have 5 tasks to complete</p> |
|
|
</div> |
|
|
<button class="calendar-btn"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
<section class="stats-section"> |
|
|
<div class="stat-card completed"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<h3>12</h3> |
|
|
<p>Completed</p> |
|
|
</div> |
|
|
<div class="stat-card pending"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
<h3>5</h3> |
|
|
<p>Pending</p> |
|
|
</div> |
|
|
<div class="stat-card overdue"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-exclamation"></i> |
|
|
</div> |
|
|
<h3>2</h3> |
|
|
<p>Overdue</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="tasks-container"> |
|
|
<div class="section-header"> |
|
|
<h3>Today's Tasks</h3> |
|
|
<span>5 tasks</span> |
|
|
</div> |
|
|
<div class="task-list" id="todayTasks"> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="tasks-container"> |
|
|
<div class="section-header"> |
|
|
<h3>Upcoming</h3> |
|
|
<span>3 tasks</span> |
|
|
</div> |
|
|
<div class="task-list" id="upcomingTasks"> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<div class="add-task-container"> |
|
|
<button class="add-task-btn" id="addTaskBtn"> |
|
|
<i class="fas fa-plus"></i> |
|
|
<span>Add Task</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<nav class="bottom-nav"> |
|
|
<a href="#" class="nav-item active"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span>Home</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item"> |
|
|
<i class="fas fa-calendar"></i> |
|
|
<span>Calendar</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item"> |
|
|
<i class="fas fa-chart-pie"></i> |
|
|
<span>Stats</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span>Settings</span> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal" id="taskModal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h2 class="modal-title">Add New Task</h2> |
|
|
<button class="modal-close" id="closeModal">×</button> |
|
|
</div> |
|
|
<form id="taskForm"> |
|
|
<div class="form-group"> |
|
|
<label for="taskTitle">Task Title</label> |
|
|
<input type="text" id="taskTitle" class="form-control" placeholder="Enter task title" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="taskDescription">Description</label> |
|
|
<textarea id="taskDescription" class="form-control" rows="3" placeholder="Enter task description (optional)"></textarea> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>Priority</label> |
|
|
<div class="priority-buttons"> |
|
|
<button type="button" class="priority-btn" data-priority="low"> |
|
|
<span class="priority-dot priority-low"></span> |
|
|
Low |
|
|
</button> |
|
|
<button type="button" class="priority-btn active" data-priority="medium"> |
|
|
<span class="priority-dot priority-medium"></span> |
|
|
Medium |
|
|
</button> |
|
|
<button type="button" class="priority-btn" data-priority="high"> |
|
|
<span class="priority-dot priority-high"></span> |
|
|
High |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>Category</label> |
|
|
<div class="category-tags"> |
|
|
<button type="button" class="category-tag active" data-category="personal">Personal</button> |
|
|
<button type="button" class="category-tag" data-category="work">Work</button> |
|
|
<button type="button" class="category-tag" data-category="shopping">Shopping</button> |
|
|
<button type="button" class="category-tag" data-category="health">Health</button> |
|
|
<button type="button" class="category-tag" data-category="other">Other</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<div class="date-time-row"> |
|
|
<div class="form-group"> |
|
|
<label for="taskDate">Date</label> |
|
|
<div class="input-with-icon"> |
|
|
<input type="date" id="taskDate" class="form-control" required> |
|
|
<i class="fas fa-calendar"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="taskTime">Time</label> |
|
|
<div class="input-with-icon"> |
|
|
<input type="time" id="taskTime" class="form-control"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-outline" id="cancelTask">Cancel</button> |
|
|
<button type="submit" class="btn btn-primary">Add Task</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const tasks = [ |
|
|
{ |
|
|
id: 1, |
|
|
title: "Complete project presentation", |
|
|
description: "Finish slides and rehearse presentation", |
|
|
completed: false, |
|
|
priority: "high", |
|
|
category: "work", |
|
|
date: new Date(), |
|
|
time: "15:00" |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: "Buy groceries", |
|
|
description: "Milk, eggs, bread, fruits", |
|
|
completed: false, |
|
|
priority: "medium", |
|
|
category: "shopping", |
|
|
date: new Date(), |
|
|
time: null |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
title: "Morning workout", |
|
|
description: "30 minutes of cardio", |
|
|
completed: true, |
|
|
priority: "low", |
|
|
category: "health", |
|
|
date: new Date(), |
|
|
time: "07:00" |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
title: "Call mom", |
|
|
description: "Wish her happy birthday", |
|
|
completed: false, |
|
|
priority: "medium", |
|
|
category: "personal", |
|
|
date: new Date(), |
|
|
time: "18:00" |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
title: "Read 20 pages", |
|
|
description: "Current book: Atomic Habits", |
|
|
completed: false, |
|
|
priority: "low", |
|
|
category: "personal", |
|
|
date: new Date(), |
|
|
time: null |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
title: "Team meeting", |
|
|
description: "Discuss Q3 goals", |
|
|
completed: false, |
|
|
priority: "high", |
|
|
category: "work", |
|
|
date: new Date(new Date().getTime() + 86400000), |
|
|
time: "10:30" |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
title: "Dentist appointment", |
|
|
description: "Annual checkup", |
|
|
completed: false, |
|
|
priority: "medium", |
|
|
category: "health", |
|
|
date: new Date(new Date().getTime() + 2 * 86400000), |
|
|
time: "14:15" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const themeToggle = document.getElementById('themeToggle'); |
|
|
const addTaskBtn = document.getElementById('addTaskBtn'); |
|
|
const taskModal = document.getElementById('taskModal'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
const cancelTask = document.getElementById('cancelTask'); |
|
|
const taskForm = document.getElementById('taskForm'); |
|
|
const todayTasksContainer = document.getElementById('todayTasks'); |
|
|
const upcomingTasksContainer = document.getElementById('upcomingTasks'); |
|
|
const currentDateElement = document.getElementById('currentDate'); |
|
|
const currentTodosElement = document.getElementById('currentTodos'); |
|
|
const priorityButtons = document.querySelectorAll('.priority-btn'); |
|
|
const categoryButtons = document.querySelectorAll('.category-tag'); |
|
|
|
|
|
|
|
|
const options = { weekday: 'long', month: 'long', day: 'numeric' }; |
|
|
const today = new Date(); |
|
|
currentDateElement.textContent = today.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }); |
|
|
|
|
|
|
|
|
const todayTasks = tasks.filter(task => { |
|
|
return task.date.toDateString() === today.toDateString(); |
|
|
}); |
|
|
|
|
|
const upcomingTasks = tasks.filter(task => { |
|
|
return task.date > today && task.date.toDateString() !== today.toDateString(); |
|
|
}); |
|
|
|
|
|
|
|
|
currentTodosElement.textContent = `You have ${todayTasks.length} tasks to complete`; |
|
|
|
|
|
|
|
|
themeToggle.addEventListener('click', () => { |
|
|
document.body.setAttribute('data-theme', |
|
|
document.body.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'); |
|
|
|
|
|
const icon = themeToggle.querySelector('i'); |
|
|
if (document.body.getAttribute('data-theme') === 'dark') { |
|
|
icon.classList.remove('fa-moon'); |
|
|
icon.classList.add('fa-sun'); |
|
|
} else { |
|
|
icon.classList.remove('fa-sun'); |
|
|
icon.classList.add('fa-moon'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
addTaskBtn.addEventListener('click', () => { |
|
|
taskModal.classList.add('active'); |
|
|
document.getElementById('taskTitle').focus(); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
taskModal.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
cancelTask.addEventListener('click', () => { |
|
|
taskModal.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
taskModal.addEventListener('click', (e) => { |
|
|
if (e.target === taskModal) { |
|
|
taskModal.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
priorityButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
priorityButtons.forEach(btn => btn.classList.remove('active')); |
|
|
button.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
categoryButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
categoryButtons.forEach(btn => btn.classList.remove('active')); |
|
|
button.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function renderTasks() { |
|
|
|
|
|
todayTasksContainer.innerHTML = ''; |
|
|
upcomingTasksContainer.innerHTML = ''; |
|
|
|
|
|
|
|
|
todayTasks.forEach(task => { |
|
|
const taskElement = createTaskElement(task); |
|
|
todayTasksContainer.appendChild(taskElement); |
|
|
}); |
|
|
|
|
|
|
|
|
upcomingTasks.forEach(task => { |
|
|
const taskElement = createTaskElement(task); |
|
|
upcomingTasksContainer.appendChild(taskElement); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.task-checkbox').forEach(checkbox => { |
|
|
checkbox.addEventListener('change', function() { |
|
|
const taskId = parseInt(this.getAttribute('data-task-id')); |
|
|
const taskItem = tasks.find(t => t.id === taskId); |
|
|
if (taskItem) { |
|
|
taskItem.completed = this.checked; |
|
|
renderTasks(); |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.task-action-btn').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const action = this.getAttribute('data-action'); |
|
|
const taskId = parseInt(this.getAttribute('data-task-id')); |
|
|
const taskItem = tasks.find(t => t.id === taskId); |
|
|
|
|
|
if (action === 'delete' && confirm('Are you sure you want to delete this task?')) { |
|
|
const taskIndex = tasks.findIndex(t => t.id === taskId); |
|
|
if (taskIndex !== -1) { |
|
|
tasks.splice(taskIndex, 1); |
|
|
renderTasks(); |
|
|
|
|
|
} |
|
|
} else if (action === 'edit') { |
|
|
|
|
|
alert('Edit functionality would be implemented here'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
function createTaskElement(task) { |
|
|
const taskElement = document.createElement('div'); |
|
|
taskElement.className = `task-item ${task.completed ? 'completed' : ''}`; |
|
|
|
|
|
let timeDisplay = ''; |
|
|
if (task.time) { |
|
|
const [hours, minutes] = task.time.split(':'); |
|
|
const time = new Date(); |
|
|
time.setHours(parseInt(hours)); |
|
|
time.setMinutes(parseInt(minutes)); |
|
|
timeDisplay = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); |
|
|
} |
|
|
|
|
|
const taskDateOptions = { month: 'short', day: 'numeric' }; |
|
|
const taskDateDisplay = task.date.toLocaleDateString('en-US', taskDateOptions); |
|
|
|
|
|
taskElement.innerHTML = ` |
|
|
<input type="checkbox" class="task-checkbox" data-task-id="${task.id}" ${task.completed ? 'checked' : ''}> |
|
|
<div class="task-content"> |
|
|
<h3 class="task-title ${task.completed ? 'completed' : ''}">${task.title}</h3> |
|
|
${task.description ? `<p class="task-description">${task.description}</p>` : ''} |
|
|
<div class="task-details"> |
|
|
<div class="task-detail"> |
|
|
<span class="task-priority priority-${task.priority}"></span> |
|
|
${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} |
|
|
</div> |
|
|
<div class="task-detail"> |
|
|
<i class="fas fa-tag"></i> |
|
|
${task.category.charAt(0).toUpperCase() + task.category.slice(1)} |
|
|
</div> |
|
|
${task.time ? ` |
|
|
<div class="task-detail"> |
|
|
<i class="fas fa-clock"></i> |
|
|
${timeDisplay} |
|
|
</div> |
|
|
` : ''} |
|
|
</div> |
|
|
</div> |
|
|
<div class="task-actions"> |
|
|
<button class="task-action-btn" data-task-id="${task.id}" data-action="edit"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="task-action-btn" data-task-id="${task.id}" data-action="delete"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
return taskElement; |
|
|
} |
|
|
|
|
|
|
|
|
taskForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const title = document.getElementById('taskTitle').value; |
|
|
const description = document.getElementById('taskDescription').value; |
|
|
const priority = document.querySelector('.priority-btn.active').getAttribute('data-priority'); |
|
|
const category = document.querySelector('.category-tag.active').getAttribute('data-category'); |
|
|
const date = document.getElementById('taskDate').value; |
|
|
const time = document.getElementById('taskTime').value; |
|
|
|
|
|
|
|
|
const newTask = { |
|
|
id: tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1, |
|
|
title, |
|
|
description, |
|
|
completed: false, |
|
|
priority, |
|
|
category, |
|
|
date: new Date(date), |
|
|
time: time || null |
|
|
}; |
|
|
|
|
|
|
|
|
tasks.push(newTask); |
|
|
|
|
|
|
|
|
renderTasks(); |
|
|
|
|
|
|
|
|
taskModal.classList.remove('active'); |
|
|
taskForm.reset(); |
|
|
|
|
|
|
|
|
priorityButtons.forEach(btn => btn.classList.remove('active')); |
|
|
document.querySelector('.priority-btn[data-priority="medium"]').classList.add('active'); |
|
|
|
|
|
|
|
|
categoryButtons.forEach(btn => btn.classList.remove('active')); |
|
|
document.querySelector('.category-tag[data-category="personal"]').classList.add('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('taskDate').valueAsDate = new Date(); |
|
|
|
|
|
|
|
|
renderTasks(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
