less empty border

update custom colors
color management via css
2025-04-19 13:53:26 +00:00 · 2025-04-19 11:03:21 +00:00 · 2025-04-19 12:37:05 +02:00 · 2025-04-19 10:39:03 +02:00 · 2025-04-19 10:24:14 +02:00 · 2025-04-19 10:10:03 +02:00
11 changed files with 109 additions and 76 deletions
--- a/.gitignore
+++ b/.gitignore
@ -14,4 +14,5 @@
 /folder_mount_config.json
 /.env
 /app_config.json
-/custom_logo
+/custom_logo
+/static/theme.css
--- a/app.py
+++ b/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,
-                            header_color=header_color,
-                            header_text_color=header_text_color,
-                            main_text_color=main_text_color,
-                            background_color=background_color,
+                            title_long=title_long
                           )

 if __name__ == '__main__':
--- a/index_for_search.py
+++ b/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)
--- a/search.py
+++ b/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_long = os.environ.get('TITLE_LONG', 'Default Title')
-    return render_template("search.html", title_short=title_short, title_long=title_long)
+    title_short = app_config.get('TITLE_SHORT', 'Default Title')
+    title_long  = app_config.get('TITLE_LONG' , 'Default Title')
+    return render_template("search.html",
+                            title_short=title_short,
+                            title_long=title_long
+                           )

--- a/static/app.css
+++ b/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;
--- a/static/app.js
+++ b/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);
--- a/static/audioplayer.css
+++ b/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;
--- a/static/audioplayer.js
+++ b/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>
      `
--- a/templates/app.html
+++ b/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">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
+            <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>
@ -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()">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.89" fill="#34495e" width="35" height="35">
+            <button class="sound-button icon-color" onclick="downloadAudio()">
+              <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>
--- a/templates/index.html
+++ b/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">
-      <h1>{{ title_long }}</h1>
+    <img src="/custom_logo/logoW.png" alt="Logo" class="logo">
+    <h1>{{ title_long }}</h1>
  </header>
  
  <div class="container">
--- a/templates/search.html
+++ b/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:url" content="https://app.bethaus-speyer.de" />
+  <meta property="og:image" content="/icon/logo-200x200.png" />

  <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 { width: 100%; }
-      .card { margin-bottom: 20px; }
+    .site-header {
+        width: 100%;
+    }
+    .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>
-        <!-- Clear Button -->
-        <button type="button" id="clearBtn" class="btn btn-secondary ms-2">neue Suche</button>
-        <!-- Back Button -->
-        <button type="button" id="backBtn" class="btn btn-secondary ms-2">zurück</button>
+        <div class="mb-3">
+            <button type="submit" class="btn btn-primary">Suchen</button>
+            <!-- Clear Button -->
+            <button type="button" id="clearBtn" class="btn btn-secondary ms-2">neue Suche</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 -->
Author	SHA1	Message	Date
lelo	0d90252e33	less empty border	2025-04-19 13:53:26 +00:00
lelo	7201eafc65	update custom colors	2025-04-19 11:03:21 +00:00
lelo	c72a707a2d	color management via css	2025-04-19 12:37:05 +02:00
lelo	0ec123aa7d	show search	2025-04-19 10:39:03 +02:00
lelo	e9436df364	fit search page to custom designe	2025-04-19 10:24:14 +02:00
lelo	2c6b856f66	Merge branch 'development' of gitea.centx.de:lelo/bethaus-app into development	2025-04-19 10:10:03 +02:00
lelo	0050374ed0	fix indexing	2025-04-19 10:09:59 +02:00