tina4ruby 3.11.13 → 3.11.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +80 -80
- data/LICENSE.txt +21 -21
- data/README.md +137 -137
- data/exe/tina4ruby +5 -5
- data/lib/tina4/ai.rb +696 -696
- data/lib/tina4/api.rb +189 -189
- data/lib/tina4/auth.rb +305 -305
- data/lib/tina4/auto_crud.rb +244 -244
- data/lib/tina4/cache.rb +154 -154
- data/lib/tina4/cli.rb +1449 -1449
- data/lib/tina4/constants.rb +46 -46
- data/lib/tina4/container.rb +74 -74
- data/lib/tina4/cors.rb +74 -74
- data/lib/tina4/crud.rb +692 -692
- data/lib/tina4/database/sqlite3_adapter.rb +165 -165
- data/lib/tina4/database.rb +625 -625
- data/lib/tina4/database_result.rb +208 -208
- data/lib/tina4/debug.rb +8 -8
- data/lib/tina4/dev.rb +14 -14
- data/lib/tina4/dev_admin.rb +935 -935
- data/lib/tina4/dev_mailbox.rb +191 -191
- data/lib/tina4/drivers/firebird_driver.rb +124 -110
- data/lib/tina4/drivers/mongodb_driver.rb +561 -561
- data/lib/tina4/drivers/mssql_driver.rb +112 -112
- data/lib/tina4/drivers/mysql_driver.rb +90 -90
- data/lib/tina4/drivers/odbc_driver.rb +191 -191
- data/lib/tina4/drivers/postgres_driver.rb +116 -106
- data/lib/tina4/drivers/sqlite_driver.rb +122 -122
- data/lib/tina4/env.rb +95 -95
- data/lib/tina4/error_overlay.rb +252 -252
- data/lib/tina4/events.rb +109 -109
- data/lib/tina4/field_types.rb +154 -154
- data/lib/tina4/frond.rb +2025 -2025
- data/lib/tina4/gallery/auth/meta.json +1 -1
- data/lib/tina4/gallery/auth/src/routes/api/gallery_auth.rb +114 -114
- data/lib/tina4/gallery/database/meta.json +1 -1
- data/lib/tina4/gallery/database/src/routes/api/gallery_db.rb +43 -43
- data/lib/tina4/gallery/error-overlay/meta.json +1 -1
- data/lib/tina4/gallery/error-overlay/src/routes/api/gallery_crash.rb +17 -17
- data/lib/tina4/gallery/orm/meta.json +1 -1
- data/lib/tina4/gallery/orm/src/routes/api/gallery_products.rb +16 -16
- data/lib/tina4/gallery/queue/meta.json +1 -1
- data/lib/tina4/gallery/queue/src/routes/api/gallery_queue.rb +325 -325
- data/lib/tina4/gallery/rest-api/meta.json +1 -1
- data/lib/tina4/gallery/rest-api/src/routes/api/gallery_hello.rb +14 -14
- data/lib/tina4/gallery/templates/meta.json +1 -1
- data/lib/tina4/gallery/templates/src/routes/gallery_page.rb +12 -12
- data/lib/tina4/gallery/templates/src/templates/gallery_page.twig +257 -257
- data/lib/tina4/graphql.rb +966 -966
- data/lib/tina4/health.rb +39 -39
- data/lib/tina4/html_element.rb +170 -170
- data/lib/tina4/job.rb +80 -80
- data/lib/tina4/localization.rb +168 -168
- data/lib/tina4/log.rb +203 -203
- data/lib/tina4/mcp.rb +696 -696
- data/lib/tina4/messenger.rb +587 -587
- data/lib/tina4/metrics.rb +793 -793
- data/lib/tina4/middleware.rb +445 -445
- data/lib/tina4/migration.rb +451 -451
- data/lib/tina4/orm.rb +790 -790
- data/lib/tina4/public/css/tina4.css +2463 -2463
- data/lib/tina4/public/css/tina4.min.css +1 -1
- data/lib/tina4/public/images/logo.svg +5 -5
- data/lib/tina4/public/js/frond.min.js +2 -2
- data/lib/tina4/public/js/tina4-dev-admin.js +565 -565
- data/lib/tina4/public/js/tina4-dev-admin.min.js +480 -480
- data/lib/tina4/public/js/tina4.min.js +92 -92
- data/lib/tina4/public/js/tina4js.min.js +48 -48
- data/lib/tina4/public/swagger/index.html +90 -90
- data/lib/tina4/public/swagger/oauth2-redirect.html +63 -63
- data/lib/tina4/query_builder.rb +380 -380
- data/lib/tina4/queue.rb +366 -366
- data/lib/tina4/queue_backends/kafka_backend.rb +80 -80
- data/lib/tina4/queue_backends/lite_backend.rb +298 -298
- data/lib/tina4/queue_backends/mongo_backend.rb +126 -126
- data/lib/tina4/queue_backends/rabbitmq_backend.rb +73 -73
- data/lib/tina4/rack_app.rb +817 -817
- data/lib/tina4/rate_limiter.rb +130 -130
- data/lib/tina4/request.rb +268 -255
- data/lib/tina4/response.rb +346 -346
- data/lib/tina4/response_cache.rb +551 -551
- data/lib/tina4/router.rb +406 -406
- data/lib/tina4/scss/tina4css/_alerts.scss +34 -34
- data/lib/tina4/scss/tina4css/_badges.scss +22 -22
- data/lib/tina4/scss/tina4css/_buttons.scss +69 -69
- data/lib/tina4/scss/tina4css/_cards.scss +49 -49
- data/lib/tina4/scss/tina4css/_forms.scss +156 -156
- data/lib/tina4/scss/tina4css/_grid.scss +81 -81
- data/lib/tina4/scss/tina4css/_modals.scss +84 -84
- data/lib/tina4/scss/tina4css/_nav.scss +149 -149
- data/lib/tina4/scss/tina4css/_reset.scss +94 -94
- data/lib/tina4/scss/tina4css/_tables.scss +54 -54
- data/lib/tina4/scss/tina4css/_typography.scss +55 -55
- data/lib/tina4/scss/tina4css/_utilities.scss +197 -197
- data/lib/tina4/scss/tina4css/_variables.scss +117 -117
- data/lib/tina4/scss/tina4css/base.scss +1 -1
- data/lib/tina4/scss/tina4css/colors.scss +48 -48
- data/lib/tina4/scss/tina4css/tina4.scss +17 -17
- data/lib/tina4/scss_compiler.rb +178 -178
- data/lib/tina4/seeder.rb +567 -567
- data/lib/tina4/service_runner.rb +303 -303
- data/lib/tina4/session.rb +297 -297
- data/lib/tina4/session_handlers/database_handler.rb +72 -72
- data/lib/tina4/session_handlers/file_handler.rb +67 -67
- data/lib/tina4/session_handlers/mongo_handler.rb +49 -49
- data/lib/tina4/session_handlers/redis_handler.rb +43 -43
- data/lib/tina4/session_handlers/valkey_handler.rb +43 -43
- data/lib/tina4/shutdown.rb +84 -84
- data/lib/tina4/sql_translation.rb +158 -158
- data/lib/tina4/swagger.rb +124 -124
- data/lib/tina4/template.rb +894 -894
- data/lib/tina4/templates/base.twig +26 -26
- data/lib/tina4/templates/errors/302.twig +14 -14
- data/lib/tina4/templates/errors/401.twig +9 -9
- data/lib/tina4/templates/errors/403.twig +29 -29
- data/lib/tina4/templates/errors/404.twig +29 -29
- data/lib/tina4/templates/errors/500.twig +38 -38
- data/lib/tina4/templates/errors/502.twig +9 -9
- data/lib/tina4/templates/errors/503.twig +12 -12
- data/lib/tina4/templates/errors/base.twig +37 -37
- data/lib/tina4/test_client.rb +159 -159
- data/lib/tina4/testing.rb +340 -340
- data/lib/tina4/validator.rb +174 -174
- data/lib/tina4/version.rb +1 -1
- data/lib/tina4/webserver.rb +312 -312
- data/lib/tina4/websocket.rb +343 -343
- data/lib/tina4/websocket_backplane.rb +190 -190
- data/lib/tina4/wsdl.rb +564 -564
- data/lib/tina4.rb +458 -458
- data/lib/tina4ruby.rb +4 -4
- metadata +3 -3
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
# Gallery: REST API — simple JSON endpoints.
|
|
2
|
-
|
|
3
|
-
Tina4::Router.get("/api/gallery/hello") do |request, response|
|
|
4
|
-
response.json({ message: "Hello from Tina4!", method: "GET" })
|
|
5
|
-
end
|
|
6
|
-
|
|
7
|
-
Tina4::Router.get("/api/gallery/hello/{name}") do |request, response|
|
|
8
|
-
response.json({ message: "Hello #{request.params["name"]}!", method: "GET" })
|
|
9
|
-
end
|
|
10
|
-
|
|
11
|
-
Tina4::Router.post("/api/gallery/hello") do |request, response|
|
|
12
|
-
data = request.body || {}
|
|
13
|
-
response.json({ echo: data, method: "POST" }, 201)
|
|
14
|
-
end
|
|
1
|
+
# Gallery: REST API — simple JSON endpoints.
|
|
2
|
+
|
|
3
|
+
Tina4::Router.get("/api/gallery/hello") do |request, response|
|
|
4
|
+
response.json({ message: "Hello from Tina4!", method: "GET" })
|
|
5
|
+
end
|
|
6
|
+
|
|
7
|
+
Tina4::Router.get("/api/gallery/hello/{name}") do |request, response|
|
|
8
|
+
response.json({ message: "Hello #{request.params["name"]}!", method: "GET" })
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
Tina4::Router.post("/api/gallery/hello") do |request, response|
|
|
12
|
+
data = request.body || {}
|
|
13
|
+
response.json({ echo: data, method: "POST" }, 201)
|
|
14
|
+
end
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name": "Templates", "description": "Twig template with dynamic data", "try_url": "/gallery/page"}
|
|
1
|
+
{"name": "Templates", "description": "Twig template with dynamic data", "try_url": "/gallery/page"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# Gallery: Templates — render an HTML page with dynamic data via template.
|
|
2
|
-
|
|
3
|
-
Tina4::Router.get "/gallery/page", template: "gallery_page.twig" do |request, response|
|
|
4
|
-
response.call({
|
|
5
|
-
title: "Gallery Demo Page",
|
|
6
|
-
items: [
|
|
7
|
-
{ name: "Tina4 Ruby", description: "Zero-dep web framework", badge: "v3.0.0" },
|
|
8
|
-
{ name: "Twig Engine", description: "Built-in template rendering", badge: "included" },
|
|
9
|
-
{ name: "Auto-Reload", description: "Templates refresh on save", badge: "dev mode" }
|
|
10
|
-
]
|
|
11
|
-
}, Tina4::HTTP_OK)
|
|
12
|
-
end
|
|
1
|
+
# Gallery: Templates — render an HTML page with dynamic data via template.
|
|
2
|
+
|
|
3
|
+
Tina4::Router.get "/gallery/page", template: "gallery_page.twig" do |request, response|
|
|
4
|
+
response.call({
|
|
5
|
+
title: "Gallery Demo Page",
|
|
6
|
+
items: [
|
|
7
|
+
{ name: "Tina4 Ruby", description: "Zero-dep web framework", badge: "v3.0.0" },
|
|
8
|
+
{ name: "Twig Engine", description: "Built-in template rendering", badge: "included" },
|
|
9
|
+
{ name: "Auto-Reload", description: "Templates refresh on save", badge: "dev mode" }
|
|
10
|
+
]
|
|
11
|
+
}, Tina4::HTTP_OK)
|
|
12
|
+
end
|
|
@@ -1,257 +1,257 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>{{ title }}</title>
|
|
7
|
-
<link rel="stylesheet" href="/css/tina4.min.css">
|
|
8
|
-
<style>
|
|
9
|
-
.component-section { margin-bottom: 2.5rem; }
|
|
10
|
-
.component-section h3 { border-bottom: 2px solid var(--bs-primary, #0d6efd); padding-bottom: 0.5rem; margin-bottom: 1rem; }
|
|
11
|
-
.code-preview { background: #1e293b; color: #4ade80; padding: 1rem; border-radius: 0.5rem; font-family: monospace; font-size: 0.85rem; overflow-x: auto; margin-top: 0.75rem; }
|
|
12
|
-
</style>
|
|
13
|
-
</head>
|
|
14
|
-
<body>
|
|
15
|
-
|
|
16
|
-
<!-- Navbar -->
|
|
17
|
-
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
|
|
18
|
-
<div class="container">
|
|
19
|
-
<a class="navbar-brand" href="/">Tina4 CSS Showcase</a>
|
|
20
|
-
<div class="navbar-nav ms-auto">
|
|
21
|
-
<a class="nav-link active" href="#">Components</a>
|
|
22
|
-
<a class="nav-link" href="/__dev">Dashboard</a>
|
|
23
|
-
<a class="nav-link" href="/swagger">API Docs</a>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
</nav>
|
|
27
|
-
|
|
28
|
-
<div class="container mt-4">
|
|
29
|
-
|
|
30
|
-
<div class="alert alert-info alert-dismissible mb-4">
|
|
31
|
-
<strong>tina4css</strong> — Zero-dependency CSS framework (~24KB). Bootstrap-compatible class names, dark mode ready. No CDN needed — ships with every Tina4 project.
|
|
32
|
-
<button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
|
|
33
|
-
</div>
|
|
34
|
-
|
|
35
|
-
<!-- Buttons -->
|
|
36
|
-
<div class="component-section">
|
|
37
|
-
<h3>Buttons</h3>
|
|
38
|
-
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
39
|
-
<button class="btn btn-primary">Primary</button>
|
|
40
|
-
<button class="btn btn-secondary">Secondary</button>
|
|
41
|
-
<button class="btn btn-success">Success</button>
|
|
42
|
-
<button class="btn btn-danger">Danger</button>
|
|
43
|
-
<button class="btn btn-warning">Warning</button>
|
|
44
|
-
<button class="btn btn-info">Info</button>
|
|
45
|
-
<button class="btn btn-dark">Dark</button>
|
|
46
|
-
<button class="btn btn-light">Light</button>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
49
|
-
<button class="btn btn-outline-primary">Outline</button>
|
|
50
|
-
<button class="btn btn-outline-success">Outline</button>
|
|
51
|
-
<button class="btn btn-outline-danger">Outline</button>
|
|
52
|
-
<button class="btn btn-outline-warning">Outline</button>
|
|
53
|
-
</div>
|
|
54
|
-
<div class="d-flex flex-wrap gap-2">
|
|
55
|
-
<button class="btn btn-primary btn-lg">Large</button>
|
|
56
|
-
<button class="btn btn-primary">Default</button>
|
|
57
|
-
<button class="btn btn-primary btn-sm">Small</button>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<!-- Alerts -->
|
|
62
|
-
<div class="component-section">
|
|
63
|
-
<h3>Alerts</h3>
|
|
64
|
-
<div class="alert alert-success">Success — Record saved successfully!</div>
|
|
65
|
-
<div class="alert alert-danger">Error — Something went wrong.</div>
|
|
66
|
-
<div class="alert alert-warning">Warning — Please check your input.</div>
|
|
67
|
-
<div class="alert alert-info">Info — New version available.</div>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<!-- Cards -->
|
|
71
|
-
<div class="component-section">
|
|
72
|
-
<h3>Cards</h3>
|
|
73
|
-
<div class="row">
|
|
74
|
-
{% for item in items %}
|
|
75
|
-
<div class="col-md-4 mb-3">
|
|
76
|
-
<div class="card h-100">
|
|
77
|
-
<div class="card-header bg-primary text-white">{{ item.name }}</div>
|
|
78
|
-
<div class="card-body">
|
|
79
|
-
<p class="card-text">{{ item.description }}</p>
|
|
80
|
-
<span class="badge bg-success">{{ item.badge }}</span>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="card-footer text-muted">
|
|
83
|
-
<small>Built with tina4css</small>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
{% endfor %}
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
|
|
91
|
-
<!-- Badges -->
|
|
92
|
-
<div class="component-section">
|
|
93
|
-
<h3>Badges</h3>
|
|
94
|
-
<span class="badge bg-primary me-1">Primary</span>
|
|
95
|
-
<span class="badge bg-secondary me-1">Secondary</span>
|
|
96
|
-
<span class="badge bg-success me-1">Success</span>
|
|
97
|
-
<span class="badge bg-danger me-1">Danger</span>
|
|
98
|
-
<span class="badge bg-warning me-1">Warning</span>
|
|
99
|
-
<span class="badge bg-info me-1">Info</span>
|
|
100
|
-
<span class="badge bg-dark me-1">Dark</span>
|
|
101
|
-
</div>
|
|
102
|
-
|
|
103
|
-
<!-- Forms -->
|
|
104
|
-
<div class="component-section">
|
|
105
|
-
<h3>Forms</h3>
|
|
106
|
-
<div class="card">
|
|
107
|
-
<div class="card-body">
|
|
108
|
-
<form>
|
|
109
|
-
<div class="row mb-3">
|
|
110
|
-
<div class="col-md-6">
|
|
111
|
-
<div class="form-group">
|
|
112
|
-
<label class="form-label">Full Name</label>
|
|
113
|
-
<input type="text" class="form-control" placeholder="Andre van Zuydam">
|
|
114
|
-
</div>
|
|
115
|
-
</div>
|
|
116
|
-
<div class="col-md-6">
|
|
117
|
-
<div class="form-group">
|
|
118
|
-
<label class="form-label">Email</label>
|
|
119
|
-
<input type="email" class="form-control" placeholder="you@example.com">
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
<div class="row mb-3">
|
|
124
|
-
<div class="col-md-6">
|
|
125
|
-
<div class="form-group">
|
|
126
|
-
<label class="form-label">Framework</label>
|
|
127
|
-
<select class="form-select">
|
|
128
|
-
<option>Python</option>
|
|
129
|
-
<option>PHP</option>
|
|
130
|
-
<option selected>Ruby</option>
|
|
131
|
-
<option>Node.js</option>
|
|
132
|
-
</select>
|
|
133
|
-
</div>
|
|
134
|
-
</div>
|
|
135
|
-
<div class="col-md-6">
|
|
136
|
-
<div class="form-group">
|
|
137
|
-
<label class="form-label">Database</label>
|
|
138
|
-
<select class="form-select">
|
|
139
|
-
<option>SQLite</option>
|
|
140
|
-
<option>PostgreSQL</option>
|
|
141
|
-
<option>MySQL</option>
|
|
142
|
-
<option>Firebird</option>
|
|
143
|
-
<option>MSSQL</option>
|
|
144
|
-
</select>
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
<div class="form-group mb-3">
|
|
149
|
-
<label class="form-label">Message</label>
|
|
150
|
-
<textarea class="form-control" rows="3" placeholder="Tell us about your project..."></textarea>
|
|
151
|
-
</div>
|
|
152
|
-
<div class="form-check mb-3">
|
|
153
|
-
<input class="form-check-input" type="checkbox" checked>
|
|
154
|
-
<label class="form-check-label">I agree to the terms</label>
|
|
155
|
-
</div>
|
|
156
|
-
<button type="button" class="btn btn-primary">Submit</button>
|
|
157
|
-
<button type="button" class="btn btn-outline-secondary ms-2">Cancel</button>
|
|
158
|
-
</form>
|
|
159
|
-
</div>
|
|
160
|
-
</div>
|
|
161
|
-
</div>
|
|
162
|
-
|
|
163
|
-
<!-- Table -->
|
|
164
|
-
<div class="component-section">
|
|
165
|
-
<h3>Tables</h3>
|
|
166
|
-
<div class="table-responsive">
|
|
167
|
-
<table class="table table-striped table-hover">
|
|
168
|
-
<thead>
|
|
169
|
-
<tr>
|
|
170
|
-
<th>#</th>
|
|
171
|
-
<th>Framework</th>
|
|
172
|
-
<th>Port</th>
|
|
173
|
-
<th>Language</th>
|
|
174
|
-
<th>Status</th>
|
|
175
|
-
</tr>
|
|
176
|
-
</thead>
|
|
177
|
-
<tbody>
|
|
178
|
-
<tr><td>1</td><td>tina4-python</td><td>7145</td><td>Python 3.12+</td><td><span class="badge bg-success">Stable</span></td></tr>
|
|
179
|
-
<tr><td>2</td><td>tina4-php</td><td>7146</td><td>PHP 8.2+</td><td><span class="badge bg-success">Stable</span></td></tr>
|
|
180
|
-
<tr><td>3</td><td>tina4-ruby</td><td>7147</td><td>Ruby 3.1+</td><td><span class="badge bg-success">Stable</span></td></tr>
|
|
181
|
-
<tr><td>4</td><td>tina4-nodejs</td><td>7148</td><td>Node 20+</td><td><span class="badge bg-success">Stable</span></td></tr>
|
|
182
|
-
</tbody>
|
|
183
|
-
</table>
|
|
184
|
-
</div>
|
|
185
|
-
</div>
|
|
186
|
-
|
|
187
|
-
<!-- Breadcrumbs -->
|
|
188
|
-
<div class="component-section">
|
|
189
|
-
<h3>Breadcrumbs</h3>
|
|
190
|
-
<nav>
|
|
191
|
-
<ol class="breadcrumb">
|
|
192
|
-
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
193
|
-
<li class="breadcrumb-item"><a href="#">Gallery</a></li>
|
|
194
|
-
<li class="breadcrumb-item active">Components</li>
|
|
195
|
-
</ol>
|
|
196
|
-
</nav>
|
|
197
|
-
</div>
|
|
198
|
-
|
|
199
|
-
<!-- Input Groups -->
|
|
200
|
-
<div class="component-section">
|
|
201
|
-
<h3>Input Groups</h3>
|
|
202
|
-
<div class="input-group mb-3">
|
|
203
|
-
<span class="input-group-text">@</span>
|
|
204
|
-
<input type="text" class="form-control" placeholder="Username">
|
|
205
|
-
</div>
|
|
206
|
-
<div class="input-group mb-3">
|
|
207
|
-
<input type="text" class="form-control" placeholder="Search routes...">
|
|
208
|
-
<button class="btn btn-primary">Search</button>
|
|
209
|
-
</div>
|
|
210
|
-
<div class="input-group">
|
|
211
|
-
<span class="input-group-text">https://</span>
|
|
212
|
-
<input type="text" class="form-control" placeholder="tina4.com">
|
|
213
|
-
<span class="input-group-text">/api</span>
|
|
214
|
-
</div>
|
|
215
|
-
</div>
|
|
216
|
-
|
|
217
|
-
<!-- Progress -->
|
|
218
|
-
<div class="component-section">
|
|
219
|
-
<h3>Progress Bars</h3>
|
|
220
|
-
<div class="progress mb-2"><div class="progress-bar bg-primary" style="width: 25%">25%</div></div>
|
|
221
|
-
<div class="progress mb-2"><div class="progress-bar bg-success" style="width: 50%">50%</div></div>
|
|
222
|
-
<div class="progress mb-2"><div class="progress-bar bg-warning" style="width: 75%">75%</div></div>
|
|
223
|
-
<div class="progress"><div class="progress-bar bg-danger" style="width: 100%">100%</div></div>
|
|
224
|
-
</div>
|
|
225
|
-
|
|
226
|
-
<!-- List Group -->
|
|
227
|
-
<div class="component-section">
|
|
228
|
-
<h3>List Group</h3>
|
|
229
|
-
<div class="list-group">
|
|
230
|
-
<a href="#" class="list-group-item list-group-item-action active">Routes — 12 registered</a>
|
|
231
|
-
<a href="#" class="list-group-item list-group-item-action">Queue — 3 pending jobs</a>
|
|
232
|
-
<a href="#" class="list-group-item list-group-item-action">Database — SQLite connected</a>
|
|
233
|
-
<a href="#" class="list-group-item list-group-item-action disabled">Cache — Not configured</a>
|
|
234
|
-
</div>
|
|
235
|
-
</div>
|
|
236
|
-
|
|
237
|
-
<!-- How this page was built -->
|
|
238
|
-
<div class="card mt-4 mb-5" style="background:#0f172a;border:1px solid #334155;">
|
|
239
|
-
<div class="card-body">
|
|
240
|
-
<h5 style="color:#e2e8f0;">How this page was built</h5>
|
|
241
|
-
<pre style="background:#1e293b;border:1px solid #334155;border-radius:0.5rem;padding:1.25rem;margin-top:0.75rem;overflow-x:auto;font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:0.9rem;line-height:1.7;"><code><span style="color:#c084fc;">Tina4::Router.get</span> <span style="color:#4ade80;">"/gallery/page"</span>, <span style="color:#38bdf8;">template:</span> <span style="color:#4ade80;">"gallery_page.twig"</span> <span style="color:#c084fc;">do</span> |request, response|
|
|
242
|
-
response.call({
|
|
243
|
-
<span style="color:#fbbf24;">title:</span> <span style="color:#4ade80;">"tina4css Component Showcase"</span>,
|
|
244
|
-
<span style="color:#fbbf24;">items:</span> [...]
|
|
245
|
-
}, Tina4::HTTP_OK)
|
|
246
|
-
<span style="color:#c084fc;">end</span></code></pre>
|
|
247
|
-
<p style="color:#94a3b8;margin-top:0.75rem;margin-bottom:0;">
|
|
248
|
-
Rendered via <code style="color:#c084fc;">template:</code> keyword. Styled with <strong style="color:#e2e8f0;">tina4css</strong> — zero external CDN.
|
|
249
|
-
All components above use only <code style="color:#4ade80;"><link href="/css/tina4.min.css"></code>.
|
|
250
|
-
</p>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
|
|
254
|
-
</div>
|
|
255
|
-
|
|
256
|
-
</body>
|
|
257
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>{{ title }}</title>
|
|
7
|
+
<link rel="stylesheet" href="/css/tina4.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
.component-section { margin-bottom: 2.5rem; }
|
|
10
|
+
.component-section h3 { border-bottom: 2px solid var(--bs-primary, #0d6efd); padding-bottom: 0.5rem; margin-bottom: 1rem; }
|
|
11
|
+
.code-preview { background: #1e293b; color: #4ade80; padding: 1rem; border-radius: 0.5rem; font-family: monospace; font-size: 0.85rem; overflow-x: auto; margin-top: 0.75rem; }
|
|
12
|
+
</style>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
|
|
16
|
+
<!-- Navbar -->
|
|
17
|
+
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
|
|
18
|
+
<div class="container">
|
|
19
|
+
<a class="navbar-brand" href="/">Tina4 CSS Showcase</a>
|
|
20
|
+
<div class="navbar-nav ms-auto">
|
|
21
|
+
<a class="nav-link active" href="#">Components</a>
|
|
22
|
+
<a class="nav-link" href="/__dev">Dashboard</a>
|
|
23
|
+
<a class="nav-link" href="/swagger">API Docs</a>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</nav>
|
|
27
|
+
|
|
28
|
+
<div class="container mt-4">
|
|
29
|
+
|
|
30
|
+
<div class="alert alert-info alert-dismissible mb-4">
|
|
31
|
+
<strong>tina4css</strong> — Zero-dependency CSS framework (~24KB). Bootstrap-compatible class names, dark mode ready. No CDN needed — ships with every Tina4 project.
|
|
32
|
+
<button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<!-- Buttons -->
|
|
36
|
+
<div class="component-section">
|
|
37
|
+
<h3>Buttons</h3>
|
|
38
|
+
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
39
|
+
<button class="btn btn-primary">Primary</button>
|
|
40
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
41
|
+
<button class="btn btn-success">Success</button>
|
|
42
|
+
<button class="btn btn-danger">Danger</button>
|
|
43
|
+
<button class="btn btn-warning">Warning</button>
|
|
44
|
+
<button class="btn btn-info">Info</button>
|
|
45
|
+
<button class="btn btn-dark">Dark</button>
|
|
46
|
+
<button class="btn btn-light">Light</button>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
49
|
+
<button class="btn btn-outline-primary">Outline</button>
|
|
50
|
+
<button class="btn btn-outline-success">Outline</button>
|
|
51
|
+
<button class="btn btn-outline-danger">Outline</button>
|
|
52
|
+
<button class="btn btn-outline-warning">Outline</button>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="d-flex flex-wrap gap-2">
|
|
55
|
+
<button class="btn btn-primary btn-lg">Large</button>
|
|
56
|
+
<button class="btn btn-primary">Default</button>
|
|
57
|
+
<button class="btn btn-primary btn-sm">Small</button>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<!-- Alerts -->
|
|
62
|
+
<div class="component-section">
|
|
63
|
+
<h3>Alerts</h3>
|
|
64
|
+
<div class="alert alert-success">Success — Record saved successfully!</div>
|
|
65
|
+
<div class="alert alert-danger">Error — Something went wrong.</div>
|
|
66
|
+
<div class="alert alert-warning">Warning — Please check your input.</div>
|
|
67
|
+
<div class="alert alert-info">Info — New version available.</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<!-- Cards -->
|
|
71
|
+
<div class="component-section">
|
|
72
|
+
<h3>Cards</h3>
|
|
73
|
+
<div class="row">
|
|
74
|
+
{% for item in items %}
|
|
75
|
+
<div class="col-md-4 mb-3">
|
|
76
|
+
<div class="card h-100">
|
|
77
|
+
<div class="card-header bg-primary text-white">{{ item.name }}</div>
|
|
78
|
+
<div class="card-body">
|
|
79
|
+
<p class="card-text">{{ item.description }}</p>
|
|
80
|
+
<span class="badge bg-success">{{ item.badge }}</span>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="card-footer text-muted">
|
|
83
|
+
<small>Built with tina4css</small>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
{% endfor %}
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<!-- Badges -->
|
|
92
|
+
<div class="component-section">
|
|
93
|
+
<h3>Badges</h3>
|
|
94
|
+
<span class="badge bg-primary me-1">Primary</span>
|
|
95
|
+
<span class="badge bg-secondary me-1">Secondary</span>
|
|
96
|
+
<span class="badge bg-success me-1">Success</span>
|
|
97
|
+
<span class="badge bg-danger me-1">Danger</span>
|
|
98
|
+
<span class="badge bg-warning me-1">Warning</span>
|
|
99
|
+
<span class="badge bg-info me-1">Info</span>
|
|
100
|
+
<span class="badge bg-dark me-1">Dark</span>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<!-- Forms -->
|
|
104
|
+
<div class="component-section">
|
|
105
|
+
<h3>Forms</h3>
|
|
106
|
+
<div class="card">
|
|
107
|
+
<div class="card-body">
|
|
108
|
+
<form>
|
|
109
|
+
<div class="row mb-3">
|
|
110
|
+
<div class="col-md-6">
|
|
111
|
+
<div class="form-group">
|
|
112
|
+
<label class="form-label">Full Name</label>
|
|
113
|
+
<input type="text" class="form-control" placeholder="Andre van Zuydam">
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="col-md-6">
|
|
117
|
+
<div class="form-group">
|
|
118
|
+
<label class="form-label">Email</label>
|
|
119
|
+
<input type="email" class="form-control" placeholder="you@example.com">
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="row mb-3">
|
|
124
|
+
<div class="col-md-6">
|
|
125
|
+
<div class="form-group">
|
|
126
|
+
<label class="form-label">Framework</label>
|
|
127
|
+
<select class="form-select">
|
|
128
|
+
<option>Python</option>
|
|
129
|
+
<option>PHP</option>
|
|
130
|
+
<option selected>Ruby</option>
|
|
131
|
+
<option>Node.js</option>
|
|
132
|
+
</select>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="col-md-6">
|
|
136
|
+
<div class="form-group">
|
|
137
|
+
<label class="form-label">Database</label>
|
|
138
|
+
<select class="form-select">
|
|
139
|
+
<option>SQLite</option>
|
|
140
|
+
<option>PostgreSQL</option>
|
|
141
|
+
<option>MySQL</option>
|
|
142
|
+
<option>Firebird</option>
|
|
143
|
+
<option>MSSQL</option>
|
|
144
|
+
</select>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
<div class="form-group mb-3">
|
|
149
|
+
<label class="form-label">Message</label>
|
|
150
|
+
<textarea class="form-control" rows="3" placeholder="Tell us about your project..."></textarea>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="form-check mb-3">
|
|
153
|
+
<input class="form-check-input" type="checkbox" checked>
|
|
154
|
+
<label class="form-check-label">I agree to the terms</label>
|
|
155
|
+
</div>
|
|
156
|
+
<button type="button" class="btn btn-primary">Submit</button>
|
|
157
|
+
<button type="button" class="btn btn-outline-secondary ms-2">Cancel</button>
|
|
158
|
+
</form>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
<!-- Table -->
|
|
164
|
+
<div class="component-section">
|
|
165
|
+
<h3>Tables</h3>
|
|
166
|
+
<div class="table-responsive">
|
|
167
|
+
<table class="table table-striped table-hover">
|
|
168
|
+
<thead>
|
|
169
|
+
<tr>
|
|
170
|
+
<th>#</th>
|
|
171
|
+
<th>Framework</th>
|
|
172
|
+
<th>Port</th>
|
|
173
|
+
<th>Language</th>
|
|
174
|
+
<th>Status</th>
|
|
175
|
+
</tr>
|
|
176
|
+
</thead>
|
|
177
|
+
<tbody>
|
|
178
|
+
<tr><td>1</td><td>tina4-python</td><td>7145</td><td>Python 3.12+</td><td><span class="badge bg-success">Stable</span></td></tr>
|
|
179
|
+
<tr><td>2</td><td>tina4-php</td><td>7146</td><td>PHP 8.2+</td><td><span class="badge bg-success">Stable</span></td></tr>
|
|
180
|
+
<tr><td>3</td><td>tina4-ruby</td><td>7147</td><td>Ruby 3.1+</td><td><span class="badge bg-success">Stable</span></td></tr>
|
|
181
|
+
<tr><td>4</td><td>tina4-nodejs</td><td>7148</td><td>Node 20+</td><td><span class="badge bg-success">Stable</span></td></tr>
|
|
182
|
+
</tbody>
|
|
183
|
+
</table>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<!-- Breadcrumbs -->
|
|
188
|
+
<div class="component-section">
|
|
189
|
+
<h3>Breadcrumbs</h3>
|
|
190
|
+
<nav>
|
|
191
|
+
<ol class="breadcrumb">
|
|
192
|
+
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
193
|
+
<li class="breadcrumb-item"><a href="#">Gallery</a></li>
|
|
194
|
+
<li class="breadcrumb-item active">Components</li>
|
|
195
|
+
</ol>
|
|
196
|
+
</nav>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<!-- Input Groups -->
|
|
200
|
+
<div class="component-section">
|
|
201
|
+
<h3>Input Groups</h3>
|
|
202
|
+
<div class="input-group mb-3">
|
|
203
|
+
<span class="input-group-text">@</span>
|
|
204
|
+
<input type="text" class="form-control" placeholder="Username">
|
|
205
|
+
</div>
|
|
206
|
+
<div class="input-group mb-3">
|
|
207
|
+
<input type="text" class="form-control" placeholder="Search routes...">
|
|
208
|
+
<button class="btn btn-primary">Search</button>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="input-group">
|
|
211
|
+
<span class="input-group-text">https://</span>
|
|
212
|
+
<input type="text" class="form-control" placeholder="tina4.com">
|
|
213
|
+
<span class="input-group-text">/api</span>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<!-- Progress -->
|
|
218
|
+
<div class="component-section">
|
|
219
|
+
<h3>Progress Bars</h3>
|
|
220
|
+
<div class="progress mb-2"><div class="progress-bar bg-primary" style="width: 25%">25%</div></div>
|
|
221
|
+
<div class="progress mb-2"><div class="progress-bar bg-success" style="width: 50%">50%</div></div>
|
|
222
|
+
<div class="progress mb-2"><div class="progress-bar bg-warning" style="width: 75%">75%</div></div>
|
|
223
|
+
<div class="progress"><div class="progress-bar bg-danger" style="width: 100%">100%</div></div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<!-- List Group -->
|
|
227
|
+
<div class="component-section">
|
|
228
|
+
<h3>List Group</h3>
|
|
229
|
+
<div class="list-group">
|
|
230
|
+
<a href="#" class="list-group-item list-group-item-action active">Routes — 12 registered</a>
|
|
231
|
+
<a href="#" class="list-group-item list-group-item-action">Queue — 3 pending jobs</a>
|
|
232
|
+
<a href="#" class="list-group-item list-group-item-action">Database — SQLite connected</a>
|
|
233
|
+
<a href="#" class="list-group-item list-group-item-action disabled">Cache — Not configured</a>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
<!-- How this page was built -->
|
|
238
|
+
<div class="card mt-4 mb-5" style="background:#0f172a;border:1px solid #334155;">
|
|
239
|
+
<div class="card-body">
|
|
240
|
+
<h5 style="color:#e2e8f0;">How this page was built</h5>
|
|
241
|
+
<pre style="background:#1e293b;border:1px solid #334155;border-radius:0.5rem;padding:1.25rem;margin-top:0.75rem;overflow-x:auto;font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:0.9rem;line-height:1.7;"><code><span style="color:#c084fc;">Tina4::Router.get</span> <span style="color:#4ade80;">"/gallery/page"</span>, <span style="color:#38bdf8;">template:</span> <span style="color:#4ade80;">"gallery_page.twig"</span> <span style="color:#c084fc;">do</span> |request, response|
|
|
242
|
+
response.call({
|
|
243
|
+
<span style="color:#fbbf24;">title:</span> <span style="color:#4ade80;">"tina4css Component Showcase"</span>,
|
|
244
|
+
<span style="color:#fbbf24;">items:</span> [...]
|
|
245
|
+
}, Tina4::HTTP_OK)
|
|
246
|
+
<span style="color:#c084fc;">end</span></code></pre>
|
|
247
|
+
<p style="color:#94a3b8;margin-top:0.75rem;margin-bottom:0;">
|
|
248
|
+
Rendered via <code style="color:#c084fc;">template:</code> keyword. Styled with <strong style="color:#e2e8f0;">tina4css</strong> — zero external CDN.
|
|
249
|
+
All components above use only <code style="color:#4ade80;"><link href="/css/tina4.min.css"></code>.
|
|
250
|
+
</p>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
</body>
|
|
257
|
+
</html>
|