<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> ToDo List</title>
<style>
:root {
--bg-color: #1a1a2e;
--text-color: #e6e6e6;
--primary-color: #00f0ff;
--secondary-color: #ff00ff;
--accent-color: #ff6b6b;
--card-bg: #16213e;
--shadow-color: rgba(0, 240, 255, 0.3);
}
.light-mode {
--bg-color: #f0f0f0;
--text-color: #333333;
--primary-color: #0077ff;
--secondary-color: #ff5500;
--accent-color: #ff3366;
--card-bg: #ffffff;
--shadow-color: rgba(0, 119, 255, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color 0.3s, color 0.3s;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid var(--primary-color);
}
h1 {
font-size: 2.5rem;
text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--shadow-
color);
color: var(--primary-color);
}
.mode-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--secondary-color);
text-shadow: 0 0 5px var(--secondary-color);
}
.mode-toggle:hover {
transform: scale(1.1);
}
.input-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#task-input {
flex: 1;
padding: 12px 15px;
border: 2px solid var(--primary-color);
border-radius: 5px;
background-color: var(--card-bg);
color: var(--text-color);
font-size: 1rem;
box-shadow: 0 0 10px var(--shadow-color);
}
#task-input:focus {
outline: none;
border-color: var(--secondary-color);
box-shadow: 0 0 15px var(--secondary-color);
}
#add-btn {
padding: 12px 20px;
background-color: var(--primary-color);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 0 10px var(--shadow-color);
transition: all 0.3s;
}
#add-btn:hover {
background-color: var(--secondary-color);
box-shadow: 0 0 15px var(--secondary-color);
transform: translateY(-2px);
}
.task-list {
list-style: none;
margin-top: 20px;
}
.task-item {
background-color: var(--card-bg);
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: grab;
border-left: 4px solid var(--primary-color);
transition: transform 0.2s, box-shadow 0.2s;
}
.task-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 10px var(--shadow-
color);
}
.[Link] {
opacity: 0.5;
background-color: var(--bg-color);
border: 2px dashed var(--primary-color);
}
.task-content {
display: flex;
align-items: center;
flex: 1;
}
.task-checkbox {
margin-right: 15px;
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--primary-color);
}
.task-text {
flex: 1;
word-break: break-word;
}
.[Link] {
text-decoration: line-through;
color: #888;
}
.task-actions {
display: flex;
gap: 10px;
}
.task-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: var(--text-color);
opacity: 0.7;
transition: all 0.2s;
}
.task-btn:hover {
opacity: 1;
transform: scale(1.2);
}
.edit-btn {
color: var(--primary-color);
}
.delete-btn {
color: var(--accent-color);
}
.empty-state {
text-align: center;
margin-top: 50px;
color: #888;
font-size: 1.2rem;
}
@media (max-width: 600px) {
.input-container {
flex-direction: column;
}
#add-btn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Neon To-Do</h1>
<button class="mode-toggle" id="mode-toggle">🌓</button>
</header>
<div class="input-container">
<input type="text" id="task-input" placeholder="Add a new task...">
<button id="add-btn">Add</button>
</div>
<ul class="task-list" id="task-list">
<!-- Tasks will be added here dynamically -->
</ul>
<div class="empty-state" id="empty-state">
No tasks yet. Add one above!
</div>
</div>
<script>
[Link]('DOMContentLoaded', function () {
const taskInput = [Link]('task-input');
const addBtn = [Link]('add-btn');
const taskList = [Link]('task-list');
const emptyState = [Link]('empty-state');
const modeToggle = [Link]('mode-toggle');
let tasks = [Link]([Link]('tasks')) || [];
let dragItem = null;
// Initialize the app
function init() {
renderTasks();
updateEmptyState();
// Set initial mode based on localStorage or prefer-color-scheme
const savedMode = [Link]('themeMode');
if (savedMode === 'light' ||
(!savedMode && [Link]('(prefers-color-scheme:
light)').matches)) {
[Link]('light-mode');
}
}
// Render all tasks
function renderTasks() {
[Link] = '';
[Link]((task, index) => {
const taskItem = createTaskElement(task, index);
[Link](taskItem);
});
}
// Create a task element
function createTaskElement(task, index) {
const taskItem = [Link]('li');
[Link] = 'task-item';
[Link] = true;
[Link] = index;
[Link] = `
<div class="task-content">
<input type="checkbox" class="task-checkbox" $
{[Link] ? 'checked' : ''}>
<span class="task-text ${[Link] ? 'completed' :
''}">${[Link]}</span>
</div>
<div class="task-actions">
<button class="task-btn edit-btn">✏️</button>
<button class="task-btn delete-btn"></button>
</div>
`;
// Add drag events
[Link]('dragstart', handleDragStart);
[Link]('dragover', handleDragOver);
[Link]('dragenter', handleDragEnter);
[Link]('dragleave', handleDragLeave);
[Link]('dragend', handleDragEnd);
[Link]('drop', handleDrop);
// Add checkbox event
const checkbox = [Link]('.task-checkbox');
[Link]('change', () =>
toggleTaskComplete(index));
// Add edit event
const editBtn = [Link]('.edit-btn');
[Link]('click', () => editTask(index));
// Add delete event
const deleteBtn = [Link]('.delete-btn');
[Link]('click', () => deleteTask(index));
return taskItem;
}
// Add a new task
function addTask() {
const text = [Link]();
if (text) {
[Link]({ text, completed: false });
saveTasks();
renderTasks();
[Link] = '';
updateEmptyState();
}
}
// Toggle task completion
function toggleTaskComplete(index) {
tasks[index].completed = !tasks[index].completed;
saveTasks();
renderTasks();
}
// Edit a task
function editTask(index) {
const newText = prompt('Edit task:', tasks[index].text);
if (newText !== null && [Link]() !== '') {
tasks[index].text = [Link]();
saveTasks();
renderTasks();
}
}
// Delete a task
function deleteTask(index) {
if (confirm('Are you sure you want to delete this task?')) {
[Link](index, 1);
saveTasks();
renderTasks();
updateEmptyState();
}
}
// Save tasks to localStorage
function saveTasks() {
[Link]('tasks', [Link](tasks));
}
// Update empty state visibility
function updateEmptyState() {
[Link] = [Link] === 0 ? 'block' : 'none';
}
// Drag and drop functions
function handleDragStart(e) {
dragItem = this;
[Link] = 'move';
[Link]('text/html', [Link]);
setTimeout(() => [Link]('dragging'), 0);
}
function handleDragOver(e) {
[Link]();
[Link] = 'move';
return false;
}
function handleDragEnter(e) {
[Link]();
[Link]('drag-over');
}
function handleDragLeave() {
[Link]('drag-over');
}
function handleDragEnd() {
[Link]('dragging');
[Link]('.task-item').forEach(item => {
[Link]('drag-over');
});
}
function handleDrop(e) {
[Link]();
[Link]();
if (dragItem !== this) {
const fromIndex = parseInt([Link]);
const toIndex = parseInt([Link]);
// Reorder tasks array
const [removed] = [Link](fromIndex, 1);
[Link](toIndex, 0, removed);
// Save and re-render
saveTasks();
renderTasks();
}
[Link]('drag-over');
return false;
}
// Toggle dark/light mode
function toggleMode() {
[Link]('light-mode');
const isLightMode = [Link]('light-mode');
[Link]('themeMode', isLightMode ? 'light' : 'dark');
}
// Event listeners
[Link]('click', addTask);
[Link]('keypress', (e) => {
if ([Link] === 'Enter') addTask();
});
[Link]('click', toggleMode);
// Initialize the app
init();
});
//shortcut
[Link]('keydown', function (e) {
if ([Link] === 'Tab') {
[Link](); // stops the default tabbing behavior
[Link] = '[Link]'; // change this to your desired
page
}
});
</script>
</body>
</html>
