102 lines
4.3 KiB
HTML
102 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>My Itinerary</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
</head>
|
||
<body class="bg-gray-50 min-h-screen pb-24">
|
||
<div class="max-w-2xl mx-auto p-4">
|
||
|
||
<div class="text-center mb-4">
|
||
<h1 class="text-2xl font-bold text-gray-800">My Itinerary</h1>
|
||
<p class="text-sm text-gray-500">Current time: Jul 14, 9:41pm. Return here on the day of your sessions for Zoom links.</p>
|
||
</div>
|
||
|
||
<!-- Jan 23 Day Group -->
|
||
<div class="flex justify-between items-center mb-3">
|
||
<h3 class="text-xl font-bold text-gray-800">Jan 23, 2025 — Optional Day</h3>
|
||
<button id="day1-toggle" onclick="toggleDay('day1')" class="text-sm text-blue-600 hover:underline">Collapse Day</button>
|
||
</div>
|
||
|
||
<div id="day1">
|
||
<!-- Session Card 1 -->
|
||
<div class="bg-white border-l-4 border-green-500 rounded-md shadow-sm p-4 mb-3">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h2 class="text-base font-semibold text-gray-800">SLO & Backward Design</h2>
|
||
<p class="text-sm text-gray-600">10:00am – 11:30am · In Person · SS 205</p>
|
||
</div>
|
||
<div class="flex flex-col items-end gap-2">
|
||
<span class="text-xs font-semibold text-green-600">In Person</span>
|
||
<button class="text-xs text-red-600 hover:underline">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Session Card 2 -->
|
||
<div class="bg-white border-l-4 border-blue-500 rounded-md shadow-sm p-4 mb-3">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h2 class="text-base font-semibold text-gray-800">Colonialism and Racism in the US</h2>
|
||
<p class="text-sm text-gray-600">1:00pm – 3:00pm · Online</p>
|
||
<a href="#" class="inline-block mt-1 text-sm text-blue-600 hover:underline">Join Zoom</a>
|
||
</div>
|
||
<div class="flex flex-col items-end gap-2">
|
||
<span class="text-xs font-semibold text-blue-600">Online</span>
|
||
<button class="text-xs text-red-600 hover:underline">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Session Card 3 -->
|
||
<div class="bg-white border-l-4 border-blue-500 rounded-md shadow-sm p-4 mb-3">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h2 class="text-base font-semibold text-gray-800">Artificial Intelligence</h2>
|
||
<p class="text-sm text-gray-600">2:00pm – 3:00pm · Online</p>
|
||
<a href="#" class="inline-block mt-1 text-sm text-blue-600 hover:underline">Join Zoom</a>
|
||
</div>
|
||
<div class="flex flex-col items-end gap-2">
|
||
<span class="text-xs font-semibold text-blue-600">Online</span>
|
||
<button class="text-xs text-red-600 hover:underline">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Jan 24 Day Group -->
|
||
<h3 class="text-xl font-bold text-gray-800 mt-6 mb-3">Jan 24, 2025 — Mandatory Day</h3>
|
||
<div class="bg-white border-l-4 border-green-500 rounded-md shadow-sm p-4 mb-3">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h2 class="text-base font-semibold text-gray-800">Welcome Back to all Employees</h2>
|
||
<p class="text-sm text-gray-600">9:15am – 10:20am · In Person · Main Auditorium</p>
|
||
</div>
|
||
<div class="flex flex-col items-end gap-2">
|
||
<span class="text-xs font-semibold text-green-600">In Person</span>
|
||
<button class="text-xs text-red-600 hover:underline">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sticky Footer -->
|
||
<footer class="fixed bottom-0 left-0 w-full bg-white border-t p-3 flex justify-around text-sm font-medium text-gray-800 shadow">
|
||
<button class="hover:text-blue-600">My Itinerary</button>
|
||
<button class="hover:text-blue-600">All Sessions</button>
|
||
<button class="hover:text-blue-600">GOTT</button>
|
||
</footer>
|
||
|
||
<script>
|
||
function toggleDay(id) {
|
||
const group = document.getElementById(id);
|
||
const btn = document.getElementById(id + '-toggle');
|
||
group.classList.toggle('hidden');
|
||
btn.textContent = group.classList.contains('hidden') ? 'Expand Day' : 'Collapse Day';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|