Learning-Tracker/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning Progress Tracker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Context Menu -->
    <div class="context-menu" id="context-menu">
        <div class="context-menu-item" id="context-edit">&#9998; Edit</div>
        <div class="context-menu-item" id="context-promote" style="display: none;">&#11014; Promote to Task</div>
        <div class="context-menu-item" id="context-restore" style="display: none;">&#9654; Restore to Active</div>
        <div class="context-menu-item" id="context-archive" style="display: none;">&#128230; Archive</div>
        <div class="context-menu-item danger" id="context-delete">&#128465; Delete</div>
    </div>

    <!-- Modal -->
    <div class="modal" id="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modal-title">Create New Goal</h2>
                <button class="close-btn" id="close-modal">&times;</button>
            </div>
            
            <form id="task-form">
                <input type="hidden" id="edit-task-id">
                <input type="hidden" id="edit-parent-id">
                
                <div class="form-group">
                    <label for="task-title">Goal Title *</label>
                    <input type="text" id="task-title" placeholder="e.g., Learn JavaScript" required>
                </div>

                <div class="form-group">
                    <label for="task-description">Description</label>
                    <textarea id="task-description" placeholder="What do you want to achieve?" rows="2"></textarea>
                    <label class="checkbox-label">
                        <input type="checkbox" id="task-expand-desc">
                        <span>Show full description on card</span>
                    </label>
                </div>

                <div class="form-row form-row-2">
                    <div class="form-group">
                        <label for="task-size">Size *</label>
                        <select id="task-size" required>
                            <option value="small">Small (10%)</option>
                            <option value="medium" selected>Medium (25%)</option>
                            <option value="large">Large (50%)</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="task-due-date">Due Date</label>
                        <input type="date" id="task-due-date">
                    </div>
                </div>

                <div class="form-row form-row-2">
                    <div class="form-group">
                        <label>Color</label>
                        <div class="color-picker-row">
                            <input type="color" id="task-color" value="#6366f1" class="color-input">
                            <div class="color-presets" id="color-presets">
                                <span class="color-dot" data-color="#6366f1" style="background:#6366f1"></span>
                                <span class="color-dot" data-color="#059669" style="background:#059669"></span>
                                <span class="color-dot" data-color="#0284c7" style="background:#0284c7"></span>
                                <span class="color-dot" data-color="#e11d48" style="background:#e11d48"></span>
                                <span class="color-dot" data-color="#d97706" style="background:#d97706"></span>
                                <span class="color-dot" data-color="#7c3aed" style="background:#7c3aed"></span>
                                <span class="color-dot" data-color="#0891b2" style="background:#0891b2"></span>
                                <span class="color-dot" data-color="#c026d3" style="background:#c026d3"></span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="task-reward">Reward</label>
                        <input type="text" id="task-reward" placeholder="Optional">
                    </div>
                </div>

                <button type="submit" class="btn-primary" id="submit-btn">Add Goal</button>
            </form>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container">
        <div class="greeting-banner" id="greeting-banner"></div>

        <header>
            <h1>Learning Progress Tracker</h1>
            <div class="header-actions">
                <button class="btn-add" id="open-modal">+ New Goal</button>
                <div class="view-toggle">
                    <button class="toggle-btn active" id="view-active">Active</button>
                    <button class="toggle-btn" id="view-archive">
                        Archive
                        <span class="archive-count" id="archive-count" style="display:none;">0</span>
                    </button>
                </div>
            </div>
        </header>

        <div class="overall-progress" id="overall-progress">
            <div class="overall-header">
                <span>Overall Progress</span>
                <span id="overall-percentage">0%</span>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" id="overall-progress-fill" style="width: 0%"></div>
            </div>
            <div class="task-counter" id="task-counter">
                <span id="completed-count">0</span> / <span id="total-count">0</span> tasks completed
            </div>
        </div>

        <div class="tasks-container" id="tasks-container">
            <div class="loading">
                <div class="spinner"></div>
                <p>Loading...</p>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>