Spaces:

Mohabedalgani
/

test

Running

App Files Files Community

Mohabedalgani commited on Apr 6

Commit

8e039e6

verified ·

1 Parent(s): ddfdf05

Add 1 files

Browse files

Files changed (1) hide show

index.html +497 -38

index.html CHANGED Viewed

@@ -1,41 +1,500 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
     <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        height: 100dvh;
-        font-family: "Arial", sans-serif;
-        text-align: center;
-      }
-      .arrow {
-        position: absolute;
-        bottom: 32px;
-        left: 0px;
-        width: 100px;
-        transform: rotate(30deg);
-      }
-      h1 {
-        font-size: 50px;
-      }
-      h1 span {
-        color: #acacac;
-        font-size: 32px;
-      }
     </style>
-  </head>
-  <body>
-    <h1>
-      <span>I'm ready to work,</span><br />
-      Ask me anything.
-    </h1>
-    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
-    <script></script>
-  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mohabedalgani/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MediScan - QR Medical Information</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        .animate-pulse-slow {
+            animation: pulse 3s infinite;
+        }
+        .scanner-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                to bottom,
+                rgba(0, 255, 0, 0.1) 0%,
+                rgba(0, 255, 0, 0.1) 50%,
+                rgba(0, 255, 0, 0.1) 100%
+            );
+            background-size: 100% 10px;
+            animation: scan 2s linear infinite;
+            pointer-events: none;
+        }
+        @keyframes scan {
+            0% { background-position: 0 -100px; }
+            100% { background-position: 0 100px; }
+        }
+        .scanner-frame {
+            position: relative;
+            border: 4px solid rgba(16, 185, 129, 0.5);
+            border-radius: 1rem;
+            box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
+        }
     </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Header -->
+    <header class="bg-teal-600 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-2">
+                    <i class="fas fa-heartbeat text-3xl"></i>
+                    <h1 class="text-2xl font-bold">MediScan</h1>
+                </div>
+                <nav class="hidden md:flex space-x-6">
+                    <a href="#" class="hover:text-teal-200 transition">Home</a>
+                    <a href="#" class="hover:text-teal-200 transition">About</a>
+                    <a href="#" class="hover:text-teal-200 transition">Services</a>
+                    <a href="#" class="hover:text-teal-200 transition">Contact</a>
+                </nav>
+                <button class="md:hidden text-2xl">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="bg-gradient-to-r from-teal-500 to-teal-700 text-white py-16">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-4xl md:text-5xl font-bold mb-6">Access Medical Information Instantly</h2>
+            <p class="text-xl mb-8 max-w-3xl mx-auto">Scan QR codes on medical products, prescriptions, or patient IDs to get instant access to vital health information.</p>
+            <button id="startScanBtn" class="bg-white text-teal-700 font-bold py-3 px-8 rounded-full hover:bg-teal-100 transition duration-300 shadow-lg animate-pulse-slow">
+                <i class="fas fa-qrcode mr-2"></i> Start Scanning
+            </button>
+        </div>
+    </section>
+    <!-- How It Works Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How It Works</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Step 1 -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="bg-teal-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <span class="text-teal-700 text-2xl font-bold">1</span>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3 text-center text-gray-800">Grant Camera Access</h3>
+                    <p class="text-gray-600">When prompted, allow MediScan to access your device's camera. We only use this to scan QR codes and don't store any images.</p>
+                </div>
+                <!-- Step 2 -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="bg-teal-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <span class="text-teal-700 text-2xl font-bold">2</span>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3 text-center text-gray-800">Scan the QR Code</h3>
+                    <p class="text-gray-600">Point your camera at the medical QR code. Hold steady until the code is recognized (usually within seconds).</p>
+                </div>
+                <!-- Step 3 -->
+                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="bg-teal-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <span class="text-teal-700 text-2xl font-bold">3</span>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3 text-center text-gray-800">Get Instant Information</h3>
+                    <p class="text-gray-600">View the medical information securely. This could be patient records, medication details, or product information.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Scanner Modal -->
+    <div id="scannerModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex-col items-center justify-center p-4">
+        <div class="w-full max-w-md">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold text-white">Scan Medical QR Code</h3>
+                <button id="closeScannerBtn" class="text-white text-2xl">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="scanner-frame relative">
+                <video id="scannerVideo" class="w-full h-auto rounded-lg" playsinline></video>
+                <div class="scanner-overlay rounded-lg"></div>
+            </div>
+            <div class="mt-6 text-center text-white">
+                <p class="mb-4">Point your camera at a medical QR code. Make sure it's well-lit and within the frame.</p>
+                <div class="flex justify-center space-x-4">
+                    <button id="toggleTorchBtn" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-full">
+                        <i class="fas fa-lightbulb mr-2"></i> Torch
+                    </button>
+                    <button id="switchCameraBtn" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-full">
+                        <i class="fas fa-camera-retro mr-2"></i> Switch Camera
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Camera Permission Guide -->
+    <section class="py-16 bg-gray-100">
+        <div class="container mx-auto px-4">
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto">
+                <div class="md:flex">
+                    <div class="md:w-1/2 bg-teal-600 text-white p-8 flex items-center">
+                        <div>
+                            <h2 class="text-3xl font-bold mb-4">Camera Access Guide</h2>
+                            <p class="mb-6">We need camera access to scan QR codes, but we respect your privacy. Here's how to grant permission:</p>
+                            <div class="space-y-4">
+                                <div class="flex items-start space-x-3">
+                                    <i class="fas fa-mobile-alt mt-1"></i>
+                                    <div>
+                                        <h4 class="font-semibold">On Mobile Devices</h4>
+                                        <p class="text-sm">Tap "Allow" when the browser asks for camera permission.</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-start space-x-3">
+                                    <i class="fas fa-lock mt-1"></i>
+                                    <div>
+                                        <h4 class="font-semibold">Privacy Assurance</h4>
+                                        <p class="text-sm">We don't store or transmit any images from your camera.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="md:w-1/2 p-8">
+                        <h3 class="text-xl font-semibold mb-4 text-gray-800">Troubleshooting</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-start space-x-3">
+                                <i class="fas fa-exclamation-triangle text-yellow-500 mt-1"></i>
+                                <div>
+                                    <h4 class="font-semibold">Permission Denied?</h4>
+                                    <p class="text-sm text-gray-600">Go to your browser settings and enable camera access for this site.</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start space-x-3">
+                                <i class="fas fa-question-circle text-blue-500 mt-1"></i>
+                                <div>
+                                    <h4 class="font-semibold">Can't Scan?</h4>
+                                    <p class="text-sm text-gray-600">Ensure good lighting and hold the QR code steady in the frame.</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start space-x-3">
+                                <i class="fas fa-camera text-purple-500 mt-1"></i>
+                                <div>
+                                    <h4 class="font-semibold">No Camera?</h4>
+                                    <p class="text-sm text-gray-600">You can upload an image containing the QR code instead.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <button class="mt-6 w-full bg-teal-600 hover:bg-teal-700 text-white py-3 rounded-lg font-medium transition">
+                            <i class="fas fa-camera mr-2"></i> Try Scanning Again
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Use MediScan?</h2>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
+                    <div class="text-teal-600 text-3xl mb-4">
+                        <i class="fas fa-bolt"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Instant Access</h3>
+                    <p class="text-gray-600">Get immediate access to medical information without typing or searching.</p>
+                </div>
+                <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
+                    <div class="text-teal-600 text-3xl mb-4">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Secure</h3>
+                    <p class="text-gray-600">All data is encrypted and transmitted securely to protect patient privacy.</p>
+                </div>
+                <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
+                    <div class="text-teal-600 text-3xl mb-4">
+                        <i class="fas fa-mobile-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Mobile-Friendly</h3>
+                    <p class="text-gray-600">Optimized for all mobile devices with easy one-handed operation.</p>
+                </div>
+                <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
+                    <div class="text-teal-600 text-3xl mb-4">
+                        <i class="fas fa-history"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3 text-gray-800">History</h3>
+                    <p class="text-gray-600">View your scan history for quick reference (optional and encrypted).</p>
+                </div>
+                <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
+                    <div class="text-teal-600 text-3xl mb-4">
+                        <i class="fas fa-language"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Multi-Language</h3>
+                    <p class="text-gray-600">Supports multiple languages for international medical standards.</p>
+                </div>
+                <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
+                    <div class="text-teal-600 text-3xl mb-4">
+                        <i class="fas fa-bell"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Alerts</h3>
+                    <p class="text-gray-600">Get important alerts about medications or medical conditions.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4 flex items-center">
+                        <i class="fas fa-heartbeat mr-2"></i> MediScan
+                    </h3>
+                    <p class="text-gray-400">Providing instant access to medical information through secure QR code scanning technology.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Legal</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">HIPAA Compliance</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Contact Us</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> [email protected]</li>
+                        <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> (800) 555-HELP</li>
+                        <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> 123 Medical Way, Boston, MA</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                <p>&copy; 2023 MediScan. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <!-- QR Code Detected Modal -->
+    <div id="resultModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex-col items-center justify-center p-4">
+        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold text-gray-800">Scan Result</h3>
+                <button id="closeResultBtn" class="text-gray-500 hover:text-gray-700 text-2xl">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div id="scanResultContent" class="mb-6">
+                <!-- Dynamic content will be inserted here -->
+            </div>
+            <div class="flex justify-between">
+                <button id="newScanBtn" class="bg-teal-600 hover:bg-teal-700 text-white py-2 px-4 rounded-lg font-medium transition">
+                    <i class="fas fa-qrcode mr-2"></i> Scan Another
+                </button>
+                <button id="saveResultBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg font-medium transition">
+                    <i class="fas fa-save mr-2"></i> Save
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Elements
+            const startScanBtn = document.getElementById('startScanBtn');
+            const scannerModal = document.getElementById('scannerModal');
+            const closeScannerBtn = document.getElementById('closeScannerBtn');
+            const scannerVideo = document.getElementById('scannerVideo');
+            const toggleTorchBtn = document.getElementById('toggleTorchBtn');
+            const switchCameraBtn = document.getElementById('switchCameraBtn');
+            const resultModal = document.getElementById('resultModal');
+            const closeResultBtn = document.getElementById('closeResultBtn');
+            const newScanBtn = document.getElementById('newScanBtn');
+            const saveResultBtn = document.getElementById('saveResultBtn');
+            const scanResultContent = document.getElementById('scanResultContent');
+            // Variables
+            let stream = null;
+            let currentFacingMode = 'environment';
+            let torchEnabled = false;
+            let track = null;
+            // Start scanning
+            startScanBtn.addEventListener('click', async function() {
+                scannerModal.classList.remove('hidden');
+                document.body.style.overflow = 'hidden';
+                try {
+                    stream = await navigator.mediaDevices.getUserMedia({
+                        video: {
+                            facingMode: currentFacingMode,
+                            width: { ideal: 1280 },
+                            height: { ideal: 720 }
+                        }
+                    });
+                    scannerVideo.srcObject = stream;
+                    track = stream.getVideoTracks()[0];
+                    // Check if torch is available
+                    if ('torch' in track.getCapabilities()) {
+                        toggleTorchBtn.classList.remove('hidden');
+                    }
+                    // Start QR code detection
+                    detectQRCode();
+                } catch (error) {
+                    console.error('Error accessing camera:', error);
+                    alert('Could not access the camera. Please ensure you have granted camera permissions.');
+                    closeScanner();
+                }
+            });
+            // Close scanner
+            closeScannerBtn.addEventListener('click', closeScanner);
+            function closeScanner() {
+                if (stream) {
+                    stream.getTracks().forEach(track => track.stop());
+                }
+                scannerModal.classList.add('hidden');
+                document.body.style.overflow = 'auto';
+            }
+            // Toggle torch
+            toggleTorchBtn.addEventListener('click', function() {
+                if (!track) return;
+                try {
+                    torchEnabled = !torchEnabled;
+                    track.applyConstraints({
+                        advanced: [{torch: torchEnabled}]
+                    });
+                    toggleTorchBtn.innerHTML = torchEnabled
+                        ? '<i class="fas fa-lightbulb mr-2"></i> Torch On'
+                        : '<i class="fas fa-lightbulb mr-2"></i> Torch Off';
+                } catch (error) {
+                    console.error('Error toggling torch:', error);
+                }
+            });
+            // Switch camera
+            switchCameraBtn.addEventListener('click', async function() {
+                if (!stream) return;
+                currentFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
+                try {
+                    // Stop previous stream
+                    stream.getTracks().forEach(track => track.stop());
+                    // Get new stream
+                    stream = await navigator.mediaDevices.getUserMedia({
+                        video: {
+                            facingMode: currentFacingMode,
+                            width: { ideal: 1280 },
+                            height: { ideal: 720 }
+                        }
+                    });
+                    scannerVideo.srcObject = stream;
+                    track = stream.getVideoTracks()[0];
+                    // Reset torch
+                    torchEnabled = false;
+                    if ('torch' in track.getCapabilities()) {
+                        toggleTorchBtn.classList.remove('hidden');
+                        toggleTorchBtn.innerHTML = '<i class="fas fa-lightbulb mr-2"></i> Torch';
+                    } else {
+                        toggleTorchBtn.classList.add('hidden');
+                    }
+                } catch (error) {
+                    console.error('Error switching camera:', error);
+                }
+            });
+            // QR Code detection
+            function detectQRCode() {
+                // In a real implementation, you would use a QR code scanning library like jsQR
+                // This is a simplified simulation for demonstration purposes
+                // Simulate QR code detection after 3 seconds
+                setTimeout(() => {
+                    // Only show result if scanner is still open
+                    if (!scannerModal.classList.contains('hidden')) {
+                        showResult({
+                            type: "Medical QR",
+                            data: "Patient: John Doe\nMedication: Ibuprofen 200mg\nDosage: 1 tablet every 6 hours\nExpires: 12/2024\nLot: IBU12345",
+                            timestamp: new Date().toLocaleString()
+                        });
+                        closeScanner();
+                    }
+                }, 3000);
+            }
+            // Show scan result
+            function showResult(data) {
+                scanResultContent.innerHTML = `
+                    <div class="bg-teal-50 border-l-4 border-teal-600 p-4 mb-4">
+                        <h4 class="font-bold text-teal-800">${data.type}</h4>
+                        <p class="text-sm text-gray-600">Scanned at ${data.timestamp}</p>
+                    </div>
+                    <div class="bg-gray-100 p-4 rounded-lg">
+                        <pre class="text-sm whitespace-pre-wrap font-mono">${data.data}</pre>
+                    </div>
+                `;
+                resultModal.classList.remove('hidden');
+                document.body.style.overflow = 'hidden';
+            }
+            // Close result modal
+            closeResultBtn.addEventListener('click', function() {
+                resultModal.classList.add('hidden');
+                document.body.style.overflow = 'auto';
+            });
+            // New scan
+            newScanBtn.addEventListener('click', function() {
+                resultModal.classList.add('hidden');
+                startScanBtn.click();
+            });
+            // Save result
+            saveResultBtn.addEventListener('click', function() {
+                alert('Scan result saved to your history.');
+                resultModal.classList.add('hidden');
+                document.body.style.overflow = 'auto';
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mohabedalgani/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>