https://dollystickercam.netlify.app/

1<!DOCTYPE html>
2<html lang="es">
3<head>
4    <meta charset="UTF-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=d59f0223-afcc-443e-bc4d-711d0940c241
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>Dollysticker cam</title>
10    <link rel="icon" type="image/gif" href="iconoweb/iconlogo.png">
11     <link rel="preconnect" href="https://fonts.googleapis.com">
12  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13  <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
14    <style>
15
16
17        body {
18            text-align: center;
19            font-family: 'Nunito', sans-serif;
20            background-image: url(fondoweb/portadafinal.gif);
21            background-size: cover;
22            background-position: center;
23            background-attachment: fixed;
24            margin: 0;
25            overflow: hidden; /* Evita el scroll del body cuando el modal está abierto */
26        }
27
28        .boton-imagen {
29            background: none;
30            border: none;
31            padding: 0;
32            cursor: pointer;
33            margin-top: 20px;
34            position: fixed;
35        }
36
37        .boton-imagen img {
38            display: block;
39            max-width: 250px;
40            height: auto;
41        }
42
43        /* Primer botón */
44        .boton-principal {
45            right: 270px;
46            top: 370px;
47        }
48
49
50        /* Tercer botón */
51        .boton-terciario {
52            right: 270px;
53            top: 470px;
54        }
55
56        /* --- Estilos CSS para el cartel emergente (modal) --- */
57        .modal {
58            display: none; /* Oculto por defecto */
59            position: fixed; /* Posición fija en la pantalla */
60            z-index: 1000; /* Asegura que esté por encima de otros elementos */
61            left: 0;
62            top: 0;
63            width: 100%; /* Cubre todo el ancho */
64            height: 100%; /* Cubre toda la altura */
65            overflow: auto; /* Permite scroll si el contenido es grande */
66            background-color: rgba(0,0,0,0.4); /* Fondo semi-transparente oscuro */
67            display: flex; /* Para centrar el contenido */
68            justify-content: center; /* Centrar horizontalmente */
69            align-items: center; /* Centrar verticalmente */
70        }
71

72        .modal-content {
73            background-color: #fefefe; /* Fondo base del cartel (si la imagen no carga o es transparente) */
74            background-image: url(https://i.pinimg.com/736x/a2/09/10/a20910e16326b31316102176b38cc99e.jpg); /* **REEMPLAZA ESTO CON LA URL DE TU IMAGEN DE FONDO DEL CARTEL** */
75            background-size: cover; /* Ajusta la imagen para cubrir el fondo */
76            background-position: center; /* Centra la imagen en el fondo */
77            margin: auto; /* Centrar el bloque */
78            padding: 20px;
79            border: 1px solid #888;
80            width: 80%; /* Ancho del cartel */
81            max-width: 500px; /* Ancho máximo para evitar que sea demasiado grande */
82            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
83            animation-name: animatetop;
84            animation-duration: 0.4s;
85            text-align: center; /* Centra el texto */
86            border-radius: 8px; /* Bordes ligeramente redondeados */
87        }
88
89        /* Animación para que el cartel aparezca suavemente */
90        @keyframes animatetop {
91            from {top: -300px; opacity: 0}
92            to {top: 0; opacity: 1}
93        }
94
95        .close-button {
96            color: #ff48a4a9;
97            float: right; /* Volvemos a flotar a la derecha para posicionarlo en la esquina superior */
98            font-size: 28px;
99            font-weight: bold;
100            cursor: pointer; /* Indica que es clickeable */
101            text-shadow: 1px 1px black; /* Sombra negra para el botón de cerrar */
102        }
103
104        .close-button:hover,
105        .close-button:focus {
106            color: black;
107            text-decoration: none;
108            cursor: pointer;
109        }
110
111        /* Estilos del texto dentro del cartel */

112        .modal-content p {
113            font-size: 1.2em; /* Aseguramos el tamaño de fuente para el texto */
114            text-shadow: 1px 1px black; /* Sombra negra para el texto */
115            color: rgb(255, 82, 168); /* Color rosado para el texto */
116            margin-top: 15px; /* Pequeño margen superior para separar del botón de cerrar */
117            margin-bottom: 0; /* Quita el margen inferior por defecto si está al final del contenido */
118            line-height: 1.4; /* Espaciado entre líneas para mejor lectura */
119        }
120        /* --- Fin de Estilos CSS para el cartel emergente --- */
121      
122
123    </style>
124</head>
125<body>
126
127
128    <style type="text/css">* {cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym759.ani), url(https://ani.cursors-4u.net/symbols/sym-8/sym759.png), auto !important;}</style>
129    <a href="https://www.cursors-4u.com/cursor/2014/03/25/pink-spinning-heart-within-a-heart.html" target="_blank" title="Pink Spinning Heart Within A Heart"><img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="Pink Spinning Heart Within A Heart" style="position:absolute; top: 0px; right: 0px;" /></a>
130
131    <a href="https://dollystickercam.netlify.app/webcam">
132        <button class="boton-imagen boton-principal" onclick="playClickSound()">
133            <img src="botones portada/bt camara.png" alt="Ir a la página principal">
134        </button>
135    </a>
136
137
138    <a href='/tutorial'>
139        <button class="boton-imagen boton-terciario">
140            <img src="botones portada/bt tutorial.png" alt="Ir a la tercera página">
141        </button>
142    </a>
143
144    <div id="myModal" class="modal">
145        <div class="modal-content">
146            <span class="close-button">&times;</span>
147            <p><b>NOTA:</b></p>
148            <p> <b>Ajusta el tamaño de la página al 75%, en los ajustes de tu navegador (zoom). Si no lo haces, es probable que veas algunos elementos más grandes en tu pantalla. </b></p>
149            <p> <b>✖ No funciona en dispositivos moviles, solo en pc/laptop! ✔</b></p>
150            <p style="font-size: 0.9em;">©All rights reserved. Dollysticker Cam 2025, a creation by Kcandyarts.</p>
151        </div>
152    </div>
153
154    

154<script>
155        function playClickSound() {
156            const audio = document.getElementById('clickSound'); // Asegúrate de que exista un <audio id="clickSound"> en tu HTML
157            if (audio) {
158                audio.currentTime = 0; // Reinicia el audio al principio cada vez que se presiona
159                audio.play().catch(e => {
160                    console.error("Error al intentar reproducir el audio:", e);
161                    // Considera informar al usuario si el navegador bloquea el autoplay de sonido
162                });
163            } else {
164                console.warn("Elemento de audio con ID 'clickSound' no encontrado.");
165            }
166        }
167    </script>

167
168
169    

169<script>
170        document.addEventListener('DOMContentLoaded', (event) => {
171            var modal = document.getElementById("myModal");
172            var span = document.getElementsByClassName("close-button")[0];
173            var body = document.body; // Referencia al body para controlar el scroll
174
175            // Mostrar el modal cuando la página cargue
176            modal.style.display = "flex";
177            body.style.overflow = "hidden"; // Bloquea el scroll de la página principal
178
179            // Cuando el usuario hace clic en <span> (x), cerrar el modal
180            span.onclick = function() {
181                modal.style.display = "none";
182                body.style.overflow = "auto"; // Restaura el scroll del body
183            }
184
185            // Cuando el usuario hace clic fuera del modal, cerrarlo
186            window.onclick = function(event) {
187                if (event.target == modal) {
188                    modal.style.display = "none";
189                    body.style.overflow = "auto"; // Restaura el scroll del body
190                }
191            }
192        });
193    </script>

193
194
195</body>
196</html>