Editor (HTML/CSS/JS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ProTask | Advanced Management</title>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
:root {
--bg: #020617;
--card: #1e293b;
--accent: #38bdf8;
--text: #f8fafc;
--danger: #ef4444;
--high: #ef4444;
--medium: #f59e0b;
--low: #10b981;
}
body {
margin: 0;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
/* --- Verification System Styles --- */
.overlay {
position: fixed;
inset: 0;
background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: opacity 0.5s ease;
}
.auth-card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(12px);
padding: 3rem;
border-radius: 24px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
width: 320px;
}
.auth-icon { width: 48px; height: 48px; color: var(--accent); margin-bottom: 1.5rem; }
/* --- Main App UI Styles --- */
.app-container {
width: 100%;
max-width: 500px;
height: 90vh;
display: flex;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo h1 { font-size: 1.5rem; margin: 0; font-weight: 800; letter-spacing: -0.5px; }
.input-section {
display: flex;
gap: 10px;
background: var(--card);
padding: 8px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 20px;
}
input, select {
background: transparent;
border: none;
color: white;
padding: 10px;
outline: none;
}
input { flex: 2; font-size: 1rem; }
select { flex: 1; border-left: 1px solid #334155; cursor: pointer; color: var(--accent); }
.add-btn {
background: var(--accent);
border: none;
padding: 10px 15px;
border-radius: 12px;
cursor: pointer;
transition: transform 0.2s;
}
.add-btn:hover { transform: scale(1.05); }
/* --- Task List Styles --- */
#task-list {
list-style: none;
padding: 0;
overflow-y: auto;
flex-grow: 1;
}
.task-item {
background: var(--card);
margin-bottom: 12px;
padding: 16px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.priority-high { border-left-color: var(--high); }
.priority-medium { border-left-color: var(--medium); }
.priority-low { border-left-color: var(--low); }
.task-content { flex: 1; margin-left: 15px; cursor: pointer; }
.task-text { display: block; font-weight: 500; margin-bottom: 4px; }
.task-meta { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
.completed { opacity: 0.4; transform: scale(0.98); }
.completed .task-text { text-decoration: line-through; }
.action-btns { display: flex; gap: 10px; }
.btn-subtle { background: none; border: none; color: #475569; cursor: pointer; padding: 5px; }
.btn-subtle:hover { color: var(--danger); }
.footer-controls {
display: flex;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid #1e293b;
}
.hidden { display: none !important; }
.error-msg { color: var(--danger); font-size: 0.8rem; margin-top: 15px; }
button.primary-btn {
width: 100%;
padding: 12px;
background: var(--accent);
border: none;
border-radius: 12px;
font-weight: bold;
cursor: pointer;
margin-top: 1rem;
}
/* Scrollbar styling */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
</style>
</head>
<body>
<div id="auth-screen" class="overlay">
<div class="auth-card">
<i data-lucide="shield-check" class="auth-icon"></i>
<h2>ProTask Node</h2>
<p style="color: #94a3b8; font-size: 0.9rem;">Identity Verification Required</p>
<input type="password" id="passkey" placeholder="Enter Key (1234)"
style="width: 100%; box-sizing: border-box; border: 1px solid #334155; border-radius: 10px; margin-top: 10px; text-align: center;">
<button onclick="verifyAccess()" class="primary-btn">Initialize Session</button>
<p id="auth-error" class="error-msg hidden">Invalid Access Credentials</p>
</div>
</div>
<div class="app-container hidden" id="main-app">
<header>
<div class="logo">
<i data-lucide="zap" style="color: var(--accent);"></i>
<h1>PRO_TASK</h1>
</div>
<div class="action-btns">
<button onclick="sortTasks()" class="btn-subtle" title="Sort Priority"><i data-lucide="list-ordered"></i></button>
<button onclick="logout()" class="btn-subtle" title="Lock Session"><i data-lucide="log-out"></i></button>
</div>
</header>
<div class="input-section">
<input type="text" id="task-input" placeholder="Define new task...">
<select id="priority-input">
<option value="low">Low</option>
<option value="medium">Med</option>
<option value="high">High</option>
</select>
<button onclick="addTask()" class="add-btn"><i data-lucide="plus" style="width: 20px; color: #020617;"></i></button>
</div>
<ul id="task-list"></ul>
<div class="footer-controls">
<span id="task-count" style="color: #64748b; font-size: 0.8rem;">0 Tasks Active</span>
<button onclick="clearCompleted()" class="btn-subtle" style="font-size: 0.8rem;">Clear Finished</button>
</div>
</div>
<script>
// Initialize Lucide Icons
lucide.createIcons();
const AUTH_KEY = "1234";
let tasks = JSON.parse(localStorage.getItem('pro_data')) || [];
// --- Security Logic ---
function verifyAccess() {
const val = document.getElementById('passkey').value;
const error = document.getElementById('auth-error');
if (val === AUTH_KEY) {
document.getElementById('auth-screen').classList.add('hidden');
document.getElementById('main-app').classList.remove('hidden');
render();
} else {
error.classList.remove('hidden');
}
}
// --- Core Task Logic ---
function addTask() {
const input = document.getElementById('task-input');
const priority = document.getElementById('priority-input').value;
if (!input.value.trim()) return;
const task = {
id: Date.now(),
text: input.value,
priority: priority,
completed: false,
timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
};
tasks.unshift(task);
input.value = "";
save();
}
function toggleTask(id) {
tasks = tasks.map(t => t.id === id ? {...t, completed: !t.completed} : t);
save();
}
function deleteTask(id) {
tasks = tasks.filter(t => t.id !== id);
save();
}
function sortTasks() {
const weights = { high: 3, medium: 2, low: 1 };
tasks.sort((a, b) => {
if (a.completed !== b.completed) return a.completed ? 1 : -1;
return weights[b.priority] - weights[a.priority];
});
save();
}
function clearCompleted() {
tasks = tasks.filter(t => !t.completed);
save();
}
function save() {
localStorage.setItem('pro_data', JSON.stringify(tasks));
render();
}
function render() {
const list = document.getElementById('task-list');
const count = document.getElementById('task-count');
list.innerHTML = "";
tasks.forEach(task => {
const li = document.createElement('li');
li.className = `task-item priority-${task.priority} ${task.completed ? 'completed' : ''}`;
li.innerHTML = `
<div class="task-content" onclick="toggleTask(${task.id})">
<span class="task-text">${task.text}</span>
<span class="task-meta">${task.priority} • ${task.timestamp}</span>
</div>
<div class="action-btns">
<button class="btn-subtle" onclick="deleteTask(${task.id})"><i data-lucide="trash-2" style="width:18px"></i></button>
</div>
`;
list.appendChild(li);
});
count.innerText = `${tasks.filter(t => !t.completed).length} Tasks Active`;
lucide.createIcons();
}
function logout() {
location.reload();
}
</script>
</body>
</html>