INotFail/Glint-Runtime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

examples: warm neutral theme (no blue) + cleaner copy

Browse Source
This commit is contained in:
Glint Dev
2026-07-22 14:22:46 +03:00
parent 9ce650a803
commit 66b684e412
2 changed files with 87 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
examples/demo/app.gltm
View File

@@ -1,5 +1,5 @@
// ============================================================================
// Glint System Monitor — Full Feature Demonstration
// Glint — Full Feature Demonstration
// ============================================================================
// Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
// @on click, variable binding, positioning (fixed, absolute, sticky),
@@ -9,9 +9,9 @@
@version 1
@style "styles.glts"
// ── 1. Global State ──────────────────────────────────────────────────────────
@global $title = "System Monitor"
@global $user = "admin"
// ── 1. State ─────────────────────────────────────────────────────────────────
@global $title = "My Dashboard"
@global $user = "guest"
@global $cpu = 23.0
@global $memory = 47.0
@global $online = true
@@ -27,11 +27,11 @@
!rhei: {
fn pct(v) { v + "%" }
fn label(v) {
if v >= 80.0 { "Critical" }
else if v >= 50.0 { "Elevated" }
else { "Normal" }
if v >= 80.0 { "High" }
else if v >= 50.0 { "Medium" }
else { "Low" }
}
print("[Monitor] " + nodes.len() + " node channels allocated.");
print("[App] " + nodes.len() + " nodes ready.");
}
// ── 2. Components ────────────────────────────────────────────────────────────
@@ -49,13 +49,13 @@
@component NodeTile(tag: String, active: Bool) {
Panel(class="tile") {
Panel(class="tile-row") {
Icon "🖥"
Icon "◇"
Text(text=$tag)
}
@if $active {
Text(class="tag-on") "● Online"
Text(class="tag-on") "● Live"
} @else {
Text(class="tag-off") "○ Offline"
Text(class="tag-off") "○ Off"
}
}
}
@@ -66,8 +66,8 @@ Window(title=$title) {
// ── Sticky Header ────────────────────────────────────────────────────────
Panel(class="header") {
Panel(class="header-inner") {
Icon "⚙"
Header "Glint Monitor"
Icon "◇"
Header "Glint"
Panel(width="fill")
Text !rhei: { "👤 " + user }
}
@@ -78,40 +78,40 @@ Window(title=$title) {
// ── LEFT COLUMN ──────────────────────────────────────────────────────
Panel(class="col-left") {
// Engine Controls
// Panel: Controls
Panel(class="card") {
Header "Engine"
Header "Controls"
Toggle(label="Online", value=$online)
@if $online {
Text(class="ok") "🟢 Running"
Text(class="ok") "✓ Running"
} @else {
Text(class="err") "🔴 Stopped"
Text(class="err") "✗ Stopped"
}
Input(placeholder="Username", value=$user)
}
// Gauges
// Panel: Metrics
Panel(class="card") {
Header "Metrics"
Gauge(name="CPU", val=$cpu)
Gauge(name="Memory", val=$memory)
}
// Threshold Slider
// Panel: Threshold
Panel(class="card") {
Header "Alert Threshold"
Slider(value=$alert)
Text !rhei: { "Alert when > " + alert + "%" }
}
// Buttons
// Panel: Actions
Panel(class="card") {
Header "Actions"
Panel(class="btn-row") {
Button(label="Reset CPU") {
@on click { !rhei: { cpu = 5.0; } }
}
Button(label="Stress CPU") {
Button(label="Max CPU") {
@on click { !rhei: { cpu = 92.0; } }
}
}
@@ -120,7 +120,7 @@ Window(title=$title) {
}
}
// Node Grid
// Panel: Nodes
Panel(class="card") {
Header "Nodes"
Panel(direction="grid", columns=2, gap=8) {
@@ -134,7 +134,7 @@ Window(title=$title) {
// ── RIGHT COLUMN ─────────────────────────────────────────────────────
Panel(class="col-right") {
// Typography
// Panel: Typography
Panel(class="card") {
Header "Typography"
Panel(class="demo-row") {
@@ -155,7 +155,7 @@ Window(title=$title) {
}
}
// Box Model
// Panel: Box Model
Panel(class="card") {
Header "Box Model"
Panel(class="box-pad") {
@@ -165,15 +165,15 @@ Window(title=$title) {
Text "margin-top: 16px"
}
Panel(class="box-combo") {
Text "border: 2px dashed, radius: 10px"
Text "border: 2px, radius: 10px"
}
}
// Absolute Positioning
// Panel: Absolute Position
Panel(class="card") {
Header "Position: Absolute"
Panel(class="abs-stage") {
Text "Stage with an overlay badge:"
Text "Stage with overlay badge:"
Panel(class="abs-badge") {
Panel(class="badge-inner") {
Text "★ HOT"
@@ -182,7 +182,7 @@ Window(title=$title) {
}
}
// Opacity
// Panel: Opacity
Panel(class="card") {
Header "Opacity"
Panel(class="op-row") {
@@ -193,12 +193,12 @@ Window(title=$title) {
}
}
// Scroll + Sticky
// Panel: Scroll + Sticky
Panel(class="card") {
Header "Scrollable Log"
Panel(class="log") {
Panel(class="log-header") {
Text "📋 Event Log (sticky)"
Text "Event Log (sticky header)"
}
Text "Init: system boot"
Text "Info: all modules OK"
@@ -212,16 +212,16 @@ Window(title=$title) {
}
}
// Inheritance
// Panel: Inheritance
Panel(class="card") {
Header "Style Inheritance"
Panel(class="inherit") {
Text "Yellow from parent"
Text(class="override") "Pink — override"
Text "Warm gold from parent"
Text(class="override") "Terracotta — override"
}
}
// Display: none demo
// Panel: Display None
Panel(class="card") {
Header "Display: None"
Panel(class="demo-row") {
@@ -231,7 +231,7 @@ Window(title=$title) {
}
}
// Flex Grow
// Panel: Flex Grow
Panel(class="card") {
Header "Flex Grow"
Panel(class="grow-bar") {
@@ -247,7 +247,7 @@ Window(title=$title) {
@if $notif {
Panel(class="toast") {
Panel(class="toast-row") {
Text "✅ Monitor ready"
Text "✓ App ready"
Button(label="×", class="toast-x") {
@on click { !rhei: { notif = false; } }
}