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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      index.css
  2. 62
      index.php
  3. 93
      index.scss

9
index.css
Unescape View File

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

62
index.php
Unescape View File

@ -1,19 +1,21 @@ @@ -1,19 +1,21 @@
<html>
<head>
<head>
<title>HAPPY BIRTHDAY PRIME!</title>
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<script>
window.onload = function() {
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<script>
window.onload = function () {
var context = new AudioContext();
}
</script>
</head>
</head>
<body>
<h1 class="title">Happy Birthday Prime!</h1>
<div id="balloon-container">
@ -35,12 +37,12 @@ @@ -35,12 +37,12 @@
<audio controls>
<source src="boomer.mp3">
</audio>
</div>
</div>
<div class="wishes">
<div class="wishes">
<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>
</div>
<x-memorista api-key="26b70af0-dd40-4280-b3c4-f2ade553a59a"></x-memorista>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
@ -48,13 +50,13 @@ @@ -48,13 +50,13 @@
const duration = 1000 * 1000,
animationEnd = Date.now() + duration;
let skew = 1;
let skew = 1;
function randomInRange(min, max) {
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
}
(function frame() {
(function frame() {
const timeLeft = animationEnd - Date.now(),
ticks = Math.max(200, 500 * (timeLeft / duration));
@ -79,15 +81,15 @@ function randomInRange(min, max) { @@ -79,15 +81,15 @@ function randomInRange(min, max) {
if (timeLeft > 0) {
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);
}
}
function getRandomStyles() {
function getRandomStyles() {
var r = random(255);
var g = random(255);
var b = random(255);
@ -101,33 +103,33 @@ function getRandomStyles() { @@ -101,33 +103,33 @@ function getRandomStyles() {
margin: ${mt}px 0 0 ${ml}px;
animation: float ${dur}s ease-in infinite
`;
}
}
function createBalloons(num) {
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() {
function removeBalloons() {
balloonContainer.style.opacity = 0;
setTimeout(() => {
balloonContainer.remove()
}, 500)
}
}
window.addEventListener("load", () => {
window.addEventListener("load", () => {
createBalloons(30)
});
});
window.addEventListener("click", () => {
window.addEventListener("click", () => {
removeBalloons();
});
});
</script>
</body>
</html>
</body>
</html>

93
index.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save