| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Verification | Rainbow Rendezvous</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #000000; |
| color: #FFFFFF; |
| } |
| .verification-container { |
| background: linear-gradient(180deg, #0A0A0A 0%, #000000 100%); |
| } |
| .verification-circle { |
| border: 3px dashed #F4C430; |
| background-color: rgba(244, 196, 48, 0.05); |
| } |
| .verification-btn { |
| background-color: #F4C430; |
| color: #000000; |
| box-shadow: 0 4px 15px rgba(244, 196, 48, 0.4); |
| } |
| .verification-btn:hover { |
| background-color: #F4C430; |
| transform: translateY(-2px); |
| } |
| .silhouette-overlay { |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 15c-10 0-15 5-15 15 0 5 5 10 5 15 0 5-5 10-5 15 0 10 10 25 15 25s15-15 15-25c0-5-5-10-5-15 0-5 5-10 5-15 0-10-5-15-15-15z" fill="none" stroke="%23F4C430" stroke-width="0.5"/></svg>'); |
| background-size: 60%; |
| background-position: center; |
| background-repeat: no-repeat; |
| opacity: 0.5; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen verification-container"> |
| <div class="max-w-md mx-auto min-h-screen flex flex-col px-6 py-12"> |
| <header class="mb-8"> |
| <div class="flex justify-center mb-6"> |
| <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center"> |
| <i data-feather="shield" class="text-black w-8 h-8"></i> |
| </div> |
| </div> |
| <h1 class="text-2xl font-bold text-center text-yellow-500 mb-2">Photo Verification</h1> |
| <p class="text-center text-white/80">Secure your profile and help protect our community</p> |
| </header> |
|
|
| <main class="flex-1 flex flex-col"> |
| <div class="relative mb-8"> |
| <div class="verification-circle w-full aspect-square rounded-full mx-auto overflow-hidden relative"> |
| <div class="absolute inset-0 silhouette-overlay"></div> |
| <video id="cameraFeed" autoplay playsinline class="w-full h-full object-cover"></video> |
| </div> |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center"> |
| <button id="flipCamera" class="bg-black/50 text-white p-2 rounded-full"> |
| <i data-feather="refresh-ccw" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="text-center mb-8"> |
| <h2 class="font-medium text-white mb-2">Follow these steps:</h2> |
| <div class="flex justify-center space-x-4 mb-4"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-yellow-500 text-black flex items-center justify-center mr-2">1</div> |
| <span class="text-sm">Remove sunglasses</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-yellow-500 text-black flex items-center justify-center mr-2">2</div> |
| <span class="text-sm">Face forward</span> |
| </div> |
| </div> |
| </div> |
| <button id="captureBtn" class="verification-btn py-4 px-6 rounded-full font-bold text-lg mb-4 transition-transform"> |
| Take Photo |
| </button> |
| <a href="index.html" class="text-white/60 text-center w-full py-2"> |
| Skip for now |
| </a> |
| </main> |
| </div> |
|
|
| <script> |
| |
| let currentFacingMode = "user"; |
| let stream = null; |
| |
| async function startCamera(facingMode = "user") { |
| try { |
| if (stream) { |
| stream.getTracks().forEach(track => track.stop()); |
| } |
| |
| stream = await navigator.mediaDevices.getUserMedia({ |
| video: { |
| facingMode: facingMode, |
| width: { ideal: 1280 }, |
| height: { ideal: 1280 } |
| }, |
| audio: false |
| }); |
| |
| const videoElement = document.getElementById('cameraFeed'); |
| videoElement.srcObject = stream; |
| currentFacingMode = facingMode; |
| } catch (err) { |
| console.error("Error accessing camera:", err); |
| alert("Could not access the camera. Please check permissions."); |
| } |
| } |
| |
| |
| document.getElementById('flipCamera').addEventListener('click', () => { |
| const newFacingMode = currentFacingMode === "user" ? "environment" : "user"; |
| startCamera(newFacingMode); |
| }); |
| |
| document.getElementById('captureBtn').addEventListener('click', async () => { |
| try { |
| const video = document.getElementById('cameraFeed'); |
| const canvas = document.createElement('canvas'); |
| canvas.width = video.videoWidth; |
| canvas.height = video.videoHeight; |
| const ctx = canvas.getContext('2d'); |
| ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
| |
| |
| canvas.toBlob((blob) => { |
| const formData = new FormData(); |
| formData.append('verification_photo', blob, 'verification.jpg'); |
| |
| |
| setTimeout(() => { |
| alert("Verification photo submitted successfully!"); |
| window.location.href = "index.html"; |
| }, 1000); |
| }, 'image/jpeg', 0.9); |
| |
| } catch (err) { |
| console.error("Error capturing photo:", err); |
| alert("Couldn't capture photo. Please try again."); |
| } |
| }); |
| |
| window.addEventListener('DOMContentLoaded', async () => { |
| try { |
| await startCamera(); |
| feather.replace(); |
| } catch (err) { |
| console.error("Camera initialization failed:", err); |
| |
| document.getElementById('captureBtn').disabled = true; |
| document.getElementById('captureBtn').textContent = "Camera Access Required"; |
| } |
| }); |
| |
| window.addEventListener('beforeunload', () => { |
| if (stream) { |
| stream.getTracks().forEach(track => track.stop()); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
