Birthday/index.html at main · Javier-VT/Birthday · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorpresa</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            text-align: center;
        }

        #container {
            background: white;
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            max-width: 800px;
            width: 90%;
        }

        h1 { color: #d63384; }

        #countdown-box {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .timer {
            font-size: 3rem;
            font-weight: bold;
            color: #d63384;
            background: #ffe6f2;
            padding: 20px;
            border-radius: 10px;
        }

        #surprise-content {
            display: none;
            opacity: 0;
            transition: opacity 2s ease-in;
        }

        video {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            margin-bottom: 20px;
        }

        .letter {
            background-color: #fff0f6;
            padding: 30px;
            border-radius: 10px;
            border: 1px dashed #d63384;
            text-align: left;
            line-height: 1.6;
            font-size: 1.1rem;
            margin-top: 20px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>

    <div id="container">

        <div id="countdown-box">
            <p>Este regalo se abrirá automáticamente el 14 de Enero a las 00:00.</p>
            <div class="timer" id="timer">Calculando...</div>
            <p>Falta poco para ver lo que construí para ti ❤️</p>
        </div>

        <div id="surprise-content">
            <h1>Feliz Cumpleaños Morcito ❤️</h1>

            <iframe src="https://drive.google.com/file/d/1h6KJL4Qmy_UU_UK0pxFldNr29zgkOtd0/preview" width="640" height="480"></iframe>

            <div class="letter">
                Hola mi amor

                Quería hacerte algo especial y bastante visual, así que decidí usar una de mis cosas favoritas para hacerte algo lindo.

                Quiero que empieces a disfrutar tu cumpleaños, porque es un día especial para ti y para mi, me importa como me importas tú y quiero que disfrutemos juntos este y muchos más dias por más ordinarios que sean.

                Desde lo más profundo de mi ser, espero que disfrutes mucho el día de hoy con tu familia, también estaré aquí contigo y podemos hacer algunos planes que tengo para ti. En un futuro no muy lejano, verás lo especial que es tu cumpleaños para mí en persona, porque no hay mejor regalo para mí que verte sonreir mi amor.

                A veces mis palabras suelen ser un poco limitadas, sin embargo, cada una de ellas va y siempre irá dirigida a ti, te amo con todo lo que soy, lo que tengo y tendré, porque no te quiero ni puedo amar de otra manera que no sea esa, porque eres mi mujer, mi niña de ojos lindos, mi futura esposa.

                Estoy muy agradecido de compartir mi vida y tiempo contigo, cada segundo, minuto y hora son increibles cuando convivimos juntos, cada pelea es parte fundamental de nuestra formación como pareja, pero creeme que ninguna de ellas me hará querer separarme de ti, porque para mí vales la pena, las caidas, los errores, el tiempo, vales todo para mí.

                Sin más que decirte en esta pequeña carta virtual...

                Te amo
                ATTE: Tu Javiero
                </div>
        </div>

    </div>

    <script>
        const targetDate = new Date("January 14, 2026 00:00:00").getTime();

        const timerElement = document.getElementById("timer");
        const countdownBox = document.getElementById("countdown-box");
        const surpriseContent = document.getElementById("surprise-content");

        const interval = setInterval(function() {
            const now = new Date().getTime();
            const distance = targetDate - now;

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            timerElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

            if (distance < 0) {
                clearInterval(interval);
                unlockSurprise();
            }
        }, 1000);

        function unlockSurprise() {
            countdownBox.style.display = "none";
            surpriseContent.style.display = "block";

            setTimeout(() => {
                surpriseContent.style.opacity = 1;
            }, 100);
        }

    </script>
</body>
</html>