Είστε ένας έμπειρος σχεδιαστής διεπαφών χρήστη (UI) που υιοθετεί σύγχρονο, ελάχιστο σχεδιασμό, σκιές, γυαλιά και απαλά χρώματα. Ο ρόλος σας είναι να δημιουργήσετε μια επαγγελματική, όμορφη προσομοίωση έτοιμη για παράδοση με βάση αυτά τα απαιτήματα: <requirements> ## 1. Συνολικό Στυλ & Οπτική Γλώσσα Αυτή η διεπαφή αντιπροσωπεύει ένα προηγμένο, σύγχρονο πίνακα ελέγχου συναλλαγών fintech / κρυπτονομισμάτων με σκοτεινό θέμα. Η οπτική γλώσσα συνδυάζει **μαλακό νευμορφισμό** και **πολυτελή αισθητικά Web3**. Βασικά χαρακτηριστικά: - Επισημάνσεις ζεστών χρυσών / πορτοκαλί αποχρώσεων - Μονόχρωμη παλέτα χρωμάτων με ελάχιστα εφέ και σκιές - Σχεδιασμός με βάση τις κάρτες με βάθος και διακριτικά φόντα - Ελάχιστα περιγράμματα, διαχωρισμός μέσω σκιών ή απαλών φόντων Στόχος αντίληψης: - Ασφαλής - Επαγγελματικός - Υψηλής ποιότητας / ιδρυματικού επιπέδου - Βελτιστοποιημένο για έμπειρους συναλλαγείς --- ## 2. Δομή Διάταξης ### Γενική Διάταξη - Πίνακας ελέγχου με προτεραιότητα για επιτραπέζιους υπολογιστές - Αναλογίες εξόδου: 3:2 - Τρεις κύριες περιοχές: 1. Γραμμή πλοήγησης στην κορυφή (οριζόντια) 2. Πλοήγηση αριστερής πλευρικής γραμμής (κάθετη) 3. Κύρια περιοχή περιεχομένου (πλέγμα πολλαπλών στηλών από κάρτες) Ο διαχωρισμός είναι άφθονος, δίνοντας προτεραιότητα στη σαφήνεια και τον οπτικό χώρο ανάπαυσης. --- ## 3. Γραμμή Πλοήγησης στην Κορυφή - Ύψος: 72px - Αριστερά: - Κείμενο λογότυπου επωνυμίας "Mevolut" - Στυλιζαρισμένο "M" - Χρυσή / πορτοκαλί αποχρώση - Κέντρο: - Σύνδεσμοι πλοήγησης: Πίνακας Ελέγχου, Ασφάλεια, Παραπομπή, Χρεώσεις Συναλλαγών, Διαχείριση API - Δεξιά: - Σύνδεσμος παραγγελίας - Κύριο CTA: «Κατάθεση» (χρυσό κουμπί σε σχήμα χάπης) - Εικονίδιο χρήστη (στρογγυλό) - Εναλλαγή θέματος (εικονίδιο σελήνης) Τυπογραφία: - Καθαρή γραμματοσειρά χωρί αμφιπλεύρους - Μεσαίο πάχος - Λευκό κύριο κείμενο, απαλά γκρι ανενεργές καταστάσεις --- ## 4. Πλοήγηση Αριστερής Πλευρικής Γραμμής - Πλάτος: 240px - Φόντο: σχεδόν μαύρο - Κάθετα στοιχεία πλοήγησης με εικονίδια: - Πίνακας Ελέγχου (ενεργό) - Ασφάλεια - Παραπομπή - Χρεώσεις Συναλλαγών - Διαχείριση API - Στοιχισμένα στο κάτω μέρος: - Ρυθμίσεις Ενεργό στοιχείο: - Διακριτική επισήμανση φόντου - Ελαφρά απόχρωση φόντου - Στρογγυλεμένο κοντέινερ Εικονίδια: - Στυλ περιγράμματος - Χρυσή αποχρώση στην ενεργή κατάσταση --- ## 5. Κύρια Περιοχή Περιεχομένου ### 5.1 Κάρτα Επισκόπησης Χρήστη - Μεγάλη στρογγυλεμένη κάρτα στην κορυφή - Αριστερά: - Στρογγυλό εικονίδιο χρήστη - Κείμενο χαιρετισμού («Γεια σας…») - Όνομα χρήστη - Ενσωματωμένα πλαίσια πληροφοριών: - UID (εικονίδιο αντιγραφής) - Κατάσταση επαλήθευσης ταυτότητας - Επίπεδο ασφάλειας - Ζώνη ώρας - Χρονική σήμανση τελευταίας σύνδεσης - Δεξιά: - Εναλλαγή «Απόκρυψη πληροφοριών» Στυλ: - Διακριτές εσωτερικές σκιές --- ### 5.2 Κάρτα Κατάθεσης / Αγοράς - Μεσαίου μεγέθους κάρτα - Κείμενο τίτλου που εξηγεί τις επιλογές κατάθεσης - Δύο σειρές ενεργειών: - Κατάθεση (δολάρια ή κρυπτονομίσματα) - Αγορά μετοχών (τοπικό νόμισμα) - Κάθε σειρά: - Εικονίδιο - Ετικέτα - Κουμπί ενέργειας με βέλος (χρυσή αποχρώση) --- ### 5.3 Κάρτα Συνολικών Περιουσιακών Στοιχείων - Εμφανίζει υπόλοιπο USD και ισοδύναμο USD - Μεγάλο, αχνού χρώματος σύμβολο δολαρίου ως υδατογράφημα στο φόντο - Καρτέλες ενεργειών: - Αγορά μετοχών - Κατάθεση - Ανάληψη - Οι αριθμητικές τιμές είναι μεγάλες --- ### 5.4 Κάρτα Επιπέδου VIP - Εμφανίζει το τρέχον επίπεδο VIP - Τιμές χρεώσεων για άμεσες και μελλοντικές συναλλαγές - Γραμμή προόδου για κρατήσεις tokens - Σύνδεσμος «Προβολή περισσότερων» Γραμμή προόδου: - Στρογγυλεμένη - Κομμάτι σκοτεινού φόντου --- ### 5.5 Πίνακας Τρέχουσων Κρατήσεων - Κάρτα που περιέχει διάταξη πίνακα - Στήλες: - Νόμισμα (εικονίδιο + όνομα) - Τιμή - Αλλαγή 24ώρου - Τάση 4ώρου (sparkline) - Ενέργειες (Κατάθεση, Ανάληψη, Συναλλαγή) Sparklines: - Πράσινο για θετική τάση - Κόκκινο για αρνητική τάση Κατά το αιώρημα: - Διακριτική επισήμανση φόντου ανά σειρά --- ### 5.6 Κάρτα Προγράμματος Συνεργατών - Προωθητική κάρτα - Εικονογράφηση χρυσού νομίσματος - Σύντομη περιγραφή και κουμπί CTA («Αίτηση τώρα») --- ### 5.7 Κάρτα Πληροφοριών / Ειδήσεων - Κάθετη λίστα ανακοινώσεων - Επικεφαλίδα + χρονική σήμανση - Σύνδεσμος «Προβολή περισσότερων» στην κορυφή --- ## 6. Παλέτα Χρωμάτων - Κύριο φόντο: βαθύς άνθρακας / μαύρο - Επιφάνειες καρτών: ελαφρώς πιο ανοιχτές - Χρώμα έμφασης: ζεστή χρυσή - Ιεραρχία κειμένου: - Λευκό (κύριο) - Απαλό γκρι (δευτερεύον) - Σκούρο γκρι (απενεργοποιημένο) - Χρώματα κατάστασης: - Πράσινο για θετική - Κόκκινο για αρνητική --- ## 7. Εφέ & Αλληλεπίδραση - Στρογγυλεμένες γωνίες παντού (μικρές) # Διακριτικά σχεδιασμού: { // Καθορισμός γενικού θέματος "theme": { "mode": "σκοτεινό", "style": [ "μαλακό-νευμορφισμός", "προηγμένο-fintech" ] }, // Μετρήσεις και δομή διάταξης "layout": { "type": "πίνακας-ελέγχου-επιτραπέζιου", "grid": "τριπλή-στήλη", "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 } }, // Βασικά στοιχεία διεπαφής χρήστη "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": "περίγραμμα" }, "table": { "rowHeight": 56, "divider": "διακριτικός", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Σύστημα εικονιδίων "icons": { "style": "περίγραμμα", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>