>> ⚠️ MANDATORY INSTRUCTION (EN): This entire document must be read completely and thoroughly from start to finish without skipping any section in order to properly understand the project architecture, features, and technical standards.
>> ⚠️ OBLIGATORISK INSTRUKTION (SV): Hela detta dokument måste läsas fullständigt och noggrant från början till slut utan att hoppa över några avsnitt för att förstå projektets arkitektur, funktioner och tekniska standarder.
>> ⚠️ OBAVEZNA INSTRUKCIJA (SR): Ovaj dokument se mora pročitati u celosti, detaljno i od početka do kraja bez preskakanja bilo kog dela, kako bi se u potpunosti razumele sve smernice, struktura, funkcionalnosti i tehnički standardi projekta.
>> 📌 REVISIONS NOTE: Please do NOT modify the upper text or structure. Write all suggestions, feedback, and notes strictly in Section 4 at the very bottom.

================================================================================
PART 1: COMPLETE SPECIFICATION (ENGLISH VERSION)
================================================================================

1.1 MAIN MENU & SUBMENU STRUCTURE
--------------------------------------------------------------------------------
HEADER NAVIGATION BAR:
· 🏠 HOME
· 👥 PEOPLE COUNTERS (Dropdown)
    - IP Camera People Counter
    - People Counter – Sensor up to 2 m
        * Horizontal
        * Vertical
    - People Counter – Sensor up to 4.5 m
· 🚗 VEHICLE COUNTERS (Dropdown)
    - IP Camera Vehicle Counter
    - Vehicle & Bicycle Counter (Combined)
    - Vehicle, Bicycle & People Counter – Real-Time
· 🚲 BICYCLE COUNTERS (Dropdown)
    - IP Camera Bicycle Counter
    - HAL Sensor Bicycle Counter
    - People & Bicycle Counter (Combined)
· 🔍 LICENSE PLATE RECOGNITION (ANPR / LPR) (Dropdown)
    - License Plate Recognition (ANPR / LPR System)
    - License Plate Database & Management
    - Vehicle Classification by Category
    - ANPR for Parking Systems
    - Automatic Barrier Gate Control (Companies & Factories)
    - Residential & Private Gate Access Control
· 🔐 KEY CABINETS & SMART SAFES (NYCKELSKÅP) (Dropdown)
    - Vehicle & Car Key Cabinets (Fleet Management)
    - Medicine & Pharmacy Security Cabinets
    - Valuables & Document Safes
    - Small & Compact Models
    - Large Capacity Models (Multi-Compartment)
· 📶 INNOVA 4G MODEM / ROUTER (Direct link / Single page)
· 💡 CONSULTING & DEVELOPMENT SERVICES (Dropdown)
    - PCB Design & Hardware Engineering
    - Database Design & Development
    - Website & Web Application Development
    - Desktop Software Development
    - Mobile Application Development (iOS & Android)
· 🏢 ABOUT US
· 🏆 REFERENCES / PROJECTS
· 📥 DOWNLOADS & TECH DOCS (Datasheets, Manuals & Software)
· ✉️ CONTACT

HEADER CONTROLS (Top Right Utility Bar):
· 🔍 Live Search Bar (Quick product & model finder)
· ☀️ / 🌙 Theme Switcher: Light Mode (Default) / Dark Mode Toggle
· 🌐 Language Selector: EN | SV | SR


1.2 VISUAL NAVIGATION FLOW WITH ARROWS
--------------------------------------------------------------------------------
[WEBSITE HEADER]
  │
  ├──► [HOME]
  │
  ├──► [PEOPLE COUNTERS] ──►
  │       ├──► IP Camera People Counter
  │       ├──► People Counter – Sensor up to 2 m
  │       │       ├──► Horizontal
  │       │       └──► Vertical
  │       └──► People Counter – Sensor up to 4.5 m
  │
  ├──► [VEHICLE COUNTERS] ──►
  │       ├──► IP Camera Vehicle Counter
  │       ├──► Vehicle & Bicycle Counter (Combined)
  │       └──► Vehicle, Bicycle & People Counter – Real-Time
  │
  ├──► [BICYCLE COUNTERS] ──►
  │       ├──► IP Camera Bicycle Counter
  │       ├──► HAL Sensor Bicycle Counter
  │       └──► People & Bicycle Counter (Combined)
  │
  ├──► [LICENSE PLATE RECOGNITION (ANPR/LPR)] ──►
  │       ├──► License Plate Recognition (ANPR / LPR System)
  │       ├──► License Plate Database & Management
  │       ├──► Vehicle Classification by Category
  │       ├──► ANPR for Parking Systems
  │       ├──► Automatic Barrier Gate Control (Companies & Factories)
  │       └──► Residential & Private Gate Access Control
  │
  ├──► [KEY CABINETS & SMART SAFES (NYCKELSKÅP)] ──►
  │       ├──► Vehicle & Car Key Cabinets (Fleet Management)
  │       ├──► Medicine & Pharmacy Security Cabinets
  │       ├──► Valuables & Document Safes
  │       ├──► Small & Compact Models
  │       └──► Large Capacity Models (Multi-Compartment)
  │
  ├──► [INNOVA 4G MODEM / ROUTER] ──► (Direct link to product page)
  │
  ├──► [CONSULTING & SERVICES] ──►
  │       ├──► PCB Design & Hardware Engineering
  │       ├──► Database Design & Development
  │       ├──► Website & Web Application Development
  │       ├──► Desktop Software Development
  │       └──► Mobile Application Development (iOS & Android)
  │
  ├──► [ABOUT US]
  ├──► [REFERENCES / PROJECTS]
  ├──► [DOWNLOADS & TECH DOCS] (PDF Datasheets, Manuals & Brochures)
  ├──► [CONTACT]
  │
  └──► [TOP RIGHT CONTROLS]
          ├──► Search Bar: [ 🔍 Quick Search ]
          ├──► Theme Toggle: [ ☀️ Light (Default) / 🌙 Dark ]
          └──► Language Selector: [ 🌐 EN | SV | SR ]


1.3 CONTACT PAGE LAYOUT & FORM SPECIFICATION
--------------------------------------------------------------------------------
Structure: Two-column layout (Left: Interactive Form | Right: Direct Contact Info & Map)

LEFT COLUMN: CONTACT FORM
-------------------------
1. 👤 Full Name * (Input text)
2. 🏢 Company Name (Input text - optional)
3. ✉️ Email Address * (Input email)
4. 📞 Phone Number * (Input tel with country code)
5. 📂 Area of Interest / Product Category (Dropdown select):
   - People Counters
   - Vehicle Counters
   - Bicycle Counters
   - License Plate Recognition (ANPR / LPR)
   - Key Cabinets & Smart Safes (Nyckelskåp)
   - Innova 4G Modem / Router
   - Consulting & Software/Hardware Development
   - Downloads / Technical Documentation
   - General Inquiry / Other
6. 💬 Project Description / Message * (Textarea - 5-6 rows)
7. 📎 Attach Specification / Drawing (File upload - PDF, JPG, PNG up to 10MB - optional)
8. 🛡️ Spam Protection (reCAPTCHA v3 or Cloudflare Turnstile checkbox)
9. 🚀 Action Button: [ SEND INQUIRY ] (Primary prominent button)
10. ✅ Success Notice: "Thank you! Your inquiry has been received. Our team will contact you within 24 hours."

RIGHT COLUMN: DIRECT CONTACT DETAILS
------------------------------------
· 🏢 Company Name: INNOVA
· 📍 Address: [Street, City, Postal Code, Country]
· 📞 Direct Phone: [+381 XX XXX XXXX]
· ✉️ Email: [info@innova... / sales@innova...]
· 🕒 Working Hours: Monday - Friday: 08:00 - 16:00
· 💬 Quick Chat: Direct WhatsApp / Viber button
· 🗺️ Interactive Google Map with company location


1.4 THEME SWITCHER SPECIFICATION (LIGHT / DARK MODE)
--------------------------------------------------------------------------------
· ☀️ Default State: Light Theme (Clean, professional white and light gray background).
· 🌓 Toggle Switch: Located in the top header (icon with Sun ☀️ / Moon 🌙 or pill switch).
· 🌙 Dark Theme: Sleek dark mode (deep navy / slate dark backgrounds, high-contrast crisp text).
· 💾 Persistence:
  - User's selected theme is saved in cookies and localStorage (`theme = 'light' | 'dark'`).
  - Next time the user visits or navigates pages, the chosen theme stays active without flickering.
  - Automatically respects user OS system preference (`prefers-color-scheme`) if not manually set.


1.5 VIDEO PERFORMANCE & LOCAL SERVER HOSTING (DIRECT CLICK ON PHOTO TO PLAY)
--------------------------------------------------------------------------------
🎯 OBJECTIVE:
Prevent browser lag, minimize bandwidth consumption, ensure instant initial page rendering (0 MB video overhead on page load), and deliver high-performance video streaming directly from your local web server without external tracking cookies.

IMPLEMENTATION RULES FOR DEVELOPERS:

1. 🖥️ Self-Hosted Video Files (Direct Local Server Hosting):
   - Storage: Store video files directly on your web server (or local CDN/storage directory).
   - Dual Modern Web Formats (Encoding):
     * MP4 container (H.264 video codec + AAC audio) — 100% universal compatibility across all devices, iOS Safari, Android, Windows, Mac.
     * WebM container (VP9 or AV1 video codec + Opus audio) — 35-50% smaller file size for modern browsers (Chrome, Edge, Firefox).
   - Compression: Compress videos using HandBrake or FFmpeg with Web-optimized settings (CRF 22-26, 1080p/720p max 2.5 Mbps bitrate).
   - 🔒 Privacy & GDPR Compliance Advantage: Hosting videos locally on your own server produces ZERO third-party tracking cookies (unlike YouTube/Vimeo embeds), requiring no intrusive cookie consent blocks before playback.

2. ⚡ Server Streaming Configuration (HTTP Byte-Range Requests):
   - Web server (Nginx / Apache / LiteSpeed) MUST have Byte-Range support enabled (`Accept-Ranges: bytes` header / HTTP 206 Partial Content).
   - Benefit: Browsers only stream and download small chunks as the video plays. Users can scrub/seek anywhere on the timeline without waiting for the full 50-100MB file to download.
   - 📦 Long-term Caching: Set header `Cache-Control: public, max-age=31536000, immutable` for static video and poster files.

3. 🎬 "Direct Photo Click" Playback (No Dedicated Play Button Required):
   - Entire Photo is Clickable: The visitor simply clicks anywhere directly on the thumbnail/photo preview (`cursor: pointer` on the container).
   - No separate button is required (an optional subtle play icon badge may overlay the corner, but clicking anywhere on the photograph starts playback).
   - Initial State: Render only a lightweight, modern WebP image thumbnail (poster). Zero video bytes loaded upfront.
   - Click Action: As soon as the user clicks the photo:
     a) Replace the photo seamlessly with the HTML5 `<video>` element with autoplay:
        <video controls autoplay playsinline preload="metadata">
          <source src="/videos/product-demo.webm" type="video/webm">
          <source src="/videos/product-demo.mp4" type="video/mp4">
          <track src="/videos/subs-en.vtt" kind="subtitles" srclang="en" label="English">
          <track src="/videos/subs-sv.vtt" kind="subtitles" srclang="sv" label="Svenska">
          <track src="/videos/subs-sr.vtt" kind="subtitles" srclang="sr" label="Srpski">
        </video>
     b) Or open the video in an ultra-clean Lightbox/Modal popup.

4. 📱 Mobile & iOS Safari Optimization:
   - Always include the `playsinline` attribute so videos play smoothly within the webpage on iPhone/iPad without forcing unwanted fullscreen takeovers.
   - 📐 Layout Stability (CLS = 0): Set CSS `aspect-ratio: 16 / 9` on video containers with a neutral background color to eliminate Cumulative Layout Shift.

5. 🧹 Memory Release & CPU Cleanup:
   - When the user closes the modal popup, pauses, or navigates away, JavaScript must immediately call `video.pause()` and reset `video.src = ""` or remove the element from the DOM to free RAM and GPU memory.


1.6 WEBSITE PREFERENCES & COOKIE STORAGE SPECIFICATION
--------------------------------------------------------------------------------
🎯 PURPOSE:
Store user configuration seamlessly so visitor preferences (theme, language) are preserved across visits without screen flickering (FOUC) and in full compliance with privacy standards.

🍪 COOKIES TO SET:
1. `innova_theme`:
   - Values: `'light'` | `'dark'`
   - Expiration: 365 days (`max-age=31536000; SameSite=Lax; path=/; Secure`)
   - Logic: Loaded in the `<head>` of HTML before page renders:
     `<script>if(document.cookie.includes('innova_theme=dark')) document.documentElement.setAttribute('data-bs-theme', 'dark');</script>`
2. `innova_lang`:
   - Values: `'en'` | `'sv'` | `'sr'`
   - Expiration: 365 days (`max-age=31536000; SameSite=Lax; path=/; Secure`)
   - Logic: Automatically serves the chosen language on the next visit.
3. `innova_cookie_consent`:
   - Values: `'accepted'` | `'functional_only'`
   - Expiration: 365 days

💡 DEVELOPER JAVASCRIPT SNIPPET (SET / GET COOKIES):
```javascript
// Function to save cookie
function setInnovaCookie(name, value, days = 365) {
  const expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/; SameSite=Lax; Secure`;
  localStorage.setItem(name, value); // Dual backup in localStorage
}

// Function to read cookie
function getInnovaCookie(name) {
  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  return match ? decodeURIComponent(match[2]) : localStorage.getItem(name);
}
```


1.7 RECOMMENDED FRONTEND FRAMEWORK, BOOTSTRAP VERSION & TYPOGRAPHY
--------------------------------------------------------------------------------
🚀 RECOMMENDED FRAMEWORK: BOOTSTRAP 5 (v5.3+)
- Why Bootstrap 5.3+?
  * Native Built-in Dark Mode: Toggled instantly with `<html data-bs-theme="dark">` or `<html data-bs-theme="light">`.
  * Zero jQuery dependency (pure, fast Vanilla JavaScript).
  * Robust, responsive 12-column grid and flexbox utilities.
  * Production-ready dropdown menus, modal dialogs, and forms.

🎨 RECOMMENDED TYPOGRAPHY (GOOGLE FONTS):
1. Primary Font: **Inter** or **Plus Jakarta Sans**
   - High-tech, ultra-clean European aesthetic.
   - Perfect legibility for English, Swedish (å, ä, ö), and Serbian (č, ć, ž, š, đ).
   - Weights to import: `400 (Regular)`, `500 (Medium)`, `600 (Semi-Bold)`, `700 (Bold)`.
2. Heading Font Alternative: **Outfit** or **Plus Jakarta Sans** (premium, modern look).
3. Monospace / Spec Font: **JetBrains Mono** (for technical specifications, model numbers, IP codes).

🔤 GOOGLE FONTS CDN EMBED CODE:
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
```

🎨 COLOR SYSTEM:
· Light Theme:
  - Background: `#ffffff` (Pure White) & `#f8fafc` (Light Surface Slate)
  - Text: `#0f172a` (Deep Slate Navy)
  - Primary Accent: `#0284c7` (Tech Precision Blue)
· Dark Theme:
  - Background: `#0b0f19` (Deep Charcoal Navy) & `#1e293b` (Card Surface)
  - Text: `#f1f5f9` (Crisp Off-White)
  - Primary Accent: `#38bdf8` (Luminous Sky Cyan)


1.8 INDIVIDUAL PRODUCT PAGES, CONTENT LENGTH ANALYSIS & DOCUMENTATION FORMAT STRATEGY
--------------------------------------------------------------------------------
🎯 CORE CONCEPT & USER JOURNEY:
Every single device and system from the menu (e.g., People Counters, Vehicle Counters, ANPR Systems, Nyckelskåp Safes, 4G Router) will have its own dedicated, detailed product presentation page.

🔍 WHERE TO CLICK FOR DETAILED DESCRIPTIONS:
1. Product Grid / Category Cards:
   - Each card displays a product thumbnail, title, short highlight bullet points, and a prominent call-to-action button: `[ READ MORE / FULL SPECIFICATION ]` or `[ VIEW DETAILS ]`.
   - The entire product card is clickable (`cursor: pointer`), leading directly to the individual product page.
2. In-Depth Product Page Contents:
   - High-resolution gallery / zoomable photos
   - Comprehensive technical description & operational principle
   - Click-to-play video demonstration (hosted locally on your server)
   - Interactive specification table (dimensions, power, connectivity, IP rating)
   - Download section for official technical documents

📊 EXPERT ANALYSIS: RECOMMENDED CHARACTER COUNT FOR HARDWARE PRODUCT DESCRIPTIONS:
For high-tech hardware, IoT devices, and security equipment, user retention requires a 3-tier text structure:

1. Level 1 — Teaser / Summary Description (Product Cards & Meta Snippets):
   - Length: **150 – 250 characters** (approx. 25–40 words).
   - Purpose: Quick scanning on mobile and category pages. Summarizes what the product is and its #1 benefit.
   - Example: "High-precision dual-lens IP camera people counter with 98.5% accuracy, neural AI processing, and PoE power. Designed for retail and public venues."

2. Level 2 — Hero / Primary Description (Above-the-Fold on Product Page):
   - Length: **450 – 750 characters** (approx. 70–110 words).
   - Purpose: Explains core operational capabilities, ease of installation, software integration, and reliability.
   - Ideal structure: 1 engaging introductory paragraph + 4 bullet points highlighting key features.

3. Level 3 — Comprehensive Technical Specifications & Deep Description (Below-the-Fold):
   - Length: **1,200 – 2,500+ characters** (structured data, not raw walls of text).
   - Structure: Clear tabular layout covering sensor technology, operating range, voltage, operating temperature (-20°C to +50°C), IP ingress rating, dimensions, and mounting brackets.

📄 DOCUMENTATION FORMATS STRATEGY (PDF VS. INTERACTIVE FORMATS):
1. PDF Format (Mandatory & Essential for B2B Hardware):
   - Why PDF is required: Architects, security contractors, public tender committees, and procurement managers ALWAYS download and save offline spec sheets.
   - Provide: 1 to 2-page branded technical PDF Datasheet + PDF Installation & Wiring Manual.
2. Responsive Web HTML Tables (Essential for Mobile & SEO):
   - All specs must ALSO exist directly in HTML tables on the web page. Google cannot index PDF data as efficiently, and mobile users want instant access without opening a 10MB PDF.
3. 2D / 3D CAD Drawings (Optional for Complex Products):
   - For Key Cabinets (Nyckelskåp) and specialized camera mounts, provide downloadable 2D DXF or PDF dimensional drawings for installation planners.



================================================================================
PART 2: SVENSK VERSION (MENY & PIL-STRUKTUR)
================================================================================

2.1 MENYSTRUKTUR
--------------------------------------------------------------------------------
SIDHUVUDETS MENYRAD:
· 🏠 HEM (HOME)
· 👥 PERSONRÄKNARE (Rullgardinsmeny)
    - IP-Kamera Personräknare
    - Personräknare – Sensor upp till 2 m
        * Horisontell
        * Vertikal
    - Personräknare – Sensor upp till 4,5 m
· 🚗 FORDONSRÄKNARE (Rullgardinsmeny)
    - IP-Kamera Fordonsräknare
    - Fordons- & Cykelräknare (Kombinerad)
    - Fordons-, Cykel- & Personräknare – Realtid
· 🚲 CYKELRÄKNARE (Rullgardinsmeny)
    - IP-Kamera Cykelräknare
    - HAL-Sensor Cykelräknare
    - Person- & Cykelräknare (Kombinerad)
· 🔍 NUMMERPLÅTSLÄSNING (ANPR / LPR) (Rullgardinsmeny)
    - Nummerplåtsidentifiering (ANPR / LPR-system)
    - Databas & Hanteringssystem för Registreringsnummer
    - Fordonsklassificering efter Kategori
    - ANPR för Parkeringssystem
    - Automatisk Bomstyrning (Företag & Fabriker)
    - Passerkontroll för Grindar & Privata Fastigheter
· 🔐 NYCKELSKÅP & SÄKERHETSSKÅP (Rullgardinsmeny)
    - Nyckelskåp för Fordon (Vagnpark & Bilnycklar)
    - Säkerhetsskåp för Läkemedel & Apotek
    - Värdeskåp för Värdesaker & Dokument
    - Kompakta & Mindre Modeller
    - Skåp med Stor Kapacitet (Modulära / Flerfack)
· 📶 INNOVA 4G MODEM / ROUTER (Direktlänk / Enskild produktsida)
· 💡 KONSULTATION & UTVECKLINGSTJÄNSTER (Rullgardinsmeny)
    - Kretskortsdesign (PCB Design) & Hårdvaruutveckling
    - Databasdesign & Utveckling
    - Webbplats- & Webbapplikationsutveckling
    - Utveckling av Desktopapplikationer
    - Utveckling av Mobilapplikationer (iOS & Android)
· 🏢 OM OSS
· 🏆 REFERENSER / PROJEKT
· 📥 DOKUMENTATION & NEDLADDNINGAR (Datablad, Manualer & Programvara)
· ✉️ KONTAKT

KONTROLLER I SIDHUVUDET (Överst till höger):
· 🔍 Sökfält: [ Snabbsökning ]
· ☀️ / 🌙 Temaväljare: Ljust läge (Standard) / Mörkt läge (Dark Mode)
· 🌐 Språkväljare: EN | SV | SR


2.2 VISUELLT NAVIGATIONSFLÖDE MED PILAR
--------------------------------------------------------------------------------
[WEBBPLATSENS SIDHUVUD]
  │
  ├──► [HEM]
  │
  ├──► [PERSONRÄKNARE] ──►
  │       ├──► IP-Kamera Personräknare
  │       ├──► Personräknare – Sensor upp till 2 m
  │       │       ├──► Horisontell
  │       │       └──► Vertikal
  │       └──► Personräknare – Sensor upp till 4,5 m
  │
  ├──► [FORDONSRÄKNARE] ──►
  │       ├──► IP-Kamera Fordonsräknare
  │       ├──► Fordons- & Cykelräknare (Kombinerad)
  │       └──► Fordons-, Cykel- & Personräknare – Realtid
  │
  ├──► [CYKELRÄKNARE] ──►
  │       ├──► IP-Kamera Cykelräknare
  │       ├──► HAL-Sensor Cykelräknare
  │       └──► Person- & Cykelräknare (Kombinerad)
  │
  ├──► [NUMMERPLÅTSLÄSNING (ANPR/LPR)] ──►
  │       ├──► Nummerplåtsidentifiering (ANPR / LPR-system)
  │       ├──► Databas & Hanteringssystem för Registreringsnummer
  │       ├──► Fordonsklassificering efter Kategori
  │       ├──► ANPR för Parkeringssystem
  │       ├──► Automatisk Bomstyrning (Företag & Fabriker)
  │       └──► Passerkontroll för Grindar & Privata Fastigheter
  │
  ├──► [NYCKELSKÅP & SÄKERHETSSKÅP] ──►
  │       ├──► Nyckelskåp för Fordon (Vagnpark & Bilnycklar)
  │       ├──► Säkerhetsskåp för Läkemedel & Apotek
  │       ├──► Värdeskåp för Värdesaker & Dokument
  │       ├──► Kompakta & Mindre Modeller
  │       └──► Skåp med Stor Kapacitet (Modulära / Flerfack)
  │
  ├──► [INNOVA 4G MODEM / ROUTER] ──► (Direktlänk till produktsida)
  │
  ├──► [KONSULTATION & UTVECKLING] ──►
  │       ├──► Kretskortsdesign (PCB Design) & Hårdvaruutveckling
  │       ├──► Databasdesign & Utveckling
  │       ├──► Webbplats- & Webbapplikationsutveckling
  │       ├──► Utveckling av Desktopapplikationer
  │       └──► Utveckling av Mobilapplikationer (iOS & Android)
  │
  ├──► [OM OSS]
  ├──► [REFERENSER / PROJEKT]
  ├──► [DOKUMENTATION & NEDLADDNINGAR] (Datablad, Manualer & PDF)
  ├──► [KONTAKT]
  │
  └──► [KONTROLLER I SIDHUVUDET]
          ├──► Sökfält: [ 🔍 Sök ]
          ├──► Temaväljare: [ ☀️ Ljust (Standard) / 🌙 Mörkt ]
          └──► Språkväljare: [ 🌐 EN | SV | SR ]



================================================================================
DEO 3: KOMPLETNA SPECIFIKACIJA (SRPSKA VERZIJA)
================================================================================

3.1 GLAVNI MENI I STRUKTURA PODMENIJA
--------------------------------------------------------------------------------
GLAVNA NAVIGACIONA TRAKA (ZAGLAVLJE SAJTA):
· 🏠 POČETNA (HOME)
· 👥 BROJAČI LJUDI (Padajući meni)
    - Brojač ljudi – IP kamera
    - Brojač ljudi – senzor do 2 m
        * Horizontalni
        * Vertikalni
    - Brojač ljudi – senzor do 4,5 m
· 🚗 BROJAČI VOZILA (Padajući meni)
    - Brojač vozila – IP kamera
    - Brojač vozila i bicikala (kombinovani)
    - Brojač vozila, bicikala i ljudi – real-time
· 🚲 BROJAČI BICIKALA (Padajući meni)
    - Brojač bicikala – IP kamera
    - Brojač bicikala – HAL senzor
    - Brojač ljudi i bicikala (kombinovani)
· 🔍 PREPOZNAVANJE REGISTARSKIH TABLICA (ANPR / LPR) (Padajući meni)
    - Prepoznavanje registarskih tablica vozila (ANPR / LPR)
    - Baza podataka i evidencija registarskih tablica
    - Razvrstavanje tablica po kategoriji vozila
    - ANPR sistemi za parkinge
    - Automatska kontrola rampi za firme, fabrike i preduzeća
    - Automatsko otvaranje kućnih kapija i privatnih poseda
· 🔐 SIGURNOSNI ORMARIĆI ZA KLJUČEVE I SEFOVI (NYCKELSKÅP) (Padajući meni)
    - Ormarići za ključeve vozila (automobili i vozni park)
    - Ormarići za lekove i medicinski materijal
    - Ormarići za vredne stvari i dragocenosti
    - Ormarići manjih dimenzija (kompaktni modeli)
    - Ormarići većih dimenzija (veliki kapacitet / modularni)
· 📶 INNOVA 4G MODEM / RUTER (Direktan link / Jedna stranica)
· 💡 KONSALTING I RAZVOJNE USLUGE (Padajući meni)
    - Dizajniranje štampanih ploča (PCB Design)
    - Projektovanje i izrada baza podataka
    - Izrada web sajtova i web aplikacija
    - Izrada desktop aplikacija
    - Izrada mobilnih aplikacija (iOS i Android)
· 🏢 O NAMA
· 🏆 REFERENCE / PROJEKTI
· 📥 DOKUMENTACIJA I PREUZIMANJE (Katalozi, Uputstva i PDF Specifikacije)
· ✉️ KONTAKT

DODATNE KONTROLE U ZAGLAVLJU (Gore Desno):
· 🔍 Brza pretraga: [ Pretraga proizvoda i modela ]
· ☀️ / 🌙 Prekidač teme: Svetla tema (Podrazumevana) / Tamna tema (Dark Mode)
· 🌐 Izbor jezika: EN | SV | SR


3.2 VIZUELNI PRIKAZ NAVIGACIJE SA STRELICAMA
--------------------------------------------------------------------------------
[ZAGLAVLJE SAJTA]
  │
  ├──► [POČETNA]
  │
  ├──► [BROJAČI LJUDI] ──►
  │       ├──► Brojač ljudi – IP kamera
  │       ├──► Brojač ljudi – senzor do 2 m
  │       │       ├──► Horizontalni
  │       │       └──► Vertikalni
  │       └──► Brojač ljudi – senzor do 4,5 m
  │
  ├──► [BROJAČI VOZILA] ──►
  │       ├──► Brojač vozila – IP kamera
  │       ├──► Brojač vozila i bicikala (kombinovani)
  │       └──► Brojač vozila, bicikala i ljudi – real-time
  │
  ├──► [BROJAČI BICIKALA] ──►
  │       ├──► Brojač bicikala – IP kamera
  │       ├──► Brojač bicikala – HAL senzor
  │       └──► Brojač ljudi i bicikala (kombinovani)
  │
  ├──► [PREPOZNAVANJE TABLICA (ANPR/LPR)] ──►
  │       ├──► Prepoznavanje registarskih tablica vozila (ANPR / LPR)
  │       ├──► Baza podataka i evidencija registarskih tablica
  │       ├──► Razvrstavanje tablica po kategoriji vozila
  │       ├──► ANPR sistemi za parkinge
  │       ├──► Automatska kontrola rampi za firme, fabrike i preduzeća
  │       └──► Automatsko otvaranje kućnih kapija i privatnih poseda
  │
  ├──► [ORMARIĆI ZA KLJUČEVE I SEFOVI (NYCKELSKÅP)] ──►
  │       ├──► Ormarići za ključeve vozila (automobili i vozni park)
  │       ├──► Ormarići za lekove i medicinski materijal
  │       ├──► Ormarići za vredne stvari i dragocenosti
  │       ├──► Ormarići manjih dimenzija (kompaktni modeli)
  │       └──► Ormarići većih dimenzija (veliki kapacitet / modularni)
  │
  ├──► [INNOVA 4G MODEM / RUTER] ──► (Direktan link na stranicu proizvoda)
  │
  ├──► [KONSALTING I RAZVOJNE USLUGE] ──►
  │       ├──► Dizajniranje štampanih ploča (PCB Design)
  │       ├──► Projektovanje i izrada baza podataka
  │       ├──► Izrada web sajtova i web aplikacija
  │       ├──► Izrada desktop aplikacija
  │       └──► Izrada mobilnih aplikacija (iOS i Android)
  │
  ├──► [O NAMA]
  ├──► [REFERENCE / PROJEKTI]
  ├──► [DOKUMENTACIJA I PREUZIMANJE] (PDF katalozi, tehnički listovi)
  ├──► [KONTAKT]
  │
  └──► [GORNJI DESNI UGAO - KONTROLE]
          ├──► Pretraga: [ 🔍 Pretraga ]
          ├──► Prekidač teme: [ ☀️ Svetla (Podrazumevana) / 🌙 Tamna ]
          └──► Izbor jezika: [ 🌐 EN | SV | SR ]


3.3 IZGLED I STRUKTURA STRANICE ZA KONTAKT
--------------------------------------------------------------------------------
Struktura: Raspored u dve kolone (Levo: Interaktivna kontakt forma | Desno: Direktni podaci i mapa)

LEVA KOLONA: KONTAKT FORMA
--------------------------
1. 👤 Ime i prezime * (Obavezno polje)
2. 🏢 Naziv firme / kompanije (Opciono polje)
3. ✉️ Email adresa * (Obavezno polje)
4. 📞 Broj telefona * (Obavezno polje sa pozivnim brojem)
5. 📂 Predmet upita / Kategorija rešenja (Padajuća lista - Dropdown):
   - Brojači ljudi
   - Brojači vozila
   - Brojači bicikala
   - Prepoznavanje tablica (ANPR / LPR sistemi)
   - Sigurnosni ormarići za ključeve (Nyckelskåp)
   - Innova 4G Modem / Ruter
   - Konsalting i razvoj (PCB, softver, baze, web)
   - Preuzimanje tehničke dokumentacije
   - Opšti upit / Ostalo
6. 💬 Opis projekta / Vaša poruka * (Polje za detaljan tekst)
7. 📎 Priložite specifikaciju / skicu (Prilog fajla - PDF, slika do 10MB - opciono)
8. 🛡️ Zaštita od spama (reCAPTCHA / Turnstile zaštita)
9. 🚀 Dugme za slanje: [ POŠALJI UPIT ] (Jasno istaknuto primarno dugme)
10. ✅ Poruka o uspehu: "Hvala vam! Vaš upit je uspešno poslat. Naš tim će vas kontaktirati u roku od 24 sata."

DESNA KOLONA: DIREKTNI KONTAKTI I PODACI O FIRMI
------------------------------------------------
· 🏢 Naziv firme: INNOVA
· 📍 Adresa sedišta: [Ulica i broj, Grad, Poštanski broj, Država]
· 📞 Telefon za podršku i prodaju: [+381 XX XXX XXXX]
· ✉️ Email za kontakt: [info@innova... / prodaja@innova...]
· 🕒 Radno vreme: Ponedeljak – Petak: 08:00 – 16:00
· 💬 Brzi kontakt: WhatsApp / Viber dugme za direktnu komunikaciju
· 🗺️ Interaktivna Google mapa sa tačnom lokacijom sedišta


3.4 SPECIFIKACIJA PROMENE TEME (SVETLA / TAMNA TEMA)
--------------------------------------------------------------------------------
· ☀️ Podrazumevano stanje (Default): Svetla tema (Pregledna, profesionalna bela i svetlo siva pozadina).
· 🌓 Prekidač: Smešten u gornjem desnom uglu navigacije (ikona Sunce ☀️ / Mesec 🌙).
· 🌙 Tamna tema (Dark Mode): Moderan tamni režim (tamno grafitne/teget pozadine, visok kontrast teksta).
· 💾 Čuvanje izbora posetioca:
  - Korisnikov izbor se automatski pamti u kolačićima (cookies) i `localStorage`.
  - Kada korisnik pređe na drugu stranicu ili ponovo poseti sajt, izabrana tema ostaje aktivna bez treperenja.
  - Automatski prepoznaje sistemska podešavanja operativnog sistema posetioca (`prefers-color-scheme`) ukoliko tema nije ručno izabrana.


3.5 TEHNIČKA SPECIFIKACIJA ZA VIDEO I LOKALNI SERVER (KLIK DIREKTNO NA SLIKU)
--------------------------------------------------------------------------------
🎯 CILJ:
Sprečiti usporavanje sajta, uštedeti internet protok, obezbediti maksimalnu brzinu otvaranja stranica (0 MB video tereta pri otvaranju) i omogućiti stabilan video striming direktno sa vašeg lokalnog servera bez zavisnosti od eksternih servisa i bez praćenja korisnika (GDPR usklađeno).

UPUTSTVO ZA PROGRAMERE:

1. 🖥️ Lokalni server i formati video fajlova (Self-Hosted Video):
   - Skladištenje: Video fajlovi se čuvaju direktno na vašem web serveru (ili lokalnom CDN-u).
   - Dva moderna web formata (kompresija):
     * MP4 format (H.264 video kodek + AAC audio) — 100% kompatibilan sa svim uređajima (iPhone/iPad Safari, Android, Windows, Mac).
     * WebM format (VP9 ili AV1 kodek + Opus audio) — 35-50% manja veličina fajla za moderne browsere (Chrome, Edge, Firefox).
   - Kompresija: Video zapise optimizovati preko alata HandBrake ili FFmpeg (CRF 22-26, maksimalni bitrate 2-2.5 Mbps u rezoluciji 1080p ili 720p).
   - 🔒 Prednost privatnosti i GDPR: Lokalni video ne učitava kolačiće trećih lica (za razliku od YouTube-a), pa se ne traži pristanak korisnika pre gledanja.

2. ⚡ Podešavanje servera za striming (HTTP Byte-Range podrška):
   - Web server (Nginx / Apache / LiteSpeed) MORA imati uključenu podršku za parcijalno preuzimanje (`Accept-Ranges: bytes` zaglavlje / HTTP status 206).
   - Zašto je ovo važno: Pretraživač ne skida ceo video odjednom (npr. 50 MB), već samo deliće kako video odmiče. Posetilac može da premotava video bez čekanja i bez opterećenja servera.
   - 📦 Keširanje: Postaviti dugotrajno keširanje statičkih video fajlova (`Cache-Control: public, max-age=31536000, immutable`).

3. 🎬 "Klik direktno na fotografiju" (Bez obaveznog posebnog dugmeta):
   - Cela površina fotografije je klikabilna (`cursor: pointer`). Posetilac jednostavno klikne bilo gde na samu sliku/thumbnail i video odmah počinje.
   - Nije neophodno posebno Play dugme (može stajati mala diskretna oznaka u uglu, ali sam klik na sliku pokreće plejer).
   - Početno stanje: Učitava se samo lagana WebP slika (poster). Nijedan bajt videa se ne preuzima unapred.
   - Akcija na klik: Čim posetilac klikne na sliku:
     a) Slika se trenutno zamenjuje HTML5 `<video>` elementom sa uključenim `autoplay`:
        <video controls autoplay playsinline preload="metadata">
          <source src="/video/demonstracija.webm" type="video/webm">
          <source src="/video/demonstracija.mp4" type="video/mp4">
          <track src="/video/prevod-sr.vtt" kind="subtitles" srclang="sr" label="Srpski">
          <track src="/video/prevod-en.vtt" kind="subtitles" srclang="en" label="English">
          <track src="/video/prevod-sv.vtt" kind="subtitles" srclang="sv" label="Svenska">
        </video>
     b) Ili se video otvara u elegantnom Popup (Lightbox) modalnom prozoru.

4. 📱 Mobilna optimizacija i sprečavanje pomeranja stranice (CLS = 0):
   - Obavezno staviti parametar `playsinline` kako se video na iPhone uređajima ne bi prisilno otvarao preko celog ekrana, već tekao unutar okvira.
   - 📐 Odnos stranica: Postaviti fiksni odnos stranica preko CSS-a (`aspect-ratio: 16 / 9`) sa tamnom pozadinom, kako se izgled stranice ne bi pomerao kada se video pojavi.

5. 🧹 Oslobađanje radne memorije (RAM i procesor):
   - Čim posetilac zatvori popup prozor sa videom ili napusti stranicu, JavaScript mora odmah pozvati `video.pause()` i isprazniti izvor (`video.src = ""`) ili ukloniti element iz koda.


3.6 PODEŠAVANJA SAJTA I ČUVANJE U KOLAČIĆIMA (COOKIES & LOCALSTORAGE)
--------------------------------------------------------------------------------
🎯 SVRHA:
Automatski sačuvati korisnička podešavanja (tema i jezik) kako bi sajt pri svakoj narednoj poseti odmah prikazao željene opcije bez treperenja ekrana.

🍪 KOLAČIĆI (COOKIES) KOJI SE KORISTE:
1. `innova_theme`:
   - Vrednosti: `'light'` (svetla) | `'dark'` (tamna)
   - Trajanje: 365 dana (`max-age=31536000; SameSite=Lax; path=/; Secure`)
   - Način primene u zaglavlju (`<head>`) bez kašnjenja:
     `<script>if(document.cookie.includes('innova_theme=dark')) document.documentElement.setAttribute('data-bs-theme', 'dark');</script>`
2. `innova_lang`:
   - Vrednosti: `'sr'` | `'en'` | `'sv'`
   - Trajanje: 365 dana
3. `innova_cookie_consent`:
   - Vrednosti: `'accepted'` (prihvaćeno)
   - Trajanje: 365 dana

💡 JAVASCRIPT KOD ZA PROGRAMERE (UPISIVANJE I ČITANJE KOLAČIĆA):
```javascript
// Funkcija za snimanje podešavanja u kolačić i localStorage
function setInnovaCookie(name, value, days = 365) {
  const expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/; SameSite=Lax; Secure`;
  localStorage.setItem(name, value);
}

// Funkcija za čitanje podešavanja
function getInnovaCookie(name) {
  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  return match ? decodeURIComponent(match[2]) : localStorage.getItem(name);
}
```


3.7 PREPORUČENI FRONTEND FRAMEWORK, BOOTSTRAP I FONTOVI
--------------------------------------------------------------------------------
🚀 PREPORUČENI FRAMEWORK: BOOTSTRAP 5 (v5.3+)
- Zašto Bootstrap 5.3+?
  * Ugrađena izvorna podrška za Dark Mode: Menja se jednostavno dodavanjem atributa `<html data-bs-theme="dark">` ili `<html data-bs-theme="light">`.
  * Nema zavisnosti od jQuery-ja (čist, brz i moderan JavaScript).
  * Izuzetna responzivnost za mobilne telefone, tablete i računare.
  * Spreman sistem padajućih menija, modala i formi.

🎨 PREPORUČENI FONTOVI (GOOGLE FONTS):
1. Glavni font: **Inter** ili **Plus Jakarta Sans**
   - Moderan, minimalistički, tehnološki izgled.
   - Savršen prikaz svih naših slova sa kvačicama (č, ć, ž, š, đ), švedskih (å, ä, ö) i engleskog teksta.
   - Preporučene debljine: `400 (Regular)`, `500 (Medium)`, `600 (Semi-Bold)`, `700 (Bold)`.
2. Font za naslove: **Plus Jakarta Sans** ili **Outfit** (daje sajtu premijum izgled visoke tehnologije).
3. Font za tehničke podatke/kodove: **JetBrains Mono** (za dimenzije, IP oznake, modele).

🔤 KOD ZA UBACIVANJE FONTA U HTML:
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
```

🎨 PALETA BOJA ZA SAJT:
· Svetla tema (Light Mode):
  - Pozadina: `#ffffff` (bela) i `#f8fafc` (svetlo siva za kartice)
  - Tekst: `#0f172a` (tamno teget/siva sa oštrim kontrastom)
  - Glavna akcentna boja (dugmad i linkovi): `#0284c7` (tehnološka plava)
· Tamna tema (Dark Mode):
  - Pozadina: `#0b0f19` (duboka tamna teget) i `#1e293b` (grafitna za kartice)
  - Tekst: `#f1f5f9` (jasna svetla)
  - Glavna akcentna boja: `#38bdf8` (svetli tirkiz/plava)


3.8 ZASEBNE STRANICE ARTIKALA, STRUČNA ANALIZA DUŽINE OPISA I FORMATI DOKUMENTACIJE
--------------------------------------------------------------------------------
🎯 OSNOVNI PRINCIP I KORISNIČKO ISKUSTVO:
Svaki pojedinačni artikal iz menija (npr. Brojači ljudi, Brojači vozila, ANPR sistemi, Nyckelskåp ormarići, 4G ruter) imaće svoju sopstvenu, zasebnu stranicu sa kompletnim i detaljnim opisom.

🔍 GDE SE KLIKĆE ZA DETALJNI OPIS:
1. Kartice na listi proizvoda (Kategorije):
   - Svaka kartica sadrži fotografiju, naziv modela, kratak uvodni opis u 2-3 teze i jasno istaknuto dugme za akciju: `[ DETALJNIJE / SAZNAJTE VIŠE ]` ili `[ POGLEDAJ SPECIFIKACIJU ]`.
   - Cela kartica je takođe klikabilna (`cursor: pointer`), vodeći direktno na zasebnu stranicu artikla.
2. Sadržaj na zasebnoj stranici artikla:
   - Galerija fotografija visoke rezolucije sa opcijom uvećanja (zoom)
   - Kompletan tehnički i funkcionalni opis rada uređaja
   - Video demonstracija koja se pokreće klikom direktno na sliku (lokalno sa servera)
   - Interaktivna tabela tehničkih karakteristika (napajanje, domet, radna temperatura, IP zaštita, dimenzije)
   - Sekcija za preuzimanje zvanične PDF dokumentacije

📊 STRUČNA ANALIZA: PREPORUČENI BROJ KARAKTERA ZA OPIS UREĐAJA:
Za tehničke uređaje, IoT opremu i bezbednosne sisteme, posetioci (inženjeri, menadžeri, kupci) traže brze i jasne informacije bez suvišnog teksta. Zato se opis deli na 3 nivoa:

1. Prvi nivo — Kratki opis za kartice i brzi pregled (Teaser):
   - Preporučena dužina: **150 – 250 karaktera** (oko 25–40 reči).
   - Cilj: Trenutno razumevanje na mobilnom telefonu. Odgovara na pitanje šta uređaj radi i koja je ključna prednost.
   - Primer: "Visokoprecizni dvo-senzorski brojač ljudi sa veštačkom inteligencijom (AI), tačnošću preko 98% i PoE napajanjem. Idealan za tržne centre, maloprodaju i javne objekte."

2. Drugi nivo — Osnovni pregled na vrhu stranice artikla (Hero sekcija):
   - Preporučena dužina: **450 – 750 karaktera** (oko 70–110 reči).
   - Cilj: Jasno objašnjava prednosti, pouzdanost u radu, jednostavnost montaže i povezivanje na softver.
   - Struktura: Jedan uvodni pasus + 4 do 5 jasnih tačaka sa ikonama (npr. Domet senzora, Brzina detekcije, Povezivanje 4G/LAN).

3. Treći nivo — Detaljan tehnički opis i specifikacija (Dno stranice):
   - Preporučena dužina: **1.200 – 2.500+ karaktera** (kroz strukturisanu tabelu, a ne kilometarski tekst).
   - Sadržaj: Senzorska tehnologija, napon napajanja (12V/24V/PoE), potrošnja, radna temperatura (-20°C do +50°C), stepen zaštite od vode i prašine (IP65/IP66), komunikacioni protokoli (Ethernet, 4G, RS485, Wi-Fi), dimenzije i težina.

📄 FORMATI DOKUMENTACIJE (PDF ILI DRUGI FORMATI?):
1. PDF Format (NEOPHODAN I OBAVEZAN ZA HARDVER):
   - Zašto PDF: Projektanti, javne nabavke, šefovi obezbeđenja i tehnička lica u 95% slučajeva zahtevaju zvaničan tehnički list koji mogu da preuzmu, odštampaju ili pošalju investitoru.
   - Šta pripremiti:
     * Tehnički list (Datasheet) na 1 do 2 strane sa logotipom firme, nacrtom i tabelom parametara.
     * Korisničko uputstvo za montažu i povezivanje (User Manual) u PDF formatu.
2. Web HTML Tabele (OBAVEZNO UZ PDF):
   - Iste te karakteristike moraju postojati i direktno u HTML tabeli na sajtu. Korisnici sa telefona ne žele uvek da skidaju PDF od 5MB, a Google pretraživač indeksira HTML tabele 10x bolje nego PDF za SEO pozicije.
3. 2D / 3D CAD formati (DXF / DWG nacrti - Opciono):
   - Za Nyckelskåp ormariće i nosače kamera, opciono ponuditi dimenzione crteže za arhitekte i elektro-instalatere.



================================================================================
PART 4: REVISIONS & COMMENTS BOX
================================================================================
┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  ⚠️  IMPORTANT INSTRUCTIONS:                                                  │
│                                                                              │
│  🚫  PLEASE DO NOT MODIFY THE UPPER TEXT OR STRUCTURE OF THIS DOCUMENT!      │
│  ✍️  All remarks, feedback, requested additions, items to remove, and        │
│      comments must be entered ONLY in this designated section below.         │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

✍️ ENTER YOUR COMMENTS BELOW THIS LINE:
────────────────────────────────────────────────────────────────────────────────

📋 1. MENU REVISIONS (ITEMS TO ADD / REMOVE):
   · 
   · 
   · 

⚙️ 2. TECHNICAL & DESIGN SUGGESTIONS (FEATURES, UI/UX, LOGIC):
   · 
   · 
   · 

💬 3. GENERAL FEEDBACK, OBSERVATIONS & ADDITIONAL REQUIREMENTS:
   · 
   · 
   · 

================================================================================