335 lines
8.6 KiB
HTML
335 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: #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">auto-clicker</div>
|
|
<div class="content">
|
|
<div class="item">
|
|
<div class="item-content">
|
|
<img src="/img/Apps/PocketCode/auto-clicker/auto-clicker.png" alt="App 1 Image">
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<a href="https://share.catrob.at/app/project/13f85a59-ae25-416f-a9b8-33ad1ab3a430" class="button">Spielen/Herunterladen</a>
|
|
</div>
|
|
</div>
|
|
<div class="description">
|
|
<p>Ein meiner Meinung nach sehr einfach zu bedienender auto-clicker</p>
|
|
|
|
<p>Es ist an sich ganz einfach. Die App besteht nur aus einem ObjeKt, dieses Objekt kopierst du dir und fügst es in das Spiel deiner Wahl ein und schon hast du einen automatischen Klicker immer an deiner Seite</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/auto-clicker/clicker1.jpg" alt="App 1 Image 1">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="/img/Apps/PocketCode/auto-clicker/auto-clicker.png" alt="App 1 Image 2">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="/img/Apps/PocketCode/auto-clicker/clicker2.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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|