wille/testprojekt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
wille
2026-04-06 16:49:17 -04:00
commit 7ec75d0747
36 changed files with 14526 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
rss/php/views/footers/default.php Normal file
View File

@@ -0,0 +1,6 @@
<script src="/rss/js/main.js"></script>
<?php foreach($render['scripts'] as $s):?>
<script src="<?= $s['src'] ?>" <?= $s['type'] == 'module' ? 'type="module"' : '' ?>></script>
<?php endforeach;?>
</body>
</html>

11
rss/php/views/headers/default.php Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VOR CRM — UI Kit Showcase (Full)</title>
<link rel="stylesheet" href="/rss/css/main.css" />
<link rel="stylesheet" href="/rss/css/template.css" />
</head>

592
rss/php/views/pages/index.php Normal file
View File

@@ -0,0 +1,592 @@
<?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>&lt;html&gt;</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>