Ön egy tapasztalt UI tervező, aki a modern, minimalista dizájt, árnyékokat, üvegeffektusokat és lágy színeket alkalmazza. Feladata egy professzionális, szép makett létrehozása, amely szállításra kész, e követelmények alapján: <requirements> ## 1. Általános stílus és vizuális nyelv Ez a felület egy prémium, modern fintech / kripto kereskedési irányítópultot képvisel, sötét témával. A vizuális nyelv a **puha neumorfizmust** és a **luxus Web3 esztétikát** ötvözi. Alapjellemzők: - Meleg arany/narancs kiemelések - Monokróm színpaletta minimalista effektusokkal és árnyékokkal - Kártyaalapú elrendezés mélységgel és finom hátterekkel - Minimális kerékek, elválasztás árnyékokkal vagy világos hátterekkel Cél érzet: - Biztonságos - Professzionális - High-end / intézményi szintű - Tapasztalt kereskedők számára optimalizált --- ## 2. Elrendezési szerkezet ### Globális elrendezés - Asztali első irányítópult - Kimeneti arány: 3:2 - Három fő régió: 1. Felső navigációs sáv (vízszintes) 2. Bal oldalsáv navigáció (függőleges) 3. Fő tartalomterület (többoszlopos kártyarács) A térköz bőkezű, az átláthatóságot és a vizuális lélegzetteret helyezi előtérbe. --- ## 3. Felső navigációs sáv - Magasság: 72px - Bal oldal: - Márka logó szöveg "Mevolut" - Stilizált "M" - Arany/narancs kiemelés - Középen: - Navigációs linkek: Irányítópult, Biztonság, Ajánlás, Kereskedési díjak, API kezelés - Jobb oldal: - Rendelés link - Elsődleges cselekvésre ösztönző gomb: „Befizetés” (arany pirula gomb) - Felhasználói avatar (kör alakú) - Téma váltó (hold ikon) Betűkészlet: - Tiszta sans-serif - Közepes vastagság - Fehér elsődleges szöveg, tompa szürke inaktív állapotok --- ## 4. Bal oldalsáv navigáció - Szélesség: 240px - Háttér: majdnem fekete - Függőleges navigációs elemek ikonokkal: - Irányítópult (aktív) - Biztonság - Ajánlás - Kereskedési díjak - API kezelés - Alsó igazítás: - Beállítások Aktív elem: - Finom háttér kiemelés - Enyhe háttér árnyalat - Lekerekített konténer Ikonok: - Kontúr stílus - Arany kiemelés aktív állapotban --- ## 5. Fő tartalomterület ### 5.1 Felhasználói áttekintés kártya - Nagy lekerekített kártya felül - Bal oldal: - Kör alakú avatar - Üdvözlő szöveg (“Hello…”) - Felhasználónév - Soron belüli infó blokkok: - UID (másolás ikon) - Személyazonosítás ellenőrzési állapot - Biztonsági szint - Időzóna - Utolsó bejelentkezés időbélyeg - Jobb oldal: - „Információ elrejtése” kapcsoló Stílus: - Finom belső árnyékok --- ### 5.2 Befizetés / Vásárlás kártya - Közepes méretű kártya - Címszöveg, amely elmagyarázza a befizetési lehetőségeket - Két cselekvés sor: - Befizetés (dollár vagy kripto) - Részvények vásárlása (helyi pénznem) - Minden sor: - Ikon - Címke - Nyíl cselekvés gomb (arany kiemelés) --- ### 5.3 Teljes eszköz kártya - Megjeleníti az USD egyenleget és az USD egyenértéket - Nagy, halvány dollárjel vízjel a háttérben - Cselekvés lapok: - Részvények vásárlása - Befizetés - Kifizetés - Numerikus értékek nagyok --- ### 5.4 VIP szint kártya - Megjeleníti az aktuális VIP szintet - Spot és határidős díjak - Haladásjelző a token tartományhoz - „Több megtekintése” link Haladásjelző: - Lekerekített - Sötét háttér sáv --- ### 5.5 Jelenlegi tartománytáblázat - Kártya táblázat elrendezéssel - Oszlopok: - Érme (ikon + név) - Ár - 24 órás változás - 4 órás trend (sparkvonal) - Műveletek (Befizetés, Kifizetés, Kereskedés) Sparkvonalak: - Zöld a pozitív trendhez - Piros a negatív trendhez Rámutatás: - Finom háttér kiemelés soronként --- ### 5.6 Partnerprogram kártya - Promóciós kártya - Arany érmes illusztráció - Rövid leírás és cselekvésre ösztönző gomb („Jelentkezz most”) --- ### 5.7 Információs / Hírek kártya - Függőleges bejelentések listája - Címsor + időbélyeg - „Több megtekintése” link felül --- ## 6. Színpaletta - Elsődleges háttér: mély szénszín / fekete - Kártyafelületek: enyhén világosabb - Kiemelő szín: meleg arany - Szöveghierarchia: - Fehér (elsődleges) - Tompa szürke (másodlagos) - Sötét szürke (letiltott) - Állapot színek: - Zöld a pozitívhoz - Piros a negatívhoz --- ## 7. Effektusok és interakció - Lekerekített sarkok mindenütt (kicsi) # Design tokens: { // Globális téma definíció "theme": { "mode": "sötét", "style": [ "puha-neumorfizmus", "prémium-fintech" ] }, // Elrendezési méretek és szerkezet "layout": { "type": "asztali-irányítópult", "grid": "háromoszlopos", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Színrendszer "colors": { "background": "#0B0D10", // Fő alkalmazás háttér "primaryAccent": "#F5A623", // Arany/narancs kiemelés "secondaryAccent": "#FFB547", // Másodlagos arany "textPrimary": "#FFFFFF", // Fehér elsődleges szöveg "textSecondary": "#B0B3B8", // Tompa szürke másodlagos szöveg "textMuted": "#6B6F76", // Tompa szürke letiltott szöveg "success": "#22C55E", // Zöld pozitív "danger": "#EF4444" // Piros negatív }, // Betűkészlet méretezés "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 } }, // Alap UI összetevők "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "nincs", "background": "#14171C", // Kártya háttér }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "átlátszó", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", // Oldalsáv háttér "itemRadius": 12, "iconStyle": "kontúr" }, "table": { "rowHeight": 56, "divider": "finom", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Ikon rendszer "icons": { "style": "kontúr", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
