še malo fine tunninga, da je bolj prijazno mobilnemu browserju

pesmi_export.txt

@@ -11,6 +11,7 @@ preizkus za vse znake tiste,
 ki v jeziku so nam blizu,
 jasne, svetle in pa čiste.
 
+
 Vrstica dolga se razteza,
 čez rob platna skoraj steče,
 a oko jo hitro ujame,

settings.json

@@ -1,11 +1,11 @@
-{
+{
-    "font_name": "Times New Roman",
+    "font_name": "Noto Sans Display",
-    "bg_color": "#000000",
+    "bg_color": "#000000",
-    "fg_color": "#FFFFFF",
+    "fg_color": "#FFFFFF",
-    "font_size": 36,
+    "font_size": 36,
-    "screen_width_percent": 60,
+    "screen_width_percent": 60,
-    "font_bold": true,
+    "font_bold": false,
-    "show_song_info": true,
+    "show_song_info": true,
-    "split_by_stanza": false,
+    "split_by_stanza": false,
-    "web_port": 5000
+    "web_port": 5000
-}
+}

web/static/styles.css

@@ -11,6 +11,7 @@ body {
     display: flex;
     flex-direction: column;
     height: 100vh;
+    overflow: hidden; /* Prevent body scroll */
 }
 
 .container {
@@ -18,17 +19,19 @@ body {
     flex-direction: column;
     height: 100%;
     padding: 0;
+    overflow: hidden;
 }
 
 /* Gornja vrstica - Vnos pesmi */
 .top-bar {
     background-color: #1a1a1a;
-    padding: 20px;
+    padding: 15px;
     border-bottom: 2px solid #333;
     display: flex;
-    gap: 15px;
+    gap: 10px;
     align-items: center;
     flex-wrap: wrap;
+    flex-shrink: 0; /* Keep fixed size */
 }
 
 .top-bar label {
@@ -80,47 +83,52 @@ body {
 .content {
     flex: 1;
     display: flex;
-    align-items: center;
+    align-items: flex-start; /* Better for scrolling long text */
     justify-content: center;
-    padding: 40px;
+    padding: 20px;
     overflow-y: auto;
     background-color: #000000;
+    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
 }
 
 .lyrics-display {
     text-align: center;
-    font-size: 32px;
+    font-size: 24px; /* Adjusted for mobile */
-    line-height: 1.5;
+    line-height: 1.4;
     white-space: pre-wrap;
     word-wrap: break-word;
-    max-width: 90%;
+    max-width: 100%;
+    padding-bottom: 20px;
 }
 
 .status-message {
     color: #aaa;
-    font-size: 24px;
+    font-size: 20px;
 }
 
 /* Donja vrstica - Navigacijski gumbi */
 .bottom-bar {
     background-color: #1a1a1a;
-    padding: 20px;
+    padding: 15px;
     border-top: 2px solid #333;
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
-    gap: 20px;
+    gap: 10px;
     align-items: center;
+    flex-shrink: 0; /* Keep fixed size */
 }
 
 .bottom-bar button {
-    padding: 15px 40px;
+    padding: 12px 10px;
-    font-size: 18px;
+    font-size: 16px;
     border: none;
     color: white;
     cursor: pointer;
     border-radius: 4px;
     transition: background-color 0.3s;
-    min-width: 150px;
+    flex: 1;
+    min-width: 0; /* Allow shrinking */
+    max-width: 120px;
 }
 
 .btn-nav {
@@ -139,7 +147,6 @@ body {
 
 .btn-dark {
     background-color: #8b4513;
-    min-width: 150px;
 }
 
 .btn-dark:hover {
@@ -150,4 +157,74 @@ body {
     color: #999;
     font-size: 16px;
     min-width: 60px;
+}
+
+/* ====== Viewport & varni odmik (mobilni) ====== */
+
+/* Fallback: najprej uporabimo 100vh, potem nove enote (svh/dvh) kjer so podprte */
+:root {
+  --vh: 100vh;                /* fallback */
+  --container-min-h: 100vh;   /* fallback */
+  --bottom-bar-h: 60px;       /* realna višina spodnje vrstice (glej .bottom-bar padding) */
+}
+
+/* Novejši brskalniki – stabilna višina toolbara */
+@supports (height: 100svh) {
+  :root { --vh: 100svh; --container-min-h: 100svh; }
+}
+/* Alternativa: dinamična višina (ko toolbar skrije/prikaže) */
+@supports (height: 100dvh) {
+  :root { --vh: 100dvh; }
+}
+
+/* Odstrani zaklepanje scrolla – to pogosto povzroči prekrivanje na mobilnih */
+body {
+  /* odstrani prejšnje overflow: hidden; */
+  overflow: auto !important;
+  min-height: var(--container-min-h);
+}
+
+/* Glavni vsebnik naj razpne celoten pogled in upošteva varne robove */
+.container {
+  min-height: var(--vh);
+  padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));
+  /* ostalo iz tvojega CSS lahko ostane */
+}
+
+/* Vsebinski del naj dopušča scroll, kot že imaš */
+.content {
+  /* ostane: flex:1; overflow-y:auto; ... */
+  /* vendar dodamo malo dna, da zadnja vrstica besedila ne trči v panel */
+  padding-bottom: 12px;
+}
+
+/* Spodnja vrstica – naj bo vedno vidna in nad UI brskalnika */
+.bottom-bar {
+  position: sticky;   /* ostane z dokumentom, a se prilepi na dno ob scrollu */
+  bottom: 0;
+  z-index: 1000;      /* nad vsebino */
+  /* ozadje + robovi ostanejo */
+  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
+  /* poravnaj navidezno višino: */
+  min-height: var(--bottom-bar-h);
+}
+
+/* Gumbi v spodnjem panelu: malenkost večja višina za lažji tap */
+.bottom-bar button {
+  min-height: 44px;   /* Apple/Google priporočilo za ‘tap targets’ */
+}
+
+/* Top bar: zadrži stabilno višino, a brez vpliva na dno */
+.top-bar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+/* --- (Opcijsko) tema: prilagodi spodnji panel za boljši kontrast nad browser UI --- */
+@supports (backdrop-filter: blur(4px)) {
+  .bottom-bar {
+    background-color: rgba(26, 26, 26, 0.95);
+    backdrop-filter: saturate(120%) blur(4px);
+  }
 }

web/templates/index.html

@@ -2,7 +2,7 @@
 <html lang="sl">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta  name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
     <title>Projektor pesmi - Web sučelje</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
@@ -10,7 +10,7 @@
     <div class="container">
         <!-- Gornja vrstica -->
         <div class="top-bar">
-            <label for="song-number">Pesem:</label>
+            <!-- <label for="song-number">Pesem:</label> -->
             <input type="number" id="song-number" placeholder="Vpiši številko" min="0">
             <button id="load-btn">Naloži</button>
             
@@ -18,7 +18,7 @@
             <input type="text" id="search-query" placeholder="Naslovna beseda...">
             <button id="search-btn">Išči</button> -->
             
-            <button id="caps-btn" class="btn-dark">VELIKE črke</button>
+            <button id="caps-btn" class="btn-dark">A/a</button>
         </div>
         
         <!-- Sredenska vrstica - Prikaz -->
@@ -32,7 +32,7 @@
         <div class="bottom-bar">
             <button id="prev-btn" class="btn-nav">◀ Nazaj</button>
             <span id="page-info" class="page-info"></span>
-            <button id="dark-btn" class="btn-dark">Zatemni ekran</button>
+            <button id="dark-btn" class="btn-dark">**</button>
             <span id="page-info-right" class="page-info"></span>
             <button id="next-btn" class="btn-nav">Naprej ▶</button>
         </div>