46 lines
2.2 KiB
HTML
46 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src 'unsafe-inline'; script-src 'self'">
|
|
<title>Git Manager</title>
|
|
<style>
|
|
html, body { margin: 0; height: 100%; overflow: hidden; background: transparent; user-select: none; cursor: default; }
|
|
body { font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
|
|
|
|
/* Logo und Schriftzug in der Mitte */
|
|
.marke {
|
|
position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
|
|
transition: opacity .28s ease, transform .32s ease;
|
|
}
|
|
.buehne { perspective: 700px; animation: rein .45s cubic-bezier(.2, .9, .3, 1.2) both; }
|
|
.logo {
|
|
width: 132px; height: 132px; display: block; object-fit: contain;
|
|
filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(90, 160, 255, .35));
|
|
animation: drehen 1.3s cubic-bezier(.45, .05, .25, 1) .15s infinite;
|
|
}
|
|
.name {
|
|
font-size: 34px; font-weight: 600; letter-spacing: .06em;
|
|
background: linear-gradient(90deg, #7fe3ff, #6c9cff); -webkit-background-clip: text; background-clip: text; color: transparent;
|
|
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .8));
|
|
animation: schrift .5s ease .25s both;
|
|
}
|
|
@keyframes rein { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
|
|
@keyframes drehen { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
|
|
@keyframes schrift { from { opacity: 0; transform: translateY(8px); letter-spacing: .3em; } to { opacity: 1; transform: none; letter-spacing: .06em; } }
|
|
|
|
/* das fertige Fenster als Bild, wächst von der Mitte nach außen */
|
|
#fenster { position: fixed; inset: 0; width: 100%; height: 100%; visibility: hidden; }
|
|
body.aufbau .marke { opacity: 0; transform: scale(.82); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="marke">
|
|
<div class="buehne"><img class="logo" src="./icon.png" alt=""></div>
|
|
<div class="name">Git Manager</div>
|
|
</div>
|
|
<img id="fenster" alt="">
|
|
<script src="./splash.js"></script>
|
|
</body>
|
|
</html>
|