Compare commits
2 Commits
cca9436850
...
3e1456d240
| Author | SHA1 | Date | |
|---|---|---|---|
|
3e1456d240 | ||
|
|
2d9368f770 |
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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
346
apps/Br0tbot/index.html
Normal file
346
apps/Br0tbot/index.html
Normal file
@ -0,0 +1,346 @@
|
|||||||
|
<!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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
274
apps/PocketCode/Sensor-datas/index.html
Normal file
274
apps/PocketCode/Sensor-datas/index.html
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
!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">Sensor data</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="/img/Apps/PocketCode/Sensor/Sensor.png" alt="App 1 Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="buttons">
|
||||||
|
<a href="https://share.catrob.at/app/project/445cff43-cbda-401a-bae7-924ec0dc6384" class="button">Spielen/Herunterladen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<p>Diese App ist dazu gedacht Programmteile in sein eigenes Pocket Code Projekt einzufügen. Es hat einfach schon bestimmte komplizierte programme erstellt bei denen es evtl. sinvoll ist diese auch in sein Spiel hinzuzufügen, ohne daran ewig zu arbeiten</p>
|
||||||
|
|
||||||
|
<p>Diese App erlaubt dir herauszufinden ob und wie lange die App im Hintergrund lief. Wie lange es her ist das die App das letzte mal geöffnet wurde. Eine automatische Update erkennen für dein Spiel, um zu checken obn das game sich aktualisieren soll und zu guter letzt noch die funktion eine Liste anzuzeigen (praktisch zum debuggen von Spielen). Benutzt diese App wie ihr wollt, sie gehört ganz euch (Lizenz: CC0)</p>
|
||||||
|
|
||||||
|
<p> Spielbar nur am Handy mit der App <a href="/enviroments/PocketCode/index.html">Pocket Code</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
334
apps/PocketCode/Tower-defense/index.html
Normal file
334
apps/PocketCode/Tower-defense/index.html
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
<!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">Tower defense (Beta)</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="/img/Apps/PocketCode/Tower/Tower.png" alt="App 1 Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="buttons">
|
||||||
|
<a href="https://share.catrob.at/app/project/ef0b260c-a0a6-4e87-9eab-d7759de1f092" class="button">Spielen/Herunterladen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<p>Ein kleines unvertiges Tower-Defense-game, welches Leider überhaupt nicht mehr funktioniert. Immerhin sind die Assets recht schön geworden die kann man/irgendjemand ja noch verwenden(Lizenz: CC0). Ich hab jedenfalls momentan keine Lust daran weiter zu arbeiten </p>
|
||||||
|
|
||||||
|
<p>In dem Spiel gibt es Münzen mit denen kannst du dir Verteidigungsposten kaufen bzw Verbessern. Geld bekommst du von den Angriffen von Gegnern die du starten kannst, welche auch immer stärker werden</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/Tower/Tower1.jpg" alt="App 1 Image 1">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<img src="/img/Apps/PocketCode/Tower/Tower.png" alt="App 1 Image 2">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<img src="/img/Apps/PocketCode/Tower/Tower2.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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
334
apps/PocketCode/auto-clicker/index.html
Normal file
334
apps/PocketCode/auto-clicker/index.html
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
<!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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
332
apps/Tiny-Snake/index.html
Normal file
332
apps/Tiny-Snake/index.html
Normal file
@ -0,0 +1,332 @@
|
|||||||
|
<!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">Tiny Snake</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="/img/Apps/snake.jpg" alt="App 1 Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="buttons">
|
||||||
|
<a href="/play/Tiny-Snake/snake.html" class="button">Spielen</a>
|
||||||
|
<a href="#" class="button">Herunterladen</a>
|
||||||
|
<a href="#" class="button">Github-Repository</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<p>Hier ist das nächste große AAA-game. Naja nicht wirklich. Also eigentlich ist es ein super einfaches Snake game, ohne vielen funktionen. Das erstaunliche dabei ist das es so kompakt wie (für mich) möglich ist. Funktioniert leider nur am PC. Man bewegt die Schlange mit den Pfeiltasten</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/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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
311
enviroments/PocketCode/index.html
Normal file
311
enviroments/PocketCode/index.html
Normal file
@ -0,0 +1,311 @@
|
|||||||
|
<!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;
|
||||||
|
}
|
||||||
|
.item-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px; /* Spacing around the content */
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-content2 img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 25%;
|
||||||
|
width: 50%;
|
||||||
|
margin: auto;
|
||||||
|
height: auto;
|
||||||
|
max-height: calc(100% - 0px); /* Adjust image height here */
|
||||||
|
top: 5px;
|
||||||
|
object-fit: contain;/* Cover the area and maintain aspect ratio */
|
||||||
|
border-radius: 10px; /* Round all corners of the image */
|
||||||
|
}
|
||||||
|
.devvlog-item {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
.item-text {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px; /* Space from the bottom */
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:hover {
|
||||||
|
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border: 1px solid #ff6666;
|
||||||
|
border-radius: 11px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.item:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.item2 {
|
||||||
|
background-color: #220000;
|
||||||
|
color: #ffcccc;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.section2 {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: 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-title2 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
color: #ff6666;
|
||||||
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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">Pocket Code</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="/img/developmentEnvironment/PocketCodetiny.png" alt="App 1 Image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="buttons">
|
||||||
|
<a href="https://play.google.com/store/apps/details?id=org.catrobat.catroid&hl=de&pli=1" class="button">Herunterladen</a>
|
||||||
|
<a href="https://share.catrob.at/app/user/3a747897-7a83-11eb-a92d-005056a36f47" class="button">Mein Catrobat-Acount</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<p>Pocket Code ist eine von Catroabt programmierte Entwicklungsumgebung fürs Handy. Darin lassen sich Spiele fürs Handy am Handy entwickeln. Ich selber habe dort auch schon das ein oder andere gemacht, von denen auch ein paar Apps online zu finden sind.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section2">
|
||||||
|
<div class="section-title2">Meine Apps</div>
|
||||||
|
<a href="/" class="item devvlog-item">
|
||||||
|
<div class="item-content2">
|
||||||
|
<img src="img/Apps/Earthlarge.png" alt="App 1 Image">
|
||||||
|
<div class="item-text">Ki-Chatbot</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="/apps/PocketCode/Tower-defense/index.html" class="item devvlog-item">
|
||||||
|
<div class="item-content2">
|
||||||
|
<img src="/img/Apps/PocketCode/Tower/Tower.png" alt="App 1 Image">
|
||||||
|
<div class="item-text">Tower defense (Beta)</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="/apps/PocketCode/auto-clicker/index.html" class="item devvlog-item">
|
||||||
|
<div class="item-content2">
|
||||||
|
<img src="/img/Apps/PocketCode/auto-clicker/auto-clicker.png" alt="App 1 Image">
|
||||||
|
<div class="item-text">auto-clicker</div>
|
||||||
|
</div>
|
||||||
|
<a href="/apps/PocketCode/Sensor-datas/index.html" class="item devvlog-item">
|
||||||
|
<div class="item-content2">
|
||||||
|
<img src="/img/Apps/PocketCode/Sensor/Sensor.png" alt="App 1 Image">
|
||||||
|
<div class="item-text">Sensor Datas</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Br0tcraft</title>
|
|
||||||
<link rel="stylesheet" href="/style.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="header-container">
|
|
||||||
|
|
||||||
<img class="error404img" src="/img/errors/404.jpg" />
|
|
||||||
<h1 class="errornothingpc">Hier ist leider nichts</h1>
|
|
||||||
</div>
|
|
||||||
<div class="Background-Leiste"></div>
|
|
||||||
<div class="Leiste"></div>
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<a class="menu-link-home" href="/">BR0TCRAFT</a>
|
|
||||||
<div class="mobile-menu-icon" onclick="toggleMenu()">
|
|
||||||
|
|
||||||
<div class="hamburger-icon"></div>
|
|
||||||
<div class="hamburger-icon"></div>
|
|
||||||
<div class="hamburger-icon"></div>
|
|
||||||
</div>
|
|
||||||
<div class="menu-links">
|
|
||||||
|
|
||||||
<a class="menu-link" href="">Anwendungen</a>
|
|
||||||
<a class="menu-link" href="">Handbücher</a>
|
|
||||||
<a class="menu-link" href="">Dev-Blogs</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mobile-menu" onclick="toggleMenu()">
|
|
||||||
<a class="menu-link-home" href="">BR0TCRAFT</a>
|
|
||||||
<br><br><br>
|
|
||||||
<a class="menu-link-mobile" href="">Anwendungen</a>
|
|
||||||
<a class="menu-link-mobile" href="">Handbücher</a>
|
|
||||||
<a class="menu-link-mobile" href="">Dev-Blogs</a>
|
|
||||||
</div>
|
|
||||||
<h1 class="errornothingmobile">Hier ist leider nichts</h1>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function toggleMenu() {
|
|
||||||
var menuLinks = document.querySelector(".menu-links");
|
|
||||||
var mobileMenu = document.querySelector(".mobile-menu");
|
|
||||||
var body = document.body;
|
|
||||||
|
|
||||||
menuLinks.classList.toggle("show");
|
|
||||||
mobileMenu.classList.toggle("show");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
197
html+css.html
197
html+css.html
@ -1,197 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Br0tcraft</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@font-face {
|
|
||||||
font-family: "Roboto";
|
|
||||||
src: url("/fonts/Roboto/Roboto-Regular.ttf");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Orbitron";
|
|
||||||
src: url("/fonts/Orbitron/Orbitron-Black.ttf");
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: "Orbitron";
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: 50% 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: absolute;
|
|
||||||
right: 32px;
|
|
||||||
left: 32px;
|
|
||||||
top: 16px;
|
|
||||||
font-family: Orbitron;
|
|
||||||
font-size: 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: calc(15% * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-link-home {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-left: 0px;
|
|
||||||
font-size: 6vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-link {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headline {
|
|
||||||
text-align: center;
|
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
font-size: 5vw;
|
|
||||||
text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu-icon {
|
|
||||||
display: none; /* Standardmäßig ausblenden */
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-icon {
|
|
||||||
width: 30px;
|
|
||||||
height: 3px;
|
|
||||||
background-color: white;
|
|
||||||
margin: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-links {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end; /* Rechts ausrichten */
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-links.show {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #333; /* Hintergrundfarbe des Menüs */
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-link-mobile {
|
|
||||||
color: white;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
font-size: 250%;
|
|
||||||
margin: 10px; /* Abstand zwischen den Links hinzufügen */
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: transparent;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.mobile-menu-icon {
|
|
||||||
display: block; /* Bei kleinen Bildschirmen anzeigen */
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-icon {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-links {
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
position: absolute;
|
|
||||||
top: 80px;
|
|
||||||
right: 0; /* Rechts ausrichten */
|
|
||||||
background-color: #333;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: flex-start; /* Links oben ausrichten */
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-links.show {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu.show {
|
|
||||||
display: block;
|
|
||||||
background-color: rgb(104, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="header-container">
|
|
||||||
<img class="header-image" src="img/Background.png" />
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<a class="menu-link-home" href="">BR0TCRAFT</a>
|
|
||||||
<div class="mobile-menu-icon" onclick="toggleMenu()">
|
|
||||||
<div class="hamburger-icon"></div>
|
|
||||||
<div class="hamburger-icon"></div>
|
|
||||||
<div class="hamburger-icon"></div>
|
|
||||||
</div>
|
|
||||||
<div class="menu-links">
|
|
||||||
<!-- Gemeinsame Links für Desktop und mobile Ansichten -->
|
|
||||||
<a class="menu-link" href="">Kontakt</a>
|
|
||||||
<a class="menu-link" href="">Spiele</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mobile-menu" onclick="toggleMenu()">
|
|
||||||
<a class="menu-link-mobile" href="">Kontakt</a>
|
|
||||||
<a class="menu-link-mobile" href="">Spiele</a>
|
|
||||||
</div>
|
|
||||||
<h1 class="headline">Meine Werke</h1>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function toggleMenu() {
|
|
||||||
var menuLinks = document.querySelector(".menu-links");
|
|
||||||
var mobileMenu = document.querySelector(".mobile-menu");
|
|
||||||
var body = document.body;
|
|
||||||
|
|
||||||
menuLinks.classList.toggle("show");
|
|
||||||
mobileMenu.classList.toggle("show");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
BIN
img/Apps/Br0tkabeln.jpg
Normal file
BIN
img/Apps/Br0tkabeln.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
img/Apps/Br0tkabeln/Vocabbild.PNG
Normal file
BIN
img/Apps/Br0tkabeln/Vocabbild.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
img/Apps/Br0tkabeln/Vocabbild2.PNG
Normal file
BIN
img/Apps/Br0tkabeln/Vocabbild2.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
img/Apps/Br0tkabelnlarge.png
Normal file
BIN
img/Apps/Br0tkabelnlarge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 541 KiB |
BIN
img/Apps/Earth.jpg
Normal file
BIN
img/Apps/Earth.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
img/Apps/Earthlarge.png
Normal file
BIN
img/Apps/Earthlarge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
BIN
img/Apps/PocketCode/Sensor/Sensor.png
Normal file
BIN
img/Apps/PocketCode/Sensor/Sensor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
img/Apps/PocketCode/Tower/Tower.png
Normal file
BIN
img/Apps/PocketCode/Tower/Tower.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
img/Apps/PocketCode/Tower/Tower1.jpg
Normal file
BIN
img/Apps/PocketCode/Tower/Tower1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
img/Apps/PocketCode/Tower/Tower2.jpg
Normal file
BIN
img/Apps/PocketCode/Tower/Tower2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
img/Apps/PocketCode/auto-clicker/auto-clicker.png
Normal file
BIN
img/Apps/PocketCode/auto-clicker/auto-clicker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
img/Apps/PocketCode/auto-clicker/clicker1.jpg
Normal file
BIN
img/Apps/PocketCode/auto-clicker/clicker1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
img/Apps/PocketCode/auto-clicker/clicker2.jpg
Normal file
BIN
img/Apps/PocketCode/auto-clicker/clicker2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
img/Apps/Snake/Snake2.png
Normal file
BIN
img/Apps/Snake/Snake2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 488 B |
BIN
img/Apps/Snake/snake1.PNG
Normal file
BIN
img/Apps/Snake/snake1.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
img/Apps/TigerBr0tbot-large.png
Normal file
BIN
img/Apps/TigerBr0tbot-large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 558 KiB |
BIN
img/Apps/TigerBr0tbot.jpg
Normal file
BIN
img/Apps/TigerBr0tbot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
img/Apps/snake-large.png
Normal file
BIN
img/Apps/snake-large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
BIN
img/Apps/snake.jpg
Normal file
BIN
img/Apps/snake.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 695 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
BIN
img/contact/github.png
Normal file
BIN
img/contact/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
img/developmentEnvironment/PocketCode.jpeg
Normal file
BIN
img/developmentEnvironment/PocketCode.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
img/developmentEnvironment/PocketCodetiny.png
Normal file
BIN
img/developmentEnvironment/PocketCodetiny.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
img/favicon.jpg
Normal file
BIN
img/favicon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
141
index.html
141
index.html
@ -1,58 +1,99 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<link rel="icon" href="img/favicon.jpg" type="image/png">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<link rel="stylesheet" href="style.css">
|
||||||
<title>Br0tcraft</title>
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="style.css" />
|
<title>BR0TCRAFT</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header-container">
|
<div class="header">
|
||||||
<img class="header-image" src="img/Background2.jpg" />
|
<h1>BR0TCRAFT</h1>
|
||||||
<div class="contact-icons">
|
</div>
|
||||||
<a href="https://example.com" target="_blank">
|
<div class="header-image">
|
||||||
<img src="img/contact/discord.png" class="contact-icon" />
|
<img src="img/Background3.jpg" alt="Header Image">
|
||||||
</a>
|
</div>
|
||||||
<a href="mailto:info@br0tcraft.de">
|
<div class="contact-icons">
|
||||||
<img src="img/contact/email.png" class="contact-icon email-icon" />
|
<a href="your discord link" target="_blank"><img src="img/contact/discord.png" alt="Discord"></a>
|
||||||
</a>
|
<a href="mailto:info.br0tcraft.de"><img src="img/contact/email.png" alt="Email"></a>
|
||||||
</div>
|
<a href="https://github.com/Br0tcraft"><img src="img/contact/github.png" alt="Email"></a>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Apps</div>
|
||||||
|
<a href="apps/Br0tbot/index.html" class="item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="img/Apps/TigerBr0tbot-large.png" alt="App 1 Image">
|
||||||
|
<div class="item-text">Br0tbot</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="apps/Tiny-Snake/index.html" class="item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="img/Apps/snake-large.png" alt="App 1 Image">
|
||||||
|
<div class="item-text">Tiny Snake</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="apps/Br0tkabeln/index.html" class="item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="img/Apps/Br0tkabelnlarge.png" alt="App 1 Image">
|
||||||
|
<div class="item-text">Br0tkabeln</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Entwicklungsumgebungen</div>
|
||||||
|
<a href="/enviroments/PocketCode/index.html" class="item devvlog-item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="img/developmentEnvironment/PocketCode.jpeg" alt="App 1 Image">
|
||||||
|
<div class="item-text">Pocket Code</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="Leiste"></div>
|
</a>
|
||||||
<div class="container">
|
<a href="" class="item devvlog-item">
|
||||||
<a class="menu-link-home" href="">BR0TCRAFT</a>
|
<div class="item-content">
|
||||||
<div class="menu-links">
|
<img src="img/Background3.jpg" alt="App 1 Image">
|
||||||
<a class="menu-link" href="/Anwendungen">Anwendungen</a>
|
<div class="item-text">bald kommt mehr</div>
|
||||||
<a class="menu-link" href="/Handbücher">Handbücher</a>
|
|
||||||
<a class="menu-link" href="/Dev-Blogs">Dev-Blogs</a>
|
|
||||||
</div>
|
|
||||||
<div class="mobile-menu-icon" onclick="toggleMenu()">
|
|
||||||
<div class="hamburger-icon"></div>
|
|
||||||
<div class="hamburger-icon"></div>
|
|
||||||
<div class="hamburger-icon"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mobile-menu" onclick="toggleMenu()">
|
</a>
|
||||||
<a class="menu-link-mobile" href="/Anwendungen">Anwendungen</a>
|
</div>
|
||||||
<a class="menu-link-mobile" href="/Handbücher">Handbücher</a>
|
<div class="section">
|
||||||
<a class="menu-link-mobile" href="/Dev-Blogs">Dev-Blogs</a>
|
<div class="section-title">Devvlogs</div>
|
||||||
</div>
|
<a href="apps/Tiny-Snake/index.html" class="item devvlog-item">
|
||||||
<h1 class="headline">Anwendungen</h1>
|
<div class="item-content">
|
||||||
<div class="ElementListe">
|
<img src="img/Apps/Earthlarge.png" alt="App 1 Image">
|
||||||
<a href="/Unity"><img src="img/SpielTypen/Unity.png" class="KategorieLink" /></a>
|
<div class="item-text">The Simulation</div>
|
||||||
<a href="/Javascript"><img src="img/SpielTypen/Javascript.png" class="KategorieLink" /></a>
|
</div>
|
||||||
<a href="/Turbowarp"><img src="img/SpielTypen/Turbowarp.png" class="KategorieLink" /></a>
|
</a>
|
||||||
<a href="/Android"><img src="img/SpielTypen/AndroidGames.png" class="KategorieLink" /></a>
|
<a href="" class="item devvlog-item">
|
||||||
<a href="/itchio"><img src="img/SpielTypen/itchio.png" class="KategorieLink" /></a>
|
<div class="item-content">
|
||||||
</div>
|
<img src="img/Background3.jpg" alt="App 1 Image">
|
||||||
<h1 class="headline">Handbücher</h1>
|
<div class="item-text">Bald kommt mehr</div>
|
||||||
<h1 class="headline">Dev-Blogs</h1>
|
</div>
|
||||||
<h1 class="headline">Sonstiges</h1>
|
</a>
|
||||||
<script>
|
</div>
|
||||||
function toggleMenu() {
|
<div class="section">
|
||||||
var mobileMenu = document.querySelector(".mobile-menu");
|
<div class="section-title">Anleitungen</div>
|
||||||
mobileMenu.classList.toggle("show");
|
<a href="/" class="item anleitung-item">
|
||||||
}
|
<div class="item-content">
|
||||||
</script>
|
<img src="/img/developmentEnvironment/PocketCode.jpeg" alt="App 1 Image">
|
||||||
|
<div class="item-text">Erstes Handy game (Pocket Code) kommt bald</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="/" class="item anleitung-item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="/img/Background3.jpg" alt="App 1 Image">
|
||||||
|
<div class="item-text">mehr kommt bald ... irgendwann ... vielleicht ...</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener("visibilitychange", (event) => {
|
||||||
|
if (document.visibilityState == "visible") {
|
||||||
|
document.title = "BR0TCRAFT";
|
||||||
|
} else {
|
||||||
|
document.title = "Come back, please";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
7
play/Tiny-Snake/snake.html
Normal file
7
play/Tiny-Snake/snake.html
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Snake</title><style>body{margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background:#000;}canvas{background:#222}</style>
|
||||||
|
</head><body><canvas id="c"></canvas><script>let c=document.getElementById('c'),x=c.getContext('2d'),p=20,t=[{x:200,y:200}],f={x:60,y:60},d=39;c.width=c.height=400;
|
||||||
|
setInterval(()=>{t.unshift({x:(t[0].x+(d==37?-p:d==39?p:0)+c.width)%c.width,y:(t[0].y+(d==38?-p:d==40?p:0)+c.height)%c.height});
|
||||||
|
if(t[0].x==f.x&&t[0].y==f.y)f={x:~~(Math.random()*20)*p,y:~~(Math.random()*20)*p};else t.pop();x.fillStyle='lime';x.clearRect(0,0,c.width,c.height);t.forEach(e=>x.fillRect(e.x,e.y,p,p));
|
||||||
|
x.fillStyle='red';x.fillRect(f.x,f.y,p,p);if(t.slice(1).some(e=>e.x==t[0].x&&e.y==t[0].y))t=[{x:200,y:200}],f={x:60,y:60},d=39;},100);onkeydown=e=>d=e.keyCode-32&&e.keyCode;
|
||||||
|
</script></body></html>
|
||||||
395
style.css
395
style.css
@ -1,254 +1,161 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Roboto";
|
font-family: 'Orbitron';
|
||||||
src: url("/fonts/Roboto/Roboto-Regular.ttf");
|
src: url('fonts/Orbitron-Black.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
|
@font-face {
|
||||||
@font-face {
|
font-family: 'Roboto';
|
||||||
font-family: "Orbitron";
|
src: url('fonts/Roboto-Regular.ttf') format('truetype');
|
||||||
src: url("/fonts/Orbitron/Orbitron-Black.ttf");
|
}
|
||||||
}
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
body {
|
background-color: #120000;
|
||||||
margin: 0;
|
color: #ffb3b3;
|
||||||
font-family: "Orbitron";
|
margin: 0;
|
||||||
background-color: white;
|
overflow-x: hidden;
|
||||||
z-index: 0;
|
}
|
||||||
}
|
.header {
|
||||||
|
background-color: #330000;
|
||||||
.Leiste {
|
padding: 20px;
|
||||||
top: 0px;
|
text-align: center;
|
||||||
left: 0px;
|
border-bottom: 5px solid #660000;
|
||||||
width: 100%;
|
position: fixed;
|
||||||
height: 5vw;
|
top: 0;
|
||||||
position: fixed;
|
width: 100%;
|
||||||
background-color: rgb(77, 0, 0);
|
z-index: 10;
|
||||||
z-index: 1;
|
}
|
||||||
}
|
.header h1 {
|
||||||
|
margin: 0;
|
||||||
.header-container {
|
font-size: 2.5em;
|
||||||
top: 3vw;
|
font-family: 'Orbitron', sans-serif;
|
||||||
position: relative;
|
color: #ffffff;
|
||||||
width: 100%;
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
.header-image {
|
||||||
.header-image {
|
width: 100%;
|
||||||
top: 100px;
|
overflow: hidden;
|
||||||
width: 100%;
|
margin-top: 90px;
|
||||||
height: 100%;
|
}
|
||||||
object-fit: cover;
|
.header-image img {
|
||||||
z-index: 1;
|
width: 100%;
|
||||||
}
|
height: auto;
|
||||||
|
}
|
||||||
.container {
|
.contact-icons {
|
||||||
z-index: 5;
|
display: flex;
|
||||||
position: fixed;
|
justify-content: center;
|
||||||
right: 32px;
|
padding: 20px;
|
||||||
left: 10px;
|
}
|
||||||
top: 0px;
|
.contact-icons img {
|
||||||
font-family: Orbitron;
|
width: auto;
|
||||||
font-size: 25px;
|
height: 4vw;
|
||||||
display: flex;
|
margin: 0 10px;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: space-between;
|
.container {
|
||||||
}
|
padding-top: 80px;
|
||||||
|
|
||||||
.menu-link-home {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-left: 0px;
|
|
||||||
font-size: 4vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-link {
|
|
||||||
font-size: 1.5vw;
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headline {
|
|
||||||
text-align: center;
|
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
font-size: 4vw;
|
|
||||||
text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Stile für die Kontakt-Icons */
|
|
||||||
.contact-icons {
|
|
||||||
position: fixed;
|
|
||||||
top:6vw;
|
|
||||||
left: 2%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-icon {
|
|
||||||
width: 4vw; /* Neue Breite */
|
|
||||||
height: 3vw; /* Neue Höhe */
|
|
||||||
margin: 10px 0vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu-icon {
|
|
||||||
display: none;
|
|
||||||
cursor: pointer;
|
|
||||||
position: fixed;
|
|
||||||
top: 1vw;
|
|
||||||
right: 10px;
|
|
||||||
width: 30px;
|
|
||||||
height: 24px;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-icon {
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-links {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #333;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-link-mobile {
|
|
||||||
color: white;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
font-size: 250%;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: transparent;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu.show {
|
|
||||||
display: block;
|
|
||||||
background-color: rgb(104, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.KategorieLink {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
.errornothingmobile {
|
|
||||||
display: none; /* Standardmäßig versteckt */
|
|
||||||
position: relative; /* Positioniert relativ zum umgebenden Container */
|
|
||||||
margin-top: 20px; /* Abstand zum oberen Rand des Containers */
|
|
||||||
color: black; /* Schwarze Schriftfarbe */
|
|
||||||
text-align: center; /* Textzentrierung */
|
|
||||||
}
|
|
||||||
.errornothingpc {
|
|
||||||
position: fixed; /* Absolut relativ zum Container */
|
|
||||||
top: 4vw; /* Anpassen je nach Bedarf */
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%); /* Horizontale Zentrierung */
|
|
||||||
color: white; /* Schriftfarbe */
|
|
||||||
z-index: 1; /* Höherer Z-Index, um über dem Bild zu bleiben */
|
|
||||||
text-align: center; /* Textzentrierung */
|
|
||||||
font-size: 300%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.error404img {
|
|
||||||
top: 100px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 937px) {
|
|
||||||
|
|
||||||
.ElementListe {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center; /* Zentriert die Elemente */
|
justify-content: center;
|
||||||
gap: 10px; /* Fügt einen gleichmäßigen Abstand zwischen den Elementen hinzu */
|
perspective: 1000px;
|
||||||
padding: 10px; /* Fügt einen Abstand zu den Rändern des Containers hinzu */
|
}
|
||||||
}
|
.section {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: 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: center;
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
color: #ff6666;
|
||||||
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background-color: #220000;
|
||||||
|
color: #ffcccc;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.item-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px; /* Spacing around the content */
|
||||||
|
}
|
||||||
|
|
||||||
.KategorieLink {
|
.item-content img {
|
||||||
width: 45vw;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
max-width: 50vw; /* Maximale Breite des Bildes */
|
max-height: calc(100% - 0px); /* Adjust image height here */
|
||||||
object-fit: cover; /* Bildfüllung */
|
top: 5px;
|
||||||
margin-bottom: 10px; /* Abstand zwischen den Bildern */
|
object-fit: cover; /* Cover the area and maintain aspect ratio */
|
||||||
|
border-radius: 10px; /* Round all corners of the image */
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-text {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px; /* Space from the bottom */
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:hover {
|
||||||
|
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border: 1px solid #ff6666;
|
||||||
|
border-radius: 11px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.item:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.item {
|
||||||
|
width: calc(50% - 20px);
|
||||||
|
height: calc(50vw - 20px);
|
||||||
}
|
}
|
||||||
.mobile-menu-icon {
|
.section {
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.errornothingpc {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.errornothingmobile {
|
|
||||||
display: block; /* Zeigt das Element auf mobilen Geräten */
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-links {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-icons {
|
|
||||||
position: static;
|
|
||||||
top: auto;
|
|
||||||
left: auto;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 10px;
|
}
|
||||||
|
.contact-icons img {
|
||||||
|
width: auto;
|
||||||
|
height: 10vw;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
.devvlog-item {
|
||||||
.header-container {
|
height: 200px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
.anleitung-item {
|
||||||
.contact-icon {
|
height: 300px;
|
||||||
width: 5vw;
|
|
||||||
height: 4.2vw;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.email-icon {
|
|
||||||
filter: invert(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ElementListe {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user