Spaces:

thors1
/

deepsite-project-vyb6k

Running

App Files Files Community

thors1 commited on Mar 2

Commit

357b6fd

verified ·

1 Parent(s): fe806ec

Initial DeepSite commit

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +767 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project Vyb6k
-emoji: 🌖
 colorFrom: purple
-colorTo: yellow
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
 colorFrom: purple
+colorTo: gray
 sdk: static
+emoji: 🚧
+tags:
+  - deepsite-v4
 ---
+# DeepSite Project
+This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.

index.html CHANGED Viewed

@@ -1,19 +1,767 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Clinic Admin - Add Patient</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: '#2563eb',
+            background: '#f8fafc',
+            border: '#e5e7eb',
+          },
+          fontFamily: {
+            sans: ['Inter', 'system-ui', 'sans-serif'],
+          },
+        },
+      },
+    }
+  </script>
+  <style>
+    * {
+      font-family: 'Inter', system-ui, sans-serif;
+    }
+    .sidebar-tooltip {
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.2s ease;
+    }
+    .sidebar-item:hover .sidebar-tooltip {
+      opacity: 1;
+      visibility: visible;
+    }
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 3px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+    .form-card {
+      background: white;
+      border-radius: 16px;
+      border: 1px solid #e5e7eb;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+    }
+    .input-field {
+      transition: all 0.2s ease;
+    }
+    .input-field:focus {
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
+    }
+    .toggle-checkbox:checked {
+      right: 0;
+      border-color: #2563eb;
+    }
+    .toggle-checkbox:checked + .toggle-label {
+      background-color: #2563eb;
+    }
+    .tag-pill {
+      transition: all 0.15s ease;
+    }
+    .tag-pill:hover {
+      transform: translateY(-1px);
+    }
+    .dropdown-menu {
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-8px) scale(0.98);
+      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    .dropdown-menu.active {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0) scale(1);
+    }
+    .avatar-menu {
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-8px) scale(0.98);
+      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    .avatar-menu.active {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0) scale(1);
+    }
+  </style>
+</head>
+<body class="bg-[#f8fafc] text-slate-800">
+  <!-- Sticky Header -->
+  <header class="fixed top-0 left-0 right-0 h-16 bg-white border-b border-[#e5e7eb] z-50 flex items-center justify-between px-4 lg:px-6">
+    <!-- Left: Product Name -->
+    <div class="flex items-center gap-3">
+      <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+        <i data-lucide="heart-pulse" class="w-5 h-5 text-white"></i>
+      </div>
+      <span class="font-semibold text-lg text-slate-900">Clinic Admin</span>
+    </div>
+    <!-- Center: Global Search -->
+    <div class="hidden md:flex flex-1 max-w-xl mx-8">
+      <div class="relative w-full">
+        <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
+        <input
+          type="text"
+          placeholder="Search patients, appointments, invoices..."
+          class="w-full h-10 pl-10 pr-4 bg-slate-50 border border-[#e5e7eb] rounded-lg text-sm placeholder:text-slate-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all"
+        >
+        <kbd class="absolute right-3 top-1/2 -translate-y-1/2 px-2 py-0.5 text-xs font-medium text-slate-400 bg-slate-100 rounded border border-slate-200">⌘K</kbd>
+      </div>
+    </div>
+    <!-- Right: Actions -->
+    <div class="flex items-center gap-2">
+      <!-- New Dropdown -->
+      <div class="relative" id="newDropdown">
+        <button onclick="toggleNewDropdown()" class="flex items-center gap-2 h-9 px-4 bg-primary hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
+          <i data-lucide="plus" class="w-4 h-4"></i>
+          <span class="hidden sm:inline">New</span>
+          <i data-lucide="chevron-down" class="w-4 h-4"></i>
+        </button>
+        <div id="newDropdownMenu" class="dropdown-menu absolute right-0 top-full mt-2 w-56 bg-white rounded-xl border border-[#e5e7eb] shadow-lg shadow-slate-200/50 py-1.5 z-50">
+          <button class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
+            <i data-lucide="user-plus" class="w-4 h-4 text-primary"></i>
+            Add Patient
+          </button>
+          <button class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
+            <i data-lucide="calendar-plus" class="w-4 h-4 text-emerald-500"></i>
+            Appointment
+          </button>
+          <button class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
+            <i data-lucide="file-text" class="w-4 h-4 text-amber-500"></i>
+            Invoice
+          </button>
+          <div class="h-px bg-[#e5e7eb] my-1.5"></div>
+          <button class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
+            <i data-lucide="upload" class="w-4 h-4 text-slate-400"></i>
+            Import Data
+          </button>
+        </div>
+      </div>
+      <!-- Notifications -->
+      <button class="relative w-9 h-9 flex items-center justify-center text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors">
+        <i data-lucide="bell" class="w-5 h-5"></i>
+        <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
+      </button>
+      <!-- User Avatar Menu -->
+      <div class="relative" id="avatarMenu">
+        <button onclick="toggleAvatarMenu()" class="flex items-center gap-2 p-1 hover:bg-slate-100 rounded-lg transition-colors">
+          <img src="http://static.photos/people/200x200/42" alt="Dr. Sarah Chen" class="w-8 h-8 rounded-lg object-cover">
+          <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 hidden sm:block"></i>
+        </button>
+        <div id="avatarDropdown" class="avatar-menu absolute right-0 top-full mt-2 w-56 bg-white rounded-xl border border-[#e5e7eb] shadow-lg shadow-slate-200/50 py-2 z-50">
+          <div class="px-4 py-3 border-b border-[#e5e7eb]">
+            <p class="text-sm font-medium text-slate-900">Dr. Sarah Chen</p>
+            <p class="text-xs text-slate-500">sarah.chen@clinic.com</p>
+          </div>
+          <button class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
+            <i data-lucide="user" class="w-4 h-4 text-slate-400"></i>
+            Profile
+          </button>
+          <button class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors">
+            <i data-lucide="settings" class="w-4 h-4 text-slate-400"></i>
+            Settings
+          </button>
+          <div class="h-px bg-[#e5e7eb] my-1.5"></div>
+          <button class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors">
+            <i data-lucide="log-out" class="w-4 h-4"></i>
+            Logout
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+  <!-- Sidebar -->
+  <aside class="fixed left-0 top-16 bottom-0 w-[72px] bg-white border-r border-[#e5e7eb] z-40 flex flex-col items-center py-4 gap-1">
+    <!-- Dashboard -->
+    <div class="sidebar-item relative w-full flex justify-center">
+      <button class="w-11 h-11 flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all">
+        <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
+      </button>
+      <span class="sidebar-tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs font-medium rounded-lg whitespace-nowrap z-50">Dashboard</span>
+    </div>
+    <!-- Patients (Active) -->
+    <div class="sidebar-item relative w-full flex justify-center">
+      <button class="w-11 h-11 flex items-center justify-center text-primary bg-blue-50 rounded-xl transition-all">
+        <i data-lucide="users" class="w-5 h-5"></i>
+      </button>
+      <span class="sidebar-tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs font-medium rounded-lg whitespace-nowrap z-50">Patients</span>
+    </div>
+    <!-- Appointments -->
+    <div class="sidebar-item relative w-full flex justify-center">
+      <button class="w-11 h-11 flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all">
+        <i data-lucide="calendar" class="w-5 h-5"></i>
+      </button>
+      <span class="sidebar-tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs font-medium rounded-lg whitespace-nowrap z-50">Appointments</span>
+    </div>
+    <!-- Encounters -->
+    <div class="sidebar-item relative w-full flex justify-center">
+      <button class="w-11 h-11 flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all">
+        <i data-lucide="stethoscope" class="w-5 h-5"></i>
+      </button>
+      <span class="sidebar-tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs font-medium rounded-lg whitespace-nowrap z-50">Encounters</span>
+    </div>
+    <!-- Messages -->
+    <div class="sidebar-item relative w-full flex justify-center">
+      <button class="w-11 h-11 flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all relative">
+        <i data-lucide="message-square" class="w-5 h-5"></i>
+        <span class="absolute top-2 right-2 w-2 h-2 bg-primary rounded-full"></span>
+      </button>
+      <span class="sidebar-tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs font-medium rounded-lg whitespace-nowrap z-50">Messages</span>
+    </div>
+    <!-- Tasks -->
+    <div class="sidebar-item relative w-full flex justify-center">
+      <button class="w-11 h-11 flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all">
+        <i data-lucide="check-square" class="w-5 h-5"></i>
+      </button>
+      <span class="sidebar-tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs font-medium rounded-lg whitespace-nowrap z-50">Tasks</span>
+    </div>
+    <!-- Billing -->
+    <div class="sidebar-item relative w-full flex justify-center">
+      <button class="w-11 h-11 flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all">
+        <i data-lucide="credit-card" class="w-5 h-5"></i>
+      </button>
+      <span class="sidebar-tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs font-medium rounded-lg whitespace-nowrap z-50">Billing</span>
+    </div>
+    <!-- Reports -->
+    <div class="sidebar-item relative w-full flex justify-center">
+      <button class="w-11 h-11 flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all">
+        <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
+      </button>
+      <span class="sidebar-tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs font-medium rounded-lg whitespace-nowrap z-50">Reports</span>
+    </div>
+    <div class="flex-1"></div>
+    <!-- Settings -->
+    <div class="sidebar-item relative w-full flex justify-center">
+      <button class="w-11 h-11 flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all">
+        <i data-lucide="settings" class="w-5 h-5"></i>
+      </button>
+      <span class="sidebar-tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs font-medium rounded-lg whitespace-nowrap z-50">Settings</span>
+    </div>
+  </aside>
+  <!-- Main Content -->
+  <main class="ml-[72px] pt-16 min-h-screen">
+    <div class="max-w-[1280px] mx-auto p-6">
+      <!-- Page Header -->
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+        <div>
+          <h1 class="text-2xl font-semibold text-slate-900">Add Patient</h1>
+          <p class="text-sm text-slate-500 mt-1">Create a new patient record for the clinic.</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <button class="h-10 px-4 text-sm font-medium text-slate-700 bg-white border border-[#e5e7eb] hover:bg-slate-50 rounded-lg transition-colors">
+            Cancel
+          </button>
+          <button class="h-10 px-4 text-sm font-medium text-slate-700 bg-white border border-[#e5e7eb] hover:bg-slate-50 rounded-lg transition-colors flex items-center gap-2">
+            <i data-lucide="calendar-plus" class="w-4 h-4"></i>
+            Save & Schedule
+          </button>
+          <button class="h-10 px-4 text-sm font-medium text-white bg-primary hover:bg-blue-700 rounded-lg transition-colors flex items-center gap-2">
+            <i data-lucide="save" class="w-4 h-4"></i>
+            Save Patient
+          </button>
+        </div>
+      </div>
+      <!-- Form Content -->
+      <div class="space-y-6">
+        <!-- Patient Identity Section -->
+        <div class="form-card p-6">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center">
+              <i data-lucide="user" class="w-5 h-5 text-primary"></i>
+            </div>
+            <div>
+              <h2 class="text-base font-semibold text-slate-900">Patient Identity</h2>
+              <p class="text-sm text-slate-500">Basic demographic information</p>
+            </div>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+            <!-- First Name -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">First Name <span class="text-red-500">*</span></label>
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Enter first name">
+            </div>
+            <!-- Middle Name -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Middle Name</label>
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Enter middle name">
+            </div>
+            <!-- Last Name -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Last Name <span class="text-red-500">*</span></label>
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Enter last name">
+            </div>
+            <!-- Preferred Name -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Preferred Name</label>
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Enter preferred name">
+            </div>
+            <!-- Date of Birth -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Date of Birth <span class="text-red-500">*</span></label>
+              <div class="relative">
+                <input type="date" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none">
+                <i data-lucide="calendar" class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
+              </div>
+            </div>
+            <!-- Sex at Birth -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Sex at Birth <span class="text-red-500">*</span></label>
+              <select class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none appearance-none cursor-pointer">
+                <option value="">Select sex at birth</option>
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+                <option value="other">Other</option>
+                <option value="unknown">Unknown</option>
+              </select>
+            </div>
+            <!-- Gender Identity -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Gender Identity</label>
+              <select class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none appearance-none cursor-pointer">
+                <option value="">Select gender identity</option>
+                <option value="man">Man</option>
+                <option value="woman">Woman</option>
+                <option value="transgender-man">Transgender Man</option>
+                <option value="transgender-woman">Transgender Woman</option>
+                <option value="non-binary">Non-binary</option>
+                <option value="prefer-not-to-say">Prefer not to say</option>
+              </select>
+            </div>
+            <!-- Pronouns -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Pronouns</label>
+              <select class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none appearance-none cursor-pointer">
+                <option value="">Select pronouns</option>
+                <option value="he-him">He/Him</option>
+                <option value="she-her">She/Her</option>
+                <option value="they-them">They/Them</option>
+                <option value="ze-zir">Ze/Zir</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            <!-- Marital Status -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Marital Status</label>
+              <select class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none appearance-none cursor-pointer">
+                <option value="">Select marital status</option>
+                <option value="single">Single</option>
+                <option value="married">Married</option>
+                <option value="divorced">Divorced</option>
+                <option value="widowed">Widowed</option>
+                <option value="separated">Separated</option>
+                <option value="domestic-partner">Domestic Partner</option>
+              </select>
+            </div>
+          </div>
+          <!-- Patient Status & Type Row -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
+            <!-- Patient Status -->
+            <div class="space-y-3">
+              <label class="text-sm font-medium text-slate-700">Patient Status</label>
+              <div class="flex gap-3">
+                <label class="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="patientStatus" value="active" checked class="w-4 h-4 text-primary border-[#e5e7eb] focus:ring-primary">
+                  <span class="text-sm text-slate-700">Active</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="patientStatus" value="inactive" class="w-4 h-4 text-primary border-[#e5e7eb] focus:ring-primary">
+                  <span class="text-sm text-slate-700">Inactive</span>
+                </label>
+              </div>
+            </div>
+            <!-- Patient Type -->
+            <div class="space-y-3">
+              <label class="text-sm font-medium text-slate-700">Patient Type</label>
+              <div class="flex flex-wrap gap-3">
+                <label class="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="patientType" value="new" checked class="w-4 h-4 text-primary border-[#e5e7eb] focus:ring-primary">
+                  <span class="text-sm text-slate-700">New Patient</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="patientType" value="returning" class="w-4 h-4 text-primary border-[#e5e7eb] focus:ring-primary">
+                  <span class="text-sm text-slate-700">Returning</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="patientType" value="vip" class="w-4 h-4 text-primary border-[#e5e7eb] focus:ring-primary">
+                  <span class="text-sm text-slate-700">VIP</span>
+                </label>
+                <label class="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="patientType" value="other" class="w-4 h-4 text-primary border-[#e5e7eb] focus:ring-primary">
+                  <span class="text-sm text-slate-700">Other</span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <!-- Language & Interpreter Row -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
+            <!-- Primary Language -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Primary Language</label>
+              <select class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none appearance-none cursor-pointer">
+                <option value="">Select primary language</option>
+                <option value="english" selected>English</option>
+                <option value="spanish">Spanish</option>
+                <option value="french">French</option>
+                <option value="mandarin">Mandarin</option>
+                <option value="arabic">Arabic</option>
+                <option value="hindi">Hindi</option>
+                <option value="portuguese">Portuguese</option>
+                <option value="russian">Russian</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            <!-- Interpreter Needed -->
+            <div class="flex items-center gap-4">
+              <div class="flex-1 space-y-1.5">
+                <label class="text-sm font-medium text-slate-700">Interpreter Needed</label>
+                <p class="text-xs text-slate-500">Request language interpretation services</p>
+              </div>
+              <label class="relative inline-flex items-center cursor-pointer">
+                <input type="checkbox" class="sr-only peer">
+                <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
+              </label>
+            </div>
+          </div>
+          <!-- Patient Tags -->
+          <div class="mt-5 space-y-3">
+            <label class="text-sm font-medium text-slate-700">Patient Tags</label>
+            <div class="flex flex-wrap gap-2" id="tagContainer">
+              <button type="button" onclick="toggleTag(this)" class="tag-pill px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-full border border-transparent transition-all">
+                Diabetes
+              </button>
+              <button type="button" onclick="toggleTag(this)" class="tag-pill px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-full border border-transparent transition-all">
+                Hypertension
+              </button>
+              <button type="button" onclick="toggleTag(this)" class="tag-pill px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-full border border-transparent transition-all">
+                Allergies
+              </button>
+              <button type="button" onclick="toggleTag(this)" class="tag-pill px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-full border border-transparent transition-all">
+                High Risk
+              </button>
+              <button type="button" onclick="toggleTag(this)" class="tag-pill px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-full border border-transparent transition-all">
+                Medication Management
+              </button>
+              <button type="button" onclick="toggleTag(this)" class="tag-pill px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-full border border-transparent transition-all">
+                Physical Therapy
+              </button>
+              <button type="button" class="tag-pill px-3 py-1.5 text-sm font-medium text-primary bg-blue-50 hover:bg-blue-100 rounded-full border border-dashed border-primary/30 transition-all flex items-center gap-1">
+                <i data-lucide="plus" class="w-3.5 h-3.5"></i>
+                Add Tag
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Contact Information Section -->
+        <div class="form-card p-6">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 bg-emerald-50 rounded-xl flex items-center justify-center">
+              <i data-lucide="phone" class="w-5 h-5 text-emerald-600"></i>
+            </div>
+            <div>
+              <h2 class="text-base font-semibold text-slate-900">Contact Information</h2>
+              <p class="text-sm text-slate-500">Phone, email, and address details</p>
+            </div>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+            <!-- Mobile Phone -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Mobile Phone <span class="text-red-500">*</span></label>
+              <input type="tel" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="(555) 000-0000">
+            </div>
+            <!-- Home Phone -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Home Phone</label>
+              <input type="tel" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="(555) 000-0000">
+            </div>
+            <!-- Work Phone -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Work Phone</label>
+              <input type="tel" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="(555) 000-0000">
+            </div>
+            <!-- Email -->
+            <div class="space-y-1.5 md:col-span-2">
+              <label class="text-sm font-medium text-slate-700">Email Address</label>
+              <input type="email" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="patient@email.com">
+            </div>
+            <!-- Preferred Contact -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Preferred Contact Method</label>
+              <select class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none appearance-none cursor-pointer">
+                <option value="mobile">Mobile Phone</option>
+                <option value="home">Home Phone</option>
+                <option value="work">Work Phone</option>
+                <option value="email">Email</option>
+              </select>
+            </div>
+          </div>
+          <!-- Address -->
+          <div class="mt-5 space-y-3">
+            <label class="text-sm font-medium text-slate-700">Address</label>
+            <div class="space-y-3">
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Street address">
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Apartment, suite, unit, etc. (optional)">
+              <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+                <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="City">
+                <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="State">
+                <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none md:col-span-1 col-span-2" placeholder="ZIP code">
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Emergency Contact Section -->
+        <div class="form-card p-6">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 bg-amber-50 rounded-xl flex items-center justify-center">
+              <i data-lucide="shield-alert" class="w-5 h-5 text-amber-600"></i>
+            </div>
+            <div>
+              <h2 class="text-base font-semibold text-slate-900">Emergency Contact</h2>
+              <p class="text-sm text-slate-500">Primary emergency contact information</p>
+            </div>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+            <!-- Contact Name -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Contact Name</label>
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Full name">
+            </div>
+            <!-- Relationship -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Relationship</label>
+              <select class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none appearance-none cursor-pointer">
+                <option value="">Select relationship</option>
+                <option value="spouse">Spouse</option>
+                <option value="parent">Parent</option>
+                <option value="child">Child</option>
+                <option value="sibling">Sibling</option>
+                <option value="friend">Friend</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            <!-- Phone -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Phone Number</label>
+              <input type="tel" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="(555) 000-0000">
+            </div>
+          </div>
+        </div>
+        <!-- Insurance Information Section -->
+        <div class="form-card p-6">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 bg-violet-50 rounded-xl flex items-center justify-center">
+              <i data-lucide="shield-check" class="w-5 h-5 text-violet-600"></i>
+            </div>
+            <div>
+              <h2 class="text-base font-semibold text-slate-900">Insurance Information</h2>
+              <p class="text-sm text-slate-500">Primary insurance coverage details</p>
+            </div>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+            <!-- Insurance Provider -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Insurance Provider</label>
+              <select class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none appearance-none cursor-pointer">
+                <option value="">Select provider</option>
+                <option value="aetna">Aetna</option>
+                <option value="blue-cross">Blue Cross Blue Shield</option>
+                <option value="cigna">Cigna</option>
+                <option value="humana">Humana</option>
+                <option value="kaiser">Kaiser Permanente</option>
+                <option value="medicare">Medicare</option>
+                <option value="medicaid">Medicaid</option>
+                <option value="united">UnitedHealthcare</option>
+                <option value="self-pay">Self Pay</option>
+              </select>
+            </div>
+            <!-- Policy Number -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Policy Number</label>
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Enter policy number">
+            </div>
+            <!-- Group Number -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Group Number</label>
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Enter group number">
+            </div>
+            <!-- Subscriber Name -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Subscriber Name</label>
+              <input type="text" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none" placeholder="Enter subscriber name">
+            </div>
+            <!-- Subscriber DOB -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Subscriber DOB</label>
+              <input type="date" class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none">
+            </div>
+            <!-- Relationship to Subscriber -->
+            <div class="space-y-1.5">
+              <label class="text-sm font-medium text-slate-700">Relationship to Subscriber</label>
+              <select class="input-field w-full h-11 px-3.5 bg-white border border-[#e5e7eb] rounded-lg text-sm focus:outline-none appearance-none cursor-pointer">
+                <option value="self">Self</option>
+                <option value="spouse">Spouse</option>
+                <option value="child">Child</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <!-- Bottom Actions -->
+        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 pb-8">
+          <button class="h-11 px-6 text-sm font-medium text-slate-600 hover:text-slate-800 transition-colors">
+            Save as Draft
+          </button>
+          <div class="flex items-center gap-3">
+            <button class="h-11 px-6 text-sm font-medium text-slate-700 bg-white border border-[#e5e7eb] hover:bg-slate-50 rounded-lg transition-colors">
+              Cancel
+            </button>
+            <button class="h-11 px-6 text-sm font-medium text-slate-700 bg-white border border-[#e5e7eb] hover:bg-slate-50 rounded-lg transition-colors flex items-center gap-2">
+              <i data-lucide="calendar-plus" class="w-4 h-4"></i>
+              Save & Schedule
+            </button>
+            <button class="h-11 px-6 text-sm font-medium text-white bg-primary hover:bg-blue-700 rounded-lg transition-colors flex items-center gap-2">
+              <i data-lucide="save" class="w-4 h-4"></i>
+              Save Patient
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+  <script>
+    // Initialize Lucide icons
+    lucide.createIcons();
+    // Dropdown toggle functions
+    function toggleNewDropdown() {
+      const menu = document.getElementById('newDropdownMenu');
+      menu.classList.toggle('active');
+    }
+    function toggleAvatarMenu() {
+      const menu = document.getElementById('avatarDropdown');
+      menu.classList.toggle('active');
+    }
+    // Close dropdowns when clicking outside
+    document.addEventListener('click', function(e) {
+      const newDropdown = document.getElementById('newDropdown');
+      const avatarMenu = document.getElementById('avatarMenu');
+      if (!newDropdown.contains(e.target)) {
+        document.getElementById('newDropdownMenu').classList.remove('active');
+      }
+      if (!avatarMenu.contains(e.target)) {
+        document.getElementById('avatarDropdown').classList.remove('active');
+      }
+    });
+    // Tag toggle functionality
+    function toggleTag(button) {
+      const isSelected = button.classList.contains('bg-primary');
+      const isAddButton = button.textContent.includes('Add Tag');
+      if (isAddButton) return;
+      if (isSelected) {
+        button.classList.remove('bg-primary', 'text-white', 'border-primary');
+        button.classList.add('bg-slate-100', 'text-slate-600', 'border-transparent');
+      } else {
+        button.classList.remove('bg-slate-100', 'text-slate-600', 'border-transparent');
+        button.classList.add('bg-primary', 'text-white', 'border-primary');
+      }
+    }
+    // Keyboard shortcut for search
+    document.addEventListener('keydown', function(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        document.querySelector('input[type="text"]').focus();
+      }
+    });
+  </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>