<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Windjammer TODO App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 100%;
padding: 30px;
}
h1 {
color: #333;
margin-bottom: 25px;
font-size: 28px;
text-align: center;
}
.input-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="text"]:focus {
outline: none;
border-color: #667eea;
}
button {
padding: 12px 24px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #5568d3;
}
.todo-list {
list-style: none;
}
.todo-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 8px;
transition: all 0.3s;
}
.todo-item:hover {
background: #e9ecef;
transform: translateX(4px);
}
.todo-item.completed {
opacity: 0.6;
}
.todo-item.completed .todo-text {
text-decoration: line-through;
color: #999;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}
.todo-text {
flex: 1;
color: #333;
font-size: 16px;
}
.delete-btn {
padding: 6px 12px;
background: #dc3545;
font-size: 14px;
}
.delete-btn:hover {
background: #c82333;
}
.stats {
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid #e0e0e0;
text-align: center;
color: #666;
font-size: 14px;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: #999;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<h1>📝 Windjammer TODO</h1>
<div class="input-group">
<input type="text" id="todo-input" placeholder="What needs to be done?" />
<button id="add-btn">Add</button>
</div>
<ul class="todo-list" id="todo-list">
<div class="empty-state">No todos yet. Add one above!</div>
</ul>
<div class="stats" id="stats">
0 total · 0 active · 0 completed
</div>
</div>
<script>
let todos = [];
let nextId = 1;
const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
const stats = document.getElementById('stats');
function addTodo() {
const text = input.value.trim();
if (!text) return;
todos.push({
id: nextId++,
text: text,
completed: false
});
input.value = '';
render();
}
function toggleTodo(id) {
const todo = todos.find(t => t.id === id);
if (todo) {
todo.completed = !todo.completed;
render();
}
}
function deleteTodo(id) {
todos = todos.filter(t => t.id !== id);
render();
}
function render() {
if (todos.length === 0) {
todoList.innerHTML = '<div class="empty-state">No todos yet. Add one above!</div>';
} else {
todoList.innerHTML = todos.map(todo => `
<li class="todo-item ${todo.completed ? 'completed' : ''}">
<input
type="checkbox"
${todo.completed ? 'checked' : ''}
onchange="toggleTodo(${todo.id})"
/>
<span class="todo-text">${todo.text}</span>
<button class="delete-btn" onclick="deleteTodo(${todo.id})">Delete</button>
</li>
`).join('');
}
const active = todos.filter(t => !t.completed).length;
const completed = todos.filter(t => t.completed).length;
stats.textContent = `${todos.length} total · ${active} active · ${completed} completed`;
}
addBtn.addEventListener('click', addTodo);
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addTodo();
});
window.toggleTodo = toggleTodo;
window.deleteTodo = deleteTodo;
render();
</script>
</body>
</html>