| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HeartBeats Visualizer</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| </head> |
| <body class="bg-gray-100 min-h-screen"> |
| <custom-navbar></custom-navbar> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2 space-y-8"> |
| |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Live ECG Monitoring</h2> |
| <div id="heartStatus" class="flex items-center"> |
| <span class="h-4 w-4 rounded-full bg-red-500 animate-pulse mr-2"></span> |
| <span class="text-gray-600">Analyzing...</span> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="ecgChart"></canvas> |
| </div> |
| <div class="mt-6 flex justify-between items-center"> |
| <button id="pauseBtn" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition"> |
| <i data-feather="pause"></i> Pause |
| </button> |
| <div class="text-sm text-gray-500"> |
| <span id="bpmDisplay" class="text-lg font-semibold text-gray-800">--</span> BPM |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Reading History</h2> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">BPM</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th> |
| </tr> |
| </thead> |
| <tbody id="historyTable" class="bg-white divide-y divide-gray-200"> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="space-y-8"> |
| |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Current Reading</h2> |
| <div class="space-y-4"> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-600">Current BPM</span> |
| <span id="currentBpm" class="text-2xl font-bold text-gray-800">--</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-600">Average BPM</span> |
| <span id="averageBpm" class="text-2xl font-bold text-gray-800">--</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-600">Min BPM</span> |
| <span id="minBpm" class="text-2xl font-bold text-gray-800">--</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-600">Max BPM</span> |
| <span id="maxBpm" class="text-2xl font-bold text-gray-800">--</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Irregularity Analysis</h2> |
| <div id="irregularityStatus" class="text-center py-4 px-6 rounded-lg bg-red-100 text-red-800 mb-4"> |
| <i data-feather="alert-circle" class="inline mr-2"></i> |
| <span>No irregular beats detected</span> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-600">Irregular Beats</span> |
| <span id="irregularBeats" class="font-semibold">0</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-600">Last Irregularity</span> |
| <span id="lastIrregularity" class="font-semibold">--</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Quick Actions</h2> |
| <div class="space-y-3"> |
| <button id="exportBtn" class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition flex items-center justify-center"> |
| <i data-feather="download" class="mr-2"></i> Export Data |
| </button> |
| <button id="clearBtn" class="w-full px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition flex items-center justify-center"> |
| <i data-feather="trash-2" class="mr-2"></i> Clear History |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
