Spaces:

akhaliq
/

anycoder-7a9788e8

Running

App Files Files Community

anycoder-7a9788e8 / index.html

akhaliq HF Staff

Upload folder using huggingface_hub

f30d950 verified 7 months ago

Raw

History Blame Contribute Delete

18.8 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Modern Todo App</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	:root {
	--primary-color: #6366f1;
	--primary-dark: #4f46e5;
	--secondary-color: #f3f4f6;
	--text-primary: #1f2937;
	--text-secondary: #6b7280;
	--background: #ffffff;
	--border-color: #e5e7eb;
	--success-color: #10b981;
	--danger-color: #ef4444;
	--warning-color: #f59e0b;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	color: var(--text-primary);
	}

	.container {
	width: 100%;
	max-width: 600px;
	background: var(--background);
	border-radius: 20px;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	animation: slideUp 0.5s ease-out;
	}

	@keyframes slideUp {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.header {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	color: white;
	padding: 30px 25px;
	text-align: center;
	position: relative;
	}

	.header h1 {
	font-size: 2rem;
	margin-bottom: 10px;
	font-weight: 700;
	}

	.header p {
	font-size: 1rem;
	opacity: 0.9;
	}

	.anycoder-link {
	position: absolute;
	top: 15px;
	right: 15px;
	color: white;
	text-decoration: none;
	font-size: 0.9rem;
	opacity: 0.8;
	transition: var(--transition);
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.anycoder-link:hover {
	opacity: 1;
	transform: scale(1.05);
	}

	.todo-input-container {
	padding: 25px;
	background: var(--secondary-color);
	border-bottom: 1px solid var(--border-color);
	}

	.todo-input {
	width: 100%;
	padding: 15px 20px;
	border: none;
	border-radius: 12px;
	font-size: 1rem;
	background: white;
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	}

	.todo-input:focus {
	outline: none;
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	}

	.todo-input::placeholder {
	color: var(--text-secondary);
	}

	.todo-list {
	padding: 20px;
	min-height: 300px;
	max-height: 400px;
	overflow-y: auto;
	}

	.todo-list::-webkit-scrollbar {
	width: 6px;
	}

	.todo-list::-webkit-scrollbar-track {
	background: var(--secondary-color);
	border-radius: 10px;
	}

	.todo-list::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 10px;
	}

	.todo-item {
	display: flex;
	align-items: center;
	padding: 15px;
	margin-bottom: 12px;
	background: white;
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	animation: fadeIn 0.3s ease-out;
	}

	@keyframes fadeIn {
	from {
	opacity: 0;
	transform: translateX(-20px);
	}
	to {
	opacity: 1;
	transform: translateX(0);
	}
	}

	.todo-item:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	}

	.todo-item.completed {
	opacity: 0.7;
	}

	.todo-item.completed .todo-text {
	text-decoration: line-through;
	color: var(--text-secondary);
	}

	.todo-checkbox {
	width: 22px;
	height: 22px;
	border: 2px solid var(--primary-color);
	border-radius: 50%;
	margin-right: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--transition);
	flex-shrink: 0;
	}

	.todo-checkbox.checked {
	background: var(--primary-color);
	border-color: var(--primary-color);
	}

	.todo-checkbox.checked::after {
	content: '✓';
	color: white;
	font-size: 14px;
	font-weight: bold;
	}

	.todo-text {
	flex-grow: 1;
	font-size: 1rem;
	transition: var(--transition);
	}

	.todo-actions {
	display: flex;
	gap: 10px;
	}

	.todo-btn {
	background: none;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 5px;
	border-radius: 6px;
	transition: var(--transition);
	font-size: 1rem;
	}

	.todo-btn:hover {
	background: var(--secondary-color);
	color: var(--primary-color);
	}

	.todo-btn.delete:hover {
	color: var(--danger-color);
	}

	.todo-footer {
	padding: 20px 25px;
	background: var(--secondary-color);
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	}

	.filter-buttons {
	display: flex;
	gap: 10px;
	}

	.filter-btn {
	padding: 8px 16px;
	border: none;
	background: white;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: var(--transition);
	box-shadow: var(--shadow-sm);
	}

	.filter-btn.active {
	background: var(--primary-color);
	color: white;
	}

	.filter-btn:hover:not(.active) {
	background: var(--background);
	transform: translateY(-2px);
	}

	.todo-count {
	font-size: 0.9rem;
	color: var(--text-secondary);
	}

	.clear-completed {
	padding: 8px 16px;
	border: none;
	background: var(--danger-color);
	color: white;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: var(--transition);
	box-shadow: var(--shadow-sm);
	}

	.clear-completed:hover {
	background: #dc2626;
	transform: translateY(-2px);
	}

	.empty-state {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-secondary);
	}

	.empty-state i {
	font-size: 3rem;
	margin-bottom: 15px;
	opacity: 0.5;
	}

	.empty-state p {
	font-size: 1.1rem;
	}

	@media (max-width: 480px) {
	.container {
	border-radius: 15px;
	}

	.header h1 {
	font-size: 1.5rem;
	}

	.todo-footer {
	flex-direction: column;
	align-items: stretch;
	}

	.filter-buttons {
	justify-content: center;
	}

	.todo-count {
	text-align: center;
	}
	}

	.edit-mode .todo-text {
	display: none;
	}

	.edit-input {
	flex-grow: 1;
	padding: 8px 12px;
	border: 2px solid var(--primary-color);
	border-radius: 6px;
	font-size: 1rem;
	margin-right: 10px;
	}

	.edit-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
	}

	.save-btn, .cancel-btn {
	padding: 8px 12px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: var(--transition);
	}

	.save-btn {
	background: var(--success-color);
	color: white;
	}

	.cancel-btn {
	background: var(--text-secondary);
	color: white;
	}

	.save-btn:hover {
	background: #059669;
	}

	.cancel-btn:hover {
	background: #4b5563;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<header class="header">
	<a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
	<i class="fas fa-code"></i>
	Built with anycoder
	</a>
	<h1>Todo Master</h1>
	<p>Organize your day, one task at a time</p>
	</header>

	<div class="todo-input-container">
	<input
	type="text"
	class="todo-input"
	placeholder="What needs to be done?"
	id="todoInput"
	autocomplete="off"
	>
	</div>

	<div class="todo-list" id="todoList">
	<div class="empty-state">
	<i class="fas fa-clipboard-list"></i>
	<p>No todos yet. Add your first task above!</p>
	</div>
	</div>

	<div class="todo-footer">
	<div class="filter-buttons">
	<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 class="todo-count" id="todoCount">0 items left</div>
	<button class="clear-completed" id="clearCompleted">Clear Completed</button>
	</div>
	</div>

	<script>
	class TodoApp {
	constructor() {
	this.todos = this.loadTodos();
	this.currentFilter = 'all';
	this.init();
	}

	init() {
	this.todoInput = document.getElementById('todoInput');
	this.todoList = document.getElementById('todoList');
	this.todoCount = document.getElementById('todoCount');
	this.clearCompletedBtn = document.getElementById('clearCompleted');
	this.filterButtons = document.querySelectorAll('.filter-btn');

	this.todoInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter' && this.todoInput.value.trim()) {
	this.addTodo(this.todoInput.value.trim());
	this.todoInput.value = '';
	}
	});

	this.clearCompletedBtn.addEventListener('click', () => this.clearCompleted());

	this.filterButtons.forEach(btn => {
	btn.addEventListener('click', (e) => {
	this.filterTodos(e.target.dataset.filter);
	this.updateFilterButtons(e.target);
	});
	});

	this.render();
	}

	addTodo(text) {
	const todo = {
	id: Date.now(),
	text,
	completed: false,
	createdAt: new Date()
	};
	this.todos.unshift(todo);
	this.saveTodos();
	this.render();
	}

	toggleTodo(id) {
	const todo = this.todos.find(t => t.id === id);
	if (todo) {
	todo.completed = !todo.completed;
	this.saveTodos();
	this.render();
	}
	}

	deleteTodo(id) {
	this.todos = this.todos.filter(t => t.id !== id);
	this.saveTodos();
	this.render();
	}

	editTodo(id, newText) {
	const todo = this.todos.find(t => t.id === id);
	if (todo && newText.trim()) {
	todo.text = newText.trim();
	this.saveTodos();
	this.render();
	}
	}

	clearCompleted() {
	this.todos = this.todos.filter(t => !t.todo.completed);
	this.todos = this.todos.filter(t => !t.completed);
	this.saveTodos();
	this.render();
	}

	filterTodos(filter) {
	this.currentFilter = filter;
	this.render();
	}

	getFilteredTodos() {
	switch (this.currentFilter) {
	case 'active':
	return this.todos.filter(t => !t.completed);
	case 'completed':
	return this.todos.filter(t => t.completed);
	default:
	return this.todos;
	}
	}

	updateFilterButtons(activeBtn) {
	this.filterButtons.forEach(btn => {
	btn.classList.toggle('active', btn === activeBtn);
	});
	}

	updateTodoCount() {
	const activeCount = this.todos.filter(t => !t.completed).length;
	this.todoCount.textContent = `${activeCount} item${activeCount !== 1 ? 's' : ''} left`;
	}

	render() {
	const filteredTodos = this.getFilteredTodos();
	this.todoList.innerHTML = '';

	if (filteredTodos.length === 0) {
	this.todoList.innerHTML = `
	<div class="empty-state">
	<i class="fas fa-clipboard-list"></i>
	<p>${this.currentFilter === 'completed' ? 'No completed todos yet' :
	this.currentFilter === 'active' ? 'No active todos yet' :
	'No todos yet. Add your first task above!'}</p>
	</div>
	`;
	} else {
	filteredTodos.forEach(todo => {
	const todoElement = this.createTodoElement(todo);
	this.todoList.appendChild(todoElement);
	});
	}

	this.updateTodoCount();
	}

	createTodoElement(todo) {
	const div = document.createElement('div');
	div.className = `todo-item ${todo.completed ? 'completed' : ''}`;
	div.dataset.id = todo.id;

	div.innerHTML = `
	<div class="todo-checkbox ${todo.completed ? 'checked' : ''}" onclick="todoApp.toggleTodo(${todo.id})"></div>
	<span class="todo-text">${this.escapeHtml(todo.text)}</span>
	<div class="todo-actions">
	<button class="todo-btn edit" onclick="todoApp.startEdit(${todo.id})">
	<i class="fas fa-edit"></i>
	</button>
	<button class="todo-btn delete" onclick="todoApp.deleteTodo(${todo.id})">
	<i class="fas fa-trash"></i>
	</button>
	</div>
	`;

	return div;
	}

	startEdit(id) {
	const todoElement = document.querySelector(`[data-id="${id}"]`);
	const todo = this.todos.find(t => t.id === id);

	todoElement.classList.add('edit-mode');
	todoElement.innerHTML = `
	<input type="text" class="edit-input" value="${todo.text}" />
	<button class="save-btn" onclick="todoApp.saveEdit(${id})">
	<i class="fas fa-check"></i>
	</button>
	<button class="cancel-btn" onclick="todoApp.cancelEdit(${id})">
	<i class="fas fa-times"></i>
	</button>
	`;

	const editInput = todoElement.querySelector('.edit-input');
	editInput.focus();
	editInput.select();
	}

	saveEdit(id) {
	const todoElement = document.querySelector(`[data-id="${id}"]`);
	const editInput = todoElement.querySelector('.edit-input');
	this.editTodo(id, editInput.value);
	}

	cancelEdit(id) {
	this.render();
	}

	escapeHtml(text) {
	const map = {
	'&': '&',
	'<': '<',
	'>': '>',
	'"': '"',
	"'": '''
	};
	return text.replace(/[&<>"']/g, m => map[m]);
	}

	saveTodos() {
	localStorage.setItem('todos', JSON.stringify(this.todos));
	}

	loadTodos() {
	const saved = localStorage.getItem('todos');
	return saved ? JSON.parse(saved) : [];
	}
	}

	const todoApp = new TodoApp();
	</script>
	</body>
	</html>