domma-js 0.13.3 → 0.13.5
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.
- package/package.json +1 -1
- package/templates/kickstart/frontend/pages/privacy/index.html +4 -4
- package/templates/kickstart-spa/frontend/js/views/404.js +21 -23
- package/templates/kickstart-spa/frontend/js/views/about.js +53 -227
- package/templates/kickstart-spa/frontend/js/views/contact.js +63 -197
- package/templates/kickstart-spa/frontend/js/views/home.js +46 -134
package/package.json
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
<title>Privacy Policy - {{projectName}}</title>
|
|
7
7
|
|
|
8
8
|
<!-- Domma CSS -->
|
|
9
|
-
<link rel="stylesheet" href="../../dist/domma.css">
|
|
10
|
-
<link rel="stylesheet" href="../../dist/grid.css">
|
|
11
|
-
<link rel="stylesheet" href="../../dist/elements.css">
|
|
12
|
-
<link rel="stylesheet" href="../../dist/themes/domma-themes.css">
|
|
9
|
+
<link rel="stylesheet" href="../../dist/domma/domma.css">
|
|
10
|
+
<link rel="stylesheet" href="../../dist/domma/grid.css">
|
|
11
|
+
<link rel="stylesheet" href="../../dist/domma/elements.css">
|
|
12
|
+
<link rel="stylesheet" href="../../dist/domma/themes/domma-themes.css">
|
|
13
13
|
|
|
14
14
|
<!-- Custom CSS -->
|
|
15
15
|
<link rel="stylesheet" href="../../css/custom.css">
|
|
@@ -3,33 +3,31 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const notFoundView = {
|
|
5
5
|
template: `
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<span data-icon="arrow-left" data-icon-size="20"></span>
|
|
24
|
-
Go Back
|
|
25
|
-
</button>
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
6
|
+
<div class="hero hero-center bg-dark bg-ambient-rotate-glow" style="min-height: 60vh; padding: 3rem 2rem;">
|
|
7
|
+
<div class="hero-content">
|
|
8
|
+
<span data-icon="alert-circle" data-icon-size="96" class="mb-3" style="color: var(--dm-danger);"></span>
|
|
9
|
+
<h1 class="display-1 mb-3" style="color: var(--dm-white); font-size: 6rem;">404</h1>
|
|
10
|
+
<h2 class="h3 mb-4" style="color: var(--dm-white-t90);">Page Not Found</h2>
|
|
11
|
+
<p class="lead mb-5" style="color: var(--dm-white-t75); max-width: 600px;">
|
|
12
|
+
The page you're looking for doesn't exist or has been moved.
|
|
13
|
+
</p>
|
|
14
|
+
<div class="d-flex gap-3 justify-content-center">
|
|
15
|
+
<a href="#/" class="btn btn-lg btn-primary">
|
|
16
|
+
<span data-icon="home" data-icon-size="20"></span>
|
|
17
|
+
Go Home
|
|
18
|
+
</a>
|
|
19
|
+
<button class="btn btn-lg btn-outline-light" onclick="history.back()">
|
|
20
|
+
<span data-icon="arrow-left" data-icon-size="20"></span>
|
|
21
|
+
Go Back
|
|
22
|
+
</button>
|
|
28
23
|
</div>
|
|
29
|
-
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
30
26
|
`,
|
|
31
27
|
|
|
32
28
|
onMount($container) {
|
|
29
|
+
// Scan for icons
|
|
30
|
+
Domma.icons.scan($container[0]);
|
|
33
31
|
console.log('404 view mounted');
|
|
34
32
|
}
|
|
35
33
|
};
|
|
@@ -1,245 +1,71 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* About View
|
|
3
|
-
*
|
|
3
|
+
* Information about the application
|
|
4
4
|
*/
|
|
5
5
|
export const aboutView = {
|
|
6
6
|
template: `
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</p>
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
|
-
</section>
|
|
18
|
-
|
|
19
|
-
<!-- Main Content -->
|
|
20
|
-
<section class="container py-8">
|
|
21
|
-
<div class="row g-5">
|
|
22
|
-
<!-- Mission -->
|
|
23
|
-
<div class="col-lg-6">
|
|
24
|
-
<div class="card shadow-lg h-100" style="border-left: 4px solid var(--dm-primary);">
|
|
25
|
-
<div class="card-body p-5">
|
|
26
|
-
<div class="d-flex align-items-center mb-4">
|
|
27
|
-
<span data-icon="target" data-icon-size="32" style="color: var(--dm-primary); margin-right: 1rem;"></span>
|
|
28
|
-
<h2 class="h3 mb-0">Our Mission</h2>
|
|
29
|
-
</div>
|
|
30
|
-
<p class="text-secondary mb-0" style="line-height: 1.8;">
|
|
31
|
-
We're building modern web applications with cutting-edge technology that prioritizes
|
|
32
|
-
<strong>performance</strong>, <strong>security</strong>, and <strong>developer experience</strong>.
|
|
33
|
-
Our goal is to deliver fast, reliable, and delightful applications that users love.
|
|
34
|
-
</p>
|
|
35
|
-
</div>
|
|
36
|
-
</div>
|
|
37
|
-
</div>
|
|
7
|
+
<div class="hero hero-center bg-dark bg-ambient-rotate-glow" style="min-height: 40vh; padding: 3rem 2rem;">
|
|
8
|
+
<div class="hero-content">
|
|
9
|
+
<span data-icon="info" data-icon-size="72" class="mb-3" style="color: var(--dm-white-t85);"></span>
|
|
10
|
+
<h1 class="hero-title" style="color: var(--dm-white);">About {{projectName}}</h1>
|
|
11
|
+
<p class="hero-subtitle" style="color: var(--dm-white-t85);">Built with modern technologies and Domma's powerful features</p>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
38
14
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<ul class="text-secondary mb-0" style="line-height: 1.8; list-style: none; padding: 0;">
|
|
48
|
-
<li class="mb-2">
|
|
49
|
-
<span data-icon="check" data-icon-size="18" style="color: var(--dm-success); margin-right: 0.5rem;"></span>
|
|
50
|
-
<strong>User-First</strong> — Every decision starts with the user
|
|
51
|
-
</li>
|
|
52
|
-
<li class="mb-2">
|
|
53
|
-
<span data-icon="check" data-icon-size="18" style="color: var(--dm-success); margin-right: 0.5rem;"></span>
|
|
54
|
-
<strong>Quality</strong> — No shortcuts, no compromises
|
|
55
|
-
</li>
|
|
56
|
-
<li class="mb-2">
|
|
57
|
-
<span data-icon="check" data-icon-size="18" style="color: var(--dm-success); margin-right: 0.5rem;"></span>
|
|
58
|
-
<strong>Innovation</strong> — Always pushing boundaries
|
|
59
|
-
</li>
|
|
60
|
-
<li class="mb-0">
|
|
61
|
-
<span data-icon="check" data-icon-size="18" style="color: var(--dm-success); margin-right: 0.5rem;"></span>
|
|
62
|
-
<strong>Transparency</strong> — Open and honest communication
|
|
63
|
-
</li>
|
|
64
|
-
</ul>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
15
|
+
<div class="container py-8">
|
|
16
|
+
<div class="grid grid-cols-3 gap-5 mb-6">
|
|
17
|
+
<div class="card card-hover shadow-lg">
|
|
18
|
+
<div class="card-body text-center p-5">
|
|
19
|
+
<span data-icon="arrow-right" data-icon-size="48" class="text-primary mb-3"></span>
|
|
20
|
+
<h3 class="h5">onEnter()</h3>
|
|
21
|
+
<p class="text-secondary mb-0">Pre-render hook with async support</p>
|
|
22
|
+
</div>
|
|
68
23
|
</div>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<div class="card shadow hover h-100 text-center">
|
|
83
|
-
<div class="card-body py-5">
|
|
84
|
-
<div class="mb-3">
|
|
85
|
-
<span data-icon="code" data-icon-size="48" style="color: var(--dm-primary);"></span>
|
|
86
|
-
</div>
|
|
87
|
-
<h3 class="h5 mb-2">DOM API</h3>
|
|
88
|
-
<p class="text-secondary mb-0" style="font-size: 0.9rem;">
|
|
89
|
-
jQuery-compatible DOM manipulation
|
|
90
|
-
</p>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<!-- Lodash Utilities -->
|
|
96
|
-
<div class="col-md-3">
|
|
97
|
-
<div class="card shadow hover h-100 text-center">
|
|
98
|
-
<div class="card-body py-5">
|
|
99
|
-
<div class="mb-3">
|
|
100
|
-
<span data-icon="cpu" data-icon-size="48" style="color: var(--dm-success);"></span>
|
|
101
|
-
</div>
|
|
102
|
-
<h3 class="h5 mb-2">Utilities</h3>
|
|
103
|
-
<p class="text-secondary mb-0" style="font-size: 0.9rem;">
|
|
104
|
-
120+ Lodash-style functions
|
|
105
|
-
</p>
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
|
-
<!-- Reactive Models -->
|
|
111
|
-
<div class="col-md-3">
|
|
112
|
-
<div class="card shadow hover h-100 text-center">
|
|
113
|
-
<div class="card-body py-5">
|
|
114
|
-
<div class="mb-3">
|
|
115
|
-
<span data-icon="database" data-icon-size="48" style="color: var(--dm-warning);"></span>
|
|
116
|
-
</div>
|
|
117
|
-
<h3 class="h5 mb-2">Models</h3>
|
|
118
|
-
<p class="text-secondary mb-0" style="font-size: 0.9rem;">
|
|
119
|
-
Reactive data with pub/sub
|
|
120
|
-
</p>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
|
|
125
|
-
<!-- Router -->
|
|
126
|
-
<div class="col-md-3">
|
|
127
|
-
<div class="card shadow hover h-100 text-center">
|
|
128
|
-
<div class="card-body py-5">
|
|
129
|
-
<div class="mb-3">
|
|
130
|
-
<span data-icon="globe" data-icon-size="48" style="color: var(--dm-info);"></span>
|
|
131
|
-
</div>
|
|
132
|
-
<h3 class="h5 mb-2">Router</h3>
|
|
133
|
-
<p class="text-secondary mb-0" style="font-size: 0.9rem;">
|
|
134
|
-
Hash-based SPA routing
|
|
135
|
-
</p>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
</div>
|
|
139
|
-
|
|
140
|
-
<!-- UI Components -->
|
|
141
|
-
<div class="col-md-3">
|
|
142
|
-
<div class="card shadow hover h-100 text-center">
|
|
143
|
-
<div class="card-body py-5">
|
|
144
|
-
<div class="mb-3">
|
|
145
|
-
<span data-icon="box" data-icon-size="48" style="color: var(--dm-danger);"></span>
|
|
146
|
-
</div>
|
|
147
|
-
<h3 class="h5 mb-2">Elements</h3>
|
|
148
|
-
<p class="text-secondary mb-0" style="font-size: 0.9rem;">
|
|
149
|
-
22+ UI components
|
|
150
|
-
</p>
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
</div>
|
|
154
|
-
|
|
155
|
-
<!-- Forms -->
|
|
156
|
-
<div class="col-md-3">
|
|
157
|
-
<div class="card shadow hover h-100 text-center">
|
|
158
|
-
<div class="card-body py-5">
|
|
159
|
-
<div class="mb-3">
|
|
160
|
-
<span data-icon="edit" data-icon-size="48" style="color: var(--dm-purple);"></span>
|
|
161
|
-
</div>
|
|
162
|
-
<h3 class="h5 mb-2">Forms</h3>
|
|
163
|
-
<p class="text-secondary mb-0" style="font-size: 0.9rem;">
|
|
164
|
-
Blueprint-driven forms
|
|
165
|
-
</p>
|
|
166
|
-
</div>
|
|
167
|
-
</div>
|
|
168
|
-
</div>
|
|
169
|
-
|
|
170
|
-
<!-- Tables -->
|
|
171
|
-
<div class="col-md-3">
|
|
172
|
-
<div class="card shadow hover h-100 text-center">
|
|
173
|
-
<div class="card-body py-5">
|
|
174
|
-
<div class="mb-3">
|
|
175
|
-
<span data-icon="grid" data-icon-size="48" style="color: var(--dm-teal);"></span>
|
|
176
|
-
</div>
|
|
177
|
-
<h3 class="h5 mb-2">Tables</h3>
|
|
178
|
-
<p class="text-secondary mb-0" style="font-size: 0.9rem;">
|
|
179
|
-
DataTable functionality
|
|
180
|
-
</p>
|
|
181
|
-
</div>
|
|
182
|
-
</div>
|
|
183
|
-
</div>
|
|
184
|
-
|
|
185
|
-
<!-- Icons -->
|
|
186
|
-
<div class="col-md-3">
|
|
187
|
-
<div class="card shadow hover h-100 text-center">
|
|
188
|
-
<div class="card-body py-5">
|
|
189
|
-
<div class="mb-3">
|
|
190
|
-
<span data-icon="star" data-icon-size="48" style="color: var(--dm-amber);"></span>
|
|
191
|
-
</div>
|
|
192
|
-
<h3 class="h5 mb-2">Icons</h3>
|
|
193
|
-
<p class="text-secondary mb-0" style="font-size: 0.9rem;">
|
|
194
|
-
200+ SVG icons
|
|
195
|
-
</p>
|
|
196
|
-
</div>
|
|
197
|
-
</div>
|
|
198
|
-
</div>
|
|
199
|
-
</div>
|
|
24
|
+
<div class="card card-hover shadow-lg">
|
|
25
|
+
<div class="card-body text-center p-5">
|
|
26
|
+
<span data-icon="check-circle" data-icon-size="48" class="text-success mb-3"></span>
|
|
27
|
+
<h3 class="h5">onMount()</h3>
|
|
28
|
+
<p class="text-secondary mb-0">Post-render, initialize components</p>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="card card-hover shadow-lg">
|
|
32
|
+
<div class="card-body text-center p-5">
|
|
33
|
+
<span data-icon="x-circle" data-icon-size="48" class="text-danger mb-3"></span>
|
|
34
|
+
<h3 class="h5">onLeave()</h3>
|
|
35
|
+
<p class="text-secondary mb-0">Cleanup before unmounting</p>
|
|
36
|
+
</div>
|
|
200
37
|
</div>
|
|
201
|
-
|
|
38
|
+
</div>
|
|
202
39
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
<
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
<h2 class="h2 mb-3">Get Involved</h2>
|
|
211
|
-
<p class="lead mb-4" style="max-width: 600px; margin-left: auto; margin-right: auto; opacity: 0.95;">
|
|
212
|
-
We'd love to hear from you! Whether you have questions, feedback, or want to collaborate,
|
|
213
|
-
we're here to help.
|
|
214
|
-
</p>
|
|
215
|
-
<a href="#/contact" class="btn btn-lg btn-light">
|
|
216
|
-
<span data-icon="mail" data-icon-size="20"></span>
|
|
217
|
-
Contact Us
|
|
218
|
-
</a>
|
|
219
|
-
</div>
|
|
40
|
+
<div class="grid grid-cols-3 gap-5">
|
|
41
|
+
<div class="card card-hover shadow-lg">
|
|
42
|
+
<div class="card-body text-center p-5">
|
|
43
|
+
<span data-icon="settings" data-icon-size="48" class="text-info mb-3"></span>
|
|
44
|
+
<h3 class="h5">Route Params</h3>
|
|
45
|
+
<p class="text-secondary mb-0"><code>/user/:id</code> → params.id</p>
|
|
46
|
+
</div>
|
|
220
47
|
</div>
|
|
221
|
-
|
|
48
|
+
<div class="card card-hover shadow-lg">
|
|
49
|
+
<div class="card-body text-center p-5">
|
|
50
|
+
<span data-icon="layers" data-icon-size="48" class="text-warning mb-3"></span>
|
|
51
|
+
<h3 class="h5">Middleware</h3>
|
|
52
|
+
<p class="text-secondary mb-0">Auth guards, logging, validation</p>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="card card-hover shadow-lg">
|
|
56
|
+
<div class="card-body text-center p-5">
|
|
57
|
+
<span data-icon="zap" data-icon-size="48" class="text-success mb-3"></span>
|
|
58
|
+
<h3 class="h5">Pub/Sub Events</h3>
|
|
59
|
+
<p class="text-secondary mb-0">router:beforeChange, afterChange</p>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
222
64
|
`,
|
|
223
65
|
|
|
224
66
|
onMount($container) {
|
|
225
67
|
// Scan for icons
|
|
226
68
|
Domma.icons.scan($container[0]);
|
|
227
|
-
|
|
228
|
-
// Add subtle animations to cards
|
|
229
|
-
$container.find('.card.hover').each(function(index) {
|
|
230
|
-
const $card = $(this);
|
|
231
|
-
setTimeout(() => {
|
|
232
|
-
$card.css({
|
|
233
|
-
opacity: '0',
|
|
234
|
-
transform: 'translateY(20px)'
|
|
235
|
-
}).animate({
|
|
236
|
-
opacity: 1
|
|
237
|
-
}, 400, () => {
|
|
238
|
-
$card.css('transform', 'translateY(0)');
|
|
239
|
-
});
|
|
240
|
-
}, index * 50);
|
|
241
|
-
});
|
|
242
|
-
|
|
243
69
|
console.log('About view mounted');
|
|
244
70
|
}
|
|
245
71
|
};
|
|
@@ -1,237 +1,103 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Contact View
|
|
3
|
-
*
|
|
3
|
+
* Contact form using Domma Forms with blueprints
|
|
4
4
|
*/
|
|
5
5
|
export const contactView = {
|
|
6
6
|
template: `
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
7
|
+
<div class="hero hero-center bg-dark bg-ambient-rotate-glow" style="min-height: 40vh; padding: 3rem 2rem;">
|
|
8
|
+
<div class="hero-content">
|
|
9
|
+
<span data-icon="mail" data-icon-size="72" class="mb-3" style="color: var(--dm-white-t85);"></span>
|
|
10
|
+
<h1 class="hero-title" style="color: var(--dm-white);">Contact Us</h1>
|
|
11
|
+
<p class="hero-subtitle" style="color: var(--dm-white-t85);">Blueprint-driven forms with validation</p>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div class="container py-8">
|
|
16
|
+
<div class="row g-5 mb-6">
|
|
17
|
+
<div class="col-lg-8 mx-auto">
|
|
18
|
+
<div class="card shadow-lg">
|
|
19
|
+
<div class="card-body p-4">
|
|
20
|
+
<h3 class="h5 mb-4">Send us a Message</h3>
|
|
21
|
+
<div id="contact-form"></div>
|
|
18
22
|
</div>
|
|
23
|
+
</div>
|
|
19
24
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<h2 class="h3 mb-4">Send us a Message</h2>
|
|
30
|
-
<div id="contact-form"></div>
|
|
31
|
-
</div>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
|
|
35
|
-
<!-- Contact Information -->
|
|
36
|
-
<div class="col-lg-5">
|
|
37
|
-
<!-- Why Contact Card -->
|
|
38
|
-
<div class="card shadow-lg mb-4" style="border-left: 4px solid var(--dm-primary);">
|
|
39
|
-
<div class="card-body p-4">
|
|
40
|
-
<h3 class="h5 mb-3">
|
|
41
|
-
<span data-icon="message-circle" data-icon-size="24" style="color: var(--dm-primary); margin-right: 0.5rem;"></span>
|
|
42
|
-
Why Reach Out?
|
|
43
|
-
</h3>
|
|
44
|
-
<ul class="text-secondary" style="line-height: 2; list-style: none; padding: 0; margin: 0;">
|
|
45
|
-
<li>
|
|
46
|
-
<span data-icon="check" data-icon-size="18" style="color: var(--dm-success); margin-right: 0.5rem;"></span>
|
|
47
|
-
General inquiries
|
|
48
|
-
</li>
|
|
49
|
-
<li>
|
|
50
|
-
<span data-icon="check" data-icon-size="18" style="color: var(--dm-success); margin-right: 0.5rem;"></span>
|
|
51
|
-
Technical support
|
|
52
|
-
</li>
|
|
53
|
-
<li>
|
|
54
|
-
<span data-icon="check" data-icon-size="18" style="color: var(--dm-success); margin-right: 0.5rem;"></span>
|
|
55
|
-
Partnership opportunities
|
|
56
|
-
</li>
|
|
57
|
-
<li>
|
|
58
|
-
<span data-icon="check" data-icon-size="18" style="color: var(--dm-success); margin-right: 0.5rem;"></span>
|
|
59
|
-
Feedback & suggestions
|
|
60
|
-
</li>
|
|
61
|
-
</ul>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
<!-- Contact Methods -->
|
|
66
|
-
<div class="card shadow-lg">
|
|
67
|
-
<div class="card-body p-4">
|
|
68
|
-
<h3 class="h5 mb-4">Other Ways to Connect</h3>
|
|
69
|
-
|
|
70
|
-
<div class="d-flex align-items-start mb-3">
|
|
71
|
-
<span data-icon="mail" data-icon-size="24" style="color: var(--dm-primary); margin-right: 1rem; margin-top: 0.25rem;"></span>
|
|
72
|
-
<div>
|
|
73
|
-
<div class="fw-bold mb-1">Email</div>
|
|
74
|
-
<a href="mailto:hello@example.com" class="text-secondary text-decoration-none">
|
|
75
|
-
hello@example.com
|
|
76
|
-
</a>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
|
|
80
|
-
<div class="d-flex align-items-start mb-3">
|
|
81
|
-
<span data-icon="phone" data-icon-size="24" style="color: var(--dm-success); margin-right: 1rem; margin-top: 0.25rem;"></span>
|
|
82
|
-
<div>
|
|
83
|
-
<div class="fw-bold mb-1">Phone</div>
|
|
84
|
-
<a href="tel:+15551234567" class="text-secondary text-decoration-none">
|
|
85
|
-
+1 (555) 123-4567
|
|
86
|
-
</a>
|
|
87
|
-
</div>
|
|
88
|
-
</div>
|
|
89
|
-
|
|
90
|
-
<div class="d-flex align-items-start">
|
|
91
|
-
<span data-icon="map-pin" data-icon-size="24" style="color: var(--dm-info); margin-right: 1rem; margin-top: 0.25rem;"></span>
|
|
92
|
-
<div>
|
|
93
|
-
<div class="fw-bold mb-1">Location</div>
|
|
94
|
-
<div class="text-secondary">
|
|
95
|
-
123 Main Street<br>
|
|
96
|
-
Suite 100<br>
|
|
97
|
-
City, State 12345
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<div class="grid grid-cols-3 gap-5">
|
|
28
|
+
<div class="card card-hover shadow-lg">
|
|
29
|
+
<div class="card-body text-center p-5">
|
|
30
|
+
<span data-icon="database" data-icon-size="48" class="text-primary mb-3"></span>
|
|
31
|
+
<h3 class="h5">Blueprint Forms</h3>
|
|
32
|
+
<p class="text-secondary mb-0">Auto-generated from schema</p>
|
|
33
|
+
</div>
|
|
104
34
|
</div>
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
<div class="col-md-4 mb-3 mb-md-0">
|
|
112
|
-
<span data-icon="clock" data-icon-size="48" style="color: var(--dm-primary);"></span>
|
|
113
|
-
<div class="mt-2">
|
|
114
|
-
<div class="fw-bold">Quick Response</div>
|
|
115
|
-
<div class="text-secondary small">Within 24 hours</div>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
<div class="col-md-4 mb-3 mb-md-0">
|
|
119
|
-
<span data-icon="shield" data-icon-size="48" style="color: var(--dm-success);"></span>
|
|
120
|
-
<div class="mt-2">
|
|
121
|
-
<div class="fw-bold">Privacy Focused</div>
|
|
122
|
-
<div class="text-secondary small">Your data is secure</div>
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
125
|
-
<div class="col-md-4">
|
|
126
|
-
<span data-icon="users" data-icon-size="48" style="color: var(--dm-info);"></span>
|
|
127
|
-
<div class="mt-2">
|
|
128
|
-
<div class="fw-bold">Expert Team</div>
|
|
129
|
-
<div class="text-secondary small">Here to help you</div>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
35
|
+
<div class="card card-hover shadow-lg">
|
|
36
|
+
<div class="card-body text-center p-5">
|
|
37
|
+
<span data-icon="check" data-icon-size="48" class="text-success mb-3"></span>
|
|
38
|
+
<h3 class="h5">Built-in Validation</h3>
|
|
39
|
+
<p class="text-secondary mb-0">Required, patterns, custom rules</p>
|
|
40
|
+
</div>
|
|
133
41
|
</div>
|
|
134
|
-
|
|
42
|
+
<div class="card card-hover shadow-lg">
|
|
43
|
+
<div class="card-body text-center p-5">
|
|
44
|
+
<span data-icon="zap" data-icon-size="48" class="text-warning mb-3"></span>
|
|
45
|
+
<h3 class="h5">Model Binding</h3>
|
|
46
|
+
<p class="text-secondary mb-0">Reactive two-way data binding</p>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
135
51
|
`,
|
|
136
52
|
|
|
137
53
|
onMount($container) {
|
|
138
54
|
// Scan for icons
|
|
139
55
|
Domma.icons.scan($container[0]);
|
|
140
56
|
|
|
141
|
-
// Define contact form
|
|
57
|
+
// Define Blueprint for contact form
|
|
142
58
|
const contactBlueprint = {
|
|
143
59
|
name: {
|
|
144
|
-
type:
|
|
145
|
-
label: '
|
|
146
|
-
placeholder: 'Enter your full name',
|
|
60
|
+
type: M.types.string,
|
|
61
|
+
label: 'Name',
|
|
147
62
|
required: true,
|
|
148
63
|
minLength: 2,
|
|
149
|
-
|
|
64
|
+
placeholder: 'John Doe'
|
|
150
65
|
},
|
|
151
66
|
email: {
|
|
152
|
-
type:
|
|
153
|
-
label: 'Email
|
|
154
|
-
|
|
155
|
-
|
|
67
|
+
type: M.types.string,
|
|
68
|
+
label: 'Email',
|
|
69
|
+
required: true,
|
|
70
|
+
pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
|
|
71
|
+
placeholder: 'john@example.com'
|
|
156
72
|
},
|
|
157
73
|
subject: {
|
|
158
|
-
type:
|
|
74
|
+
type: M.types.string,
|
|
159
75
|
label: 'Subject',
|
|
160
|
-
|
|
161
|
-
options: [
|
|
162
|
-
{ value: '', label: 'Select a subject...' },
|
|
163
|
-
{ value: 'general', label: 'General Inquiry' },
|
|
164
|
-
{ value: 'support', label: 'Technical Support' },
|
|
165
|
-
{ value: 'partnership', label: 'Partnership' },
|
|
166
|
-
{ value: 'feedback', label: 'Feedback' },
|
|
167
|
-
{ value: 'other', label: 'Other' }
|
|
168
|
-
]
|
|
76
|
+
placeholder: "What's this about?"
|
|
169
77
|
},
|
|
170
78
|
message: {
|
|
171
|
-
type:
|
|
79
|
+
type: M.types.string,
|
|
172
80
|
label: 'Message',
|
|
173
|
-
|
|
81
|
+
inputType: 'textarea',
|
|
174
82
|
required: true,
|
|
175
83
|
minLength: 10,
|
|
176
|
-
|
|
177
|
-
rows: 6
|
|
178
|
-
},
|
|
179
|
-
newsletter: {
|
|
180
|
-
type: 'checkbox',
|
|
181
|
-
label: 'Subscribe to our newsletter for updates and news'
|
|
84
|
+
placeholder: 'Your message here...'
|
|
182
85
|
}
|
|
183
86
|
};
|
|
184
87
|
|
|
185
88
|
// Create form using Domma Forms
|
|
186
|
-
const form = Domma.forms.
|
|
187
|
-
|
|
89
|
+
const form = Domma.forms.create('#contact-form', {
|
|
90
|
+
blueprint: contactBlueprint,
|
|
91
|
+
layout: 'grid',
|
|
188
92
|
submitText: 'Send Message',
|
|
189
93
|
submitIcon: 'send',
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
// Show loading state
|
|
196
|
-
const submitBtn = $container.find('button[type="submit"]');
|
|
197
|
-
submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Sending...');
|
|
198
|
-
|
|
199
|
-
// Simulate API call
|
|
200
|
-
await new Promise(resolve => setTimeout(resolve, 1500));
|
|
201
|
-
|
|
202
|
-
// Show success message
|
|
203
|
-
Domma.elements.toast('Message sent successfully! We\'ll get back to you soon.', {
|
|
204
|
-
type: 'success',
|
|
205
|
-
duration: 5000
|
|
94
|
+
onSubmit: (data) => {
|
|
95
|
+
console.log('Form data:', data);
|
|
96
|
+
Domma.elements.toast.success('Message sent! (Demo only)', {
|
|
97
|
+
position: 'top-center',
|
|
98
|
+
duration: 3000
|
|
206
99
|
});
|
|
207
|
-
|
|
208
|
-
// Reset form
|
|
209
100
|
form.reset();
|
|
210
|
-
|
|
211
|
-
// Re-enable button
|
|
212
|
-
submitBtn.prop('disabled', false).html('<span data-icon="send" data-icon-size="20"></span> Send Message');
|
|
213
|
-
Domma.icons.scan(submitBtn[0]);
|
|
214
|
-
|
|
215
|
-
return true;
|
|
216
|
-
},
|
|
217
|
-
onValidationError: (errors) => {
|
|
218
|
-
console.log('Validation errors:', errors);
|
|
219
|
-
Domma.elements.toast('Please fix the errors in the form', {
|
|
220
|
-
type: 'error'
|
|
221
|
-
});
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
|
|
225
|
-
// Add custom styling to form elements
|
|
226
|
-
$container.find('.form-control, .form-select').css({
|
|
227
|
-
'border-radius': '0.5rem',
|
|
228
|
-
'border': '2px solid var(--dm-gray-300)',
|
|
229
|
-
'padding': '0.75rem 1rem'
|
|
230
|
-
}).on('focus', function() {
|
|
231
|
-
$(this).css('border-color', 'var(--dm-primary)');
|
|
232
|
-
}).on('blur', function() {
|
|
233
|
-
if (!$(this).hasClass('is-invalid')) {
|
|
234
|
-
$(this).css('border-color', 'var(--dm-gray-300)');
|
|
235
101
|
}
|
|
236
102
|
});
|
|
237
103
|
|
|
@@ -1,152 +1,64 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Home View
|
|
3
|
-
*
|
|
3
|
+
* Welcome page showcasing Domma features
|
|
4
4
|
*/
|
|
5
5
|
export const homeView = {
|
|
6
6
|
template: `
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<path d="M36 32 L24 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
20
|
-
<circle cx="24" cy="24" r="3" fill="currentColor"/>
|
|
21
|
-
</svg>
|
|
22
|
-
<h1 class="display-1" style="margin: 0; font-size: 4rem; font-weight: 800; letter-spacing: -0.05em; background: linear-gradient(135deg, var(--dm-white-t90) 0%, var(--dm-white-t70) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
|
|
23
|
-
{{projectName}}
|
|
24
|
-
</h1>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<!-- Tagline -->
|
|
28
|
-
<p class="lead mb-4" style="font-size: 1.25rem; opacity: 0.9; max-width: 700px; margin: 0 auto 2rem;">
|
|
29
|
-
Powered by <strong>Domma</strong> — a lightweight, zero-dependency JavaScript framework combining jQuery-style DOM manipulation, Lodash utilities, and 22+ modern UI components
|
|
30
|
-
</p>
|
|
31
|
-
|
|
32
|
-
<!-- CTA Buttons -->
|
|
33
|
-
<div class="hero-actions mb-6">
|
|
34
|
-
<a href="#/about" class="btn btn-lg btn-primary" style="min-width: 160px;">
|
|
35
|
-
<span data-icon="info" data-icon-size="20"></span>
|
|
36
|
-
Learn More
|
|
37
|
-
</a>
|
|
38
|
-
<a href="#/contact" class="btn btn-lg btn-outline-light" style="min-width: 160px;">
|
|
39
|
-
<span data-icon="mail" data-icon-size="20"></span>
|
|
40
|
-
Get in Touch
|
|
41
|
-
</a>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
<!-- Feature Pills -->
|
|
45
|
-
<div style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 3rem;">
|
|
46
|
-
<div class="badge badge-lg" style="background: var(--dm-white-t10); border: 1px solid var(--dm-white-t20); padding: 0.75rem 1.5rem; font-size: 0.9rem;">
|
|
47
|
-
<span data-icon="zap" data-icon-size="16" style="color: var(--dm-warning);"></span>
|
|
48
|
-
Lightning Fast
|
|
49
|
-
</div>
|
|
50
|
-
<div class="badge badge-lg" style="background: var(--dm-white-t10); border: 1px solid var(--dm-white-t20); padding: 0.75rem 1.5rem; font-size: 0.9rem;">
|
|
51
|
-
<span data-icon="shield" data-icon-size="16" style="color: var(--dm-success);"></span>
|
|
52
|
-
Secure by Default
|
|
53
|
-
</div>
|
|
54
|
-
<div class="badge badge-lg" style="background: var(--dm-white-t10); border: 1px solid var(--dm-white-t20); padding: 0.75rem 1.5rem; font-size: 0.9rem;">
|
|
55
|
-
<span data-icon="layers" data-icon-size="16" style="color: var(--dm-info);"></span>
|
|
56
|
-
Zero Dependencies
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
7
|
+
<div class="hero hero-center bg-dark bg-ambient-rotate-glow" style="min-height: 40vh; padding: 3rem 2rem;">
|
|
8
|
+
<div class="hero-content">
|
|
9
|
+
<div class="mb-4">
|
|
10
|
+
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 72px; height: 72px; color: var(--dm-white-t85);">
|
|
11
|
+
<path d="M12 8 L12 40" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
|
|
12
|
+
<path d="M12 8 L24 8" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
|
|
13
|
+
<path d="M12 40 L24 40" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
|
|
14
|
+
<path d="M24 8 L36 16" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
15
|
+
<path d="M36 16 L36 32" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
|
|
16
|
+
<path d="M36 32 L24 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
17
|
+
<circle cx="24" cy="24" r="3" fill="currentColor"/>
|
|
18
|
+
</svg>
|
|
60
19
|
</div>
|
|
61
|
-
|
|
20
|
+
<h1 class="hero-title" style="color: var(--dm-white);">{{projectName}}</h1>
|
|
21
|
+
<p class="hero-subtitle" style="color: var(--dm-white-t85);">Welcome to your SPA. Built with Domma's powerful router and zero dependencies.</p>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
62
24
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<div class="
|
|
66
|
-
|
|
67
|
-
<
|
|
25
|
+
<div class="container py-8">
|
|
26
|
+
<div class="grid grid-cols-4 gap-5">
|
|
27
|
+
<div class="card card-hover shadow-lg">
|
|
28
|
+
<div class="card-body text-center p-5">
|
|
29
|
+
<span data-icon="zap" data-icon-size="48" class="text-warning mb-3"></span>
|
|
30
|
+
<h3 class="h5">Instant Navigation</h3>
|
|
31
|
+
<p class="text-secondary mb-0">Zero page reloads, instant transitions</p>
|
|
32
|
+
</div>
|
|
68
33
|
</div>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<span data-icon="code" data-icon-size="56" style="color: var(--dm-primary);"></span>
|
|
76
|
-
</div>
|
|
77
|
-
<h3 class="h4 mb-3">jQuery-Compatible API</h3>
|
|
78
|
-
<p class="text-secondary">
|
|
79
|
-
90+ familiar methods for DOM manipulation, traversal, events, and effects.
|
|
80
|
-
If you know jQuery, you know Domma.
|
|
81
|
-
</p>
|
|
82
|
-
</div>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
|
|
86
|
-
<div class="col-md-4">
|
|
87
|
-
<div class="card shadow-lg hover h-100" style="border: 2px solid transparent; transition: all 0.3s ease;">
|
|
88
|
-
<div class="card-body text-center py-5">
|
|
89
|
-
<div class="mb-4">
|
|
90
|
-
<span data-icon="cpu" data-icon-size="56" style="color: var(--dm-success);"></span>
|
|
91
|
-
</div>
|
|
92
|
-
<h3 class="h4 mb-3">Lodash Utilities</h3>
|
|
93
|
-
<p class="text-secondary">
|
|
94
|
-
120+ utility functions for arrays, objects, functions, and more.
|
|
95
|
-
Powerful data manipulation at your fingertips.
|
|
96
|
-
</p>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
<div class="col-md-4">
|
|
102
|
-
<div class="card shadow-lg hover h-100" style="border: 2px solid transparent; transition: all 0.3s ease;">
|
|
103
|
-
<div class="card-body text-center py-5">
|
|
104
|
-
<div class="mb-4">
|
|
105
|
-
<span data-icon="box" data-icon-size="56" style="color: var(--dm-info);"></span>
|
|
106
|
-
</div>
|
|
107
|
-
<h3 class="h4 mb-3">22+ UI Components</h3>
|
|
108
|
-
<p class="text-secondary">
|
|
109
|
-
Modals, tabs, carousels, tooltips, forms, tables, and more.
|
|
110
|
-
Beautiful components ready out of the box.
|
|
111
|
-
</p>
|
|
112
|
-
</div>
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
34
|
+
<div class="card card-hover shadow-lg">
|
|
35
|
+
<div class="card-body text-center p-5">
|
|
36
|
+
<span data-icon="database" data-icon-size="48" class="text-success mb-3"></span>
|
|
37
|
+
<h3 class="h5">Shared State</h3>
|
|
38
|
+
<p class="text-secondary mb-0">Data persists across views</p>
|
|
39
|
+
</div>
|
|
115
40
|
</div>
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
</a>
|
|
130
|
-
<a href="#/contact" class="btn btn-lg btn-outline-primary">
|
|
131
|
-
Contact Us
|
|
132
|
-
</a>
|
|
133
|
-
</div>
|
|
134
|
-
</div>
|
|
41
|
+
<div class="card card-hover shadow-lg">
|
|
42
|
+
<div class="card-body text-center p-5">
|
|
43
|
+
<span data-icon="settings" data-icon-size="48" class="text-info mb-3"></span>
|
|
44
|
+
<h3 class="h5">Lifecycle Hooks</h3>
|
|
45
|
+
<p class="text-secondary mb-0">Full control with onMount/onLeave</p>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="card card-hover shadow-lg">
|
|
49
|
+
<div class="card-body text-center p-5">
|
|
50
|
+
<span data-icon="code" data-icon-size="48" class="text-primary mb-3"></span>
|
|
51
|
+
<h3 class="h5">Simple API</h3>
|
|
52
|
+
<p class="text-secondary mb-0">Define views with templates</p>
|
|
53
|
+
</div>
|
|
135
54
|
</div>
|
|
136
|
-
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
137
57
|
`,
|
|
138
58
|
|
|
139
59
|
onMount($container) {
|
|
140
60
|
// Scan for icons in the newly mounted view
|
|
141
61
|
Domma.icons.scan($container[0]);
|
|
142
|
-
|
|
143
|
-
// Add hover effects to feature cards
|
|
144
|
-
$container.find('.card.hover').on('mouseenter', function() {
|
|
145
|
-
$(this).css('border-color', 'var(--dm-primary)');
|
|
146
|
-
}).on('mouseleave', function() {
|
|
147
|
-
$(this).css('border-color', 'transparent');
|
|
148
|
-
});
|
|
149
|
-
|
|
150
62
|
console.log('Home view mounted');
|
|
151
63
|
}
|
|
152
64
|
};
|