domma-js 0.5.0-alpha → 0.7.2-alpha
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/README.md +33 -30
- package/bin/domma-cli.js +144 -0
- package/package.json +10 -4
- package/public/dist/bundles/domma-complete.css +271 -22
- package/public/dist/bundles/domma-data-focused.css +271 -22
- package/public/dist/bundles/domma-essentials.css +271 -22
- package/public/dist/bundles/domma-full.css +271 -22
- package/public/dist/bundles/domma-grayve.css +271 -22
- package/public/dist/bundles/domma-minimal.css +20 -8
- package/public/dist/domma-syntax.min.js +8 -0
- package/public/dist/domma.css +15 -3
- package/public/dist/domma.esm.js +4 -4
- package/public/dist/domma.min.js +4 -4
- package/public/dist/elements.css +35 -11
- package/public/dist/grid.css +3 -3
- package/public/dist/syntax.css +3 -3
- package/public/dist/themes/domma-themes.css +216 -3
- package/templates/kickstart/about/index.html +241 -0
- package/templates/kickstart/assets/logo/placeholder.svg +6 -0
- package/templates/kickstart/blog/index.html +227 -0
- package/templates/kickstart/contact/index.html +218 -0
- package/templates/kickstart/css/custom.css +121 -0
- package/templates/kickstart/docs/index.html +310 -0
- package/templates/kickstart/domma.config.json +74 -0
- package/templates/kickstart/index.html +158 -0
- package/templates/kickstart/js/app.js +161 -0
|
@@ -0,0 +1,227 @@
|
|
|
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.0">
|
|
6
|
+
<title>Blog - {{projectName}}</title>
|
|
7
|
+
|
|
8
|
+
<!-- Domma CSS -->
|
|
9
|
+
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/domma.css">
|
|
10
|
+
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/grid.css">
|
|
11
|
+
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/elements.css">
|
|
12
|
+
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/themes/domma-themes.css">
|
|
13
|
+
|
|
14
|
+
<!-- Custom CSS -->
|
|
15
|
+
<link rel="stylesheet" href="../css/custom.css">
|
|
16
|
+
</head>
|
|
17
|
+
<body class="dm-theme-{{theme}}">
|
|
18
|
+
<!-- Navigation -->
|
|
19
|
+
<nav id="main-navbar"></nav>
|
|
20
|
+
|
|
21
|
+
<!-- Page Header -->
|
|
22
|
+
<section class="container py-6">
|
|
23
|
+
<h1 class="display-2 mb-3">Blog</h1>
|
|
24
|
+
<p class="lead text-secondary">
|
|
25
|
+
Latest updates, tutorials, and insights from our team.
|
|
26
|
+
</p>
|
|
27
|
+
</section>
|
|
28
|
+
|
|
29
|
+
<!-- Filters -->
|
|
30
|
+
<section class="container pb-4">
|
|
31
|
+
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
32
|
+
<span class="text-secondary">Filter by:</span>
|
|
33
|
+
<div class="btn-group">
|
|
34
|
+
<button class="btn btn-sm btn-primary">All</button>
|
|
35
|
+
<button class="btn btn-sm btn-outline-primary">Tutorials</button>
|
|
36
|
+
<button class="btn btn-sm btn-outline-primary">Updates</button>
|
|
37
|
+
<button class="btn btn-sm btn-outline-primary">News</button>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</section>
|
|
41
|
+
|
|
42
|
+
<!-- Blog Posts -->
|
|
43
|
+
<section class="container py-4">
|
|
44
|
+
<div class="row g-4">
|
|
45
|
+
<!-- Blog Post 1 -->
|
|
46
|
+
<div class="col-12 col-md-6 col-lg-4">
|
|
47
|
+
<article class="card h-100 hover">
|
|
48
|
+
<div class="card-body">
|
|
49
|
+
<div class="d-flex gap-2 mb-3">
|
|
50
|
+
<span class="badge badge-primary">Tutorial</span>
|
|
51
|
+
<span class="badge badge-outline">5 min read</span>
|
|
52
|
+
</div>
|
|
53
|
+
<h2 class="h5 mb-2">
|
|
54
|
+
<a href="#" class="text-decoration-none">Getting Started with Domma</a>
|
|
55
|
+
</h2>
|
|
56
|
+
<p class="text-secondary mb-3">
|
|
57
|
+
Learn the basics of Domma and build your first application in minutes.
|
|
58
|
+
</p>
|
|
59
|
+
<div class="d-flex align-items-center text-secondary text-sm">
|
|
60
|
+
<span data-icon="calendar" class="me-2"></span>
|
|
61
|
+
<time>January 15, {{year}}</time>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</article>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<!-- Blog Post 2 -->
|
|
68
|
+
<div class="col-12 col-md-6 col-lg-4">
|
|
69
|
+
<article class="card h-100 hover">
|
|
70
|
+
<div class="card-body">
|
|
71
|
+
<div class="d-flex gap-2 mb-3">
|
|
72
|
+
<span class="badge badge-success">Update</span>
|
|
73
|
+
<span class="badge badge-outline">3 min read</span>
|
|
74
|
+
</div>
|
|
75
|
+
<h2 class="h5 mb-2">
|
|
76
|
+
<a href="#" class="text-decoration-none">Version 2.0 Released</a>
|
|
77
|
+
</h2>
|
|
78
|
+
<p class="text-secondary mb-3">
|
|
79
|
+
Announcing our biggest update yet with enhanced performance and new features.
|
|
80
|
+
</p>
|
|
81
|
+
<div class="d-flex align-items-center text-secondary text-sm">
|
|
82
|
+
<span data-icon="calendar" class="me-2"></span>
|
|
83
|
+
<time>January 10, {{year}}</time>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</article>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<!-- Blog Post 3 -->
|
|
90
|
+
<div class="col-12 col-md-6 col-lg-4">
|
|
91
|
+
<article class="card h-100 hover">
|
|
92
|
+
<div class="card-body">
|
|
93
|
+
<div class="d-flex gap-2 mb-3">
|
|
94
|
+
<span class="badge badge-warning">News</span>
|
|
95
|
+
<span class="badge badge-outline">4 min read</span>
|
|
96
|
+
</div>
|
|
97
|
+
<h2 class="h5 mb-2">
|
|
98
|
+
<a href="#" class="text-decoration-none">Building Responsive Layouts</a>
|
|
99
|
+
</h2>
|
|
100
|
+
<p class="text-secondary mb-3">
|
|
101
|
+
Master the grid system and create beautiful responsive designs.
|
|
102
|
+
</p>
|
|
103
|
+
<div class="d-flex align-items-center text-secondary text-sm">
|
|
104
|
+
<span data-icon="calendar" class="me-2"></span>
|
|
105
|
+
<time>January 5, {{year}}</time>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</article>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<!-- Blog Post 4 -->
|
|
112
|
+
<div class="col-12 col-md-6 col-lg-4">
|
|
113
|
+
<article class="card h-100 hover">
|
|
114
|
+
<div class="card-body">
|
|
115
|
+
<div class="d-flex gap-2 mb-3">
|
|
116
|
+
<span class="badge badge-primary">Tutorial</span>
|
|
117
|
+
<span class="badge badge-outline">7 min read</span>
|
|
118
|
+
</div>
|
|
119
|
+
<h2 class="h5 mb-2">
|
|
120
|
+
<a href="#" class="text-decoration-none">Theme Customization Guide</a>
|
|
121
|
+
</h2>
|
|
122
|
+
<p class="text-secondary mb-3">
|
|
123
|
+
Create custom themes and override CSS variables to match your brand.
|
|
124
|
+
</p>
|
|
125
|
+
<div class="d-flex align-items-center text-secondary text-sm">
|
|
126
|
+
<span data-icon="calendar" class="me-2"></span>
|
|
127
|
+
<time>December 28, {{year}}</time>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</article>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<!-- Blog Post 5 -->
|
|
134
|
+
<div class="col-12 col-md-6 col-lg-4">
|
|
135
|
+
<article class="card h-100 hover">
|
|
136
|
+
<div class="card-body">
|
|
137
|
+
<div class="d-flex gap-2 mb-3">
|
|
138
|
+
<span class="badge badge-info">Tips</span>
|
|
139
|
+
<span class="badge badge-outline">6 min read</span>
|
|
140
|
+
</div>
|
|
141
|
+
<h2 class="h5 mb-2">
|
|
142
|
+
<a href="#" class="text-decoration-none">10 Performance Optimization Tips</a>
|
|
143
|
+
</h2>
|
|
144
|
+
<p class="text-secondary mb-3">
|
|
145
|
+
Speed up your Domma applications with these proven optimization techniques.
|
|
146
|
+
</p>
|
|
147
|
+
<div class="d-flex align-items-center text-secondary text-sm">
|
|
148
|
+
<span data-icon="calendar" class="me-2"></span>
|
|
149
|
+
<time>December 20, {{year}}</time>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</article>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<!-- Blog Post 6 -->
|
|
156
|
+
<div class="col-12 col-md-6 col-lg-4">
|
|
157
|
+
<article class="card h-100 hover">
|
|
158
|
+
<div class="card-body">
|
|
159
|
+
<div class="d-flex gap-2 mb-3">
|
|
160
|
+
<span class="badge badge-danger">Important</span>
|
|
161
|
+
<span class="badge badge-outline">2 min read</span>
|
|
162
|
+
</div>
|
|
163
|
+
<h2 class="h5 mb-2">
|
|
164
|
+
<a href="#" class="text-decoration-none">Security Best Practices</a>
|
|
165
|
+
</h2>
|
|
166
|
+
<p class="text-secondary mb-3">
|
|
167
|
+
Essential security considerations when building with Domma.
|
|
168
|
+
</p>
|
|
169
|
+
<div class="d-flex align-items-center text-secondary text-sm">
|
|
170
|
+
<span data-icon="calendar" class="me-2"></span>
|
|
171
|
+
<time>December 15, {{year}}</time>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</article>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
</section>
|
|
178
|
+
|
|
179
|
+
<!-- Pagination -->
|
|
180
|
+
<section class="container py-6">
|
|
181
|
+
<nav aria-label="Blog pagination">
|
|
182
|
+
<ul class="pagination justify-content-center">
|
|
183
|
+
<li class="page-item disabled">
|
|
184
|
+
<a class="page-link" href="#" aria-label="Previous">
|
|
185
|
+
<span data-icon="chevron-left"></span>
|
|
186
|
+
</a>
|
|
187
|
+
</li>
|
|
188
|
+
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
189
|
+
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
190
|
+
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
191
|
+
<li class="page-item">
|
|
192
|
+
<a class="page-link" href="#" aria-label="Next">
|
|
193
|
+
<span data-icon="chevron-right"></span>
|
|
194
|
+
</a>
|
|
195
|
+
</li>
|
|
196
|
+
</ul>
|
|
197
|
+
</nav>
|
|
198
|
+
</section>
|
|
199
|
+
|
|
200
|
+
<!-- Newsletter Signup -->
|
|
201
|
+
<section class="bg-surface py-6">
|
|
202
|
+
<div class="container">
|
|
203
|
+
<div class="row justify-content-center">
|
|
204
|
+
<div class="col-12 col-lg-6 text-center">
|
|
205
|
+
<h2 class="h3 mb-3">Subscribe to Our Newsletter</h2>
|
|
206
|
+
<p class="text-secondary mb-4">
|
|
207
|
+
Get the latest updates and tutorials delivered to your inbox.
|
|
208
|
+
</p>
|
|
209
|
+
<form class="d-flex gap-2">
|
|
210
|
+
<input type="email" class="form-control" placeholder="Enter your email" required>
|
|
211
|
+
<button type="submit" class="btn btn-primary">Subscribe</button>
|
|
212
|
+
</form>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</section>
|
|
217
|
+
|
|
218
|
+
<!-- Footer -->
|
|
219
|
+
<footer class="page-footer"></footer>
|
|
220
|
+
|
|
221
|
+
<!-- Domma JavaScript -->
|
|
222
|
+
<script src="../node_modules/domma-js/public/dist/domma.min.js"></script>
|
|
223
|
+
|
|
224
|
+
<!-- App Initialization -->
|
|
225
|
+
<script src="../js/app.js"></script>
|
|
226
|
+
</body>
|
|
227
|
+
</html>
|
|
@@ -0,0 +1,218 @@
|
|
|
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.0">
|
|
6
|
+
<title>Contact - {{projectName}}</title>
|
|
7
|
+
|
|
8
|
+
<!-- Domma CSS -->
|
|
9
|
+
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/domma.css">
|
|
10
|
+
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/grid.css">
|
|
11
|
+
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/elements.css">
|
|
12
|
+
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/themes/domma-themes.css">
|
|
13
|
+
|
|
14
|
+
<!-- Custom CSS -->
|
|
15
|
+
<link rel="stylesheet" href="../css/custom.css">
|
|
16
|
+
</head>
|
|
17
|
+
<body class="dm-theme-{{theme}}">
|
|
18
|
+
<!-- Navigation -->
|
|
19
|
+
<nav id="main-navbar"></nav>
|
|
20
|
+
|
|
21
|
+
<!-- Page Header -->
|
|
22
|
+
<section class="container py-6">
|
|
23
|
+
<h1 class="display-2 mb-3">Get in Touch</h1>
|
|
24
|
+
<p class="lead text-secondary">
|
|
25
|
+
Have a question? We'd love to hear from you. Send us a message and we'll respond as soon as possible.
|
|
26
|
+
</p>
|
|
27
|
+
</section>
|
|
28
|
+
|
|
29
|
+
<!-- Contact Content -->
|
|
30
|
+
<section class="container py-4">
|
|
31
|
+
<div class="row g-6">
|
|
32
|
+
<!-- Contact Form -->
|
|
33
|
+
<div class="col-12 col-lg-8">
|
|
34
|
+
<div class="card">
|
|
35
|
+
<div class="card-body">
|
|
36
|
+
<h2 class="h4 mb-4">Send us a Message</h2>
|
|
37
|
+
|
|
38
|
+
<form id="contact-form">
|
|
39
|
+
<div class="row g-4">
|
|
40
|
+
<div class="col-12 col-md-6">
|
|
41
|
+
<label for="name" class="form-label">Name *</label>
|
|
42
|
+
<input type="text" id="name" class="form-control" required>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div class="col-12 col-md-6">
|
|
46
|
+
<label for="email" class="form-label">Email *</label>
|
|
47
|
+
<input type="email" id="email" class="form-control" required>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="col-12">
|
|
51
|
+
<label for="subject" class="form-label">Subject *</label>
|
|
52
|
+
<input type="text" id="subject" class="form-control" required>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="col-12">
|
|
56
|
+
<label for="message" class="form-label">Message *</label>
|
|
57
|
+
<textarea id="message" class="form-control" rows="6" required></textarea>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div class="col-12">
|
|
61
|
+
<button type="submit" class="btn btn-primary btn-lg">
|
|
62
|
+
<span data-icon="send"></span> Send Message
|
|
63
|
+
</button>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</form>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<!-- Contact Information -->
|
|
72
|
+
<div class="col-12 col-lg-4">
|
|
73
|
+
<!-- Address Card -->
|
|
74
|
+
<div class="card mb-4">
|
|
75
|
+
<div class="card-body">
|
|
76
|
+
<h3 class="h5 mb-4">
|
|
77
|
+
<span data-icon="map-pin" class="me-2"></span> Location
|
|
78
|
+
</h3>
|
|
79
|
+
<p class="mb-2">123 Example Street</p>
|
|
80
|
+
<p class="mb-2">Suite 100</p>
|
|
81
|
+
<p class="mb-0">City, State 12345</p>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<!-- Contact Details -->
|
|
86
|
+
<div class="card mb-4">
|
|
87
|
+
<div class="card-body">
|
|
88
|
+
<h3 class="h5 mb-4">
|
|
89
|
+
<span data-icon="mail" class="me-2"></span> Contact Details
|
|
90
|
+
</h3>
|
|
91
|
+
<p class="mb-2">
|
|
92
|
+
<strong>Email:</strong><br>
|
|
93
|
+
<a href="mailto:hello@example.com">hello@example.com</a>
|
|
94
|
+
</p>
|
|
95
|
+
<p class="mb-0">
|
|
96
|
+
<strong>Phone:</strong><br>
|
|
97
|
+
<a href="tel:+1234567890">+1 (234) 567-890</a>
|
|
98
|
+
</p>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<!-- Social Links -->
|
|
103
|
+
<div class="card">
|
|
104
|
+
<div class="card-body">
|
|
105
|
+
<h3 class="h5 mb-4">
|
|
106
|
+
<span data-icon="share-2" class="me-2"></span> Follow Us
|
|
107
|
+
</h3>
|
|
108
|
+
<div class="d-flex flex-wrap gap-2">
|
|
109
|
+
<a href="#" class="btn btn-outline-primary">
|
|
110
|
+
<span data-icon="github"></span> GitHub
|
|
111
|
+
</a>
|
|
112
|
+
<a href="#" class="btn btn-outline-primary">
|
|
113
|
+
<span data-icon="twitter"></span> Twitter
|
|
114
|
+
</a>
|
|
115
|
+
<a href="#" class="btn btn-outline-primary">
|
|
116
|
+
<span data-icon="linkedin"></span> LinkedIn
|
|
117
|
+
</a>
|
|
118
|
+
<a href="#" class="btn btn-outline-primary">
|
|
119
|
+
<span data-icon="youtube"></span> YouTube
|
|
120
|
+
</a>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</section>
|
|
127
|
+
|
|
128
|
+
<!-- FAQ Section -->
|
|
129
|
+
<section class="bg-surface py-6">
|
|
130
|
+
<div class="container">
|
|
131
|
+
<h2 class="text-center mb-6">Frequently Asked Questions</h2>
|
|
132
|
+
|
|
133
|
+
<div class="row justify-content-center">
|
|
134
|
+
<div class="col-12 col-lg-8">
|
|
135
|
+
<div class="accordion" id="faq-accordion">
|
|
136
|
+
<!-- FAQ 1 -->
|
|
137
|
+
<div class="accordion-item">
|
|
138
|
+
<h3 class="accordion-header">
|
|
139
|
+
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
|
|
140
|
+
What is the response time?
|
|
141
|
+
</button>
|
|
142
|
+
</h3>
|
|
143
|
+
<div id="faq1" class="accordion-collapse collapse show">
|
|
144
|
+
<div class="accordion-body">
|
|
145
|
+
We typically respond to all enquiries within 24-48 hours during business days.
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<!-- FAQ 2 -->
|
|
151
|
+
<div class="accordion-item">
|
|
152
|
+
<h3 class="accordion-header">
|
|
153
|
+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
|
|
154
|
+
Do you offer support?
|
|
155
|
+
</button>
|
|
156
|
+
</h3>
|
|
157
|
+
<div id="faq2" class="accordion-collapse collapse">
|
|
158
|
+
<div class="accordion-body">
|
|
159
|
+
Yes! We offer community support through GitHub Issues and email support for enterprise clients.
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<!-- FAQ 3 -->
|
|
165
|
+
<div class="accordion-item">
|
|
166
|
+
<h3 class="accordion-header">
|
|
167
|
+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
|
|
168
|
+
Can I contribute to the project?
|
|
169
|
+
</button>
|
|
170
|
+
</h3>
|
|
171
|
+
<div id="faq3" class="accordion-collapse collapse">
|
|
172
|
+
<div class="accordion-body">
|
|
173
|
+
Absolutely! We welcome contributions. Check out our GitHub repository for contribution guidelines.
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</section>
|
|
182
|
+
|
|
183
|
+
<!-- Footer -->
|
|
184
|
+
<footer class="page-footer"></footer>
|
|
185
|
+
|
|
186
|
+
<!-- Domma JavaScript -->
|
|
187
|
+
<script src="../node_modules/domma-js/public/dist/domma.min.js"></script>
|
|
188
|
+
|
|
189
|
+
<!-- App Initialization -->
|
|
190
|
+
<script src="../js/app.js"></script>
|
|
191
|
+
|
|
192
|
+
<!-- Form Handling -->
|
|
193
|
+
<script>
|
|
194
|
+
document.getElementById('contact-form').addEventListener('submit', function (e) {
|
|
195
|
+
e.preventDefault();
|
|
196
|
+
|
|
197
|
+
// Get form values
|
|
198
|
+
const name = document.getElementById('name').value;
|
|
199
|
+
const email = document.getElementById('email').value;
|
|
200
|
+
const subject = document.getElementById('subject').value;
|
|
201
|
+
const message = document.getElementById('message').value;
|
|
202
|
+
|
|
203
|
+
// Show success message (in a real app, send to backend)
|
|
204
|
+
Domma.elements.toast({
|
|
205
|
+
message: 'Thank you! Your message has been sent successfully.',
|
|
206
|
+
type: 'success',
|
|
207
|
+
duration: 5000
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
// Reset form
|
|
211
|
+
this.reset();
|
|
212
|
+
});
|
|
213
|
+
|
|
214
|
+
// Initialize accordion
|
|
215
|
+
Domma.elements.accordion('#faq-accordion');
|
|
216
|
+
</script>
|
|
217
|
+
</body>
|
|
218
|
+
</html>
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom Styles for {{projectName}}
|
|
3
|
+
* ════════════════════════════════════════════════════════════════
|
|
4
|
+
*
|
|
5
|
+
* This file is loaded after all Domma CSS, allowing you to override
|
|
6
|
+
* theme variables and component styles.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/* ────────────────────────────────────────────────────────────────
|
|
10
|
+
* Theme Overrides
|
|
11
|
+
* ────────────────────────────────────────────────────────────────
|
|
12
|
+
* Override any theme variable to customize your brand colors.
|
|
13
|
+
* Full list of variables: https://github.com/dcbw-it/domma
|
|
14
|
+
*
|
|
15
|
+
* Example: Customize primary color
|
|
16
|
+
*/
|
|
17
|
+
:root {
|
|
18
|
+
/* Uncomment to override:
|
|
19
|
+
--dm-primary: #3b82f6;
|
|
20
|
+
--dm-primary-hover: #2563eb;
|
|
21
|
+
--dm-primary-text: #ffffff;
|
|
22
|
+
*/
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* ────────────────────────────────────────────────────────────────
|
|
26
|
+
* Component Overrides
|
|
27
|
+
* ────────────────────────────────────────────────────────────────
|
|
28
|
+
* Override component styles after Domma loads.
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
/* Example: Custom button styles */
|
|
32
|
+
/*
|
|
33
|
+
.btn-custom {
|
|
34
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
35
|
+
border: none;
|
|
36
|
+
color: white;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.btn-custom:hover {
|
|
40
|
+
transform: translateY(-2px);
|
|
41
|
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
42
|
+
}
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
/* ────────────────────────────────────────────────────────────────
|
|
46
|
+
* Layout Customizations
|
|
47
|
+
* ────────────────────────────────────────────────────────────────
|
|
48
|
+
*/
|
|
49
|
+
|
|
50
|
+
/* Footer styling */
|
|
51
|
+
.page-footer {
|
|
52
|
+
background-color: var(--dm-surface);
|
|
53
|
+
border-top: 1px solid var(--dm-border);
|
|
54
|
+
padding: var(--dm-space-6) 0;
|
|
55
|
+
margin-top: var(--dm-space-8);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.footer-content {
|
|
59
|
+
max-width: 1200px;
|
|
60
|
+
margin: 0 auto;
|
|
61
|
+
padding: 0 var(--dm-space-4);
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: space-between;
|
|
64
|
+
align-items: center;
|
|
65
|
+
flex-wrap: wrap;
|
|
66
|
+
gap: var(--dm-space-4);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.footer-content p {
|
|
70
|
+
margin: 0;
|
|
71
|
+
color: var(--dm-text-secondary);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.footer-nav {
|
|
75
|
+
display: flex;
|
|
76
|
+
gap: var(--dm-space-6);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.footer-nav a {
|
|
80
|
+
color: var(--dm-text-secondary);
|
|
81
|
+
text-decoration: none;
|
|
82
|
+
transition: color 0.2s ease;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.footer-nav a:hover {
|
|
86
|
+
color: var(--dm-primary);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Code copy button styling */
|
|
90
|
+
.code-copy-btn {
|
|
91
|
+
position: absolute;
|
|
92
|
+
top: var(--dm-space-2);
|
|
93
|
+
right: var(--dm-space-2);
|
|
94
|
+
opacity: 0.7;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.code-copy-btn:hover {
|
|
98
|
+
opacity: 1;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* ────────────────────────────────────────────────────────────────
|
|
102
|
+
* Responsive Adjustments
|
|
103
|
+
* ────────────────────────────────────────────────────────────────
|
|
104
|
+
*/
|
|
105
|
+
@media (max-width: 768px) {
|
|
106
|
+
.footer-content {
|
|
107
|
+
flex-direction: column;
|
|
108
|
+
text-align: center;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.footer-nav {
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
gap: var(--dm-space-2);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* ────────────────────────────────────────────────────────────────
|
|
118
|
+
* Your Custom Styles
|
|
119
|
+
* ────────────────────────────────────────────────────────────────
|
|
120
|
+
* Add your project-specific styles below this line.
|
|
121
|
+
*/
|