1 changed files with 70 additions and 9 deletions
@ -1,14 +1,75 @@ |
|||||||
<?php |
<html> |
||||||
require __DIR__ . '/vendor/autoload.php'; |
<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"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<h1 class="title">Happy Birthday Prime!</h1> |
||||||
|
<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> |
||||||
|
|
||||||
|
|
||||||
use Cowsayphp\Farm; |
<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> |
||||||
|
|
||||||
header('Content-Type: text/plain'); |
|
||||||
|
|
||||||
$text = "Set a message by adding ?message=<message here> to the URL"; |
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script> |
||||||
if(isset($_GET['message']) && $_GET['message'] != '') { |
<script type="text/javascript"> |
||||||
$text = htmlspecialchars($_GET['message']); |
const duration = 1000 * 1000, |
||||||
|
animationEnd = Date.now() + duration; |
||||||
|
|
||||||
|
let skew = 1; |
||||||
|
|
||||||
|
function randomInRange(min, max) { |
||||||
|
return Math.random() * (max - min) + min; |
||||||
} |
} |
||||||
|
|
||||||
$cow = Farm::create(\Cowsayphp\Farm\Cow::class); |
(function frame() { |
||||||
echo $cow->say($text); |
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); |
||||||
|
} |
||||||
|
})(); |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
|
||||||
|
|||||||
Loading…
Reference in new issue