ferdi2go/Rotatory
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logo in die Kopfzeile aufnehmen

Browse Source 
Animierte Marke aus zwei Bögen mit Pfeilspitzen: dreht sich beim Laden einmal
abbremsend und bleibt in der symmetrischen Endstellung; bei reduzierter
Bewegung sofort statisch. Farbe folgt dem Text (Weiß auf tradeo-Blau).
Statische, animierte und Favicon-Variante unter public/logo.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
ferdi2goandClaude Fable 5.1 committed 2026-09-16 13:08:21 +00:00
1 parent 33a8adef0e
commit 3aa37033fd
8 files changed
+186 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+2 -2
View File
@@ -7,11 +7,11 @@
<title>Rotatory – Morning-Meeting-Moderation</title>
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%23122E45'/%3E%3C/svg%3E">
<link rel="icon" href="logo/favicon.svg" type="image/svg+xml">
</head>
<body>
<header class="topbar">
<h1>Rotatory</h1>
<h1><svg class="logo" viewBox="0 0 800 800" aria-hidden="true" focusable="false"><g class="arc arc-a" transform="rotate(41.105 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g><g class="arc arc-b" transform="rotate(220.305 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g></svg><span>Rotatory</span></h1>
<nav aria-label="Bereiche">
<a href="#kalender" data-view="kalender">Kalender</a>
<a href="#personen" data-view="personen">Personen</a>
public/logo/favicon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><rect width="800" height="800" rx="120" fill="#122E45"/><g color="#FFFFFF" transform="translate(400 400) scale(0.72) translate(-400 -400)"><g transform="rotate(41.105 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g><g transform="rotate(220.305 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/logo/rotatory-mark-animated.svg
+13
View File
@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800" role="img" aria-label="Rotatory">
<title>Rotatory</title>
<g color="#122E45">
<g transform="rotate(41.105 400 400)">
<animateTransform attributeName="transform" type="rotate" values="-538 400 400; 1481.105 400 400" keyTimes="0; 1" calcMode="spline" keySplines="0.176 0.23 0.833 0.833" dur="7.04s" begin="0s" fill="freeze"/>
<g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g>
</g>
<g transform="rotate(220.305 400 400)">
<animateTransform attributeName="transform" type="rotate" values="-358.8 400 400; 1660.305 400 400" keyTimes="0; 1" calcMode="spline" keySplines="0.176 0.23 0.833 0.833" dur="7.04s" begin="0s" fill="freeze"/>
<g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

public/logo/rotatory-mark.svg
+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800" role="img" aria-label="Rotatory">
<title>Rotatory</title>
<g color="#122E45">
<g transform="rotate(41.105 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g>
<g transform="rotate(220.305 400 400)"><g transform="matrix(0.577,0.597,-0.597,0.577,400,400)"><g transform="matrix(0.9,0,0,0.9,0,0)"><ellipse rx="400" ry="400" cx="0" cy="0" fill="none" stroke="currentColor" stroke-width="55" stroke-linecap="round" stroke-dasharray="40 60" pathLength="100"/></g><g transform="matrix(1,0,0,1,15,12)"><path fill="currentColor" d="M168,185C168,185,95,346,95,346C95,346,288,329,288,329C288,329,168,185,168,185Z"/></g></g></g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/style.css
+9 -1
View File
@@ -49,7 +49,15 @@ svg.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-w
background: var(--tradeo-blue); color: var(--white);
position: sticky; top: 0; z-index: 5;
}
.topbar h1 { color: var(--white); padding: 14px 0; }
.topbar h1 { color: var(--white); padding: 14px 0; display: inline-flex; align-items: center; gap: 10px; }
/* Logo: zwei Bögen, die beim Laden einmal abbremsend rotieren und in der symmetrischen Endstellung stehen bleiben */
.logo { width: 28px; height: 28px; display: block; overflow: visible; }
.logo .arc { transform-box: view-box; transform-origin: 400px 400px; animation: 7.04s cubic-bezier(.176, .23, .833, .833) 1 forwards; }
.logo .arc-a { animation-name: logo-spin-a; }
.logo .arc-b { animation-name: logo-spin-b; }
@keyframes logo-spin-a { from { transform: rotate(-538deg); } to { transform: rotate(1481.105deg); } }
@keyframes logo-spin-b { from { transform: rotate(-358.8deg); } to { transform: rotate(1660.305deg); } }
@media (prefers-reduced-motion: reduce) { .logo .arc { animation: none; } }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; align-self: stretch; }
.topbar nav a {
display: inline-flex; align-items: center; padding: 0 12px; min-height: 56px;