eine menge neue Beschreibungen/Spiele und mehr
This commit is contained in:
br0tcraft
374
Devvlogs/Your Simulation/index.html
Normal file
374
Devvlogs/Your Simulation/index.html
Normal file
@ -0,0 +1,374 @@
|
||||
<!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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user