Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Good UI — Sample</title> | |
| <style> | |
| body { | |
| font-size: 16px; | |
| font-family: Inter, sans-serif; | |
| line-height: 1.6; | |
| color: #111111; | |
| background-color: #ffffff; | |
| margin: 0; | |
| padding: 32px; | |
| } | |
| code, pre { font-family: "JetBrains Mono", monospace; } | |
| h1 { font-size: 32px; margin: 0 0 8px; font-weight: 700; } | |
| h2 { font-size: 24px; margin: 0 0 16px; font-weight: 600; } | |
| h3 { font-size: 18px; margin: 0 0 16px; font-weight: 600; } | |
| /* One primary style, one ghost — both share the same geometry */ | |
| .btn-primary { | |
| background-color: #005fcc; | |
| color: #ffffff; | |
| padding: 8px 16px; | |
| border-radius: 6px; | |
| height: 44px; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| .btn-ghost { | |
| background-color: #ffffff; | |
| color: #005fcc; | |
| padding: 8px 16px; | |
| border-radius: 6px; | |
| height: 44px; | |
| border: 1px solid #005fcc; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| button:focus-visible, | |
| input:focus-visible, | |
| select:focus-visible, | |
| textarea:focus-visible { | |
| outline: 2px solid #005fcc; | |
| outline-offset: 2px; | |
| } | |
| .card { | |
| padding: 24px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| margin: 16px 0; | |
| } | |
| .kpi-card { | |
| padding: 24px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| margin: 16px; | |
| display: inline-block; | |
| min-width: 160px; | |
| } | |
| label { display: block; margin-bottom: 8px; font-weight: 500; } | |
| input, select, textarea { | |
| padding: 8px 16px; | |
| border: 1px solid #d1d5db; | |
| border-radius: 6px; | |
| font-size: 16px; | |
| width: 100%; | |
| } | |
| table { border-collapse: collapse; width: 100%; } | |
| th, td { padding: 8px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; } | |
| th { font-weight: 600; background-color: #f9fafb; } | |
| tr:nth-child(even) { background-color: #f9fafb; } | |
| section { margin: 32px 0; } | |
| .chart { width: 100%; height: 200px; border-radius: 8px; background: #f9fafb; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Analytics Dashboard</h1> | |
| <h2>Revenue Overview</h2> | |
| <!-- 4 KPI cards — within the 8-card guideline --> | |
| <div class="kpi-card"><div>Total Revenue</div><div>$48,200</div></div> | |
| <div class="kpi-card"><div>Active Users</div><div>2,891</div></div> | |
| <div class="kpi-card"><div>Conversion</div><div>4.2%</div></div> | |
| <div class="kpi-card"><div>NPS Score</div><div>72</div></div> | |
| <!-- Consistent buttons --> | |
| <section> | |
| <button class="btn-primary">Save Changes</button> | |
| <button class="btn-ghost">Discard</button> | |
| </section> | |
| <!-- Form with labels on every input --> | |
| <section> | |
| <h3>Account Settings</h3> | |
| <div> | |
| <label for="email">Email address</label> | |
| <input type="email" id="email" placeholder="you@example.com"> | |
| </div> | |
| <div> | |
| <label for="name">Full name</label> | |
| <input type="text" id="name" placeholder="Jane Smith"> | |
| </div> | |
| <div> | |
| <label for="role">Role</label> | |
| <select id="role"> | |
| <option>Admin</option> | |
| <option>Member</option> | |
| </select> | |
| </div> | |
| </section> | |
| <!-- Table with header and zebra striping --> | |
| <section> | |
| <h3>Recent Transactions</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th scope="col">Customer</th> | |
| <th scope="col">Amount</th> | |
| <th scope="col">Status</th> | |
| <th scope="col">Date</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr><td>Alice Johnson</td><td>$1,200</td><td>Completed</td><td>Jun 24</td></tr> | |
| <tr><td>Bob Chen</td> <td>$800</td> <td>Pending</td> <td>Jun 23</td></tr> | |
| <tr><td>Charlie Davis</td><td>$2,100</td><td>Completed</td><td>Jun 22</td></tr> | |
| </tbody> | |
| </table> | |
| </section> | |
| <!-- Summary card --> | |
| <div class="card"> | |
| <h3>Summary</h3> | |
| <p>All metrics are trending positively this quarter. Conversion improved by 0.8 pp.</p> | |
| </div> | |
| <!-- Chart with axis labels and perceptually distinct colours --> | |
| <section> | |
| <h3>Revenue by Month</h3> | |
| <div class="chart" | |
| data-xlabel="Month" | |
| data-ylabel="Revenue ($)"> | |
| <div style="background-color:#005fcc; display:inline-block; width:30%; height:100px;"></div> | |
| <div style="background-color:#e65c00; display:inline-block; width:40%; height:80px;"></div> | |
| <div style="background-color:#2e7d32; display:inline-block; width:30%; height:90px;"></div> | |
| </div> | |
| </section> | |
| </body> | |
| </html> | |