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. 240
      index.php
  3. 141
      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;

240
index.php
Unescape View File

@ -1,133 +1,135 @@ @@ -1,133 +1,135 @@
<html>
<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() {
var context = new AudioContext();
}
<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 () {
var context = new AudioContext();
}
</script>
</head>
</head>
<body>
<h1 class="title">Happy Birthday Prime!</h1>
<div id="balloon-container">
</div>
<h1 class="title">Happy Birthday Prime!</h1>
<div id="balloon-container">
</div>
<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 class="audio">
<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 class="audio">
<audio controls>
<source src="boomer.mp3">
</audio>
</div>
<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>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
<script type="text/javascript">
const duration = 1000 * 1000,
animationEnd = Date.now() + duration;
let skew = 1;
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
(function frame() {
const timeLeft = animationEnd - Date.now(),
ticks = Math.max(200, 500 * (timeLeft / duration));
skew = Math.max(0.8, skew - 0.001);
confetti({
particleCount: 1,
startVelocity: 0,
ticks: ticks,
origin: {
x: Math.random(),
// since particles fall down, skew start toward the top
y: Math.random() * skew - 0.2,
},
colors: ["#f1cf23", "#df0101"],
shapes: ["triangle"],
gravity: randomInRange(0.4, 0.6),
scalar: randomInRange(0.4, 1),
drift: randomInRange(-0.4, 0.4),
});
if (timeLeft > 0) {
requestAnimationFrame(frame);
}
})();
const balloonContainer = document.getElementById("balloon-container");
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 `
</div>
<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>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
<script type="text/javascript">
const duration = 1000 * 1000,
animationEnd = Date.now() + duration;
let skew = 1;
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
(function frame() {
const timeLeft = animationEnd - Date.now(),
ticks = Math.max(200, 500 * (timeLeft / duration));
skew = Math.max(0.8, skew - 0.001);
confetti({
particleCount: 1,
startVelocity: 0,
ticks: ticks,
origin: {
x: Math.random(),
// since particles fall down, skew start toward the top
y: Math.random() * skew - 0.2,
},
colors: ["#f1cf23", "#df0101"],
shapes: ["triangle"],
gravity: randomInRange(0.4, 0.6),
scalar: randomInRange(0.4, 1),
drift: randomInRange(-0.4, 0.4),
});
if (timeLeft > 0) {
requestAnimationFrame(frame);
}
})();
const balloonContainer = document.getElementById("balloon-container");
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)
}
window.addEventListener("load", () => {
createBalloons(30)
});
window.addEventListener("click", () => {
removeBalloons();
});
</script>
</body>
</html>
}
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)
}
window.addEventListener("load", () => {
createBalloons(30)
});
window.addEventListener("click", () => {
removeBalloons();
});
</script>
</body>
</html>

141
index.scss
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
body {
background: black !important;
background: black !important;
}
.wishes {
@ -18,21 +18,20 @@ body { @@ -18,21 +18,20 @@ body {
.chakra-stack {
order: 1;
font-family: "Patrick Hand", cursive;
font-weight: 400;
font-style: normal;
color:#fff;
.css-itvw0n {
font-size:24px !important;
}
font-weight: 400;
font-style: normal;
color: #fff;
.css-itvw0n {
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;
display: block;
width: 800px;
font-weight: 400;
font-style: normal;
font-size: 72px;
margin: 0 auto;
display: block;
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%);
}
}
@ -227,42 +233,47 @@ body { @@ -227,42 +233,47 @@ body {
@keyframes flicker {
0% {
transform: skewX(5deg);
box-shadow:
box-shadow:
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,52 +282,56 @@ body { @@ -271,52 +282,56 @@ 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 {
content: "▲";
text-align: center;
display: block;
position: absolute;
color: inherit;
top: 120px;
left: 0;
right: 0;
margin: auto;
}
@keyframes float {
from {transform: translateY(100vh);
opacity: 1;}
to {transform: translateY(-300vh);
opacity: 0;}
}
}
.balloon:after {
content: "▲";
text-align: center;
display: block;
position: absolute;
color: inherit;
top: 120px;
left: 0;
right: 0;
margin: auto;
}
@keyframes float {
from {
transform: translateY(100vh);
opacity: 1;
}
to {
transform: translateY(-300vh);
opacity: 0;
}
}

Write Preview
Loading…
Cancel
Save