+++ /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
