Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern Task Manager - Girişsiz</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #667eea; | |
| --primary-dark: #5a67d8; | |
| --secondary: #48bb78; | |
| --danger: #f56565; | |
| --warning: #ed8936; | |
| --info: #4299e1; | |
| --dark: #2d3748; | |
| --light: #f7fafc; | |
| --glass: rgba(255, 255, 255, 0.1); | |
| --glass-border: rgba(255, 255, 255, 0.2); | |
| --shadow: 0 8px 32px rgba(31, 38, 135, 0.15); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| color: var(--dark); | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| body.dark-mode { | |
| --dark: #f7fafc; | |
| --light: #1a202c; | |
| --glass: rgba(0, 0, 0, 0.3); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| } | |
| .animated-bg { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .animated-bg::before { | |
| content: ''; | |
| position: absolute; | |
| width: 200%; | |
| height: 200%; | |
| top: -50%; | |
| left: -50%; | |
| background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| animation: moveGrid 20s linear infinite; | |
| } | |
| @keyframes moveGrid { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(50px, 50px); } | |
| } | |
| header { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--glass-border); | |
| padding: 1rem 2rem; | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| animation: slideDown 0.5s ease-out; | |
| } | |
| @keyframes slideDown { | |
| from { | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .header-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: white; | |
| } | |
| .logo i { | |
| font-size: 2rem; | |
| animation: rotate 3s linear infinite; | |
| } | |
| @keyframes rotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .header-controls { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .theme-toggle { | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 1.2rem; | |
| } | |
| .theme-toggle:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: scale(1.1); | |
| } | |
| main { | |
| max-width: 1400px; | |
| margin: 2rem auto; | |
| padding: 0 2rem; | |
| animation: fadeInUp 0.6s ease-out; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| animation: fadeIn 0.5s ease-out; | |
| animation-fill-mode: both; | |
| } | |
| .stat-card:nth-child(1) { animation-delay: 0.1s; } | |
| .stat-card:nth-child(2) { animation-delay: 0.2s; } | |
| .stat-card:nth-child(3) { animation-delay: 0.3s; } | |
| .stat-card:nth-child(4) { animation-delay: 0.4s; } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.9); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25); | |
| } | |
| .stat-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .stat-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: white; | |
| } | |
| .stat-icon.primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); } | |
| .stat-icon.success { background: linear-gradient(135deg, var(--secondary), #38a169); } | |
| .stat-icon.warning { background: linear-gradient(135deg, var(--warning), #dd6b20); } | |
| .stat-icon.danger { background: linear-gradient(135deg, var(--danger), #e53e3e); } | |
| .stat-value { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: white; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 0.9rem; | |
| } | |
| .content-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 2fr; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| @media (max-width: 968px) { | |
| .content-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .add-task-section { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .section-title { | |
| color: white; | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-label { | |
| color: rgba(255, 255, 255, 0.9); | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .form-input, .form-select, .form-textarea { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid var(--glass-border); | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-input::placeholder, .form-textarea::placeholder { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .form-input:focus, .form-select:focus, .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| background: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); | |
| } | |
| .form-textarea { | |
| resize: vertical; | |
| min-height: 100px; | |
| } | |
| .priority-buttons { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .priority-btn { | |
| flex: 1; | |
| padding: 0.75rem; | |
| border: 2px solid var(--glass-border); | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-weight: 500; | |
| } | |
| .priority-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | |
| } | |
| .priority-btn.active { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .btn { | |
| padding: 0.75rem 2rem; | |
| border: none; | |
| border-radius: 10px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .tasks-section { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .filter-tabs { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: 1.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .filter-tab { | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: rgba(255, 255, 255, 0.8); | |
| border: 1px solid var(--glass-border); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 0.9rem; | |
| } | |
| .filter-tab:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| } | |
| .filter-tab.active { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| } | |
| .tasks-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| max-height: 600px; | |
| overflow-y: auto; | |
| padding-right: 0.5rem; | |
| } | |
| .tasks-list::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .tasks-list::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| } | |
| .tasks-list::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.3); | |
| border-radius: 10px; | |
| } | |
| .tasks-list::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.5); | |
| } | |
| .task-item { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 15px; | |
| padding: 1rem; | |
| transition: var(--transition); | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .task-item:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| transform: translateX(5px); | |
| } | |
| .task-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: start; | |
| margin-bottom: 0.5rem; | |
| } | |
| .task-title { | |
| color: white; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| flex: 1; | |
| } | |
| .task-item.completed .task-title { | |
| text-decoration: line-through; | |
| opacity: 0.6; | |
| } | |
| .task-priority { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: white; | |
| } | |
| .priority-low { background: var(--secondary); } | |
| .priority-medium { background: var(--warning); } | |
| .priority-high { background: var(--danger); } | |
| .task-description { | |
| color: rgba(255, 255, 255, 0.7); | |
| margin-bottom: 1rem; | |
| line-height: 1.5; | |
| } | |
| .task-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .task-meta { | |
| display: flex; | |
| gap: 1rem; | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 0.85rem; | |
| } | |
| .task-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .task-btn { | |
| padding: 0.5rem; | |
| border: none; | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 0.9rem; | |
| } | |
| .task-btn:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: scale(1.1); | |
| } | |
| .task-btn.complete { | |
| background: var(--secondary); | |
| } | |
| .task-btn.delete { | |
| background: var(--danger); | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 3rem; | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .empty-state i { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| opacity: 0.5; | |
| } | |
| .chart-container { | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| margin-top: 2rem; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 30px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--secondary), var(--primary)); | |
| border-radius: 15px; | |
| transition: width 0.5s ease-out; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: rgba(255, 255, 255, 0.8); | |
| margin-top: 3rem; | |
| } | |
| .footer a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| transform: scale(1.05); | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| padding: 1rem; | |
| } | |
| main { | |
| padding: 0 1rem; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .priority-buttons { | |
| flex-direction: column; | |
| } | |
| } | |
| .toast { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| background: var(--glass); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 10px; | |
| padding: 1rem 1.5rem; | |
| color: white; | |
| box-shadow: var(--shadow); | |
| z-index: 1000; | |
| animation: slideInRight 0.3s ease-out; | |
| display: none; | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| .toast.show { | |
| display: block; | |
| } | |
| .toast.success { | |
| background: linear-gradient(135deg, var(--secondary), #38a169); | |
| } | |
| .toast.error { | |
| background: linear-gradient(135deg, var(--danger), #e53e3e); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="animated-bg"></div> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-tasks"></i> | |
| <span>Task Manager Pro</span> | |
| </div> | |
| <div class="header-controls"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: white; text-decoration: none; font-weight: 600; padding: 0.5rem 1rem; background: var(--glass); border-radius: 20px; border: 1px solid var(--glass-border);"> | |
| Built with anycoder | |
| </a> | |
| <button class="theme-toggle" onclick="toggleTheme()"> | |
| <i class="fas fa-moon" id="themeIcon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-header"> | |
| <div class="stat-icon primary"> | |
| <i class="fas fa-list-check"></i> | |
| </div> | |
| </div> | |
| <div class="stat-value" id="totalTasks">0</div> | |
| <div class="stat-label">Toplam Görev</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-header"> | |
| <div class="stat-icon success"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| </div> | |
| <div class="stat-value" id="completedTasks">0</div> | |
| <div class="stat-label">Tamamlanan</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-header"> | |
| <div class="stat-icon warning"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| </div> | |
| <div class="stat-value" id="pendingTasks">0</div> | |
| <div class="stat-label">Bekleyen</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-header"> | |
| <div class="stat-icon danger"> | |
| <i class="fas fa-fire"></i> | |
| </div> | |
| </div> | |
| <div class="stat-value" id="highPriorityTasks">0</div> | |
| <div class="stat-label">Yüksek Öncelikli</div> | |
| </div> | |
| </section> | |
| <div class="content-grid"> | |
| <section class="add-task-section"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-plus-circle"></i> | |
| Yeni Görev Ekle | |
| </h2> | |
| <form id="taskForm"> | |
| <div class="form-group"> | |
| <label class="form-label" for="taskTitle">Görev Başlığı</label> | |
| <input type="text" class="form-input" id="taskTitle" placeholder="Görev başlığını girin..." required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="taskDescription">Açıklama</label> | |
| <textarea class="form-textarea" id="taskDescription" placeholder="Görev açıklamasını girin..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Öncelik Seviyesi</label> | |
| <div class="priority-buttons"> | |
| <button type="button" class="priority-btn" data-priority="low" onclick="setPriority('low')"> | |
| <i class="fas fa-flag"></i> Düşük | |
| </button> | |
| <button type="button" class="priority-btn active" data-priority="medium" onclick="setPriority('medium')"> | |
| <i class="fas fa-flag"></i> Orta | |
| </button> | |
| <button type="button" class="priority-btn" data-priority="high" onclick="setPriority('high')"> | |
| <i class="fas fa-flag"></i> Yüksek | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="taskCategory">Kategori</label> | |
| <select class="form-select" id="taskCategory"> | |
| <option value="work">İş</option> | |
| <option value="personal">Kişisel</option> | |
| <option value="shopping">Alışveriş</option> | |
| <option value="health">Sağlık</option> | |
| <option value="education">Eğitim</option> | |
| <option value="other">Diğer</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-plus"></i> | |
| Görev Ekle | |
| </button> | |
| </form> | |
| </section> | |
| <section class="tasks-section"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-list"></i> | |
| Görev Listesi | |
| </h2> | |
| <div class="filter-tabs"> | |
| <button class="filter-tab active" onclick="filterTasks('all')">Tümü</button> | |
| <button class="filter-tab" onclick="filterTasks('pending')">Bekleyen</button> | |
| <button class="filter-tab" onclick="filterTasks('completed')">Tamamlanan</button> | |
| <button class="filter-tab" onclick="filterTasks('high')">Yüksek Öncelik</button> | |
| </div> | |
| <div class="tasks-list" id="tasksList"> | |
| <div class="empty-state"> | |
| <i class="fas fa-inbox"></i> | |
| <p>Henüz görev eklenmemiş</p> | |
| <p style="font-size: 0.9rem; margin-top: 0.5rem;">Yeni görev eklemek için formu kullanın</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <section class="chart-container"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-chart-line"></i> | |
| İlerleme Durumu | |
| </h2> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressBar" style="width: 0%"> | |
| 0% | |
| </div> | |
| </div> | |
| <p style="color: rgba(255,255,255,0.8); margin-top: 1rem; text-align: center;"> | |
| Tamamlanan görevlerin oranı | |
| </p> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <p>© 2024 Task Manager Pro. Tüm hakları saklıdır.</p> | |
| <p style="margin-top: 0.5rem;"> | |
| Made with <i class="fas fa-heart" style="color: var(--danger);"></i> by | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | |
| </p> | |
| </footer> | |
| <div class="toast" id="toast"></div> | |
| <script> | |
| let tasks = JSON.parse(localStorage.getItem('tasks')) || []; | |
| let currentFilter = 'all'; | |
| let selectedPriority = 'medium'; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| renderTasks(); | |
| updateStats(); | |
| updateProgress(); | |
| }); | |
| // Theme Toggle | |
| function toggleTheme() { | |
| document.body.classList.toggle('dark-mode'); | |
| const icon = document.getElementById('themeIcon'); | |
| if (document.body.classList.contains('dark-mode')) { | |
| icon.className = 'fas fa-sun'; | |
| } else { | |
| icon.className = 'fas fa-moon'; | |
| } | |
| } | |
| // Set Priority | |
| function setPriority(priority) { | |
| selectedPriority = priority; | |
| document.querySelectorAll('.priority-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| if (btn.dataset.priority === priority) { | |
| btn.classList.add('active'); | |
| } | |
| }); | |
| } | |
| // Add Task | |
| document.getElementById('taskForm').addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const title = document.getElementById('taskTitle').value; | |
| const description = document.getElementById('taskDescription').value; | |
| const category = document.getElementById('taskCategory').value; | |
| const task = { | |
| id: Date.now(), | |
| title, | |
| description, | |
| priority: selectedPriority, | |
| category, | |
| completed: false, | |
| createdAt: new Date().toISOString() | |
| }; | |
| tasks.unshift(task); | |
| saveTasks(); | |
| renderTasks(); | |
| updateStats(); | |
| updateProgress(); | |
| // Reset form | |
| document.getElementById('taskForm').reset(); | |
| setPriority('medium'); | |
| showToast('Görev başarıyla eklendi!', 'success'); | |
| }); | |
| // Render Tasks | |
| function renderTasks() { | |
| const tasksList = document.getElementById('tasksList'); | |
| let filteredTasks = tasks; | |
| if (currentFilter === 'pending') { | |
| filteredTasks = tasks.filter(t => !t.completed); | |
| } else if (currentFilter === 'completed') { | |
| filteredTasks = tasks.filter(t => t.completed); | |
| } else if (currentFilter === 'high') { | |
| filteredTasks = tasks.filter(t => t.priority === 'high'); | |
| } | |
| if (filteredTasks.length === 0) { | |
| tasksList.innerHTML = ` | |
| <div class="empty-state"> | |
| <i class="fas fa-inbox"></i> | |
| <p>Gösterilecek görev bulunamadı</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| tasksList.innerHTML = filteredTasks.map(task => ` | |
| <div class="task-item ${task.completed ? 'completed' : ''}" data-id="${task.id}"> | |
| <div class="task-header"> | |
| <div class="task-title">${task.title}</div> | |
| <span class="task-priority priority-${task.priority}"> | |
| ${task.priority === 'low' ? 'Düşük' : task.priority === 'medium' ? 'Orta' : 'Yüksek'} | |
| </span> | |
| </div> | |
| ${task.description ? `<div class="task-description">${task.description}</div>` : ''} | |
| <div class="task-footer"> | |
| <div class="task-meta"> | |
| <span><i class="fas fa-folder"></i> ${getCategoryName(task.category)}</span> | |
| <span><i class="fas fa-calendar"></i> ${formatDate(task.createdAt)}</span> | |
| </div> | |
| <div class="task-actions"> | |
| ${!task.completed ? ` | |
| <button class="task-btn complete" onclick="toggleTask(${task.id})"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| ` : ''} | |
| <button class="task-btn delete" onclick="deleteTask(${task.id})"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| // Toggle Task | |
| function toggleTask(id) { | |
| const task = tasks.find(t => t.id === id); | |
| if (task) { | |
| task.completed = !task.completed; | |
| saveTasks(); | |
| renderTasks(); | |
| updateStats(); | |
| updateProgress(); | |
| showToast(task.completed ? 'Görev tamamlandı!' : 'Görev devam ediyor', 'success'); | |
| } | |
| } | |
| // Delete Task | |
| function deleteTask(id) { | |
| tasks = tasks.filter(t => t.id !== id); | |
| saveTasks(); | |
| renderTasks(); | |
| updateStats(); | |
| updateProgress(); | |
| showToast('Görev silindi', 'error'); | |
| } | |
| // Filter Tasks | |
| function filterTasks(filter) { | |
| currentFilter = filter; | |
| document.querySelectorAll('.filter-tab').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| event.target.classList.add('active'); | |
| renderTasks(); | |
| } | |
| // Update Stats | |
| function updateStats() { | |
| document.getElementById('totalTasks').textContent = tasks.length; | |
| document.getElementById('completedTasks').textContent = tasks.filter(t => t.completed).length; | |
| document.getElementById('pendingTasks').textContent = tasks.filter(t => !t.completed).length; | |
| document.getElementById('highPriorityTasks').textContent = tasks.filter(t => t.priority === 'high' && !t.completed).length; | |
| } | |
| // Update Progress | |
| function updateProgress() { | |
| const total = tasks.length; | |
| const completed = tasks.filter(t => t.completed).length; | |
| const percentage = total > 0 ? Math.round((completed / total) * 100) : 0; | |
| const progressBar = document.getElementById('progressBar'); | |
| progressBar.style.width = percentage + '%'; | |
| progressBar.textContent = percentage + '%'; | |
| } | |
| // Save Tasks | |
| function saveTasks() { | |
| localStorage.setItem('tasks', JSON.stringify(tasks)); | |
| } | |
| // Get Category Name | |
| function getCategoryName(category) { | |
| const categories = { | |
| work: 'İş', | |
| personal: 'Kişisel', | |
| shopping: 'Alışveriş', | |
| health: 'Sağlık', | |
| education: 'Eğitim', | |
| other: 'Diğer' | |
| }; | |
| return categories[category] || category; | |
| } | |
| // Format Date | |
| function formatDate(dateString) { | |
| const date = new Date(dateString); | |
| const today = new Date(); | |
| const diffTime = Math.abs(today - date); | |
| const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); | |
| if (diffDays === 0) return 'Bugün'; | |
| if (diffDays === 1) return 'Dün'; | |
| if (diffDays < 7) return `${diffDays} gün önce`; | |
| return date.toLocaleDateString('tr-TR'); | |
| } | |
| // Show Toast | |
| function showToast(message, type = 'success') { | |
| const toast = document.getElementById('toast'); | |
| toast.textContent = message; | |
| toast.className = `toast ${type} show`; | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| </script> | |
| </body> | |
| </html> |