170 lines
4.5 KiB
PHP
170 lines
4.5 KiB
PHP
<?php
|
|
//Username mit Schutz
|
|
$username = htmlspecialchars($_POST["username"]);
|
|
|
|
//rohe Rocket variable
|
|
$rocket = $_POST["spaceship"];
|
|
|
|
switch($rocket)
|
|
{
|
|
case "rocket1": $rocket = "Ariane 5 ECA"; break;
|
|
case "rocket2": $rocket = "Saturn V"; break;
|
|
case "rocket3": $rocket = "Langer Marsch 5"; break;
|
|
}
|
|
|
|
//Austattungsoptionen
|
|
$optionen = "";
|
|
if (($_POST["option1"])) $optionen .= "UV-Blenden, ";
|
|
if (($_POST["option2"])) $optionen .= "einer Mikrowelle, ";
|
|
if (($_POST["option3"])) $optionen .= "einer Schwebepizza, ";
|
|
if (($_POST["option4"])) $optionen .= "einem Marsweckle, ";
|
|
if (($_POST["option5"])) $optionen .= "einem Rover, ";
|
|
if (($_POST["option6"])) $optionen .= "einem PV-Panel, ";
|
|
$optionen .= "einem blauen Lichtschwert";
|
|
|
|
//Scores
|
|
|
|
$planet_sum = $_POST["planete"];
|
|
$time_sum = $_POST["dauer"][0];
|
|
$price_sum = $_POST["kosten"];
|
|
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>SpaceTaxi Quittung</title>
|
|
<link href="taxi.ico" rel="icon" type="image/x-icon">
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
align-content: center;
|
|
background-color: black;
|
|
color: white;
|
|
overflow: hidden;
|
|
font-weight: bold;
|
|
font-size: 350%;
|
|
}
|
|
|
|
span {
|
|
color: goldenrod;
|
|
}
|
|
|
|
.plane {
|
|
/* Für möglichst symmetrisch, muss left proportional zu width sein*/
|
|
height: 50vw;
|
|
width: 60vw;
|
|
bottom: 0;
|
|
left: 20vw;
|
|
|
|
/*Erstellt eine Ebene mit einem Neigungsgrad von 20*/
|
|
transform: perspective(250px) rotateX(20deg);
|
|
transform-origin: 50% 100%;
|
|
|
|
text-align: center;
|
|
position: absolute;
|
|
}
|
|
|
|
.plane:after {
|
|
bottom: 60%;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
content: ' ';
|
|
|
|
position: absolute;
|
|
}
|
|
|
|
.content {
|
|
/* 60 Sekunden Animation, die in 3 Sekunden eingeblendet wird */
|
|
animation: scroll 60s linear 3s;
|
|
position: absolute;
|
|
top: 100%;
|
|
|
|
animation-fill-mode: forwards;
|
|
}
|
|
/* Bestimmt die Länge des Wegs, welches die Plane zurücklegt */
|
|
/* Hier 350% */
|
|
@keyframes scroll {
|
|
0% {
|
|
top: 100%;
|
|
opacity: 1;
|
|
}
|
|
|
|
90% {
|
|
top: -130%;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
top: -150%;
|
|
opacity: 0;
|
|
}
|
|
|
|
}
|
|
|
|
particle {
|
|
border-radius: 50%;
|
|
left: 0;
|
|
pointer-events: none;
|
|
position: fixed;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
|
|
function init() {
|
|
create_star_field(100);
|
|
}
|
|
|
|
function create_star_field(n) {
|
|
for (let i = 0; i < n; i++) {
|
|
create_star();
|
|
}
|
|
}
|
|
|
|
function create_star() {
|
|
|
|
const x = Math.floor(Math.random() * window.innerWidth);
|
|
const y = Math.floor(Math.random() * window.innerHeight);
|
|
|
|
const star = document.createElement('particle');
|
|
|
|
document.body.appendChild(star);
|
|
|
|
star.style.position = 'absolute';
|
|
star.style.opacity = '1';
|
|
star.style.zIndex = '-1';
|
|
|
|
const size = Math.round(Math.random() * 5);
|
|
|
|
star.style.height = `${size}px`;
|
|
star.style.width = `${size}px`;
|
|
|
|
star.style.background = '#ffffff';
|
|
|
|
star.style.left = `${x}px`;
|
|
star.style.top = `${y}px`;
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="plane">
|
|
<div class="content">
|
|
<p>Der Astronaut <span><?php echo $username;?></span> reiste durch die Galaxies und kämpfte für Recht und Ordnung.</p>
|
|
<p>Mit seinem Raumschiff, <span><?php echo $rocket;?></span>, befreite er ganze <span><?php echo $planet_sum;?> Planeten</span> von ihrem Elend.</p>
|
|
<p>Ausgestattet mit <span><?php echo $optionen;?></span> und einer mutigen Crew, flog er ganze <span><?php echo $time_sum;?> Jahre</span> durch das All.</p>
|
|
<p>Mit dem Kopfgeld der Schurken, von ingesamt <span><?php echo $price_sum;?></span>, finanzierte er sich seine Weltraumreise.</p>
|
|
<p>Auf ein neues Abenteuer, <span><?php echo $username;?></span>!</p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|