335 lines
8.8 KiB
HTML
335 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<link rel="icon" href="/img/favicon.jpg" type="image/png">
|
|
<meta charset="UTF-8">
|
|
<title>BR0TCRAFT</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Orbitron';
|
|
src: url('/fonts/Orbitron-Black.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('/fonts/Roboto-Regular.ttf') format('truetype');
|
|
}
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
background-color: #120000;
|
|
color: #ffb3b3;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
.header {
|
|
background-color: #330000;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-bottom: 5px solid #660000;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 2.5em;
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: #ffffff;
|
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
|
}
|
|
.container {
|
|
padding-top: 80px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
perspective: 1000px;
|
|
}
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 80%;
|
|
margin: 20px auto;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
|
|
transform-style: preserve-3d;
|
|
}
|
|
.section-title {
|
|
font-size: 2em;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: #ffffff;
|
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
|
}
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
.item {
|
|
background-color: #220000;
|
|
color: #ffcccc;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
|
width: 200px;
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.item-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.item-content img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
margin-left: 20px;
|
|
width: calc(100% - 220px);
|
|
height: 200px;
|
|
}
|
|
|
|
.button {
|
|
background-color: #660000;
|
|
color: #ffffff;
|
|
padding: 10px 0px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, box-shadow 0.2s;
|
|
width: 100%;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #ff6666;
|
|
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
|
}
|
|
.description {
|
|
margin-top: 20px; /* Space from the carousel */
|
|
padding: 15px;
|
|
background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
|
|
border-radius: 10px;
|
|
border: 2px solid #660000; /* Red border */
|
|
}
|
|
.description p {
|
|
color: #ffcccc; /* Light red text color */
|
|
font-size: 1.1em;
|
|
line-height: 1.6;
|
|
}
|
|
@media (max-width: 800px) {
|
|
.content {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.item {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.buttons {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
height: auto;
|
|
}
|
|
}
|
|
.carousel-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
perspective: 1200px;
|
|
position: relative;
|
|
height: 250px;
|
|
overflow: hidden;
|
|
margin-top: 20px;
|
|
}
|
|
.carousel {
|
|
display: flex;
|
|
transition: transform 0.5s ease;
|
|
transform-style: preserve-3d;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.carousel-item {
|
|
width: 250px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
transition: transform 0.5s ease, opacity 0.5s ease;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
opacity: 1;
|
|
}
|
|
.carousel-item:nth-child(1) {
|
|
transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
|
|
}
|
|
.carousel-item:nth-child(2) {
|
|
transform: translateX(-50%);
|
|
}
|
|
.carousel-item:nth-child(3) {
|
|
transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
|
|
}
|
|
|
|
.carousel-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
.carousel-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
padding: 0; /* Remove padding */
|
|
}
|
|
.carousel-button {
|
|
background-color: #660000;
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, box-shadow 0.2s;
|
|
margin: 0 10px; /* Add margin */
|
|
}
|
|
.carousel-button:hover {
|
|
background-color: #ff6666;
|
|
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<a href="/" style="text-decoration: none; color: inherit;">
|
|
<h1>BR0TCRAFT</h1>
|
|
</a>
|
|
</div>
|
|
<div class="container">
|
|
<div class="section">
|
|
<div class="section-title">Tower defense (Beta)</div>
|
|
<div class="content">
|
|
<div class="item">
|
|
<div class="item-content">
|
|
<img src="/img/Apps/PocketCode/Tower/Tower.png" alt="App 1 Image">
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<a href="https://share.catrob.at/app/project/ef0b260c-a0a6-4e87-9eab-d7759de1f092" class="button">Spielen/Herunterladen</a>
|
|
</div>
|
|
</div>
|
|
<div class="description">
|
|
<p>Ein kleines unvertiges Tower-Defense-game, welches Leider überhaupt nicht mehr funktioniert. Immerhin sind die Assets recht schön geworden die kann man/irgendjemand ja noch verwenden(Lizenz: CC0). Ich hab jedenfalls momentan keine Lust daran weiter zu arbeiten </p>
|
|
|
|
<p>In dem Spiel gibt es Münzen mit denen kannst du dir Verteidigungsposten kaufen bzw Verbessern. Geld bekommst du von den Angriffen von Gegnern die du starten kannst, welche auch immer stärker werden</p>
|
|
|
|
<p> Spielbar nur am Handy mit der App <a href="/enviroments/PocketCode/index.html">Pocket Code</a></p>
|
|
</div>
|
|
<div class="carousel-container">
|
|
<div class="carousel">
|
|
<div class="carousel-item">
|
|
<img src="/img/Apps/PocketCode/Tower/Tower1.jpg" alt="App 1 Image 1">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="/img/Apps/PocketCode/Tower/Tower.png" alt="App 1 Image 2">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="/img/Apps/PocketCode/Tower/Tower2.jpg" alt="App 1 Image 3">
|
|
</div>
|
|
</div>
|
|
<div class="carousel-controls">
|
|
<button class="carousel-button prev"><</button>
|
|
<button class="carousel-button next">></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const carousel = document.querySelector('.carousel');
|
|
const items = document.querySelectorAll('.carousel-item');
|
|
const prevButton = document.querySelector('.prev');
|
|
const nextButton = document.querySelector('.next');
|
|
|
|
let currentItem = 2; // Start with the middle item
|
|
|
|
function updateCarousel() {
|
|
items.forEach((item, index) => {
|
|
if (index === currentItem - 1) {
|
|
// Center item
|
|
item.style.transform = 'translateX(-50%)';
|
|
} else if (index < currentItem - 1) {
|
|
// Items to the left
|
|
item.style.transform = `translateX(${-150 - (currentItem - index - 2) * 100}%) translateY(20px) scale(0.8) rotateY(-30deg)`;
|
|
} else {
|
|
// Items to the right
|
|
item.style.transform = `translateX(${50 + (index - currentItem) * 100}%) translateY(20px) scale(0.8) rotateY(30deg)`;
|
|
}
|
|
});
|
|
}
|
|
|
|
prevButton.addEventListener('click', () => {
|
|
currentItem--;
|
|
if (currentItem < 1) {
|
|
currentItem = items.length;
|
|
}
|
|
updateCarousel();
|
|
});
|
|
|
|
nextButton.addEventListener('click', () => {
|
|
currentItem++;
|
|
if (currentItem > items.length) {
|
|
currentItem = 1;
|
|
}
|
|
updateCarousel();
|
|
});
|
|
|
|
// Initial setup
|
|
updateCarousel();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|