Hugging Face's logo

Spaces:
akhaliq
/
anycoder-48487f3d
Running

App Files Community
akhaliq HF Staff commited on
Commit
fd877bb
·
verified ·
1 Parent(s): 59bd5b3

Deploy from anycoder

Browse files
Files changed (1) hide show
  1. index.html +95 -19
index.html CHANGED
@@ -1,19 +1,95 @@
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>Modern Todo App</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root { --primary: #6c5ce7; --bg: #a29bfe; --glass: rgba(255, 255, 255, 0.9); --text: #2d3436; }
11
+ * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; outline: none; }
12
+ body { background: linear-gradient(135deg, #6c5ce7, #a29bfe); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }
13
+ .app { background: var(--glass); width: 100%; max-width: 400px; border-radius: 20px; padding: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); backdrop-filter: blur(10px); }
14
+ header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
15
+ h1 { color: var(--primary); font-size: 24px; font-weight: 600; }
16
+ .brand { font-size: 10px; color: #636e72; text-decoration: none; font-weight: 600; transition: 0.3s; }
17
+ .brand:hover { color: var(--primary); }
18
+ .input-group { position: relative; display: flex; margin-bottom: 20px; }
19
+ input { width: 100%; padding: 15px 50px 15px 20px; border: none; background: #f1f2f6; border-radius: 50px; font-size: 14px; color: var(--text); transition: 0.3s; }
20
+ input:focus { box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2); }
21
+ #addBtn { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; border: none; background: var(--primary); color: white; border-radius: 50%; cursor: pointer; transition: 0.3s; }
22
+ #addBtn:hover { transform: rotate(90deg); background: #5649c0; }
23
+ .filters { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
24
+ .filter-btn { font-size: 12px; color: #b2bec3; cursor: pointer; font-weight: 600; transition: 0.3s; }
25
+ .filter-btn.active { color: var(--primary); }
26
+ ul { list-style: none; max-height: 300px; overflow-y: auto; padding-right: 5px; }
27
+ ul::-webkit-scrollbar { width: 5px; }
28
+ ul::-webkit-scrollbar-thumb { background: #dfe6e9; border-radius: 10px; }
29
+ li { background: white; padding: 12px 15px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; animation: fadeIn 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: 0.3s; }
30
+ li:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
31
+ li.completed { opacity: 0.6; text-decoration: line-through; background: #f1f2f6; }
32
+ li span { flex: 1; margin: 0 10px; font-size: 14px; cursor: pointer; }
33
+ .check { color: #dfe6e9; cursor: pointer; font-size: 18px; transition: 0.3s; }
34
+ li.completed .check { color: var(--primary); }
35
+ .del { color: #ff7675; cursor: pointer; opacity: 0; transition: 0.3s; font-size: 14px; }
36
+ li:hover .del { opacity: 1; }
37
+ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
38
+ </style>
39
+ </head>
40
+ <body>
41
+ <div class="app">
42
+ <header>
43
+ <h1>My Tasks</h1>
44
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand">Built with anycoder</a>
45
+ </header>
46
+ <div class="input-group">
47
+ <input type="text" id="input" placeholder="What needs to be done?">
48
+ <button id="addBtn"><i class="fas fa-plus"></i></button>
49
+ </div>
50
+ <div class="filters">
51
+ <span class="filter-btn active" onclick="filter('all')">All</span>
52
+ <span class="filter-btn" onclick="filter('active')">Active</span>
53
+ <span class="filter-btn" onclick="filter('completed')">Completed</span>
54
+ </div>
55
+ <ul id="list"></ul>
56
+ </div>
57
+
58
+ <script>
59
+ const input = document.getElementById('input');
60
+ const list = document.getElementById('list');
61
+ let todos = JSON.parse(localStorage.getItem('todos')) || [];
62
+ let currentFilter = 'all';
63
+
64
+ const save = () => localStorage.setItem('todos', JSON.stringify(todos));
65
+
66
+ const render = () => {
67
+ list.innerHTML = '';
68
+ const filtered = todos.filter(t => currentFilter === 'all' ? true : currentFilter === 'completed' ? t.done : !t.done);
69
+ filtered.forEach(t => {
70
+ const li = document.createElement('li');
71
+ li.className = t.done ? 'completed' : '';
72
+ li.innerHTML = `<i class="fas fa-circle-check check" onclick="toggle(${t.id})"></i>
73
+ <span onclick="toggle(${t.id})">${t.text}</span>
74
+ <i class="fas fa-trash-alt del" onclick="remove(${t.id})"></i>`;
75
+ list.appendChild(li);
76
+ });
77
+ document.querySelectorAll('.filter-btn').forEach(b => b.classList.toggle('active', b.innerText.toLowerCase() === currentFilter || (b.innerText === 'All' && currentFilter === 'all')));
78
+ };
79
+
80
+ const add = () => {
81
+ if (!input.value.trim()) return;
82
+ todos.unshift({ id: Date.now(), text: input.value.trim(), done: false });
83
+ input.value = ''; save(); render();
84
+ };
85
+
86
+ const toggle = (id) => { todos = todos.map(t => t.id === id ? { ...t, done: !t.done } : t); save(); render(); };
87
+ const remove = (id) => { todos = todos.filter(t => t.id !== id); save(); render(); };
88
+ const filter = (type) => { currentFilter = type; render(); };
89
+
90
+ document.getElementById('addBtn').onclick = add;
91
+ input.addEventListener('keypress', e => e.key === 'Enter' && add());
92
+ render();
93
+ </script>
94
+ </body>
95
+ </html>