Spaces:
Running
Running
Enerbook es un market palace Que conectas clientes que buscan paneles solares con instaladores solares, requiero una homoage con dos botones principales para que en uno pidan subir archivos ya sea pdf o imagen y en el otro botón puedan tomar foto - Initial Deployment
Browse files- README.md +7 -5
- index.html +371 -19
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: homepage
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: blue
|
| 5 |
+
colorTo: blue
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,371 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="es">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Enerbook - Conectando clientes con instaladores solares</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
/* Custom styles for the camera interface */
|
| 11 |
+
#cameraModal {
|
| 12 |
+
transition: all 0.3s ease;
|
| 13 |
+
}
|
| 14 |
+
|
| 15 |
+
#cameraView {
|
| 16 |
+
width: 100%;
|
| 17 |
+
max-width: 500px;
|
| 18 |
+
height: auto;
|
| 19 |
+
background: #000;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
#cameraControls {
|
| 23 |
+
background: rgba(0,0,0,0.7);
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.file-upload {
|
| 27 |
+
display: none;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.upload-label {
|
| 31 |
+
cursor: pointer;
|
| 32 |
+
display: flex;
|
| 33 |
+
align-items: center;
|
| 34 |
+
justify-content: center;
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
/* Animation for buttons */
|
| 38 |
+
@keyframes pulse {
|
| 39 |
+
0% { transform: scale(1); }
|
| 40 |
+
50% { transform: scale(1.05); }
|
| 41 |
+
100% { transform: scale(1); }
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.pulse:hover {
|
| 45 |
+
animation: pulse 1.5s infinite;
|
| 46 |
+
}
|
| 47 |
+
</style>
|
| 48 |
+
</head>
|
| 49 |
+
<body class="bg-gradient-to-b from-blue-50 to-white min-h-screen">
|
| 50 |
+
<!-- Header -->
|
| 51 |
+
<header class="bg-white shadow-sm">
|
| 52 |
+
<div class="container mx-auto px-4 py-6">
|
| 53 |
+
<div class="flex justify-between items-center">
|
| 54 |
+
<div class="flex items-center space-x-2">
|
| 55 |
+
<i class="fas fa-solar-panel text-3xl text-yellow-500"></i>
|
| 56 |
+
<h1 class="text-2xl font-bold text-gray-800">Enerbook</h1>
|
| 57 |
+
</div>
|
| 58 |
+
<nav class="hidden md:flex space-x-8">
|
| 59 |
+
<a href="#" class="text-gray-600 hover:text-yellow-500 font-medium">Inicio</a>
|
| 60 |
+
<a href="#" class="text-gray-600 hover:text-yellow-500 font-medium">Cómo funciona</a>
|
| 61 |
+
<a href="#" class="text-gray-600 hover:text-yellow-500 font-medium">Instaladores</a>
|
| 62 |
+
<a href="#" class="text-gray-600 hover:text-yellow-500 font-medium">Contacto</a>
|
| 63 |
+
</nav>
|
| 64 |
+
<button class="md:hidden text-gray-600">
|
| 65 |
+
<i class="fas fa-bars text-2xl"></i>
|
| 66 |
+
</button>
|
| 67 |
+
</div>
|
| 68 |
+
</div>
|
| 69 |
+
</header>
|
| 70 |
+
|
| 71 |
+
<!-- Hero Section -->
|
| 72 |
+
<section class="py-12 md:py-20">
|
| 73 |
+
<div class="container mx-auto px-4">
|
| 74 |
+
<div class="max-w-4xl mx-auto text-center">
|
| 75 |
+
<h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
|
| 76 |
+
Conectamos tu hogar con <span class="text-yellow-500">energía solar</span>
|
| 77 |
+
</h2>
|
| 78 |
+
<p class="text-xl text-gray-600 mb-10">
|
| 79 |
+
Sube los documentos de tu propiedad o toma una foto para que nuestros instaladores puedan ofrecerte la mejor solución solar.
|
| 80 |
+
</p>
|
| 81 |
+
|
| 82 |
+
<!-- Action Buttons -->
|
| 83 |
+
<div class="flex flex-col md:flex-row justify-center gap-6 mb-16">
|
| 84 |
+
<!-- Upload Button -->
|
| 85 |
+
<label for="fileUpload" class="upload-label">
|
| 86 |
+
<div class="pulse bg-white hover:bg-gray-50 border-2 border-yellow-500 text-yellow-500 font-bold py-4 px-8 rounded-full shadow-lg transition-all duration-300 flex items-center gap-3">
|
| 87 |
+
<i class="fas fa-cloud-upload-alt text-2xl"></i>
|
| 88 |
+
<span>Subir archivos</span>
|
| 89 |
+
</div>
|
| 90 |
+
</label>
|
| 91 |
+
<input type="file" id="fileUpload" class="file-upload" accept=".pdf,.jpg,.jpeg,.png" multiple>
|
| 92 |
+
|
| 93 |
+
<!-- Camera Button -->
|
| 94 |
+
<button id="openCameraBtn" class="pulse bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 px-8 rounded-full shadow-lg transition-all duration-300 flex items-center gap-3">
|
| 95 |
+
<i class="fas fa-camera text-2xl"></i>
|
| 96 |
+
<span>Tomar foto</span>
|
| 97 |
+
</button>
|
| 98 |
+
</div>
|
| 99 |
+
|
| 100 |
+
<div class="flex justify-center">
|
| 101 |
+
<div class="bg-white p-6 rounded-xl shadow-md max-w-md">
|
| 102 |
+
<h3 class="text-lg font-semibold text-gray-800 mb-3">¿Qué necesitamos?</h3>
|
| 103 |
+
<ul class="text-gray-600 space-y-2">
|
| 104 |
+
<li class="flex items-start">
|
| 105 |
+
<i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i>
|
| 106 |
+
<span>Facturas de electricidad (PDF o foto)</span>
|
| 107 |
+
</li>
|
| 108 |
+
<li class="flex items-start">
|
| 109 |
+
<i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i>
|
| 110 |
+
<span>Fotos de tu tejado o área de instalación</span>
|
| 111 |
+
</li>
|
| 112 |
+
<li class="flex items-start">
|
| 113 |
+
<i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i>
|
| 114 |
+
<span>Plano de tu propiedad (opcional)</span>
|
| 115 |
+
</li>
|
| 116 |
+
</ul>
|
| 117 |
+
</div>
|
| 118 |
+
</div>
|
| 119 |
+
</div>
|
| 120 |
+
</div>
|
| 121 |
+
</section>
|
| 122 |
+
|
| 123 |
+
<!-- How it Works Section -->
|
| 124 |
+
<section class="py-12 bg-gray-50">
|
| 125 |
+
<div class="container mx-auto px-4">
|
| 126 |
+
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">¿Cómo funciona?</h2>
|
| 127 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 128 |
+
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
| 129 |
+
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
| 130 |
+
<i class="fas fa-upload text-2xl text-yellow-500"></i>
|
| 131 |
+
</div>
|
| 132 |
+
<h3 class="text-xl font-semibold text-center mb-3">1. Sube tus documentos</h3>
|
| 133 |
+
<p class="text-gray-600 text-center">Comparte información sobre tu propiedad y consumo energético.</p>
|
| 134 |
+
</div>
|
| 135 |
+
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
| 136 |
+
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
| 137 |
+
<i class="fas fa-bolt text-2xl text-blue-500"></i>
|
| 138 |
+
</div>
|
| 139 |
+
<h3 class="text-xl font-semibold text-center mb-3">2. Recibe propuestas</h3>
|
| 140 |
+
<p class="text-gray-600 text-center">Instaladores calificados te enviarán cotizaciones personalizadas.</p>
|
| 141 |
+
</div>
|
| 142 |
+
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
| 143 |
+
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
| 144 |
+
<i class="fas fa-solar-panel text-2xl text-green-500"></i>
|
| 145 |
+
</div>
|
| 146 |
+
<h3 class="text-xl font-semibold text-center mb-3">3. Instala tu sistema</h3>
|
| 147 |
+
<p class="text-gray-600 text-center">Elige la mejor opción y comienza a ahorrar con energía solar.</p>
|
| 148 |
+
</div>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
</section>
|
| 152 |
+
|
| 153 |
+
<!-- Camera Modal -->
|
| 154 |
+
<div id="cameraModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center hidden">
|
| 155 |
+
<div class="bg-white rounded-lg overflow-hidden w-full max-w-2xl">
|
| 156 |
+
<div class="flex justify-between items-center bg-gray-800 text-white p-4">
|
| 157 |
+
<h3 class="text-lg font-semibold">Tomar foto de tu propiedad</h3>
|
| 158 |
+
<button id="closeCameraBtn" class="text-white hover:text-gray-300">
|
| 159 |
+
<i class="fas fa-times"></i>
|
| 160 |
+
</button>
|
| 161 |
+
</div>
|
| 162 |
+
|
| 163 |
+
<div class="p-4">
|
| 164 |
+
<video id="cameraView" autoplay playsinline class="mx-auto rounded-lg"></video>
|
| 165 |
+
<canvas id="photoCanvas" class="hidden"></canvas>
|
| 166 |
+
|
| 167 |
+
<div id="cameraControls" class="flex justify-center space-x-6 mt-4 p-4 rounded-lg">
|
| 168 |
+
<button id="takePhotoBtn" class="w-16 h-16 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white">
|
| 169 |
+
<i class="fas fa-camera text-2xl"></i>
|
| 170 |
+
</button>
|
| 171 |
+
<button id="switchCameraBtn" class="w-12 h-12 bg-gray-600 hover:bg-gray-700 rounded-full flex items-center justify-center text-white">
|
| 172 |
+
<i class="fas fa-sync-alt"></i>
|
| 173 |
+
</button>
|
| 174 |
+
</div>
|
| 175 |
+
|
| 176 |
+
<div id="photoPreview" class="hidden mt-4 text-center">
|
| 177 |
+
<img id="capturedPhoto" src="" alt="Foto capturada" class="mx-auto max-h-64 rounded-lg border border-gray-200">
|
| 178 |
+
<div class="flex justify-center space-x-4 mt-4">
|
| 179 |
+
<button id="retakePhotoBtn" class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg">
|
| 180 |
+
<i class="fas fa-redo mr-2"></i>Volver a tomar
|
| 181 |
+
</button>
|
| 182 |
+
<button id="acceptPhotoBtn" class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg">
|
| 183 |
+
<i class="fas fa-check mr-2"></i>Aceptar foto
|
| 184 |
+
</button>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
</div>
|
| 190 |
+
|
| 191 |
+
<!-- Upload Success Modal -->
|
| 192 |
+
<div id="uploadSuccessModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center hidden">
|
| 193 |
+
<div class="bg-white rounded-lg p-6 max-w-md mx-4 text-center">
|
| 194 |
+
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto">
|
| 195 |
+
<i class="fas fa-check text-3xl text-green-500"></i>
|
| 196 |
+
</div>
|
| 197 |
+
<h3 class="text-2xl font-bold text-gray-800 mb-2">¡Archivos subidos!</h3>
|
| 198 |
+
<p class="text-gray-600 mb-6">Hemos recibido tus documentos. Los instaladores solares se pondrán en contacto contigo pronto con sus propuestas.</p>
|
| 199 |
+
<button id="closeSuccessModal" class="px-6 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg font-medium">
|
| 200 |
+
Entendido
|
| 201 |
+
</button>
|
| 202 |
+
</div>
|
| 203 |
+
</div>
|
| 204 |
+
|
| 205 |
+
<!-- Footer -->
|
| 206 |
+
<footer class="bg-gray-800 text-white py-12">
|
| 207 |
+
<div class="container mx-auto px-4">
|
| 208 |
+
<div class="grid md:grid-cols-4 gap-8">
|
| 209 |
+
<div>
|
| 210 |
+
<h3 class="text-xl font-bold mb-4 flex items-center">
|
| 211 |
+
<i class="fas fa-solar-panel mr-2 text-yellow-400"></i> Enerbook
|
| 212 |
+
</h3>
|
| 213 |
+
<p class="text-gray-400">Conectando hogares con energía solar sostenible desde 2023.</p>
|
| 214 |
+
</div>
|
| 215 |
+
<div>
|
| 216 |
+
<h4 class="text-lg font-semibold mb-4">Enlaces</h4>
|
| 217 |
+
<ul class="space-y-2">
|
| 218 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400">Inicio</a></li>
|
| 219 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400">Cómo funciona</a></li>
|
| 220 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400">Instaladores</a></li>
|
| 221 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400">Contacto</a></li>
|
| 222 |
+
</ul>
|
| 223 |
+
</div>
|
| 224 |
+
<div>
|
| 225 |
+
<h4 class="text-lg font-semibold mb-4">Legal</h4>
|
| 226 |
+
<ul class="space-y-2">
|
| 227 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400">Términos y condiciones</a></li>
|
| 228 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400">Política de privacidad</a></li>
|
| 229 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400">Cookies</a></li>
|
| 230 |
+
</ul>
|
| 231 |
+
</div>
|
| 232 |
+
<div>
|
| 233 |
+
<h4 class="text-lg font-semibold mb-4">Contacto</h4>
|
| 234 |
+
<ul class="space-y-2 text-gray-400">
|
| 235 |
+
<li class="flex items-center"><i class="fas fa-envelope mr-2 text-yellow-400"></i> info@enerbook.com</li>
|
| 236 |
+
<li class="flex items-center"><i class="fas fa-phone mr-2 text-yellow-400"></i> +1 234 567 890</li>
|
| 237 |
+
<li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-yellow-400"></i> Ciudad Solar, País</li>
|
| 238 |
+
</ul>
|
| 239 |
+
</div>
|
| 240 |
+
</div>
|
| 241 |
+
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
|
| 242 |
+
<p>© 2023 Enerbook. Todos los derechos reservados.</p>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
</footer>
|
| 246 |
+
|
| 247 |
+
<script>
|
| 248 |
+
// Camera functionality
|
| 249 |
+
const cameraModal = document.getElementById('cameraModal');
|
| 250 |
+
const openCameraBtn = document.getElementById('openCameraBtn');
|
| 251 |
+
const closeCameraBtn = document.getElementById('closeCameraBtn');
|
| 252 |
+
const cameraView = document.getElementById('cameraView');
|
| 253 |
+
const takePhotoBtn = document.getElementById('takePhotoBtn');
|
| 254 |
+
const switchCameraBtn = document.getElementById('switchCameraBtn');
|
| 255 |
+
const photoCanvas = document.getElementById('photoCanvas');
|
| 256 |
+
const photoPreview = document.getElementById('photoPreview');
|
| 257 |
+
const capturedPhoto = document.getElementById('capturedPhoto');
|
| 258 |
+
const retakePhotoBtn = document.getElementById('retakePhotoBtn');
|
| 259 |
+
const acceptPhotoBtn = document.getElementById('acceptPhotoBtn');
|
| 260 |
+
const uploadSuccessModal = document.getElementById('uploadSuccessModal');
|
| 261 |
+
const closeSuccessModal = document.getElementById('closeSuccessModal');
|
| 262 |
+
const fileUpload = document.getElementById('fileUpload');
|
| 263 |
+
|
| 264 |
+
let stream = null;
|
| 265 |
+
let facingMode = "environment"; // Default to rear camera
|
| 266 |
+
|
| 267 |
+
// Open camera modal
|
| 268 |
+
openCameraBtn.addEventListener('click', async () => {
|
| 269 |
+
cameraModal.classList.remove('hidden');
|
| 270 |
+
document.body.style.overflow = 'hidden';
|
| 271 |
+
|
| 272 |
+
try {
|
| 273 |
+
stream = await navigator.mediaDevices.getUserMedia({
|
| 274 |
+
video: {
|
| 275 |
+
facingMode: facingMode,
|
| 276 |
+
width: { ideal: 1280 },
|
| 277 |
+
height: { ideal: 720 }
|
| 278 |
+
},
|
| 279 |
+
audio: false
|
| 280 |
+
});
|
| 281 |
+
cameraView.srcObject = stream;
|
| 282 |
+
} catch (err) {
|
| 283 |
+
console.error("Error accessing camera: ", err);
|
| 284 |
+
alert("No se pudo acceder a la cámara. Por favor, asegúrate de haber dado los permisos necesarios.");
|
| 285 |
+
closeCamera();
|
| 286 |
+
}
|
| 287 |
+
});
|
| 288 |
+
|
| 289 |
+
// Close camera modal
|
| 290 |
+
closeCameraBtn.addEventListener('click', closeCamera);
|
| 291 |
+
|
| 292 |
+
function closeCamera() {
|
| 293 |
+
if (stream) {
|
| 294 |
+
stream.getTracks().forEach(track => track.stop());
|
| 295 |
+
}
|
| 296 |
+
cameraModal.classList.add('hidden');
|
| 297 |
+
document.body.style.overflow = 'auto';
|
| 298 |
+
photoPreview.classList.add('hidden');
|
| 299 |
+
cameraView.classList.remove('hidden');
|
| 300 |
+
}
|
| 301 |
+
|
| 302 |
+
// Take photo
|
| 303 |
+
takePhotoBtn.addEventListener('click', () => {
|
| 304 |
+
const context = photoCanvas.getContext('2d');
|
| 305 |
+
photoCanvas.width = cameraView.videoWidth;
|
| 306 |
+
photoCanvas.height = cameraView.videoHeight;
|
| 307 |
+
context.drawImage(cameraView, 0, 0, photoCanvas.width, photoCanvas.height);
|
| 308 |
+
|
| 309 |
+
capturedPhoto.src = photoCanvas.toDataURL('image/png');
|
| 310 |
+
cameraView.classList.add('hidden');
|
| 311 |
+
photoPreview.classList.remove('hidden');
|
| 312 |
+
});
|
| 313 |
+
|
| 314 |
+
// Retake photo
|
| 315 |
+
retakePhotoBtn.addEventListener('click', () => {
|
| 316 |
+
cameraView.classList.remove('hidden');
|
| 317 |
+
photoPreview.classList.add('hidden');
|
| 318 |
+
});
|
| 319 |
+
|
| 320 |
+
// Accept photo
|
| 321 |
+
acceptPhotoBtn.addEventListener('click', () => {
|
| 322 |
+
closeCamera();
|
| 323 |
+
// Here you would typically upload the photo to your server
|
| 324 |
+
// For demo purposes, we'll just show the success modal
|
| 325 |
+
setTimeout(() => {
|
| 326 |
+
uploadSuccessModal.classList.remove('hidden');
|
| 327 |
+
document.body.style.overflow = 'hidden';
|
| 328 |
+
}, 500);
|
| 329 |
+
});
|
| 330 |
+
|
| 331 |
+
// Switch camera
|
| 332 |
+
switchCameraBtn.addEventListener('click', async () => {
|
| 333 |
+
facingMode = facingMode === "user" ? "environment" : "user";
|
| 334 |
+
|
| 335 |
+
if (stream) {
|
| 336 |
+
stream.getTracks().forEach(track => track.stop());
|
| 337 |
+
}
|
| 338 |
+
|
| 339 |
+
try {
|
| 340 |
+
stream = await navigator.mediaDevices.getUserMedia({
|
| 341 |
+
video: {
|
| 342 |
+
facingMode: facingMode,
|
| 343 |
+
width: { ideal: 1280 },
|
| 344 |
+
height: { ideal: 720 }
|
| 345 |
+
},
|
| 346 |
+
audio: false
|
| 347 |
+
});
|
| 348 |
+
cameraView.srcObject = stream;
|
| 349 |
+
} catch (err) {
|
| 350 |
+
console.error("Error switching camera: ", err);
|
| 351 |
+
}
|
| 352 |
+
});
|
| 353 |
+
|
| 354 |
+
// Close success modal
|
| 355 |
+
closeSuccessModal.addEventListener('click', () => {
|
| 356 |
+
uploadSuccessModal.classList.add('hidden');
|
| 357 |
+
document.body.style.overflow = 'auto';
|
| 358 |
+
});
|
| 359 |
+
|
| 360 |
+
// File upload handling
|
| 361 |
+
fileUpload.addEventListener('change', (e) => {
|
| 362 |
+
if (e.target.files.length > 0) {
|
| 363 |
+
// Here you would typically upload the files to your server
|
| 364 |
+
// For demo purposes, we'll just show the success modal
|
| 365 |
+
uploadSuccessModal.classList.remove('hidden');
|
| 366 |
+
document.body.style.overflow = 'hidden';
|
| 367 |
+
}
|
| 368 |
+
});
|
| 369 |
+
</script>
|
| 370 |
+
<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=VictorVarac/homepage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 371 |
+
</html>
|