Volver a la página principal

Nuestros Modelos

Opción 1 XV Años - Neon Euphoria

clic para ver

Solicitar más información

Opción 2 XV Años - Rose Gold

clic para ver

Solicitar más información

Opción 3 Bautizo - Celestial

clic para ver

Solicitar más información

Opción 4 Modelo Base

clic para ver

Solicitar más información

Opción 5 XV Años - Estilo Moderno

clic para ver

Solicitar más información

Opción 6 XV Años - Estilo Floral

clic para ver

Solicitar más información

Opción 7 Boda - Golden Eternity

clic para ver

Solicitar más información

Opción 8 Boda - Boho Rustic

clic para ver

Solicitar más información

Opción 9 Boda - Midnight Gala

clic para ver

Solicitar más información

Volver a la página principal

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sofía | Mis XV Años</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Orbitron:wght@500&family=Pinyon+Script&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        :root { --bg: #050505; --primary: #d600ff; --secondary: #00e5ff; --text: #ffffff; --glass: rgba(20, 20, 20, 0.85); --border: 1px solid rgba(255, 255, 255, 0.15); --gradient: linear-gradient(45deg, var(--primary), var(--secondary)); }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Montserrat', sans-serif; background-color: var(--bg); color: var(--text); overflow-x: hidden; }
        .neon-text { font-family: 'Pinyon Script', cursive; color: #fff; text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 40px var(--primary); }
        .modern-font { font-family: 'Orbitron', sans-serif; letter-spacing: 2px; }
        .music-player { position: fixed; top: 20px; right: 20px; z-index: 1000; width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); border: 1px solid var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 15px var(--primary); }
        .music-player i { color: #fff; } .spin { animation: spin 4s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } }
        header { height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
        .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover no-repeat; z-index: 1; animation: kenburns 20s infinite alternate; }
        .hero-overlay { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 2; background: linear-gradient(rgba(5, 5, 5, 0.6), rgba(5, 5, 5, 0.8)), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhZWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg=='); background-size: cover, 4px 4px; animation: gridMove 60s linear infinite; }
        @keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.2) translate(-20px, -10px); } }
        @keyframes gridMove { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(-50px, -50px) rotate(2deg); } }
        .hero-content { position: relative; z-index: 3; padding: 20px; }
        .main-title { font-size: 5rem; margin: 10px 0; line-height: 1; }
        section { padding: 60px 20px; max-width: 800px; margin: 0 auto; text-align: center; }
        .card { background: var(--glass); border: var(--border); border-radius: 20px; padding: 30px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); backdrop-filter: blur(10px); position: relative; overflow: hidden; }
        .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gradient); }
        .countdown { display: flex; justify-content: center; gap: 15px; margin-top: 20px; flex-wrap: wrap;}
        .time-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px; min-width: 75px; border: 1px solid rgba(255,255,255,0.1); }
        .time-box span { font-size: 1.8rem; font-weight: bold; color: var(--secondary); display: block; }
        .time-box small { font-size: 0.7rem; color: #aaa; text-transform: uppercase; }
        .btn { display: inline-block; padding: 12px 30px; margin-top: 15px; background: transparent; border: 1px solid var(--primary); color: #fff; border-radius: 30px; text-decoration: none; font-weight: bold; transition: 0.3s; text-transform: uppercase; font-size: 0.8rem; cursor: pointer; }
        .btn:hover { background: var(--primary); box-shadow: 0 0 20px var(--primary); }
        .btn-waze { border-color: #33ccff; color: #33ccff; } .btn-waze:hover { background: #33ccff; color: #000; box-shadow: 0 0 20px #33ccff; }
        .upload-area { border: 2px dashed var(--secondary); border-radius: 20px; padding: 40px 20px; position: relative; transition: 0.3s; background: rgba(0, 229, 255, 0.05); } .upload-area:hover { background: rgba(0, 229, 255, 0.1); }
        #preview-container { margin-top: 20px; display: none; } #preview-image { width: 100%; max-width: 300px; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
        #file-input { display: none; }
        .custom-file-label { display: inline-block; padding: 15px 40px; background: var(--gradient); color: #fff; border-radius: 50px; cursor: pointer; font-weight: bold; font-size: 1rem; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform 0.2s; } .custom-file-label:active { transform: scale(0.95); }
        #upload-status { display: none; margin-top: 15px; } .loader { border: 3px solid rgba(255,255,255,0.1); border-top: 3px solid var(--primary); border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; }
        .gift-box { text-align: left; padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); } .gift-box:last-child { border-bottom: none; } .copy-icon { cursor: pointer; margin-left: 10px; color: var(--secondary); }
        .rsvp-float { position: fixed; bottom: 30px; right: 30px; z-index: 100; width: 60px; height: 60px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; text-decoration: none; box-shadow: 0 0 20px rgba(37, 211, 102, 0.5); animation: pulse-green 2s infinite; }
        @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
        @media (max-width: 768px) { .main-title { font-size: 4rem; } section { padding: 40px 15px; } }
    </style>
</head>
<body>
    <audio id="bgMusic" loop><source src="https://invitationtocelebrate.com.mx/inviteejemplo/music/music.mp3" type="audio/mp3"></audio>
    <div class="music-player" onclick="toggleMusic()"><i class="fas fa-music"></i></div>
    <header>
        <div class="hero-bg"></div><div class="hero-overlay"></div>
        <div class="hero-content" data-aos="zoom-in" data-aos-duration="1500">
            <p class="modern-font" style="letter-spacing: 4px; color: var(--secondary);">MIS XV AÑOS</p>
            <h1 class="main-title neon-text">Sofía</h1><p class="modern-font" style="margin-top: 20px;">20 . NOVIEMBRE . 2025</p>
            <div style="margin-top: 40px;"><i class="fas fa-chevron-down bounce" style="font-size: 1.5rem; opacity: 0.7;"></i></div>
        </div>
    </header>
    <section>
        <div class="card" data-aos="fade-up">
            <h3 class="modern-font" style="margin-bottom: 20px;">Faltan</h3>
            <div class="countdown" id="countdown">
                <div class="time-box"><span id="days">00</span><small>Días</small></div><div class="time-box"><span id="hours">00</span><small>Hrs</small></div><div class="time-box"><span id="minutes">00</span><small>Min</small></div><div class="time-box"><span id="seconds">00</span><small>Seg</small></div>
            </div>
        </div>
    </section>
    <section>
        <h2 class="neon-text" style="font-size: 3rem; margin-bottom: 30px;">Ubicaciones</h2>
        <div class="card" data-aos="flip-left">
            <i class="fas fa-church" style="font-size: 3rem; color: var(--primary); margin-bottom: 15px;"></i><h3 class="modern-font">Ceremonia Religiosa</h3>
            <p style="color: #ccc; margin: 10px 0;">5:00 PM - Parroquia San Francisco</p>
            <a href="https://waze.com/ul" target="_blank" class="btn btn-waze"><i class="fab fa-waze"></i> Ir con Waze</a><a href="#" class="btn"><i class="fas fa-map-marker-alt"></i> Google Maps</a>
        </div>
        <div class="card" data-aos="flip-right">
            <i class="fas fa-glass-cheers" style="font-size: 3rem; color: var(--secondary); margin-bottom: 15px;"></i><h3 class="modern-font">Recepción & Fiesta</h3>
            <p style="color: #ccc; margin: 10px 0;">8:00 PM - Salón "El Palacio"</p>
            <a href="https://waze.com/ul" target="_blank" class="btn btn-waze"><i class="fab fa-waze"></i> Ir con Waze</a><a href="#" class="btn"><i class="fas fa-map-marker-alt"></i> Google Maps</a>
        </div>
    </section>
    <section>
        <div class="card" style="border-color: var(--secondary);" data-aos="zoom-in">
            <h2 class="neon-text" style="font-size: 3rem; margin-bottom: 10px;">Moments Cam</h2><p style="margin-bottom: 30px;">¡Sube tus fotos!</p>
            <form id="uploadForm"><div class="upload-area"><i class="fas fa-cloud-upload-alt" style="font-size: 3rem; color: var(--secondary); margin-bottom: 15px;"></i><br><label for="file-input" class="custom-file-label"><i class="fas fa-camera"></i> Tomar Foto</label><input type="file" id="file-input" name="foto" accept="image/*" onchange="previewFile()"><div id="preview-container"><p style="margin: 10px 0; font-size: 0.9rem;">Vista Previa:</p><img id="preview-image" src="#" alt="Tu foto"><br><button type="button" class="btn" style="background: var(--primary); border: none; width: 100%; margin-top: 15px;" onclick="handleUpload()"><i class="fas fa-paper-plane"></i> Subir Ahora</button><div id="upload-status"><span class="loader"></span> Procesando...</div></div></div></form>
        </div>
    </section>
    <section>
        <div class="card" data-aos="fade-up">
            <h2 class="modern-font" style="margin-bottom: 30px;">Mesa de Regalos</h2><i class="fas fa-gift" style="font-size: 3rem; color: var(--primary); margin-bottom: 20px;"></i>
            <div class="gift-box"><h4 style="color: var(--secondary);">Lluvia de Sobres</h4><p style="font-size: 0.9rem; color: #ccc;">Recepción del evento</p></div>
            <div class="gift-box"><h4 style="color: var(--secondary);">Transferencia</h4><p style="font-size: 0.9rem;">Banco: BBVA</p><p style="font-family: monospace; font-size: 1.1rem; color: #fff;">1234 5678 9012 3456 <i class="far fa-copy copy-icon" onclick="copyToClipboard('1234567890123456')"></i></p><p id="copy-msg" style="color: var(--primary); font-size: 0.7rem; opacity: 0;">¡Copiado!</p></div>
            <a href="#" class="btn" style="width: 100%; margin-top: 20px; border-color: #fff;"><i class="fab fa-amazon"></i> Ver Amazon Registry</a>
        </div>
    </section>
    <footer style="text-align: center; padding: 30px; color: #555; font-size: 0.8rem;"><p>© 2025 Invitation To Celebrate</p></footer>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
        let isPlaying = false; const audio = document.getElementById("bgMusic"); const player = document.querySelector(".music-player");
        function toggleMusic() { if (isPlaying) { audio.pause(); player.classList.remove("spin"); } else { audio.play(); player.classList.add("spin"); } isPlaying = !isPlaying; }
        function previewFile() { const previewContainer = document.getElementById('preview-container'); const previewImage = document.getElementById('preview-image'); const file = document.getElementById('file-input').files[0]; const reader = new FileReader(); reader.addEventListener("load", function () { previewImage.src = reader.result; previewContainer.style.display = "block"; }, false); if (file) { reader.readAsDataURL(file); } }
        function handleUpload() { const fileInput = document.getElementById('file-input'); if (fileInput.files.length === 0) { alert("Por favor selecciona una foto."); return; } const status = document.getElementById('upload-status'); status.style.display = 'block'; setTimeout(() => { status.innerHTML = '<i class="fas fa-check" style="color: #25D366;"></i> ¡Éxito!'; setTimeout(() => { status.style.display = 'none'; document.getElementById('preview-container').style.display = 'none'; document.getElementById('uploadForm').reset(); }, 3000); }, 2000); }
        function copyToClipboard(text) { navigator.clipboard.writeText(text).then(() => { const msg = document.getElementById('copy-msg'); msg.style.opacity = 1; setTimeout(() => msg.style.opacity = 0, 2000); }); }
        const eventDate = new Date("Nov 20, 2025 17:00:00").getTime(); setInterval(() => { const now = new Date().getTime(); const distance = eventDate - now; document.getElementById("days").innerText = Math.floor(distance / (1000 * 60 * 60 * 24)); document.getElementById("hours").innerText = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); document.getElementById("minutes").innerText = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); document.getElementById("seconds").innerText = Math.floor((distance % (1000 * 60)) / 1000); }, 1000);
    </script>
</body>
</html>