modern designe
This commit is contained in:
parent
643f9b3908
commit
e2ce075c96
447
static/app.css
447
static/app.css
@ -1,44 +1,59 @@
|
||||
/* Ensure html and body take full height */
|
||||
html, body {
|
||||
background-color: var(--light-background);
|
||||
background: var(--light-background);
|
||||
color: var(--main-text-color);
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
/* padding: 0; */
|
||||
}
|
||||
|
||||
/* Global Styles */
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
padding-top: 70px; /* Adjust to your header height */
|
||||
overflow-x: hidden; /* Prevent horizontal scroll */
|
||||
font-family: 'Manrope', 'Segoe UI', sans-serif;
|
||||
padding-top: 0;
|
||||
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-color: var(--dark-background);
|
||||
|
||||
/* Header styles */
|
||||
.site-header {
|
||||
background: linear-gradient(120deg, var(--dark-background), #13253f);
|
||||
color: var(--header-text-color);
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.site-header img.logo {
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.site-header h1 {
|
||||
font-size: 1.5em;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
padding-bottom: 200px;
|
||||
padding-bottom: 220px;
|
||||
}
|
||||
|
||||
.wrapper > .admin-nav,
|
||||
@ -49,79 +64,159 @@ body {
|
||||
.wrapper > main,
|
||||
.wrapper > section {
|
||||
flex: 1 1 auto;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.wrapper > footer {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
width: 95%;
|
||||
|
||||
}
|
||||
|
||||
.container a {
|
||||
font-size: 18px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.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;
|
||||
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 a {
|
||||
font-size: 19px;
|
||||
text-decoration: none;
|
||||
color: var(--main-text-color);
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
font-size: 19px;
|
||||
color: #ccc;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 17px;
|
||||
color: var(--muted-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Admin Nav Styles */
|
||||
.admin-nav {
|
||||
color: #ccc;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
background-color: #979797;
|
||||
color: var(--brand-ink);
|
||||
border: 1px solid var(--border-color);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
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 {
|
||||
color: #ccc;
|
||||
color: var(--brand-ink);
|
||||
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 {
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
padding: 5px 0;
|
||||
color: var(--brand-ink);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.admin-nav .dropdown-toggle::after {
|
||||
border-top-color: #ccc;
|
||||
display: none; /* hide default Bootstrap caret */
|
||||
}
|
||||
|
||||
.admin-nav .dropdown-menu {
|
||||
background-color: #f2f2f2;
|
||||
border-color: #ccc;
|
||||
background-color: #fff;
|
||||
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 {
|
||||
color: #333;
|
||||
color: var(--brand-ink);
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.admin-nav .dropdown-item:hover,
|
||||
.admin-nav .dropdown-item:focus {
|
||||
background-color: #e6e6e6;
|
||||
color: #000;
|
||||
background-color: #eef4ff;
|
||||
color: var(--brand-navy);
|
||||
}
|
||||
|
||||
/* 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-item, .link-item, .directory-item, .file-item {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 12px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
padding: 10px 15px;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--card-shadow);
|
||||
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 */
|
||||
.directories-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 0 10px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
column-gap: 14px;
|
||||
row-gap: 0;
|
||||
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;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
/* Link Styles */
|
||||
.directory-link,
|
||||
.link-link,
|
||||
a.play-file {
|
||||
color: var(--player-text-color);
|
||||
color: var(--brand-ink);
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a.show-transcript {
|
||||
text-decoration: none;
|
||||
color: var(--main-text-color);
|
||||
font-size: 20px;
|
||||
color: var(--brand-navy);
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a.show-transcript:hover {
|
||||
color: rgb(113, 146, 167);
|
||||
color: var(--brand-sky);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: yellow;
|
||||
background-color: #fffbcc;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#transcriptContent code.timecode-link {
|
||||
cursor: pointer;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
||||
a.create-share {
|
||||
text-decoration: none;
|
||||
color: var(--main-text-color);
|
||||
font-size: 20px;
|
||||
color: var(--brand-navy);
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a.create-share:hover {
|
||||
color: rgb(113, 146, 167);
|
||||
color: var(--brand-sky);
|
||||
}
|
||||
|
||||
.currently-playing {
|
||||
background-color: var(--selected-background);
|
||||
border: 1px solid var(--brand-sky);
|
||||
}
|
||||
|
||||
/* Footer Player Styles */
|
||||
@ -210,14 +325,15 @@ footer {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--dark-background);
|
||||
background: linear-gradient(120deg, #0b1220, #0f172a);
|
||||
color: #fff;
|
||||
padding: 7px;
|
||||
padding: 10px 14px;
|
||||
text-align: center;
|
||||
z-index: 1000; /* Make sure it sits on top */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
@ -242,14 +358,18 @@ footer {
|
||||
position: relative;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#transcriptModal .close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Basic Markdown Styles */
|
||||
@ -313,9 +433,10 @@ footer {
|
||||
.image-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background: #f9f9f9;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(145deg, #ffffff, #f6f8fc);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
/* the filename overlay, centered at bottom */
|
||||
@ -422,41 +543,60 @@ footer {
|
||||
|
||||
/* Tab Navigation Styles */
|
||||
.main-tabs {
|
||||
background-color: var(--dark-background);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
gap: 2px;
|
||||
border-bottom: 2px solid #444;
|
||||
justify-content: flex-start;
|
||||
padding: 6px 18px 0;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
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 {
|
||||
background: #333;
|
||||
border: 1px solid #444;
|
||||
background: rgba(217, 217, 217, 0.5);
|
||||
border: 1px solid var(--border-color);
|
||||
border-bottom: none;
|
||||
color: #999;
|
||||
padding: 6px 20px;
|
||||
font-size: 14px;
|
||||
color: var(--muted-text);
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 5px 5px 0 0;
|
||||
margin: 0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
margin: 0 6px 0 0;
|
||||
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 {
|
||||
color: #fff;
|
||||
background: #3a3a3a;
|
||||
color: var(--brand-ink);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
color: var(--main-text-color, #000);
|
||||
background: var(--light-background);
|
||||
border-color: #444;
|
||||
border-bottom-color: var(--light-background);
|
||||
z-index: 1;
|
||||
color: var(--brand-ink);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-color: var(--border-color);
|
||||
z-index: 2;
|
||||
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 {
|
||||
@ -471,27 +611,28 @@ footer {
|
||||
.messages-section-header {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 0 0 8px;
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
padding: 10px 0 24px;
|
||||
}
|
||||
|
||||
.message-card {
|
||||
background: var(--card-background, #fff);
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(145deg, #ffffff, #f7f9ff);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 14px;
|
||||
padding: 20px 22px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
transition: box-shadow 0.3s ease;
|
||||
box-shadow: var(--card-shadow);
|
||||
transition: box-shadow 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -500,18 +641,18 @@ footer {
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
border-bottom: 1px dashed var(--border-color);
|
||||
}
|
||||
|
||||
.message-title {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
color: var(--main-text-color);
|
||||
color: var(--brand-ink);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-datetime {
|
||||
color: #666;
|
||||
color: var(--muted-text);
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
}
|
||||
@ -527,9 +668,9 @@ footer {
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
margin: 4px 0;
|
||||
background: #f0f4f8;
|
||||
color: #495057;
|
||||
border: 1px solid #d1dce5;
|
||||
background: #ecf6ff;
|
||||
color: #0f172a;
|
||||
border: 1px solid #bed8ff;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95em;
|
||||
font-weight: 500;
|
||||
@ -539,9 +680,9 @@ footer {
|
||||
}
|
||||
|
||||
.message-content .folder-link-btn:hover {
|
||||
background: #e3eaf0;
|
||||
border-color: #b8c5d0;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
|
||||
background: #dff0ff;
|
||||
border-color: #93c5fd;
|
||||
box-shadow: 0 6px 18px rgba(14, 165, 233, 0.24);
|
||||
}
|
||||
|
||||
.message-content .folder-link-btn:active {
|
||||
@ -554,13 +695,13 @@ footer {
|
||||
}
|
||||
|
||||
.message-content a {
|
||||
color: #007bff;
|
||||
color: var(--brand-sky);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-content a:hover {
|
||||
color: #0056b3;
|
||||
color: #0ea5e9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -620,10 +761,12 @@ footer {
|
||||
}
|
||||
|
||||
.message-content blockquote {
|
||||
border-left: 4px solid #ccc;
|
||||
border-left: 4px solid var(--border-color);
|
||||
padding-left: 15px;
|
||||
color: #666;
|
||||
color: var(--muted-text);
|
||||
font-style: italic;
|
||||
background: #f8fbff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.message-image {
|
||||
@ -638,7 +781,7 @@ footer {
|
||||
.message-actions {
|
||||
margin-top: 15px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
@ -654,12 +797,12 @@ footer {
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #007bff;
|
||||
background: linear-gradient(135deg, #2563eb, #22d3ee);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #0056b3;
|
||||
background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
@ -674,7 +817,7 @@ footer {
|
||||
.no-messages {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #999;
|
||||
color: var(--muted-text);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@ -690,9 +833,9 @@ footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--border-color);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 6px 6px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@ -701,9 +844,9 @@ footer {
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
background: var(--card-background, #fff);
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 8px 10px 4px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 12px 12px 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
@ -713,19 +856,19 @@ footer {
|
||||
}
|
||||
|
||||
.calendar-day-today {
|
||||
background: #f7fbff;
|
||||
box-shadow: inset 0 0 0 2px #4da3ff;
|
||||
border-color: #4da3ff;
|
||||
background: linear-gradient(135deg, #f6fbff, #ecf4ff);
|
||||
box-shadow: inset 0 0 0 2px #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.calendar-day-sunday,
|
||||
.calendar-day-holiday {
|
||||
background: #fff7f7;
|
||||
background: #fff8f5;
|
||||
}
|
||||
|
||||
.calendar-day-today.calendar-day-sunday,
|
||||
.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,
|
||||
@ -757,7 +900,7 @@ footer {
|
||||
@media (min-width: 992px) {
|
||||
.calendar-grid {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
border-radius: 0 0 8px 8px;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
.calendar-weekday-header {
|
||||
@ -765,21 +908,21 @@ footer {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
border: 1px solid #ddd;
|
||||
color: var(--muted-text);
|
||||
border: 1px solid var(--border-color);
|
||||
border-bottom: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
border-radius: 12px 12px 0 0;
|
||||
overflow: visible;
|
||||
position: sticky;
|
||||
top: 70px;
|
||||
z-index: 900;
|
||||
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 {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.calendar-day:nth-child(7n) {
|
||||
@ -795,17 +938,17 @@ footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.calendar-day-name {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.calendar-day-date {
|
||||
color: #666;
|
||||
color: var(--muted-text);
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -817,9 +960,9 @@ footer {
|
||||
}
|
||||
|
||||
.calendar-day thead th {
|
||||
background: #f1f1f1;
|
||||
color: #666;
|
||||
border-color: #ddd;
|
||||
background: #f6f8fb;
|
||||
color: var(--muted-text);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.calendar-day.empty thead {
|
||||
@ -851,7 +994,7 @@ footer {
|
||||
|
||||
.details-indicator {
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
color: var(--brand-sky);
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@ -869,7 +1012,7 @@ footer {
|
||||
}
|
||||
|
||||
.calendar-details-row td {
|
||||
background: #f8f9fa;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.calendar-inline-actions {
|
||||
@ -882,8 +1025,10 @@ footer {
|
||||
.file-browser-content {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.file-browser-content .list-group-item {
|
||||
@ -906,15 +1051,15 @@ footer {
|
||||
}
|
||||
|
||||
.file-browser-panel {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
background-color: #f8fbff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.file-browser-panel h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
color: var(--brand-ink);
|
||||
}
|
||||
|
||||
@ -252,9 +252,9 @@ function renderContent(data) {
|
||||
contentHTML += '<div class="directories-grid">';
|
||||
data.directories.forEach(dir => {
|
||||
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}
|
||||
</div>`;
|
||||
});
|
||||
@ -262,22 +262,22 @@ function renderContent(data) {
|
||||
} else {
|
||||
contentHTML += '<ul>';
|
||||
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) {
|
||||
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) {
|
||||
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 => {
|
||||
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')) {
|
||||
link_symbol = '⭐';
|
||||
link_symbol = '<i class="bi bi-star"></i>';
|
||||
} 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>`;
|
||||
});
|
||||
@ -286,7 +286,7 @@ function renderContent(data) {
|
||||
}
|
||||
// Add search link at top level above directories/files
|
||||
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)
|
||||
@ -294,18 +294,18 @@ function renderContent(data) {
|
||||
if (nonImageFiles.length > 0) {
|
||||
contentHTML += '<ul>';
|
||||
nonImageFiles.forEach((file, idx) => {
|
||||
let symbol = '📄';
|
||||
let symbol = '<i class="bi bi-file-earmark"></i>';
|
||||
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', '') });
|
||||
} 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}"` : '';
|
||||
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>`;
|
||||
if (file.has_transcript) {
|
||||
contentHTML += `<a href="#" class="show-transcript" data-url="${file.transcript_url}" data-audio-url="${file.path}" title="Show Transcript">📄</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>`;
|
||||
});
|
||||
|
||||
@ -1,23 +1,24 @@
|
||||
.audio-player-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 7px;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #f9fbff, #eef4ff);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
|
||||
border: 1px solid #d7e3f4;
|
||||
padding: 12px 16px;
|
||||
width: min(1100px, 100%);
|
||||
display: none;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* Now Playing Info */
|
||||
.now-playing-info {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
color: var(--main-text-color);
|
||||
font-size: 15px;
|
||||
color: #1f2937;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
--player-button-width: 4em;
|
||||
--sound-button-width: 3em;
|
||||
--control-size: 3.4em;
|
||||
--space: 0.5em;
|
||||
}
|
||||
|
||||
@ -26,6 +27,7 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: var(--space); /* ensures spacing between controls */
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* Make the slider container fill the available space and stack its children vertically */
|
||||
@ -40,10 +42,10 @@
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 0.5em;
|
||||
background-color: #ccc;
|
||||
background-color: #e6edf7;
|
||||
border-radius: 5px;
|
||||
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;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
@ -56,9 +58,9 @@
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 50%;
|
||||
background-color: var(--dark-background);
|
||||
background-color: #0f172a;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border: 2px solid #0b1220;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -67,9 +69,9 @@
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 50%;
|
||||
background-color: var(--dark-background);
|
||||
background-color: #0f172a;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border: 2px solid #0b1220;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -78,9 +80,9 @@
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 50%;
|
||||
background-color: var(--dark-background);
|
||||
background-color: #0f172a;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border: 2px solid #0b1220;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -104,18 +106,37 @@
|
||||
|
||||
.player-button,
|
||||
.sound-button {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
background-color: #0f172a;
|
||||
border: 1px solid #0f172a;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.player-button {
|
||||
width: var(--player-button-width);
|
||||
height: var(--player-button-width);
|
||||
width: var(--control-size);
|
||||
height: var(--control-size);
|
||||
}
|
||||
|
||||
.sound-button {
|
||||
width: var(--sound-button-width);
|
||||
height: var(--sound-button-width);
|
||||
width: var(--control-size);
|
||||
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);
|
||||
}
|
||||
|
||||
@ -417,7 +417,7 @@ function setAutoPlay(active) {
|
||||
const playButton = document.getElementById('gallery-play');
|
||||
isAutoPlay = active;
|
||||
if (playButton) {
|
||||
playButton.textContent = active ? '⏸' : '▶';
|
||||
playButton.textContent = active ? '||' : '>';
|
||||
playButton.setAttribute('aria-pressed', active ? 'true' : 'false');
|
||||
playButton.classList.toggle('playing', active);
|
||||
}
|
||||
|
||||
@ -1,6 +1,66 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// (No per-icon setup needed here—just ensure your CSS is in place.)
|
||||
function wireAdminDropdowns() {
|
||||
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:
|
||||
document.addEventListener('click', function(e) {
|
||||
|
||||
@ -14,11 +14,11 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
card.className = 'card';
|
||||
card.innerHTML = `
|
||||
<div class="card-body">
|
||||
<p><button class="btn btn-light" onclick="player.loadTrack('${file.relative_path}')" style="width:100%;">🔊 ${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 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%;"><i class="bi bi-folder"></i> ${parentFolder}</button></p>
|
||||
<p class="card-text">Anzahl Downloads: ${file.hitcount}</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}">📄</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>
|
||||
`;
|
||||
resultsDiv.appendChild(card);
|
||||
|
||||
@ -29,6 +29,10 @@
|
||||
<meta name="mobile-web-app-status-bar-style" content="default">
|
||||
<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-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
@ -51,12 +55,14 @@
|
||||
<div class="wrapper">
|
||||
{% if admin_enabled %}
|
||||
<div class="admin-nav">
|
||||
<div class="admin-nav-rail">
|
||||
<div class="admin-nav-track">
|
||||
<a href="{{ url_for('mylinks') }}">Meine Links</a>
|
||||
<span> | </span>
|
||||
<a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config">Ordnerkonfiguration</a>
|
||||
<span> | </span>
|
||||
<div class="dropdown d-inline-block">
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<div class="dropdown dropend d-inline-block">
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
Auswertungen
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
@ -68,6 +74,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if features %}
|
||||
@ -81,7 +89,6 @@
|
||||
|
||||
<!-- Browse Section -->
|
||||
<main id="browse-section" class="tab-content active">
|
||||
<div class="container">
|
||||
<div id="breadcrumbs" class="breadcrumb"></div>
|
||||
<div id="content"></div>
|
||||
<div id="directory-controls">
|
||||
@ -93,7 +100,6 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'messages_section.html' %}
|
||||
@ -257,7 +263,7 @@
|
||||
<img id="gallery-modal-content" src="" />
|
||||
<button class="gallery-nav gallery-prev">‹</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">></button>
|
||||
<div id="gallery-exif" aria-live="polite"></div>
|
||||
<div id="gallery-filename" aria-live="polite"></div>
|
||||
</div>
|
||||
@ -278,6 +284,7 @@
|
||||
<script src="{{ url_for('static', filename='gallery.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='general.js') }}"></script>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
|
||||
@ -10,6 +10,10 @@
|
||||
<!-- Android Theme Color -->
|
||||
<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-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
|
||||
@ -29,14 +33,16 @@
|
||||
{% if admin_enabled %}
|
||||
<!-- Navigation Bar -->
|
||||
<div class="admin-nav">
|
||||
<div class="admin-nav-rail">
|
||||
<div class="admin-nav-track">
|
||||
<a href="{{ url_for('index') }}">App</a>
|
||||
<span> | </span>
|
||||
<a href="{{ url_for('mylinks') }}">Meine Links</a>
|
||||
<span> | </span>
|
||||
<a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config">Ordnerkonfiguration</a>
|
||||
<span> | </span>
|
||||
<div class="dropdown d-inline-block">
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<div class="dropdown dropend d-inline-block">
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
|
||||
Auswertungen
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
@ -48,13 +54,15 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% 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="{{ url_for('static', filename='general.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user