new translation fix and some overall imrpovement to how the tournament and league workflow works.

templates/index.html

@@ -4,7 +4,13 @@
   <meta charset="UTF-8" />
   <title data-i18n="camera.title">Nadzorna Plošča Kamer</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/static/css/base.css">
+  <link rel="stylesheet" href="/static/css/navbar.css">
+  <link rel="stylesheet" href="/static/css/buttons.css">
+  <link rel="stylesheet" href="/static/css/components.css">
+  <link rel="stylesheet" href="/static/css/responsive.css">
   <style>
+    /* Dashboard-specific styles override and extensions */
     html, body {
       margin: 0;
       padding: 0;
@@ -14,52 +20,31 @@
       font-family: Arial, sans-serif;
     }
 
-    .navbar {
-      background: white;
-      color: black;
-      padding: 10px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 2px solid #ccc;
-      height: 60px;
-      box-sizing: border-box;
-    }
-
-    .navbar img.logo {
-      height: 40px;
-    }
-
-    .navbar-center {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      text-align: center;
-    }
-
     /* Tournament Navigation */
     .tournament-nav {
       display: flex;
       align-items: center;
-      gap: 15px;
+      gap: 8px;
     }
 
     .round-nav-btn {
       background: #f8f9fa;
       border: 2px solid #e9ecef;
       cursor: pointer;
-      padding: 12px;
+      padding: 12px 20px;
       border-radius: 8px;
       transition: all 0.2s ease;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       color: #333;
       font-weight: bold;
-      font-size: 1.2rem;
-      width: 50px;
-      height: 50px;
+      font-size: 0.9rem;
       display: flex;
       align-items: center;
       justify-content: center;
+      line-height: 1;
+      height: 44px;
+      margin: 0;
+      flex-shrink: 0;
     }
 
     .round-nav-btn:hover {
@@ -82,96 +67,78 @@
 
     .current-round-info {
       text-align: center;
-      min-width: 120px;
+      min-width: 100px;
+      margin: 0;
+      padding: 0;
     }
 
     .round-title {
-      font-size: 1.4rem;
+      font-size: 1.2rem;
       font-weight: bold;
       color: #333;
-      margin-bottom: 2px;
+      margin: 0;
+      padding: 0;
+      line-height: 1.2;
     }
 
     .round-progress {
-      font-size: 0.8rem;
+      font-size: 0.9rem;
       color: #666;
       padding: 2px 8px;
       background: rgba(0, 123, 255, 0.1);
-      border-radius: 10px;
+      border-radius: 6px;
       border: 1px solid rgba(0, 123, 255, 0.2);
+      margin: 2px 0 0 0;
     }
 
     /* Regular time/date display */
+    .datetime {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 0;
+      margin: 0;
+      line-height: 1.2;
+    }
+
     .datetime .time {
       font-size: 1.6rem;
       font-weight: bold;
       color: #333;
+      padding: 0;
+      margin: 0;
+      line-height: 1.2;
     }
 
     .datetime .date {
       font-size: 0.9rem;
       color: #666;
-    }
-
-    .hamburger-menu {
-      background: #f8f9fa;
-      border: 2px solid #e9ecef;
-      cursor: pointer;
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      width: 50px;
-      height: 50px;
-      border-radius: 8px;
-      transition: all 0.2s ease;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .hamburger-menu:hover {
-      background: #e9ecef;
-      border-color: #007bff;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transform: translateY(-1px);
-    }
-
-    .hamburger-line {
-      width: 100%;
-      height: 3px;
-      background: #333;
-      border-radius: 2px;
-      transition: all 0.3s ease;
-    }
-
-    .hamburger-menu:hover .hamburger-line {
-      background: #007bff;
+      padding: 0;
+      margin: 0;
+      line-height: 1.2;
     }
 
     .grid {
-      height: calc(100vh - 60px);
+      height: calc(100vh - 50px);
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: repeat(2, 1fr);
-      gap: 10px;
-      padding: 10px;
+      gap: 20px;
+      padding: 20px;
       box-sizing: border-box;
-      align-items: center;
-      justify-items: center;
     }
 
     .camera-card {
-      background: transparent;
-      border-radius: 12px;
       overflow: hidden;
       display: flex;
       flex-direction: column;
-      align-items: center;
-      justify-content: center;
       transition: transform 0.2s ease, box-shadow 0.2s ease;
       cursor: pointer;
       position: relative;
-      width: 100%;
-      height: 100%;
+      align-items: center;
+      justify-content: center;
     }
 
     .camera-card:hover {
@@ -194,7 +161,6 @@
 
     .stream-wrapper {
       position: relative;
-      background: #2a2a2a;
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
       overflow: hidden;
@@ -205,6 +171,9 @@
       max-height: 100%;
       width: fit-content;
       height: fit-content;
+      gap: 0;
+      margin: 0;
+      padding: 0;
     }
 
     .image-container {
@@ -216,12 +185,14 @@
       justify-content: center;
       overflow: hidden;
       border-radius: 0 0 12px 12px;
+      background: #1a1a1a;
+      flex: 1;
     }
 
     /* Calculate optimal size to fit within grid cell */
-    @supports (width: min(100%, calc((100vh - 60px - 20px) / 2 - 60px) * 4 / 3)) {
+    @supports (width: min(100%, calc((100vh - 50px - 20px) / 2 - 60px) * 4 / 3)) {
       .stream-wrapper {
-        width: min(100%, calc(((100vh - 60px - 20px) / 2 - 60px) * 4 / 3));
+        width: min(100%, calc(((100vh - 50px - 20px) / 2 - 60px) * 4 / 3));
       }
     }
 
@@ -268,6 +239,8 @@
       transition: all 0.2s ease;
       border-radius: 12px 12px 0 0;
       flex-shrink: 0;
+      margin: 0;
+      line-height: 1;
     }
 
     .target-number {
@@ -282,6 +255,12 @@
       font-weight: bold;
       flex-shrink: 0;
       margin-right: 15px;
+      transition: color 0.2s ease;
+    }
+
+    /* Style when no player is assigned */
+    .camera-card.no-player .card-header {
+      background: linear-gradient(90deg, #999 0%, #999 60px, #1a1a1a 60px);
     }
 
     .camera-card:hover .card-header {
@@ -467,6 +446,7 @@
       color: #007bff;
       transform: translateY(-2px);
       box-shadow: 0 5px 12px rgba(0, 123, 255, 0.15);
+      text-decoration: none !important;
     }
 
     .camera-input {
@@ -523,6 +503,7 @@
       background: #0056b3 !important;
       border-color: #004085 !important;
       color: white !important;
+      text-decoration: none !important;
     }
 
     /* Desktop-only styles - mobile users are redirected */
@@ -630,6 +611,7 @@
       }
     }
   </style>
+  <script src="/static/js/i18n.js"></script>
 </head>
 <body>
   <div class="navbar">
@@ -688,7 +670,6 @@
           <a href="/tournament/draft" class="nav-link tournament-btn">📋 <span data-i18n="tournament.view_full_tournament_draft">Oglej si Celoten Žreb Turnirja</span></a>
           <a href="/tournament" class="nav-link tournament-btn" id="manageTournamentLink">⚙️ <span data-i18n="tournament.manage_tournament">Upravljaj Turnir</span></a>
           <a href="/results/calculator" class="nav-link tournament-btn">🎯 <span data-i18n="scoring.results_calculator">Calculator</span></a>
-          <a href="/results" class="nav-link tournament-btn">📊 <span data-i18n="results.results">Results</span></a>
         </div>
       </div>
       {% endif %}
@@ -738,6 +719,20 @@
                  style="width: 100%;">
         </div>
 
+        <div style="margin-bottom: 15px;">
+          <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #333;">
+            <span data-i18n="camera.target_number_size">Velikost Števila Tarče</span>: <span id="targetNumberSizeValue">{{ settings.display_options.get('target_number_size', settings.display_options.title_size) }}</span>rem
+          </label>
+          <input type="range"
+                 id="targetNumberSize"
+                 min="0.8"
+                 max="2.5"
+                 step="0.1"
+                 value="{{ settings.display_options.get('target_number_size', settings.display_options.title_size) }}"
+                 oninput="adjustTargetNumberSize(this.value)"
+                 style="width: 100%;">
+        </div>
+
         <div style="margin-top: 20px;">
           <h5 data-i18n="camera.titles">Naslovi Kamer</h5>
           {% for i in range(1, 7) %}
@@ -1019,7 +1014,7 @@
             const prevBtn = document.getElementById('prevRoundBtn');
             const nextBtn = document.getElementById('nextRoundBtn');
             const currentRoundNum = document.getElementById('currentRoundNum');
-            
+
             if (prevBtn) prevBtn.disabled = currentRound <= 1;
             if (nextBtn) nextBtn.disabled = currentRound >= totalRounds;
             if (currentRoundNum) currentRoundNum.textContent = currentRound;
@@ -1029,14 +1024,14 @@
     // Change round function
     async function changeRound(direction) {
         if (!tournamentActive) return;
-        
+
         const newRound = currentRound + direction;
         if (newRound < 1 || newRound > totalRounds) return;
-        
+
         // Disable buttons during request
         const prevBtn = document.getElementById('prevRoundBtn');
         const nextBtn = document.getElementById('nextRoundBtn');
-        
+
         if (prevBtn) prevBtn.disabled = true;
         if (nextBtn) nextBtn.disabled = true;
         
@@ -1186,7 +1181,7 @@
                 cardTitle.style.fontSize = `${size}rem`;
             }
         }
-        
+
         if (event && event.target === document.getElementById('titleSize')) {
             currentSettings.display_options.title_size = parseFloat(size);
             debouncedSaveSettings({
@@ -1197,6 +1192,28 @@
         }
     }
 
+    function adjustTargetNumberSize(size) {
+        document.getElementById('targetNumberSizeValue').textContent = size;
+        for (let i = 1; i <= 6; i++) {
+            const targetNumber = document.querySelector(`[data-camera-id="${i}"] .target-number`);
+            if (targetNumber) {
+                targetNumber.style.fontSize = `${size}rem`;
+            }
+        }
+
+        if (event && event.target === document.getElementById('targetNumberSize')) {
+            if (!currentSettings.display_options) {
+                currentSettings.display_options = {};
+            }
+            currentSettings.display_options.target_number_size = parseFloat(size);
+            debouncedSaveSettings({
+                display_options: {
+                    target_number_size: parseFloat(size)
+                }
+            });
+        }
+    }
+
     // Open camera fullscreen
     function openCameraFullscreen(cameraId) {
         const customTitle = currentSettings.camera_titles[cameraId.toString()] || `Camera ${cameraId}`;
@@ -1237,15 +1254,46 @@
                 cardTitle.style.fontSize = `${titleSize}rem`;
             }
         }
+
+        // Apply target number size separately
+        const targetNumberSize = currentSettings.display_options.target_number_size || titleSize;
+        const targetNumberSizeValueEl = document.getElementById('targetNumberSizeValue');
+        const targetNumberSizeEl = document.getElementById('targetNumberSize');
+
+        if (targetNumberSizeValueEl) {
+            targetNumberSizeValueEl.textContent = targetNumberSize;
+        }
+        if (targetNumberSizeEl) {
+            targetNumberSizeEl.value = targetNumberSize;
+        }
+
+        for (let i = 1; i <= 6; i++) {
+            const targetNumber = document.querySelector(`[data-camera-id="${i}"] .target-number`);
+            if (targetNumber) {
+                targetNumber.style.fontSize = `${targetNumberSize}rem`;
+            }
+        }
         
         // Apply card titles
         for (let i = 1; i <= 6; i++) {
             const cardTitle = document.getElementById(`cardTitle${i}`);
+            const cameraCard = document.querySelector(`[data-camera-id="${i}"]`);
             if (cardTitle) {
                 const title = currentSettings.camera_titles[i.toString()] || `Camera ${i}`;
                 cardTitle.textContent = title;
+
+                // Check if no player is assigned (title is Empty or Prazno)
+                if (title === 'Empty' || title === 'Prazno') {
+                    if (cameraCard) {
+                        cameraCard.classList.add('no-player');
+                    }
+                } else {
+                    if (cameraCard) {
+                        cameraCard.classList.remove('no-player');
+                    }
+                }
             }
-            
+
             if (!tournamentActive) {
                 const input = document.getElementById(`titleInput${i}`);
                 if (input) {
@@ -1400,22 +1448,5 @@
         }
     });
 </script>
-
-<!-- Internationalization Support -->
-<script src="/static/js/i18n.js"></script>
-<script>
-    // Initialize translations with server data
-    document.addEventListener('DOMContentLoaded', function() {
-        try {
-            // Only try to initialize translations if variables are available
-            if (typeof currentTranslations !== 'undefined' && typeof currentLanguage !== 'undefined') {
-                translatePage();
-                createLanguageSelector('languageSelectorContainer');
-            }
-        } catch (e) {
-            console.log('Translations not available:', e);
-        }
-    });
-</script>
 </body>
 </html>