प्रीमियम फिनटेक क्रिप्टो ट्रेडिंग डैशबोर्ड यूआई मॉकअप

आप एक अनुभवी UI डिज़ाइनर हैं जो आधुनिक, न्यूनतम डिज़ाइन, छाया, ग्लास और नरम रंगों को अपनाते हैं। आपकी भूमिका इन आवश्यकताओं के आधार पर एक पेशेवर, सुंदर मॉकअप बनाना है जो डिलीवरी के लिए तैयार हो: <requirements> ## 1. समग्र शैली और दृश्य भाषा यह इंटरफ़ेस एक प्रीमियम, आधुनिक फिनटेक / क्रिप्टो ट्रेडिंग डैशबोर्ड का प्रतिनिधित्व करता है जो डार्क थीम का उपयोग करता है। दृश्य भाषा **सॉफ्ट न्यूमॉर्फिज्म** और **लक्ज़री Web3 सौंदर्यशास्त्र** को जोड़ती है। मुख्य विशेषताएं: - गर्म सुनहरा/नारंगी एक्सेंट हाइलाइट - न्यूनतम प्रभावों और छायाओं के साथ मोनोक्रोमैटिक रंग पैलेट - गहराई और सूक्ष्म पृष्ठभूमि के साथ कार्ड-आधारित लेआउट - न्यूनतम बॉर्डर, छाया या हल्की पृष्ठभूमि के माध्यम से अलगाव लक्षित धारणा: - सुरक्षित - पेशेवर - उच्च-स्तरीय / संस्थागत-ग्रेड - अनुभवी ट्रेडर्स के लिए अनुकूलित --- ## 2. लेआउट संरचना ### वैश्विक लेआउट - डेस्कटॉप-फर्स्ट डैशबोर्ड - आउटपुट अनुपात: 3:2 - तीन मुख्य क्षेत्र: 1. शीर्ष नेविगेशन बार (क्षैतिज) 2. बायां साइडबार नेविगेशन (ऊर्ध्वाधर) 3. मुख्य सामग्री क्षेत्र (कार्ड का मल्टी-कॉलम ग्रिड) स्पेसिंग उदार है, स्पष्टता और दृश्य श्वास स्थान को प्राथमिकता देती है। --- ## 3. शीर्ष नेविगेशन बार - ऊंचाई: 72px - बाएं: - ब्रांड लोगो टेक्स्ट "Mevolut" - स्टाइलिश "M" - गोल्ड/नारंगी एक्सेंट - केंद्र: - नेविगेशन लिंक: Dashboard, Security, Referral, Trading Fees, API management - दाएं: - Order लिंक - प्राथमिक CTA: "Deposit" (गोल्ड पिल बटन) - उपयोगकर्ता अवतार (गोलाकार) - थीम टॉगल (मून आइकन) टाइपोग्राफी: - स्वच्छ सैन्स-सेरिफ़ - मध्यम वजन - सफेद प्राथमिक टेक्स्ट, म्यूट ग्रे निष्क्रिय अवस्थाएं --- ## 4. बायां साइडबार नेविगेशन - चौड़ाई: 240px - पृष्ठभूमि: नियर-ब्लैक - आइकन के साथ ऊर्ध्वाधर नेविगेशन आइटम: - Dashboard (सक्रिय) - Security - Referral - Trading Fees - API management - नीचे संरेखित: - Settings सक्रिय आइटम: - सूक्ष्म पृष्ठभूमि हाइलाइट - हल्का बैकग्राउंड टिंट - गोल कंटेनर आइकन: - आउटलाइन शैली - सक्रिय अवस्था पर गोल्ड एक्सेंट --- ## 5. मुख्य सामग्री क्षेत्र ### 5.1 उपयोगकर्ता अवलोकन कार्ड - शीर्ष पर बड़ा गोल कार्ड - बाएं: - गोलाकार अवतार - अभिवादन टेक्स्ट ("Hello…") - उपयोगकर्ता नाम - इनलाइन जानकारी ब्लॉक: - UID (कॉपी आइकन) - पहचान सत्यापन स्थिति - सुरक्षा स्तर - समय क्षेत्र - अंतिम लॉगिन टाइमस्टैम्प - दाएं: - "Hide info" टॉगल शैली: - सूक्ष्म आंतरिक छायाएं --- ### 5.2 डिपॉजिट / खरीद कार्ड - मध्यम आकार का कार्ड - डिपॉजिट विकल्पों की व्याख्या करने वाला शीर्षक टेक्स्ट - दो एक्शन पंक्तियां: - Deposit (डॉलर या क्रिप्टो) - Buy stocks (स्थानीय मुद्रा) - प्रत्येक पंक्ति: - आइकन - लेबल - एरो एक्शन बटन (गोल्ड एक्सेंट) --- ### 5.3 कुल संपत्ति कार्ड - USD बैलेंस और USD समकक्ष प्रदर्शित करता है - पृष्ठभूमि में बड़ा, फीका डॉलर प्रतीक वॉटरमार्क - एक्शन टैब: - Buy stocks - Deposit - Withdraw - संख्यात्मक मान बड़े हैं --- ### 5.4 VIP स्तर कार्ड - वर्तमान VIP स्तर दिखाता है - Spot और futures शुल्क दरें - टोकन होल्डिंग्स के लिए प्रगति बार - "View more" लिंक प्रगति बार: - गोल - डार्क बैकग्राउंड ट्रैक --- ### 5.5 वर्तमान होल्डिंग्स तालिका - तालिका लेआउट वाला कार्ड - कॉलम: - Coin (आइकन + नाम) - Price - 24h Change - 4h Trend (स्पार्कलाइन) - Actions (Deposit, Withdraw, Trade) स्पार्कलाइन: - सकारात्मक रुझान के लिए हरा - नकारात्मक रुझान के लिए लाल होवर: - प्रति पंक्ति सूक्ष्म पृष्ठभूमि हाइलाइट --- ### 5.6 सहबद्ध कार्यक्रम कार्ड - प्रचारात्मक कार्ड - गोल्ड कॉइन चित्रण - संक्षिप्त विवरण और CTA बटन ("Apply now") --- ### 5.7 सूचना / समाचार कार्ड - घोषणाओं की ऊर्ध्वाधर सूची - हेडलाइन + टाइमस्टैम्प - शीर्ष पर "View more" लिंक --- ## 6. रंग पैलेट - प्राथमिक पृष्ठभूमि: गहरा चारकोल / काला - कार्ड सतहें: थोड़ी हल्की - एक्सेंट रंग: गर्म सुनहरा - टेक्स्ट पदानुक्रम: - सफेद (प्राथमिक) - म्यूट ग्रे (द्वितीयक) - डार्क ग्रे (अक्षम) - स्थिति रंग: - सकारात्मक के लिए हरा - नकारात्मक के लिए लाल --- ## 7. प्रभाव और इंटरैक्शन - हर जगह गोल कोने (sm) # डिज़ाइन टोकन: { // वैश्विक थीम परिभाषा "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // लेआउट माप और संरचना "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // रंग प्रणाली "colors": { "background": "#0B0D10", // मुख्य ऐप पृष्ठभूमि "primaryAccent": "#F5A623", // गोल्ड/नारंगी हाइलाइट "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // टाइपोग्राफी स्केल "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 } }, // मुख्य 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": "outline" }, "table": { "rowHeight": 56, "divider": "subtle", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // आइकन प्रणाली "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>