admin/Media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Tailwind lokal eingebunden und CDN entfernt

Browse Source
This commit is contained in:
admin
2026-02-03 08:16:51 +01:00
parent a25d0becaf
commit 7dfbb24cef
4 changed files with 36 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
public/apps/comic.html
View File

@@ -1,54 +1,29 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Comic Studio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="../js/tailwind.js"></script>
<script src="https://cdn.tailwindcss.com"></script> <style>
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
html {
width: 100%; height: 100%;
background-color: #facc15;
}
body {
/* Fixiertes Layout für maximale Stabilität */
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
margin: 0;
background-color: #facc15;
color: black;
overflow: hidden !important;
<style>
/* CSS Inhalt bleibt gleich ... */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
body {
background-color: #facc15;
overflow: hidden;
user-select: none;
touch-action: none;
font-family: sans-serif;
touch-action: none;
transition: background-color 0.5s;
animation: fadeIn 0.4s ease-out;
transition: background-color 0.3s ease;
box-sizing: border-box;
/* OPTIMIERUNG: Näher an den Rand rutschen */
/* Oben: Notch + 10px (statt vorher 60px pauschal) */
padding-top: calc(10px + env(safe-area-inset-top));
/* Unten: Home-Balken + 20px */
padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.font-comic { font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Sprechblasen */
.bubble-container { position: absolute; z-index: 20; display: flex; flex-direction: column; align-items: center; left: 50%; bottom: 25%; transform: translateX(-50%); }
.bubble-handle { background-color: #3b82f6; color: white; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: move; box-shadow: 0 4px 6px rgba(0,0,0,0.3); margin-bottom: -15px; z-index: 30; font-size: 24px; touch-action: none; border: 2px solid white; }
.bubble-text { background: white; border: 4px solid black; border-radius: 2rem; padding: 1rem 1.5rem; min-width: 160px; max-width: 280px; text-align: center; font-family: 'Comic Sans MS', sans-serif; font-size: 1.5rem; line-height: 1.2; box-shadow: 8px 8px 0px rgba(0,0,0,0.2); outline: none; cursor: text; }
button:active { transform: scale(0.95); transition: transform 0.1s; }
@media print {
@page { size: landscape; margin: 0mm; }
body * { visibility: hidden; }

46
public/index.html
View File

@@ -3,48 +3,40 @@
<head>
<meta charset="UTF-8">
<title>MedienStation Hub</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<script src="js/tailwind.js"></script>
<script>
// Tailwind Konfiguration
tailwind.config = { theme: { extend: { colors: { 'zone-audio': '#f43f5e', 'zone-video': '#0ea5e9', 'zone-story': '#eab308', 'zone-tech': '#10b981' } } } }
</script>
<style>
/* Globaler Reset */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
body {
background-color: #0f172a;
color: white;
font-family: sans-serif;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
animation: fadeIn 0.5s ease-out;
}
.font-comic { font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; }
.app-card { cursor: pointer; transition: transform 0.1s; }
.app-card:active { transform: scale(0.95); filter: brightness(1.2); }
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Animationen */
.fade-in { animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.app-card { cursor: pointer; }
.app-card:active { transform: scale(0.95); filter: brightness(1.2); transition: transform 0.1s; }
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Hilfsklasse für absolute Zentrierung */
.center-absolute { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
/* Grid & Ghost Mode für QR Modal */
#qr-modal {
display: grid !important;
place-items: center;
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
z-index: 99999;
background-color: rgba(0,0,0,0.85);
backdrop-filter: blur(5px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}
#qr-modal.modal-visible {
opacity: 1;
pointer-events: auto;
}
@media print { body * { visibility: hidden; } #print-test, #print-test * { visibility: visible; } #print-test { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex !important; justify-content: center; align-items: center; background: white; color: black; z-index: 99999; } }
</style>
</head>
<body class="p-4 pt-8 box-border fade-in relative" onpointerdown="resetHubTimer()" ontouchstart="resetHubTimer()">