Jesteś doświadczonym projektantem UI, który stosuje nowoczesny, minimalistyczny design, cienie, szkło i miękkie kolory. Twoim zadaniem jest stworzenie profesjonalnego, pięknego mockupu, gotowego do dostawy, na podstawie tych wymagań: <requirements> ## 1. Ogólny styl i język wizualny Ten interfejs reprezentuje premiumowy, nowoczesny dashboard handlowy fintech / kryptowalutowy w ciemnym temacie. Język wizualny łączy **miękki neumorfizm** i **luksusową estetykę Web3**. Główne cechy: - Ciepłe złote/pomarańczowe podświetlenia akcentów - Monochromatyczna paleta kolorów z minimalistycznymi efektami i cieniami - Układ oparty na kartach z głębią i subtelnymi tłami - Minimalne obramowania, separacja za pomocą cieni lub jasnych tłów Doczuwane wrażenie: - Bezpieczny - Profesjonalny - Wysokiej klasy / na poziomie instytucjonalnym - Zoptymalizowany dla doświadczonych traderów --- ## 2. Struktura układu ### Ogólny układ - Dashboard zorientowany na desktop - Proporcje wyjściowe: 3:2 - Trzy główne regiony: 1. Górny pasek nawigacyjny (poziomy) 2. Lewa nawigacja boczna (pionowa) 3. Główny obszar treści (wielostrumieniowa siatka kart) Odstępy są wystarczające, priorytetem są przejrzystość i wizualna przestrzeń oddechowa. --- ## 3. Górny pasek nawigacyjny - Wysokość: 72px - Lewa strona: - Tekst logo marki "Mevolut" - Stylizowane "M" - Złoty/pomarańczowy akcent - Środek: - Linki nawigacyjne: Dashboard, Bezpieczeństwo, Polecenia, Opłaty handlowe, Zarządzanie API - Prawa strona: - Link do zamówień - Główny CTA: "Wpłata" (złoty przycisk w kształcie pigułki) - Awatar użytkownika (okrągły) - Przełącznik tematu (ikona księżyca) Typografia: - Czysta czcionka bezszeryfowa - Średnia grubość - Biały tekst główny, stłumiony szary dla nieaktywnych stanów --- ## 4. Lewa nawigacja boczna - Szerokość: 240px - Tło: prawie czarne - Pionowe elementy nawigacyjne z ikonami: - Dashboard (aktywny) - Bezpieczeństwo - Polecenia - Opłaty handlowe - Zarządzanie API - Wyrównane do dołu: - Ustawienia Aktywny element: - Subtelne podświetlenie tła - Lekki odcień tła - Zaokrąglony kontener Ikony: - Styl konturowy - Złoty akcent w stanie aktywnym --- ## 5. Główny obszar treści ### 5.1 Karta przeglądu użytkownika - Duża zaokrąglona karta na górze - Lewa strona: - Okrągły awatar - Tekst powitania ("Cześć…") - Imię użytkownika - Wbudowane bloki informacyjne: - UID (ikona kopiowania) - Status weryfikacji tożsamości - Poziom bezpieczeństwa - Strefa czasowa - Znacznik czasu ostatniego logowania - Prawa strona: - Przełącznik "Ukryj informacje" Styl: - Subtelne cienie wewnętrzne --- ### 5.2 Karta wpłaty / zakupu - Karta średniej wielkości - Tekst tytułowy wyjaśniający opcje wpłaty - Dwa rzędy akcji: - Wpłata (dolary lub kryptowaluty) - Kup akcje (waluta lokalna) - Każdy rząd: - Ikona - Etykieta - Przycisk akcji ze strzałką (złoty akcent) --- ### 5.3 Karta całkowitych aktywów - Wyświetla saldo USD i równowartość USD - Duży, zblednięty znak dolara jako znak wodny w tle - Zakładki akcji: - Kup akcje - Wpłata - Wypłata - Wartości liczbowe są duże --- ### 5.4 Karta poziomu VIP - Wyświetla aktualny poziom VIP - Stawki opłat za spot i futures - Pasek postępu dla holdingów tokenów - Link "Zobacz więcej" Pasek postępu: - Zaokrąglony - Ciemny tor tła --- ### 5.5 Tabela obecnych holdingów - Karta zawierająca układ tabeli - Kolumny: - Moneta (ikona + nazwa) - Cena - Zmiana 24h - Trend 4h (sparkline) - Akcje (Wpłata, Wypłata, Handel) Sparklines: - Zielony dla trendu pozytywnego - Czerwony dla trendu negatywnego Po najechaniu: - Subtelne podświetlenie tła dla każdego rzędu --- ### 5.6 Karta programu partnerskiego - Karta promocyjna - Ilustracja złotej monety - Krótki opis i przycisk CTA ("Aplikuj teraz") --- ### 5.7 Karta informacji / aktualności - Pionowa lista ogłoszeń - Nagłówek + znacznik czasu - Link "Zobacz więcej" na górze --- ## 6. Paleta kolorów - Główne tło: głęboki węgiel / czarny - Powierzchnie kart: nieco jaśniejsze - Kolor akcentu: ciepłe złoto - Hierarchia tekstu: - Biały (główny) - Stłumiony szary (poboczny) - Ciemny szary (wyłączony) - Kolory statusów: - Zielony dla pozytywnego - Czerwony dla negatywnego --- ## 7. Efekty i interakcje - Zaokrąglone rogi w całym interfejsie (sm) # Design tokens: { // Definicja globalnego tematu "theme": { "mode": "ciemny", "style": [ "miękki-neumorfizm", "premiumowy-fintech" ] }, // Wymiary i struktura układu "layout": { "type": "dashboard-desktopowy", "grid": "trzy-kolumnowy", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // System kolorów "colors": { "background": "#0B0D10", // Główne tło aplikacji "primaryAccent": "#F5A623", // Złote/pomarańczowe podświetlenie "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Skala typografii "typography": { "fontFamily": "SF Pro, system-ui, sans-serif", "weights": { "heading": 600, "body": 400, "numeric": 500 }, "sizes": { "h1": 24, "h2": 20, "h3": 16, "body": 14, "caption": 12 } }, // Podstawowe komponenty UI "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "none", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "transparent", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "konturowy" }, "table": { "rowHeight": 56, "divider": "subtelny", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // System ikon "icons": { "style": "konturowy", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
