375 lines
8.6 KiB
HTML
375 lines
8.6 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: #ffeded;
|
|
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);
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* Zentriert alle Elemente innerhalb von .container */
|
|
}
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: left;
|
|
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;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
margin-left: 10px;
|
|
width: calc(100% - 0px);
|
|
height: 200px;
|
|
}
|
|
|
|
.buttonsklein {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
margin-left: 46%;
|
|
width: 30%;
|
|
}
|
|
|
|
.button {
|
|
background-color: #660000;
|
|
color: #ffffff;
|
|
padding: 10px 0px;
|
|
border: none;
|
|
border-radius: 0px;
|
|
margin-bottom: 0px;
|
|
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%;
|
|
}
|
|
|
|
.buttonklein {
|
|
background-color: #660000;
|
|
color: #ffffff;
|
|
padding: 10px 0px;
|
|
border: none;
|
|
border-radius: 0px;
|
|
margin-bottom: 0px;
|
|
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: 30%;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #ff6666;
|
|
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
|
}
|
|
|
|
.buttonklein: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: #ffffff; /* Light red text color */
|
|
font-size: 1.1em;
|
|
line-height: 1.6;
|
|
}
|
|
@media (max-width: 800px) {
|
|
.content {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.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);
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.7em;
|
|
justify-items: left;
|
|
}
|
|
|
|
.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">
|
|
|
|
<h2>Gamename</h2>
|
|
<div class="section">
|
|
|
|
|
|
|
|
|
|
<p>Datum</p>
|
|
<div class="section-title">Update: 12.10.2024</div>
|
|
|
|
|
|
|
|
|
|
<p>ein Button zum Interaktieren</p>
|
|
<div class="content">
|
|
<div class="buttons">
|
|
<a href="/play/Tiny-Snake/snake.html" class="button">Spielen</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p>ein kleiner Button zum Interaktieren</p>
|
|
<div class="content">
|
|
<div class="buttonsklein">
|
|
<a href="/play/Tiny-Snake/snake.html" class="buttonklein">Spielen</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Unter Überschrift:</h5>
|
|
|
|
|
|
|
|
|
|
<div class="description">
|
|
<p>Eine simple zwischennotiz</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p>Karusell zur Bilder implementierung</p>
|
|
<div class="carousel-container">
|
|
<div class="carousel">
|
|
<div class="carousel-item">
|
|
<img src="/img/Apps/Snake/snake1.PNG" alt="App 1 Image 1">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="/img/Apps/snake.jpg" alt="App 1 Image 2">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="/img/Apps/Snake/Snake2.png" 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>
|
|
|
|
<div class=" section">
|
|
<p>Noch eine Kategorie für weiteres Datum</p>
|
|
</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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|