eine menge neue Beschreibungen/Spiele und mehr
This commit is contained in:
br0tcraft
345
apps/Br0tkabeln/index.html
Normal file
345
apps/Br0tkabeln/index.html
Normal file
@ -0,0 +1,345 @@
|
||||
<!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">Br0tkabeln (beta)</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<img src="/img/Apps/Br0tkabeln.jpg" alt="App 1 Image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a href="https://vocabulary.br0tcraft.de/" class="button">Starten</a>
|
||||
<a href="#" class="button">Github-Repository</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Ein simpler und hoffentlich auch einfach zu verstehender Vokabeltrainer
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Der Vokabeltrainer wurde mit Python, Html, Css, Javascript und Flask erstellt. Deine Vokabeln werden kostenlos auf dem Server gespeichert
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Es werden jediglich Benutzername, Vokabeln(English & Deutsch) und deren Level in Klartext auf dem Server gespeichert. Das Passwort wiederum wird zur Sicherheit gehasht.
|
||||
</p>
|
||||
<p>
|
||||
Es gehen keine Daten an Dritte weiter und nur ich (und der jeweilge Besitzer seiner bzw mit ihm geteilten Acountdaten) haben Zugriff auf diese oben genannten Informationen
|
||||
</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div class="carousel">
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Br0tkabeln/Vocabbild.PNG" alt="App 1 Image 1">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Br0tkabeln.jpg" alt="App 1 Image 2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Br0tkabeln/Vocabbild2.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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user