@whykusanagi/corrupted-theme 0.1.0
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/CHANGELOG.md +339 -0
- package/Dockerfile +32 -0
- package/LICENSE +21 -0
- package/README.md +399 -0
- package/docker-entrypoint.sh +48 -0
- package/docs/COMPONENTS_REFERENCE.md +659 -0
- package/examples/.env.example +100 -0
- package/examples/button.html +436 -0
- package/examples/card.html +678 -0
- package/examples/form.html +555 -0
- package/examples/index.html +520 -0
- package/examples/layout.html +507 -0
- package/examples/nikke-team-builder.html +580 -0
- package/examples/showcase-complete.html +1071 -0
- package/examples/showcase.html +502 -0
- package/package.json +70 -0
- package/scripts/celeste-proxy-server.js +99 -0
- package/scripts/static-server.js +113 -0
- package/src/css/animations.css +649 -0
- package/src/css/components.css +1441 -0
- package/src/css/glassmorphism.css +217 -0
- package/src/css/nikke-utilities.css +530 -0
- package/src/css/theme.css +478 -0
- package/src/css/typography.css +198 -0
- package/src/css/utilities.css +239 -0
- package/src/css/variables.css +73 -0
- package/src/lib/celeste-proxy.js +215 -0
- package/src/lib/celeste-widget.js +1089 -0
- package/src/lib/corrupted-text.js +193 -0
- package/src/lib/corruption-loading.js +405 -0
|
@@ -0,0 +1,555 @@
|
|
|
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>Form Components - Corrupted Theme</title>
|
|
7
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../src/css/theme.css">
|
|
9
|
+
<style>
|
|
10
|
+
.container {
|
|
11
|
+
max-width: 900px;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
padding: var(--spacing-lg);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.form-section {
|
|
17
|
+
margin-bottom: var(--spacing-2xl);
|
|
18
|
+
background: var(--glass);
|
|
19
|
+
border: 1px solid var(--border);
|
|
20
|
+
border-radius: var(--radius-lg);
|
|
21
|
+
padding: var(--spacing-lg);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.form-section h3 {
|
|
25
|
+
color: var(--accent);
|
|
26
|
+
margin-bottom: var(--spacing-lg);
|
|
27
|
+
font-size: 1.25rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.form-example {
|
|
31
|
+
margin-bottom: var(--spacing-lg);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.form-group {
|
|
35
|
+
margin-bottom: var(--spacing-lg);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.form-group label {
|
|
39
|
+
display: block;
|
|
40
|
+
margin-bottom: var(--spacing-sm);
|
|
41
|
+
color: var(--text);
|
|
42
|
+
font-weight: 500;
|
|
43
|
+
font-size: 0.95rem;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.form-group input,
|
|
47
|
+
.form-group textarea,
|
|
48
|
+
.form-group select {
|
|
49
|
+
width: 100%;
|
|
50
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
51
|
+
background: var(--bg-secondary);
|
|
52
|
+
border: 1px solid var(--border);
|
|
53
|
+
border-radius: var(--radius-md);
|
|
54
|
+
color: var(--text);
|
|
55
|
+
font-family: inherit;
|
|
56
|
+
transition: all var(--transition-normal);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.form-group input:focus,
|
|
60
|
+
.form-group textarea:focus,
|
|
61
|
+
.form-group select:focus {
|
|
62
|
+
outline: none;
|
|
63
|
+
border-color: var(--accent);
|
|
64
|
+
box-shadow: 0 0 0 3px rgba(217, 79, 144, 0.1);
|
|
65
|
+
background: var(--bg);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.form-group textarea {
|
|
69
|
+
resize: vertical;
|
|
70
|
+
min-height: 120px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.form-inline {
|
|
74
|
+
display: grid;
|
|
75
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
76
|
+
gap: var(--spacing-md);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.checkbox-group,
|
|
80
|
+
.radio-group {
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
gap: var(--spacing-md);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.checkbox-item,
|
|
87
|
+
.radio-item {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
gap: var(--spacing-md);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.checkbox-item input,
|
|
94
|
+
.radio-item input {
|
|
95
|
+
width: auto;
|
|
96
|
+
margin: 0;
|
|
97
|
+
accent-color: var(--accent);
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.checkbox-item label,
|
|
102
|
+
.radio-item label {
|
|
103
|
+
margin: 0;
|
|
104
|
+
font-weight: normal;
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
user-select: none;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.form-hint {
|
|
110
|
+
font-size: 0.875rem;
|
|
111
|
+
color: var(--text-secondary);
|
|
112
|
+
margin-top: var(--spacing-xs);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.form-error {
|
|
116
|
+
font-size: 0.875rem;
|
|
117
|
+
color: var(--color-error);
|
|
118
|
+
margin-top: var(--spacing-xs);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.form-success {
|
|
122
|
+
font-size: 0.875rem;
|
|
123
|
+
color: var(--color-success);
|
|
124
|
+
margin-top: var(--spacing-xs);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.input-with-icon {
|
|
128
|
+
position: relative;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.input-with-icon input {
|
|
132
|
+
padding-left: 2.5rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.input-icon {
|
|
136
|
+
position: absolute;
|
|
137
|
+
left: var(--spacing-md);
|
|
138
|
+
top: 50%;
|
|
139
|
+
transform: translateY(-50%);
|
|
140
|
+
color: var(--text-secondary);
|
|
141
|
+
pointer-events: none;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.code-block {
|
|
145
|
+
background: var(--bg);
|
|
146
|
+
border: 1px solid var(--border);
|
|
147
|
+
border-radius: var(--radius-md);
|
|
148
|
+
padding: var(--spacing-md);
|
|
149
|
+
margin-top: var(--spacing-md);
|
|
150
|
+
font-family: 'Courier New', monospace;
|
|
151
|
+
font-size: 0.875rem;
|
|
152
|
+
color: var(--text-secondary);
|
|
153
|
+
overflow-x: auto;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.form-grid {
|
|
157
|
+
display: grid;
|
|
158
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
159
|
+
gap: var(--spacing-lg);
|
|
160
|
+
margin-bottom: var(--spacing-lg);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.demo-form {
|
|
164
|
+
background: var(--bg-secondary);
|
|
165
|
+
border: 1px solid var(--border);
|
|
166
|
+
border-radius: var(--radius-lg);
|
|
167
|
+
padding: var(--spacing-lg);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.button-group {
|
|
171
|
+
display: flex;
|
|
172
|
+
gap: var(--spacing-md);
|
|
173
|
+
margin-top: var(--spacing-lg);
|
|
174
|
+
flex-wrap: wrap;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.required-note {
|
|
178
|
+
font-size: 0.875rem;
|
|
179
|
+
color: var(--text-secondary);
|
|
180
|
+
margin-bottom: var(--spacing-lg);
|
|
181
|
+
}
|
|
182
|
+
</style>
|
|
183
|
+
</head>
|
|
184
|
+
<body>
|
|
185
|
+
<nav class="navbar">
|
|
186
|
+
<div class="navbar-content">
|
|
187
|
+
<a href="index.html" class="navbar-logo"><i class="fas fa-arrow-left"></i> Back</a>
|
|
188
|
+
<div class="navbar-links">
|
|
189
|
+
<a href="#text">Text Inputs</a>
|
|
190
|
+
<a href="#select">Selects</a>
|
|
191
|
+
<a href="#checkbox">Checkboxes</a>
|
|
192
|
+
<a href="#radio">Radio</a>
|
|
193
|
+
<a href="#demo">Full Form</a>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
</nav>
|
|
197
|
+
|
|
198
|
+
<div class="container">
|
|
199
|
+
<h1><i class="fas fa-form"></i> Form Components</h1>
|
|
200
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
|
|
201
|
+
Complete form element styling with proper accessibility and validation states.
|
|
202
|
+
</p>
|
|
203
|
+
|
|
204
|
+
<!-- Text Inputs -->
|
|
205
|
+
<section id="text" class="form-section">
|
|
206
|
+
<h3>Text Inputs</h3>
|
|
207
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
208
|
+
Fully styled input elements with focus states and validation indicators.
|
|
209
|
+
</p>
|
|
210
|
+
|
|
211
|
+
<div class="form-grid">
|
|
212
|
+
<div class="form-example">
|
|
213
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Basic Input</h4>
|
|
214
|
+
<div class="form-group">
|
|
215
|
+
<label for="name">Name</label>
|
|
216
|
+
<input type="text" id="name" placeholder="Enter your name" value="John Doe">
|
|
217
|
+
<div class="form-hint">Required field</div>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<div class="form-example">
|
|
222
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Email Input</h4>
|
|
223
|
+
<div class="form-group">
|
|
224
|
+
<label for="email">Email Address</label>
|
|
225
|
+
<input type="email" id="email" placeholder="your@email.com">
|
|
226
|
+
<div class="form-hint">We'll never share your email</div>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
<div class="form-example">
|
|
231
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Password Input</h4>
|
|
232
|
+
<div class="form-group">
|
|
233
|
+
<label for="password">Password</label>
|
|
234
|
+
<input type="password" id="password" placeholder="••••••••" value="12345678">
|
|
235
|
+
<div class="form-hint">Minimum 8 characters</div>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
|
|
239
|
+
<div class="form-example">
|
|
240
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Input with Error</h4>
|
|
241
|
+
<div class="form-group">
|
|
242
|
+
<label for="invalid">Username</label>
|
|
243
|
+
<input type="text" id="invalid" placeholder="username" style="border-color: var(--color-error);" value="in valid">
|
|
244
|
+
<div class="form-error"><i class="fas fa-exclamation-circle"></i> Invalid username format</div>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
<div class="form-example">
|
|
249
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Input with Success</h4>
|
|
250
|
+
<div class="form-group">
|
|
251
|
+
<label for="valid">Username</label>
|
|
252
|
+
<input type="text" id="valid" placeholder="username" style="border-color: var(--color-success);" value="myusername">
|
|
253
|
+
<div class="form-success"><i class="fas fa-check-circle"></i> Username available</div>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<div class="form-example">
|
|
258
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Input with Icon</h4>
|
|
259
|
+
<div class="form-group">
|
|
260
|
+
<label for="search">Search</label>
|
|
261
|
+
<div class="input-with-icon">
|
|
262
|
+
<i class="fas fa-search input-icon"></i>
|
|
263
|
+
<input type="text" id="search" placeholder="Search...">
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<div class="code-block">
|
|
270
|
+
<div class="form-group">
|
|
271
|
+
<label for="email">Email Address</label>
|
|
272
|
+
<input type="email" id="email" placeholder="your@email.com" required>
|
|
273
|
+
<div class="form-hint">We'll never share your email</div>
|
|
274
|
+
</div>
|
|
275
|
+
|
|
276
|
+
<!-- With error state -->
|
|
277
|
+
<input style="border-color: var(--color-error);" />
|
|
278
|
+
<div class="form-error">Error message</div>
|
|
279
|
+
|
|
280
|
+
<!-- With success state -->
|
|
281
|
+
<input style="border-color: var(--color-success);" />
|
|
282
|
+
<div class="form-success">Success message</div>
|
|
283
|
+
</div>
|
|
284
|
+
</section>
|
|
285
|
+
|
|
286
|
+
<!-- Textarea -->
|
|
287
|
+
<section class="form-section">
|
|
288
|
+
<h3>Textarea</h3>
|
|
289
|
+
|
|
290
|
+
<div class="form-example">
|
|
291
|
+
<div class="form-group">
|
|
292
|
+
<label for="message">Message</label>
|
|
293
|
+
<textarea id="message" placeholder="Enter your message..." rows="5">This is a textarea element that can contain multiple lines of text.</textarea>
|
|
294
|
+
<div class="form-hint">Maximum 500 characters</div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<div class="code-block">
|
|
299
|
+
<div class="form-group">
|
|
300
|
+
<label for="message">Message</label>
|
|
301
|
+
<textarea id="message" placeholder="..." rows="5"></textarea>
|
|
302
|
+
<div class="form-hint">Maximum 500 characters</div>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</section>
|
|
306
|
+
|
|
307
|
+
<!-- Select -->
|
|
308
|
+
<section id="select" class="form-section">
|
|
309
|
+
<h3>Select Dropdown</h3>
|
|
310
|
+
|
|
311
|
+
<div class="form-grid">
|
|
312
|
+
<div class="form-example">
|
|
313
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Single Select</h4>
|
|
314
|
+
<div class="form-group">
|
|
315
|
+
<label for="category">Category</label>
|
|
316
|
+
<select id="category">
|
|
317
|
+
<option>Select a category</option>
|
|
318
|
+
<option selected>General Inquiry</option>
|
|
319
|
+
<option>Technical Support</option>
|
|
320
|
+
<option>Feedback</option>
|
|
321
|
+
<option>Other</option>
|
|
322
|
+
</select>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
|
|
326
|
+
<div class="form-example">
|
|
327
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Country Select</h4>
|
|
328
|
+
<div class="form-group">
|
|
329
|
+
<label for="country">Country</label>
|
|
330
|
+
<select id="country">
|
|
331
|
+
<option>Select a country</option>
|
|
332
|
+
<option selected>United States</option>
|
|
333
|
+
<option>Canada</option>
|
|
334
|
+
<option>United Kingdom</option>
|
|
335
|
+
<option>Japan</option>
|
|
336
|
+
</select>
|
|
337
|
+
</div>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div class="code-block">
|
|
342
|
+
<div class="form-group">
|
|
343
|
+
<label for="category">Category</label>
|
|
344
|
+
<select id="category">
|
|
345
|
+
<option>Select a category</option>
|
|
346
|
+
<option>General Inquiry</option>
|
|
347
|
+
<option>Technical Support</option>
|
|
348
|
+
<option>Feedback</option>
|
|
349
|
+
</select>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
</section>
|
|
353
|
+
|
|
354
|
+
<!-- Checkboxes -->
|
|
355
|
+
<section id="checkbox" class="form-section">
|
|
356
|
+
<h3>Checkboxes</h3>
|
|
357
|
+
|
|
358
|
+
<div class="form-example">
|
|
359
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Multiple Checkboxes</h4>
|
|
360
|
+
<div class="checkbox-group">
|
|
361
|
+
<div class="checkbox-item">
|
|
362
|
+
<input type="checkbox" id="check1" checked>
|
|
363
|
+
<label for="check1">I want to receive email updates</label>
|
|
364
|
+
</div>
|
|
365
|
+
<div class="checkbox-item">
|
|
366
|
+
<input type="checkbox" id="check2">
|
|
367
|
+
<label for="check2">I agree to the terms and conditions</label>
|
|
368
|
+
</div>
|
|
369
|
+
<div class="checkbox-item">
|
|
370
|
+
<input type="checkbox" id="check3" checked>
|
|
371
|
+
<label for="check3">I want marketing communications</label>
|
|
372
|
+
</div>
|
|
373
|
+
<div class="checkbox-item">
|
|
374
|
+
<input type="checkbox" id="check4" disabled>
|
|
375
|
+
<label for="check4">Disabled option</label>
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
</div>
|
|
379
|
+
|
|
380
|
+
<div class="code-block">
|
|
381
|
+
<div class="checkbox-group">
|
|
382
|
+
<div class="checkbox-item">
|
|
383
|
+
<input type="checkbox" id="agree" name="agree">
|
|
384
|
+
<label for="agree">I agree to the terms</label>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="checkbox-item">
|
|
387
|
+
<input type="checkbox" id="updates" name="updates" checked>
|
|
388
|
+
<label for="updates">Send me updates</label>
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
</section>
|
|
393
|
+
|
|
394
|
+
<!-- Radio Buttons -->
|
|
395
|
+
<section id="radio" class="form-section">
|
|
396
|
+
<h3>Radio Buttons</h3>
|
|
397
|
+
|
|
398
|
+
<div class="form-example">
|
|
399
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Select an Option</h4>
|
|
400
|
+
<div class="radio-group">
|
|
401
|
+
<div class="radio-item">
|
|
402
|
+
<input type="radio" id="option1" name="options" value="option1" checked>
|
|
403
|
+
<label for="option1">Option One</label>
|
|
404
|
+
</div>
|
|
405
|
+
<div class="radio-item">
|
|
406
|
+
<input type="radio" id="option2" name="options" value="option2">
|
|
407
|
+
<label for="option2">Option Two</label>
|
|
408
|
+
</div>
|
|
409
|
+
<div class="radio-item">
|
|
410
|
+
<input type="radio" id="option3" name="options" value="option3">
|
|
411
|
+
<label for="option3">Option Three</label>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
|
|
416
|
+
<div class="form-example" style="margin-top: var(--spacing-xl);">
|
|
417
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--text);">Plan Selection</h4>
|
|
418
|
+
<div class="radio-group">
|
|
419
|
+
<div class="radio-item">
|
|
420
|
+
<input type="radio" id="plan1" name="plan" value="free" checked>
|
|
421
|
+
<label for="plan1">
|
|
422
|
+
<strong>Free</strong> - $0/month
|
|
423
|
+
</label>
|
|
424
|
+
</div>
|
|
425
|
+
<div class="radio-item">
|
|
426
|
+
<input type="radio" id="plan2" name="plan" value="pro">
|
|
427
|
+
<label for="plan2">
|
|
428
|
+
<strong>Pro</strong> - $19/month
|
|
429
|
+
</label>
|
|
430
|
+
</div>
|
|
431
|
+
<div class="radio-item">
|
|
432
|
+
<input type="radio" id="plan3" name="plan" value="enterprise">
|
|
433
|
+
<label for="plan3">
|
|
434
|
+
<strong>Enterprise</strong> - Custom pricing
|
|
435
|
+
</label>
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
440
|
+
<div class="code-block">
|
|
441
|
+
<div class="radio-group">
|
|
442
|
+
<div class="radio-item">
|
|
443
|
+
<input type="radio" id="opt1" name="options" value="1" checked>
|
|
444
|
+
<label for="opt1">Option One</label>
|
|
445
|
+
</div>
|
|
446
|
+
<div class="radio-item">
|
|
447
|
+
<input type="radio" id="opt2" name="options" value="2">
|
|
448
|
+
<label for="opt2">Option Two</label>
|
|
449
|
+
</div>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
</section>
|
|
453
|
+
|
|
454
|
+
<!-- Complete Form -->
|
|
455
|
+
<section id="demo" class="form-section">
|
|
456
|
+
<h3><i class="fas fa-file-alt"></i> Complete Form Example</h3>
|
|
457
|
+
|
|
458
|
+
<form class="demo-form" onsubmit="return handleFormSubmit(event)">
|
|
459
|
+
<div class="required-note">
|
|
460
|
+
<span style="color: var(--accent);">*</span> Indicates required field
|
|
461
|
+
</div>
|
|
462
|
+
|
|
463
|
+
<div class="form-group">
|
|
464
|
+
<label for="full-name">Full Name <span style="color: var(--accent);">*</span></label>
|
|
465
|
+
<input type="text" id="full-name" placeholder="John Doe" required>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<div class="form-inline">
|
|
469
|
+
<div class="form-group">
|
|
470
|
+
<label for="email-form">Email <span style="color: var(--accent);">*</span></label>
|
|
471
|
+
<input type="email" id="email-form" placeholder="john@example.com" required>
|
|
472
|
+
</div>
|
|
473
|
+
<div class="form-group">
|
|
474
|
+
<label for="phone">Phone</label>
|
|
475
|
+
<input type="tel" id="phone" placeholder="+1 (555) 000-0000">
|
|
476
|
+
</div>
|
|
477
|
+
</div>
|
|
478
|
+
|
|
479
|
+
<div class="form-group">
|
|
480
|
+
<label for="subject">Subject <span style="color: var(--accent);">*</span></label>
|
|
481
|
+
<select id="subject" required>
|
|
482
|
+
<option>Select a subject</option>
|
|
483
|
+
<option>General Inquiry</option>
|
|
484
|
+
<option>Support Request</option>
|
|
485
|
+
<option>Feedback</option>
|
|
486
|
+
<option>Other</option>
|
|
487
|
+
</select>
|
|
488
|
+
</div>
|
|
489
|
+
|
|
490
|
+
<div class="form-group">
|
|
491
|
+
<label for="message-form">Message <span style="color: var(--accent);">*</span></label>
|
|
492
|
+
<textarea id="message-form" placeholder="Your message here..." rows="5" required></textarea>
|
|
493
|
+
<div class="form-hint">Minimum 10 characters</div>
|
|
494
|
+
</div>
|
|
495
|
+
|
|
496
|
+
<div class="checkbox-group">
|
|
497
|
+
<div class="checkbox-item">
|
|
498
|
+
<input type="checkbox" id="subscribe-form" name="subscribe">
|
|
499
|
+
<label for="subscribe-form">Subscribe to our newsletter</label>
|
|
500
|
+
</div>
|
|
501
|
+
<div class="checkbox-item">
|
|
502
|
+
<input type="checkbox" id="terms-form" name="terms" required>
|
|
503
|
+
<label for="terms-form">I agree to the terms and conditions <span style="color: var(--accent);">*</span></label>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
|
|
507
|
+
<div class="button-group">
|
|
508
|
+
<button type="submit" class="btn">Send Message</button>
|
|
509
|
+
<button type="reset" class="btn btn-secondary">Clear Form</button>
|
|
510
|
+
<button type="button" class="btn btn-ghost" onclick="this.closest('form').reset()">Cancel</button>
|
|
511
|
+
</div>
|
|
512
|
+
</form>
|
|
513
|
+
|
|
514
|
+
<div class="code-block">
|
|
515
|
+
<form onsubmit="handleFormSubmit(event)">
|
|
516
|
+
<div class="form-group">
|
|
517
|
+
<label for="name">Name <span style="color: var(--accent);">*</span></label>
|
|
518
|
+
<input type="text" id="name" required>
|
|
519
|
+
</div>
|
|
520
|
+
|
|
521
|
+
<div class="form-group">
|
|
522
|
+
<label for="message">Message</label>
|
|
523
|
+
<textarea id="message" rows="5"></textarea>
|
|
524
|
+
</div>
|
|
525
|
+
|
|
526
|
+
<div class="checkbox-item">
|
|
527
|
+
<input type="checkbox" id="agree">
|
|
528
|
+
<label for="agree">I agree to terms</label>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
<div class="button-group">
|
|
532
|
+
<button type="submit" class="btn">Submit</button>
|
|
533
|
+
<button type="reset" class="btn btn-secondary">Reset</button>
|
|
534
|
+
</div>
|
|
535
|
+
</form>
|
|
536
|
+
</div>
|
|
537
|
+
</section>
|
|
538
|
+
|
|
539
|
+
<footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-2xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
|
|
540
|
+
<p>Form Components Documentation • Corrupted Theme v0.1.0</p>
|
|
541
|
+
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
542
|
+
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
543
|
+
</p>
|
|
544
|
+
</footer>
|
|
545
|
+
</div>
|
|
546
|
+
|
|
547
|
+
<script>
|
|
548
|
+
function handleFormSubmit(event) {
|
|
549
|
+
event.preventDefault();
|
|
550
|
+
alert('Form submitted! (This is a demo - no data was actually sent)');
|
|
551
|
+
return false;
|
|
552
|
+
}
|
|
553
|
+
</script>
|
|
554
|
+
</body>
|
|
555
|
+
</html>
|