116 lines
5.4 KiB
HTML
116 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Sessions - Improved Layout</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
function toggleDescription(id) {
|
||
const para = document.getElementById(id);
|
||
const btn = document.getElementById(id + '-btn');
|
||
para.classList.toggle('line-clamp-3');
|
||
btn.textContent = para.classList.contains('line-clamp-3') ? 'Show More' : 'Show Less';
|
||
}
|
||
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>
|
||
</head>
|
||
<body class="bg-gray-50 min-h-screen pb-20">
|
||
<div class="max-w-2xl mx-auto p-4">
|
||
|
||
<!-- Date Group Heading -->
|
||
<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 rounded-lg shadow p-4 mb-4">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h2 class="text-lg font-semibold text-gray-900">SLO & Backward Design</h2>
|
||
<p class="text-sm text-gray-600">10:00am – 11:30am · SS 205</p>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<span class="text-xs font-semibold text-white bg-green-500 px-2 py-1 rounded">In Person</span>
|
||
<button class="text-sm text-blue-600 hover:underline">Edit</button>
|
||
</div>
|
||
</div>
|
||
<p id="desc1" class="mt-2 text-sm text-gray-700 line-clamp-3">
|
||
This workshop offers a hands-on experience aimed at demystifying Student Learning Outcomes (SLOs) and Service Area Outcomes (SAOs), providing strategies for aligning assessments with outcomes...
|
||
</p>
|
||
<button id="desc1-btn" onclick="toggleDescription('desc1')" class="mt-1 text-xs text-blue-600 hover:underline">Show More</button>
|
||
</div>
|
||
|
||
<!-- Session Card 2 -->
|
||
<div class="bg-white rounded-lg shadow p-4 mb-4">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h2 class="text-lg font-semibold text-gray-900">Colonialism and Racism in the US</h2>
|
||
<p class="text-sm text-gray-600">1:00pm – 3:00pm · Online</p>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<span class="text-xs font-semibold text-white bg-blue-500 px-2 py-1 rounded">Online</span>
|
||
</div>
|
||
</div>
|
||
<p id="desc2" class="mt-2 text-sm text-gray-700 line-clamp-3">
|
||
An in-depth discussion exploring the history and legacy of colonialism and systemic racism in the U.S., connecting past to present-day impacts and policies...
|
||
</p>
|
||
<button id="desc2-btn" onclick="toggleDescription('desc2')" class="mt-1 text-xs text-blue-600 hover:underline">Show More</button>
|
||
</div>
|
||
|
||
<!-- Session Card 3 -->
|
||
<div class="bg-white rounded-lg shadow p-4 mb-4">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h2 class="text-lg font-semibold text-gray-900">Artificial Intelligence</h2>
|
||
<p class="text-sm text-gray-600">2:00pm – 3:00pm · Online</p>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<span class="text-xs font-semibold text-white bg-blue-500 px-2 py-1 rounded">Online</span>
|
||
</div>
|
||
</div>
|
||
<p id="desc3" class="mt-2 text-sm text-gray-700 line-clamp-3">
|
||
Learn about the current state and future implications of AI technologies in education and society, with a discussion of ethical challenges and applications...
|
||
</p>
|
||
<button id="desc3-btn" onclick="toggleDescription('desc3')" class="mt-1 text-xs text-blue-600 hover:underline">Show More</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Date Group Heading -->
|
||
<h3 class="text-xl font-bold text-gray-800 mt-6 mb-3 border-b pb-1">Jan 24, 2025 — Mandatory Day</h3>
|
||
|
||
<!-- Session Card 4 -->
|
||
<div class="bg-white rounded-lg shadow p-4 mb-4">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h2 class="text-lg font-semibold text-gray-900">Welcome Back to all Employees</h2>
|
||
<p class="text-sm text-gray-600">9:15am – 10:20am · In Person</p>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<span class="text-xs font-semibold text-white bg-green-500 px-2 py-1 rounded">In Person</span>
|
||
</div>
|
||
</div>
|
||
<p id="desc4" class="mt-2 text-sm text-gray-700 line-clamp-3">
|
||
Kick off the semester with important updates and a community-wide welcome message from leadership. A chance to reconnect and re-align as we start a new term...
|
||
</p>
|
||
<button id="desc4-btn" onclick="toggleDescription('desc4')" class="mt-1 text-xs text-blue-600 hover:underline">Show More</button>
|
||
</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>
|
||
</body>
|
||
</html>
|