Sa oled kogenud UI disner, kes omab kaasaegset, minimalistlikku disni, varje, klaasi ja pehmeid värve. Sinu ülesanne on luua professionaalne, ilus makett, mis on valmis edastamiseks nende nõuete põhjal: <requirements> ## 1. Üldine stiil ja visuaalne keel See liides esindab premium, kaasaegset fintechi / krüptovaluuta kaubandusjuhtimise paneeli, mis kasutab tume teemat. Visuaalne keel ühendab **pehme neumorfismi** ja **luksusliku Web3 esteetika**. Põhiomadused: - Sooje kuldse/oranži aktsendi esiletõstmised - Ühevärviline värvipalett minimalistlike efektide ja varjunditega - Kaartidel põhinev pgutus sügavuse ja peente taustadega - Minimaalsed ääred, eraldamine varjude või heledate taustade abil Siht tajumine: - Turvaline - Professionaalne - Kõrge taseme / institutsionaalse kvaliteediga - Optimeeritud kogenud kaupmeestele --- ## 2. Pgutuse struktuur ### Üldine pgutus - Esmalt töölauale suunatud juhtimispaneel - Väljundi proportsioonid: 3:2 - Kolm põhilist regiooni: 1. Ülemine navigeerimisriba (horisontaalne) 2. Vasak külgriba navigeerimine (vertikaalne) 3. Põhiline sisuvaldkond (mitmeveeruline kaartide võrk) Vahe on suur, eelistades selgust ja visuaalset hingamise ruumi. --- ## 3. Ülemine navigeerimisriba - Kõrgus: 72px - Vasak: - Brändi logo tekst "Mevolut" - Stiliseeritud "M" - Kuldne/oranži aktsent - Keskel: - Navigeerimislingid: Juhtimispaneel, Turvalisus, Soovitus, Kaubandustasud, API haldus - Paremal: - Tellimuse link - Peamine CTA: „Deposiit“ (kuldne pill nupp) - Kasutaja avatar (ringikujuline) - Teema lüliti (kuu ikoon) Tüpograafia: - Puhas sans-serif - Keskmine paksus - Valge peamine tekst, vgistatud hall inaktiivsed olekud --- ## 4. Vasak külgriba navigeerimine - Lus: 240px - Taust: peaaegu must - Vertikaalsed navigeerimiselemendid ikoonidega: - Juhtimispaneel (aktiivne) - Turvalisus - Soovitus - Kaubandustasud - API haldus - Alla joondatud: - Seaded Aktiivne element: - Peene tausta esiletõstmine - Kergelt värvitud taust - Ümardatud konteiner Ikoonid: - Kontuurstiil - Kuldne aktsent aktiivsel olekul --- ## 5. Põhiline sisuvaldkond ### 5.1 Kasutaja ülevaate kaart - Suur ümardatud kaart üleval - Vasak: - Ringikujuline avatar - Tervitustekst („Tere…“) - Kasutaja nimi - Siseseadistatud infoblokid: - UID (kopeerimise ikoon) - Isikutuvastuse olek - Turvatase - Ajavöönd - Viimase sisselogimise ajatempel - Paremal: - „Peida info“ lüliti Stiil: - Peened sisemised varjud --- ### 5.2 Deposiidi / ostmise kaart - Keskmise suurusega kaart - Pealkirjatekst, mis selgitab deposiidi valikuid - Kaks tegevusrida: - Deposiit (dollarid või krüptovaluuta) - Aktsiate ostmine (kohalik valuuta) - Iga rida: - Ikoon - Silt - Noole tegevusnupp (kuldne aktsent) --- ### 5.3 Kogu vara kaart - Kuvab USD saldot ja USD ekvivalendi - Suur, hägustatud dollari sümboli vesimärk taustal - Tegevuse vahekaardid: - Aktsiate ostmine - Deposiit - Väljavõte - Numbrilised väärtused on suured --- ### 5.4 VIP taseme kaart - Näitab praegust VIP taset - Spot ja futuuride tasu määrad - Tokenite omamise edenemise riba - „Vaata rohkem“ link Edenemise riba: - Ümardatud - Tume tausta rada --- ### 5.5 Praeguste omaduste tabel - Kaart, mis sisaldab tabeli pgutust - Veerud: - Münt (ikoon + nimi) - Hind - 24h muutus - 4h trend (sädemegraafik) - Tegevused (Deposiit, Väljavõte, Kaubandus) Sädemegraafikud: - Roheline positiivsele trendile - Punane negatiivsele trendile Hiirega hõljumine: - Peene tausta esiletõstmine iga rea kohta --- ### 5.6 Partnerprogrammi kaart - Reklaamkaart - Kuldse münti illustratsioon - Lühikirjeldus ja CTA nupp („Registreeru kohe“) --- ### 5.7 Teabe / uudiste kaart - Vertikaalne teadaannete nimekiri - Pealkiri + ajatempel - „Vaata rohkem“ link üleval --- ## 6. Värvipalett - Põhitaust: sügav söekri / must - Kaartide pinnad: veidi heledamad - Aktsendi värv: soe kuld - Teksti hierarhia: - Valge (põhiline) - Vgistatud hall (sekundaarne) - Tume hall (keelatud) - Oleku värvid: - Roheline positiivsele - Punane negatiivsele --- ## 7. Efektid ja interaktsioon - Ümardatud nurgad kogu disnis (sm) # Design tokens: { // Global theme definition "theme": { "mode": "tume", "style": [ "pehne neumorfism", "premium fintech" ] }, // Layout measurements and structure "layout": { "type": "töölaua-juhtimispaneel", "grid": "kolmeveeruline", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Color system "colors": { "background": "#0B0D10", // Mn app background "primaryAccent": "#F5A623", // Gold/orange highlight "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typography scale "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 } }, // Core UI components "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": "kontuur" }, "table": { "rowHeight": 56, "divider": "peene", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Icon system "icons": { "style": "kontuur", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
