592 lines
26 KiB
PHP
592 lines
26 KiB
PHP
<?php include(BASE . '/rss/php/views/components/frame.php');?>
|
||
<div class="p-2">
|
||
<div class="page">
|
||
|
||
<section class="card hero-pro mb-4">
|
||
<div class="hero-grid">
|
||
<div>
|
||
<div class="kicker">
|
||
<span class="pill">MDI 2026-ish</span>
|
||
<span class="small text-muted">tokens · utilities · components</span>
|
||
</div>
|
||
|
||
<h1 class="h3 mt-3 mb-0">Dashboard overview</h1>
|
||
<p class="body text-muted mt-2 mb-0">
|
||
This page stress-tests: grid, spacing, sizing, typography, tables, buttons, forms,
|
||
badges, scrollbar, cards, accordion, switch, drawer, modal, and theme tokens.
|
||
</p>
|
||
|
||
<div class="chip-row mt-3">
|
||
<div class="chip is-active" data-chip>Last 7 days</div>
|
||
<div class="chip" data-chip>Last 30 days</div>
|
||
<div class="chip" data-chip>This year</div>
|
||
<div class="chip" data-chip>Custom</div>
|
||
</div>
|
||
|
||
<div class="d-flex align-center gap-2 mt-3">
|
||
<span class="badge badge-gray-light">EU region</span>
|
||
<span class="badge badge-teal badge-solid">Online</span>
|
||
<span class="badge badge-red-light text-red-900">Alerts 2</span>
|
||
<span class="small text-muted">Updated Feb 16, 2026</span>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="small text-muted">Inline code token</div>
|
||
<div class="body">
|
||
Try: <code>btn-gray-light btn-sm</code>, <code>col-lg-4</code>, <code>data-toggle</code>, <code>data-theme-toggle</code>.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card-quick">
|
||
<div class="small text-muted">Quick actions</div>
|
||
<div class="d-flex flex-column gap-2 mt-2">
|
||
<button class="btn-teal">Create invoice</button>
|
||
<button class="btn-blue-light" data-toggle="#modalExample">Edit customer</button>
|
||
<button class="btn-gray-light">Log activity</button>
|
||
</div>
|
||
|
||
<hr class="hr">
|
||
|
||
<div class="small text-muted">System</div>
|
||
<div class="d-flex align-center gap-2 mt-2">
|
||
<label class="switch">
|
||
<input type="checkbox" checked />
|
||
<span class="slider"></span>
|
||
</label>
|
||
<span class="body m-0">Realtime sync</span>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="small text-muted">Open modal / drawer</div>
|
||
<div class="d-flex gap-2 mt-2">
|
||
<button class="btn-gray-light btn-sm" data-toggle="#modalExample">Modal</button>
|
||
<button class="btn-gray-light btn-sm" data-toggle="#mobileDrawer">Drawer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-xs-12 col-lg-6">
|
||
<div class="alert-teal">alert-teal — Success style container.</div>
|
||
</div>
|
||
<div class="col-xs-12 col-lg-6">
|
||
<div class="alert-red">alert-red — Danger style container.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-xs-12 col-md-4">
|
||
<div class="card hoverable mb-3 card-quick">
|
||
<div class="stat-title">Total revenue</div>
|
||
<div class="stat-value">€ 142,500</div>
|
||
<div class="stat-sub"><span class="text-teal-600">+12%</span> vs last month</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xs-12 col-md-4">
|
||
<div class="card hoverable mb-3">
|
||
<div class="stat-title">Active users</div>
|
||
<div class="stat-value">1,204</div>
|
||
<div class="stat-sub">
|
||
<span class="badge badge-gray-light">Stable</span>
|
||
<span class="small text-muted"> churn 1.1%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xs-12 col-md-4">
|
||
<div class="card hoverable mb-3 card-quick">
|
||
<div class="stat-title">System status</div>
|
||
<div class="d-flex align-center gap-2 mt-2">
|
||
<span class="badge badge-teal badge-solid">Healthy</span>
|
||
<span class="small text-muted">API 124ms · DB 8ms</span>
|
||
</div>
|
||
<div class="small text-muted mt-2">Last checked: Feb 16, 2026</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-xs-12 col-lg-6">
|
||
<div class="card mb-3">
|
||
<h4 class="h4 m-0">Forms</h4>
|
||
<div class="small text-muted mt-1">input, select, input-group, focus ring</div>
|
||
|
||
<div class="form-group mt-3">
|
||
<label class="label">Email</label>
|
||
<input class="input" type="email" placeholder="name@domain.com" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="label">Status</label>
|
||
<select class="select">
|
||
<option>Active</option>
|
||
<option>Pending</option>
|
||
<option>Paused</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="label">Search (input-group)</label>
|
||
<div class="input-group">
|
||
<input class="input" type="text" placeholder="Search..." />
|
||
<button class="btn-teal">Go</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex gap-2 mt-3">
|
||
<button class="btn-teal">Primary</button>
|
||
<button class="btn-gray-light">Secondary</button>
|
||
<button class="btn-gray-light btn-sm">Small</button>
|
||
<button class="btn-teal btn-lg">Large</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xs-12 col-lg-6">
|
||
<div class="card mb-3 card-quick">
|
||
<h4 class="h4 m-0">Typography & Utilities</h4>
|
||
<div class="small text-muted mt-1">sizes, weights, alignment, spacing helpers</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="h1 m-0">h1</div>
|
||
<div class="h2 m-0">h2</div>
|
||
<div class="h3 m-0">h3</div>
|
||
<div class="h4 m-0">h4</div>
|
||
<div class="h5 m-0">h5</div>
|
||
<div class="h6 m-0">h6</div>
|
||
<div class="body mt-2">body text — <span class="text-muted">muted</span> — <span class="text-light">light</span></div>
|
||
<div class="small text-muted mt-1">small text</div>
|
||
</div>
|
||
|
||
<hr class="hr">
|
||
|
||
<div class="d-flex justify-between align-center">
|
||
<div class="small text-muted">Badges</div>
|
||
<div class="d-flex gap-2">
|
||
<span class="badge badge-teal">badge-teal</span>
|
||
<span class="badge badge-teal badge-solid">solid</span>
|
||
<span class="badge badge-orange-light text-orange-900">warn</span>
|
||
<span class="badge badge-red-light text-red-900">danger</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="small text-muted mb-2">Spacing / size quick grid</div>
|
||
<div class="d-flex gap-2">
|
||
<div class="bg-surface border rounded p-2 w-25 text-center small">w-25</div>
|
||
<div class="bg-surface border rounded p-2 w-33 text-center small">w-33</div>
|
||
<div class="bg-surface border rounded p-2 w-50 text-center small">w-50</div>
|
||
</div>
|
||
<div class="d-flex gap-2 mt-2">
|
||
<div class="bg-surface border rounded p-2 w-66 text-center small">w-66</div>
|
||
<div class="bg-surface border rounded p-2 w-33 text-center small">w-33</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-xs-12 col-lg-8">
|
||
<div class="card table-card mb-3">
|
||
<div class="p-3 border-bottom d-flex justify-between align-center">
|
||
<h5 class="h5 m-0">Recent transactions</h5>
|
||
<div class="d-flex align-center gap-2">
|
||
<button class="btn-blue-light btn-sm" id="tableEditAllBtn">Edit mode</button>
|
||
<button class="btn-gray-light btn-sm">Export</button>
|
||
<button class="btn-gray-light btn-sm">View all</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<div id="transactionsTable"></div>
|
||
</div>
|
||
|
||
<div class="p-3 border-top">
|
||
<div class="small text-muted">Small variant</div>
|
||
<div class="table-wrap mt-2">
|
||
<table class="table table-sm striped hover">
|
||
<thead>
|
||
<tr>
|
||
<th>Key</th>
|
||
<th>Value</th>
|
||
<th>Meta</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Theme</td>
|
||
<td>data-theme</td>
|
||
<td><code>light / dark</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Drawer</td>
|
||
<td>.drawer</td>
|
||
<td><code>is-open</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Modal</td>
|
||
<td>.modal-overlay</td>
|
||
<td><code>is-active</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Table edit</td>
|
||
<td>.table-edit-btn</td>
|
||
<td><code>welcome.js</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xs-12 col-lg-4">
|
||
<div class="card mb-3">
|
||
<h5 class="h5 m-0">Pipeline</h5>
|
||
<div class="small text-muted mt-1">progress bars + buttons</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="d-flex justify-between">
|
||
<span class="small text-muted">Qualified</span>
|
||
<span class="small">18</span>
|
||
</div>
|
||
<div class="progress mt-1">
|
||
<div class="progress-bar progress-72"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="d-flex justify-between">
|
||
<span class="small text-muted">Proposal</span>
|
||
<span class="small">9</span>
|
||
</div>
|
||
<div class="progress mt-1">
|
||
<div class="progress-bar progress-46 soft"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="d-flex justify-between">
|
||
<span class="small text-muted">Negotiation</span>
|
||
<span class="small">4</span>
|
||
</div>
|
||
<div class="progress mt-1">
|
||
<div class="progress-bar progress-25 warn"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex align-center gap-2 mt-4">
|
||
<button class="btn-teal btn-sm">Add deal</button>
|
||
<button class="btn-gray-light btn-sm">View</button>
|
||
<button class="btn-blue-light btn-sm" data-toggle="#modalExample">Edit</button>
|
||
<button class="btn-gray-light btn-sm" data-toggle="#modalExample">Open modal</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card mb-3">
|
||
<h5 class="h5 m-0">Borders / radius / elevation</h5>
|
||
<div class="small text-muted mt-1">border helpers + rounded + elevation</div>
|
||
|
||
<div class="row mt-3 g-0">
|
||
<div class="col-xs-6">
|
||
<div class="bg-surface border rounded p-3 elevation-1">
|
||
<div class="small text-muted">elevation-1</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-6">
|
||
<div class="bg-surface border rounded-lg p-3 elevation-4">
|
||
<div class="small text-muted">elevation-4</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 d-flex gap-2">
|
||
<div class="bg-surface border rounded-sm p-2 small">rounded-sm</div>
|
||
<div class="bg-surface border rounded p-2 small">rounded</div>
|
||
<div class="bg-surface border rounded-lg p-2 small">rounded-lg</div>
|
||
<div class="bg-surface border rounded-pill p-2 small">pill</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-xs-12 col-lg-8">
|
||
<div class="card">
|
||
<h4 class="h4 m-0">Framework FAQ</h4>
|
||
<div class="small text-muted mt-1">accordion + utilities + theme tokens</div>
|
||
|
||
<div class="accordion-item mt-3">
|
||
<button class="accordion-header" data-accordion>
|
||
<span>How does the grid work?</span>
|
||
<span class="accordion-icon">▼</span>
|
||
</button>
|
||
<div class="accordion-body">
|
||
Negative margins + column padding keeps gutters consistent and safe for nesting.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-header" data-accordion>
|
||
<span>Does ESC close modals?</span>
|
||
<span class="accordion-icon">▼</span>
|
||
</button>
|
||
<div class="accordion-body">
|
||
Yes — with your VOR event delegation, ESC closes modal first, then drawer.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-header" data-accordion>
|
||
<span>Theme tokens?</span>
|
||
<span class="accordion-icon">▼</span>
|
||
</button>
|
||
<div class="accordion-body">
|
||
Toggle <code>data-theme</code> on <code><html></code>. CSS vars update automatically.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xs-12 col-lg-4">
|
||
<div class="card">
|
||
<h5 class="h5 m-0">Notes</h5>
|
||
<div class="small text-muted mt-1">quick sanity checks</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="badge badge-teal">badge-teal</div>
|
||
<div class="badge badge-gray-light mt-2">badge-gray-light</div>
|
||
<div class="badge badge-orange-light text-orange-900 mt-2">badge-orange-light + text-orange-900</div>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<button class="btn-gray-light w-100">btn-gray-light</button>
|
||
<button class="btn-gray-light btn-sm w-100 mt-2">btn-gray-light btn-sm</button>
|
||
<button class="btn-teal w-100 mt-2">btn-teal</button>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<div class="small text-muted mb-2">Visibility / overflow</div>
|
||
<div class="bg-surface border rounded p-2 overflow-auto" style="max-height: 90px;">
|
||
<div class="small">overflow-auto box</div>
|
||
<div class="small text-muted">Line 1</div>
|
||
<div class="small text-muted">Line 2</div>
|
||
<div class="small text-muted">Line 3</div>
|
||
<div class="small text-muted">Line 4</div>
|
||
<div class="small text-muted">Line 5</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<div id="modalExample" class="modal-overlay" aria-hidden="true">
|
||
<div class="modal-content" role="dialog" aria-modal="true" aria-label="Create or edit entry">
|
||
<div class="p-4 border-bottom d-flex justify-between align-center">
|
||
<div>
|
||
<h5 class="h5 m-0" id="modalTitle">Create new project</h5>
|
||
<div class="small text-muted mt-1" id="modalSubTitle">Quick add / edit flow</div>
|
||
</div>
|
||
<button class="btn-close" data-toggle="#modalExample" aria-label="Close">×</button>
|
||
</div>
|
||
|
||
<div class="p-4">
|
||
<div class="alert-blue mb-3">alert-blue — Info message inside modal.</div>
|
||
|
||
<div class="form-group">
|
||
<label class="label">Client</label>
|
||
<input type="text" class="input" id="modalClient" placeholder="Enter client..." />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="label">Status</label>
|
||
<select class="select" id="modalStatus">
|
||
<option>Paid</option>
|
||
<option>Pending</option>
|
||
<option>Processing</option>
|
||
<option>Overdue</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="label">Amount</label>
|
||
<input type="text" class="input" id="modalAmount" value="" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="label">Date</label>
|
||
<input type="text" class="input" id="modalDate" placeholder="2026-02-16" />
|
||
<div class="small text-muted mt-1">Used by the table edit action and quick-add flow.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="p-3 bg-surface border-top text-right">
|
||
<button class="btn-gray-light mr-2" data-toggle="#modalExample">Cancel</button>
|
||
<button class="btn-teal">Save</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="mobileDrawer" class="drawer" aria-hidden="true">
|
||
<div class="p-4">
|
||
<div class="d-flex justify-between align-center">
|
||
<h3 class="h3 m-0">VOR Mobile</h3>
|
||
<button class="btn-close" data-toggle="#mobileDrawer" aria-label="Close">×</button>
|
||
</div>
|
||
|
||
<hr class="hr" />
|
||
|
||
<nav class="d-flex flex-column gap-2">
|
||
<a href="#" class="nav-item is-active">Dashboard</a>
|
||
<a href="#" class="nav-item">Customers</a>
|
||
<a href="#" class="nav-item">Invoices</a>
|
||
<a href="#" class="nav-item">Settings</a>
|
||
|
||
<div class="mt-3">
|
||
<div class="small text-muted mb-2">Actions</div>
|
||
<button class="btn-teal w-100 mb-2" data-theme-toggle>Toggle theme</button>
|
||
<button class="btn-blue-light w-100 mb-2" data-toggle="#modalExample">Edit item</button>
|
||
<button class="btn-teal w-100 mb-2" data-toggle="#modalExample">Open modal</button>
|
||
<button class="btn-gray-light w-100" data-toggle="#mobileDrawer">Close menu</button>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
VOR.uiTable({
|
||
el: "#transactionsTable",
|
||
classArr: ["table", "striped", "hover"],
|
||
data: [{
|
||
client: "Acme Corp",
|
||
status: "Paid",
|
||
amount: "€ 1,200.00",
|
||
date: "Feb 14, 2026"
|
||
},
|
||
{
|
||
client: "Globex Inc",
|
||
status: "Pending",
|
||
amount: "€ 850.00",
|
||
date: "Feb 15, 2026"
|
||
},
|
||
{
|
||
client: "Initech",
|
||
status: "Processing",
|
||
amount: "€ 2,450.00",
|
||
date: "Feb 16, 2026"
|
||
},
|
||
{
|
||
client: "Umbrella",
|
||
status: "Overdue",
|
||
amount: "€ 640.00",
|
||
date: "Feb 10, 2026"
|
||
}
|
||
],
|
||
headers: [{
|
||
key: "client",
|
||
label: "Client"
|
||
},
|
||
{
|
||
key: "status",
|
||
label: "Status"
|
||
},
|
||
{
|
||
key: "amount",
|
||
label: "Amount"
|
||
},
|
||
{
|
||
key: "date",
|
||
label: "Date"
|
||
},
|
||
{
|
||
key: "edit",
|
||
label: "Edit",
|
||
sortable: false,
|
||
action: "edit-expand",
|
||
format: () => "Edit"
|
||
}
|
||
],
|
||
editRenderer: (row) => {
|
||
const wrap = VOR.createEl("div", ["p-4", "bg-surface"]);
|
||
|
||
const title = VOR.createEl("div", ["h6", "m-0", "mb-3"], `Edit ${row.client}`);
|
||
|
||
const clientGroup = VOR.createEl("div", ["form-group"]);
|
||
clientGroup.append(
|
||
VOR.createEl("label", ["label"], "Client"),
|
||
VOR.createEl("input", ["input"], null, {
|
||
type: "text",
|
||
value: row.client
|
||
})
|
||
);
|
||
|
||
const statusGroup = VOR.createEl("div", ["form-group"]);
|
||
const statusSelect = VOR.createEl("select", ["select"]);
|
||
["Paid", "Pending", "Processing", "Overdue"].forEach((status) => {
|
||
const option = VOR.createEl("option", null, status, {
|
||
value: status
|
||
});
|
||
if (status === row.status) option.selected = true;
|
||
statusSelect.append(option);
|
||
});
|
||
|
||
statusGroup.append(
|
||
VOR.createEl("label", ["label"], "Status"),
|
||
statusSelect
|
||
);
|
||
|
||
const amountGroup = VOR.createEl("div", ["form-group"]);
|
||
amountGroup.append(
|
||
VOR.createEl("label", ["label"], "Amount"),
|
||
VOR.createEl("input", ["input"], null, {
|
||
type: "text",
|
||
value: row.amount
|
||
})
|
||
);
|
||
|
||
const dateGroup = VOR.createEl("div", ["form-group"]);
|
||
dateGroup.append(
|
||
VOR.createEl("label", ["label"], "Date"),
|
||
VOR.createEl("input", ["input"], null, {
|
||
type: "text",
|
||
value: row.date
|
||
})
|
||
);
|
||
|
||
const actions = VOR.createEl("div", ["d-flex", "gap-2", "mt-3"]);
|
||
const saveBtn = VOR.createEl("button", ["btn-teal"], "Save", {
|
||
type: "button"
|
||
});
|
||
const closeBtn = VOR.createEl("button", ["btn-gray-light"], "Close", {
|
||
type: "button"
|
||
});
|
||
|
||
closeBtn.addEventListener("click", () => {
|
||
const editorRow = wrap.closest(".row-editor");
|
||
editorRow?.remove();
|
||
});
|
||
|
||
saveBtn.addEventListener("click", () => {
|
||
VOR.uiAlert(`Saved ${row.client}`, "success");
|
||
});
|
||
|
||
actions.append(saveBtn, closeBtn);
|
||
|
||
wrap.append(title, clientGroup, statusGroup, amountGroup, dateGroup, actions);
|
||
|
||
return wrap;
|
||
}
|
||
});
|
||
});
|
||
</script>
|