275 lines
7.0 KiB
HTML
275 lines
7.0 KiB
HTML
!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<link rel="icon" href="/img/favicon.jpg" type="image/png">
|
|
<meta charset="UTF-8">
|
|
<title>BR0TCRAFT</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Orbitron';
|
|
src: url('/fonts/Orbitron-Black.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('/fonts/Roboto-Regular.ttf') format('truetype');
|
|
}
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
background-color: #120000;
|
|
color: #ffb3b3;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
.header {
|
|
background-color: #330000;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-bottom: 5px solid #660000;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 2.5em;
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: #ffffff;
|
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
|
}
|
|
.container {
|
|
padding-top: 80px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
perspective: 1000px;
|
|
}
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 80%;
|
|
margin: 20px auto;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
|
|
transform-style: preserve-3d;
|
|
}
|
|
.section-title {
|
|
font-size: 2em;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: #ffffff;
|
|
text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
|
|
}
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
.item {
|
|
background-color: #220000;
|
|
color: #ffcccc;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
|
width: 200px;
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.item-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.item-content img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
margin-left: 20px;
|
|
width: calc(100% - 220px);
|
|
height: 200px;
|
|
}
|
|
|
|
.button {
|
|
background-color: #660000;
|
|
color: #ffffff;
|
|
padding: 10px 0px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, box-shadow 0.2s;
|
|
width: 100%;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #ff6666;
|
|
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
|
}
|
|
.description {
|
|
margin-top: 20px; /* Space from the carousel */
|
|
padding: 15px;
|
|
background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
|
|
border-radius: 10px;
|
|
border: 2px solid #660000; /* Red border */
|
|
}
|
|
.description p {
|
|
color: #ffcccc; /* Light red text color */
|
|
font-size: 1.1em;
|
|
line-height: 1.6;
|
|
}
|
|
@media (max-width: 800px) {
|
|
.content {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.item {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.buttons {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
height: auto;
|
|
}
|
|
}
|
|
.carousel-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
perspective: 1200px;
|
|
position: relative;
|
|
height: 250px;
|
|
overflow: hidden;
|
|
margin-top: 20px;
|
|
}
|
|
.carousel {
|
|
display: flex;
|
|
transition: transform 0.5s ease;
|
|
transform-style: preserve-3d;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.carousel-item {
|
|
width: 250px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
transition: transform 0.5s ease, opacity 0.5s ease;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
opacity: 1;
|
|
}
|
|
.carousel-item:nth-child(1) {
|
|
transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
|
|
}
|
|
.carousel-item:nth-child(2) {
|
|
transform: translateX(-50%);
|
|
}
|
|
.carousel-item:nth-child(3) {
|
|
transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
|
|
}
|
|
|
|
.carousel-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
.carousel-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
padding: 0; /* Remove padding */
|
|
}
|
|
.carousel-button {
|
|
background-color: #660000;
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, box-shadow 0.2s;
|
|
margin: 0 10px; /* Add margin */
|
|
}
|
|
.carousel-button:hover {
|
|
background-color: #ff6666;
|
|
box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<a href="/" style="text-decoration: none; color: inherit;">
|
|
<h1>BR0TCRAFT</h1>
|
|
</a>
|
|
</div>
|
|
<div class="container">
|
|
<div class="section">
|
|
<div class="section-title">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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|