Skip to content

UI_DESIGN.md

Latest commit

 

History

History
335 lines (280 loc) · 13.8 KB

UI_DESIGN.md

File metadata and controls

335 lines (280 loc) · 13.8 KB

🎨 Interfejs Użytkownika - Wygląd Programu

📱 Layout Głównego Okna

┌─────────────────────────────────────────────────────────┐
│  🎮 Steam & Epic Games Deals Viewer                     │ ← Nagłówek
├─────────────────────────────────────────────────────────┤
│                                                          │
│  🎮 Promocje i Darmowe Gry                              │ ← Tytuł (duży, pogrubiony)
│                                                          │
│  ┌─────────────────────────────────────────────────┐   │
│  │           🔄 Odśwież                             │   │ ← Przycisk odświeżania
│  └─────────────────────────────────────────────────┘   │
│                                                          │
│  ✅ Znaleziono 12 ofert                                 │ ← Status
│                                                          │
│  ╔══════════════════════════════════════════════════╗  │
│  ║  Scroll Area (przewijalne)                       ║  │
│  ║  ┌──────────────────────────────────────────┐   ║  │
│  ║  │ [OBRAZEK]  Cyberpunk 2077               │   ║  │ ← Karta oferty 1
│  ║  │   🎮       Steam                         │   ║  │
│  ║  │            Zniżka 70%                    │   ║  │
│  ║  │            $59.99 → $17.99 -70%         │   ║  │
│  ║  │            [🌐 Otwórz w przeglądarce]   │   ║  │
│  ║  └──────────────────────────────────────────┘   ║  │
│  ║                                                  ║  │
│  ║  ┌──────────────────────────────────────────┐   ║  │
│  ║  │ [OBRAZEK]  Grand Theft Auto V           │   ║  │ ← Karta oferty 2
│  ║  │   🎮       Epic Games                    │   ║  │
│  ║  │            Tygodniowa darmowa gra!       │   ║  │
│  ║  │            Płatna → DARMOWA!            │   ║  │
│  ║  │            [🌐 Otwórz w przeglądarce]   │   ║  │
│  ║  └──────────────────────────────────────────┘   ║  │
│  ║                                                  ║  │
│  ║  ┌──────────────────────────────────────────┐   ║  │
│  ║  │ [OBRAZEK]  The Witcher 3                │   ║  │ ← Karta oferty 3
│  ║  │   🎮       Steam                         │   ║  │
│  ║  │            Zniżka 85%                    │   ║  │
│  ║  │            $39.99 → $5.99 -85%          │   ║  │
│  ║  │            [🌐 Otwórz w przeglądarce]   │   ║  │
│  ║  └──────────────────────────────────────────┘   ║  │
│  ║                                                  ║  │
│  ║  ... więcej kart ...                            ║  │
│  ║                                                  ║  │
│  ╚══════════════════════════════════════════════════╝  │
│                                                          │
└─────────────────────────────────────────────────────────┘

🎨 Schemat Kolorystyczny

Tło:

  • Główne tło: #1a1a2e (ciemny granat)
  • Karty ofert: #16213e (jaśniejszy granat)
  • Przyciski: #0f3460 (niebieski)

Tekst:

  • Główny tekst: #eee (jasny biały)
  • Opisowy tekst: #aaa (szary)
  • Linki hover: #e94560 (czerwony/różowy)

Akcenty:

  • Steam/Epic badge: #e94560 (czerwony)
  • Cena DARMOWA: #00ff00 (zielony)
  • Zniżka %: #00ff00 (zielony)
  • Stara cena: #888 (przekreślony szary)

Efekty:

  • Hover karty: border zmienia się na #e94560
  • Hover przycisku: tło zmienia się na #16213e
  • Scrollbar: #0f3460 tło, #e94560 handle

📦 Szczegóły Karty Oferty

Układ karty:

┌────────────────────────────────────────────────────┐
│ [   OBRAZEK   ]   Tytuł Gry                        │
│ [   200x112   ]   (duży, pogrubiony)               │
│ [   px        ]                                     │
│                   [🎮 Steam/Epic]  ← Badge         │
│                                                     │
│                   Opis gry / Promocja              │
│                   (zawijany tekst, max 60px)       │
│                                                     │
│                   $59.99 → $17.99 -70%             │
│                   (formatowane HTML)                │
│                                                     │
│                   [🌐 Otwórz w przeglądarce]       │
│                   (przycisk, min 35px wysokości)    │
└────────────────────────────────────────────────────┘

Wymiary:

  • Karta: min. 150px wysokość
  • Obrazek: 200x112px (stały)
  • Margines: 15px wewnętrzny, 15px spacing między kartami
  • Okrąglenie: 10px border-radius
  • Border: 2px solid

🖱️ Interaktywność

Karty:

  • Domyślnie: border #0f3460
  • Hover: border #e94560 (animacja)
  • Kursor: normalny

Przycisk Odśwież:

  • Domyślnie: tło #0f3460
  • Hover: tło #16213e
  • Pressed: tło #0a2647
  • Disabled: szary, nieaktywny podczas ładowania
  • Kursor: pointer

Przycisk Otwórz:

  • Domyślnie: tło #0f3460
  • Hover: tło #16213e
  • Kursor: pointer
  • Akcja: otwiera link w domyślnej przeglądarce

Scrollbar:

  • Track: #0f3460
  • Handle: #16213e
  • Handle hover: #e94560
  • Szerokość: 12px
  • Okrąglenie: 6px

📐 Responsywność

Szerokość okna:

  • Minimalna: 600px
  • Domyślna: 800px lub 90% szerokości ekranu (mniejsza wartość)
  • Maksymalna: nieograniczona

Wysokość okna:

  • Domyślna: 80% wysokości ekranu
  • Minimalna: 400px

Dostosowanie:

  • Karty dostosowują szerokość do kontenera
  • Obrazki skalują się proporcjonalnie
  • Tekst zawija się automatycznie
  • Scrollbar pojawia się gdy potrzeba

🎭 Stany Aplikacji

1. Ładowanie (Loading):

┌─────────────────────────────────┐
│  [🔄 Odśwież] (disabled)        │
│  ⏳ Pobieranie ofert...         │
│                                  │
│  (pusta lista)                  │
└─────────────────────────────────┘

2. Sukces (Loaded):

┌─────────────────────────────────┐
│  [🔄 Odśwież]                   │
│  ✅ Znaleziono 12 ofert         │
│                                  │
│  [Karta 1]                      │
│  [Karta 2]                      │
│  [Karta 3]                      │
│  ...                            │
└─────────────────────────────────┘

3. Błąd (Error):

┌─────────────────────────────────┐
│  [🔄 Odśwież]                   │
│  ❌ Błąd: Brak połączenia      │
│                                  │
│  [Popup z szczegółami]          │
└─────────────────────────────────┘

4. Brak ofert (Empty):

┌─────────────────────────────────┐
│  [🔄 Odśwież]                   │
│  ❌ Brak dostępnych ofert       │
│                                  │
│  (pusta lista)                  │
└─────────────────────────────────┘

🔔 Okna Dialogowe

Sprawdzanie zależności (przy starcie):

╔════════════════════════════════════╗
║  Brakujące zależności              ║
╠════════════════════════════════════╣
║                                    ║
║  Brakujące zależności:             ║
║                                    ║
║  • libcurl                         ║
║  • Qt6                             ║
║                                    ║
║  Zainstaluj je poleceniem:         ║
║  sudo apt install libqt6-dev ...   ║
║                                    ║
║        [ OK ]                      ║
╚════════════════════════════════════╝

Błąd połączenia:

╔════════════════════════════════════╗
║  Błąd                              ║
╠════════════════════════════════════╣
║                                    ║
║  Błąd sieci: Connection timeout    ║
║                                    ║
║  Sprawdź połączenie internetowe.   ║
║                                    ║
║        [ OK ]                      ║
╚════════════════════════════════════╝

📊 Typografia

Czcionki:

  • System default (Qt Fusion)
  • Fallback: Sans-serif

Rozmiary:

  • Nagłówek główny: 18pt, bold
  • Tytuł gry: 14pt, bold
  • Badge (Steam/Epic): 12pt, bold
  • Opis: 11pt, regular
  • Cena: 11-18pt (zależnie od stanu)
  • Przyciski: 14pt, bold
  • Status: 11pt, regular

🎬 Animacje

Płynne przejścia:

  • Zmiana koloru border przy hover
  • Zmiana tła przycisku przy hover
  • Pojawienie się karty (fade-in przy ładowaniu obrazka)

Brak animacji:

  • Zmiana zawartości (natychmiastowa)
  • Scrolling (natywne zachowanie OS)

🖼️ Ikony i Emoji

Używane emoji:

  • 🎮 - gry, nagłówek
  • 🔄 - odśwież
  • ✅ - sukces
  • ❌ - błąd
  • ⏳ - ładowanie
  • 🌐 - link do przeglądarki

Style:

  • Rozmiar: standardowy (system font size)
  • Kolor: dziedziczony z tekstu

💻 Przykład Wyglądu Karty

Steam Promocja:

┌────────────────────────────────────────────────────┐
│ [Cyberpunk2077]   Cyberpunk 2077                   │
│ [   OBRAZEK   ]   [🎮 Steam]                       │
│ [   200x112   ]                                     │
│                   Zniżka: 70%                       │
│                                                     │
│                   $59.99 → $17.99 -70%             │
│                                                     │
│                   [🌐 Otwórz w przeglądarce]       │
└────────────────────────────────────────────────────┘

Epic Darmowa Gra:

┌────────────────────────────────────────────────────┐
│ [   GTA V    ]   Grand Theft Auto V                │
│ [  OBRAZEK   ]   [🎮 Epic Games]                   │
│ [  200x112   ]                                     │
│                   Tygodniowa darmowa gra do        │
│                   pobrania za darmo!               │
│                                                     │
│                   Płatna → DARMOWA!                │
│                                                     │
│                   [🌐 Otwórz w przeglądarce]       │
└────────────────────────────────────────────────────┘

🎯 Podsumowanie Design

Główne zasady:

✅ Dark theme - przyjazny dla oczu
✅ Gaming aesthetic - kolory inspirowane gamingiem
✅ Czytelność - kontrast tekstu
✅ Responsywność - działa na każdym rozdziale
✅ Minimalizm - fokus na treści
✅ Intuicyjność - jasne call-to-action

Inspiracje:

  • Steam Client (dark mode)
  • Discord (kolorystyka)
  • Epic Games Store (layout kart)

Program wygląda profesjonalnie i jest przyjemny w użyciu! 🎨