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

Compare commits

base: lelo:e2ce075c96de5adb7a037ae233a5286f158d0637
Branches Tags
lelo:master
lelo:development
...
compare: lelo:8008d68c8bd1d36f3e78f765eedde6e39e4e9056
Branches Tags
lelo:master
lelo:development

3 Commits
e2ce075c96 ... 8008d68c8b

Author SHA1 Message Date
lelo
8008d68c8b redesigne search buttons 2026-01-18 17:47:03 +00:00
lelo
09296f077f fixing style 2026-01-18 14:53:31 +00:00
lelo
a76c2ec4a0 use base.html in app.html 2026-01-18 13:31:30 +00:00
3 changed files with 266 additions and 250 deletions
Show Stats Expand all files Collapse all files

75
static/app.css
View File

@ -29,10 +29,8 @@ body {
z-index: 2000;
display: flex;
align-items: center;
gap: 16px;
gap: 10px;
padding: 10px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.site-header img.logo {
@ -42,7 +40,7 @@ body {
}
.site-header h1 {
font-size: 1.4rem;
font-size: 1.3rem;
margin: 0;
letter-spacing: 0.08em;
text-transform: uppercase;
@ -103,7 +101,30 @@ search {
border-radius: 0 0 16px 16px;
box-shadow: none;
margin-top: -1px;
padding: 16px 0 10px;
padding: 16px 12px 10px;
position: relative;
}
/* Search view controls */
.search-close-btn {
position: absolute;
top: 12px;
right: 14px;
opacity: 0.85;
}
.input-clear-btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
opacity: 0.85;
}
.input-clear-btn:hover {
opacity: 1;
}
.search-close-btn:hover {
opacity: 1;
}
/* Breadcrumb Styles */
@ -154,6 +175,7 @@ search {
align-items: center;
flex-wrap: nowrap;
justify-content: flex-start;
padding: 0 10px; /* keep first/last items off the screen edge */
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
@ -1063,3 +1085,46 @@ footer {
margin-bottom: 10px;
color: var(--brand-ink);
}
/* Buttons - harmonize with brand palette */
.btn-primary {
background: linear-gradient(135deg, var(--brand-sky), #3b82f6);
border: 1px solid var(--brand-sky);
color: #fff;
font-weight: 700;
letter-spacing: 0.01em;
box-shadow: 0 8px 18px rgba(59, 130, 246, 0.18);
}
.btn-primary:hover {
background: linear-gradient(135deg, #2563eb, var(--brand-sky));
border-color: #2563eb;
box-shadow: 0 12px 28px rgba(59, 130, 246, 0.22);
}
.btn-primary:active,
.btn-primary:focus {
background: linear-gradient(135deg, #1d4ed8, #2563eb);
border-color: #1d4ed8;
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.26) inset;
}
.btn-outline-secondary {
border-color: var(--border-color);
color: var(--brand-ink);
background: #fff;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
background: linear-gradient(135deg, #fff, #f4f7fb);
color: var(--brand-ink);
border-color: var(--border-color);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.btn-outline-secondary:active {
background: #eef2f7;
color: var(--brand-ink);
border-color: var(--border-color);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) inset;
}

16
static/search.js
View File

@ -66,6 +66,9 @@ document.addEventListener('DOMContentLoaded', function() {
e.preventDefault();
const query = document.getElementById('query').value.trim();
const includeTranscript = document.getElementById('includeTranscript').checked;
const spinnerTimer = setTimeout(() => {
if (typeof showSpinner === 'function') showSpinner();
}, 200);
// Get the selected category radio button, if any
const categoryRadio = document.querySelector('input[name="category"]:checked');
@ -96,7 +99,12 @@ document.addEventListener('DOMContentLoaded', function() {
formData.append('dateto', document.getElementById('dateto').value);
formData.append('includeTranscript', includeTranscript);
fetch('/searchcommand', {
const settleSpinner = () => {
clearTimeout(spinnerTimer);
if (typeof hideSpinner === 'function') hideSpinner();
};
const fetchPromise = fetch('/searchcommand', {
method: 'POST',
body: formData
})
@ -118,6 +126,12 @@ document.addEventListener('DOMContentLoaded', function() {
.catch(error => {
console.error('Error:', error);
});
// Always clear/hide spinner once the request settles
if (typeof fetchPromise.finally === 'function') {
fetchPromise.finally(settleSpinner);
} else {
fetchPromise.then(settleSpinner, settleSpinner);
}
});
// Clear button event handler

425
templates/app.html
View File

@ -1,253 +1,193 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
{% extends 'base.html' %}
<title>{{ title_short }}</title>
{% block title %}{{ title_short }}{% endblock %}
<meta property="og:title" content="{{ og_title }}" />
<meta property="og:description" content="{{ og_description }}" />
<meta property="og:image" content="/icon/logo-192x192.png" />
<meta property="og:type" content="website" />
{% block head_extra %}
<meta property="og:title" content="{{ og_title }}">
<meta property="og:description" content="{{ og_description }}">
<meta property="og:image" content="/icon/logo-192x192.png">
<meta property="og:type" content="website">
<meta name="description" content="... uns aber, die wir gerettet werden, ist es eine Gotteskraft.">
<meta name="author" content="{{ title_short }}">
<link rel="icon" href="/icon/logo-192x192.png" type="image/png" sizes="192x192">
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
<link rel="touch-icon" href="/icon/logo-192x192.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-status-bar-style" content="default">
<meta name="mobile-web-app-title" content="Gottesdienste">
<link rel="stylesheet" href="{{ url_for('static', filename='gallery.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='audioplayer.css') }}">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>const admin_enabled = {{ admin_enabled | tojson | safe }};</script>
{% endblock %}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="... uns aber, die wir gerettet werden, ist es eine Gotteskraft.">
<meta name="author" content="{{ title_short }}">
<link rel="icon" href="/icon/logo-192x192.png" type="image/png" sizes="192x192">
<!-- Web App Manifest -->
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
<!-- Android Theme Color -->
<meta name="theme-color" content="#000">
<!-- Apple-specific tags -->
<link rel="touch-icon" href="/icon/logo-192x192.png">
<meta name="mobile-web-app-capable" content="yes">
<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">
<!-- Your CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='gallery.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='audioplayer.css') }}">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script> const admin_enabled = {{ admin_enabled | tojson | safe }}; </script>
</head>
<body>
<script src="{{ url_for('static', filename='functions.js') }}"></script>
<header class="site-header">
<a href="/">
<img src="/custom_logo/logoW.png" alt="Logo" class="logo">
</a>
<h1>{{ title_long }}</h1>
</header>
<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 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">
<li><a class="dropdown-item" href="{{ url_for('dashboard') }}">Dashbord</a></li>
<li><a class="dropdown-item" href="{{ url_for('connections') }}">Verbindungen</a></li>
<li><a class="dropdown-item" href="{{ url_for('file_access') }}">Dateizugriffe</a></li>
<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>
{% endif %}
{% if features %}
<!-- Tab Navigation -->
{% block content %}
<!-- Tab Navigation -->
{% if features %}
<nav class="main-tabs">
{% if "files" in features %}<button class="tab-button active" data-tab="browse">Audio/Photo</button>{% endif %}
{% if "messages" in features %}<button class="tab-button" data-tab="messages">Nachrichten</button>{% endif %}
{% if "calendar" in features %}<button class="tab-button" data-tab="calendar">Kalender</button>{% endif %}
</nav>
{% endif %}
<!-- Browse Section -->
<main id="browse-section" class="tab-content active">
<div id="breadcrumbs" class="breadcrumb"></div>
<div id="content"></div>
<div id="directory-controls">
<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">
<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 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>
</button>
</div>
</main>
{% include 'messages_section.html' %}
{% include 'calendar_section.html' %}
<search style="display: none;">
<div class="container">
<form id="searchForm" method="post" class="mb-4">
<!-- Suchwörter -->
<div class="mb-3">
<label for="query" class="h5 form-label">Suchwörter:</label>
{% endif %}
<!-- Browse Section -->
<main id="browse-section" class="tab-content active">
<div id="breadcrumbs" class="breadcrumb"></div>
<div id="content"></div>
<div id="directory-controls">
<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">
<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 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>
</button>
</div>
</main>
{% include 'messages_section.html' %}
{% include 'calendar_section.html' %}
<search style="display: none;">
<button type="button" id="backBtn" class="btn-close search-close-btn" aria-label="beenden"></button>
<div class="container">
<form id="searchForm" method="post" class="mb-4">
<!-- Suchwörter -->
<div class="mb-3 search-query-wrap">
<label for="query" class="h5 form-label">Suchwörter:</label>
<div class="input-group">
<input type="text" id="query" name="query" class="form-control" required>
</div>
<!-- Toggle für Suchoptionen -->
<div class="d-flex align-items-center mb-2">
<h2 class="h5 mb-0">Suchoptionen</h2>
<button class="btn btn-sm btn-link p-0"
type="button"
data-bs-toggle="collapse"
data-bs-target="#searchOptions"
aria-expanded="false"
aria-controls="searchOptions"
aria-label="Toggle Suchoptionen">
<i class="bi bi-plus-lg"></i>
<button type="button" id="clearBtn" class="btn btn-outline-secondary input-clear-btn" aria-label="zurücksetzen">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!-- Suchoptionen einklappbar -->
<div id="searchOptions" class="collapse border rounded p-3 mb-3">
<!-- Kategorie -->
<div class="mb-3">
<label class="form-label">Kategorie:</label>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="none" value="" checked>
<label class="form-check-label" for="none">Alles</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="lied" value="Lied">
<label class="form-check-label" for="lied">Lied</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="gedicht" value="Gedicht">
<label class="form-check-label" for="gedicht">Gedicht</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="predigt" value="Predigt">
<label class="form-check-label" for="predigt">Predigt</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="chor" value="chor">
<label class="form-check-label" for="chor">Chor</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="orchester" value="orchester">
<label class="form-check-label" for="orchester">Orchester</label>
</div>
</div>
</div>
<hr>
<!-- In Ordner suchen -->
<div class="mb-3">
<label for="folder" class="form-label">In Ordner suchen:</label>
<select id="folder" name="folder" class="form-select">
<option value="">Alle</option>
{% for folder in search_folders %}
<option value="{{ folder }}">{{ folder }}</option>
{% endfor %}
</select>
</div>
<hr>
<!-- Transkript durchsuchen -->
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="includeTranscript" name="includeTranscript">
<label class="form-check-label" for="includeTranscript">Im Transkript suchen</label>
</div>
<hr>
<!-- Zeitraum -->
<div class="row g-2 mb-3">
<div class="col-12 col-md-6">
<label for="datefrom" class="form-label">Datum von:</label>
<input type="date" id="datefrom" name="datefrom" class="form-control">
</div>
<div class="col-12 col-md-6">
<label for="dateto" class="form-label">Datum bis:</label>
<input type="date" id="dateto" name="dateto" class="form-control">
</div>
</div>
</div>
<!-- Ende Suchoptionen -->
<!-- Buttons -->
</div>
<!-- Toggle für Suchoptionen -->
<div class="d-flex align-items-center mb-2">
<h2 class="h5 mb-0">Suchoptionen</h2>
<button class="btn btn-sm btn-link p-0"
type="button"
data-bs-toggle="collapse"
data-bs-target="#searchOptions"
aria-expanded="false"
aria-controls="searchOptions"
aria-label="Toggle Suchoptionen">
<i class="bi bi-plus-lg"></i>
</button>
</div>
<!-- Suchoptionen einklappbar -->
<div id="searchOptions" class="collapse border rounded p-3 mb-3">
<!-- Kategorie -->
<div class="mb-3">
<button type="submit" class="btn btn-primary">Suchen</button>
<button type="button" id="clearBtn" class="btn btn-secondary ms-2">zurücksetzen</button>
<button type="button" id="backBtn" class="btn btn-secondary ms-2">beenden</button>
</div>
</form>
<!-- AJAX-loaded results -->
<div id="results"></div>
</div>
</search>
<!-- Global Audio Player in Footer -->
<footer>
<div class="audio-player-container" id="audioPlayerContainer">
<div class="audio-player">
<audio id="globalAudio" prefetch="auto">
Your browser does not support the audio element.
</audio>
<div class="controls">
<button class="player-button icon-color">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</button>
<div class="slider">
<input type="range" class="timeline" max="100" value="0" step="0.1">
<div id="timeInfo" class="now-playing-info"></div>
<label class="form-label">Kategorie:</label>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="none" value="" checked>
<label class="form-check-label" for="none">Alles</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="lied" value="Lied">
<label class="form-check-label" for="lied">Lied</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="gedicht" value="Gedicht">
<label class="form-check-label" for="gedicht">Gedicht</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="predigt" value="Predigt">
<label class="form-check-label" for="predigt">Predigt</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="chor" value="chor">
<label class="form-check-label" for="chor">Chor</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="category" id="orchester" value="orchester">
<label class="form-check-label" for="orchester">Orchester</label>
</div>
</div>
</div>
<hr>
<!-- In Ordner suchen -->
<div class="mb-3">
<label for="folder" class="form-label">In Ordner suchen:</label>
<select id="folder" name="folder" class="form-select">
<option value="">Alle</option>
{% for folder in search_folders %}
<option value="{{ folder }}">{{ folder }}</option>
{% endfor %}
</select>
</div>
<hr>
<!-- Transkript durchsuchen -->
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="includeTranscript" name="includeTranscript">
<label class="form-check-label" for="includeTranscript">Im Transkript suchen</label>
</div>
<hr>
<!-- Zeitraum -->
<div class="row g-2 mb-3">
<div class="col-12 col-md-6">
<label for="datefrom" class="form-label">Datum von:</label>
<input type="date" id="datefrom" name="datefrom" class="form-control">
</div>
<div class="col-12 col-md-6">
<label for="dateto" class="form-label">Datum bis:</label>
<input type="date" id="dateto" name="dateto" class="form-control">
</div>
<button class="sound-button icon-color" onclick="player.fileDownload()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.89" width="35" height="35">
<path fill-rule="evenodd" d="M84.58,47a7.71,7.71,0,1,1,10.8,11L66.09,86.88a7.72,7.72,0,0,1-10.82,0L26.4,58.37a7.71,7.71,0,1,1,10.81-11L53.1,63.12l.16-55.47a7.72,7.72,0,0,1,15.43.13l-.15,55L84.58,47ZM0,113.48.1,83.3a7.72,7.72,0,1,1,15.43.14l-.07,22q46,.09,91.91,0l.07-22.12a7.72,7.72,0,1,1,15.44.14l-.1,30h-.09a7.71,7.71,0,0,1-7.64,7.36q-53.73.1-107.38,0A7.7,7.7,0,0,1,0,113.48Z"/>
</svg>
</button>
</div>
</div>
<div id="nowPlayingInfo" class="now-playing-info">
keine Datei ausgewählt...
<!-- Buttons -->
<div class="mb-3">
<button type="submit" class="btn btn-primary">Suchen</button>
</div>
</form>
<!-- AJAX-loaded results -->
<div id="results"></div>
</div>
</search>
<!-- Global Audio Player in Footer -->
<footer>
<div class="audio-player-container" id="audioPlayerContainer">
<div class="audio-player">
<audio id="globalAudio" prefetch="auto">
Your browser does not support the audio element.
</audio>
<div class="controls">
<button class="player-button icon-color">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</button>
<div class="slider">
<input type="range" class="timeline" max="100" value="0" step="0.1">
<div id="timeInfo" class="now-playing-info"></div>
</div>
<button class="sound-button icon-color" onclick="player.fileDownload()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.89" width="35" height="35">
<path fill-rule="evenodd" d="M84.58,47a7.71,7.71,0,1,1,10.8,11L66.09,86.88a7.72,7.72,0,0,1-10.82,0L26.4,58.37a7.71,7.71,0,1,1,10.81-11L53.1,63.12l.16-55.47a7.72,7.72,0,0,1,15.43.13l-.15,55L84.58,47ZM0,113.48.1,83.3a7.72,7.72,0,1,1,15.43.14l-.07,22q46,.09,91.91,0l.07-22.12a7.72,7.72,0,1,1,15.44.14l-.1,30h-.09a7.71,7.71,0,0,1-7.64,7.36q-53.73.1-107.38,0A7.7,7.7,0,0,1,0,113.48Z" />
</svg>
</button>
</div>
</div>
</footer>
</div>
<div id="nowPlayingInfo" class="now-playing-info">
keine Datei ausgewählt...
</div>
</div>
</footer>
<!-- Transcript Modal -->
<div id="transcriptModal">
<div class="modal-content">
@ -255,19 +195,19 @@
<div id="transcriptContent"></div>
</div>
</div>
<!-- Gallery Modal for Images -->
<div id="gallery-modal" style="display: none;">
<button id="gallery-close">x</button>
<button id="gallery-info" aria-expanded="false" aria-controls="gallery-exif">i</button>
<img id="gallery-modal-content" src="" />
<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" aria-label="Start slideshow">&gt;</button>
<div id="gallery-exif" aria-live="polite"></div>
<div id="gallery-filename" aria-live="polite"></div>
</div>
<div id="loader-container" style="display: none;">
<div id="gallery-loader"></div>
</div>
@ -275,22 +215,19 @@
<div id="fullscreen-loader" style="display: none;">
<div class="loader"></div>
</div>
{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Load main app JS first, then gallery JS -->
{% block scripts %}
<script src="{{ url_for('static', filename='audioplayer.js') }}"></script>
<script src="{{ url_for('static', filename='app.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='messages.js') }}"></script>
<script src="{{ url_for('static', filename='general.js') }}"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('{{ url_for("static", filename="sw.js") }}')
navigator.serviceWorker.register('{{ url_for("static", filename="sw.js") }}');
});
}
</script>
</body>
</html>
</script>
{% endblock %}