Aakash67/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Tracker</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background: #f0f2f5;
            color: #333;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            display: flex;
            width: 900px;
            height: 600px;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .sidebar {
            width: 250px;
            background: #e9ecef;
            padding: 20px;
            border-right: 1px solid #dee2e6;
        }

        .sidebar h2 {
            color: #495057;
            margin-bottom: 20px;
        }

        .filter-btn {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            background: #ced4da;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .filter-btn:hover, .filter-btn.active {
            background: #74c0fc;
            color: #fff;
        }

        .main {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .task-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .task-list {
            list-style: none;
        }

        .task-item {
            display: flex;
            align-items: center;
            padding: 10px;
            margin: 10px 0;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            animation: slideIn 0.3s ease;
        }

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

        .task-item.completed {
            opacity: 0.7;
            text-decoration: line-through;
        }

        .task-item input[type="checkbox"] {
            margin-right: 10px;
        }

        .task-text {
            flex: 1;
            padding: 5px;
            border: none;
            background: transparent;
        }

        .task-text:focus {
            outline: none;
            border-bottom: 1px solid #74c0fc;
        }

        .delete-btn {
            background: #ff8787;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .delete-btn:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2>Filters</h2>
            <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="main">
            <input type="text" class="task-input" placeholder="Add a new task..." id="taskInput">
            <ul class="task-list" id="taskList"></ul>
        </div>
    </div>

    <script>
        const taskInput = document.getElementById('taskInput');
        const taskList = document.getElementById('taskList');
        const filterButtons = document.querySelectorAll('.filter-btn');
        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        let currentFilter = 'all';

        // Load tasks on start
        renderTasks();

        // Add task on Enter key
        taskInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && taskInput.value.trim()) {
                addTask(taskInput.value.trim());
                taskInput.value = '';
            }
        });

        // Filter button handling
        filterButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                filterButtons.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                currentFilter = btn.dataset.filter;
                renderTasks();
            });
        });

        function addTask(text) {
            const task = {
                id: Date.now(),
                text: text,
                completed: false
            };
            tasks.push(task);
            saveTasks();
            renderTasks();
        }

        function renderTasks() {
            taskList.innerHTML = '';
            const filteredTasks = tasks.filter(task => {
                if (currentFilter === 'all') return true;
                if (currentFilter === 'active') return !task.completed;
                if (currentFilter === 'completed') return task.completed;
            });

            filteredTasks.forEach(task => {
                const li = document.createElement('li');
                li.className = `task-item ${task.completed ? 'completed' : ''}`;
                li.innerHTML = `
                    <input type="checkbox" ${task.completed ? 'checked' : ''}>
                    <input type="text" class="task-text" value="${task.text}">
                    <button class="delete-btn">✕</button>
                `;

                // Checkbox toggle
                li.querySelector('input[type="checkbox"]').addEventListener('change', (e) => {
                    task.completed = e.target.checked;
                    saveTasks();
                    renderTasks();
                });

                // Edit task
                li.querySelector('.task-text').addEventListener('input', (e) => {
                    task.text = e.target.value;
                    saveTasks();
                });

                // Delete task
                li.querySelector('.delete-btn').addEventListener('click', () => {
                    tasks = tasks.filter(t => t.id !== task.id);
                    saveTasks();
                    renderTasks();
                });

                taskList.appendChild(li);
            });
        }

        function saveTasks() {
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Task Tracker</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	}

	body {
	background: #f0f2f5;
	color: #333;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	}

	.container {
	display: flex;
	width: 900px;
	height: 600px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	}

	.sidebar {
	width: 250px;
	background: #e9ecef;
	padding: 20px;
	border-right: 1px solid #dee2e6;
	}

	.sidebar h2 {
	color: #495057;
	margin-bottom: 20px;
	}

	.filter-btn {
	display: block;
	width: 100%;
	padding: 10px;
	margin: 5px 0;
	background: #ced4da;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.filter-btn:hover, .filter-btn.active {
	background: #74c0fc;
	color: #fff;
	}

	.main {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
	}

	.task-input {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.task-list {
	list-style: none;
	}

	.task-item {
	display: flex;
	align-items: center;
	padding: 10px;
	margin: 10px 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	animation: slideIn 0.3s ease;
	}

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

	.task-item.completed {
	opacity: 0.7;
	text-decoration: line-through;
	}

	.task-item input[type="checkbox"] {
	margin-right: 10px;
	}

	.task-text {
	flex: 1;
	padding: 5px;
	border: none;
	background: transparent;
	}

	.task-text:focus {
	outline: none;
	border-bottom: 1px solid #74c0fc;
	}

	.delete-btn {
	background: #ff8787;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	transition: transform 0.2s ease;
	}

	.delete-btn:hover {
	transform: scale(1.1);
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="sidebar">
	<h2>Filters</h2>
	<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="main">
	<input type="text" class="task-input" placeholder="Add a new task..." id="taskInput">
	<ul class="task-list" id="taskList"></ul>
	</div>
	</div>

	<script>
	const taskInput = document.getElementById('taskInput');
	const taskList = document.getElementById('taskList');
	const filterButtons = document.querySelectorAll('.filter-btn');
	let tasks = JSON.parse(localStorage.getItem('tasks')) \|\| [];
	let currentFilter = 'all';

	// Load tasks on start
	renderTasks();

	// Add task on Enter key
	taskInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter' && taskInput.value.trim()) {
	addTask(taskInput.value.trim());
	taskInput.value = '';
	}
	});

	// Filter button handling
	filterButtons.forEach(btn => {
	btn.addEventListener('click', () => {
	filterButtons.forEach(b => b.classList.remove('active'));
	btn.classList.add('active');
	currentFilter = btn.dataset.filter;
	renderTasks();
	});
	});

	function addTask(text) {
	const task = {
	id: Date.now(),
	text: text,
	completed: false
	};
	tasks.push(task);
	saveTasks();
	renderTasks();
	}

	function renderTasks() {
	taskList.innerHTML = '';
	const filteredTasks = tasks.filter(task => {
	if (currentFilter === 'all') return true;
	if (currentFilter === 'active') return !task.completed;
	if (currentFilter === 'completed') return task.completed;
	});

	filteredTasks.forEach(task => {
	const li = document.createElement('li');
	li.className = `task-item ${task.completed ? 'completed' : ''}`;
	li.innerHTML = `
	<input type="checkbox" ${task.completed ? 'checked' : ''}>
	<input type="text" class="task-text" value="${task.text}">
	<button class="delete-btn">✕</button>
	`;

	// Checkbox toggle
	li.querySelector('input[type="checkbox"]').addEventListener('change', (e) => {
	task.completed = e.target.checked;
	saveTasks();
	renderTasks();
	});

	// Edit task
	li.querySelector('.task-text').addEventListener('input', (e) => {
	task.text = e.target.value;
	saveTasks();
	});

	// Delete task
	li.querySelector('.delete-btn').addEventListener('click', () => {
	tasks = tasks.filter(t => t.id !== task.id);
	saveTasks();
	renderTasks();
	});

	taskList.appendChild(li);
	});
	}

	function saveTasks() {
	localStorage.setItem('tasks', JSON.stringify(tasks));
	}
	</script>
	</body>
	</html>
No results found