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>
        :root {
            --primary-color: #4a90e2;
            --sidebar-bg: #f5f7fa;
            --text-color: #2c3e50;
            --completed-color: #95a5a6;
            --hover-color: #f8f9fa;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        body {
            background-color: #f0f2f5;
            color: var(--text-color);
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background: var(--sidebar-bg);
            padding: 2rem;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }

        .main-content {
            flex: 1;
            padding: 2rem;
        }

        .filter-option {
            padding: 0.8rem 1rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .filter-option:hover {
            background-color: var(--hover-color);
        }

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

        .task-input {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        input[type="text"] {
            flex: 1;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
        }

        button {
            padding: 0.8rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        button:hover {
            opacity: 0.9;
        }

        .task-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .task-item {
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 1rem;
            animation: slideIn 0.3s ease-out;
        }

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

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

        .task-content {
            flex: 1;
        }

        .task-actions {
            display: flex;
            gap: 0.5rem;
        }

        .task-actions button {
            padding: 0.5rem;
            font-size: 0.8rem;
        }

        .delete-btn {
            background-color: #e74c3c;
        }

        .edit-btn {
            background-color: #f39c12;
        }

        .checkbox {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2 style="margin-bottom: 2rem;">Filters</h2>
            <div class="filter-option active" data-filter="all">All Tasks</div>
            <div class="filter-option" data-filter="active">Active</div>
            <div class="filter-option" data-filter="completed">Completed</div>
        </div>

        <div class="main-content">
            <div class="task-input">
                <input type="text" id="taskInput" placeholder="Add a new task...">
                <button onclick="addTask()">Add Task</button>
            </div>
            <div class="task-list" id="taskList"></div>
        </div>
    </div>

    <script>
        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        let currentFilter = 'all';

        function saveToLocalStorage() {
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }

        function addTask() {
            const input = document.getElementById('taskInput');
            const text = input.value.trim();

            if (text) {
                const task = {
                    id: Date.now(),
                    text: text,
                    completed: false
                };

                tasks.push(task);
                saveToLocalStorage();
                renderTasks();
                input.value = '';
            }
        }

        function deleteTask(id) {
            tasks = tasks.filter(task => task.id !== id);
            saveToLocalStorage();
            renderTasks();
        }

        function toggleTask(id) {
            const task = tasks.find(task => task.id === id);
            if (task) {
                task.completed = !task.completed;
                saveToLocalStorage();
                renderTasks();
            }
        }

        function editTask(id) {
            const task = tasks.find(task => task.id === id);
            if (task) {
                const newText = prompt('Edit task:', task.text);
                if (newText !== null && newText.trim() !== '') {
                    task.text = newText.trim();
                    saveToLocalStorage();
                    renderTasks();
                }
            }
        }

        function setFilter(filter) {
            currentFilter = filter;
            document.querySelectorAll('.filter-option').forEach(option => {
                option.classList.remove('active');
            });
            document.querySelector(`[data-filter="${filter}"]`).classList.add('active');
            renderTasks();
        }

        function renderTasks() {
            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';

            let filteredTasks = tasks;
            if (currentFilter === 'active') {
                filteredTasks = tasks.filter(task => !task.completed);
            } else if (currentFilter === 'completed') {
                filteredTasks = tasks.filter(task => task.completed);
            }

            filteredTasks.forEach(task => {
                const taskElement = document.createElement('div');
                taskElement.className = `task-item ${task.completed ? 'completed' : ''}`;

                taskElement.innerHTML = `
                    <input type="checkbox" class="checkbox"
                        ${task.completed ? 'checked' : ''}
                        onclick="toggleTask(${task.id})">
                    <div class="task-content">${task.text}</div>
                    <div class="task-actions">
                        <button class="edit-btn" onclick="editTask(${task.id})">Edit</button>
                        <button class="delete-btn" onclick="deleteTask(${task.id})">Delete</button>
                    </div>
                `;

                taskList.appendChild(taskElement);
            });
        }

        // Event Listeners
        document.getElementById('taskInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addTask();
            }
        });

        document.querySelectorAll('.filter-option').forEach(option => {
            option.addEventListener('click', () => {
                setFilter(option.dataset.filter);
            });
        });

        // Initial render
        renderTasks();
    </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>
	:root {
	--primary-color: #4a90e2;
	--sidebar-bg: #f5f7fa;
	--text-color: #2c3e50;
	--completed-color: #95a5a6;
	--hover-color: #f8f9fa;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', sans-serif;
	}

	body {
	background-color: #f0f2f5;
	color: var(--text-color);
	}

	.container {
	display: flex;
	min-height: 100vh;
	}

	.sidebar {
	width: 250px;
	background: var(--sidebar-bg);
	padding: 2rem;
	box-shadow: 2px 0 5px rgba(0,0,0,0.1);
	}

	.main-content {
	flex: 1;
	padding: 2rem;
	}

	.filter-option {
	padding: 0.8rem 1rem;
	margin-bottom: 0.5rem;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s;
	}

	.filter-option:hover {
	background-color: var(--hover-color);
	}

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

	.task-input {
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
	}

	input[type="text"] {
	flex: 1;
	padding: 0.8rem;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 1rem;
	}

	button {
	padding: 0.8rem 1.5rem;
	background-color: var(--primary-color);
	color: white;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.2s;
	}

	button:hover {
	opacity: 0.9;
	}

	.task-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	}

	.task-item {
	background: white;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	gap: 1rem;
	animation: slideIn 0.3s ease-out;
	}

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

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

	.task-content {
	flex: 1;
	}

	.task-actions {
	display: flex;
	gap: 0.5rem;
	}

	.task-actions button {
	padding: 0.5rem;
	font-size: 0.8rem;
	}

	.delete-btn {
	background-color: #e74c3c;
	}

	.edit-btn {
	background-color: #f39c12;
	}

	.checkbox {
	width: 20px;
	height: 20px;
	cursor: pointer;
	}

	</style>
	</head>
	<body>
	<div class="container">
	<div class="sidebar">
	<h2 style="margin-bottom: 2rem;">Filters</h2>
	<div class="filter-option active" data-filter="all">All Tasks</div>
	<div class="filter-option" data-filter="active">Active</div>
	<div class="filter-option" data-filter="completed">Completed</div>
	</div>

	<div class="main-content">
	<div class="task-input">
	<input type="text" id="taskInput" placeholder="Add a new task...">
	<button onclick="addTask()">Add Task</button>
	</div>
	<div class="task-list" id="taskList"></div>
	</div>
	</div>

	<script>
	let tasks = JSON.parse(localStorage.getItem('tasks')) \|\| [];
	let currentFilter = 'all';

	function saveToLocalStorage() {
	localStorage.setItem('tasks', JSON.stringify(tasks));
	}

	function addTask() {
	const input = document.getElementById('taskInput');
	const text = input.value.trim();

	if (text) {
	const task = {
	id: Date.now(),
	text: text,
	completed: false
	};

	tasks.push(task);
	saveToLocalStorage();
	renderTasks();
	input.value = '';
	}
	}

	function deleteTask(id) {
	tasks = tasks.filter(task => task.id !== id);
	saveToLocalStorage();
	renderTasks();
	}

	function toggleTask(id) {
	const task = tasks.find(task => task.id === id);
	if (task) {
	task.completed = !task.completed;
	saveToLocalStorage();
	renderTasks();
	}
	}

	function editTask(id) {
	const task = tasks.find(task => task.id === id);
	if (task) {
	const newText = prompt('Edit task:', task.text);
	if (newText !== null && newText.trim() !== '') {
	task.text = newText.trim();
	saveToLocalStorage();
	renderTasks();
	}
	}
	}

	function setFilter(filter) {
	currentFilter = filter;
	document.querySelectorAll('.filter-option').forEach(option => {
	option.classList.remove('active');
	});
	document.querySelector(`[data-filter="${filter}"]`).classList.add('active');
	renderTasks();
	}

	function renderTasks() {
	const taskList = document.getElementById('taskList');
	taskList.innerHTML = '';

	let filteredTasks = tasks;
	if (currentFilter === 'active') {
	filteredTasks = tasks.filter(task => !task.completed);
	} else if (currentFilter === 'completed') {
	filteredTasks = tasks.filter(task => task.completed);
	}

	filteredTasks.forEach(task => {
	const taskElement = document.createElement('div');
	taskElement.className = `task-item ${task.completed ? 'completed' : ''}`;

	taskElement.innerHTML = `
	<input type="checkbox" class="checkbox"
	${task.completed ? 'checked' : ''}
	onclick="toggleTask(${task.id})">
	<div class="task-content">${task.text}</div>
	<div class="task-actions">
	<button class="edit-btn" onclick="editTask(${task.id})">Edit</button>
	<button class="delete-btn" onclick="deleteTask(${task.id})">Delete</button>
	</div>
	`;

	taskList.appendChild(taskElement);
	});
	}

	// Event Listeners
	document.getElementById('taskInput').addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	addTask();
	}
	});

	document.querySelectorAll('.filter-option').forEach(option => {
	option.addEventListener('click', () => {
	setFilter(option.dataset.filter);
	});
	});

	// Initial render
	renderTasks();
	</script>
	</body>
	</html>
No results found