lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modern designe

Browse Source
This commit is contained in:
lelo 2026-01-17 19:41:50 +00:00
parent 643f9b3908
commit e2ce075c96
8 changed files with 476 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

461
static/app.css
View File

@ -1,44 +1,59 @@
/* Ensure html and body take full height */ /* Ensure html and body take full height */
html, body { html, body {
background-color: var(--light-background); background: var(--light-background);
color: var(--main-text-color); color: var(--main-text-color);
height: 100%; height: 100%;
margin: 0; margin: 0;
/* padding: 0; */
} }
/* Global Styles */ /* Global Styles */
body { body {
font-family: 'Helvetica Neue', Arial, sans-serif; font-family: 'Manrope', 'Segoe UI', sans-serif;
padding-top: 70px; /* Adjust to your header height */ padding-top: 0;
overflow-x: hidden; /* Prevent horizontal scroll */ overflow-x: hidden;
letter-spacing: 0.01em;
line-height: 1.6;
background:
radial-gradient(1200px 900px at -10% 10%, rgba(34, 211, 238, 0.12), transparent 40%),
radial-gradient(1100px 800px at 110% -20%, rgba(59, 130, 246, 0.14), transparent 45%),
var(--light-background);
}
/* Header styles */
.site-header {
background: linear-gradient(120deg, var(--dark-background), #13253f);
color: var(--header-text-color);
position: sticky;
top: 0;
width: 100%;
z-index: 2000;
display: flex;
align-items: center;
gap: 16px;
padding: 10px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.site-header img.logo {
height: 54px;
margin-right: 6px;
filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25));
}
.site-header h1 {
font-size: 1.4rem;
margin: 0;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 800;
} }
/* Header styles */
.site-header {
background-color: var(--dark-background);
color: var(--header-text-color);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
display: flex;
align-items: center;
padding: 10px 20px;
}
.site-header img.logo {
height: 50px;
margin-right: 15px;
}
.site-header h1 {
font-size: 1.5em;
margin: 0;
}
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100%; min-height: 100%;
padding-bottom: 200px; padding-bottom: 220px;
} }
.wrapper > .admin-nav, .wrapper > .admin-nav,
@ -49,79 +64,159 @@ body {
.wrapper > main, .wrapper > main,
.wrapper > section { .wrapper > section {
flex: 1 1 auto; flex: 1 1 auto;
padding-top: 6px;
} }
.wrapper > footer { .wrapper > footer {
flex: 0 0 auto; flex: 0 0 auto;
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
width: 90%; width: 95%;
margin: 0 auto;
padding: 20px 0;
} }
.container a { .container a {
font-size: 18px; font-size: 17px;
} }
.container-fluid { .container-fluid {
padding: 24px;
}
/* Carded content shell */
main.tab-content,
section.tab-content {
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--border-color);
box-shadow: none;
padding: 20px; padding: 20px;
margin-top: -1px;
}
/* Search view container (custom element) */
search {
display: block;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--border-color);
border-radius: 0 0 16px 16px;
box-shadow: none;
margin-top: -1px;
padding: 16px 0 10px;
} }
/* Breadcrumb Styles */ /* Breadcrumb Styles */
.breadcrumb a { .breadcrumb {
font-size: 19px; display: flex;
text-decoration: none; align-items: center;
color: var(--main-text-color); gap: 8px;
flex-wrap: wrap;
padding: 10px 16px;
margin: 0 0 14px;
} }
.breadcrumb a {
font-size: 17px;
text-decoration: none;
color: var(--brand-navy);
font-weight: 700;
}
.breadcrumb span { .breadcrumb span {
font-size: 19px; font-size: 17px;
color: #ccc; color: var(--muted-text);
margin-left: 5px; margin: 0;
margin-right: 5px;
margin-bottom: 10px;
} }
/* Admin Nav Styles */ /* Admin Nav Styles */
.admin-nav { .admin-nav {
color: #ccc; color: var(--brand-ink);
border: 1px solid #ccc; border: 1px solid var(--border-color);
padding: 10px; background: rgba(255, 255, 255, 0.9);
background-color: #979797; margin-bottom: 12px;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
position: relative;
z-index: 1000;
overflow: visible;
}
.admin-nav-rail {
position: relative;
overflow: visible;
}
.admin-nav-track {
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
} }
.admin-nav a { .admin-nav a {
color: #ccc; color: var(--brand-ink);
text-decoration: none; text-decoration: none;
padding: 5px 0; padding: 8px 12px;
font-weight: 600;
font-size: 13px;
border: 1px solid transparent;
background: linear-gradient(135deg, #fff, #f4f7fb);
transition: all 0.2s ease;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
flex-shrink: 0;
}
.admin-nav a:hover {
color: var(--brand-sky);
border-color: var(--border-color);
transform: translateY(-1px);
}
.admin-nav span {
color: var(--border-color);
display: none;
} }
.admin-nav .dropdown-toggle { .admin-nav .dropdown-toggle {
color: #ccc; color: var(--brand-ink);
text-decoration: none; padding: 8px 12px;
padding: 5px 0;
} }
.admin-nav .dropdown-toggle::after { .admin-nav .dropdown-toggle::after {
border-top-color: #ccc; display: none; /* hide default Bootstrap caret */
} }
.admin-nav .dropdown-menu { .admin-nav .dropdown-menu {
background-color: #f2f2f2; background-color: #fff;
border-color: #ccc; border-color: var(--border-color);
border-radius: 10px;
box-shadow: var(--card-shadow);
z-index: 4000;
position: absolute;
top: 0;
left: 100%;
margin-top: 0;
margin-left: 8px;
transform: none;
} }
.admin-nav .dropdown-item { .admin-nav .dropdown-item {
color: #333; color: var(--brand-ink);
padding-left: 14px; padding-left: 14px;
padding-right: 14px; padding-right: 14px;
} }
.admin-nav .dropdown-item:hover, .admin-nav .dropdown-item:hover,
.admin-nav .dropdown-item:focus { .admin-nav .dropdown-item:focus {
background-color: #e6e6e6; background-color: #eef4ff;
color: #000; color: var(--brand-navy);
} }
/* List Styles */ /* List Styles */
@ -138,18 +233,29 @@ div.directory-item a, li.directory-item a, li.file-item a, li.link-item a {
/* Directory Items (in a list) */ /* Directory Items (in a list) */
.directory-item, .link-item, .directory-item, .file-item { .directory-item, .link-item, .directory-item, .file-item {
margin-bottom: 10px; margin-bottom: 12px;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1); box-shadow: var(--card-shadow);
padding: 10px 15px; padding: 12px 18px;
border: 1px solid var(--border-color);
transition: all 0.2s ease;
}
.directory-item:hover,
.link-item:hover,
.file-item:hover {
border-color: var(--brand-sky);
box-shadow: 0 14px 26px rgba(59, 130, 246, 0.14);
transform: translateY(-1px);
} }
/* Grid Layout for Directories */ /* Grid Layout for Directories */
.directories-grid { .directories-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0 10px; column-gap: 14px;
row-gap: 0;
text-align: center; text-align: center;
} }
@ -159,49 +265,58 @@ div.directory-item a, li.directory-item a, li.file-item a, li.link-item a {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1); box-shadow: var(--card-shadow);
} }
/* Link Styles */ /* Link Styles */
.directory-link, .directory-link,
.link-link, .link-link,
a.play-file { a.play-file {
color: var(--player-text-color); color: var(--brand-ink);
text-decoration: none; text-decoration: none;
word-break: break-all; word-break: break-all;
font-weight: 600;
} }
a.show-transcript { a.show-transcript {
text-decoration: none; text-decoration: none;
color: var(--main-text-color); color: var(--brand-navy);
font-size: 20px; font-size: 18px;
margin-left: 10px; margin-left: 10px;
font-weight: 600;
} }
a.show-transcript:hover { a.show-transcript:hover {
color: rgb(113, 146, 167); color: var(--brand-sky);
} }
.highlight { .highlight {
background-color: yellow; background-color: #fffbcc;
padding: 2px 4px;
border-radius: 4px;
} }
#transcriptContent code.timecode-link { #transcriptContent code.timecode-link {
cursor: pointer; cursor: pointer;
font-size: small; font-size: small;
} }
a.create-share { a.create-share {
text-decoration: none; text-decoration: none;
color: var(--main-text-color); color: var(--brand-navy);
font-size: 20px; font-size: 18px;
margin-left: 10px; margin-left: 10px;
font-weight: 600;
} }
a.create-share:hover { a.create-share:hover {
color: rgb(113, 146, 167); color: var(--brand-sky);
} }
.currently-playing { .currently-playing {
background-color: var(--selected-background); background-color: var(--selected-background);
border: 1px solid var(--brand-sky);
} }
/* Footer Player Styles */ /* Footer Player Styles */
@ -210,14 +325,15 @@ footer {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: var(--dark-background); background: linear-gradient(120deg, #0b1220, #0f172a);
color: #fff; color: #fff;
padding: 7px; padding: 10px 14px;
text-align: center; text-align: center;
z-index: 1000; /* Make sure it sits on top */ z-index: 1000; /* Make sure it sits on top */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
} }
/* Modal Styles */ /* Modal Styles */
@ -242,14 +358,18 @@ footer {
position: relative; position: relative;
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
display: flex;
flex-direction: column;
} }
#transcriptModal .close { #transcriptModal .close {
position: absolute; position: sticky;
right: 15px; top: 0;
top: 10px; right: 0;
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
margin-left: auto;
z-index: 5;
} }
/* Basic Markdown Styles */ /* Basic Markdown Styles */
@ -313,9 +433,10 @@ footer {
.image-item { .image-item {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: 2px solid #ccc; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 12px;
background: #f9f9f9; background: linear-gradient(145deg, #ffffff, #f6f8fc);
box-shadow: var(--card-shadow);
} }
/* the filename overlay, centered at bottom */ /* the filename overlay, centered at bottom */
@ -422,41 +543,60 @@ footer {
/* Tab Navigation Styles */ /* Tab Navigation Styles */
.main-tabs { .main-tabs {
background-color: var(--dark-background);
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
padding: 0; padding: 6px 18px 0;
margin: 0; gap: 0;
gap: 2px; border-bottom: 1px solid var(--border-color);
border-bottom: 2px solid #444; flex-wrap: nowrap;
border-radius: 0;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
} }
.tab-button { .tab-button {
background: #333; background: rgba(217, 217, 217, 0.5);
border: 1px solid #444; border: 1px solid var(--border-color);
border-bottom: none; border-bottom: none;
color: #999; color: var(--muted-text);
padding: 6px 20px; padding: 10px 16px;
font-size: 14px; font-size: 13px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
border-radius: 5px 5px 0 0; border-radius: 10px 10px 0 0;
margin: 0; margin: 0 6px 0 0;
position: relative; position: relative;
top: 2px; font-weight: 700;
letter-spacing: 0.04em;
text-transform: none;
box-shadow:
0 -10px 18px -12px rgba(15, 23, 42, 0.18),
10px 0 18px -12px rgba(15, 23, 42, 0.12),
-10px 0 18px -12px rgba(15, 23, 42, 0.12);
flex: 0 0 auto;
} }
.tab-button:hover { .tab-button:hover {
color: #fff; color: var(--brand-ink);
background: #3a3a3a; background: rgba(255, 255, 255, 0.92);
} }
.tab-button.active { .tab-button.active {
color: var(--main-text-color, #000); color: var(--brand-ink);
background: var(--light-background); background: rgba(255, 255, 255, 0.92);
border-color: #444; border-color: var(--border-color);
border-bottom-color: var(--light-background); z-index: 2;
z-index: 1; box-shadow:
0 -12px 22px -12px rgba(15, 23, 42, 0.22),
12px 0 20px -14px rgba(15, 23, 42, 0.14),
-12px 0 20px -14px rgba(15, 23, 42, 0.14);
margin-bottom: -1px;
} }
.tab-content { .tab-content {
@ -471,27 +611,28 @@ footer {
.messages-section-header { .messages-section-header {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 0 0 8px; padding: 0 0 10px;
} }
.messages-container { .messages-container {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 20px 0; padding: 10px 0 24px;
} }
.message-card { .message-card {
background: var(--card-background, #fff); background: linear-gradient(145deg, #ffffff, #f7f9ff);
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 14px;
padding: 20px; padding: 20px 22px;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: var(--card-shadow);
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease, transform 0.2s ease;
} }
.message-card:hover { .message-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 20px 38px rgba(15, 23, 42, 0.16);
transform: translateY(-2px);
} }
.message-header { .message-header {
@ -500,18 +641,18 @@ footer {
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 2px solid #e0e0e0; border-bottom: 1px dashed var(--border-color);
} }
.message-title { .message-title {
font-size: 1.5em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
color: var(--main-text-color); color: var(--brand-ink);
margin: 0; margin: 0;
} }
.message-datetime { .message-datetime {
color: #666; color: var(--muted-text);
font-size: 0.9em; font-size: 0.9em;
font-style: italic; font-style: italic;
} }
@ -527,9 +668,9 @@ footer {
gap: 6px; gap: 6px;
padding: 8px 16px; padding: 8px 16px;
margin: 4px 0; margin: 4px 0;
background: #f0f4f8; background: #ecf6ff;
color: #495057; color: #0f172a;
border: 1px solid #d1dce5; border: 1px solid #bed8ff;
border-radius: 6px; border-radius: 6px;
font-size: 0.95em; font-size: 0.95em;
font-weight: 500; font-weight: 500;
@ -539,9 +680,9 @@ footer {
} }
.message-content .folder-link-btn:hover { .message-content .folder-link-btn:hover {
background: #e3eaf0; background: #dff0ff;
border-color: #b8c5d0; border-color: #93c5fd;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12); box-shadow: 0 6px 18px rgba(14, 165, 233, 0.24);
} }
.message-content .folder-link-btn:active { .message-content .folder-link-btn:active {
@ -554,13 +695,13 @@ footer {
} }
.message-content a { .message-content a {
color: #007bff; color: var(--brand-sky);
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
.message-content a:hover { .message-content a:hover {
color: #0056b3; color: #0ea5e9;
text-decoration: underline; text-decoration: underline;
} }
@ -620,10 +761,12 @@ footer {
} }
.message-content blockquote { .message-content blockquote {
border-left: 4px solid #ccc; border-left: 4px solid var(--border-color);
padding-left: 15px; padding-left: 15px;
color: #666; color: var(--muted-text);
font-style: italic; font-style: italic;
background: #f8fbff;
border-radius: 6px;
} }
.message-image { .message-image {
@ -638,7 +781,7 @@ footer {
.message-actions { .message-actions {
margin-top: 15px; margin-top: 15px;
padding-top: 10px; padding-top: 10px;
border-top: 1px solid #e0e0e0; border-top: 1px solid var(--border-color);
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
@ -654,12 +797,12 @@ footer {
} }
.btn-edit { .btn-edit {
background-color: #007bff; background: linear-gradient(135deg, #2563eb, #22d3ee);
color: white; color: white;
} }
.btn-edit:hover { .btn-edit:hover {
background-color: #0056b3; background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
} }
.btn-delete { .btn-delete {
@ -674,7 +817,7 @@ footer {
.no-messages { .no-messages {
text-align: center; text-align: center;
padding: 40px; padding: 40px;
color: #999; color: var(--muted-text);
font-size: 1.2em; font-size: 1.2em;
} }
@ -690,9 +833,9 @@ footer {
display: grid; display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 0; gap: 0;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-top: 0; border-top: 0;
border-radius: 0 0 6px 6px; border-radius: 0 0 10px 10px;
overflow: visible; overflow: visible;
} }
@ -701,9 +844,9 @@ footer {
} }
.calendar-day { .calendar-day {
background: var(--card-background, #fff); background: #ffffff;
border-bottom: 1px solid #ddd; border-bottom: 1px solid var(--border-color);
padding: 8px 10px 4px; padding: 12px 12px 6px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
@ -713,19 +856,19 @@ footer {
} }
.calendar-day-today { .calendar-day-today {
background: #f7fbff; background: linear-gradient(135deg, #f6fbff, #ecf4ff);
box-shadow: inset 0 0 0 2px #4da3ff; box-shadow: inset 0 0 0 2px #3b82f6;
border-color: #4da3ff; border-color: #3b82f6;
} }
.calendar-day-sunday, .calendar-day-sunday,
.calendar-day-holiday { .calendar-day-holiday {
background: #fff7f7; background: #fff8f5;
} }
.calendar-day-today.calendar-day-sunday, .calendar-day-today.calendar-day-sunday,
.calendar-day-today.calendar-day-holiday { .calendar-day-today.calendar-day-holiday {
background: linear-gradient(135deg, #f7fbff 0%, #f7fbff 60%, #fff2f2 100%); background: linear-gradient(135deg, #f6fbff 0%, #f6fbff 60%, #fff1ed 100%);
} }
.calendar-day-sunday .calendar-day-header, .calendar-day-sunday .calendar-day-header,
@ -757,7 +900,7 @@ footer {
@media (min-width: 992px) { @media (min-width: 992px) {
.calendar-grid { .calendar-grid {
grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr));
border-radius: 0 0 8px 8px; border-radius: 0 0 12px 12px;
} }
.calendar-weekday-header { .calendar-weekday-header {
@ -765,21 +908,21 @@ footer {
grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr));
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
color: #999; color: var(--muted-text);
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-bottom: 0; border-bottom: 0;
border-radius: 8px 8px 0 0; border-radius: 12px 12px 0 0;
overflow: visible; overflow: visible;
position: sticky; position: sticky;
top: 70px; top: 70px;
z-index: 900; z-index: 900;
background: var(--card-background, #fff); background: var(--card-background, #fff);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
} }
.calendar-day { .calendar-day {
border-bottom: 1px solid #ddd; border-bottom: 1px solid var(--border-color);
border-right: 1px solid #ddd; border-right: 1px solid var(--border-color);
} }
.calendar-day:nth-child(7n) { .calendar-day:nth-child(7n) {
@ -795,17 +938,17 @@ footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 6px; margin-bottom: 8px;
gap: 8px; gap: 8px;
} }
.calendar-day-name { .calendar-day-name {
font-weight: 600; font-weight: 700;
text-transform: capitalize; text-transform: capitalize;
} }
.calendar-day-date { .calendar-day-date {
color: #666; color: var(--muted-text);
font-size: 0.95rem; font-size: 0.95rem;
white-space: nowrap; white-space: nowrap;
} }
@ -817,9 +960,9 @@ footer {
} }
.calendar-day thead th { .calendar-day thead th {
background: #f1f1f1; background: #f6f8fb;
color: #666; color: var(--muted-text);
border-color: #ddd; border-color: var(--border-color);
} }
.calendar-day.empty thead { .calendar-day.empty thead {
@ -851,7 +994,7 @@ footer {
.details-indicator { .details-indicator {
font-weight: 700; font-weight: 700;
color: #666; color: var(--brand-sky);
margin-left: 6px; margin-left: 6px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -869,7 +1012,7 @@ footer {
} }
.calendar-details-row td { .calendar-details-row td {
background: #f8f9fa; background: #f8fbff;
} }
.calendar-inline-actions { .calendar-inline-actions {
@ -882,8 +1025,10 @@ footer {
.file-browser-content { .file-browser-content {
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 5px; border-radius: 10px;
background: #fff;
box-shadow: var(--card-shadow);
} }
.file-browser-content .list-group-item { .file-browser-content .list-group-item {
@ -906,15 +1051,15 @@ footer {
} }
.file-browser-panel { .file-browser-panel {
background-color: #f5f5f5; background-color: #f8fbff;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 5px; border-radius: 12px;
padding: 15px; padding: 16px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.file-browser-panel h6 { .file-browser-panel h6 {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
color: #333; color: var(--brand-ink);
} }

26
static/app.js
View File

@ -252,9 +252,9 @@ function renderContent(data) {
contentHTML += '<div class="directories-grid">'; contentHTML += '<div class="directories-grid">';
data.directories.forEach(dir => { data.directories.forEach(dir => {
if (admin_enabled && data.breadcrumbs.length != 1 && dir.share) { if (admin_enabled && data.breadcrumbs.length != 1 && dir.share) {
share_link = `<a href="#" class="create-share" data-url="${dir.path}">⚙️</a>`; share_link = `<a href="#" class="create-share" data-url="${dir.path}"><i class="bi bi-gear"></i></a>`;
} }
contentHTML += `<div class="directory-item"><a href="#" class="directory-link" data-path="${dir.path}">📁 ${dir.name}</a> contentHTML += `<div class="directory-item"><a href="#" class="directory-link" data-path="${dir.path}"><i class="bi bi-folder"></i> ${dir.name}</a>
${share_link} ${share_link}
</div>`; </div>`;
}); });
@ -262,22 +262,22 @@ function renderContent(data) {
} else { } else {
contentHTML += '<ul>'; contentHTML += '<ul>';
if (data.breadcrumbs.length === 1 && Array.isArray(data.folder_today) && data.folder_today.length > 0) { if (data.breadcrumbs.length === 1 && Array.isArray(data.folder_today) && data.folder_today.length > 0) {
contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="heute">📅 Heute</a></li>`; contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="heute"><i class="bi bi-calendar2-day"></i> Heute</a></li>`;
} else if (data.breadcrumbs.length === 1 && Array.isArray(data.folder_yesterday) && data.folder_yesterday.length > 0) { } else if (data.breadcrumbs.length === 1 && Array.isArray(data.folder_yesterday) && data.folder_yesterday.length > 0) {
contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="gestern">📅 Gestern</a></li>`; contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="gestern"><i class="bi bi-calendar2-day"></i> Gestern</a></li>`;
} }
if (data.breadcrumbs.length === 1 && data.toplist_enabled) { if (data.breadcrumbs.length === 1 && data.toplist_enabled) {
contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="toplist">🔥 oft angehört</a></li>`; contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="toplist"><i class="bi bi-graph-up"></i> oft angehört</a></li>`;
} }
data.directories.forEach(dir => { data.directories.forEach(dir => {
if (admin_enabled && data.breadcrumbs.length != 1 && dir.share) { if (admin_enabled && data.breadcrumbs.length != 1 && dir.share) {
share_link = `<a href="#" class="create-share" data-url="${dir.path}">⚙️</a>`; share_link = `<a href="#" class="create-share" data-url="${dir.path}"><i class="bi bi-gear"></i></a>`;
} }
if (dir.path.includes('toplist')) { if (dir.path.includes('toplist')) {
link_symbol = '⭐'; link_symbol = '<i class="bi bi-star"></i>';
} else { } else {
link_symbol = '📁'; link_symbol = '<i class="bi bi-folder"></i>';
} }
contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="${dir.path}">${link_symbol} ${dir.name}</a>${share_link}</li>`; contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="${dir.path}">${link_symbol} ${dir.name}</a>${share_link}</li>`;
}); });
@ -286,7 +286,7 @@ function renderContent(data) {
} }
// Add search link at top level above directories/files // Add search link at top level above directories/files
if (data.breadcrumbs.length === 1) { if (data.breadcrumbs.length === 1) {
contentHTML = `<ul><li class="link-item" onclick="viewSearch()"><a onclick="viewSearch()" class="link-link">🔎 Suche</a></li></ul>` + contentHTML; contentHTML = `<ul><li class="link-item" onclick="viewSearch()"><a onclick="viewSearch()" class="link-link"><i class="bi bi-search"></i> Suche</a></li></ul>` + contentHTML;
} }
// Render files (including music and non-image files) // Render files (including music and non-image files)
@ -294,18 +294,18 @@ function renderContent(data) {
if (nonImageFiles.length > 0) { if (nonImageFiles.length > 0) {
contentHTML += '<ul>'; contentHTML += '<ul>';
nonImageFiles.forEach((file, idx) => { nonImageFiles.forEach((file, idx) => {
let symbol = '📄'; let symbol = '<i class="bi bi-file-earmark"></i>';
if (file.file_type === 'music') { if (file.file_type === 'music') {
symbol = '🔊'; symbol = '<i class="bi bi-volume-up"></i>';
currentMusicFiles.push({ path: file.path, index: idx, title: file.name.replace('.mp3', '') }); currentMusicFiles.push({ path: file.path, index: idx, title: file.name.replace('.mp3', '') });
} else if (file.file_type === 'image') { } else if (file.file_type === 'image') {
symbol = '🖼️'; symbol = '<i class="bi bi-image"></i>';
} }
const indexAttr = file.file_type === 'music' ? ` data-index="${currentMusicFiles.length - 1}"` : ''; const indexAttr = file.file_type === 'music' ? ` data-index="${currentMusicFiles.length - 1}"` : '';
contentHTML += `<li class="file-item"> contentHTML += `<li class="file-item">
<a href="#" class="play-file"${indexAttr} data-url="${file.path}" data-file-type="${file.file_type}">${symbol} ${file.name.replace('.mp3', '')}</a>`; <a href="#" class="play-file"${indexAttr} data-url="${file.path}" data-file-type="${file.file_type}">${symbol} ${file.name.replace('.mp3', '')}</a>`;
if (file.has_transcript) { if (file.has_transcript) {
contentHTML += `<a href="#" class="show-transcript" data-url="${file.transcript_url}" data-audio-url="${file.path}" title="Show Transcript">&#128196;</a>`; contentHTML += `<a href="#" class="show-transcript" data-url="${file.transcript_url}" data-audio-url="${file.path}" title="Show Transcript"><i class="bi bi-journal-text"></i></a>`;
} }
contentHTML += `</li>`; contentHTML += `</li>`;
}); });

69
static/audioplayer.css
View File

@ -1,23 +1,24 @@
.audio-player-container { .audio-player-container {
background-color: #fff; background: linear-gradient(135deg, #f9fbff, #eef4ff);
border-radius: 8px; border-radius: 14px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
padding: 7px; border: 1px solid #d7e3f4;
width: 100%; padding: 12px 16px;
width: min(1100px, 100%);
display: none; display: none;
color: #1f2937;
} }
/* Now Playing Info */ /* Now Playing Info */
.now-playing-info { .now-playing-info {
margin-top: 5px; margin-top: 5px;
font-size: 16px; font-size: 15px;
color: var(--main-text-color); color: #1f2937;
text-align: center; text-align: center;
} }
.audio-player { .audio-player {
--player-button-width: 4em; --control-size: 3.4em;
--sound-button-width: 3em;
--space: 0.5em; --space: 0.5em;
} }
@ -26,6 +27,7 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
gap: var(--space); /* ensures spacing between controls */ gap: var(--space); /* ensures spacing between controls */
color: #1f2937;
} }
/* Make the slider container fill the available space and stack its children vertically */ /* Make the slider container fill the available space and stack its children vertically */
@ -40,10 +42,10 @@
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
height: 0.5em; height: 0.5em;
background-color: #ccc; background-color: #e6edf7;
border-radius: 5px; border-radius: 5px;
background-size: 0% 100%; background-size: 0% 100%;
background-image: linear-gradient(var(--dark-background), var(--dark-background)); background-image: linear-gradient(90deg, #0b1220, #0f172a);
background-repeat: no-repeat; background-repeat: no-repeat;
appearance: none; appearance: none;
outline: none; outline: none;
@ -56,9 +58,9 @@
width: 1em; width: 1em;
height: 1em; height: 1em;
border-radius: 50%; border-radius: 50%;
background-color: var(--dark-background); background-color: #0f172a;
cursor: pointer; cursor: pointer;
border: none; border: 2px solid #0b1220;
outline: none; outline: none;
} }
@ -67,9 +69,9 @@
width: 1em; width: 1em;
height: 1em; height: 1em;
border-radius: 50%; border-radius: 50%;
background-color: var(--dark-background); background-color: #0f172a;
cursor: pointer; cursor: pointer;
border: none; border: 2px solid #0b1220;
outline: none; outline: none;
} }
@ -78,9 +80,9 @@
width: 1em; width: 1em;
height: 1em; height: 1em;
border-radius: 50%; border-radius: 50%;
background-color: var(--dark-background); background-color: #0f172a;
cursor: pointer; cursor: pointer;
border: none; border: 2px solid #0b1220;
outline: none; outline: none;
} }
@ -104,18 +106,37 @@
.player-button, .player-button,
.sound-button { .sound-button {
background-color: transparent; background-color: #0f172a;
border: 0; border: 1px solid #0f172a;
cursor: pointer; cursor: pointer;
padding: 0; padding: 6px;
border-radius: 12px;
transition: background-color 0.2s ease, transform 0.2s ease;
} }
.player-button { .player-button {
width: var(--player-button-width); width: var(--control-size);
height: var(--player-button-width); height: var(--control-size);
} }
.sound-button { .sound-button {
width: var(--sound-button-width); width: var(--control-size);
height: var(--sound-button-width); height: var(--control-size);
}
.player-button:hover,
.sound-button:hover {
background-color: #0b1220;
transform: translateY(-1px);
}
.player-button svg path,
.sound-button svg path {
fill: #f9fbff;
}
.timeline::-webkit-slider-thumb,
.timeline::-moz-range-thumb,
.timeline::-ms-thumb {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
} }

2
static/gallery.js
View File

@ -417,7 +417,7 @@ function setAutoPlay(active) {
const playButton = document.getElementById('gallery-play'); const playButton = document.getElementById('gallery-play');
isAutoPlay = active; isAutoPlay = active;
if (playButton) { if (playButton) {
playButton.textContent = active ? '⏸' : '▶'; playButton.textContent = active ? '||' : '>';
playButton.setAttribute('aria-pressed', active ? 'true' : 'false'); playButton.setAttribute('aria-pressed', active ? 'true' : 'false');
playButton.classList.toggle('playing', active); playButton.classList.toggle('playing', active);
} }

66
static/general.js
View File

@ -1,6 +1,66 @@
document.addEventListener('DOMContentLoaded', function() { function wireAdminDropdowns() {
// (No per-icon setup needed here—just ensure your CSS is in place.) const reposition = (toggle, menu) => {
}); const rect = toggle.getBoundingClientRect();
const gutter = 8;
const menuWidth = menu.offsetWidth || 220;
const menuHeight = menu.offsetHeight || 0;
// Prefer placing the menu to the right of the toggle; clamp within viewport.
let left = rect.right + gutter;
if (left + menuWidth > window.innerWidth - gutter) {
left = Math.max(gutter, window.innerWidth - menuWidth - gutter);
}
let top = Math.max(gutter, Math.min(rect.top, window.innerHeight - menuHeight - gutter));
menu.style.position = 'fixed';
menu.style.transform = 'none';
menu.style.top = `${top}px`;
menu.style.left = `${left}px`;
menu.style.right = 'auto';
menu.style.minWidth = `${Math.max(rect.width, 160)}px`;
menu.style.maxWidth = '260px';
menu.style.display = 'block';
menu.dataset.dropdownOpen = '1';
menu.classList.add('show');
};
const resetMenu = (menu) => {
menu.style.position = '';
menu.style.transform = '';
menu.style.top = '';
menu.style.left = '';
menu.style.right = '';
menu.style.minWidth = '';
menu.style.maxWidth = '';
menu.style.display = '';
menu.classList.remove('show');
delete menu.dataset.dropdownOpen;
};
document.querySelectorAll('.admin-nav .dropdown-toggle').forEach((toggle) => {
if (toggle.dataset.dropdownWired) return;
toggle.dataset.dropdownWired = '1';
const menu = toggle.nextElementSibling;
if (!menu) return;
toggle.addEventListener('shown.bs.dropdown', () => reposition(toggle, menu));
toggle.addEventListener('hide.bs.dropdown', () => resetMenu(menu));
window.addEventListener('scroll', () => {
if (menu.dataset.dropdownOpen) reposition(toggle, menu);
}, { passive: true });
window.addEventListener('resize', () => {
if (menu.dataset.dropdownOpen) reposition(toggle, menu);
});
});
}
if (document.readyState === 'complete' || document.readyState === 'interactive') {
wireAdminDropdowns();
} else {
document.addEventListener('DOMContentLoaded', wireAdminDropdowns);
}
// 1) Delegate clicks on any .toggle-icon, now or in the future: // 1) Delegate clicks on any .toggle-icon, now or in the future:
document.addEventListener('click', function(e) { document.addEventListener('click', function(e) {

6
static/search.js
View File

@ -14,11 +14,11 @@ document.addEventListener('DOMContentLoaded', function() {
card.className = 'card'; card.className = 'card';
card.innerHTML = ` card.innerHTML = `
<div class="card-body"> <div class="card-body">
<p><button class="btn btn-light" onclick="player.loadTrack('${file.relative_path}')" style="width:100%;">🔊 ${filenameWithoutExtension}</button></p> <p><button class="btn btn-light" onclick="player.loadTrack('${file.relative_path}')" style="width:100%;"><i class="bi bi-volume-up"></i> ${filenameWithoutExtension}</button></p>
<p><button onclick="window.open('/path/${file.relative_path}', '_self');" class="btn btn-light btn-sm" style="width:100%;">📁 ${parentFolder}</button></p> <p><button onclick="window.open('/path/${file.relative_path}', '_self');" class="btn btn-light btn-sm" style="width:100%;"><i class="bi bi-folder"></i> ${parentFolder}</button></p>
<p class="card-text">Anzahl Downloads: ${file.hitcount}</p> <p class="card-text">Anzahl Downloads: ${file.hitcount}</p>
${ file.performance_date !== undefined ? `<p class="card-text">Datum: ${file.performance_date}</p>` : ``} ${ file.performance_date !== undefined ? `<p class="card-text">Datum: ${file.performance_date}</p>` : ``}
${ file.transcript_hits !== undefined ? `<p class="card-text">Treffer im Transkript: ${file.transcript_hits} <a href="#" class="show-transcript" data-url="${transcriptURL}" data-audio-url="${file.relative_path}" highlight="${file.query}">&#128196;</a></p>` : ``} ${ file.transcript_hits !== undefined ? `<p class="card-text">Treffer im Transkript: ${file.transcript_hits} <a href="#" class="show-transcript" data-url="${transcriptURL}" data-audio-url="${file.relative_path}" highlight="${file.query}"><i class="bi bi-journal-text"></i></a></p>` : ``}
</div> </div>
`; `;
resultsDiv.appendChild(card); resultsDiv.appendChild(card);

37
templates/app.html
View File

@ -29,6 +29,10 @@
<meta name="mobile-web-app-status-bar-style" content="default"> <meta name="mobile-web-app-status-bar-style" content="default">
<meta name="mobile-web-app-title" content="Gottesdienste"> <meta name="mobile-web-app-title" content="Gottesdienste">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
@ -51,12 +55,14 @@
<div class="wrapper"> <div class="wrapper">
{% if admin_enabled %} {% if admin_enabled %}
<div class="admin-nav"> <div class="admin-nav">
<div class="admin-nav-rail">
<div class="admin-nav-track">
<a href="{{ url_for('mylinks') }}">Meine Links</a> <a href="{{ url_for('mylinks') }}">Meine Links</a>
<span> | </span> <span> | </span>
<a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config">Ordnerkonfiguration</a> <a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config">Ordnerkonfiguration</a>
<span> | </span> <span> | </span>
<div class="dropdown d-inline-block"> <div class="dropdown dropend d-inline-block">
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Auswertungen Auswertungen
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@ -67,6 +73,8 @@
<li><a class="dropdown-item" href="{{ url_for('search_db_analyzer') }}">Dateiindex Analyse</a></li> <li><a class="dropdown-item" href="{{ url_for('search_db_analyzer') }}">Dateiindex Analyse</a></li>
</ul> </ul>
</div> </div>
</div>
</div>
</div> </div>
{% endif %} {% endif %}
@ -81,18 +89,16 @@
<!-- Browse Section --> <!-- Browse Section -->
<main id="browse-section" class="tab-content active"> <main id="browse-section" class="tab-content active">
<div class="container"> <div id="breadcrumbs" class="breadcrumb"></div>
<div id="breadcrumbs" class="breadcrumb"></div> <div id="content"></div>
<div id="content"></div> <div id="directory-controls">
<div id="directory-controls"> <button id="reload-button" onclick="reloadDirectory()" title="Reload Directory">
<button id="reload-button" onclick="reloadDirectory()" title="Reload Directory"> <svg width="70px" height="70px" viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg">
<svg width="70px" height="70px" viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"> <path d="M16.2721 3.13079L17.4462 6.15342C17.6461 6.66824 17.3909 7.24768 16.8761 7.44764L13.8535 8.6217" stroke="#CCC" stroke-width="2.5" stroke-linecap="round"/>
<path d="M16.2721 3.13079L17.4462 6.15342C17.6461 6.66824 17.3909 7.24768 16.8761 7.44764L13.8535 8.6217" stroke="#CCC" stroke-width="2.5" stroke-linecap="round"/> <path d="M7.61555 20.5111L6.93391 17.3409C6.81782 16.801 7.16142 16.2692 7.70136 16.1531L10.8715 15.4714" stroke="#CCC" stroke-width="2.5" stroke-linecap="round"/>
<path d="M7.61555 20.5111L6.93391 17.3409C6.81782 16.801 7.16142 16.2692 7.70136 16.1531L10.8715 15.4714" stroke="#CCC" stroke-width="2.5" stroke-linecap="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9153 7.86755C17.6501 7.5052 17.8749 6.55584 17.263 6.01119C16.4869 5.32046 15.5626 4.77045 14.5169 4.41551C10.3331 2.99538 5.79017 5.23581 4.37005 9.41964C4.01511 10.4653 3.88883 11.5335 3.96442 12.5696C4.02402 13.3867 4.9141 13.7862 5.64883 13.4239V13.4239C6.17327 13.1652 6.44536 12.5884 6.44406 12.0037C6.44274 11.4136 6.53712 10.8132 6.73739 10.2232C7.71372 7.34681 10.837 5.80651 13.7134 6.78285C14.3034 6.98311 14.8371 7.27371 15.3045 7.63397C15.7677 7.99095 16.3909 8.12619 16.9153 7.86755V7.86755ZM6.97575 16.1145C7.50019 15.8558 8.12343 15.991 8.58656 16.348C9.05394 16.7083 9.58773 16.9989 10.1777 17.1992C13.0541 18.1755 16.1774 16.6352 17.1537 13.7588C17.354 13.1688 17.4483 12.5684 17.447 11.9783C17.4457 11.3936 17.7178 10.8168 18.2423 10.5581V10.5581C18.977 10.1958 19.8671 10.5953 19.9267 11.4124C20.0022 12.4485 19.876 13.5167 19.521 14.5624C18.1009 18.7462 13.558 20.9866 9.37418 19.5665C8.32849 19.2116 7.4042 18.6615 6.62812 17.9708C6.01616 17.4262 6.24102 16.4768 6.97575 16.1145V16.1145Z" fill="#CCC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9153 7.86755C17.6501 7.5052 17.8749 6.55584 17.263 6.01119C16.4869 5.32046 15.5626 4.77045 14.5169 4.41551C10.3331 2.99538 5.79017 5.23581 4.37005 9.41964C4.01511 10.4653 3.88883 11.5335 3.96442 12.5696C4.02402 13.3867 4.9141 13.7862 5.64883 13.4239V13.4239C6.17327 13.1652 6.44536 12.5884 6.44406 12.0037C6.44274 11.4136 6.53712 10.8132 6.73739 10.2232C7.71372 7.34681 10.837 5.80651 13.7134 6.78285C14.3034 6.98311 14.8371 7.27371 15.3045 7.63397C15.7677 7.99095 16.3909 8.12619 16.9153 7.86755V7.86755ZM6.97575 16.1145C7.50019 15.8558 8.12343 15.991 8.58656 16.348C9.05394 16.7083 9.58773 16.9989 10.1777 17.1992C13.0541 18.1755 16.1774 16.6352 17.1537 13.7588C17.354 13.1688 17.4483 12.5684 17.447 11.9783C17.4457 11.3936 17.7178 10.8168 18.2423 10.5581V10.5581C18.977 10.1958 19.8671 10.5953 19.9267 11.4124C20.0022 12.4485 19.876 13.5167 19.521 14.5624C18.1009 18.7462 13.558 20.9866 9.37418 19.5665C8.32849 19.2116 7.4042 18.6615 6.62812 17.9708C6.01616 17.4262 6.24102 16.4768 6.97575 16.1145V16.1145Z" fill="#CCC"/> </svg>
</svg> </button>
</button>
</div>
</div> </div>
</main> </main>
@ -257,7 +263,7 @@
<img id="gallery-modal-content" src="" /> <img id="gallery-modal-content" src="" />
<button class="gallery-nav gallery-prev">‹</button> <button class="gallery-nav gallery-prev">‹</button>
<button class="gallery-nav gallery-next">›</button> <button class="gallery-nav gallery-next">›</button>
<button id="gallery-play" aria-pressed="false">▶</button> <button id="gallery-play" aria-pressed="false" aria-label="Start slideshow">&gt;</button>
<div id="gallery-exif" aria-live="polite"></div> <div id="gallery-exif" aria-live="polite"></div>
<div id="gallery-filename" aria-live="polite"></div> <div id="gallery-filename" aria-live="polite"></div>
</div> </div>
@ -278,6 +284,7 @@
<script src="{{ url_for('static', filename='gallery.js') }}"></script> <script src="{{ url_for('static', filename='gallery.js') }}"></script>
<script src="{{ url_for('static', filename='search.js') }}"></script> <script src="{{ url_for('static', filename='search.js') }}"></script>
<script src="{{ url_for('static', filename='messages.js') }}"></script> <script src="{{ url_for('static', filename='messages.js') }}"></script>
<script src="{{ url_for('static', filename='general.js') }}"></script>
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {

44
templates/base.html
View File

@ -10,6 +10,10 @@
<!-- Android Theme Color --> <!-- Android Theme Color -->
<meta name="theme-color" content="#000"> <meta name="theme-color" content="#000">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
@ -29,23 +33,27 @@
{% if admin_enabled %} {% if admin_enabled %}
<!-- Navigation Bar --> <!-- Navigation Bar -->
<div class="admin-nav"> <div class="admin-nav">
<a href="{{ url_for('index') }}">App</a> <div class="admin-nav-rail">
<span> | </span> <div class="admin-nav-track">
<a href="{{ url_for('mylinks') }}">Meine Links</a> <a href="{{ url_for('index') }}">App</a>
<span> | </span> <span> | </span>
<a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config">Ordnerkonfiguration</a> <a href="{{ url_for('mylinks') }}">Meine Links</a>
<span> | </span> <span> | </span>
<div class="dropdown d-inline-block"> <a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config">Ordnerkonfiguration</a>
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <span> | </span>
Auswertungen <div class="dropdown dropend d-inline-block">
</a> <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
<ul class="dropdown-menu"> Auswertungen
<li><a class="dropdown-item" href="{{ url_for('dashboard') }}">Dashbord</a></li> </a>
<li><a class="dropdown-item" href="{{ url_for('connections') }}">Verbindungen</a></li> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="{{ url_for('file_access') }}">Dateizugriffe</a></li> <li><a class="dropdown-item" href="{{ url_for('dashboard') }}">Dashbord</a></li>
<li><a class="dropdown-item" href="{{ url_for('songs_dashboard') }}">Wiederholungen</a></li> <li><a class="dropdown-item" href="{{ url_for('connections') }}">Verbindungen</a></li>
<li><a class="dropdown-item" href="{{ url_for('search_db_analyzer') }}">Dateiindex Analyse</a></li> <li><a class="dropdown-item" href="{{ url_for('file_access') }}">Dateizugriffe</a></li>
</ul> <li><a class="dropdown-item" href="{{ url_for('songs_dashboard') }}">Wiederholungen</a></li>
<li><a class="dropdown-item" href="{{ url_for('search_db_analyzer') }}">Dateiindex Analyse</a></li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -54,7 +62,7 @@
</div> </div>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
<script src="{{ url_for('static', filename='general.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='general.js') }}"></script>
</body> </body>
</html> </html>