Hugging Face's logo

Spaces:
akhaliq
/
anycoder-2b5199d5
Running

App Files Community
akhaliq HF Staff commited on
Commit
e333f4b
·
verified ·
1 Parent(s): 538971a

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +59 -19
index.html CHANGED
@@ -1,19 +1,59 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Todo App</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
10
+ body { min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; justify-content: center; align-items: center; padding: 20px; }
11
+ .container { background: white; border-radius: 20px; padding: 30px; width: 100%; max-width: 450px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
12
+ header { text-align: center; margin-bottom: 25px; }
13
+ header a { font-size: 12px; color: #667eea; text-decoration: none; }
14
+ header a:hover { text-decoration: underline; }
15
+ h1 { color: #333; font-size: 28px; margin: 10px 0; }
16
+ .input-group { display: flex; gap: 10px; margin-bottom: 20px; }
17
+ input { flex: 1; padding: 15px; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 16px; transition: border-color 0.3s; }
18
+ input:focus { outline: none; border-color: #667eea; }
19
+ button { padding: 15px 25px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 12px; cursor: pointer; font-size: 16px; transition: transform 0.2s, box-shadow 0.2s; }
20
+ button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102,126,234,0.4); }
21
+ .filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
22
+ .filter-btn { padding: 8px 16px; border: 2px solid #667eea; background: white; color: #667eea; border-radius: 20px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
23
+ .filter-btn.active, .filter-btn:hover { background: #667eea; color: white; }
24
+ ul { list-style: none; max-height: 300px; overflow-y: auto; }
25
+ li { display: flex; align-items: center; gap: 12px; padding: 15px; background: #f8f9fa; border-radius: 12px; margin-bottom: 10px; transition: all 0.3s; }
26
+ li:hover { transform: translateX(5px); box-shadow: 0 3px 15px rgba(0,0,0,0.1); }
27
+ li.completed span { text-decoration: line-through; color: #aaa; }
28
+ li span { flex: 1; font-size: 16px; word-break: break-word; }
29
+ li i { cursor: pointer; font-size: 18px; transition: color 0.2s; }
30
+ .fa-check-circle { color: #28a745; }
31
+ .fa-circle { color: #ddd; }
32
+ .fa-trash { color: #dc3545; }
33
+ .fa-trash:hover { color: #a71d2a; }
34
+ .empty { text-align: center; color: #aaa; padding: 30px; }
35
+ @media (max-width: 480px) { .container { padding: 20px; } h1 { font-size: 24px; } }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <div class="container">
40
+ <header><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a><h1><i class="fas fa-tasks"></i> Todo App</h1></header>
41
+ <div class="input-group"><input type="text" id="todoInput" placeholder="Add a new task..." onkeypress="if(event.key==='Enter')addTodo()"><button onclick="addTodo()"><i class="fas fa-plus"></i></button></div>
42
+ <div class="filters"><button class="filter-btn active" onclick="setFilter('all',this)">All</button><button class="filter-btn" onclick="setFilter('active',this)">Active</button><button class="filter-btn" onclick="setFilter('completed',this)">Completed</button></div>
43
+ <ul id="todoList"></ul>
44
+ </div>
45
+ <script>
46
+ let todos = JSON.parse(localStorage.getItem('todos')) || [], filter = 'all';
47
+ const save = () => localStorage.setItem('todos', JSON.stringify(todos));
48
+ const render = () => {
49
+ const list = document.getElementById('todoList'), filtered = todos.filter(t => filter === 'all' ? true : filter === 'active' ? !t.done : t.done);
50
+ list.innerHTML = filtered.length ? filtered.map((t, i) => `<li class="${t.done ? 'completed' : ''}"><i class="fas fa-${t.done ? 'check-' : ''}circle" onclick="toggle(${todos.indexOf(t)})"></i><span>${t.text}</span><i class="fas fa-trash" onclick="remove(${todos.indexOf(t)})"></i></li>`).join('') : '<li class="empty">No tasks here!</li>';
51
+ };
52
+ const addTodo = () => { const input = document.getElementById('todoInput'); if (input.value.trim()) { todos.push({ text: input.value.trim(), done: false }); input.value = ''; save(); render(); } };
53
+ const toggle = i => { todos[i].done = !todos[i].done; save(); render(); };
54
+ const remove = i => { todos.splice(i, 1); save(); render(); };
55
+ const setFilter = (f, btn) => { filter = f; document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); render(); };
56
+ render();
57
+ </script>
58
+ </body>
59
+ </html>