Dark AI-codeerdashboard gebruikersinterface

{ "type": "Donkere SaaS Analytics Dashboard UI", "product": { "brand": "{argument name=\"merknaam\" default=\"AICode\"}", "theme": "De interface heeft een diep donkerblauwe textuur van mat glas met subtiele verlopen, zachte verlichting, afgeronde kaarten en dunne randen, en belichaamt de esthetiek van moderne ontwikkelaarstools." }, "canvas": { "aspect_ratio": "16:9", "background": "Diep middernachtblauw, met subtiele vignettering en zachte radiale lichteffecten." } }, "layout": { "structure": "Linkerzijbalk plus hoofdinhoudsgebied", "sections": [ { "title": "Zijbalk", "position": "Linkerzijde", "count": 8, "labels": [ "AICode", "Overzicht", "project", "AI-assistenten", "API en gebruik", "Codekwaliteit", "team", "setup" ], "details": "Het logo wordt bovenaan weergegeven en 'Overzicht' is paars gemarkeerd wanneer geselecteerd. De abonnementskaart onderaan toont het Pro-abonnement, dat over 12 dagen verloopt. Een horizontale voortgangsbalk toont 75%. Het gebruikersprofiel onderaan bevat een avatar {argument name=\"gebruikersnaam\" default=\"Alex Morgan\"} en e-mailadres [email protected]" }, { "title": "Header", "position": "Hoofdinhoudsgebied", "count": 4, "labels": [ "Welkom terug, Alex 👋", "Dit is de update van vandaag van uw AI-programmeerplatform.", "12 mei 2024 – 12 juni 2024", "Rapport exporteren" ], "details": "Aan de linkerkant staat een grote begroeting, terwijl aan de rechterkant een datumselectie en een exportknop worden weergegeven." }, { "title": "Indicatorkaart", "position": "Eerste regel onder de koptekst", "count": 4, "labels": [ "Totaal aantal gebruikers", "Actieve projecten", "API-aanroepvolume", "Codekwaliteitsbeoordeling" ], "values": [ "12.842", "2.153", "1,28M", "876" ], "details": "Elke kaart bevat een klein pictogram, een grote hoofdwaarde en tekst die de periode van 12 april tot 12 mei 2024 vergelijkt, met positieve groeipercentages van respectievelijk 14,6%, 8,3%, 23,7% en 5,9%. Onderaan wordt een mini-lijngrafiek weergegeven; de kleuren zijn paars, groen, oranje en blauw." }, { "title": "Hoofdanalysepaneel", "position": "Midden- en onderste rijen", "count": 4, "labels": [ "API-aanroeptrends", "Populaire projecten", "Heatmap gebruikersactiviteit", "Trends in codekwaliteit" ], "details": "De grafiek 'API-aanroeptrends' is een breedvlakgrafiek met een dropdownmenu 'Dagelijks'; de paarse lijn toont een stijgende trend, die eindigt rond de 250.000. 'Populaire items' is een ranglijst van 5 items, met voortgangsbalken en procentuele veranderingen. De 'Heatmap gebruikersactiviteit' is een wekelijkse heatmap met 7 rijen en uurlijkse labels van 12.00 tot 21.00 uur. De grafiek 'Trends in codekwaliteit' is een lijngrafiek met een dropdownmenu 'Wekelijks'; de paarse curve stijgt geleidelijk, van ongeveer 70 tot iets meer dan 90." }, { "title": "Lijst met populaire projecten", "position": "Midden-rechts paneel", "count": 5, "labels": [ "AI Code Assistant", "Smart Refactor", "Code Review Bot", "Doc Generator", "Test Builder" ], "values": [ "485K", "321K", "214K", "132K", "98K" ], "details": "De eerste vier items lieten een positieve groei zien in groen, respectievelijk 12,4%, 8,7%, 3,1% en 6,8%, terwijl Test Builder een negatieve groei liet zien in rood, -1,2%; elke rij had een gekleurd vierkant pictogram en een dunne horizontale voortgangsbalk." } ] }, "style": { "visual_language": "Prototype voor het ontwerp van een hoogwaardig financieel technologie- en AI-product", "rendering": "Een helder, hoogwaardig UI-prototype, subtiele schaduwen, neon-randverlichtingseffecten, prachtige grafieken en een strak schreefloos lettertype.", "primary_accent": "{argument name=\"accent color\" default=\"Electric Violet\"}", "secondary_accents": [ "Emerald Green", "Amber Yellow", "Cyan" ], "density": "Informatierijk en ruimtelijk gebalanceerd, met een goed uitgebalanceerd raster en hoge leesbaarheid." } }