Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,348 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary: #6366f1;
+    --primary-dark: #4f46e5;
+    --success: #10b981;
+    --danger: #ef4444;
+    --text: #1f2937;
+    --text-light: #6b7280;
+    --border: #e5e7eb;
+    --bg: #ffffff;
+    --bg-secondary: #f9fafb;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    color: var(--text);
+    line-height: 1.6;
+}
+
+#fireworks {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+header {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    padding: 1rem;
+    box-shadow: var(--shadow-lg);
+    position: relative;
+    z-index: 10;
+}
+
+.header-content {
+    max-width: 600px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+h1 {
+    font-size: 1.75rem;
+    color: var(--primary);
+    font-weight: 700;
+}
+
+.built-with {
+    font-size: 0.75rem;
+    color: var(--text-light);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.built-with:hover {
+    color: var(--primary);
+}
+
+.container {
+    max-width: 600px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+    position: relative;
+    z-index: 5;
+}
+
+.input-section {
+    background: var(--bg);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    box-shadow: var(--shadow-lg);
+    margin-bottom: 1.5rem;
+}
+
+.input-group {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+#taskInput {
+    flex: 1;
+    padding: 0.875rem 1rem;
+    border: 2px solid var(--border);
+    border-radius: 0.75rem;
+    font-size: 1rem;
+    transition: all 0.2s;
+    background: var(--bg-secondary);
+}
+
+#taskInput:focus {
+    outline: none;
+    border-color: var(--primary);
+    background: var(--bg);
+}
+
+#addBtn {
+    padding: 0.875rem 1.25rem;
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 0.75rem;
+    font-size: 1.25rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+}
+
+#addBtn:hover {
+    background: var(--primary-dark);
+    transform: scale(1.05);
+}
+
+#addBtn:active {
+    transform: scale(0.95);
+}
+
+.stats {
+    display: flex;
+    gap: 1.5rem;
+    font-size: 0.875rem;
+    color: var(--text-light);
+}
+
+.filter-tabs {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 0.5rem;
+    border-radius: 0.75rem;
+}
+
+.filter-btn {
+    flex: 1;
+    padding: 0.625rem;
+    border: none;
+    background: transparent;
+    color: var(--text-light);
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 500;
+}
+
+.filter-btn.active {
+    background: var(--primary);
+    color: white;
+}
+
+.filter-btn:hover:not(.active) {
+    background: var(--bg-secondary);
+}
+
+.task-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+}
+
+.task-item {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 1rem;
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.875rem;
+    transition: all 0.2s;
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.task-item:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.task-item.completed {
+    opacity: 0.7;
+}
+
+.task-checkbox {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid var(--border);
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+    flex-shrink: 0;
+    margin-top: 0.125rem;
+}
+
+.task-checkbox:hover {
+    border-color: var(--primary);
+}
+
+.task-checkbox.checked {
+    background: var(--success);
+    border-color: var(--success);
+}
+
+.task-checkbox.checked::after {
+    content: '✓';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 1rem;
+}
+
+.task-content {
+    flex: 1;
+}
+
+.task-text {
+    font-size: 1rem;
+    margin-bottom: 0.25rem;
+    word-break: break-word;
+}
+
+.task-item.completed .task-text {
+    text-decoration: line-through;
+    color: var(--text-light);
+}
+
+.task-timestamps {
+    font-size: 0.75rem;
+    color: var(--text-light);
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.timestamp {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.delete-btn {
+    background: var(--danger);
+    color: white;
+    border: none;
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+    opacity: 0.8;
+}
+
+.delete-btn:hover {
+    opacity: 1;
+    transform: scale(1.05);
+}
+
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: white;
+    display: none;
+}
+
+.empty-state.show {
+    display: block;
+}
+
+.empty-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+}
+
+.clear-btn {
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--danger);
+    border: 2px solid var(--danger);
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.75rem;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.clear-btn:hover {
+    background: var(--danger);
+    color: white;
+}
+
+footer {
+    text-align: center;
+    padding: 2rem 1rem;
+    color: white;
+    font-size: 0.875rem;
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 1.5rem;
+    }
+    
+    .built-with {
+        display: none;
+    }
+    
+    .input-section {
+        padding: 1rem;
+    }
+    
+    .stats {
+        font-size: 0.75rem;
+    }
+}

assets/js/app.js

@@ -0,0 +1,180 @@
+class TodoApp {
+    constructor() {
+        this.tasks = [];
+        this.currentFilter = 'all';
+        this.initElements();
+        this.initEventListeners();
+        this.loadTasks();
+        this.initFireworks();
+    }
+    
+    initElements() {
+        this.taskInput = document.getElementById('taskInput');
+        this.addBtn = document.getElementById('addBtn');
+        this.taskList = document.getElementById('taskList');
+        this.emptyState = document.getElementById('emptyState');
+        this.clearCompletedBtn = document.getElementById('clearCompleted');
+        this.totalTasksEl = document.getElementById('totalTasks');
+        this.completedTasksEl = document.getElementById('completedTasks');
+        this.filterBtns = document.querySelectorAll('.filter-btn');
+    }
+    
+    initEventListeners() {
+        this.addBtn.addEventListener('click', () => this.addTask());
+        this.taskInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.addTask();
+        });
+        
+        this.clearCompletedBtn.addEventListener('click', () => this.clearCompleted());
+        
+        this.filterBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                this.filterBtns.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                this.currentFilter = btn.dataset.filter;
+                this.render();
+            });
+        });
+    }
+    
+    initFireworks() {
+        const canvas = document.getElementById('fireworks');
+        this.fireworks = new Fireworks(canvas);
+    }
+    
+    loadTasks() {
+        const stored = localStorage.getItem('tasks');
+        if (stored) {
+            this.tasks = JSON.parse(stored);
+        }
+        this.render();
+    }
+    
+    saveTasks() {
+        localStorage.setItem('tasks', JSON.stringify(this.tasks));
+    }
+    
+    addTask() {
+        const text = this.taskInput.value.trim();
+        if (!text) return;
+        
+        const task = {
+            id: Date.now(),
+            text: text,
+            createdAt: new Date().toISOString(),
+            completedAt: null,
+            completed: false
+        };
+        
+        this.tasks.unshift(task);
+        this.taskInput.value = '';
+        this.saveTasks();
+        this.render();
+    }
+    
+    toggleTask(id) {
+        const task = this.tasks.find(t => t.id === id);
+        if (!task) return;
+        
+        task.completed = !task.completed;
+        task.completedAt = task.completed ? new Date().toISOString() : null;
+        
+        if (task.completed) {
+            this.fireworks.start();
+        }
+        
+        this.saveTasks();
+        this.render();
+    }
+    
+    deleteTask(id) {
+        this.tasks = this.tasks.filter(t => t.id !== id);
+        this.saveTasks();
+        this.render();
+    }
+    
+    clearCompleted() {
+        this.tasks = this.tasks.filter(t => !t.completed);
+        this.saveTasks();
+        this.render();
+    }
+    
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diff = now - date;
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(diff / 3600000);
+        const days = Math.floor(diff / 86400000);
+        
+        if (minutes < 1) return 'just now';
+        if (minutes < 60) return `${minutes}m ago`;
+        if (hours < 24) return `${hours}h ago`;
+        if (days < 7) return `${days}d ago`;
+        
+        return date.toLocaleDateString();
+    }
+    
+    getFilteredTasks() {
+        switch (this.currentFilter) {
+            case 'active':
+                return this.tasks.filter(t => !t.completed);
+            case 'completed':
+                return this.tasks.filter(t => t.completed);
+            default:
+                return this.tasks;
+        }
+    }
+    
+    updateStats() {
+        const total = this.tasks.length;
+        const completed = this.tasks.filter(t => t.completed).length;
+        
+        this.totalTasksEl.textContent = `${total} ${total === 1 ? 'task' : 'tasks'}`;
+        this.completedTasksEl.textContent = `${completed} completed`;
+    }
+    
+    render() {
+        const filteredTasks = this.getFilteredTasks();
+        
+        this.taskList.innerHTML = '';
+        this.emptyState.classList.toggle('show', filteredTasks.length === 0);
+        
+        filteredTasks.forEach(task => {
+            const taskEl = document.createElement('div');
+            taskEl.className = `task-item ${task.completed ? 'completed' : ''}`;
+            
+            taskEl.innerHTML = `
+                <div class="task-checkbox ${task.completed ? 'checked' : ''}" 
+                     onclick="app.toggleTask(${task.id})"></div>
+                <div class="task-content">
+                    <div class="task-text">${this.escapeHtml(task.text)}</div>
+                    <div class="task-timestamps">
+                        <div class="timestamp">
+                            📅 Created: ${this.formatDate(task.createdAt)}
+                        </div>
+                        ${task.completedAt ? `
+                            <div class="timestamp">
+                                ✅ Completed: ${this.formatDate(task.completedAt)}
+                            </div>
+                        ` : ''}
+                    </div>
+                </div>
+                <button class="delete-btn" onclick="app.deleteTask(${task.id})">Delete</button>
+            `;
+            
+            this.taskList.appendChild(taskEl);
+        });
+        
+        this.updateStats();
+    }
+    
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// Initialize app
+const app = new TodoApp();

assets/js/fireworks.js

@@ -0,0 +1,153 @@
+class Fireworks {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+        this.particles = [];
+        this.rockets = [];
+        this.isActive = false;
+        
+        this.resize();
+        window.addEventListener('resize', () => this.resize());
+    }
+    
+    resize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+    }
+    
+    createRocket() {
+        this.rockets.push({
+            x: Math.random() * this.canvas.width,
+            y: this.canvas.height,
+            vx: (Math.random() - 0.5) * 2,
+            vy: -Math.random() * 3 - 12,
+            trail: []
+        });
+    }
+    
+    createExplosion(x, y) {
+        const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', '#eb4d4b', '#6ab04c', '#130f40'];
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        const particleCount = 50 + Math.random() * 50;
+        
+        for (let i = 0; i < particleCount; i++) {
+            const angle = (Math.PI * 2 * i) / particleCount;
+            const velocity = 2 + Math.random() * 4;
+            
+            this.particles.push({
+                x: x,
+                y: y,
+                vx: Math.cos(angle) * velocity,
+                vy: Math.sin(angle) * velocity,
+                alpha: 1,
+                color: color,
+                size: 2 + Math.random() * 2
+            });
+        }
+    }
+    
+    update() {
+        // Update rockets
+        for (let i = this.rockets.length - 1; i >= 0; i--) {
+            const rocket = this.rockets[i];
+            
+            rocket.trail.push({ x: rocket.x, y: rocket.y });
+            if (rocket.trail.length > 10) rocket.trail.shift();
+            
+            rocket.x += rocket.vx;
+            rocket.y += rocket.vy;
+            rocket.vy += 0.1;
+            
+            if (rocket.vy >= 0) {
+                this.createExplosion(rocket.x, rocket.y);
+                this.rockets.splice(i, 1);
+            }
+        }
+        
+        // Update particles
+        for (let i = this.particles.length - 1; i >= 0; i--) {
+            const p = this.particles[i];
+            
+            p.x += p.vx;
+            p.y += p.vy;
+            p.vy += 0.05;
+            p.vx *= 0.99;
+            p.alpha -= 0.01;
+            
+            if (p.alpha <= 0) {
+                this.particles.splice(i, 1);
+            }
+        }
+    }
+    
+    draw() {
+        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        
+        // Draw rockets
+        this.rockets.forEach(rocket => {
+            this.ctx.beginPath();
+            rocket.trail.forEach((point, index) => {
+                if (index === 0) {
+                    this.ctx.moveTo(point.x, point.y);
+                } else {
+                    this.ctx.lineTo(point.x, point.y);
+                }
+            });
+            this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+            this.ctx.lineWidth = 2;
+            this.ctx.stroke();
+        });
+        
+        // Draw particles
+        this.particles.forEach(p => {
+            this.ctx.globalAlpha = p.alpha;
+            this.ctx.fillStyle = p.color;
+            this.ctx.beginPath();
+            this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+            this.ctx.fill();
+            
+            // Add glow effect
+            this.ctx.shadowBlur = 10;
+            this.ctx.shadowColor = p.color;
+            this.ctx.fill();
+            this.ctx.shadowBlur = 0;
+        });
+        
+        this.ctx.globalAlpha = 1;
+    }
+    
+    animate() {
+        if (!this.isActive) return;
+        
+        this.update();
+        this.draw();
+        
+        if (Math.random() < 0.05) {
+            this.createRocket();
+        }
+        
+        requestAnimationFrame(() => this.animate());
+    }
+    
+    start() {
+        this.isActive = true;
+        this.particles = [];
+        this.rockets = [];
+        this.animate();
+        
+        // Stop after 3 seconds
+        setTimeout(() => {
+            this.stop();
+        }, 3000);
+    }
+    
+    stop() {
+        this.isActive = false;
+        setTimeout(() => {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            this.particles = [];
+            this.rockets = [];
+        }, 1000);
+    }
+}

index.html

@@ -1,19 +1,76 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="description" content="A beautiful To-Do List app with fireworks celebration">
+    <meta name="theme-color" content="#6366f1">
+    <title>TaskFire - To-Do List with Celebration</title>
+    
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="manifest.json">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="apple-mobile-web-app-title" content="TaskFire">
+    <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%236366f1' width='100' height='100'/><text x='50' y='50' text-anchor='middle' dy='0.3em' fill='white' font-size='50'>📝</text></svg>">
+    
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+<body>
+    <canvas id="fireworks"></canvas>
+    
+    <header>
+        <div class="header-content">
+            <h1>🎯 TaskFire</h1>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
+        </div>
+    </header>
+
+    <main class="container">
+        <div class="input-section">
+            <div class="input-group">
+                <input 
+                    type="text" 
+                    id="taskInput" 
+                    placeholder="What needs to be done?" 
+                    maxlength="200"
+                    autocomplete="off"
+                >
+                <button id="addBtn" type="button" aria-label="Add task">
+                    <span>+</span>
+                </button>
+            </div>
+            <div class="stats">
+                <span id="totalTasks">0 tasks</span>
+                <span id="completedTasks">0 completed</span>
+            </div>
+        </div>
+
+        <div class="filter-tabs">
+            <button class="filter-btn active" data-filter="all">All</button>
+            <button class="filter-btn" data-filter="active">Active</button>
+            <button class="filter-btn" data-filter="completed">Completed</button>
+        </div>
+
+        <div id="taskList" class="task-list">
+            <!-- Tasks will be dynamically added here -->
+        </div>
+
+        <div class="empty-state" id="emptyState">
+            <div class="empty-icon">📝</div>
+            <p>No tasks yet. Add one above!</p>
+        </div>
+
+        <div class="actions">
+            <button id="clearCompleted" class="clear-btn">Clear Completed</button>
+        </div>
+    </main>
+
+    <footer>
+        <p>© 2024 TaskFire. Stay productive, celebrate more!</p>
+    </footer>
+
+    <script src="assets/js/fireworks.js"></script>
+    <script src="assets/js/app.js"></script>
+</body>
+</html>

manifest.json

@@ -0,0 +1,21 @@
+{
+    "name": "TaskFire - To-Do List",
+    "short_name": "TaskFire",
+    "description": "A beautiful To-Do List app with fireworks celebration",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#6366f1",
+    "icons": [
+        {
+            "src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'><rect fill='%236366f1' width='192' height='192'/><text x='96' y='96' text-anchor='middle' dy='0.3em' fill='white' font-size='96'>📝</text></svg>",
+            "sizes": "192x192",
+            "type": "image/svg+xml"
+        },
+        {
+            "src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect fill='%236366f1' width='512' height='512'/><text x='256' y='256' text-anchor='middle' dy='0.3em' fill='white' font-size='256'>📝</text></svg>",
+            "sizes": "512x512",
+            "type": "image/svg+xml"
+        }
+    ]
+}