📄 Official Specification Content (All Languages)
>> ⚠️ 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.