Vi ste iskusni UI dizajner koji prihvaća moderni, minimalistički dizajn, sjene, staklo i meke boje. Vaša uloga je stvoriti profesionalnu, lijepu maketu koja je spremna za isporuku na temelju ovih zahtjeva: <requirements> ## 1. Opći stil i vizualni jezik Ovo sučelje predstavlja premium, modernu nadzornu ploču za fintech / kriptovalutno trgovanje koja koristi tamnu temu. Vizualni jezik kombinira **meki neumorfizam** i **luksuznu Web3 estetiku**. Osnovne karakteristike: - Topli zlatni/narančasti akcenti za označavanje - Monokromatska paleta boja s minimalističkim efektima i sjenama - Raspored temeljen na karticama s dubinom i suptilnim pozadinama - Minimalni rubovi, odvajanje putem sjen ili svijetlih pozadina Ciljni dojam: - Sigurno - Profesionalno - Visokokvalitetno / institucionalne razine - Optimizirano za iskusne trgovce --- ## 2. Struktura rasporeda ### Globalni raspored - Nadzorna ploča prvenstveno za desktop - Omjer izlaza: 3:2 - Tri glavna područja: 1. Gornja navigacijska traka (horizontalna) 2. Lijeva bočna navigacija (vertikalna) 3. Glavno područje sadržaja (višestupčana mreža kartica) Razmak je obilan, s prioritetom na jasnoći i vizualnom prostoru za disanje. --- ## 3. Gornja navigacijska traka - Visina: 72px - Lijevo: - Tekst loga brenda "Mevolut" - Stilizirani "M" - Zlatni/narančasti akcent - Sredina: - Navigacijski linkovi: Nadzorna ploča, Sigurnost, Preporuka, Naknade za trgovanje, Upravljanje API-jem - Desno: - Link za narudžbu - Primarni CTA: "Depozit" (zlatni gumb u obliku tablete) - Avatar korisnika (kružni) - Prekidač teme (ikona mjeseca) Tipografija: - Čisti sans-serif font - Srednja debljina - Bijela primarna tekst, tupa siva neaktivna stanja --- ## 4. Lijeva bočna navigacija - Širina: 240px - Pozadina: skoro crna - Vertikalne navigacijske stavke s ikonama: - Nadzorna ploča (aktivna) - Sigurnost - Preporuka - Naknade za trgovanje - Upravljanje API-jem - Poravnato na dno: - Postavke Aktivna stavka: - Suptilno označavanje pozadine - Blaga nijansa pozadine - Zaobljeni spremnik Ikone: - Stil kontura - Zlatni akcent na aktivnom stanju --- ## 5. Glavno područje sadržaja ### 5.1 Kartica pregleda korisnika - Velika zaobljena kartica na vrhu - Lijevo: - Kružni avatar - Tekst pozdrava ("Bok…") - Ime korisnika - Umetnuti info blokovi: - UID (ikona za kopiranje) - Status verifikacije identiteta - Razina sigurnosti - Vremenska zona - Vremenska oznaka zadnje prijave - Desno: - Prekidač "Sakrij informacije" Stil: - Suptilne unutarnje sjene --- ### 5.2 Kartica depozita / kupnje - Kartica srednje veličine - Tekst naslova koji objašnjava opcije depozita - Dva retka akcija: - Depozit (dolari ili kriptovalute) - Kupnja dionica (lokalna valuta) - Svaki redak: - Ikona - Oznaka - Gumb akcije sa strelicom (zlatni akcent) --- ### 5.3 Kartica ukupnih imovina - Prikazuje USD saldo i USD ekvivalent - Velik, blijedi simbol dolara kao vodeni žig u pozadini - Kartice akcija: - Kupnja dionica - Depozit - Podizanje - Brojčane vrijednosti su velike --- ### 5.4 Kartica VIP razine - Prikazuje trenutnu VIP razinu - Stopa naknada za spot i futures trgovanje - Traka napretka za imovinu tokena - Link "Prikaži više" Traka napretka: - Zaobljena - Traka tamne pozadine --- ### 5.5 Tablica trenutnih imovina - Kartica koja sadrži raspored tablice - Stupci: - Kovanica (ikona + naziv) - Cijena - Promjena 24h - Trend 4h (sparkline) - Akcije (Depozit, Podizanje, Trgovanje) Sparkline grafikon: - Zelena za pozitivni trend - Crvena za negativni trend Hover efekt: - Suptilno označavanje pozadine po retku --- ### 5.6 Kartica programa za affiliate marketing - Promidžbena kartica - Ilustracija zlatnog novčića - Kratak opis i CTA gumb ("Prijavi se odmah") --- ### 5.7 Kartica informacija / vijesti - Vertikalna lista obavijesti - Naslov + vremenska oznaka - Link "Prikaži više" na vrhu --- ## 6. Paleta boja - Primarna pozadina: duboki ugljično sivi / crna - Površine kartica: nešto svjetlije - Boja akcenta: topli zlat - Hijerarhija teksta: - Bijela (primarna) - Tupa siva (sekundarna) - Tamna siva (onemogućeno) - Boje statusa: - Zelena za pozitivno - Crvena za negativno --- ## 7. Efekti i interakcije - Zaobljeni kutovi svuda (mali) # Design tokens: { // Definicija globalne teme "theme": { "mode": "tamna", "style": [ "meki-neumorfizam", "premium-fintech" ] }, // Mjere i struktura rasporeda "layout": { "type": "desktop-nadzorna-ploča", "grid": "tri-stupca", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Sustav boja "colors": { "background": "#0B0D10", // Glavna pozadina aplikacije "primaryAccent": "#F5A623", // Zlatni/narančasti akcent "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Skala tipografije "typography": { "fontFamily": "SF Pro, system-ui, bez-serifa", "weights": { "heading": 600, "body": 400, "numeric": 500 }, "sizes": { "h1": 24, "h2": 20, "h3": 16, "body": 14, "caption": 12 } }, // Osnovne UI komponente "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": "kontura" }, "table": { "rowHeight": 56, "divider": "suptilan", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Sustav ikona "icons": { "style": "kontura", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
