Fix: Tailwind lokal eingebunden und CDN entfernt

This commit is contained in:
2026-02-03 08:16:51 +01:00
parent a25d0becaf
commit 7dfbb24cef
4 changed files with 36 additions and 61 deletions

7
coolify_deploy Normal file
View File

@@ -0,0 +1,7 @@
-----BEGIN OPENSSH PRIVATE KEY-----
b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
QyNTUxOQAAACC6CkgrJEZUHTAki21f2ma4666irzQ6IgRf6Qy2M+4eUwAAAJA8rGK+PKxi
vgAAAAtzc2gtZWQyNTUxOQAAACC6CkgrJEZUHTAki21f2ma4666irzQ6IgRf6Qy2M+4eUw
AAAEBcTWANGTbHIif5mzTMIzLYidn61a+T5MuSS5NQ95Iz+LoKSCskRlQdMCSLbV/aZrjr
rqKvNDoiBF/pDLYz7h5TAAAAB2Nvb2xpZnkBAgMEBQY=
-----END OPENSSH PRIVATE KEY-----

1
coolify_deploy.pub Normal file
View File

@@ -0,0 +1 @@
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAILoKSCskRlQdMCSLbV/aZrjrrqKvNDoiBF/pDLYz7h5T coolify

View File

@@ -1,54 +1,29 @@
<!DOCTYPE html>
<html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Comic Studio</title> <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="../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 { <style>
/* Fixiertes Layout für maximale Stabilität */ /* CSS Inhalt bleibt gleich ... */
position: fixed; @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
top: 0; left: 0; right: 0; bottom: 0; body {
margin: 0; background-color: #facc15;
overflow: hidden;
background-color: #facc15;
color: black;
overflow: hidden !important;
user-select: none; user-select: none;
touch-action: none; touch-action: none;
font-family: sans-serif; transition: background-color 0.5s;
animation: fadeIn 0.4s ease-out; 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; } .font-comic { font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; } .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-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-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; } .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 { @media print {
@page { size: landscape; margin: 0mm; } @page { size: landscape; margin: 0mm; }
body * { visibility: hidden; } body * { visibility: hidden; }

View File

@@ -3,48 +3,40 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>MedienStation Hub</title> <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 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> <style>
/* Globaler Reset */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
body { body {
background-color: #0f172a; background-color: #0f172a;
color: white; color: white;
font-family: sans-serif; overflow: hidden;
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
touch-action: manipulation; touch-action: manipulation;
animation: fadeIn 0.5s ease-out;
} }
.font-comic { font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; } .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; } .fade-in { animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } @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 */ @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; } }
#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;
}
</style> </style>
</head> </head>
<body class="p-4 pt-8 box-border fade-in relative" onpointerdown="resetHubTimer()" ontouchstart="resetHubTimer()"> <body class="p-4 pt-8 box-border fade-in relative" onpointerdown="resetHubTimer()" ontouchstart="resetHubTimer()">