Logo in die Kopfzeile aufnehmen
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
1 parent
33a8adef0e
commit
3aa37033fd
8 files changed
+186
-3
No files matched your search
@@ -5,6 +5,8 @@ Rotatory plant die Moderation des werktäglichen Morning Meetings: Pro Tag werde
|
||||
ausgelost. Die Monatsansicht zeigt auf jedem Tag die Fotos der beiden Personen. Der fertige
|
||||
Plan lässt sich per Knopfdruck als Termine in einen Nextcloud-Kalender schreiben.
|
||||
|
||||
<img src="public/logo/rotatory-mark.svg" alt="" width="64" height="64" align="left">
|
||||
|
||||
## Funktionen
|
||||
|
||||
- Personen mit Vor- und Nachname, optionaler E-Mail, Foto (Upload, wird im Browser auf
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
{
|
||||
"persons": [],
|
||||
"absences": [],
|
||||
"holidays": [
|
||||
{
|
||||
"date": "2026-01-01",
|
||||
"name": "Neujahr",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-01-06",
|
||||
"name": "Heilige Drei Könige",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-04-03",
|
||||
"name": "Karfreitag",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-04-06",
|
||||
"name": "Ostermontag",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-05-01",
|
||||
"name": "Tag der Arbeit",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-05-14",
|
||||
"name": "Christi Himmelfahrt",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-05-25",
|
||||
"name": "Pfingstmontag",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-06-04",
|
||||
"name": "Fronleichnam",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-08-15",
|
||||
"name": "Mariä Himmelfahrt",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-10-03",
|
||||
"name": "Tag der Deutschen Einheit",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-11-01",
|
||||
"name": "Allerheiligen",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-12-25",
|
||||
"name": "1. Weihnachtstag",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2026-12-26",
|
||||
"name": "2. Weihnachtstag",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-01-01",
|
||||
"name": "Neujahr",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-01-06",
|
||||
"name": "Heilige Drei Könige",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-03-26",
|
||||
"name": "Karfreitag",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-03-29",
|
||||
"name": "Ostermontag",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-05-01",
|
||||
"name": "Tag der Arbeit",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-05-06",
|
||||
"name": "Christi Himmelfahrt",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-05-17",
|
||||
"name": "Pfingstmontag",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-05-27",
|
||||
"name": "Fronleichnam",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-08-15",
|
||||
"name": "Mariä Himmelfahrt",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-10-03",
|
||||
"name": "Tag der Deutschen Einheit",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-11-01",
|
||||
"name": "Allerheiligen",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-12-25",
|
||||
"name": "1. Weihnachtstag",
|
||||
"auto": true
|
||||
},
|
||||
{
|
||||
"date": "2027-12-26",
|
||||
"name": "2. Weihnachtstag",
|
||||
"auto": true
|
||||
}
|
||||
],
|
||||
"assignments": {},
|
||||
"exported": {},
|
||||
"settings": {
|
||||
"meetingTime": "09:30",
|
||||
"durationMinutes": 15,
|
||||
"bundesland": "BY",
|
||||
"calendarDisplayName": "Morning Meeting",
|
||||
"inviteAttendees": false,
|
||||
"historyWindowDays": 60,
|
||||
"holidaysSeeded": true,
|
||||
"targetCalendarHref": "",
|
||||
"targetCalendarName": "",
|
||||
"absenceCalendarHref": "",
|
||||
"absenceCalendarName": ""
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
1f47c69a927a879d9c5b1acaee7dd242d8f4e848ae03ac048e1c245061177f59
|
||||
+2
-2
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
+9
-1
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user