eine menge neue Beschreibungen/Spiele und mehr
This commit is contained in:
br0tcraft
345
apps/Br0tkabeln/index.html
Normal file
345
apps/Br0tkabeln/index.html
Normal file
@ -0,0 +1,345 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<link rel="icon" href="/img/favicon.jpg" type="image/png">
|
||||
<meta charset="UTF-8">
|
||||
<title>BR0TCRAFT</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Orbitron';
|
||||
src: url('/fonts/Orbitron-Black.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/Roboto-Regular.ttf') format('truetype');
|
||||
}
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #120000;
|
||||
color: #ffb3b3;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.header {
|
||||
background-color: #330000;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-bottom: 5px solid #660000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 2.5em;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
.container {
|
||||
padding-top: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
perspective: 1000px;
|
||||
}
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
color: #ffffff;
|
||||
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.item {
|
||||
background-color: #220000;
|
||||
color: #ffcccc;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item-content img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-left: 20px;
|
||||
width: calc(100% - 220px);
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #660000;
|
||||
color: #ffffff;
|
||||
padding: 10px 0px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, box-shadow 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #ff6666;
|
||||
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
.description {
|
||||
margin-top: 20px; /* Space from the carousel */
|
||||
padding: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
|
||||
border-radius: 10px;
|
||||
border: 2px solid #660000; /* Red border */
|
||||
}
|
||||
.description p {
|
||||
color: #ffcccc; /* Light red text color */
|
||||
font-size: 1.1em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.buttons {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
perspective: 1200px;
|
||||
position: relative;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.carousel {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease;
|
||||
transform-style: preserve-3d;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.carousel-item {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
.carousel-item:nth-child(1) {
|
||||
transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
|
||||
}
|
||||
.carousel-item:nth-child(2) {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.carousel-item:nth-child(3) {
|
||||
transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
|
||||
}
|
||||
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
.carousel-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
padding: 0; /* Remove padding */
|
||||
}
|
||||
.carousel-button {
|
||||
background-color: #660000;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, box-shadow 0.2s;
|
||||
margin: 0 10px; /* Add margin */
|
||||
}
|
||||
.carousel-button:hover {
|
||||
background-color: #ff6666;
|
||||
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a href="/" style="text-decoration: none; color: inherit;">
|
||||
<h1>BR0TCRAFT</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<div class="section-title">Br0tkabeln (beta)</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<img src="/img/Apps/Br0tkabeln.jpg" alt="App 1 Image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a href="https://vocabulary.br0tcraft.de/" class="button">Starten</a>
|
||||
<a href="#" class="button">Github-Repository</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Ein simpler und hoffentlich auch einfach zu verstehender Vokabeltrainer
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Der Vokabeltrainer wurde mit Python, Html, Css, Javascript und Flask erstellt. Deine Vokabeln werden kostenlos auf dem Server gespeichert
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Es werden jediglich Benutzername, Vokabeln(English & Deutsch) und deren Level in Klartext auf dem Server gespeichert. Das Passwort wiederum wird zur Sicherheit gehasht.
|
||||
</p>
|
||||
<p>
|
||||
Es gehen keine Daten an Dritte weiter und nur ich (und der jeweilge Besitzer seiner bzw mit ihm geteilten Acountdaten) haben Zugriff auf diese oben genannten Informationen
|
||||
</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div class="carousel">
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Br0tkabeln/Vocabbild.PNG" alt="App 1 Image 1">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Br0tkabeln.jpg" alt="App 1 Image 2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/img/Apps/Br0tkabeln/Vocabbild2.PNG" alt="App 1 Image 3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-controls">
|
||||
<button class="carousel-button prev"><</button>
|
||||
<button class="carousel-button next">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const carousel = document.querySelector('.carousel');
|
||||
const items = document.querySelectorAll('.carousel-item');
|
||||
const prevButton = document.querySelector('.prev');
|
||||
const nextButton = document.querySelector('.next');
|
||||
|
||||
let currentItem = 2; // Start with the middle item
|
||||
|
||||
function updateCarousel() {
|
||||
items.forEach((item, index) => {
|
||||
if (index === currentItem - 1) {
|
||||
// Center item
|
||||
item.style.transform = 'translateX(-50%)';
|
||||
} else if (index < currentItem - 1) {
|
||||
// Items to the left
|
||||
item.style.transform = `translateX(${-150 - (currentItem - index - 2) * 100}%) translateY(20px) scale(0.8) rotateY(-30deg)`;
|
||||
} else {
|
||||
// Items to the right
|
||||
item.style.transform = `translateX(${50 + (index - currentItem) * 100}%) translateY(20px) scale(0.8) rotateY(30deg)`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
prevButton.addEventListener('click', () => {
|
||||
currentItem--;
|
||||
if (currentItem < 1) {
|
||||
currentItem = items.length;
|
||||
}
|
||||
updateCarousel();
|
||||
});
|
||||
|
||||
nextButton.addEventListener('click', () => {
|
||||
currentItem++;
|
||||
if (currentItem > items.length) {
|
||||
currentItem = 1;
|
||||
}
|
||||
updateCarousel();
|
||||
});
|
||||
|
||||
// Initial setup
|
||||
updateCarousel();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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 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">Github-Repository</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user