bild

app/src/main/assets/css/styles.css

@@ -265,7 +265,7 @@ body {
 }
 
 .progress-bar {
-  width: 120px;
+  width: 100%;
   height: 8px;
   background-color: #e2e8f0;
   border-radius: 4px;

app/src/main/assets/dyktando.html

@@ -39,9 +39,7 @@
         <span id="blank-progress" class="play-progress"></span>
       </header>
 
-      <div class="play-progress-bar">
+  <div id="progressbar-placeholder"></div>
-        <div id="dyk-progress-bar-inner" class="play-progress-bar-inner"></div>
-      </div>
 
       <div class="play-body">
         <div class="play-scroll-area" id="dyk-scroll">
@@ -71,6 +69,9 @@
       }).then(html => {
         document.getElementById('header-placeholder').outerHTML = html;
       });
+      loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'dyk-progress-bar-inner'}).then(html => {
+        document.getElementById('progressbar-placeholder').outerHTML = html;
+      });
       loadComponent('components/footer.html').then(html => {
         document.getElementById('footer-placeholder').outerHTML = html;
       });

app/src/main/assets/dzielenie.html

@@ -51,9 +51,7 @@
           <span id="progress-label" class="progress-text">0/20</span>
         </div>
       </header>
-      <div class="read-progress-bar">
+  <div id="progressbar-placeholder"></div>
-        <div id="progress-inner" class="read-progress-bar-inner"></div>
-      </div>
 
       <div class="play-body">
         <div class="problem-display">
@@ -107,6 +105,9 @@
     }).then(html => {
       document.getElementById('header-placeholder').outerHTML = html;
     });
+    loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress-inner'}).then(html => {
+      document.getElementById('progressbar-placeholder').outerHTML = html;
+    });
     loadComponent('components/footer.html').then(html => {
       document.getElementById('footer-placeholder').outerHTML = html;
     });

app/src/main/assets/js/app.js

@@ -55,7 +55,7 @@ const statusEl = document.getElementById('status');
 // load settings from localStorage
 function loadSettings(){
   try{
-    const raw = localStorage.getItem('matma:settings')
+  let progressInner = null
     if (raw) {
       const s = JSON.parse(raw)
       state.settings = Object.assign(state.settings, s)

app/src/main/assets/js/czytanie.js

@@ -21,7 +21,7 @@
   const readViewport  = document.getElementById('read-viewport')
   const readTextEl    = document.getElementById('read-text')
   const nextLineBtn   = document.getElementById('next-line-btn')
-  const progressBar   = document.getElementById('read-progress-bar-inner')
+  let progressBar = null
 
   // ── Load text list from dyktanda.json ────────────────────────────────────
   fetch('json/dyktanda.json')
@@ -132,6 +132,7 @@
 
   function updateProgressBar() {
     const progress = maxOffset > 0 ? (yOffset / maxOffset) * 100 : 100
-    progressBar.style.width = `${progress}%`
+    if (!progressBar) progressBar = document.getElementById('read-progress-bar-inner')
+    if (progressBar) progressBar.style.width = `${progress}%`
   }
 })()

app/src/main/assets/js/dyktando.js

@@ -35,7 +35,7 @@
   const summaryScore   = document.getElementById('summary-score')
   const summaryBackBtn = document.getElementById('summary-back-btn')
   const dykScroll      = document.getElementById('dyk-scroll')
-  const progressBar    = document.getElementById('dyk-progress-bar-inner')
+  let progressBar = null
 
   // ── Load texts ────────────────────────────────────────────────────────────
   fetch('json/dyktanda.json')
@@ -53,6 +53,20 @@
       textList.innerHTML = '<p style="color:var(--muted)">Nie udało się wczytać tekstów.</p>'
     })
 
+    // Poczekaj na dynamiczne załadowanie progress bara
+    document.addEventListener('DOMContentLoaded', () => {
+      // progress bar jest ładowany przez loadComponent w dyktando.html
+      const checkProgressBar = () => {
+        const el = document.getElementById('dyk-progress-bar-inner')
+        if (el) {
+          progressBar = el
+        } else {
+          setTimeout(checkProgressBar, 50)
+        }
+      }
+      checkProgressBar()
+    })
+
   customStartBtn.addEventListener('click', () => {
     const txt = customInput.value.trim()
     if (!txt) return
@@ -98,7 +112,7 @@
     textDisplay.classList.remove('hidden')
     choicesEl.classList.remove('hidden')
     progressEl.textContent = ''
-    progressBar.style.width = '0%'
+    if (progressBar) progressBar.style.width = '0%'
 
     listWrap.classList.add('hidden')
     playWrap.classList.remove('hidden')

app/src/main/assets/js/dzielenie.js

@@ -8,7 +8,7 @@
   const problemEl     = document.getElementById('problem')
   const answerEl      = document.getElementById('answer')
   const feedbackEl    = document.getElementById('feedback')
-  const progressInner = document.getElementById('progress-inner')
+  let progressInner = null
   const progressLabel = document.getElementById('progress-label')
   const summaryText   = document.getElementById('summary-text')
   const totalInput    = document.getElementById('total-input')
@@ -99,7 +99,10 @@
 
   function updateBar() {
     const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
-    progressInner.style.width = pct + '%'
+    if (!progressInner) {
+      progressInner = document.getElementById('progress-inner')
+    }
+    if (progressInner) progressInner.style.width = pct + '%'
     progressLabel.textContent = `${st.solved}/${st.total}`
   }
 

app/src/main/assets/js/mnozenie.js

@@ -8,7 +8,7 @@
   const problemEl     = document.getElementById('problem')
   const answerEl      = document.getElementById('answer')
   const feedbackEl    = document.getElementById('feedback')
-  const progressInner = document.getElementById('progress-inner')
+  let progressInner = null
   const progressLabel = document.getElementById('progress-label')
   const scoreLabel    = document.getElementById('score-label') // This element is removed, but we might re-purpose the logic
   const summaryText   = document.getElementById('summary-text')
@@ -99,7 +99,8 @@
 
   function updateBar() {
     const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
-    progressInner.style.width = pct + '%'
+    if (!progressInner) progressInner = document.getElementById('progress-inner')
+    if (progressInner) progressInner.style.width = pct + '%'
     progressLabel.textContent = `${st.solved}/${st.total}`
     // scoreLabel is removed, so we comment this out
     // scoreLabel.textContent = `✔ ${st.score}`

app/src/main/assets/mnozenie.html

@@ -51,9 +51,7 @@
           <span id="progress-label" class="progress-text">0/20</span>
         </div>
       </header>
-      <div class="read-progress-bar">
+  <div id="progressbar-placeholder"></div>
-        <div id="progress-inner" class="read-progress-bar-inner"></div>
-      </div>
 
       <div class="play-body">
         <div class="problem-display">
@@ -107,6 +105,9 @@
     }).then(html => {
       document.getElementById('header-placeholder').outerHTML = html;
     });
+    loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress-inner'}).then(html => {
+      document.getElementById('progressbar-placeholder').outerHTML = html;
+    });
     loadComponent('components/footer.html').then(html => {
       document.getElementById('footer-placeholder').outerHTML = html;
     });

app/src/main/assets/testy.html

@@ -100,9 +100,7 @@
         <div id="status" class="play-status">Trening</div>
         <div id="score" class="play-score">0</div>
       </header>
-      <div class="play-progress-bar">
+  <div id="progressbar-placeholder"></div>
-        <div id="progress_inner" class="play-progress-bar-inner"></div>
-      </div>
 
       <div class="play-body">
         <div class="problem-display">
@@ -161,6 +159,9 @@
     }).then(html => {
       document.getElementById('header-placeholder').outerHTML = html;
     });
+    loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress_inner'}).then(html => {
+      document.getElementById('progressbar-placeholder').outerHTML = html;
+    });
     loadComponent('components/footer.html').then(html => {
       document.getElementById('footer-placeholder').outerHTML = html;
     });