dvig verzije (release)

README.md

@@ -49,14 +49,16 @@ Projekcija/
 
 ### Requirements
 - Python 3.8+
-- Flask (for web interface)
+- **Tkinter** (usually included with Python, but may require `python3-tk` on some Linux distributions)
+- **Flask** (for web interface)
 - `sqlite3` (included with Python)
+- `requests` (for remote database updates and notifications)
 
 ### Setup
 
 1. **Install Dependencies**:
    ```bash
-   pip install flask
+   pip install flask requests
    ```
 
 2. **Configure Settings**:
@@ -96,11 +98,12 @@ python projector.py
 
 ### Special Commands (Input as song number)
 
-- **9999**: Shutdown system
+- **9999**: Shutdown system (Windows/Linux)
-- **9998**: Restart system
+- **9998**: Restart system (Windows/Linux)
 - **9997**: Restart application
 - **9988**: Exit application
 - **9901**: Update songs database from `db_update_url`
+- **9900**: Show application information (version, author, license)
 
 ### Configuration
 
@@ -112,8 +115,11 @@ Edit `settings.json` to customize:
 - **screen_width_percent**: Width of the text area (e.g., 60)
 - **font_bold**: Use bold font (true/false)
 - **show_song_info**: Show song number and page info at bottom (true/false)
+- **split_by_stanza**: If true, each stanza starts on a new page (true/false)
 - **web_port**: Port for web interface (0 to disable)
 - **db_update_url**: URL for remote database synchronization
+- **ntfy_topic**: Topic for ntfy.sh notifications
+- **installation_label**: Custom label for the installation (shown in app info)
 
 ### Web Interface
 
@@ -132,14 +138,17 @@ Features:
 
 ## API Endpoints
 
-- `GET /api/state` – Current projector state
+- `GET /api/state` – Current projector state (text, page info, modes)
+- `GET /api/events` – SSE endpoint for real-time update notifications
+- `GET /api/app_info` – Application metadata (version, author, song count)
 - `POST /api/load_song` – Load a song by number
 - `POST /api/next_page` – Next page
 - `POST /api/prev_page` – Previous page
 - `POST /api/clear_screen` – Clear display
 - `POST /api/toggle_caps` – Toggle uppercase
-- `POST /api/search_songs` – Search songs
+- `POST /api/toggle_split` – Toggle stanza split mode
-- `GET /api/get_song_details` – Get lyrics for editing
+- `POST /api/search_songs` – Search songs by title
+- `GET /api/get_song_details` – Get lyrics and title for editing
 - `POST /api/update_song` – Save song changes or create new
 
 ## Testing

appinfo.json

@@ -0,0 +1,10 @@
+{
+    "name": "Projekcija",
+    "description": "Aplikacija za projekcijo besedil pesmi na zaslon.",
+    "version": "0.8.0",
+    "authors": [
+        "Uroš Urbanija (izvorna zasnova)",
+        "Valentin Korenjak (nadgradnje in vzdrževanje)"
+    ],
+    "license": "GPLv3"
+}

projector.py

@@ -29,17 +29,17 @@ import subprocess
 import sys
 import ctypes
 import tkinter.messagebox as messagebox
-from web.server import start_server_thread
+from web.server import start_server_thread, notify_clients
 import urllib.request
 import tempfile
 from db_schema import create_tables
 
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+APPINFO_PATH = os.path.join(BASE_DIR, 'appinfo.json')
+
 DB_PATH = 'songs.db'
 SETTINGS_PATH = 'settings.json'
 
-BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-
-
 class SongProjector:
     def __init__(self, root):
         self.root = root
@@ -239,30 +239,81 @@ class SongProjector:
         """
         Vrne seznam pod-vrstic, ki skupaj tvorijo `line`,
         pri čemer so dolge največ `self.color_width` pikslov.
+        Namesto preprostega 'greedy' preloma izračuna število delov
+        in poskuša narediti vrstice podobnih dolžin.
         """
         words = line.split()
         if not words:
             return [""]
 
-        sub_lines = []
+        total_width = self.custom_font.measure(line)
-        current_words = []
+        if total_width <= self.color_width:
+            return [line]
 
+        # Izračunamo, na koliko delov moramo prelomiti vrstico
+        num_parts = (total_width // self.color_width) + 1
+        
+        # Če je num_parts še vedno premalo (zaradi presledkov), preverimo z greedy
+        temp_sub_lines = []
+        current_words = []
         for word in words:
             test_line = " ".join(current_words + [word])
-            # Izmerimo širino v pikslih
             if self.custom_font.measure(test_line) <= self.color_width:
                 current_words.append(word)
             else:
                 if current_words:
-                    sub_lines.append(" ".join(current_words))
+                    temp_sub_lines.append(" ".join(current_words))
                     current_words = [word]
                 else:
-                    # Beseda je sama po sebi predolga (zelo redko)
+                    temp_sub_lines.append(word)
-                    sub_lines.append(word)
                     current_words = []
-
         if current_words:
-            sub_lines.append(" ".join(current_words))
+            temp_sub_lines.append(" ".join(current_words))
+        
+        num_parts = max(num_parts, len(temp_sub_lines))
+        if num_parts <= 1:
+            return [line]
+
+        # Ciljna dolžina vsakega dela
+        target_width = total_width / num_parts
+
+        sub_lines = []
+        remaining_words = words
+        
+        # Porazdelimo besede tako, da so vrstice čim bolj enakomerne
+        for i in range(num_parts - 1):
+            best_split_idx = 1
+            min_diff = float('inf')
+            
+            for j in range(1, len(remaining_words)):
+                test_line = " ".join(remaining_words[:j])
+                width = self.custom_font.measure(test_line)
+                
+                if width > self.color_width:
+                    break
+                
+                diff = abs(width - target_width)
+                if diff < min_diff:
+                    min_diff = diff
+                    best_split_idx = j
+                else:
+                    # Ker širina narašča, ko se enkrat začne diff povečevati,
+                    # smo našli lokalni minimum za to vrstico
+                    break
+            
+            sub_lines.append(" ".join(remaining_words[:best_split_idx]))
+            remaining_words = remaining_words[best_split_idx:]
+            if not remaining_words:
+                break
+        
+        if remaining_words:
+            # Zadnji del (lahko je še vedno predolg, če so bile prejšnje vrstice prekratke)
+            last_line = " ".join(remaining_words)
+            if self.custom_font.measure(last_line) <= self.color_width:
+                sub_lines.append(last_line)
+            else:
+                # Če je zadnji del še vedno predolg, ga rekurzivno razbijemo (varnostni mehanizem)
+                sub_lines.extend(self.split_long_line(last_line))
 
         return sub_lines
 
@@ -343,6 +394,9 @@ class SongProjector:
         elif self.song_number == "9901":
             self.update_songs_database()
             return
+        elif self.song_number == "9900":
+            self.show_app_info_tkinter()
+            return
         try:
             song_id = int(self.song_number)
             self.cursor.execute("SELECT lyrics FROM songs WHERE id=?", (song_id,))
@@ -361,16 +415,19 @@ class SongProjector:
                 
                 processed_stanzas = []
                 for stanza in stanzas_raw:
-                    # Znotraj kitice ohranimo enojne prazne vrstice kot razmike
+                    # Razdelimo kitico na odstavke (ločene z eno prazno vrstico)
-                    lines = stanza.splitlines()
+                    paragraphs_raw = re.split(r'\n\s*\n', stanza)
-                    stanza_lines = []
+                    stanza_paragraphs = []
+                    for para in paragraphs_raw:
+                        lines = para.splitlines()
+                        para_lines = []
                         for line in lines:
                             if line.strip():
-                            stanza_lines.extend(self.split_long_line(line))
+                                para_lines.extend(self.split_long_line(line))
-                        else:
+                        if para_lines:
-                            stanza_lines.append("") # Enojna prazna vrstica znotraj kitice
+                            stanza_paragraphs.append(para_lines)
-                    if stanza_lines:
+                    if stanza_paragraphs:
-                        processed_stanzas.append(stanza_lines)
+                        processed_stanzas.append(stanza_paragraphs)
 
                 # 2. Razdeljevanje kitic na strani
                 pages = []
@@ -378,66 +435,80 @@ class SongProjector:
                 current_height = 0
                 split_by_stanza = self.settings.get("split_by_stanza", False)
 
-                for stanza in processed_stanzas:
+                for stanza_paragraphs in processed_stanzas:
-                    stanza_height = len(stanza) * self.line_height
+                    # Če je vklopljen split_by_stanza, vsaka kitica dobi svojo stran (ali več, če je predolga)
-                    
-                    # Če je vklopljen split_by_stanza, vsaka kitica dobi svojo stran
                     if split_by_stanza:
                         if current_page_lines:
                             pages.append("\n".join(current_page_lines))
                             current_page_lines = []
                             current_height = 0
                         
-                        # Če je kitica predolga za eno stran, jo še vedno moramo razdeliti
+                        for para in stanza_paragraphs:
-                        if stanza_height > max_height:
+                            para_height = len(para) * self.line_height
-                            temp_stanza_lines = []
+                            # Če odstavek ne gre na trenutno stran (ki je v tem načinu prazna ali vsebuje prejšnje odstavke iste kitice)
-                            temp_height = 0
+                            if current_height + para_height + (self.line_height if current_page_lines else 0) > max_height:
-                            for line in stanza:
-                                if temp_height + self.line_height > max_height:
-                                    pages.append("\n".join(temp_stanza_lines))
-                                    temp_stanza_lines = [line]
-                                    temp_height = self.line_height
-                                else:
-                                    temp_stanza_lines.append(line)
-                                    temp_height += self.line_height
-                            if temp_stanza_lines:
-                                pages.append("\n".join(temp_stanza_lines))
-                        else:
-                            pages.append("\n".join(stanza))
-                        continue
-
-                    # Standardna logika (več kitic na stran, če grejo)
-                    if stanza_height > max_height:
                                 if current_page_lines:
                                     pages.append("\n".join(current_page_lines))
                                     current_page_lines = []
                                     current_height = 0
                                 
-                        temp_stanza_lines = []
+                                # Če je sam odstavek predolg za eno stran, ga razdelimo po vrsticah
-                        temp_height = 0
+                                if para_height > max_height:
-                        for line in stanza:
+                                    for line in para:
-                            if temp_height + self.line_height > max_height:
+                                        if current_height + self.line_height > max_height:
-                                pages.append("\n".join(temp_stanza_lines))
-                                temp_stanza_lines = [line]
-                                temp_height = self.line_height
-                            else:
-                                temp_stanza_lines.append(line)
-                                temp_height += self.line_height
-                        if temp_stanza_lines:
-                            current_page_lines = temp_stanza_lines
-                            current_height = temp_height
-                    
-                    elif current_height + stanza_height + (self.line_height if current_page_lines else 0) > max_height:
                                             pages.append("\n".join(current_page_lines))
-                        current_page_lines = stanza
+                                            current_page_lines = [line]
-                        current_height = stanza_height
+                                            current_height = self.line_height
-                    
+                                        else:
+                                            current_page_lines.append(line)
+                                            current_height += self.line_height
+                                else:
+                                    current_page_lines = para[:]
+                                    current_height = para_height
                             else:
                                 if current_page_lines:
-                            current_page_lines.append("") # Razmik med kiticami
+                                    current_page_lines.append("") # Razmik med odstavki znotraj kitice
                                     current_height += self.line_height
-                        current_page_lines.extend(stanza)
+                                current_page_lines.extend(para)
-                        current_height += stanza_height
+                                current_height += para_height
+                        
+                        if current_page_lines:
+                            pages.append("\n".join(current_page_lines))
+                            current_page_lines = []
+                            current_height = 0
+                        continue
+
+                    # Standardna logika (več kitic na stran, če grejo, upoštevajoč odstavke)
+                    for para in stanza_paragraphs:
+                        para_height = len(para) * self.line_height
+                        
+                        # Preverimo, če odstavek gre na trenutno stran
+                        # (self.line_height if current_page_lines else 0) upošteva prazno vrstico pred odstavkom
+                        if current_height + para_height + (self.line_height if current_page_lines else 0) > max_height:
+                            if current_page_lines:
+                                pages.append("\n".join(current_page_lines))
+                                current_page_lines = []
+                                current_height = 0
+                            
+                            # Če je sam odstavek predolg za eno stran
+                            if para_height > max_height:
+                                for line in para:
+                                    if current_height + self.line_height > max_height:
+                                        pages.append("\n".join(current_page_lines))
+                                        current_page_lines = [line]
+                                        current_height = self.line_height
+                                    else:
+                                        current_page_lines.append(line)
+                                        current_height += self.line_height
+                            else:
+                                current_page_lines = para[:]
+                                current_height = para_height
+                        else:
+                            if current_page_lines:
+                                current_page_lines.append("")
+                                current_height += self.line_height
+                            current_page_lines.extend(para)
+                            current_height += para_height
 
                 if current_page_lines:
                     pages.append("\n".join(current_page_lines))
@@ -476,6 +547,7 @@ class SongProjector:
                 self.song_info_label.lift()
             else:
                 self.song_info_label.config(text="")
+        notify_clients()
 
     # ------------------------------------------------------
     #  Navigacija po straneh
@@ -504,6 +576,7 @@ class SongProjector:
         self.color_frame.config(bg="black", width=self.color_width, height=self.screen_height)
         self.color_frame.place(relx=0.5, rely=0.5, anchor="center")
         self.song_info_label.config(text="")
+        notify_clients()
 
     # ------------------------------------------------------
     #  Iskanje po naslovu
@@ -715,6 +788,49 @@ class SongProjector:
         except Exception as e:
             print(f"Napaka pri pošiljanju ntfy obvestila: {e}")
 
+    # ------------------------------------------------------
+    #  Prikaži informacije o aplikaciji v Tkinter oknu
+    # ------------------------------------------------------
+    def show_app_info_tkinter(self):
+        """Prikaže informacije o aplikaciji v glavnem oknu (ukaz 9900)."""
+        try:
+            with open(APPINFO_PATH, 'r', encoding='utf-8') as f:
+                info = json.load(f)
+            
+            self.cursor.execute("SELECT COUNT(*) FROM songs")
+            count = self.cursor.fetchone()[0]
+            
+            authors = ", ".join(info.get("authors", []))
+            
+            display_text = (
+                f"{info.get('name', 'Projekcija')}\n"
+                f"Verzija: {info.get('version', 'neznana')}\n\n"
+                f"{info.get('description', '')}\n\n"
+                f"Avtorji: {authors}\n\n"
+                f"Število pesmi v bazi: {count}"
+            )
+            
+            # Ponastavitev izgleda barvnega območja za prikaz informacij
+            self.color_frame.config(bg=self.settings["bg_color"], width=self.color_width, height=self.screen_height)
+            self.color_frame.place(relx=0.5, rely=0.5, anchor="center")
+            self.display_text.config(bg=self.settings["bg_color"], fg=self.settings["fg_color"], text=display_text)
+            self.display_text.pack(expand=True)
+            
+            # self.song_number_last = "9900"
+            self.song_info_label.config(text="Informacije o programu")
+            self.song_info_label.lift()
+            
+            self.pages = []
+            self.current_page_index = 0
+            self.waiting_for_song = True
+            
+            notify_clients()
+            
+        except Exception as e:
+            self.display_text.config(text=f"Napaka pri branju informacij: {e}")
+        finally:
+            self.song_number = ""
+
 # ----------------------------------------------------------
 #  Zagon aplikacije
 # ----------------------------------------------------------

web/server.py

@@ -27,8 +27,11 @@ than being generated inside Python code.
 
 import threading
 import os
+import json
+import queue
+import time
 
-from flask import Flask, render_template, request, jsonify
+from flask import Flask, render_template, request, jsonify, Response
 
 # create Flask app with proper folders relative to this file
 app = Flask(__name__, static_folder="static", template_folder="templates")
@@ -36,6 +39,17 @@ app = Flask(__name__, static_folder="static", template_folder="templates")
 # Globalna referenca na SongProjector aplikaciju
 _projector_app = None
 
+# List of queues for SSE clients
+_sse_clients = []
+_sse_lock = threading.Lock()
+
+
+def notify_clients():
+    """Notify all connected SSE clients to refresh content"""
+    with _sse_lock:
+        for q in _sse_clients:
+            q.put("refresh content")
+
 
 def set_projector_app(projector_app):
     """Postavi referenco na SongProjector aplikacijo"""
@@ -96,6 +110,26 @@ def get_state():
     })
 
 
+@app.route('/api/events')
+def sse_events():
+    """SSE endpoint for real-time updates"""
+    def event_stream():
+        q = queue.Queue()
+        with _sse_lock:
+            _sse_clients.append(q)
+        try:
+            # Send initial refresh command on connection
+            yield "data: refresh content\n\n"
+            while True:
+                msg = q.get()
+                yield f"data: {msg}\n\n"
+        finally:
+            with _sse_lock:
+                _sse_clients.remove(q)
+
+    return Response(event_stream(), mimetype="text/event-stream")
+
+
 @app.route('/api/load_song', methods=['POST'])
 def load_song():
     """Naloži pesem po številki"""
@@ -110,6 +144,7 @@ def load_song():
         _projector_app.load_song()
         if hasattr(_projector_app, 'show_page'):
             _projector_app.show_page()
+        notify_clients()
 
     return jsonify({'status': 'ok'})
 
@@ -119,6 +154,7 @@ def next_page():
     """Naslednja stran"""
     if _projector_app is not None:
         _projector_app.next_page()
+        notify_clients()
 
     return jsonify({'status': 'ok'})
 
@@ -128,6 +164,7 @@ def prev_page():
     """Prejšnja stran"""
     if _projector_app is not None:
         _projector_app.prev_page()
+        notify_clients()
 
     return jsonify({'status': 'ok'})
 
@@ -137,6 +174,7 @@ def clear_screen():
     """Zatemniti ekran"""
     if _projector_app is not None:
         _projector_app.clear_screen()
+        notify_clients()
 
     return jsonify({'status': 'ok'})
 
@@ -147,6 +185,7 @@ def toggle_caps():
     if _projector_app is not None:
         _projector_app.all_caps_mode = not _projector_app.all_caps_mode
         _projector_app.show_page()
+        notify_clients()
 
     return jsonify({'status': 'ok'})
 
@@ -156,10 +195,32 @@ def toggle_split():
     """Preklop med načinom preloma po kiticah in prostim prelomom"""
     if _projector_app is not None:
         _projector_app.toggle_split_mode()
+        notify_clients()
 
     return jsonify({'status': 'ok'})
 
 
+@app.route('/api/app_info', methods=['GET'])
+def get_app_info():
+    """Vrne informacije o aplikaciji iz appinfo.json"""
+    try:
+        # appinfo.json je v korenskem imeniku projekta (nad web/)
+        base_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+        appinfo_path = os.path.join(base_dir, 'appinfo.json')
+        with open(appinfo_path, 'r', encoding='utf-8') as f:
+            info = json.load(f)
+        
+        # Dodaj število pesmi v bazi
+        if _projector_app is not None:
+            _projector_app.cursor.execute("SELECT COUNT(*) FROM songs")
+            count = _projector_app.cursor.fetchone()[0]
+            info['song_count'] = count
+            
+        return jsonify(info)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
 @app.route('/api/search_songs', methods=['POST'])
 def search_songs():
     """Iskanje besedil po naslovu"""
@@ -270,6 +331,7 @@ def update_song():
         if str(_projector_app.song_number_last) == str(song_id):
             _projector_app.song_number = str(song_id)
             _projector_app.load_song()
+            notify_clients()
 
         return jsonify({'status': 'ok'})
     except Exception as e:

web/static/script.js

@@ -10,6 +10,9 @@ const darkBtn = document.getElementById('dark-btn');
 const splitBtn = document.getElementById('split-btn');
 const pageInfo = document.getElementById('page-info');
 const clearBtn = document.getElementById('clear-btn');
+const aboutBtn = document.getElementById('about-btn');
+const aboutModal = document.getElementById('about-modal');
+const aboutCloseBtn = document.getElementById('about-close-btn');
 const keypadButtons = document.querySelectorAll('.btn-key');
 const keypadWrapper = document.getElementById('keypad-wrapper');
 const toggleKeypadBtn = document.getElementById('toggle-keypad-btn');
@@ -345,6 +348,41 @@ async function saveSongEdit() {
     }
 }
 
+// Odpri About dialog
+async function openAbout() {
+    try {
+        const response = await fetch('/api/app_info');
+        const data = await response.json();
+
+        if (data.error) {
+            alert('Napaka pri pridobivanju informacij o programu.');
+            return;
+        }
+
+        document.getElementById('about-name').textContent = data.name;
+        document.getElementById('about-version').textContent = 'Verzija ' + data.version;
+        document.getElementById('about-description').textContent = data.description;
+        
+        // Dodaj število pesmi
+        if (data.song_count !== undefined) {
+            document.getElementById('about-description').innerHTML += `<br><br>Število pesmi v bazi: <strong>${data.song_count}</strong>`;
+        }
+
+        const authorsList = document.getElementById('about-authors');
+        authorsList.innerHTML = '';
+        data.authors.forEach(author => {
+            const li = document.createElement('li');
+            li.textContent = author;
+            authorsList.appendChild(li);
+        });
+
+        aboutModal.classList.add('show');
+        menuDropdown.classList.remove('show');
+    } catch (error) {
+        console.error('Napaka pri pridobivanju informacij o programu:', error);
+    }
+}
+
 // skrij/pokaži tipkovnico
 function toggleKeypad() {
     if (!keypadWrapper || !toggleKeypadBtn) return;
@@ -419,6 +457,20 @@ if (toggleKeypadBtn) {
     });
 }
 
+// O programu
+if (aboutBtn) {
+    aboutBtn.addEventListener('click', () => {
+        vibrate();
+        openAbout();
+    });
+}
+
+if (aboutCloseBtn) {
+    aboutCloseBtn.addEventListener('click', () => {
+        aboutModal.classList.remove('show');
+    });
+}
+
 // Uredi besedilo
 if (editSongBtn) {
     editSongBtn.addEventListener('click', () => {
@@ -489,6 +541,10 @@ document.addEventListener('click', (e) => {
     if (menuDropdown && !menuDropdown.contains(e.target) && e.target !== menuToggle) {
         menuDropdown.classList.remove('show');
     }
+    // Zapri About modal ob kliku izven vsebine
+    if (e.target === aboutModal) {
+        aboutModal.classList.remove('show');
+    }
 });
 
 // Iskanje dogodki
@@ -597,9 +653,24 @@ document.addEventListener('keydown', (e) => {
 updateState(true);
 requestWakeLock();
 
-// osveževanje za sinhronizacijo med več napravami
+// SSE osveževanje za sinhronizacijo med več napravami
-setInterval(() => {
+function setupSSE() {
+    const evtSource = new EventSource("/api/events");
+
+    evtSource.onmessage = function(event) {
+        console.log("SSE dogodek:", event.data);
+        if (event.data === "refresh content") {
             updateState(false);
-}, 1000);
+        }
+    };
+
+    evtSource.onerror = function(err) {
+        console.error("SSE napaka, ponovni poskus čez 5s...", err);
+        evtSource.close();
+        setTimeout(setupSSE, 5000);
+    };
+}
+
+setupSSE();
 
 console.log('JavaScript inicializacija zaključena');

web/static/styles.css

@@ -429,6 +429,12 @@ body {
     height: 100%;
     background-color: rgba(0,0,0,0.8);
     overflow-y: auto;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.show {
+    display: flex !important;
 }
 
 .modal-content {
@@ -474,6 +480,84 @@ textarea.form-control {
     margin-top: 20px;
 }
 
+/* About Modal Styles */
+.about-content {
+    text-align: center;
+    padding: 30px;
+}
+
+.about-header {
+    margin-bottom: 25px;
+}
+
+.about-logo {
+    width: 96px;
+    height: 96px;
+    margin-bottom: 15px;
+}
+
+.about-version {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-top: 5px;
+}
+
+.about-description {
+    font-size: 1.1rem;
+    margin-bottom: 25px;
+    line-height: 1.5;
+}
+
+.about-authors-section {
+    text-align: left;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+.about-authors-section h3 {
+    margin-top: 0;
+    font-size: 1rem;
+    color: #1f8a46;
+}
+
+.about-authors-list {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0 0;
+}
+
+.about-authors-list li {
+    margin-bottom: 5px;
+    font-size: 0.95rem;
+}
+
+.about-codes-section {
+    text-align: left;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+.about-codes-section h3 {
+    margin-top: 0;
+    font-size: 1rem;
+    color: #1f8a46;
+}
+
+.about-codes-list {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0 0;
+}
+
+.about-codes-list li {
+    margin-bottom: 5px;
+    font-size: 0.95rem;
+}
+
 .btn-primary {
     background-color: #1f8a46;
     color: white;

web/templates/index.html

@@ -28,6 +28,7 @@
                 <button id="dark-btn" class="menu-item" type="button">Velike/male črke (AAaa)</button>
                 <button id="split-btn" class="menu-item" type="button">Prelom po kiticah</button>
                 <button id="edit-song-btn" class="menu-item" type="button">Uredi besedilo</button>
+                <button id="about-btn" class="menu-item" type="button">O programu</button>
             </div>
         </div>
     </div>
@@ -80,6 +81,38 @@
         </div>
     </div>
     
+    <!-- About Modal -->
+    <div id="about-modal" class="modal">
+        <div class="modal-content about-content">
+            <div class="about-header">
+                <img src="{{ url_for('static', filename='favicon.svg') }}" alt="Logo" class="about-logo">
+                <h1 id="about-name">Projekcija</h1>
+                <p id="about-version" class="about-version"></p>
+            </div>
+            <div class="about-body">
+                <p id="about-description" class="about-description"></p>
+                <div class="about-authors-section">
+                    <h3>Avtorji:</h3>
+                    <ul id="about-authors" class="about-authors-list"></ul>
+                </div>
+                <div class="about-codes-section">
+                    <h3>Posebne kode:</h3>
+                    <ul class="about-codes-list">
+                        <li><strong>9999</strong>: Izklop računalnika</li>
+                        <li><strong>9998</strong>: Ponovni zagon računalnika</li>
+                        <li><strong>9997</strong>: Ponovni zagon programa</li>
+                        <li><strong>9988</strong>: Izhod iz programa</li>
+                        <li><strong>9901</strong>: Posodobitev baze pesmi</li>
+                        <li><strong>9900</strong>: Informacije o programu</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button id="about-close-btn" class="btn-primary">Zapri</button>
+            </div>
+        </div>
+    </div>
+
     <div class="content">
         <div id="display-area" class="lyrics-display">
             <span class="status-message">Pripravljeno. Vpiši številko pesmi ali drugega besedila.</span>