less empty border

.gitignore

@@ -14,4 +14,5 @@
 /folder_mount_config.json
 /.env
 /app_config.json
-/custom_logo
+/custom_logo
+/static/theme.css

app.py

@@ -430,17 +430,9 @@ def handle_request_initial_data():
 def index(path):
     title_short = app_config.get('TITLE_SHORT', 'Default Title')
     title_long  = app_config.get('TITLE_LONG' , 'Default Title')
-    header_color  = app_config.get('header_color' , '#000')
-    header_text_color = app_config.get('header_text_color', '#fff')
-    background_color = app_config.get('background_color', '#fff')
-    main_text_color = app_config.get('main_text_color', '#000')
     return render_template("app.html",
                             title_short=title_short,
-                            title_long=title_long,
+                            title_long=title_long
-                            header_color=header_color,
-                            header_text_color=header_text_color,
-                            main_text_color=main_text_color,
-                            background_color=background_color,
                            )
 
 if __name__ == '__main__':

index_for_search.py

@@ -119,6 +119,7 @@ def updatefileindex():
             scanned_files = []  # Each entry: (relative_path, basefolder, filename, filetype, transcript, hitcount)
             current_keys = set()
             for entry in scan_dir(norm_folderpath):
+                transcript = None
                 entry_path = os.path.normpath(entry.path)
                 # Get relative part by slicing if possible.
                 if entry_path.startswith(norm_folderpath):
@@ -141,7 +142,6 @@ def updatefileindex():
                     site = 'Schwegenheim'
                 
                 if filetype == '.mp3':
-                    transcript = None
 
                     # Check for a corresponding transcript file in a sibling "Transkription" folder.
                     parent_dir = os.path.dirname(entry_path)

search.py

@@ -1,7 +1,7 @@
 import sqlite3
 from flask import Flask, render_template, request, request, jsonify, session
-import os
 import random
+import json
 
 app = Flask(__name__)
 
@@ -10,6 +10,9 @@ SEARCH_DB_NAME = 'search.db'
 search_db = sqlite3.connect(SEARCH_DB_NAME, check_same_thread=False)
 search_db.row_factory = sqlite3.Row
 
+with open("app_config.json", 'r') as file:
+    app_config = json.load(file)
+
 def searchcommand():
     query = request.form.get("query", "").strip()
     category = request.form.get("category", "").strip()
@@ -90,7 +93,10 @@ def searchcommand():
     return jsonify(results=results)
 
 def search():
-    title_short = os.environ.get('TITLE_SHORT', 'Default Title')
+    title_short = app_config.get('TITLE_SHORT', 'Default Title')
-    title_long = os.environ.get('TITLE_LONG', 'Default Title')
+    title_long  = app_config.get('TITLE_LONG' , 'Default Title')
-    return render_template("search.html", title_short=title_short, title_long=title_long)
+    return render_template("search.html",
+                            title_short=title_short,
+                            title_long=title_long
+                           )
 

static/app.css

@@ -1,5 +1,7 @@
 /* Ensure html and body take full height */
 html, body {
+  background-color: var(--light-background);
+  color: var(--main-text-color);
   height: 100%;
   margin: 0;
 }
@@ -11,6 +13,8 @@ body {
 }
   /* Header styles */
   .site-header {
+    background-color: var(--dark-background);
+    color: var(--header-text-color);
     position: fixed;
     top: 0;
     width: 94%;
@@ -53,11 +57,11 @@ body {
 }
 .breadcrumb a {
   text-decoration: none;
-  color: #34495e;
+  color: var(--main-text-color);
   margin-right: 5px;
 }
 .breadcrumb span {
-  color: #c2c2c2;
+  color: #ccc;
   margin-right: 5px;
 }
 
@@ -120,13 +124,13 @@ div.directory-item a, li.directory-item a, li.file-item a, li.link-item a {
 .directory-link,
 .link-link,
 a.play-file {
-  color: #34495e;
+  color: var(--player-text-color);
   text-decoration: none;
   word-break: break-all;
 }
 a.show-transcript {
   text-decoration: none;
-  color: #34495e;
+  color: var(--main-text-color);
   font-size: 20px;
   margin-left: 10px;
 }
@@ -135,7 +139,7 @@ a.show-transcript:hover {
 }
 
 .currently-playing {
-  background-color: #bfd0df; /* Adjust to your preferred color */
+  background-color: var(--selected-background);
 }
 
 /* Footer Player Styles */
@@ -144,7 +148,7 @@ footer {
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: #34495e;
+  background-color: var(--dark-background);
   color: #fff;
   padding: 7px;
   text-align: center;

static/app.js

@@ -52,7 +52,7 @@ function renderContent(data) {
     contentHTML += '<ul>';
     // Check if every directory name is short (≤15 characters) and no files are present
     const areAllShort = data.directories.every(dir => dir.name.length <= 15) && data.files.length === 0;
-    if (areAllShort) {
+    if (areAllShort & data.breadcrumbs.length != 1) {
       contentHTML += '<div class="directories-grid">';
       data.directories.forEach(dir => {
         contentHTML += `<div class="directory-item">📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a></div>`;
@@ -468,4 +468,23 @@ document.getElementById('globalAudio').addEventListener('ended', () => {
 // document.addEventListener("DOMContentLoaded", function() {
 //   // Automatically reload every 5 minutes (300,000 milliseconds)
 //   setInterval(reloadDirectory, 300000);
-// });
+// });
+
+
+function syncThemeColor() {
+  const cssVar = getComputedStyle(document.documentElement)
+                       .getPropertyValue('--dark-background')
+                       .trim();
+  if (!cssVar) return;
+
+  // sync the theme‑color meta tag
+  document.querySelector('meta[name="theme-color"]')
+          .setAttribute('content', cssVar);
+
+  // apply fill to every <svg> inside elements with .icon-color
+  document
+    .querySelectorAll('.icon-color svg')
+    .forEach(svg => svg.setAttribute('fill', cssVar));
+}
+
+document.addEventListener('DOMContentLoaded', syncThemeColor);

static/audioplayer.css

@@ -11,7 +11,7 @@
 .now-playing-info {
   margin-top: 5px;
   font-size: 16px;
-  color: #23313f;
+  color: var(--main-text-color);
   text-align: center;
 }
 
@@ -40,10 +40,10 @@
   -webkit-appearance: none;
   width: 100%;
   height: 0.5em;
-  background-color: #ccc; /* light gray background */
+  background-color: #ccc;
   border-radius: 5px;
   background-size: 0% 100%;
-  background-image: linear-gradient(#34495e, #34495e); /* progress bar */
+  background-image: linear-gradient(var(--dark-background), var(--dark-background));
   background-repeat: no-repeat;
   appearance: none;
   outline: none;
@@ -56,7 +56,7 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: #34495e;
+  background-color: var(--dark-background);
   cursor: pointer;
   border: none;
   outline: none;
@@ -67,7 +67,7 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: #34495e;
+  background-color: var(--dark-background);
   cursor: pointer;
   border: none;
   outline: none;
@@ -78,7 +78,7 @@
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: #34495e;
+  background-color: var(--dark-background);
   cursor: pointer;
   border: none;
   outline: none;

static/audioplayer.js

@@ -1,19 +1,22 @@
+// read the CSS variable from :root (or any selector)
+const cssVar = getComputedStyle(document.documentElement).getPropertyValue('--dark-background').trim();
+
 const playerButton = document.querySelector('.player-button'),
       audio = document.querySelector('audio'),
       timeline = document.querySelector('.timeline'),
       timeInfo = document.getElementById('timeInfo'),
       playIcon = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="${cssVar}">
           <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
         </svg>
       `,
       pauseIcon = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="${cssVar}">
           <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>
       `,
       soundIcon = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="${cssVar}">
           <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
         </svg>
       `

templates/app.html

@@ -18,7 +18,7 @@
   <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
   
   <!-- Android Theme Color -->
-  <meta name="theme-color" content="{{ header_color }}">
+  <meta name="theme-color" content="#000">
   
   <!-- Apple-specific tags -->
   <link rel="touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
@@ -27,20 +27,11 @@
   <meta name="mobile-web-app-title" content="Gottesdienste">
 
   <!-- 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>
-  <style>
-    body {
-        background-color: {{ background_color }};
-        color: {{ main_text_color }};
-    }
-    .site-header {
-        background-color: {{ header_color }};
-        color: {{ header_text_color }};
-    }
-</style>
 </head>
 <body>
   <header class="site-header">
@@ -72,8 +63,8 @@
             Your browser does not support the audio element.
           </audio>
           <div class="controls">
-            <button class="player-button">
+            <button class="player-button icon-color">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
+              <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>
@@ -81,8 +72,8 @@
               <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" onclick="downloadAudio()">
+            <button class="sound-button icon-color" onclick="downloadAudio()">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.89" fill="#34495e" width="35" height="35">
+              <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>

templates/index.html

@@ -9,23 +9,14 @@
 
     <title>{{ title_long }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <style>
-      body {
-          background-color: {{ background_color }};
-          color: {{ main_text_color }};
-      }
-      .site-header {
-          background-color: {{ header_color }};
-          color: {{ header_text_color }};
-      }
-  </style>
 </head>
 <body>
   <header class="site-header">
-      <img src="/icon/logo-300x300.png" alt="Logo" class="logo">
+    <img src="/custom_logo/logoW.png" alt="Logo" class="logo">
-      <h1>{{ title_long }}</h1>
+    <h1>{{ title_long }}</h1>
   </header>
   
   <div class="container">

templates/search.html

@@ -3,15 +3,14 @@
 <head>
   <meta charset="utf-8">
 
-  <meta property="og:title" content="Gottesdienste Speyer und Schwegenheim" />
+  <meta property="og:title" content="{{ title_long }}" />
   <meta property="og:description" content="... uns aber, die wir gerettet werden, ist es eine Gotteskraft." />
-  <meta property="og:image" content="https://app.bethaus-speyer.de/icon/logo-200x200.png" />
+  <meta property="og:image" content="/icon/logo-200x200.png" />
-  <meta property="og:url" content="https://app.bethaus-speyer.de" />
 
   <title>{{ title_short }}</title>
   <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="Bethaus Speyer">
+  <meta name="author" content="{{ title_short }}">
   <link rel="icon" href="/icon/logo-192x192.png" type="image/png" sizes="192x192">
 
   
@@ -19,7 +18,7 @@
   <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
   
   <!-- Android Theme Color -->
-  <meta name="theme-color" content="#34495e">
+  <meta name="theme-color" content="#000">
   
   <!-- Apple-specific tags -->
   <link rel="touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
@@ -27,17 +26,27 @@
   <meta name="mobile-web-app-status-bar-style" content="default">
   <meta name="mobile-web-app-title" content="Gottesdienste">
 
-  <!-- Your CSS -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
-
   <!-- Bootstrap CSS for modern styling -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.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') }}">
+
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <style>
-      body { background-color: #f8f9fa; }
+    .site-header {
-      .site-header { width: 100%; }
+        width: 100%;
-      .card { margin-bottom: 20px; }
+    }
+    .card {
+        margin-bottom: 20px;
+    }
+    .btn {
+        margin-bottom: 10px;
+    }
+    .search-container {
+        padding: 15px;
+    }
   </style>
 </head>
 <body>
@@ -47,7 +56,7 @@
         </a>
         <h1>{{ title_long }}</h1>
       </header>
-<div class="container search-container">
+<div class="search-container">
     <h1>Suche</h1>
     <form id="searchForm" method="post" class="mb-4">
         <div class="mb-3">
@@ -90,11 +99,13 @@
             <input type="checkbox" class="form-check-input" id="includeTranscript" name="includeTranscript">
             <label class="form-check-label" for="includeTranscript">Im Transkript suchen</label>
         </div>
-        <button type="submit" class="btn btn-primary">Suchen</button>
+        <div class="mb-3">
-        <!-- Clear Button -->
+            <button type="submit" class="btn btn-primary">Suchen</button>
-        <button type="button" id="clearBtn" class="btn btn-secondary ms-2">neue Suche</button>
+            <!-- Clear Button -->
-        <!-- Back Button -->
+            <button type="button" id="clearBtn" class="btn btn-secondary ms-2">neue Suche</button>
-        <button type="button" id="backBtn" class="btn btn-secondary ms-2">zurück</button>
+            <!-- Back Button -->
+            <button type="button" id="backBtn" class="btn btn-secondary ms-2">zurück</button>
+        </div>
     </form>
     <!-- Container for AJAX-loaded results -->
     <div id="results"></div>
@@ -241,6 +252,21 @@ document.addEventListener('DOMContentLoaded', function() {
         window.location.href = '/';
     });
 });
+
+function syncThemeColor() {
+    // read the CSS variable from :root (or any selector)
+    const cssVar = getComputedStyle(document.documentElement)
+                       .getPropertyValue('--dark-background').trim();
+    if (cssVar) {
+      document
+        .querySelector('meta[name="theme-color"]')
+        .setAttribute('content', cssVar);
+    }
+  }
+  
+  // sync once on load
+  document.addEventListener('DOMContentLoaded', syncThemeColor);
+
 </script>
 
 <!-- Bootstrap Bundle with Popper -->