AstraOS Ver. 1.12:
- Lade animation wieder hinzugefügt - Background animation wieder hinzugefügt - Benachrichtigungen gefixt
This commit is contained in:
MrWhiff
parent
8cb9306607
commit
4fc95986bf
|
|
@ -6,28 +6,22 @@
|
|||
<title>{% block title %}AstraOS{% endblock %}</title>
|
||||
<link rel="icon" href="{{ url_for('static', filename='AstraOS_Logo.png') }}" type="image/png">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||
<style>
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #111827;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #4b5563;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #6b7280;
|
||||
}
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #0a0a0f; }
|
||||
::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }
|
||||
|
||||
/* Hintergrund / global - dunkler und etwas dichter */
|
||||
body {
|
||||
background: radial-gradient(circle at top, #1b1b26, #0a0a0f 70%);
|
||||
background: radial-gradient(circle at top, #0f0f14, #050507 80%);
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
color: #e6e6e6;
|
||||
/* leichte overlay-Atmosphäre */
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
.custom-checkbox-label {
|
||||
display: flex;
|
||||
|
|
@ -90,13 +84,14 @@
|
|||
height: 64px;
|
||||
position: relative;
|
||||
}
|
||||
/* Startup-Blur: andere Akzentfarbe (z.B. teal) */
|
||||
#star .blur {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
filter: blur(12px);
|
||||
opacity: 0.7;
|
||||
background: rgba(192,132,252,0.7);
|
||||
background: rgba(6,182,212,0.35);
|
||||
}
|
||||
#startup p {
|
||||
margin-top: 1rem;
|
||||
|
|
@ -120,33 +115,68 @@
|
|||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: rgba(192, 132, 252, 0.2);
|
||||
background: rgba(6,182,212,0.12); /* neue, dezente Akzentfarbe */
|
||||
animation: float 20s infinite linear;
|
||||
}
|
||||
.dot.maintenance {
|
||||
background: rgba(243, 156, 18, 0.2);
|
||||
background: rgba(14,165,233,0.12); /* leicht variiert im Wartungsmodus */
|
||||
}
|
||||
@keyframes float {
|
||||
0% { transform: translateY(100vh) scale(1); }
|
||||
100% { transform: translateY(-10vh) scale(1.5); }
|
||||
}
|
||||
/* Breite, Abstand und Stacking für Benachrichtigungen (deutlich breiter) */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 9999;
|
||||
top: 1.25rem;
|
||||
right: 1.25rem;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: 0.6rem;
|
||||
align-items: flex-end;
|
||||
width: auto;
|
||||
pointer-events: none;
|
||||
padding-left: 0.5rem;
|
||||
max-width: calc(100% - 3rem);
|
||||
}
|
||||
/* Einzelne Toast-Boxen: normale Desktop-Breite (~28rem), mobil volle Breite */
|
||||
.toast {
|
||||
transform-origin: top right;
|
||||
pointer-events: auto;
|
||||
width: 100%;
|
||||
max-width: 28rem; /* "normale" Breite (ändern bei Bedarf) */
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
background: rgba(8,10,12,0.95); /* dunkler, leicht transparent */
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
/* Slide + Fade Animation (arbeitet mit Alpine/Tailwind x-transition Klassen) */
|
||||
transition: transform 0.32s cubic-bezier(.2,.9,.2,1), opacity 0.32s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
/* kleiner touch: Icon + Text vertikal zentriert */
|
||||
.toast .flex-1 { display: block; }
|
||||
|
||||
</style>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-200 font-sans antialiased">
|
||||
<body class="text-white flex flex-col min-h-screen font-sans antialiased">
|
||||
<!-- Loading Screen überall (vereinheitlicht) -->
|
||||
<div id="startup">
|
||||
<div id="star">
|
||||
<div class="blur"></div>
|
||||
<svg class="relative z-10" viewBox="0 0 100 100">
|
||||
<path d="M50 5 L63 40 L95 50 L63 60 L50 95 L37 60 L5 50 L37 40 Z" fill="#c084fc"/>
|
||||
<path d="M50 28 L58 45 L76 50 L58 55 L50 72 L42 55 L24 50 L42 45 Z" fill="#fff" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>AstraOS</p>
|
||||
</div>
|
||||
|
||||
<!-- Animierter Hintergrund überall -->
|
||||
<div class="animated-bg"></div>
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- Sidebar -->
|
||||
<aside class="fixed top-0 left-0 w-64 h-screen bg-black/40 border-r p-6 backdrop-blur-lg flex flex-col flex-shrink-0 z-20
|
||||
|
|
@ -281,7 +311,7 @@
|
|||
</aside>
|
||||
|
||||
<div class="ml-64 flex-1 flex flex-col min-h-screen">
|
||||
<!-- FLASH MESSAGES -->
|
||||
<!-- FLASH MESSAGES (zentral, breit, non-overlap) -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="toast-container" x-data>
|
||||
|
|
@ -293,21 +323,19 @@
|
|||
x-transition:leave="toast transition ease-in duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="max-w-lg w-full bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else ('blue' if category == 'info' else 'gray')) }}-500/40">
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
{% if category == 'success' %}
|
||||
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{% elif category == 'danger' %}
|
||||
<svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{% else %}
|
||||
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||||
<p class="text-sm font-medium text-gray-100">{{ message }}</p>
|
||||
</div>
|
||||
class="toast bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else ('blue' if category == 'info' else 'gray')) }}-500/40 p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0">
|
||||
{% if category == 'success' %}
|
||||
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{% elif category == 'danger' %}
|
||||
<svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{% else %}
|
||||
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-100">{{ message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -341,36 +369,36 @@
|
|||
<script src="{{ url_for('static', filename='JAVASCRIPT/main.js') }}"></script>
|
||||
<script>
|
||||
gsap.to("#star", {
|
||||
rotation: 360,
|
||||
duration: 1.2,
|
||||
ease: "power1.inOut",
|
||||
repeat: -1
|
||||
});
|
||||
gsap.to("#star", { scale: 1.2, duration: 0.8, yoyo: true, repeat: -1, ease: "power1.inOut" });
|
||||
setTimeout(() => {
|
||||
gsap.to("#startup", {
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
onComplete: () => {
|
||||
document.getElementById("startup").style.display = "none";
|
||||
gsap.to("#mainContent", { opacity: 1, duration: 0.1 });
|
||||
}
|
||||
});
|
||||
}, 400);
|
||||
const bg = document.querySelector('.animated-bg');
|
||||
if (bg) {
|
||||
for (let i = 0; i < 50; i++) {
|
||||
const dot = document.createElement('div');
|
||||
dot.classList.add('dot');
|
||||
if (document.body.classList.contains('maintenance-active')) {
|
||||
dot.classList.add('maintenance');
|
||||
}
|
||||
dot.style.left = `${Math.random() * 100}vw`;
|
||||
dot.style.animationDelay = `${Math.random() * -20}s`;
|
||||
dot.style.animationDuration = `${20 + Math.random() * 10}s`;
|
||||
bg.appendChild(dot);
|
||||
}
|
||||
}
|
||||
rotation: 360,
|
||||
duration: 1.2,
|
||||
ease: "power1.inOut",
|
||||
repeat: -1
|
||||
});
|
||||
gsap.to("#star", { scale: 1.2, duration: 0.8, yoyo: true, repeat: -1, ease: "power1.inOut" });
|
||||
setTimeout(() => {
|
||||
gsap.to("#startup", {
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
onComplete: () => {
|
||||
document.getElementById("startup").style.display = "none";
|
||||
gsap.to("#mainContent", { opacity: 1, duration: 0.1 });
|
||||
}
|
||||
});
|
||||
}, 400);
|
||||
const bg = document.querySelector('.animated-bg');
|
||||
if (bg) {
|
||||
for (let i = 0; i < 50; i++) {
|
||||
const dot = document.createElement('div');
|
||||
dot.classList.add('dot');
|
||||
if (document.body.classList.contains('maintenance-active')) {
|
||||
dot.classList.add('maintenance');
|
||||
}
|
||||
dot.style.left = `${Math.random() * 100}vw`;
|
||||
dot.style.animationDelay = `${Math.random() * -20}s`;
|
||||
dot.style.animationDuration = `${20 + Math.random() * 10}s`;
|
||||
bg.appendChild(dot);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% if maintenance_active %}
|
||||
<script>document.body.classList.add('maintenance-active');</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue