<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Aryan's Daily Schedule</title>
<script src="[Link]
<link href="[Link]
family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0
100%);
}
.glass-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.checked {
opacity: 0.5;
filter: grayscale(0.8);
transform: scale(0.98);
}
.checked h3 {
text-decoration: line-through;
}
.current-task {
background: #ffffff;
border: 2px solid #3b82f6;
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
z-index: 10;
}
.progress-ring {
transition: stroke-dashoffset 0.5s ease;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
</style>
</head>
<body class="min-h-screen text-slate-900 pb-12">
<div class="max-w-md mx-auto px-6">
<!-- Dashboard Header -->
<header class="py-10 flex flex-col items-center text-
center">
<div class="relative w-32 h-32 mb-6">
<!-- Progress Circle -->
<svg class="w-full h-full transform -rotate-90">
<circle cx="64" cy="64" r="58"
stroke="currentColor" stroke-width="8" fill="transparent"
class="text-slate-200" />
<circle id="progress-circle" cx="64" cy="64" r="58"
stroke="currentColor" stroke-width="8" fill="transparent" stroke-
dasharray="364.4" stroke-dashoffset="364.4" stroke-
linecap="round" class="text-blue-600 progress-ring" />
</svg>
<div class="absolute inset-0 flex flex-col items-center
justify-center">
<span id="percent-complete" class="text-2xl font-
bold text-slate-800">0%</span>
<span class="text-[10px] uppercase tracking-widest
text-slate-500 font-semibold">Done</span>
</div>
</div>
<h1 class="text-2xl font-bold text-slate-800 tracking-
tight">Aryan's Daily Routine</h1>
<p id="current-time-display" class="text-sm font-medium
text-blue-500 mt-1 uppercase tracking-widest">00:00:00 AM</p>
</header>
<!-- Stats Section -->
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="glass-card rounded-2xl p-4 text-center">
<span id="completed-count" class="block text-xl font-
bold text-slate-800">0</span>
<span class="text-[10px] text-slate-400 uppercase
font-bold tracking-wider">Completed</span>
</div>
<div class="glass-card rounded-2xl p-4 text-center">
<span id="remaining-count" class="block text-xl font-
bold text-slate-800">10</span>
<span class="text-[10px] text-slate-400 uppercase
font-bold tracking-wider">Remaining</span>
</div>
</div>
<!-- Activity List -->
<div class="relative">
<!-- Timeline vertical line -->
<div class="absolute left-6 top-4 bottom-4 w-px bg-slate-
200 hidden xs:block"></div>
<div id="activity-list" class="space-y-4">
<!-- Injected via JS -->
</div>
</div>
<!-- Professional Footer Actions -->
<div class="mt-10 flex gap-3">
<button onclick="resetChecks()" class="flex-1 py-4 bg-
white border border-slate-200 text-slate-600 rounded-2xl font-
semibold text-sm hover:bg-slate-50 transition-colors shadow-sm
active:scale-95">
Reset Progress
</button>
<button onclick="[Link]()" class="px-6 py-4 bg-
slate-800 text-white rounded-2xl font-semibold text-sm hover:bg-
slate-900 transition-colors shadow-lg active:scale-95">
Print
</button>
</div>
</div>
<script>
const schedule = [
{ id: 1, start: 0, end: 3, activity: "Show / TV / Video", icon:
"📺", category: "Entertainment" },
{ id: 2, start: 3, end: 9, activity: "Rest & Recovery", icon:
"😴", category: "Sleep" },
{ id: 3, start: 9, end: 10.5, activity: "Academic Work", icon:
"📚", category: "Education" },
{ id: 4, start: 10.5, end: 11.5, activity: "Coding &
Documentation", icon: "💻", category: "Technical" },
{ id: 5, start: 11.5, end: 13.5, activity: "Scheduled Class",
icon: "🏫", category: "Education" },
{ id: 6, start: 13.5, end: 15, activity: "Creative / Flex Time",
icon: "🎨", category: "Creativity" },
{ id: 7, start: 15, end: 17, activity: "Language Immersion",
icon: "🎌", category: "Learning" },
{ id: 8, start: 17, end: 18.5, activity: "Recharge / Leisure",
icon: "🎮", category: "Leisure" },
{ id: 9, start: 18.5, end: 21, activity: "Deep Study", icon:
"📖", category: "Education" },
{ id: 10, start: 21, end: 24, activity: "Gaming & Digital
Detox", icon: "", category: "Leisure" }
];
function formatTime(t) {
const h = [Link](t);
const m = (t % 1) * 60;
const period = h >= 12 ? "PM" : "AM";
let displayH = h % 12;
if (displayH === 0) displayH = 12;
return `${displayH}:${m === 0 ? '00' : m} ${period}`;
}
function renderSchedule() {
const container = [Link]('activity-
list');
const now = new Date();
const currentHour = [Link]() + ([Link]() /
60);
const savedChecks =
[Link]([Link]('aryan_checks_pro') || '{}');
[Link] = [Link](item => {
const isCurrent = currentHour >= [Link] &&
currentHour < [Link];
const isChecked = savedChecks[[Link]] || false;
return `
<div id="item-${[Link]}"
onclick="toggleCheck(${[Link]})"
class="glass-card flex items-center p-5 rounded-
3xl cursor-pointer ${isCurrent ? 'current-task' : ''} ${isChecked ?
'checked' : ''}">
<div class="flex-shrink-0 w-12 h-12 rounded-2xl
flex items-center justify-center mr-4 bg-gradient-to-br $
{isChecked ? 'from-slate-100 to-slate-200' : 'from-blue-50 to-
indigo-50'}">
<span class="text-xl">${isChecked ? '✓' :
[Link]}</span>
</div>
<div class="flex-grow">
<div class="flex items-center gap-2">
<h3 class="font-bold text-slate-800">$
{[Link]}</h3>
${isCurrent ? '<span class="w-2 h-2 rounded-
full bg-blue-500 pulse"></span>' : ''}
</div>
<div class="flex items-center mt-1 text-slate-
500 font-medium">
<span class="text-[11px]">$
{formatTime([Link])} – ${formatTime([Link])}</span>
<span class="mx-2 text-[10px]">•</span>
<span class="text-[10px] uppercase tracking-
wider font-bold text-slate-400">${[Link]}</span>
</div>
</div>
<div class="flex-shrink-0 ml-2">
<div class="w-6 h-6 rounded-full border-2 $
{isChecked ? 'bg-green-500 border-green-500' : 'border-slate-
200'} flex items-center justify-center transition-colors">
${isChecked ? '<svg class="w-4 h-4 text-
white" fill="none" stroke="currentColor" viewBox="0 0 24
24"><path stroke-linecap="round" stroke-linejoin="round"
stroke-width="3" d="M5 13l4 4L19 7"></path></svg>' : ''}
</div>
</div>
</div>
`;
}).join('');
updateProgress();
}
function toggleCheck(id) {
const savedChecks =
[Link]([Link]('aryan_checks_pro') || '{}');
savedChecks[id] = !savedChecks[id];
[Link]('aryan_checks_pro',
[Link](savedChecks));
renderSchedule();
}
function resetChecks() {
if(confirm("Start fresh for today?")) {
[Link]('aryan_checks_pro');
renderSchedule();
}
}
function updateProgress() {
const savedChecks =
[Link]([Link]('aryan_checks_pro') || '{}');
const done = [Link](savedChecks).filter(v =>
v).length;
const total = [Link];
const percent = [Link]((done / total) * 100);
[Link]('completed-count').innerText =
done;
[Link]('remaining-count').innerText =
total - done;
[Link]('percent-complete').innerText
= `${percent}%`;
// Update Circle
const circle = [Link]('progress-circle');
const circumference = 58 * 2 * [Link];
const offset = circumference - (percent / 100 *
circumference);
[Link] = offset;
}
function updateClock() {
const now = new Date();
[Link]('current-time-
display').innerText = [Link]([], {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true
});
if ([Link]() === 0) {
renderSchedule();
}
}
[Link] = () => {
renderSchedule();
setInterval(updateClock, 1000);
updateClock();
};
</script>
</body>
</html>