--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+
+ <title>happy 18th birthday maiaa!!</title>
+ <meta name="description" content="happy birthdaaaayyyyyy!!!">
+ <meta property="og:title" content="happy 18th birthday Maia!">
+ <meta property="og:description" content="happy birthdaaaayyyyyy!!!">
+ <meta property="og:image" content="https://tenkyuu.dev/maia.jpg">
+
+ <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+ <div id="overlay">
+ <div id="bible-verse">
+ <p><em>Psalms 20:4</em><i>(NIV)</i></p>
+ <blockquote>
+ May He give you the desire of your heart and make all your plans succeed.
+ </blockquote>
+ </div>
+ </div>
+ <div class="lightbulbs-ctn">
+ <img src="./images/bulb_red.png" width="75" alt="red bulb">
+ <img src="./images/bulb_yellow.png" width="75" alt="yellow bulb">
+ <img src="./images/bulb_green.png" width="75" alt="green bulb">
+ <img src="./images/bulb_blue.png" width="75" alt="blue bulb">
+ <img src="./images/bulb_orange.png" width="75" alt="orange bulb">
+ <img src="./images/bulb_pink.png" width="75" alt="pink bulb">
+ </div>
+ <?php include_once("./header.php");?>
+ <div id="balloon-container"></div>
+ <div class="main-wrapper">
+ <img src="./images/hbd-maia.png" alt="happy 18th birthday, maia!!!" class="hbd-text">
+ <button id="start-btn">click here for the surprise!!</button>
+ <p id="countdown"></p>
+ <div class="cake">
+ <div class="plate"></div>
+ <div class="layer layer-bottom"></div>
+ <div class="layer layer-middle"></div>
+ <div class="layer layer-top"></div>
+ <div class="icing"></div>
+ <div class="drip drip1"></div>
+ <div class="drip drip2"></div>
+ <div class="drip drip3"></div>
+ <div class="candle">
+ <div class="flame"></div>
+ </div>
+ </div>
+ </div>
+ <audio id="bg-music" src="./happy-birthday.mp3" autoplay loop></audio>
+ <script src="./script.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+const balloonContainer = document.getElementById("balloon-container");
+const startBtn = document.getElementById("start-btn");
+
+function random(num) {
+ return Math.floor(Math.random() * num);
+}
+
+function getRandomStyles() {
+ var r = random(255);
+ var g = random(255);
+ var b = random(255);
+ var mt = random(200);
+ var ml = random(50);
+ var dur = random(5) + 5;
+ return `
+ background-color: rgba(${r},${g},${b},0.7);
+ color: rgba(${r},${g},${b},0.7);
+ box-shadow: inset -7px -3px 10px rgba(${r - 10},${g - 10},${b - 10},0.7);
+ margin: ${mt}px 0 0 ${ml}px;
+ animation: float ${dur}s ease-in infinite
+ `;
+}
+
+function createBalloons(num) {
+ for (var i = num; i > 0; i--) {
+ var balloon = document.createElement("div");
+ balloon.className = "balloon";
+ balloon.style.cssText = getRandomStyles();
+ balloonContainer.append(balloon);
+ }
+}
+
+function removeBalloons() {
+ balloonContainer.style.opacity = 0;
+ setTimeout(() => {
+ balloonContainer.remove()
+ }, 500)
+}
+
+function showBibleVerse() {
+ const bibleVerse = document.getElementById("bible-verse");
+ bibleVerse.style.display = "block";
+ setTimeout(() => {
+ bibleVerse.style.opacity = 1;
+ }, 100);
+}
+
+startBtn.addEventListener('click', () => {
+ const countdownEl = document.getElementById("countdown");
+ const flameEl = document.querySelector(".flame");
+ const overlay = document.getElementById("overlay");
+
+ startBtn.style.display = "none";
+ countdownEl.textContent = "magbibilang ako, tapos hipan mo yung cake mo Maia HAHAHA";
+ const countdownSteps = ["3", "2", "1", "Blow!"];
+ let index = 0;
+
+ setTimeout(() => {
+ const interval = setInterval(() => {
+ if (index < countdownSteps.length) {
+ countdownEl.textContent = countdownSteps[index];
+ index++;
+ } else {
+ flameEl.style.display = "none";
+ countdownEl.style.display = "none";
+ clearInterval(interval);
+ overlay.style.opacity = 1;
+ overlay.style.pointerEvents = "unset";
+ showBibleVerse();
+ }
+ }, 1000);
+ }, 5000);
+});
+
+window.addEventListener("load", () => {
+ createBalloons(30)
+});
+
+window.addEventListener("click", () => {
+ removeBalloons();
+});
\ No newline at end of file
--- /dev/null
+:root{
+ --vanilla: #f0e4d0;
+ --chocolate: #553c13;
+}
+*, ::before, ::after{
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+html{
+ font-family: 'Times New Roman', Times, serif;
+}
+body{
+ height: 100%;
+ width: 100vw;
+ background-color: #f699cd;
+ animation-name: color-change;
+ animation-duration: 15s;
+ animation-iteration-count: infinite;
+}
+.lightbulbs-ctn{
+ display: flex;
+ justify-content: space-around;
+}
+.main-wrapper{
+ height: 100%;
+ width: 100%;
+ max-width: 700px;
+ margin: 0 auto;
+ z-index: -1;
+}
+#bible-verse{
+ display: none;
+ opacity: 0;
+ width: 90%;
+ max-width: 600px;
+ z-index: 999;
+ color: #ffffff;
+ transition: opacity 5s ease-in-out;
+}
+#bible-verse > p{
+ font-size: 20px;
+}
+#bible-verse > blockquote{
+ font-size: 16px;
+}
+#overlay{
+ position: fixed;
+ height: 100vh;
+ width: 100vw;
+ background-color: black;
+ pointer-events: none;
+ opacity: 0;
+ z-index: 99;
+ transition: opacity 0.2s;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.hbd-text{
+ display: block;
+ margin: auto;
+ margin-top: 75px;
+ width: 100%;
+ max-width: 650px;
+}
+#start-btn{
+ display: block;
+ margin: auto;
+ padding: 3px 7px;
+}
+#countdown{
+ text-align: center;
+ font-size: 18px;
+ margin-bottom: 20px;
+}
+.cake {
+ position: absolute;
+ width: 250px;
+ height: 200px;
+ top: 50%;
+ left: 50%;
+ margin-top: -40px;
+ margin-left: -125px;
+ z-index: -1;
+}
+.plate {
+ width: 270px;
+ height: 110px;
+ position: absolute;
+ bottom: -10px;
+ left: -10px;
+ background-color: #ccc;
+ border-radius: 50%;
+ box-shadow:
+ 0 2px 0 #b3b3b3,
+ 0 4px 0 #b3b3b3,
+ 0 5px 40px rgba(0, 0, 0, 0.5);
+}
+.cake > * {
+ position: absolute;
+}
+.layer {
+ position: absolute;
+ display: block;
+ width: 250px;
+ height: 100px;
+ border-radius: 50%;
+ background-color: #8B4513;
+ box-shadow:
+ 0 2px 0 #995c33,
+ 0 4px 0 #7a3c11,
+ 0 6px 0 #783a10,
+ 0 8px 0 #76380f,
+ 0 10px 0 #74360e,
+ 0 12px 0 #72340d,
+ 0 14px 0 #70320c,
+ 0 16px 0 #6e300b,
+ 0 18px 0 #6c2e0a,
+ 0 20px 0 #6a2c09,
+ 0 22px 0 #682a08,
+ 0 24px 0 #662807,
+ 0 26px 0 #642606,
+ 0 28px 0 #622405,
+ 0 30px 0 #602204;
+}
+.layer-top { top: 0px; }
+.layer-middle { top: 33px; }
+.layer-bottom { top: 66px; }
+.icing {
+ top: 2px;
+ left: 5px;
+ background-color: #f3e5ab;
+ width: 240px;
+ height: 90px;
+ border-radius: 50%;
+}
+.icing::before {
+ content: "";
+ position: absolute;
+ top: 4px;
+ right: 5px;
+ bottom: 6px;
+ left: 5px;
+ background-color: #f6eab9;
+ box-shadow:
+ 0 0 4px #f9f0c6,
+ 0 0 4px #f9f0c6,
+ 0 0 4px #f9f0c6;
+ border-radius: 50%;
+ z-index: 1;
+}
+.drip {
+ display: block;
+ width: 50px;
+ height: 60px;
+ border-bottom-left-radius: 25px;
+ border-bottom-right-radius: 25px;
+ background-color: #f3e5ab;
+}
+.drip1 {
+ top: 53px;
+ left: 5px;
+ transform: skewY(15deg);
+ height: 48px;
+ width: 40px;
+}
+.drip2 {
+ top: 69px;
+ left: 181px;
+ transform: skewY(-15deg);
+}
+.drip3 {
+ top: 54px;
+ left: 90px;
+ width: 80px;
+ border-bottom-left-radius: 40px;
+ border-bottom-right-radius: 40px;
+}
+.candle {
+ background-color: #7B020B;
+ width: 16px;
+ height: 50px;
+ border-radius: 8px / 4px;
+ top: -20px;
+ left: 50%;
+ margin-left: -8px;
+ z-index: 10;
+}
+.candle::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 16px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: #8f1c24;
+}
+.flame {
+ position: absolute;
+ background-color: orange;
+ width: 15px;
+ height: 35px;
+ border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px;
+ top: -34px;
+ left: 50%;
+ margin-left: -7.5px;
+ z-index: 10;
+ box-shadow:
+ 0 0 10px rgba(255, 165, 0, 0.5),
+ 0 0 20px rgba(255, 165, 0, 0.5),
+ 0 0 60px rgba(255, 165, 0, 0.5),
+ 0 0 80px rgba(255, 165, 0, 0.5);
+ transform-origin: 50% 90%;
+ animation: flicker 1s ease-in-out alternate infinite;
+}
+#balloon-container {
+ position: absolute;
+ height: 100vh;
+ padding: 1em;
+ box-sizing: border-box;
+ display: flex;
+ flex-wrap: wrap;
+ overflow: hidden;
+ transition: opacity 500ms;
+}
+.balloon {
+ height: 125px;
+ width: 105px;
+ border-radius: 75% 75% 70% 70%;
+ position: relative;
+}
+.balloon:before {
+ content: "";
+ height: 75px;
+ width: 1px;
+ padding: 1px;
+ background-color: #FDFD96;
+ display: block;
+ position: absolute;
+ top: 125px;
+ left: 0;
+ right: 0;
+ margin: auto;
+}
+.balloon:after {
+ content: "▲";
+ text-align: center;
+ display: block;
+ position: absolute;
+ color: inherit;
+ top: 120px;
+ left: 0;
+ right: 0;
+ margin: auto;
+}
+
+
+
+
+/* keyframes */
+@keyframes color-change{
+ 0%{background-color: #f699cd;}
+ 20%{background-color: #fd5da8;}
+ 40%{background-color: #f26b8a;}
+ 60%{background-color: #f25278;}
+ 80%{background-color: #fc94af;}
+ 100%{background-color: #f699cd;}
+}
+@keyframes flicker {
+ 0% {
+ transform: skewX(5deg);
+ box-shadow:
+ 0 0 10px rgba(255, 165, 0, 0.2),
+ 0 0 20px rgba(255, 165, 0, 0.2),
+ 0 0 60px rgba(255, 165, 0, 0.2),
+ 0 0 80px rgba(255, 165, 0, 0.2);
+ }
+ 25% {
+ transform: skewX(-5deg);
+ box-shadow:
+ 0 0 10px rgba(255, 165, 0, 0.5),
+ 0 0 20px rgba(255, 165, 0, 0.5),
+ 0 0 60px rgba(255, 165, 0, 0.5),
+ 0 0 80px rgba(255, 165, 0, 0.5);
+ }
+ 50% {
+ transform: skewX(10deg);
+ box-shadow:
+ 0 0 10px rgba(255, 165, 0, 0.3),
+ 0 0 20px rgba(255, 165, 0, 0.3),
+ 0 0 60px rgba(255, 165, 0, 0.3),
+ 0 0 80px rgba(255, 165, 0, 0.3);
+ }
+ 75% {
+ transform: skewX(-10deg);
+ box-shadow:
+ 0 0 10px rgba(255, 165, 0, 0.4),
+ 0 0 20px rgba(255, 165, 0, 0.4),
+ 0 0 60px rgba(255, 165, 0, 0.4),
+ 0 0 80px rgba(255, 165, 0, 0.4);
+ }
+ 100% {
+ transform: skewX(5deg);
+ box-shadow:
+ 0 0 10px rgba(255, 165, 0, 0.5),
+ 0 0 20px rgba(255, 165, 0, 0.5),
+ 0 0 60px rgba(255, 165, 0, 0.5),
+ 0 0 80px rgba(255, 165, 0, 0.5);
+ }
+}
+@keyframes float {
+ from {transform: translateY(100vh);
+ opacity: 1;}
+ to {transform: translateY(-300vh);
+ opacity: 0;}
+}
\ No newline at end of file
projects / mysite.git / commitdiff
