Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MedScript Pro - Medical Transcription Simplified</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/sql.js@1.8.0/dist/sql-wasm.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| .wave-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .transcription-card { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(255, 255, 255, 0.85); | |
| } | |
| .play-btn:hover .play-icon { | |
| transform: scale(1.1); | |
| transition: all 0.2s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <div id="wave-bg" class="wave-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="activity" class="h-8 w-8 text-blue-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-800">MedScript Pro</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#" class="text-blue-600 border-blue-500 px-3 py-2 text-sm font-medium border-b-2">Dashboard</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Transcripts</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Patients</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Settings</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i data-feather="plus" class="h-4 w-4 mr-1"></i> | |
| New Transcription | |
| </button> | |
| <div class="ml-4 relative flex-shrink-0"> | |
| <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center cursor-pointer"> | |
| <i data-feather="user" class="h-4 w-4 text-blue-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Header --> | |
| <div class="mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-900">Medical Transcription Dashboard</h1> | |
| <p class="mt-2 text-gray-600">Efficiently transcribe, review, and manage medical records</p> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100"> | |
| <i data-feather="mic" class="h-6 w-6 text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Pending Transcriptions</p> | |
| <p class="text-2xl font-semibold text-gray-900">12</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100"> | |
| <i data-feather="check-circle" class="h-6 w-6 text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Completed Today</p> | |
| <p class="text-2xl font-semibold text-gray-900">8</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100"> | |
| <i data-feather="clock" class="h-6 w-6 text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Avg. Turnaround Time</p> | |
| <p class="text-2xl font-semibold text-gray-900">2.4h</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transcription Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Record/Upload --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white"> | |
| <h3 class="text-lg font-medium text-gray-900">Start New Transcription</h3> | |
| </div> | |
| <div class="px-6 py-5 space-y-4"> | |
| <div class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50"> | |
| <i data-feather="mic" class="h-10 w-10 text-gray-400 mb-3"></i> | |
| <p class="text-sm text-gray-500 mb-4">Record directly or upload an audio file</p> | |
| <button onclick="startRecording()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| Start Recording | |
| </button> | |
| </div> | |
| <div class="text-center"> | |
| <button onclick="uploadAudio()" class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center justify-center w-full"> | |
| <i data-feather="upload" class="h-4 w-4 mr-2"></i> | |
| Upload Audio File | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Patients --> | |
| <div class="mt-6 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white"> | |
| <h3 class="text-lg font-medium text-gray-900">Recent Patients</h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 flex items-center"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="user" class="h-5 w-5 text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">John D. Peterson</p> | |
| <p class="text-sm text-gray-500">Last visit: Cardiology</p> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center"> | |
| <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i data-feather="user" class="h-5 w-5 text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Sarah M. Williams</p> | |
| <p class="text-sm text-gray-500">Last visit: Pediatrics</p> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center"> | |
| <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i data-feather="user" class="h-5 w-5 text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Robert T. Johnson</p> | |
| <p class="text-sm text-gray-500">Last visit: Orthopedics</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Recent Transcriptions --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-medium text-gray-900">Recent Transcriptions</h3> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| View All | |
| </button> | |
| </div> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Transcription Item 1 --> | |
| <div class="p-6 flex items-start"> | |
| <div class="play-btn flex-shrink-0 h-12 w-12 rounded-full bg-blue-600 flex items-center justify-center cursor-pointer hover:bg-blue-700 transition-colors"> | |
| <i data-feather="play" class="play-icon h-5 w-5 text-white"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-blue-600">Dr. Michael Chen</p> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span> | |
| </div> | |
| <p class="text-sm text-gray-900 mt-1">Patient Follow-up - Cardiology Consultation</p> | |
| <p class="text-sm text-gray-500 mt-1">Transcript: 02/15/2023 · 8:42 AM · 12 min</p> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i data-feather="calendar" class="h-4 w-4 mr-1"></i> | |
| Due: Today, 5:00 PM | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transcription Item 2 --> | |
| <div class="p-6 flex items-start"> | |
| <div class="play-btn flex-shrink-0 h-12 w-12 rounded-full bg-blue-600 flex items-center justify-center cursor-pointer hover:bg-blue-700 transition-colors"> | |
| <i data-feather="play" class="play-icon h-5 w-5 text-white"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-blue-600">Dr. Lisa Rodriguez</p> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">In Progress</span> | |
| </div> | |
| <p class="text-sm text-gray-900 mt-1">Initial Evaluation - Pediatric Checkup</p> | |
| <p class="text-sm text-gray-500 mt-1">Transcript: 02/14/2023 · 3:15 PM · 18 min</p> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i data-feather="calendar" class="h-4 w-4 mr-1"></i> | |
| Due: Tomorrow, 10:00 AM | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transcription Item 3 --> | |
| <div class="p-6 flex items-start"> | |
| <div class="play-btn flex-shrink-0 h-12 w-12 rounded-full bg-blue-600 flex items-center justify-center cursor-pointer hover:bg-blue-700 transition-colors"> | |
| <i data-feather="play" class="play-icon h-5 w-5 text-white"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-blue-600">Dr. James Wilson</p> | |
| <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Pending</span> | |
| </div> | |
| <p class="text-sm text-gray-900 mt-1">Surgical Consultation - Orthopedic Review</p> | |
| <p class="text-sm text-gray-500 mt-1">Transcript: 02/14/2023 · 11:30 AM · 22 min</p> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i data-feather="calendar" class="h-4 w-4 mr-1"></i> | |
| Due: Today, 12:00 PM | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-indigo-100"> | |
| <i data-feather="book-open" class="h-6 w-6 text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Templates</h4> | |
| <p class="mt-1 text-sm text-gray-500">Access common medical templates</p> | |
| <button class="mt-3 text-indigo-600 hover:text-indigo-800 text-sm font-medium"> | |
| Browse Templates | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-pink-100"> | |
| <i data-feather="settings" class="h-6 w-6 text-pink-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Preferences</h4> | |
| <p class="mt-1 text-sm text-gray-500">Customize your transcription workflow</p> | |
| <button class="mt-3 text-pink-600 hover:text-pink-800 text-sm font-medium"> | |
| Update Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Transcription Modal --> | |
| <div id="transcriptionModal" class="fixed inset-0 overflow-y-auto hidden z-50"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full sm:p-6"> | |
| <div> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100"> | |
| <i data-feather="mic" class="h-6 w-6 text-blue-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-5"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modalTitle">New Transcription</h3> | |
| <div class="mt-2"> | |
| <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-3"> | |
| <label for="doctor-name" class="block text-sm font-medium text-gray-700">Doctor Name</label> | |
| <input type="text" name="doctor-name" id="doctor-name" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="patient-name" class="block text-sm font-medium text-gray-700">Patient Name</label> | |
| <input type="text" name="patient-name" id="patient-name" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label for="specialty" class="block text-sm font-medium text-gray-700">Specialty</label> | |
| <select id="specialty" name="specialty" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>Cardiology</option> | |
| <option>Pediatrics</option> | |
| <option>Orthopedics</option> | |
| <option>Neurology</option> | |
| <option>Dermatology</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense"> | |
| <button type="button" onclick="document.getElementById('transcriptionModal').classList.add('hidden');" class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:col-start-1 sm:text-sm"> | |
| Cancel | |
| </button> | |
| <button type="button" onclick="saveNewTranscription()" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:col-start-2 sm:text-sm"> | |
| Save Transcription | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 mt-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="flex justify-center md:order-2 space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="help-circle" class="h-5 w-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="mail" class="h-5 w-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="settings" class="h-5 w-5"></i> | |
| </a> | |
| </div> | |
| <div class="mt-8 md:mt-0 md:order-1"> | |
| <p class="text-center text-xs text-gray-500"> | |
| © 2023 MedScript Pro. All rights reserved. HIPAA compliant. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize SQLite database | |
| let db; | |
| async function initDB() { | |
| const SQL = await initSqlJs({ | |
| locateFile: file => `https://cdn.jsdelivr.net/npm/sql.js@1.8.0/dist/${file}` | |
| }); | |
| db = new SQL.Database(); | |
| // Create tables if they don't exist | |
| db.run(` | |
| CREATE TABLE IF NOT EXISTS transcriptions ( | |
| id INTEGER PRIMARY KEY AUTOINCREMENT, | |
| doctor_name TEXT NOT NULL, | |
| patient_name TEXT NOT NULL, | |
| specialty TEXT NOT NULL, | |
| recording_date TEXT NOT NULL, | |
| duration INTEGER NOT NULL, | |
| status TEXT NOT NULL, | |
| due_date TEXT NOT NULL, | |
| audio_file BLOB, | |
| transcription_text TEXT | |
| ); | |
| `); | |
| db.run(` | |
| CREATE TABLE IF NOT EXISTS patients ( | |
| id INTEGER PRIMARY KEY AUTOINCREMENT, | |
| name TEXT NOT NULL, | |
| last_visit TEXT NOT NULL, | |
| department TEXT NOT NULL | |
| ); | |
| `); | |
| // Insert sample data if empty | |
| const transcriptionsCount = db.exec("SELECT COUNT(*) FROM transcriptions")[0].values[0][0]; | |
| if (transcriptionsCount === 0) { | |
| db.run(`INSERT INTO transcriptions (doctor_name, patient_name, specialty, recording_date, duration, status, due_date) | |
| VALUES ('Dr. Michael Chen', 'John Peterson', 'Cardiology', '2023-02-15 08:42:00', 12, 'Completed', '2023-02-15 17:00:00')`); | |
| db.run(`INSERT INTO transcriptions (doctor_name, patient_name, specialty, recording_date, duration, status, due_date) | |
| VALUES ('Dr. Lisa Rodriguez', 'Sarah Williams', 'Pediatrics', '2023-02-14 15:15:00', 18, 'In Progress', '2023-02-16 10:00:00')`); | |
| db.run(`INSERT INTO transcriptions (doctor_name, patient_name, specialty, recording_date, duration, status, due_date) | |
| VALUES ('Dr. James Wilson', 'Robert Johnson', 'Orthopedics', '2023-02-14 11:30:00', 22, 'Pending', '2023-02-15 12:00:00')`); | |
| } | |
| const patientsCount = db.exec("SELECT COUNT(*) FROM patients")[0].values[0][0]; | |
| if (patientsCount === 0) { | |
| db.run(`INSERT INTO patients (name, last_visit, department) | |
| VALUES ('John D. Peterson', '2023-02-10', 'Cardiology')`); | |
| db.run(`INSERT INTO patients (name, last_visit, department) | |
| VALUES ('Sarah M. Williams', '2023-02-08', 'Pediatrics')`); | |
| db.run(`INSERT INTO patients (name, last_visit, department) | |
| VALUES ('Robert T. Johnson', '2023-02-12', 'Orthopedics')`); | |
| } | |
| } | |
| // Initialize Vanta.js waves background | |
| VANTA.WAVES({ | |
| el: "#wave-bg", | |
| color: 0x0066cc, | |
| waveHeight: 20, | |
| shininess: 50, | |
| waveSpeed: 0.5, | |
| zoom: 0.8 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize database when page loads | |
| document.addEventListener('DOMContentLoaded', initDB); | |
| </script> | |
| </body> | |
| </html> | |