<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>To-Do PWA</title>
<link rel=”manifest” href=”manifest.json” />
<meta name=”theme-color” content=”#ffffff” />
<style>
body {
font-family: sans-serif;
background: #f8f9fa;
color: #333;
margin: 0;
padding: 1em;
}
h1 { text-align: center; }
#pinScreen, #mainApp { display: none; }
input, button {
font-size: 1em;
padding: 0.5em;
margin: 0.25em 0;
}
#todoList li.done { text-decoration: line-through; color: gray; }
.xp { text-align: center; font-weight: bold; margin-top: 1em; }
footer { text-align: center; margin-top: 2em; font-size: 0.9em; }
</style>
</head>
<body>
<h1>Smart To-Do</h1>
<div id=”pinScreen”>
<p>Enter your PIN to unlock:</p>
<input type=”password” id=”pinInput” placeholder=”4-digit PIN” maxlength=”4″ />
<button onclick=”checkPIN()”>Unlock</button>
<p><small>First time? Just enter a PIN to set it.</small></p>
</div>
<div id=”mainApp”>
<input id=”newTask” placeholder=”Add a task…” />
<button onclick=”addTask()”>Add</button>
<ul id=”todoList”></ul>
<button onclick=”suggestTask()”>đź’ˇ Suggest Task</button>
<p class=”xp”>XP: <span id=”xp”>0</span></p>
<footer>
<a href=”https://www.paypal.com/donate/?business=CRH2123@iCloud.com” target=”_blank”>❤️ Donate</a>
</footer>
</div>
<script>
const pin = localStorage.getItem(“todoPIN”);
const pinInput = document.getElementById(“pinInput”);
const pinScreen = document.getElementById(“pinScreen”);
const mainApp = document.getElementById(“mainApp”);
function checkPIN() {
const entered = pinInput.value;
if (!pin) {
localStorage.setItem(“todoPIN”, entered);
unlock();
} else if (entered === pin) {
unlock();
} else {
alert(“Wrong PIN”);
}
}
function unlock() {
pinScreen.style.display = “none”;
mainApp.style.display = “block”;
loadTasks();
updateXP();
}
if (!pin) {
pinScreen.style.display = “block”;
} else {
pinScreen.style.display = “block”;
}
const list = document.getElementById(“todoList”);
const xpDisplay = document.getElementById(“xp”);
function addTask() {
const input = document.getElementById(“newTask”);
const task = input.value.trim();
if (!task) return;
const li = document.createElement(“li”);
li.textContent = task;
li.onclick = () => toggleDone(li);
list.appendChild(li);
saveTasks();
input.value = “”;
}
function toggleDone(li) {
li.classList.toggle(“done”);
if (li.classList.contains(“done”)) addXP(10);
saveTasks();
}
function saveTasks() {
const tasks = [];
list.querySelectorAll(“li”).forEach(li => {
tasks.push({ text: li.textContent, done: li.classList.contains(“done”) });
});
localStorage.setItem(“todoList”, JSON.stringify(tasks));
}
function loadTasks() {
const saved = JSON.parse(localStorage.getItem(“todoList”) || “[]”);
list.innerHTML = “”;
saved.forEach(task => {
const li = document.createElement(“li”);
li.textContent = task.text;
if (task.done) li.classList.add(“done”);
li.onclick = () => toggleDone(li);
list.appendChild(li);
});
}
function addXP(points) {
const xp = parseInt(localStorage.getItem(“xp”) || “0”) + points;
localStorage.setItem(“xp”, xp);
updateXP();
}
function updateXP() {
xpDisplay.textContent = localStorage.getItem(“xp”) || “0”;
}
function suggestTask() {
const prompts = [
“Take a 10-minute walk”,
“Drink a glass of water”,
“Organize your desk”,
“Plan your next meal”,
“Write down 3 goals for today”
];
const idea = prompts[Math.floor(Math.random() * prompts.length)];
document.getElementById(“newTask”).value = idea;
}
// Service Worker
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘sw.js’).catch(console.error);
}
</script>
</body>
</html>
Solar 