<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TECHAID - Emergency Medical Dashboard (Demo)</title>
<script src="[Link]
<script src="[Link]
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f5f7fa;
}
.emergency-button {
transition: all 0.2s ease-in-out;
box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
}
.emergency-button:hover {
box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6);
transform: translateY(-2px);
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.emergency-pulse {
animation: pulse 1.5s infinite;
}
.card-shadow {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white shadow-md sticky top-0 z-10">
<div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-4">
<div class="flex items-center space-x-2">
<i data-lucide="cross" class="w-8 h-8 text-red-600"></i>
<h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900">TECHAID
Dashboard</h1>
</div>
<button id="menu-btn" class="md:hidden text-gray-600 hover:text-red-600">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
<nav id="nav-menu" class="hidden md:flex space-x-6">
<a href="#profile" class="text-red-600 font-semibold
hover:text-red-700">Profile</a>
<a href="#hospitals" class="text-gray-600 hover:text-red-600">Hospitals</a>
<a href="#reference" class="text-gray-600 hover:text-red-600">Reference</a>
</nav>
</div>
<div id="mobile-nav" class="hidden md:hidden bg-gray-50 border-t">
<a href="#profile" class="block px-4 py-2 text-red-600 font-medium">Profile</a>
<a href="#hospitals" class="block px-4 py-2 text-gray-700 hover:bg-gray-
100">Hospitals</a>
<a href="#reference" class="block px-4 py-2 text-gray-700 hover:bg-gray-
100">Reference</a>
</div>
</header>
<!-- Emergency Button -->
<section class="bg-gray-100 p-4 shadow-inner">
<div class="max-w-4xl mx-auto">
<button
class="emergency-button emergency-pulse w-full py-4 bg-red-600 text-white text-xl
sm:text-2xl font-extrabold rounded-xl flex items-center justify-center space-x-3
hover:bg-red-700">
<i data-lucide="phone-call" class="w-7 h-7"></i>
<span>CALL EMERGENCY 🚨</span>
</button>
</div>
</section>
<!-- Main Content -->
<main class="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-8">
<!-- Patient Profile -->
<section id="profile" class="bg-white p-6 sm:p-10 rounded-xl card-shadow">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i data-lucide="user" class="w-6 h-6 mr-2 text-red-600"></i>
Patient Profile (Demo)
</h2>
<p class="text-gray-600 text-sm sm:text-base">
Create, view, and manage patient data securely. (Firebase features disabled for
demo.)
</p>
<div class="mt-4">
<input type="text" placeholder="Full Name" class="w-full p-3 border border-gray-300
rounded-lg mb-3 focus:ring-2 focus:ring-red-500">
<select class="w-full p-3 border border-gray-300 rounded-lg mb-3 focus:ring-2
focus:ring-red-500">
<option>Select Blood Group</option>
<option>A+</option><option>B+</option><option>O+</option><option>AB+</option>
</select>
<button class="w-full bg-red-600 text-white py-3 rounded-lg font-semibold hover:bg-
red-700 transition">Save Profile</button>
</div>
</section>
<!-- Hospitals -->
<section id="hospitals" class="bg-white p-6 sm:p-10 rounded-xl card-shadow">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i data-lucide="hospital" class="w-6 h-6 mr-2 text-red-600"></i>
Nearby Hospitals
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border rounded-lg p-4 hover:bg-gray-50">
<h3 class="text-lg font-semibold">City General Hospital</h3>
<p class="text-sm text-gray-600"><i data-lucide="map-pin" class="inline w-4 h-
4"></i> Central City, 3.2 km</p>
</div>
<div class="border rounded-lg p-4 hover:bg-gray-50">
<h3 class="text-lg font-semibold">St. Jude Trauma Center</h3>
<p class="text-sm text-gray-600"><i data-lucide="map-pin" class="inline w-4 h-
4"></i> West Side, 8.5 km</p>
</div>
</div>
</section>
<!-- Reference -->
<section id="reference" class="bg-white p-6 sm:p-10 rounded-xl card-shadow">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i data-lucide="book-open" class="w-6 h-6 mr-2 text-red-600"></i>
Medical Quick Reference
</h2>
<iframe class="w-full aspect-video rounded-lg border"
src="[Link] allowfullscreen></iframe>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-4 text-center">
<p class="text-sm sm:text-base">© 2025 TECHAID. Demo Version – Works on all
devices.</p>
</footer>
<script>
[Link]();
// Toggle mobile menu
[Link]("menu-btn").addEventListener("click", () => {
[Link]("mobile-nav").[Link]("hidden");
});
</script>
</body>
</html>