@pitcher/css 2025.10.1-7.1760702145485 → 2025.10.1-7.1760702678504
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/index.html +601 -0
- package/package.json +2 -1
package/index.html
ADDED
|
@@ -0,0 +1,601 @@
|
|
|
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>Pitcher UI Extended Demo</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
8
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
9
|
+
<link rel="stylesheet" href="pitcher-ui.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<h1 class="p-mb-4">Pitcher UI Framework - Extended Demo</h1>
|
|
13
|
+
|
|
14
|
+
<!-- Form Section -->
|
|
15
|
+
<div class="p-card p-mb-4">
|
|
16
|
+
<div class="p-card-header">Form Elements</div>
|
|
17
|
+
<div class="p-card-body">
|
|
18
|
+
<div class="p-form-group">
|
|
19
|
+
<label class="p-label required">Full Name</label>
|
|
20
|
+
<input type="text" class="p-input" placeholder="Enter your full name...">
|
|
21
|
+
<div class="p-input-hint">Use your legal name for verification</div>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="p-form-group">
|
|
24
|
+
<label class="p-label required">Email Address</label>
|
|
25
|
+
<input type="email" class="p-input" placeholder="your@email.com">
|
|
26
|
+
</div>
|
|
27
|
+
<div class="p-form-group">
|
|
28
|
+
<label class="p-label">Country</label>
|
|
29
|
+
<select class="p-select">
|
|
30
|
+
<option>Select a country...</option>
|
|
31
|
+
<option>United States</option>
|
|
32
|
+
<option>Canada</option>
|
|
33
|
+
<option>United Kingdom</option>
|
|
34
|
+
</select>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="p-form-group">
|
|
37
|
+
<label class="p-label">Comments</label>
|
|
38
|
+
<textarea class="p-textarea" placeholder="Enter your comments here..."></textarea>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="p-checkbox">
|
|
41
|
+
<input type="checkbox" id="agree">
|
|
42
|
+
<label for="agree">I agree to the terms and conditions</label>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="p-radio" style="margin-top: var(--spacing-2);">
|
|
45
|
+
<input type="radio" id="option1" name="options">
|
|
46
|
+
<label for="option1">Option 1</label>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<!-- Alerts -->
|
|
52
|
+
<div class="p-mb-4">
|
|
53
|
+
<div class="p-alert p-alert-success">
|
|
54
|
+
<div>
|
|
55
|
+
<div class="p-alert-title">Success!</div>
|
|
56
|
+
<div>Your changes have been saved successfully.</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="p-alert p-alert-info">
|
|
60
|
+
<div>
|
|
61
|
+
<div class="p-alert-title">Information</div>
|
|
62
|
+
<div>This action requires confirmation.</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="p-alert p-alert-warning">
|
|
66
|
+
<div>
|
|
67
|
+
<div class="p-alert-title">Warning</div>
|
|
68
|
+
<div>This action cannot be undone.</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="p-alert p-alert-error">
|
|
72
|
+
<div>
|
|
73
|
+
<div class="p-alert-title">Error</div>
|
|
74
|
+
<div>Something went wrong. Please try again.</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<!-- Buttons -->
|
|
80
|
+
<div class="p-card p-mb-4">
|
|
81
|
+
<div class="p-card-header">Buttons</div>
|
|
82
|
+
<div class="p-card-body p-flex p-flex-wrap p-gap-2">
|
|
83
|
+
<button class="p-btn p-btn-primary">Primary</button>
|
|
84
|
+
<button class="p-btn p-btn-secondary">Secondary</button>
|
|
85
|
+
<button class="p-btn p-btn-success">Success</button>
|
|
86
|
+
<button class="p-btn p-btn-danger">Danger</button>
|
|
87
|
+
<button class="p-btn p-btn-warning">Warning</button>
|
|
88
|
+
<button class="p-btn p-btn-info">Info</button>
|
|
89
|
+
<button class="p-btn p-btn-text">Text Button</button>
|
|
90
|
+
<button class="p-btn p-btn-primary p-btn-sm">Small</button>
|
|
91
|
+
<button class="p-btn p-btn-primary p-btn-lg">Large</button>
|
|
92
|
+
<button class="p-btn p-btn-primary" disabled>Disabled</button>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<!-- Badges & Tags -->
|
|
97
|
+
<div class="p-card p-mb-4">
|
|
98
|
+
<div class="p-card-header">Badges & Tags</div>
|
|
99
|
+
<div class="p-card-body">
|
|
100
|
+
<div class="p-mb-3">
|
|
101
|
+
<strong>Badges:</strong><br>
|
|
102
|
+
<span class="p-badge p-m-1">Default</span>
|
|
103
|
+
<span class="p-badge p-badge-success p-m-1">Success</span>
|
|
104
|
+
<span class="p-badge p-badge-error p-m-1">Error</span>
|
|
105
|
+
<span class="p-badge p-badge-warning p-m-1">Warning</span>
|
|
106
|
+
<span class="p-badge p-badge-info p-m-1">Info</span>
|
|
107
|
+
<span class="p-badge-count p-m-1">5</span>
|
|
108
|
+
</div>
|
|
109
|
+
<div>
|
|
110
|
+
<strong>Tags:</strong><br>
|
|
111
|
+
<span class="p-tag p-m-1">Default</span>
|
|
112
|
+
<span class="p-tag p-tag-success p-m-1">Active</span>
|
|
113
|
+
<span class="p-tag p-tag-warning p-m-1">Draft</span>
|
|
114
|
+
<span class="p-tag p-tag-error p-m-1">Inactive</span>
|
|
115
|
+
<span class="p-tag p-tag-info p-m-1">New</span>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<!-- Toggles & Switches -->
|
|
121
|
+
<div class="p-card p-mb-4">
|
|
122
|
+
<div class="p-card-header">Toggles & Switches</div>
|
|
123
|
+
<div class="p-card-body">
|
|
124
|
+
<div class="p-flex p-items-center p-gap-3 p-mb-3">
|
|
125
|
+
<label class="p-toggle">
|
|
126
|
+
<input type="checkbox">
|
|
127
|
+
<span class="p-toggle-slider"></span>
|
|
128
|
+
</label>
|
|
129
|
+
<span>Notifications Disabled</span>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="p-flex p-items-center p-gap-3">
|
|
132
|
+
<label class="p-toggle">
|
|
133
|
+
<input type="checkbox" checked>
|
|
134
|
+
<span class="p-toggle-slider"></span>
|
|
135
|
+
</label>
|
|
136
|
+
<span class="p-text-success p-font-medium">Notifications Enabled</span>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<!-- Progress Bars -->
|
|
142
|
+
<div class="p-card p-mb-4">
|
|
143
|
+
<div class="p-card-header">Progress Indicators</div>
|
|
144
|
+
<div class="p-card-body">
|
|
145
|
+
<div class="p-mb-3">
|
|
146
|
+
<div class="p-text-sm p-font-medium p-mb-2">Default Progress (60%)</div>
|
|
147
|
+
<div class="p-progress">
|
|
148
|
+
<div class="p-progress-bar" style="width: 60%;"></div>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="p-mb-3">
|
|
152
|
+
<div class="p-text-sm p-font-medium p-mb-2">Success (100%)</div>
|
|
153
|
+
<div class="p-progress">
|
|
154
|
+
<div class="p-progress-bar success" style="width: 100%;"></div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="p-mb-3">
|
|
158
|
+
<div class="p-text-sm p-font-medium p-mb-2">Warning (45%)</div>
|
|
159
|
+
<div class="p-progress">
|
|
160
|
+
<div class="p-progress-bar warning" style="width: 45%;"></div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div>
|
|
164
|
+
<div class="p-text-sm p-font-medium p-mb-2">Error (30%)</div>
|
|
165
|
+
<div class="p-progress">
|
|
166
|
+
<div class="p-progress-bar error" style="width: 30%;"></div>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="p-mt-3 p-flex p-items-center p-gap-2">
|
|
170
|
+
<div class="p-spinner"></div>
|
|
171
|
+
<span>Loading...</span>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<!-- Breadcrumb -->
|
|
177
|
+
<div class="p-card p-mb-4">
|
|
178
|
+
<div class="p-card-body">
|
|
179
|
+
<div class="p-breadcrumb">
|
|
180
|
+
<span class="p-breadcrumb-item"><a href="#" style="color: var(--p-primary); text-decoration: none;">Home</a></span>
|
|
181
|
+
<span class="p-breadcrumb-separator">/</span>
|
|
182
|
+
<span class="p-breadcrumb-item"><a href="#" style="color: var(--p-primary); text-decoration: none;">Products</a></span>
|
|
183
|
+
<span class="p-breadcrumb-separator">/</span>
|
|
184
|
+
<span class="p-breadcrumb-item active">Current Page</span>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<!-- Data Table -->
|
|
190
|
+
<div class="p-card p-mb-4">
|
|
191
|
+
<div class="p-card-header">Data Table</div>
|
|
192
|
+
<div class="p-card-body">
|
|
193
|
+
<table class="p-table p-table-striped">
|
|
194
|
+
<thead>
|
|
195
|
+
<tr>
|
|
196
|
+
<th>ID</th>
|
|
197
|
+
<th>Name</th>
|
|
198
|
+
<th>Status</th>
|
|
199
|
+
<th>Owner</th>
|
|
200
|
+
<th>Progress</th>
|
|
201
|
+
</tr>
|
|
202
|
+
</thead>
|
|
203
|
+
<tbody>
|
|
204
|
+
<tr>
|
|
205
|
+
<td>#1001</td>
|
|
206
|
+
<td>Data tables study</td>
|
|
207
|
+
<td><span class="p-tag p-tag-success">Active</span></td>
|
|
208
|
+
<td>Dimitris Tomazakis</td>
|
|
209
|
+
<td>
|
|
210
|
+
<div class="p-progress" style="margin: 0; width: 100px;">
|
|
211
|
+
<div class="p-progress-bar" style="width: 85%;"></div>
|
|
212
|
+
</div>
|
|
213
|
+
</td>
|
|
214
|
+
</tr>
|
|
215
|
+
<tr>
|
|
216
|
+
<td>#1002</td>
|
|
217
|
+
<td>Template with advanced aspect</td>
|
|
218
|
+
<td><span class="p-tag p-tag-warning">Draft</span></td>
|
|
219
|
+
<td>Sarah Johnson</td>
|
|
220
|
+
<td>
|
|
221
|
+
<div class="p-progress" style="margin: 0; width: 100px;">
|
|
222
|
+
<div class="p-progress-bar" style="width: 45%;"></div>
|
|
223
|
+
</div>
|
|
224
|
+
</td>
|
|
225
|
+
</tr>
|
|
226
|
+
<tr>
|
|
227
|
+
<td>#1003</td>
|
|
228
|
+
<td>Component library update</td>
|
|
229
|
+
<td><span class="p-tag p-tag-error">Inactive</span></td>
|
|
230
|
+
<td>Michael Chen</td>
|
|
231
|
+
<td>
|
|
232
|
+
<div class="p-progress" style="margin: 0; width: 100px;">
|
|
233
|
+
<div class="p-progress-bar" style="width: 20%;"></div>
|
|
234
|
+
</div>
|
|
235
|
+
</td>
|
|
236
|
+
</tr>
|
|
237
|
+
<tr>
|
|
238
|
+
<td>#1004</td>
|
|
239
|
+
<td>API documentation</td>
|
|
240
|
+
<td><span class="p-tag p-tag-success">Active</span></td>
|
|
241
|
+
<td>Emma Davis</td>
|
|
242
|
+
<td>
|
|
243
|
+
<div class="p-progress" style="margin: 0; width: 100px;">
|
|
244
|
+
<div class="p-progress-bar success" style="width: 100%;"></div>
|
|
245
|
+
</div>
|
|
246
|
+
</td>
|
|
247
|
+
</tr>
|
|
248
|
+
</tbody>
|
|
249
|
+
</table>
|
|
250
|
+
<div class="p-pagination">
|
|
251
|
+
<span class="p-pagination-item disabled">«</span>
|
|
252
|
+
<span class="p-pagination-item active">1</span>
|
|
253
|
+
<span class="p-pagination-item">2</span>
|
|
254
|
+
<span class="p-pagination-item">3</span>
|
|
255
|
+
<span class="p-pagination-item">»</span>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
|
|
260
|
+
<!-- Panels -->
|
|
261
|
+
<div class="p-panel p-mb-4">
|
|
262
|
+
<h4 class="p-m-0 p-mb-2">Panel Title</h4>
|
|
263
|
+
<p class="p-m-0 p-text-gray">This is a simple panel with a border. Use for grouping related content without card styling.</p>
|
|
264
|
+
</div>
|
|
265
|
+
|
|
266
|
+
<!-- Layout Examples -->
|
|
267
|
+
<div class="p-card p-mb-4">
|
|
268
|
+
<div class="p-card-header">Layout Examples</div>
|
|
269
|
+
<div class="p-card-body">
|
|
270
|
+
<div class="p-mb-4">
|
|
271
|
+
<strong>Flex with Gap:</strong>
|
|
272
|
+
<div class="p-flex p-gap-4 p-mt-2">
|
|
273
|
+
<div style="background: var(--p-primary6); padding: var(--spacing-3); flex: 1; border-radius: var(--radius-md);">Item 1</div>
|
|
274
|
+
<div style="background: var(--p-primary6); padding: var(--spacing-3); flex: 1; border-radius: var(--radius-md);">Item 2</div>
|
|
275
|
+
<div style="background: var(--p-primary6); padding: var(--spacing-3); flex: 1; border-radius: var(--radius-md);">Item 3</div>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
<div>
|
|
279
|
+
<strong>Two Column Layout:</strong>
|
|
280
|
+
<div class="p-flex p-gap-4 p-mt-2">
|
|
281
|
+
<div style="background: var(--p-primary6); padding: var(--spacing-3); flex: 2; border-radius: var(--radius-md);">Wide (2/3)</div>
|
|
282
|
+
<div style="background: var(--p-primary6); padding: var(--spacing-3); flex: 1; border-radius: var(--radius-md);">Narrow (1/3)</div>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
<!-- Card with Footer -->
|
|
289
|
+
<div class="p-card p-mb-4">
|
|
290
|
+
<div class="p-card-header">Card with Actions</div>
|
|
291
|
+
<div class="p-card-body">
|
|
292
|
+
<p>This card demonstrates footer actions with properly styled buttons.</p>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="p-card-footer">
|
|
295
|
+
<button class="p-btn p-btn-secondary">Cancel</button>
|
|
296
|
+
<button class="p-btn p-btn-primary">Save Changes</button>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
|
|
300
|
+
<!-- States & Variations -->
|
|
301
|
+
<div class="p-card p-mb-4">
|
|
302
|
+
<div class="p-card-header">Text Utilities</div>
|
|
303
|
+
<div class="p-card-body">
|
|
304
|
+
<p class="p-text-primary"><strong>Primary Color</strong></p>
|
|
305
|
+
<p class="p-text-success"><strong>Success Color</strong></p>
|
|
306
|
+
<p class="p-text-error"><strong>Error Color</strong></p>
|
|
307
|
+
<p class="p-text-warning"><strong>Warning Color</strong></p>
|
|
308
|
+
<p class="p-text-gray"><strong>Gray Color</strong></p>
|
|
309
|
+
<p class="p-text-muted"><strong>Muted Color</strong></p>
|
|
310
|
+
<hr style="border: none; border-top: 1px solid var(--rsk-color-gray-200); margin: var(--spacing-4) 0;">
|
|
311
|
+
<p class="p-text-sm">Small text</p>
|
|
312
|
+
<p class="p-text-xs">Extra small text</p>
|
|
313
|
+
<p class="p-font-semibold">Semibold weight</p>
|
|
314
|
+
<p class="p-font-bold">Bold weight</p>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
|
|
318
|
+
<!-- Tabs -->
|
|
319
|
+
<div class="p-card p-mb-4">
|
|
320
|
+
<div class="p-card-header">Tabs</div>
|
|
321
|
+
<div class="p-card-body p-p-0">
|
|
322
|
+
<div class="p-tabs" style="margin: 0;">
|
|
323
|
+
<button class="p-tab active">Overview</button>
|
|
324
|
+
<button class="p-tab">Features</button>
|
|
325
|
+
<button class="p-tab">Settings</button>
|
|
326
|
+
<button class="p-tab" disabled>Disabled</button>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="p-tab-content" style="padding: var(--spacing-4);">
|
|
329
|
+
<h5>Overview</h5>
|
|
330
|
+
<p>This is the overview tab content. Switch between tabs to see different content.</p>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<!-- Accordion -->
|
|
336
|
+
<div class="p-card p-mb-4">
|
|
337
|
+
<div class="p-card-header">Accordion</div>
|
|
338
|
+
<div class="p-card-body">
|
|
339
|
+
<div class="p-accordion">
|
|
340
|
+
<div class="p-accordion-item active">
|
|
341
|
+
<div class="p-accordion-header" onclick="this.parentElement.classList.toggle('active')">
|
|
342
|
+
<span>What is Pitcher?</span>
|
|
343
|
+
<span class="p-accordion-icon">▼</span>
|
|
344
|
+
</div>
|
|
345
|
+
<div class="p-accordion-body">
|
|
346
|
+
<div class="p-accordion-content">
|
|
347
|
+
Pitcher is a comprehensive sales enablement platform designed to help teams work more effectively.
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
<div class="p-accordion-item">
|
|
352
|
+
<div class="p-accordion-header" onclick="this.parentElement.classList.toggle('active')">
|
|
353
|
+
<span>How do I get started?</span>
|
|
354
|
+
<span class="p-accordion-icon">▼</span>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="p-accordion-body">
|
|
357
|
+
<div class="p-accordion-content">
|
|
358
|
+
Getting started is easy! Simply sign up for an account and follow our onboarding guide.
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
<div class="p-accordion-item">
|
|
363
|
+
<div class="p-accordion-header" onclick="this.parentElement.classList.toggle('active')">
|
|
364
|
+
<span>What features are included?</span>
|
|
365
|
+
<span class="p-accordion-icon">▼</span>
|
|
366
|
+
</div>
|
|
367
|
+
<div class="p-accordion-body">
|
|
368
|
+
<div class="p-accordion-content">
|
|
369
|
+
We offer content management, CRM integration, offline access, and advanced analytics.
|
|
370
|
+
</div>
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<!-- Tooltips & Dropdowns -->
|
|
378
|
+
<div class="p-card p-mb-4">
|
|
379
|
+
<div class="p-card-header">Tooltips & Dropdowns</div>
|
|
380
|
+
<div class="p-card-body">
|
|
381
|
+
<div class="p-mb-4">
|
|
382
|
+
<strong>Tooltips:</strong><br><br>
|
|
383
|
+
<div class="p-flex p-gap-4 p-flex-wrap">
|
|
384
|
+
<div class="p-tooltip">
|
|
385
|
+
<button class="p-btn p-btn-primary">Hover me (top)</button>
|
|
386
|
+
<span class="p-tooltip-text">This is a tooltip!</span>
|
|
387
|
+
</div>
|
|
388
|
+
<div class="p-tooltip">
|
|
389
|
+
<button class="p-btn p-btn-secondary">Hover me (bottom)</button>
|
|
390
|
+
<span class="p-tooltip-text bottom">Bottom tooltip</span>
|
|
391
|
+
</div>
|
|
392
|
+
<div class="p-tooltip">
|
|
393
|
+
<button class="p-btn p-btn-success">Hover me (right)</button>
|
|
394
|
+
<span class="p-tooltip-text right">Right tooltip</span>
|
|
395
|
+
</div>
|
|
396
|
+
</div>
|
|
397
|
+
</div>
|
|
398
|
+
<div>
|
|
399
|
+
<strong>Dropdown:</strong><br><br>
|
|
400
|
+
<div class="p-dropdown">
|
|
401
|
+
<button class="p-btn p-btn-primary" onclick="this.parentElement.classList.toggle('active')">Actions ▾</button>
|
|
402
|
+
<div class="p-dropdown-menu">
|
|
403
|
+
<div class="p-dropdown-header">Actions</div>
|
|
404
|
+
<a href="#" class="p-dropdown-item">Edit</a>
|
|
405
|
+
<a href="#" class="p-dropdown-item">Duplicate</a>
|
|
406
|
+
<a href="#" class="p-dropdown-item">Archive</a>
|
|
407
|
+
<div class="p-dropdown-divider"></div>
|
|
408
|
+
<div class="p-dropdown-header">Danger Zone</div>
|
|
409
|
+
<a href="#" class="p-dropdown-item" style="color: var(--p-error);">Delete</a>
|
|
410
|
+
</div>
|
|
411
|
+
</div>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
|
|
416
|
+
<!-- Avatars -->
|
|
417
|
+
<div class="p-card p-mb-4">
|
|
418
|
+
<div class="p-card-header">Avatars</div>
|
|
419
|
+
<div class="p-card-body">
|
|
420
|
+
<div class="p-mb-4">
|
|
421
|
+
<strong>Sizes:</strong><br><br>
|
|
422
|
+
<div class="p-flex p-items-center p-gap-3">
|
|
423
|
+
<div class="p-avatar p-avatar-sm">SM</div>
|
|
424
|
+
<div class="p-avatar p-avatar-md">MD</div>
|
|
425
|
+
<div class="p-avatar p-avatar-lg">LG</div>
|
|
426
|
+
<div class="p-avatar p-avatar-xl">XL</div>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
<div>
|
|
430
|
+
<strong>Avatar Group:</strong><br><br>
|
|
431
|
+
<div class="p-avatar-group">
|
|
432
|
+
<div class="p-avatar p-avatar-md">JD</div>
|
|
433
|
+
<div class="p-avatar p-avatar-md" style="background: var(--p-success);">SK</div>
|
|
434
|
+
<div class="p-avatar p-avatar-md" style="background: var(--p-info);">MC</div>
|
|
435
|
+
<div class="p-avatar p-avatar-md" style="background: var(--p-warning);">ED</div>
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
|
|
441
|
+
<!-- List Group -->
|
|
442
|
+
<div class="p-card p-mb-4">
|
|
443
|
+
<div class="p-card-header">List Group</div>
|
|
444
|
+
<div class="p-card-body">
|
|
445
|
+
<div class="p-list-group">
|
|
446
|
+
<a href="#" class="p-list-item active">
|
|
447
|
+
<div class="p-list-item-icon"><i class="fas fa-chart-line"></i></div>
|
|
448
|
+
<div class="p-list-item-content">
|
|
449
|
+
<div class="p-list-item-title">Dashboard</div>
|
|
450
|
+
<div class="p-list-item-description">View your analytics and insights</div>
|
|
451
|
+
</div>
|
|
452
|
+
</a>
|
|
453
|
+
<a href="#" class="p-list-item">
|
|
454
|
+
<div class="p-list-item-icon"><i class="fas fa-folder"></i></div>
|
|
455
|
+
<div class="p-list-item-content">
|
|
456
|
+
<div class="p-list-item-title">Projects</div>
|
|
457
|
+
<div class="p-list-item-description">Manage your projects and files</div>
|
|
458
|
+
</div>
|
|
459
|
+
</a>
|
|
460
|
+
<a href="#" class="p-list-item">
|
|
461
|
+
<div class="p-list-item-icon"><i class="fas fa-cog"></i></div>
|
|
462
|
+
<div class="p-list-item-content">
|
|
463
|
+
<div class="p-list-item-title">Settings</div>
|
|
464
|
+
<div class="p-list-item-description">Configure your preferences</div>
|
|
465
|
+
</div>
|
|
466
|
+
</a>
|
|
467
|
+
<a href="#" class="p-list-item disabled">
|
|
468
|
+
<div class="p-list-item-icon"><i class="fas fa-lock"></i></div>
|
|
469
|
+
<div class="p-list-item-content">
|
|
470
|
+
<div class="p-list-item-title">Locked Feature</div>
|
|
471
|
+
<div class="p-list-item-description">Upgrade to access this feature</div>
|
|
472
|
+
</div>
|
|
473
|
+
</a>
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
</div>
|
|
477
|
+
|
|
478
|
+
<!-- Skeleton Loaders -->
|
|
479
|
+
<div class="p-card p-mb-4">
|
|
480
|
+
<div class="p-card-header">Skeleton Loaders</div>
|
|
481
|
+
<div class="p-card-body">
|
|
482
|
+
<div class="p-skeleton p-skeleton-title"></div>
|
|
483
|
+
<div class="p-skeleton p-skeleton-text"></div>
|
|
484
|
+
<div class="p-skeleton p-skeleton-text"></div>
|
|
485
|
+
<div class="p-skeleton p-skeleton-text"></div>
|
|
486
|
+
<div class="p-mt-3 p-flex p-gap-3 p-items-center">
|
|
487
|
+
<div class="p-skeleton p-skeleton-circle" style="width: 40px; height: 40px;"></div>
|
|
488
|
+
<div style="flex: 1;">
|
|
489
|
+
<div class="p-skeleton p-skeleton-text" style="width: 60%;"></div>
|
|
490
|
+
<div class="p-skeleton p-skeleton-text" style="width: 40%;"></div>
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
<div class="p-mt-3">
|
|
494
|
+
<div class="p-skeleton p-skeleton-button"></div>
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
497
|
+
</div>
|
|
498
|
+
|
|
499
|
+
<!-- File Upload -->
|
|
500
|
+
<div class="p-card p-mb-4">
|
|
501
|
+
<div class="p-card-header">File Upload</div>
|
|
502
|
+
<div class="p-card-body">
|
|
503
|
+
<div class="p-file-upload">
|
|
504
|
+
<input type="file" id="fileInput">
|
|
505
|
+
<label for="fileInput" class="p-file-upload-label">
|
|
506
|
+
<i class="fas fa-cloud-upload-alt" style="font-size: 1.5rem;"></i>
|
|
507
|
+
<div class="p-file-upload-text">
|
|
508
|
+
<div>Click to upload or drag and drop</div>
|
|
509
|
+
<div class="p-text-xs p-text-gray">PDF, DOC, DOCX up to 10MB</div>
|
|
510
|
+
</div>
|
|
511
|
+
</label>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
515
|
+
|
|
516
|
+
<!-- Toast Container (normally positioned fixed) -->
|
|
517
|
+
<div class="p-card p-mb-4">
|
|
518
|
+
<div class="p-card-header">Toast Notifications</div>
|
|
519
|
+
<div class="p-card-body">
|
|
520
|
+
<p class="p-mb-3">Click the button to show a toast notification (will appear in top-right corner):</p>
|
|
521
|
+
<button class="p-btn p-btn-primary" onclick="showToast()">Show Toast</button>
|
|
522
|
+
|
|
523
|
+
<div class="p-mt-4">
|
|
524
|
+
<strong>Static Examples:</strong>
|
|
525
|
+
<div style="position: relative; max-width: 400px; margin-top: 1rem;">
|
|
526
|
+
<div class="p-toast p-toast-success" style="animation: none; margin-bottom: 0.5rem;">
|
|
527
|
+
<div class="p-toast-content">
|
|
528
|
+
<div class="p-toast-title">Success!</div>
|
|
529
|
+
<div class="p-toast-message">Your changes have been saved.</div>
|
|
530
|
+
</div>
|
|
531
|
+
<button class="p-toast-close">×</button>
|
|
532
|
+
</div>
|
|
533
|
+
<div class="p-toast p-toast-info" style="animation: none;">
|
|
534
|
+
<div class="p-toast-content">
|
|
535
|
+
<div class="p-toast-title">Info</div>
|
|
536
|
+
<div class="p-toast-message">You have 3 unread messages.</div>
|
|
537
|
+
</div>
|
|
538
|
+
<button class="p-toast-close">×</button>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
|
|
545
|
+
<!-- Modal Example (HTML only, needs JS to function) -->
|
|
546
|
+
<div class="p-card p-mb-4">
|
|
547
|
+
<div class="p-card-header">Modal Example</div>
|
|
548
|
+
<div class="p-card-body">
|
|
549
|
+
<button class="p-btn p-btn-primary" onclick="document.getElementById('exampleModal').classList.add('active')">Open Modal</button>
|
|
550
|
+
</div>
|
|
551
|
+
</div>
|
|
552
|
+
|
|
553
|
+
<!-- Modal -->
|
|
554
|
+
<div id="exampleModal" class="p-modal">
|
|
555
|
+
<div class="p-modal-content">
|
|
556
|
+
<div class="p-modal-header">
|
|
557
|
+
<div class="p-modal-title">Confirm Action</div>
|
|
558
|
+
<button class="p-modal-close" onclick="document.getElementById('exampleModal').classList.remove('active')">×</button>
|
|
559
|
+
</div>
|
|
560
|
+
<div class="p-modal-body">
|
|
561
|
+
<p>Are you sure you want to proceed with this action? This operation cannot be undone.</p>
|
|
562
|
+
</div>
|
|
563
|
+
<div class="p-modal-footer">
|
|
564
|
+
<button class="p-btn p-btn-secondary" onclick="document.getElementById('exampleModal').classList.remove('active')">Cancel</button>
|
|
565
|
+
<button class="p-btn p-btn-danger">Confirm</button>
|
|
566
|
+
</div>
|
|
567
|
+
</div>
|
|
568
|
+
</div>
|
|
569
|
+
|
|
570
|
+
<!-- Toast Container -->
|
|
571
|
+
<div id="toastContainer" class="p-toast-container"></div>
|
|
572
|
+
|
|
573
|
+
<script>
|
|
574
|
+
// Toast notification function
|
|
575
|
+
function showToast(message = 'This is a toast notification!', type = 'success', duration = 3000) {
|
|
576
|
+
const container = document.getElementById('toastContainer');
|
|
577
|
+
|
|
578
|
+
// Create toast element
|
|
579
|
+
const toast = document.createElement('div');
|
|
580
|
+
toast.className = `p-toast p-toast-${type}`;
|
|
581
|
+
|
|
582
|
+
toast.innerHTML = `
|
|
583
|
+
<div class="p-toast-content">
|
|
584
|
+
<div class="p-toast-title">${type.charAt(0).toUpperCase() + type.slice(1)}</div>
|
|
585
|
+
<div class="p-toast-message">${message}</div>
|
|
586
|
+
</div>
|
|
587
|
+
<button class="p-toast-close" onclick="this.parentElement.remove()">×</button>
|
|
588
|
+
`;
|
|
589
|
+
|
|
590
|
+
// Add to container
|
|
591
|
+
container.appendChild(toast);
|
|
592
|
+
|
|
593
|
+
// Auto remove after duration
|
|
594
|
+
setTimeout(() => {
|
|
595
|
+
toast.style.animation = 'slideOutRight 0.3s ease-in-out';
|
|
596
|
+
setTimeout(() => toast.remove(), 300);
|
|
597
|
+
}, duration);
|
|
598
|
+
}
|
|
599
|
+
</script>
|
|
600
|
+
</body>
|
|
601
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pitcher/css",
|
|
3
|
-
"version": "2025.10.17.
|
|
3
|
+
"version": "2025.10.17.1760702678504",
|
|
4
4
|
"description": "Pitcher UI Framework - A comprehensive CSS framework with components for building modern web applications",
|
|
5
5
|
"main": "pitcher-ui.css",
|
|
6
6
|
"style": "pitcher-ui.css",
|
|
7
7
|
"files": [
|
|
8
8
|
"pitcher-ui.css",
|
|
9
|
+
"index.html",
|
|
9
10
|
"README.md"
|
|
10
11
|
],
|
|
11
12
|
"keywords": [
|