codegirl007
/
theprimeagenbirthday
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix formatting and header

main
Stephanie Gredell 1 year ago
parent
3dd764fdc5
commit
d021469028
3 changed files with 204 additions and 186 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      index.css
  2. 240
      index.php
  3. 141
      index.scss

9
index.css
Unescape View File

@ -37,7 +37,8 @@ body {
.wishes hr { .wishes hr {
display: none; display: none;
} }
.wishes .chakra-input, .wishes .chakra-textarea { .wishes .chakra-input,
.wishes .chakra-textarea {
background: #fff; background: #fff;
color: #000; color: #000;
} }
@ -56,7 +57,7 @@ body {
font-size: 72px; font-size: 72px;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
width: 800px; width: 735px;
} }
.cake { .cake {
@ -158,7 +159,7 @@ body {
} }
.candle { .candle {
background-color: #7B020B; background-color: #7b020b;
width: 16px; width: 16px;
height: 50px; height: 50px;
border-radius: 8px/4px; border-radius: 8px/4px;
@ -246,7 +247,7 @@ body {
height: 75px; height: 75px;
width: 1px; width: 1px;
padding: 1px; padding: 1px;
background-color: #FDFD96; background-color: #fdfd96;
display: block; display: block;
position: absolute; position: absolute;
top: 125px; top: 125px;

240
index.php
Unescape View File

@ -1,133 +1,135 @@
<html> <html>
<head>
<title>HAPPY BIRTHDAY PRIME!</title> <head>
<link rel="stylesheet" href="index.css"> <title>HAPPY BIRTHDAY PRIME!</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script> <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
window.onload = function() { <script>
var context = new AudioContext(); window.onload = function () {
} var context = new AudioContext();
}
</script> </script>
</head> </head>
<body> <body>
<h1 class="title">Happy Birthday Prime!</h1> <h1 class="title">Happy Birthday Prime!</h1>
<div id="balloon-container"> <div id="balloon-container">
</div> </div>
<div class="cake"> <div class="cake">
<div class="plate"></div> <div class="plate"></div>
<div class="layer layer-bottom"></div> <div class="layer layer-bottom"></div>
<div class="layer layer-middle"></div> <div class="layer layer-middle"></div>
<div class="layer layer-top"></div> <div class="layer layer-top"></div>
<div class="icing"></div> <div class="icing"></div>
<div class="drip drip1"></div> <div class="drip drip1"></div>
<div class="drip drip2"></div> <div class="drip drip2"></div>
<div class="drip drip3"></div> <div class="drip drip3"></div>
<div class="candle"> <div class="candle">
<div class="flame"></div> <div class="flame"></div>
</div> </div>
</div> </div>
<div class="audio"> <div class="audio">
<audio controls> <audio controls>
<source src="boomer.mp3"> <source src="boomer.mp3">
</audio> </audio>
</div> </div>
<div class="wishes"> <div class="wishes">
<script crossorigin src="https://unpkg.com/@memorista/client-ui@2/dist/index.bundle.js"></script> <script crossorigin src="https://unpkg.com/@memorista/client-ui@2/dist/index.bundle.js"></script>
<x-memorista api-key="26b70af0-dd40-4280-b3c4-f2ade553a59a"></x-memorista> <x-memorista api-key="26b70af0-dd40-4280-b3c4-f2ade553a59a"></x-memorista>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
const duration = 1000 * 1000, const duration = 1000 * 1000,
animationEnd = Date.now() + duration; animationEnd = Date.now() + duration;
let skew = 1; let skew = 1;
function randomInRange(min, max) { function randomInRange(min, max) {
return Math.random() * (max - min) + min; return Math.random() * (max - min) + min;
} }
(function frame() { (function frame() {
const timeLeft = animationEnd - Date.now(), const timeLeft = animationEnd - Date.now(),
ticks = Math.max(200, 500 * (timeLeft / duration)); ticks = Math.max(200, 500 * (timeLeft / duration));
skew = Math.max(0.8, skew - 0.001); skew = Math.max(0.8, skew - 0.001);
confetti({ confetti({
particleCount: 1, particleCount: 1,
startVelocity: 0, startVelocity: 0,
ticks: ticks, ticks: ticks,
origin: { origin: {
x: Math.random(), x: Math.random(),
// since particles fall down, skew start toward the top // since particles fall down, skew start toward the top
y: Math.random() * skew - 0.2, y: Math.random() * skew - 0.2,
}, },
colors: ["#f1cf23", "#df0101"], colors: ["#f1cf23", "#df0101"],
shapes: ["triangle"], shapes: ["triangle"],
gravity: randomInRange(0.4, 0.6), gravity: randomInRange(0.4, 0.6),
scalar: randomInRange(0.4, 1), scalar: randomInRange(0.4, 1),
drift: randomInRange(-0.4, 0.4), drift: randomInRange(-0.4, 0.4),
}); });
if (timeLeft > 0) { if (timeLeft > 0) {
requestAnimationFrame(frame); requestAnimationFrame(frame);
} }
})(); })();
const balloonContainer = document.getElementById("balloon-container"); const balloonContainer = document.getElementById("balloon-container");
function random(num) { function random(num) {
return Math.floor(Math.random() * num); return Math.floor(Math.random() * num);
} }
function getRandomStyles() { function getRandomStyles() {
var r = random(255); var r = random(255);
var g = random(255); var g = random(255);
var b = random(255); var b = random(255);
var mt = random(200); var mt = random(200);
var ml = random(50); var ml = random(50);
var dur = random(5) + 5; var dur = random(5) + 5;
return ` return `
background-color: rgba(${r},${g},${b},0.7); background-color: rgba(${r},${g},${b},0.7);
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); box-shadow: inset -7px -3px 10px rgba(${r - 10},${g - 10},${b - 10},0.7);
margin: ${mt}px 0 0 ${ml}px; margin: ${mt}px 0 0 ${ml}px;
animation: float ${dur}s ease-in infinite animation: float ${dur}s ease-in infinite
`; `;
} }
function createBalloons(num) { function createBalloons(num) {
for (var i = num; i > 0; i--) { for (var i = num; i > 0; i--) {
var balloon = document.createElement("div"); var balloon = document.createElement("div");
balloon.className = "balloon"; balloon.className = "balloon";
balloon.style.cssText = getRandomStyles(); balloon.style.cssText = getRandomStyles();
balloonContainer.append(balloon); balloonContainer.append(balloon);
} }
} }
function removeBalloons() { function removeBalloons() {
balloonContainer.style.opacity = 0; balloonContainer.style.opacity = 0;
setTimeout(() => { setTimeout(() => {
balloonContainer.remove() balloonContainer.remove()
}, 500) }, 500)
} }
window.addEventListener("load", () => { window.addEventListener("load", () => {
createBalloons(30) createBalloons(30)
}); });
window.addEventListener("click", () => { window.addEventListener("click", () => {
removeBalloons(); removeBalloons();
}); });
</script> </script>
</body> </body>
</html>
</html>

141
index.scss
Unescape View File

@ -1,5 +1,5 @@
body { body {
background: black !important; background: black !important;
} }
.wishes { .wishes {
@ -18,21 +18,20 @@ body {
.chakra-stack { .chakra-stack {
order: 1; order: 1;
font-family: "Patrick Hand", cursive; font-family: "Patrick Hand", cursive;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
color:#fff; color: #fff;
.css-itvw0n {
.css-itvw0n { font-size: 24px !important;
font-size:24px !important; }
}
} }
.css-1h4ws66 { .css-1h4ws66 {
display:none; display: none;
.chakra-text { .chakra-text {
display:none; display: none;
} }
} }
@ -44,9 +43,10 @@ body {
display: none; display: none;
} }
.chakra-input, .chakra-textarea { .chakra-input,
.chakra-textarea {
background: #fff; background: #fff;
color:#000 color: #000;
} }
.css-xdp1c1 { .css-xdp1c1 {
@ -54,19 +54,19 @@ body {
} }
.chakra-button { .chakra-button {
color:#000 color: #000;
} }
} }
.title { .title {
color:#fff; color: #fff;
font-family: "Pacifico", cursive; font-family: "Pacifico", cursive;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size:72px; font-size: 72px;
margin:0 auto; margin: 0 auto;
display: block; display: block;
width: 800px; width: 735px;
} }
@mixin foodColoring($color) { @mixin foodColoring($color) {
@ -125,9 +125,15 @@ body {
@include foodColoring(#553c13); @include foodColoring(#553c13);
} }
.layer-top { top: 0px; } .layer-top {
.layer-middle { top: 33px; } top: 0px;
.layer-bottom { top: 66px; } }
.layer-middle {
top: 33px;
}
.layer-bottom {
top: 66px;
}
.icing { .icing {
top: 2px; top: 2px;
@ -185,7 +191,7 @@ body {
} }
.candle { .candle {
background-color: #7B020B; background-color: #7b020b;
width: 16px; width: 16px;
height: 50px; height: 50px;
border-radius: 8px / 4px; border-radius: 8px / 4px;
@ -201,7 +207,7 @@ body {
width: 16px; width: 16px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background-color: lighten(#7B020B, 10%); background-color: lighten(#7b020b, 10%);
} }
} }
@ -227,42 +233,47 @@ body {
@keyframes flicker { @keyframes flicker {
0% { 0% {
transform: skewX(5deg); transform: skewX(5deg);
box-shadow: box-shadow:
0 0 10px rgba(orange, 0.2), 0 0 10px rgba(orange, 0.2),
0 0 20px rgba(orange, 0.2), 0 0 20px rgba(orange, 0.2),
0 0 60px rgba(orange, 0.2), 0 0 60px rgba(orange, 0.2),
0 0 80px rgba(orange, 0.2) } 0 0 80px rgba(orange, 0.2);
}
25% { 25% {
transform: skewX(-5deg); transform: skewX(-5deg);
box-shadow: box-shadow:
0 0 10px rgba(orange, 0.5), 0 0 10px rgba(orange, 0.5),
0 0 20px rgba(orange, 0.5), 0 0 20px rgba(orange, 0.5),
0 0 60px rgba(orange, 0.5), 0 0 60px rgba(orange, 0.5),
0 0 80px rgba(orange, 0.5) } 0 0 80px rgba(orange, 0.5);
}
50% { 50% {
transform: skewX(10deg); transform: skewX(10deg);
box-shadow: box-shadow:
0 0 10px rgba(orange, 0.3), 0 0 10px rgba(orange, 0.3),
0 0 20px rgba(orange, 0.3), 0 0 20px rgba(orange, 0.3),
0 0 60px rgba(orange, 0.3), 0 0 60px rgba(orange, 0.3),
0 0 80px rgba(orange, 0.3) } 0 0 80px rgba(orange, 0.3);
}
75% { 75% {
transform: skewX(-10deg); transform: skewX(-10deg);
box-shadow: box-shadow:
0 0 10px rgba(orange, 0.4), 0 0 10px rgba(orange, 0.4),
0 0 20px rgba(orange, 0.4), 0 0 20px rgba(orange, 0.4),
0 0 60px rgba(orange, 0.4), 0 0 60px rgba(orange, 0.4),
0 0 80px rgba(orange, 0.4) } 0 0 80px rgba(orange, 0.4);
}
100% { 100% {
transform: skewX(5deg); transform: skewX(5deg);
box-shadow: box-shadow:
0 0 10px rgba(orange, 0.5), 0 0 10px rgba(orange, 0.5),
0 0 20px rgba(orange, 0.5), 0 0 20px rgba(orange, 0.5),
0 0 60px rgba(orange, 0.5), 0 0 60px rgba(orange, 0.5),
0 0 80px rgba(orange, 0.5) } 0 0 80px rgba(orange, 0.5);
}
} }
#balloon-container { #balloon-container {
height: 100vh; height: 100vh;
padding: 1em; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
@ -271,52 +282,56 @@ body {
overflow: hidden; overflow: hidden;
transition: opacity 500ms; transition: opacity 500ms;
position: fixed; position: fixed;
top:0; top: 0;
} }
.audio { .audio {
position: absolute; position: absolute;
left: 50%; left: 50%;
margin-left: -137px; margin-left: -137px;
top: 450px; top: 450px;
} }
.balloon { .balloon {
height: 125px; height: 125px;
width: 105px; width: 105px;
border-radius: 75% 75% 70% 70%; border-radius: 75% 75% 70% 70%;
position: relative; position: relative;
} }
.balloon:before { .balloon:before {
content: ""; content: "";
height: 75px; height: 75px;
width: 1px; width: 1px;
padding: 1px; padding: 1px;
background-color: #FDFD96; background-color: #fdfd96;
display: block; display: block;
position: absolute; position: absolute;
top: 125px; top: 125px;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
} }
.balloon:after { .balloon:after {
content: "▲"; content: "▲";
text-align: center; text-align: center;
display: block; display: block;
position: absolute; position: absolute;
color: inherit; color: inherit;
top: 120px; top: 120px;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
} }
@keyframes float { @keyframes float {
from {transform: translateY(100vh); from {
opacity: 1;} transform: translateY(100vh);
to {transform: translateY(-300vh); opacity: 1;
opacity: 0;} }
} to {
transform: translateY(-300vh);
opacity: 0;
}
}

Write Preview
Loading…
Cancel
Save