eine menge neue Beschreibungen/Spiele und mehr
This commit is contained in:
br0tcraft
parent
2d9368f770
commit
3e1456d240
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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -252,7 +252,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<a href="#" class="button">Spielen</a>
|
<a href="/play/Tiny-Snake/snake.html" class="button">Spielen</a>
|
||||||
<a href="#" class="button">Herunterladen</a>
|
<a href="#" class="button">Herunterladen</a>
|
||||||
<a href="#" class="button">Github-Repository</a>
|
<a href="#" class="button">Github-Repository</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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/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 |
50
index.html
50
index.html
@ -33,21 +33,57 @@
|
|||||||
<div class="item-text">Tiny Snake</div>
|
<div class="item-text">Tiny Snake</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</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>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Skripts</div>
|
<div class="section-title">Entwicklungsumgebungen</div>
|
||||||
<a href="link-to-script1" class="item devvlog-item">Skript1</a>
|
<a href="/enviroments/PocketCode/index.html" class="item devvlog-item">
|
||||||
<a href="link-to-script2" class="item devvlog-item">Skript2</a>
|
<div class="item-content">
|
||||||
|
<img src="img/developmentEnvironment/PocketCode.jpeg" alt="App 1 Image">
|
||||||
|
<div class="item-text">Pocket Code</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item devvlog-item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="img/Background3.jpg" alt="App 1 Image">
|
||||||
|
<div class="item-text">bald kommt mehr</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Devvlogs</div>
|
<div class="section-title">Devvlogs</div>
|
||||||
<a href="link-to-devvlog1" class="item devvlog-item">Devvlog 1</a>
|
<a href="apps/Tiny-Snake/index.html" class="item devvlog-item">
|
||||||
<a href="link-to-devvlog2" class="item devvlog-item">Devvlog 2</a>
|
<div class="item-content">
|
||||||
|
<img src="img/Apps/Earthlarge.png" alt="App 1 Image">
|
||||||
|
<div class="item-text">The Simulation</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="" class="item devvlog-item">
|
||||||
|
<div class="item-content">
|
||||||
|
<img src="img/Background3.jpg" alt="App 1 Image">
|
||||||
|
<div class="item-text">Bald kommt mehr</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Anleitungen</div>
|
<div class="section-title">Anleitungen</div>
|
||||||
<a href="link-to-anleitung1" class="item anleitung-item">Anleitung 1</a>
|
<a href="/" class="item anleitung-item">
|
||||||
<a href="link-to-anleitung2" class="item anleitung-item">Anleitung 2</a>
|
<div class="item-content">
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user