347 lines
9.2 KiB
HTML
347 lines
9.2 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">Br0tbot (in Entwicklung, kann noch nicht alles)</div>
|
|
<div class="content">
|
|
<div class="item">
|
|
<div class="item-content">
|
|
<img src="/img/Apps/TigerBr0tbot.jpg" alt="App 1 Image">
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<a href="#" class="button">Spielen</a>
|
|
<a href="#" class="button">Herunterladen</a>
|
|
<a href="#" class="button">Github-Repository</a>
|
|
</div>
|
|
</div>
|
|
<div class="description">
|
|
<p>
|
|
Dies ist der Python-Code für einen Discord-Bot, der als vielseitiger Allrounder entwickelt wurde. Der Bot beherrscht die wichtigsten Funktionen, die man von einem Discord-Bot erwartet. Dazu gehören beispielsweise das Akzeptieren von Regeln, das Begrüßen und Verabschieden von Mitgliedern, das Zuweisen von Rollen, das Erstellen von Tickets, ein Levelsystem, die Kontrolle des Servers sowie das Erstellen von Statistiken.
|
|
</p>
|
|
|
|
<p>
|
|
Zusätzlich gibt es auch unterhaltsame Funktionen zur Zeitvertreibung, wie etwa einen "Counting"-Kanal, einen "Coins"-Kanal und vieles mehr. Über den Button "Spielen" gelangt man zu einer Seite, auf der der Bot eingerichtet werden kann.
|
|
</p>
|
|
|
|
<p>
|
|
Der Bot ist Open Source und für das Selbst-Hosting gedacht.
|
|
</p>
|
|
<p>
|
|
Ps: Der Bot ist noch in Entwicklung und es stehen evtl noch nicht alle versprochenen funktionen zur Verfügunng
|
|
</p>
|
|
</div>
|
|
<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/TigerBr0tbot.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>
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|