br0tkasten/test.creative-crafter.de
1
0
Fork 0
Code Activity

original reinkopiert

Browse Source
This commit is contained in:
matt
2025-08-01 09:04:02 +02:00
parent c19e005f16
commit 1415e6b14f
32 changed files with 2181 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
3dmodalretroportablr.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Retro Portable</title>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background-color: #1a1a1a;
font-family: Arial, sans-serif;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
margin-bottom: 20px;
font-size: 2em;
color: #f0f0f0;
text-shadow: 0 0 5px #666;
}
model-viewer {
width: 80vw;
height: 80vh;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
border-radius: 12px;
background-color: #222;
}
.tooltip {
margin-top: 12px;
font-size: 0.95em;
color: #ccc;
}
</style>
</head>
<body>
<h1>Retro Portable</h1>
<model-viewer
src="RetroPortable.glb"
alt="Retro Portable"
auto-rotate
camera-controls
interaction-prompt="none"
ar
shadow-intensity="1.5"
exposure="0.75"
environment-image="neutral"
tone-mapping="commerce"
></model-viewer>
<div class="tooltip">🔄 Click and drag to rotate the model. Use the mouse wheel to zoom.</div>
</body>
</html>

BIN
RetroPortable.glb Normal file
View File

Binary file not shown.

1
icons/envelope-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 499 B

1
icons/github-alt-brands.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#000000" d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
icons/google-play-brands.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#000000" d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 492 B

20
index.html
View File

@ -85,6 +85,8 @@
color="black" color="black"
></l-quantum> ></l-quantum>
</div> </div>
<br>
<br>
<!-- Deine anderen Inhalte hier --> <!-- Deine anderen Inhalte hier -->
<h1><img src="/icons/Controller.png" height="150svh"> <h1><img src="/icons/Controller.png" height="150svh">
@ -92,6 +94,22 @@
Creative Crafter</h1> Creative Crafter</h1>
<h3>Hey there! I'm Creative Crafter, your go-to gamer. On this website, I showcase my latest and greatest games.<br/> <h3>Hey there! I'm Creative Crafter, your go-to gamer. On this website, I showcase my latest and greatest games.<br/>
Note: All games are available in German <span>&#x1F1E9;&#x1F1EA;</span> only. Enjoy the adventure!</h3> Note: All games are available in German <span>&#x1F1E9;&#x1F1EA;</span> only. Enjoy the adventure!</h3>
<br>
<header>
<div style="display: flex; gap: 10px; align-items: center;">
<a href="https://github.com/Creative-Crafter" target="_blank">
<img src="/icons/github-alt-brands.svg" height="25" alt="GitHub" style="cursor: pointer;" />
</a>
<a href="mailto:info@creative-crafter.de">
<img src="/icons/email.svg" height="25" alt="E-Mail" style="cursor: pointer;" />
</a>
<a href="https://play.google.com/store/apps/developer?id=Creative+BananaBr0t&utm_source=emea_Med">
<img src="/icons/google-play-brands.svg" height="25" alt="E-Mail" style="cursor: pointer;" />
</a>
</div>
</header>
<br>
<h2><img src="/icons/spiele.png" height="25vh">Categories</h2> <h2><img src="/icons/spiele.png" height="25vh">Categories</h2>
<!-- Button hinzufügen --> <!-- Button hinzufügen -->
@ -107,7 +125,7 @@
</div> </div>
</button> </button>
<footer><a href="mailto:info@creative-crafter.de">info@creative-crafter.de</a> | <i id="footer-text"></i></footer> <footer><i id="footer-text"></i></footer>
<script> <script>
// Ladeanimation beim Laden der Seite anzeigen // Ladeanimation beim Laden der Seite anzeigen
document.body.classList.add('loading'); document.body.classList.add('loading');

18
link-collection/br0tkasten/index.html
View File

@ -325,27 +325,27 @@
// Teilen via WhatsApp // Teilen via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic website!https://www.creative-crafter.de/link-collection/br0tkasten/');
const url = 'https://api.whatsapp.com/send?text=' + text; const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Teilen via Telegram // Teilen via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic website!https://www.creative-crafter.de/link-collection/br0tkasten/');
const url = 'https://t.me/share/url?url=' + text; const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic website!https://www.creative-crafter.de/link-collection/br0tkasten/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text; const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic website!https://www.creative-crafter.de/link-collection/br0tkasten/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media; const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank'); window.open(url, '_blank');
} }
@ -353,16 +353,16 @@
// Teilen via E-Mail // Teilen via E-Mail
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Klick the Witch'); const subject = encodeURIComponent('Klick the Witch');
const body = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/klick-the-witch/'); const body = encodeURIComponent('Check out this fantastic website!https://www.creative-crafter.de/link-collection/br0tkasten/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
function copyToClipboard() { function copyToClipboard() {
const text = 'Check out this fantastic game!https://test.creative-crafter.de/link-collection/klick-the-witch/'; const text = 'Check out this fantastic website!https://www.creative-crafter.de/link-collection/br0tkasten/';
navigator.clipboard.writeText(text).then(function() { navigator.clipboard.writeText(text).then(function() {
alert('Text wurde in die Zwischenablage kopiert!'); alert('Text has been copied to the clipboard!');
}, function(err) { }, function(err) {
alert('Fehler beim Kopieren in die Zwischenablage: ', err); alert('Error copying to clipboard!: ', err);
}); });
} }
@ -374,5 +374,7 @@
} }
} }
</script> </script>
<br>
<br>
</body> </body>
</html> </html>

5
link-collection/index.html
View File

@ -76,5 +76,10 @@
<div class="category-description">Build 9 miniature plants in terracotta pots, featuring various species, perfect for display and creative relaxation. Botanical joy!</div> <div class="category-description">Build 9 miniature plants in terracotta pots, featuring various species, perfect for display and creative relaxation. Botanical joy!</div>
<a href="/link-collection/lego-tiny-plants">Mehr erfahren</a> <a href="/link-collection/lego-tiny-plants">Mehr erfahren</a>
</div> </div>
<div class="category">
<div class="category-title">Redmi Buds 6 Play</div>
<div class="category-description">Hear very good sound and minimalism. Go Hear!</div>
<a href="/link-collection/redmi-buds-6-play">Mehr erfahren</a>
</div>
</body> </body>
</html> </html>

18
link-collection/lego-tiny-plants/index.html
View File

@ -335,27 +335,27 @@
// Teilen via WhatsApp // Teilen via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/lego-tiny-plants/'); const text = encodeURIComponent('Check out this fantastic toy!https://www.creative-crafter.de/link-collection/lego-tiny-plants/');
const url = 'https://api.whatsapp.com/send?text=' + text; const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Teilen via Telegram // Teilen via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/lego-tiny-plants/'); const text = encodeURIComponent('Check out this fantastic toy!https://www.creative-crafter.de/link-collection/lego-tiny-plants/');
const url = 'https://t.me/share/url?url=' + text; const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic toy!https://test.creative-crafter.de/link-collection/lego-tiny-plants/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text; const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/lego-tiny-plants/'); const text = encodeURIComponent('Check out this fantastic toy!https://www.creative-crafter.de/link-collection/lego-tiny-plants/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media; const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank'); window.open(url, '_blank');
} }
@ -363,16 +363,16 @@
// Teilen via E-Mail // Teilen via E-Mail
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Klick the Witch'); const subject = encodeURIComponent('Klick the Witch');
const body = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/link-collection/lego-tiny-plants/'); const body = encodeURIComponent('Check out this fantastic toy!https://www.creative-crafter.de/link-collection/lego-tiny-plants/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
function copyToClipboard() { function copyToClipboard() {
const text = 'Check out this fantastic game!https://test.creative-crafter.de/link-collection/lego-tiny-plants/'; const text = 'Check out this fantastic toy!https://www.creative-crafter.de/link-collection/lego-tiny-plants/';
navigator.clipboard.writeText(text).then(function() { navigator.clipboard.writeText(text).then(function() {
alert('Text wurde in die Zwischenablage kopiert!'); alert('Text has been copied to the clipboard!');
}, function(err) { }, function(err) {
alert('Fehler beim Kopieren in die Zwischenablage: ', err); alert('Error copying to clipboard!: ', err);
}); });
} }
@ -384,5 +384,7 @@
} }
} }
</script> </script>
<br>
<br>
</body> </body>
</html> </html>

BIN
link-collection/redmi-buds-6-play/bild.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

390
link-collection/redmi-buds-6-play/index.html Normal file
View File

@ -0,0 +1,390 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Crafter</title>
<!-- Ladeanimation -->
<script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script>
<!-- Stylesheet -->
<style>
@font-face { font-family: "Titillium"; src: url("/Titillium-Web-Regular.ttf"); }
body, html {
font-family: 'Titillium';
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: #e6f7ff;
}
h1, h2 { text-align: center; }
/* Ladeanimation */
.loader-container {
display: none;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(173, 216, 230, 0.8);
z-index: 9999;
}
.loading .loader-container { display: flex; }
/* Button-Style */
.button-share {
--white: #fff;
cursor: pointer;
background: linear-gradient(to bottom, #6e3bff, #7e51ff);
color: #fff;
border: 1px solid #af93ff;
border-radius: 8px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 8px 10px -4px #503b89, 0 0 0 2px #562cce;
font-size: 25px;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
}
.button {
padding: 16px 32px; /* Doppelte Größe */
border-radius: 8px;
background: linear-gradient(to bottom, #007bff, #0056b3); /* Blau */
box-shadow: 0 2px 4px rgba(0,0,0,0.7);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px; /* Abstand zum oberen Inhalt */
}
.button:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}
.button:active {
box-shadow: 0 0px 1px rgba(0,0,0,0.8);
transform: scale(0.995);
}
.button-text {
font-weight: 600;
color: white;
font-size: 1.5em; /* Textgröße anpassen */
}
.icon path.bm {
stroke-dasharray: 3;
stroke-dashoffset: 3;
stroke-width: 1px;
transform: translateX(-23px) translateY(16px) scale(2) rotate(-44deg);
}
.icon-container {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
background-color: #fff;
border-radius: 50%;
box-shadow: inset 0 -2px 4px 0 #c6c6c6, 0 3px 6px rgba(0, 0, 0, 0.25);
text-align: center;
z-index: 10;
}
.icon-container .icon {
width: 25px;
height: 30px;
stroke: #592cd6;
margin-top: -2px;
z-index: 4;
/* Für das Teilen-Icon die Rotation entfernen */
}
.content {
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
position: relative;
height: 100%;
width: 100%;
padding: 4px;
gap: 16px;
border-radius: 7px;
font-weight: 600;
transition: all 0.3s ease;
}
.letters {
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.letters span {
display: block;
color: transparent;
position: relative;
left: 6px;
animation: letterShow 1.2s ease backwards calc(var(--i) * 0.03s);
}
.letters span::before, .letters span::after {
content: attr(data-label);
position: absolute;
color: var(--white);
text-shadow: -1px 1px 2px var(--purple-500);
left: 0;
}
.letters span::before {
opacity: 0;
transform: translateY(-100%);
}
.button:hover .letters span::before {
animation: letterShow 0.7s ease calc(var(--i) * 0.03s);
}
.button:hover .letters span::after {
opacity: 1;
animation: letterHide 0.7s ease calc(var(--i) * 0.03s);
}
@keyframes letterShow {
0% { transform: translateY(50%); opacity: 0; filter: blur(20px); }
20% { transform: translateY(70%); opacity: 1; }
50% { transform: translateY(-15%); opacity: 1; filter: blur(0); }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes letterHide {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-70%); opacity: 0; filter: blur(3px); }
}
/* Modal-Stile */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
text-align: center;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
}
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.social-icons a img {
width: 60px;
height: 60px;
transition: transform 0.2s;
}
.social-icons a img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<!-- Ladeanimation -->
<div class="loader-container">
<l-quantum size="90" speed="1.75" color="black"></l-quantum>
</div>
<h1><img src="/icons/Controller.png" height="150"><br/>Creative Crafter</h1>
<h1>Lego Tiny Plants</h1>
<div align='center'>
<img src="/link-collection/redmi-buds-6-play/bild.jpeg" width="250">
</div>
<br/>
<div align='center'>
<!-- Spielen-Button -->
<center>
<h2>
<a href="https://www.amazon.de/Redmi-Buds-Play-Ear-AI-Ger%C3%A4uschunterdr%C3%BCckung-Schwarz/dp/B0DBHRWRKC?th=1">Amazon</a>
</h2>
</center>
<center>
<h2>
<a href="https://www.mi.com/de/product/redmi-buds-6-play/">Xiaomi Online-shop</a>
</h2>
</center>
</a>
<br/><br/>
<!-- Neuer Teilen-Button -->
<button class="button-share" onclick="openSharePopup()">
<div class="icon-container">
<svg viewBox="0 0 24 24" fill="none" class="icon">
<!-- Teilen-Icon -->
<path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"></path>
<polyline points="16 6 12 2 8 6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
</div>
<div class="content">
<div class="letters">
<span data-label="S" style="--i:0;">S</span>
<span data-label="h" style="--i:1;">h</span>
<span data-label="a" style="--i:2;">a</span>
<span data-label="r" style="--i:3;">r</span>
<span data-label="e" style="--i:4;">e</span>
</div>
</div>
</button>
</div>
<!-- Popup-Fenster zum Teilen -->
<div id="shareModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeSharePopup()">&times;</span>
<h2>Share with:</h2>
<div class="social-icons">
<a href="#" onclick="shareViaWhatsApp()">
<img src="/icons/whatsapp.svg" alt="WhatsApp" />
</a>
<a href="#" onclick="shareViaPinterest()">
<img src="/icons/pinterest.svg" />
</a>
<a href="#" onclick="shareViaTelegram()">
<img src="/icons/telegram.svg" alt="Telegram" />
</a>
<a href="#" onclick="shareViaEmail()">
<img src="/icons/email.svg" alt="E-Mail" />
</a>
<!-- Kopieren -->
<a href="#" onclick="copyToClipboard()">
<img src="/icons/copy.svg" />
</a>
<!-- Weitere Sharing-Optionen kannst du hier hinzufügen -->
</div>
</div>
</div>
<br/><br/><br/>
<!-- JavaScript für Ladeanimation und Teilen-Funktion -->
<script>
// Ladeanimation beim Laden der Seite anzeigen
document.body.classList.add('loading');
// Ladeanimation entfernen, wenn die Seite vollständig geladen ist
window.addEventListener('load', () => {
document.body.classList.remove('loading');
});
// Funktion zum Öffnen des Popup-Fensters
function openSharePopup() {
document.getElementById("shareModal").style.display = "block";
}
// Funktion zum Schließen des Popup-Fensters
function closeSharePopup() {
document.getElementById("shareModal").style.display = "none";
}
// Teilen via WhatsApp
function shareViaWhatsApp() {
const text = encodeURIComponent('Check out these fantastic In-ear headphones!https://www.creative-crafter.de/link-collection/redmi-buds-6-play/');
const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank');
}
// Teilen via Telegram
function shareViaTelegram() {
const text = encodeURIComponent('Check out these fantastic In-ear headphones!https://www.creative-crafter.de/link-collection/redmi-buds-6-play/');
const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank');
}
function shareViaPinterest() {
const text = encodeURIComponent('Check out these fantastic In-ear headphones!https://test.creative-crafter.de/link-collection/redmi-buds-6-play/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank');
}
function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out these fantastic In-ear headphones!https://www.creative-crafter.de/link-collection/redmi-buds-6-play/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank');
}
// Teilen via E-Mail
function shareViaEmail() {
const subject = encodeURIComponent('Klick the Witch');
const body = encodeURIComponent('Check out these fantastic In-ear headphones!https://www.creative-crafter.de/link-collection/redmi-buds-6-play/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
}
function copyToClipboard() {
const text = 'Check out these fantastic In-ear headphones!https://www.creative-crafter.de/link-collection/redmi-buds-6-play/';
navigator.clipboard.writeText(text).then(function() {
alert('Text has been copied to the clipboard!');
}, function(err) {
alert('Error copying to clipboard!: ', err);
});
}
// Schließt das Popup bei Klick außerhalb des Inhalts
window.onclick = function(event) {
const modal = document.getElementById('shareModal');
if (event.target == modal) {
closeSharePopup();
}
}
</script>
</body>
<br>
<br>
</html>

174
login/index.html Normal file
View File

@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
/* From Uiverse.io by Praashoo7 */
.form {
display: flex;
flex-direction: column;
gap: 10px;
width: 290.73px;
height: 370.56px;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 0.4em;
background-color: #171717;
border-radius: 25px;
transition: .4s ease-in-out;
}
.form:hover {
transform: scale(1.05);
border: 1px solid black;
}
#heading {
text-align: center;
margin: 2em;
color: rgb(255, 255, 255);
font-size: 1.2em;
}
.field {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
border-radius: 25px;
padding: 0.6em;
border: none;
outline: none;
color: white;
background-color: #171717;
box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}
.input-icon {
height: 1.3em;
width: 1.3em;
fill: white;
}
.input-field {
background: none;
border: none;
outline: none;
width: 100%;
color: #d3d3d3;
}
.form .btn {
display: flex;
justify-content: center;
flex-direction: row;
margin-top: 2.5em;
}
.button1 {
padding: 0.5em;
padding-left: 1.1em;
padding-right: 1.1em;
border-radius: 5px;
margin-right: 0.5em;
border: none;
outline: none;
transition: .4s ease-in-out;
background-color: #252525;
color: white;
}
.button1:hover {
background-color: black;
color: white;
}
.button2 {
padding: 0.5em;
padding-left: 2.3em;
padding-right: 2.3em;
border-radius: 5px;
border: none;
outline: none;
transition: .4s ease-in-out;
background-color: #252525;
color: white;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
margin-bottom: 3em;
padding: 0.5em;
border-radius: 5px;
border: none;
outline: none;
transition: .4s ease-in-out;
background-color: #252525;
color: white;
}
.button3:hover {
background-color: red;
color: white;
}
</style>
</head>
<body>
<!-- From Uiverse.io by Praashoo7 -->
<form class="form" action="SERVER_ADDRESS" method="post" id="loginForm">
<p id="heading">Login</p>
<div class="field">
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"></path>
</svg>
<input autocomplete="off" placeholder="Username" class="input-field" type="text" name="username">
</div>
<div class="field">
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>
</svg>
<input placeholder="Password" class="input-field" type="password" name="password">
</div>
<div class="btn">
<button class="button1" type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
<button class="button2" type="button" onclick="signUp()">Sign Up</button>
</div>
<button class="button3" type="button" onclick="forgotPassword()">Forgot Password</button>
</form>
<script>
document.getElementById("loginForm").addEventListener("submit", function(event){
event.preventDefault(); // Verhindert das Standardverhalten
const formData = new FormData(this);
fetch('SERVER_ADDRESS', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
// hier können Sie die Antwortdaten weiterverarbeiten
})
.catch(error => {
console.error('Error:', error);
});
});
function signUp() {
window.open('URL_ZUM_SIGN_UP_FENSTER', '_blank');
}
function forgotPassword() {
window.open('URL_ZUM_FORGOT_PASSWORD_FENSTER', '_blank');
}
</script>
</body>
</html>

122
login/test.html Normal file
View File

@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e3f2fd;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form {
display: flex;
flex-direction: column;
gap: 15px;
padding: 2em;
background-color: #ffffff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 10px;
transition: transform 0.3s ease-in-out;
}
.form:hover {
transform: scale(1.02);
}
#heading {
text-align: center;
margin: 0;
color: #1565c0;
font-size: 1.5em;
font-weight: 600;
}
.field {
display: flex;
align-items: center;
gap: 10px;
padding: 0.75em 1em;
background-color: #bbdefb;
border-radius: 5px;
}
.input-icon {
height: 1.5em;
width: 1.5em;
fill: #1565c0;
}
.input-field {
width: 100%;
background: none;
border: none;
outline: none;
color: #1565c0;
font-size: 1em;
}
.btn {
display: flex;
justify-content: center;
}
.button {
padding: 0.75em 2em;
border: none;
outline: none;
border-radius: 5px;
background-color: #1565c0; /* Blue Button */
color: #ffffff;
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: #0d47a1; /* Darker blue on hover */
}
</style>
</head>
<body>
<div class="form">
<h2 id="heading">Login</h2>
<div class="field">
<input type="text" id="username" placeholder="Username" required class="input-field">
</div>
<div class="field">
<input type="email" id="email" placeholder="Email" required class="input-field">
</div>
<div class="field">
<input type="password" id="password" placeholder="Password" required class="input-field">
</div>
<div class="field">
<input type="password" id="confirm_password" placeholder="Confirm Password" required class="input-field">
</div>
<div class="btn">
<button class="button" onclick="login()">Login</button>
</div>
</div>
<script>
function login() {
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirm_password').value;
if (password !== confirmPassword) {
alert("Passwords do not match.");
return;
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://YOUR_SERVER_ADDRESS/login", true); // Replace "YOUR_SERVER_ADDRESS" with your actual server address
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
document.body.innerHTML = xhr.responseText;
}
};
xhr.send("username=" + encodeURIComponent(username) + "&email=" + encodeURIComponent(email) + "&password=" + encodeURIComponent(password));
}
</script>
</body>
</html>

102
pdf/index.html Normal file
View File

@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Reader</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<style>
body { font-family: Arial, sans-serif; text-align: center; position: relative; }
canvas { border: 1px solid black; margin-top: 10px; display: block; margin-left: auto; margin-right: auto; }
.btn-conteiner {
display: flex;
justify-content: center;
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
--color-text: #ffffff;
--color-background: #007BFF;
}
.btn-content {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 40px;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 30px;
color: var(--color-text);
background: var(--color-background);
transition: 1s;
border-radius: 100px;
box-shadow: 0 0 0.2em 0 var(--color-background);
}
.btn-content:hover {
transition: 0.5s;
box-shadow: 0 0 0.4em 0 var(--color-background);
}
</style>
</head>
<body>
<h1>PDF Reader</h1>
<input type="file" id="uploadPdf" accept="application/pdf">
<br>
<canvas id="pdfCanvas"></canvas>
<div class="btn-conteiner">
<a class="btn-content" href="#" id="nextPage">
<span class="btn-title">NEXT</span>
</a>
</div>
<script>
let pdfDoc = null;
let currentPage = 1;
document.getElementById('uploadPdf').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const fileReader = new FileReader();
fileReader.onload = function() {
const typedarray = new Uint8Array(this.result);
pdfjsLib.getDocument({ data: typedarray }).promise.then(pdf => {
pdfDoc = pdf;
currentPage = 1;
renderPage(currentPage);
}).catch(error => {
console.error("Fehler beim Laden des PDFs:", error);
});
};
fileReader.readAsArrayBuffer(file);
}
});
function renderPage(pageNumber) {
if (!pdfDoc) return;
pdfDoc.getPage(pageNumber).then(page => {
const scale = 1.5;
const viewport = page.getViewport({ scale });
const canvas = document.getElementById('pdfCanvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = { canvasContext: context, viewport };
page.render(renderContext);
}).catch(error => {
console.error("Fehler beim Rendern der Seite:", error);
});
}
document.getElementById('nextPage').addEventListener('click', function(event) {
event.preventDefault();
if (pdfDoc && currentPage < pdfDoc.numPages) {
currentPage++;
renderPage(currentPage);
}
});
</script>
</body>
</html>

16
programmieren/spiele/Flappy-Witch/index.html
View File

@ -332,27 +332,27 @@
// Teilen via WhatsApp // Teilen via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
const url = 'https://api.whatsapp.com/send?text=' + text; const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Teilen via Telegram // Teilen via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
const url = 'https://t.me/share/url?url=' + text; const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text; const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media; const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank'); window.open(url, '_blank');
} }
@ -360,16 +360,16 @@
// Teilen via E-Mail // Teilen via E-Mail
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Klick the Witch'); const subject = encodeURIComponent('Klick the Witch');
const body = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const body = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
function copyToClipboard() { function copyToClipboard() {
const text = 'Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'; const text = 'Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/';
navigator.clipboard.writeText(text).then(function() { navigator.clipboard.writeText(text).then(function() {
alert('Text wurde in die Zwischenablage kopiert!'); alert('Text has been copied to the clipboard!');
}, function(err) { }, function(err) {
alert('Fehler beim Kopieren in die Zwischenablage: ', err); alert('Error copying to clipboard!: ', err);
}); });
} }

16
programmieren/spiele/capybara-jump-and-run/index.html
View File

@ -332,27 +332,27 @@
// Teilen via WhatsApp // Teilen via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/');
const url = 'https://api.whatsapp.com/send?text=' + text; const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Teilen via Telegram // Teilen via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/');
const url = 'https://t.me/share/url?url=' + text; const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text; const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media; const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank'); window.open(url, '_blank');
} }
@ -360,16 +360,16 @@
// Teilen via E-Mail // Teilen via E-Mail
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Capybara Jump and Run'); const subject = encodeURIComponent('Capybara Jump and Run');
const body = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/'); const body = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
function copyToClipboard() { function copyToClipboard() {
const text = 'Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/'; const text = 'Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/capybara-jump-and-run/';
navigator.clipboard.writeText(text).then(function() { navigator.clipboard.writeText(text).then(function() {
alert('Text wurde in die Zwischenablage kopiert!'); alert('Text has been copied to the clipboard!');
}, function(err) { }, function(err) {
alert('Fehler beim Kopieren in die Zwischenablage: ', err); alert('Error copying to clipboard!: ', err);
}); });
} }

97
programmieren/spiele/cookie-klicker/cookie-clicker.html Normal file
View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Cookie Clicker</title>
<style>
body {
text-align: center;
font-family: sans-serif;
color: rgb(255, 255, 255);
padding-top: 50px;
background: #3498db;
}
#score, #highscore {
font-size: 2em;
margin-bottom: 10px;
}
#clickTarget {
width: 150px;
height: 150px;
cursor: pointer;
transition: transform 0.1s ease;
display: inline-block;
}
#clickTargetreversed {
width: 150px;
height: 150px;
cursor: pointer;
transition: transform 0.1s ease;
display: inline-block;
}
#clickTarget:active {
transform: scale(0.80);
}
svg {
width: 100%;
height: 100%;
}
#clickTarget.clicked {
filter: brightness(1.5);
}
</style>
</head>
<body>
<div id="score">Score: 0</div>
<div id="highscore">Highscore: 0</div>
<!-- Klickbarer SVG-Button -->
<div id="clickTarget" onclick="addPoint()">
<svg id="cookie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="#ffc23d" d="M247.2 17c-22.1-3.1-44.6 .9-64.4 11.4l-74 39.5C89.1 78.4 73.2 94.9 63.4 115L26.7 190.6c-9.8 20.1-13 42.9-9.1 64.9l14.5 82.8c3.9 22.1 14.6 42.3 30.7 57.9l60.3 58.4c16.1 15.6 36.6 25.6 58.7 28.7l83 11.7c22.1 3.1 44.6-.9 64.4-11.4l74-39.5c19.7-10.5 35.6-27 45.4-47.2l36.7-75.5c9.8-20.1 13-42.9 9.1-64.9l-14.6-82.8c-3.9-22.1-14.6-42.3-30.7-57.9L388.9 57.5c-16.1-15.6-36.6-25.6-58.7-28.7L247.2 17zM208 144a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM144 336a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm224-64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
</svg>
<audio id="clickSound" src="crunchy-bite-95979.mp3"></audio>
</div>
<script>
let score = 0;
let highscore = localStorage.getItem('highscore') || 0;
document.getElementById('highscore').textContent = "Highscore: " + highscore;
function addPoint() {
score++;
document.getElementById('score').textContent = "Punkte: " + score;
if (score > highscore) {
highscore = score;
localStorage.setItem('highscore', highscore);
document.getElementById('highscore').textContent = "Highscore: " + highscore;
}
if (score % 100 == 0) {
const cookie = document.getElementById('clickTarget');
cookie.classList.add('clicked');
setTimeout(() => cookie.classList.remove('clicked'), 333);
}
// Sound abspielen
const clickSound = document.getElementById('clickSound');
clickSound.currentTime = 0; // damit der Sound bei mehreren schnellen Klicks neu startet
clickSound.play();
}
</script>
</body>
<footer>Sound Effect by <a href="https://pixabay.com/users/freesound_community-46691455/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=95979">freesound_community</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=95979">Pixabay</a></footer>
</html>

1
programmieren/spiele/cookie-klicker/cookie-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffc23d" d="M247.2 17c-22.1-3.1-44.6 .9-64.4 11.4l-74 39.5C89.1 78.4 73.2 94.9 63.4 115L26.7 190.6c-9.8 20.1-13 42.9-9.1 64.9l14.5 82.8c3.9 22.1 14.6 42.3 30.7 57.9l60.3 58.4c16.1 15.6 36.6 25.6 58.7 28.7l83 11.7c22.1 3.1 44.6-.9 64.4-11.4l74-39.5c19.7-10.5 35.6-27 45.4-47.2l36.7-75.5c9.8-20.1 13-42.9 9.1-64.9l-14.6-82.8c-3.9-22.1-14.6-42.3-30.7-57.9L388.9 57.5c-16.1-15.6-36.6-25.6-58.7-28.7L247.2 17zM208 144a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM144 336a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm224-64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 767 B

BIN
programmieren/spiele/cookie-klicker/crunchy-bite-95979.mp3 Normal file
View File

Binary file not shown.

384
programmieren/spiele/cookie-klicker/index.html Normal file
View File

@ -0,0 +1,384 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Crafter</title>
<!-- Ladeanimation -->
<script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script>
<!-- Stylesheet -->
<style>
@font-face { font-family: "Titillium"; src: url("/Titillium-Web-Regular.ttf"); }
body, html {
font-family: 'Titillium';
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: #e6f7ff;
}
h1, h2 { text-align: center; }
/* Ladeanimation */
.loader-container {
display: none;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(173, 216, 230, 0.8);
z-index: 9999;
}
.loading .loader-container { display: flex; }
/* Button-Style */
.button-share {
--white: #fff;
cursor: pointer;
background: linear-gradient(to bottom, #6e3bff, #7e51ff);
color: #fff;
border: 1px solid #af93ff;
border-radius: 8px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 8px 10px -4px #503b89, 0 0 0 2px #562cce;
font-size: 25px;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
}
.button {
padding: 16px 32px; /* Doppelte Größe */
border-radius: 8px;
background: linear-gradient(to bottom, #007bff, #0056b3); /* Blau */
box-shadow: 0 2px 4px rgba(0,0,0,0.7);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px; /* Abstand zum oberen Inhalt */
}
.button:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}
.button:active {
box-shadow: 0 0px 1px rgba(0,0,0,0.8);
transform: scale(0.995);
}
.button-text {
font-weight: 600;
color: white;
font-size: 1.5em; /* Textgröße anpassen */
}
.icon path.bm {
stroke-dasharray: 3;
stroke-dashoffset: 3;
stroke-width: 1px;
transform: translateX(-23px) translateY(16px) scale(2) rotate(-44deg);
}
.icon-container {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
background-color: #fff;
border-radius: 50%;
box-shadow: inset 0 -2px 4px 0 #c6c6c6, 0 3px 6px rgba(0, 0, 0, 0.25);
text-align: center;
z-index: 10;
}
.icon-container .icon {
width: 25px;
height: 30px;
stroke: #592cd6;
margin-top: -2px;
z-index: 4;
/* Für das Teilen-Icon die Rotation entfernen */
}
.content {
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
position: relative;
height: 100%;
width: 100%;
padding: 4px;
gap: 16px;
border-radius: 7px;
font-weight: 600;
transition: all 0.3s ease;
}
.letters {
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.letters span {
display: block;
color: transparent;
position: relative;
left: 6px;
animation: letterShow 1.2s ease backwards calc(var(--i) * 0.03s);
}
.letters span::before, .letters span::after {
content: attr(data-label);
position: absolute;
color: var(--white);
text-shadow: -1px 1px 2px var(--purple-500);
left: 0;
}
.letters span::before {
opacity: 0;
transform: translateY(-100%);
}
.button:hover .letters span::before {
animation: letterShow 0.7s ease calc(var(--i) * 0.03s);
}
.button:hover .letters span::after {
opacity: 1;
animation: letterHide 0.7s ease calc(var(--i) * 0.03s);
}
@keyframes letterShow {
0% { transform: translateY(50%); opacity: 0; filter: blur(20px); }
20% { transform: translateY(70%); opacity: 1; }
50% { transform: translateY(-15%); opacity: 1; filter: blur(0); }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes letterHide {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-70%); opacity: 0; filter: blur(3px); }
}
/* Modal-Stile */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
text-align: center;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
}
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.social-icons a img {
width: 60px;
height: 60px;
transition: transform 0.2s;
}
.social-icons a img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<!-- Ladeanimation -->
<div class="loader-container">
<l-quantum size="90" speed="1.75" color="black"></l-quantum>
</div>
<h1><img src="/icons/Controller.png" height="150"><br/>Creative Crafter</h1>
<h1>Flappy Witch</h1>
<div align='center'>
<img src="/programmieren/spiele/cookie-klicker/logo.png" width="250">
</div>
<br/>
<div align='center'>
<!-- Spielen-Button -->
<button class="button" onclick="window.location.href=`/programmieren/spiele/cookie-klicker/cookie-clicker.html`">
<div class="button-inner">
<span class="button-text"><img src="/icons/playbutton.png" alt="Icon" style="width:20px; height:20px; margin-right:5px;"> Play</span>
</div>
</button>
</a>
<br/><br/>
<!-- Neuer Teilen-Button -->
<button class="button-share" onclick="openSharePopup()">
<div class="icon-container">
<svg viewBox="0 0 24 24" fill="none" class="icon">
<!-- Teilen-Icon -->
<path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"></path>
<polyline points="16 6 12 2 8 6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
</div>
<div class="content">
<div class="letters">
<span data-label="S" style="--i:0;">S</span>
<span data-label="h" style="--i:1;">h</span>
<span data-label="a" style="--i:2;">a</span>
<span data-label="r" style="--i:3;">r</span>
<span data-label="e" style="--i:4;">e</span>
</div>
</div>
</button>
</div>
<!-- Popup-Fenster zum Teilen -->
<div id="shareModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeSharePopup()">&times;</span>
<h2>Share with:</h2>
<div class="social-icons">
<a href="#" onclick="shareViaWhatsApp()">
<img src="/icons/whatsapp.svg" alt="WhatsApp" />
</a>
<a href="#" onclick="shareViaPinterest()">
<img src="/icons/pinterest.svg" />
</a>
<a href="#" onclick="shareViaTelegram()">
<img src="/icons/telegram.svg" alt="Telegram" />
</a>
<a href="#" onclick="shareViaEmail()">
<img src="/icons/email.svg" alt="E-Mail" />
</a>
<!-- Kopieren -->
<a href="#" onclick="copyToClipboard()">
<img src="/icons/copy.svg" />
</a>
<!-- Weitere Sharing-Optionen kannst du hier hinzufügen -->
</div>
</div>
</div>
<br/><br/><br/>
<div align='center'>
<img src="/programmieren/spiele/cookie-klicker/screenshot.png/" width="500">
</div>
<!-- JavaScript für Ladeanimation und Teilen-Funktion -->
<script>
// Ladeanimation beim Laden der Seite anzeigen
document.body.classList.add('loading');
// Ladeanimation entfernen, wenn die Seite vollständig geladen ist
window.addEventListener('load', () => {
document.body.classList.remove('loading');
});
// Funktion zum Öffnen des Popup-Fensters
function openSharePopup() {
document.getElementById("shareModal").style.display = "block";
}
// Funktion zum Schließen des Popup-Fensters
function closeSharePopup() {
document.getElementById("shareModal").style.display = "none";
}
// Teilen via WhatsApp
function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/cookie-clicker/');
const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank');
}
// Teilen via Telegram
function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/cookie-clicker/');
const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank');
}
function shareViaPinterest() {
const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/cookie-clicker/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank');
}
function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/cookie-clicker/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank');
}
// Teilen via E-Mail
function shareViaEmail() {
const subject = encodeURIComponent('Klick the Witch');
const body = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/cookie-clicker/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
}
function copyToClipboard() {
const text = 'Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/cookie-clicker/';
navigator.clipboard.writeText(text).then(function() {
alert('Text has been copied to the clipboard!');
}, function(err) {
alert('Error copying to clipboard!: ', err);
});
}
// Schließt das Popup bei Klick außerhalb des Inhalts
window.onclick = function(event) {
const modal = document.getElementById('shareModal');
if (event.target == modal) {
closeSharePopup();
}
}
</script>
</body>
</html>

BIN
programmieren/spiele/cookie-klicker/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
programmieren/spiele/cookie-klicker/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

16
programmieren/spiele/fruit-or-no/index.html
View File

@ -332,27 +332,27 @@
// Teilen via WhatsApp // Teilen via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/fruit-or-no/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/fruit-or-no/');
const url = 'https://api.whatsapp.com/send?text=' + text; const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Teilen via Telegram // Teilen via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/fruit-or-no/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/fruit-or-no/');
const url = 'https://t.me/share/url?url=' + text; const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/fruit-or-no/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/fruit-or-no/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text; const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/fruit-or-no/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/fruit-or-no/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media; const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank'); window.open(url, '_blank');
} }
@ -360,16 +360,16 @@
// Teilen via E-Mail // Teilen via E-Mail
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Fruit or No'); const subject = encodeURIComponent('Fruit or No');
const body = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/fruit-or-no/'); const body = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/fruit-or-no/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
function copyToClipboard() { function copyToClipboard() {
const text = 'Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/fruit-or-no/'; const text = 'Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/fruit-or-no/';
navigator.clipboard.writeText(text).then(function() { navigator.clipboard.writeText(text).then(function() {
alert('Text wurde in die Zwischenablage kopiert!'); alert('Text has been copied to the clipboard!');
}, function(err) { }, function(err) {
alert('Fehler beim Kopieren in die Zwischenablage: ', err); alert('Error copying to clipboard!: ', err);
}); });
} }

5
programmieren/spiele/index.html
View File

@ -96,6 +96,11 @@
<div class="category-description">Experience the timeless classic by guiding the snake, collecting food, avoiding collisions! Play now.</div> <div class="category-description">Experience the timeless classic by guiding the snake, collecting food, avoiding collisions! Play now.</div>
<a href="/programmieren/spiele/snake">Mehr erfahren</a> <a href="/programmieren/spiele/snake">Mehr erfahren</a>
</div> </div>
<div class="category">
<div class="category-title">Cookie Clicker</div>
<div class="category-description">Click the cookie as fast as you can to earn points. Beat your high score and enjoy fun extras like sounds and effects!</div>
<a href="/programmieren/spiele/cookie-klicker">Mehr erfahren</a>
</div>
</div> </div>
</body> </body>
</html> </html>

534
programmieren/spiele/klick-the-witch/Klick the Witch 1.2.html Normal file
View File

File diff suppressed because one or more lines are too long

18
programmieren/spiele/klick-the-witch/index.html
View File

@ -248,7 +248,7 @@
<br/> <br/>
<div align='center'> <div align='center'>
<!-- Spielen-Button --> <!-- Spielen-Button -->
<button class="button" onclick="window.location.href=`/programmieren/spiele/klick-the-witch/witc1h.html`"> <button class="button" onclick="window.location.href=`/programmieren/spiele/klick-the-witch/Klick the Witch 1.2.html`">
<div class="button-inner"> <div class="button-inner">
<span class="button-text"><img src="/icons/playbutton.png" alt="Icon" style="width:20px; height:20px; margin-right:5px;"> Play</span> <span class="button-text"><img src="/icons/playbutton.png" alt="Icon" style="width:20px; height:20px; margin-right:5px;"> Play</span>
</div> </div>
@ -332,27 +332,27 @@
// Teilen via WhatsApp // Teilen via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
const url = 'https://api.whatsapp.com/send?text=' + text; const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Teilen via Telegram // Teilen via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
const url = 'https://t.me/share/url?url=' + text; const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text; const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media; const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank'); window.open(url, '_blank');
} }
@ -360,16 +360,16 @@
// Teilen via E-Mail // Teilen via E-Mail
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Klick the Witch'); const subject = encodeURIComponent('Klick the Witch');
const body = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'); const body = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
function copyToClipboard() { function copyToClipboard() {
const text = 'Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/klick-the-witch/'; const text = 'Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/klick-the-witch/';
navigator.clipboard.writeText(text).then(function() { navigator.clipboard.writeText(text).then(function() {
alert('Text wurde in die Zwischenablage kopiert!'); alert('Text has been copied to the clipboard!');
}, function(err) { }, function(err) {
alert('Fehler beim Kopieren in die Zwischenablage: ', err); alert('Error copying to clipboard!: ', err);
}); });
} }

BIN
programmieren/spiele/klick-the-witch/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
programmieren/spiele/klick-the-witch/screenshot01.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 230 KiB

After

Width:  |  Height:  |  Size: 715 KiB

BIN
programmieren/spiele/klick-the-witch/screenshot02.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 978 KiB

After

Width:  |  Height:  |  Size: 1.1 MiB

12
programmieren/spiele/snake/index.html
View File

@ -332,27 +332,27 @@
// Teilen via WhatsApp // Teilen via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/snake/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/snake/');
const url = 'https://api.whatsapp.com/send?text=' + text; const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Teilen via Telegram // Teilen via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/snake/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/snake/');
const url = 'https://t.me/share/url?url=' + text; const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/snake/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/snake/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text; const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/snake/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/snake/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media; const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank'); window.open(url, '_blank');
} }
@ -360,12 +360,12 @@
// Teilen via E-Mail // Teilen via E-Mail
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Snake'); const subject = encodeURIComponent('Snake');
const body = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/snake/'); const body = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/snake/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
function copyToClipboard() { function copyToClipboard() {
const text = 'Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/snake/'; const text = 'Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/snake/';
navigator.clipboard.writeText(text).then(function() { navigator.clipboard.writeText(text).then(function() {
alert('Text has been copied to the clipboard!'); alert('Text has been copied to the clipboard!');
}, function(err) { }, function(err) {

237
programmieren/spiele/snake/snake.html
View File

@ -1,51 +1,222 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- saved from url=(0060)https://test.creative-crafter.de/programmieren/spiele/Snake/ --> <html lang="en">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Snake Game</title> <title>Snake Game</title>
<style> <style>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #000; } * { box-sizing: border-box; }
canvas { border: 1px solid #fff; } body {
#startScreen { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; } margin: 0;
background: linear-gradient(135deg, #3498db, #9b59b6);
color: white;
font-family: "Coda", system-ui;
font-weight: 800;
font-style: normal;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
overflow: hidden;
}
canvas {
border: 4px solid #ffffff81;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background-color: #2c3e5085;
}
#overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
display: none;
}
#overlay h1 {
font-size: 3em;
margin-bottom: 0.5em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
#scoreboard {
position: absolute;
top: 20px;
left: 20px;
font-size: 18px;
z-index: 2;
}
.score-text {
font-size: 1.5em;
font-weight: bold;
}
.highscore-text {
font-size: 1.5em;
font-weight: bold;
}
</style> </style>
</head> </head>
<body> <body>
<canvas id="gameCanvas" width="400" height="400"></canvas> <canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="startScreen" style="display: block;"><h1>Snake Game</h1><p>Press Space to Start</p></div> <div id="scoreboard">
<script> <div class="score-text">Score: <span id="score">0</span></div>
const canvas = document.getElementById('gameCanvas'), ctx = canvas.getContext('2d'), startScreen = document.getElementById('startScreen'); <div class="highscore-text">Highscore: <span id="highscore">0</span></div>
const gridSize = 20; let snake = [{ x: 200, y: 200 }], direction = { x: 0, y: 0 }, food = { x: 0, y: 0 }, gameOver = false, gameStarted = false; </div>
<div id="overlay">
<h1>Snake Game</h1>
<p>Press Space to Start</p>
</div>
const getRandomFoodPosition = () => ({ x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize }); <script>
const drawRect = (x, y, color) => { ctx.fillStyle = color; ctx.fillRect(x, y, gridSize, gridSize); }; const canvas = document.getElementById('gameCanvas');
const update = () => { const ctx = canvas.getContext('2d');
if (gameOver) return; const overlay = document.getElementById('overlay');
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y }; const scoreDisplay = document.getElementById('score');
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.some(segment => segment.x === head.x && segment.y === head.y)) { const highscoreDisplay = document.getElementById('highscore');
gameOver = true;
location.reload(); // Reload the page when the game is over const gridSize = 20;
let snake = [{ x: 200, y: 200 }];
let direction = { x: 0, y: 0 };
let nextDirection = { x: 0, y: -gridSize };
let food = {};
let score = 0;
let highscore = parseInt(localStorage.getItem('snakeHighscore')) || 0;
let gameRunning = false;
let gameOver = false;
let speed = 100;
let timeoutId;
highscoreDisplay.textContent = highscore;
function getRandomPosition() {
return {
x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize,
y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize
};
}
function placeFood() {
food = getRandomPosition();
while (snake.some(s => s.x === food.x && s.y === food.y)) {
food = getRandomPosition();
}
}
// Funktion zum Zeichnen eines abgerundeten Rechtecks (für die Snake)
function drawRoundedRect(x, y, width, height, radius, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.arcTo(x + width, y, x + width, y + height, radius);
ctx.lineTo(x + width, y + height - radius);
ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
ctx.lineTo(x + radius, y + height);
ctx.arcTo(x, y + height, x, y + height - radius, radius);
ctx.lineTo(x, y + radius);
ctx.arcTo(x, y, x + radius, y, radius);
ctx.closePath();
ctx.fill();
}
function update() {
direction = nextDirection;
const head = {
x: snake[0].x + direction.x,
y: snake[0].y + direction.y
};
if (
head.x < 0 || head.x >= canvas.width ||
head.y < 0 || head.y >= canvas.height ||
snake.some(segment => segment.x === head.x && segment.y === head.y)
) {
endGame();
return; return;
} }
snake.unshift(head); snake.unshift(head);
if (head.x === food.x && head.y === food.y) food = getRandomFoodPosition(); else snake.pop();
}; if (head.x === food.x && head.y === food.y) {
const draw = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); snake.forEach(segment => drawRect(segment.x, segment.y, 'lime')); drawRect(food.x, food.y, 'red'); }; score++;
const gameLoop = () => { update(); draw(); if (!gameOver) setTimeout(gameLoop, 100); }; scoreDisplay.textContent = score;
const resetGame = () => { snake = [{ x: 200, y: 200 }]; direction = { x: 0, y: 0 }; food = getRandomFoodPosition(); gameOver = false; gameLoop(); }; placeFood();
} else {
snake.pop();
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Snake als abgerundetes Rechteck zeichnen
snake.forEach((segment, index) => {
const color = index === 0 ? 'limegreen' : 'darkgreen'; // Kopf grün, Rest dunkelgrün
drawRoundedRect(segment.x, segment.y, gridSize, gridSize, 5, color);
});
// Essen zeichnen
drawRoundedRect(food.x, food.y, gridSize, gridSize, 5, 'tomato');
}
function gameLoop() {
if (!gameRunning) return;
update();
draw();
timeoutId = setTimeout(gameLoop, speed);
}
function startGame() {
snake = [{ x: 200, y: 200 }];
direction = { x: 0, y: -gridSize };
nextDirection = { x: 0, y: -gridSize };
score = 0;
speed = 100; // Standard-Geschwindigkeit ohne Erhöhung
scoreDisplay.textContent = score;
gameOver = false;
gameRunning = true;
overlay.style.display = 'none';
placeFood();
gameLoop();
}
function endGame() {
gameRunning = false;
clearTimeout(timeoutId);
if (score > highscore) {
highscore = score;
localStorage.setItem('snakeHighscore', highscore);
highscoreDisplay.textContent = highscore;
}
overlay.innerHTML = '<h1>Game Over</h1><p>Press Space to Restart</p>';
overlay.style.display = 'block';
}
window.addEventListener('keydown', e => { window.addEventListener('keydown', e => {
switch (e.key) { switch (e.key) {
case 'ArrowUp': case 'w': if (direction.y === 0) direction = { x: 0, y: -gridSize }; break; case 'ArrowUp':
case 'ArrowDown': case 's': if (direction.y === 0) direction = { x: 0, y: gridSize }; break; case 'w':
case 'ArrowLeft': case 'a': if (direction.x === 0) direction = { x: -gridSize, y: 0 }; break; if (direction.y === 0) nextDirection = { x: 0, y: -gridSize };
case 'ArrowRight': case 'd': if (direction.x === 0) direction = { x: gridSize, y: 0 }; break; break;
case ' ': if (gameOver) resetGame(); else if (!gameStarted) { startScreen.style.display = 'none'; gameStarted = true; gameLoop(); } break; case 'ArrowDown':
case 's':
if (direction.y === 0) nextDirection = { x: 0, y: gridSize };
break;
case 'ArrowLeft':
case 'a':
if (direction.x === 0) nextDirection = { x: -gridSize, y: 0 };
break;
case 'ArrowRight':
case 'd':
if (direction.x === 0) nextDirection = { x: gridSize, y: 0 };
break;
case ' ':
if (!gameRunning) startGame();
break;
} }
}); });
food = getRandomFoodPosition(); overlay.style.display = 'block';
startScreen.style.display = 'block';
</script> </script>
</body>
</body></html> </html>

16
programmieren/spiele/sweets-for-animals/index.html
View File

@ -332,27 +332,27 @@
// Teilen via WhatsApp // Teilen via WhatsApp
function shareViaWhatsApp() { function shareViaWhatsApp() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/sweets-for-animals/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/sweets-for-animals/');
const url = 'https://api.whatsapp.com/send?text=' + text; const url = 'https://api.whatsapp.com/send?text=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
// Teilen via Telegram // Teilen via Telegram
function shareViaTelegram() { function shareViaTelegram() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/sweets-for-animals/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/sweets-for-animals/');
const url = 'https://t.me/share/url?url=' + text; const url = 'https://t.me/share/url?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/sweets-for-animals/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/sweets-for-animals/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text; const url = 'https://pinterest.com/pin/create/button/?url=' + text;
window.open(url, '_blank'); window.open(url, '_blank');
} }
function shareViaPinterest() { function shareViaPinterest() {
const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link const media = encodeURIComponent('URL_ZU_DEINEM_BILD'); // Ersetze dies durch den tatsächlichen Bild-Link
const text = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/sweets-for-animals/'); const text = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/sweets-for-animals/');
const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media; const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
window.open(url, '_blank'); window.open(url, '_blank');
} }
@ -360,16 +360,16 @@
// Teilen via E-Mail // Teilen via E-Mail
function shareViaEmail() { function shareViaEmail() {
const subject = encodeURIComponent('Sweets for Animals'); const subject = encodeURIComponent('Sweets for Animals');
const body = encodeURIComponent('Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/sweets-for-animals/'); const body = encodeURIComponent('Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/sweets-for-animals/');
window.location.href = 'mailto:?subject=' + subject + '&body=' + body; window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
} }
function copyToClipboard() { function copyToClipboard() {
const text = 'Check out this fantastic game!https://test.creative-crafter.de/programmieren/spiele/sweets-for-animals/'; const text = 'Check out this fantastic game!https://www.creative-crafter.de/programmieren/spiele/sweets-for-animals/';
navigator.clipboard.writeText(text).then(function() { navigator.clipboard.writeText(text).then(function() {
alert('Text wurde in die Zwischenablage kopiert!'); alert('Text has been copied to the clipboard!');
}, function(err) { }, function(err) {
alert('Fehler beim Kopieren in die Zwischenablage: ', err); alert('Error copying to clipboard!: ', err);
}); });
} }