ag-design 1.0.89 → 1.0.91

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.
Files changed (41) hide show
  1. package/assets/static/fonts/ag-icons.css +493 -493
  2. package/assets/static/fonts/ag-icons.json +1668 -1668
  3. package/assets/static/fonts/ag-icons.ttf +0 -0
  4. package/assets/static/fonts/ag-icons.woff +0 -0
  5. package/assets/static/fonts/ag-icons.woff2 +0 -0
  6. package/assets/static/fonts/icon-gallery.html +366 -0
  7. package/fonts/ag-icons.css +493 -493
  8. package/fonts/ag-icons.json +1668 -1668
  9. package/fonts/ag-icons.ttf +0 -0
  10. package/fonts/ag-icons.woff +0 -0
  11. package/fonts/ag-icons.woff2 +0 -0
  12. package/fonts/icon-gallery.html +366 -0
  13. package/package.json +1 -1
  14. package/assets/static/fonts/all-icons-gallery.html +0 -379
  15. package/assets/static/fonts/all-icons.html +0 -174
  16. package/assets/static/fonts/debug-fonts.html +0 -163
  17. package/assets/static/fonts/direct-test.html +0 -58
  18. package/assets/static/fonts/final-test.html +0 -79
  19. package/assets/static/fonts/icon-preview.html +0 -195
  20. package/assets/static/fonts/index.html +0 -194
  21. package/assets/static/fonts/preview.html +0 -391
  22. package/assets/static/fonts/simple-test.html +0 -73
  23. package/assets/static/fonts/simplified-test.html +0 -67
  24. package/assets/static/fonts/standalone.html +0 -268
  25. package/assets/static/fonts/test-glyph.html +0 -50
  26. package/assets/static/fonts/test-icon.html +0 -33
  27. package/assets/static/fonts/test.html +0 -38
  28. package/fonts/all-icons-gallery.html +0 -379
  29. package/fonts/all-icons.html +0 -174
  30. package/fonts/debug-fonts.html +0 -163
  31. package/fonts/direct-test.html +0 -58
  32. package/fonts/final-test.html +0 -79
  33. package/fonts/icon-preview.html +0 -195
  34. package/fonts/index.html +0 -194
  35. package/fonts/preview.html +0 -391
  36. package/fonts/simple-test.html +0 -73
  37. package/fonts/simplified-test.html +0 -67
  38. package/fonts/standalone.html +0 -268
  39. package/fonts/test-glyph.html +0 -50
  40. package/fonts/test-icon.html +0 -33
  41. package/fonts/test.html +0 -38
@@ -1,379 +0,0 @@
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>AG Icons Gallery - All 362 Icons</title>
7
- <link rel="stylesheet" href="ag-icons.css">
8
- <style>
9
- * { margin: 0; padding: 0; box-sizing: border-box; }
10
-
11
- body {
12
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
- background: #f8f9fa;
14
- color: #333;
15
- }
16
-
17
- header {
18
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
- color: white;
20
- padding: 40px 20px;
21
- text-align: center;
22
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
23
- }
24
-
25
- header h1 { font-size: 32px; margin-bottom: 10px; }
26
- header p { font-size: 16px; opacity: 0.9; }
27
-
28
- .controls {
29
- background: white;
30
- padding: 20px;
31
- border-bottom: 1px solid #e0e0e0;
32
- position: sticky;
33
- top: 0;
34
- z-index: 100;
35
- box-shadow: 0 2px 4px rgba(0,0,0,0.05);
36
- }
37
-
38
- .search-box {
39
- display: flex;
40
- gap: 10px;
41
- max-width: 600px;
42
- margin: 0 auto 15px;
43
- flex-wrap: wrap;
44
- }
45
-
46
- input[type="text"], select {
47
- flex: 1;
48
- min-width: 200px;
49
- padding: 10px 15px;
50
- border: 2px solid #e0e0e0;
51
- border-radius: 6px;
52
- font-size: 14px;
53
- transition: border-color 0.2s;
54
- }
55
-
56
- input[type="text"]:focus, select:focus {
57
- outline: none;
58
- border-color: #667eea;
59
- }
60
-
61
- .stats {
62
- display: flex;
63
- gap: 20px;
64
- justify-content: center;
65
- flex-wrap: wrap;
66
- font-size: 14px;
67
- color: #666;
68
- }
69
-
70
- .stat {
71
- display: flex;
72
- align-items: center;
73
- gap: 5px;
74
- }
75
-
76
- .stat-value {
77
- font-weight: bold;
78
- color: #333;
79
- font-size: 16px;
80
- }
81
-
82
- .container {
83
- max-width: 1400px;
84
- margin: 0 auto;
85
- padding: 20px;
86
- }
87
-
88
- .category-section {
89
- margin-bottom: 40px;
90
- }
91
-
92
- .category-header {
93
- display: flex;
94
- align-items: center;
95
- gap: 10px;
96
- margin-bottom: 15px;
97
- padding-bottom: 10px;
98
- border-bottom: 2px solid #667eea;
99
- }
100
-
101
- .category-title {
102
- font-size: 20px;
103
- font-weight: 600;
104
- color: #333;
105
- }
106
-
107
- .category-count {
108
- background: #667eea;
109
- color: white;
110
- padding: 4px 12px;
111
- border-radius: 20px;
112
- font-size: 12px;
113
- font-weight: 600;
114
- }
115
-
116
- .icons-grid {
117
- display: grid;
118
- grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
119
- gap: 10px;
120
- margin-bottom: 30px;
121
- }
122
-
123
- .icon-card {
124
- background: white;
125
- border: 1px solid #e0e0e0;
126
- border-radius: 8px;
127
- padding: 15px;
128
- text-align: center;
129
- cursor: pointer;
130
- transition: all 0.3s ease;
131
- min-height: 120px;
132
- display: flex;
133
- flex-direction: column;
134
- align-items: center;
135
- justify-content: center;
136
- }
137
-
138
- .icon-card:hover {
139
- border-color: #667eea;
140
- background: #f5f7ff;
141
- transform: translateY(-4px);
142
- box-shadow: 0 8px 16px rgba(102, 126, 234, 0.15);
143
- }
144
-
145
- .icon-card.hidden { display: none; }
146
-
147
- .icon-glyph {
148
- font-size: 40px;
149
- margin-bottom: 8px;
150
- min-height: 45px;
151
- display: flex;
152
- align-items: center;
153
- justify-content: center;
154
- }
155
-
156
- .icon-name {
157
- font-size: 11px;
158
- color: #666;
159
- word-break: break-word;
160
- margin-bottom: 4px;
161
- font-weight: 500;
162
- }
163
-
164
- .icon-code {
165
- font-size: 10px;
166
- color: #999;
167
- font-family: 'Courier New', monospace;
168
- background: #f5f5f5;
169
- padding: 2px 6px;
170
- border-radius: 3px;
171
- }
172
-
173
- .no-results {
174
- text-align: center;
175
- padding: 40px 20px;
176
- color: #999;
177
- font-size: 16px;
178
- }
179
-
180
- .copy-notice {
181
- position: fixed;
182
- bottom: 20px;
183
- right: 20px;
184
- background: #667eea;
185
- color: white;
186
- padding: 12px 20px;
187
- border-radius: 6px;
188
- opacity: 0;
189
- pointer-events: none;
190
- transition: opacity 0.3s;
191
- }
192
-
193
- .copy-notice.show { opacity: 1; }
194
-
195
- footer {
196
- background: #f0f0f0;
197
- padding: 20px;
198
- text-align: center;
199
- color: #666;
200
- font-size: 12px;
201
- margin-top: 40px;
202
- }
203
-
204
- @media (max-width: 768px) {
205
- header h1 { font-size: 24px; }
206
- .icons-grid {
207
- grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
208
- }
209
- .icon-glyph { font-size: 32px; }
210
- .search-box {
211
- flex-direction: column;
212
- }
213
- input[type="text"], select {
214
- min-width: auto;
215
- width: 100%;
216
- }
217
- }
218
- </style>
219
- </head>
220
- <body>
221
- <header>
222
- <h1>🎨 AG Icons Gallery</h1>
223
- <p>Complete collection of 362 professional icons across 20 categories</p>
224
- </header>
225
-
226
- <div class="controls">
227
- <div class="search-box">
228
- <input type="text" id="searchInput" placeholder="🔍 Search icons by name..." />
229
- <select id="categoryFilter">
230
- <option value="">All Categories</option>
231
- </select>
232
- </div>
233
- <div class="stats">
234
- <div class="stat">
235
- <span>Total Icons:</span>
236
- <span class="stat-value" id="totalCount">362</span>
237
- </div>
238
- <div class="stat">
239
- <span>Showing:</span>
240
- <span class="stat-value" id="showingCount">362</span>
241
- </div>
242
- <div class="stat">
243
- <span>Categories:</span>
244
- <span class="stat-value" id="categoryCount">20</span>
245
- </div>
246
- </div>
247
- </div>
248
-
249
- <div class="container" id="gallerContainer">
250
- <div class="no-results">Loading icons...</div>
251
- </div>
252
-
253
- <footer>
254
- <p>Click any icon to copy its CSS class name • All icons available in TTF, WOFF, WOFF2 formats</p>
255
- </footer>
256
-
257
- <div class="copy-notice" id="copyNotice">✓ Copied to clipboard!</div>
258
-
259
- <script>
260
- let allIcons = {};
261
- let filteredIcons = {};
262
-
263
- async function loadIcons() {
264
- try {
265
- const response = await fetch('ag-icons.json');
266
- allIcons = await response.json();
267
- filteredIcons = JSON.parse(JSON.stringify(allIcons));
268
- renderGallery();
269
- populateCategoryFilter();
270
- } catch (error) {
271
- console.error('Failed to load icons:', error);
272
- document.getElementById('gallerContainer').innerHTML =
273
- '<div class="no-results">Failed to load icons. Please ensure ag-icons.json is available.</div>';
274
- }
275
- }
276
-
277
- function populateCategoryFilter() {
278
- const select = document.getElementById('categoryFilter');
279
- const categories = Object.keys(allIcons).sort();
280
- categories.forEach(cat => {
281
- const option = document.createElement('option');
282
- option.value = cat;
283
- option.textContent = `${cat} (${Object.keys(allIcons[cat]).length})`;
284
- select.appendChild(option);
285
- });
286
- }
287
-
288
- function renderGallery() {
289
- const container = document.getElementById('gallerContainer');
290
- let html = '';
291
- let totalShown = 0;
292
-
293
- const categories = Object.keys(filteredIcons).sort();
294
-
295
- if (categories.length === 0) {
296
- container.innerHTML = '<div class="no-results">No icons match your search.</div>';
297
- document.getElementById('showingCount').textContent = '0';
298
- return;
299
- }
300
-
301
- categories.forEach(category => {
302
- const icons = filteredIcons[category];
303
- const iconCount = Object.keys(icons).length;
304
-
305
- if (iconCount === 0) return;
306
-
307
- totalShown += iconCount;
308
- html += `
309
- <div class="category-section">
310
- <div class="category-header">
311
- <h2 class="category-title">${category}</h2>
312
- <span class="category-count">${iconCount}</span>
313
- </div>
314
- <div class="icons-grid">
315
- `;
316
-
317
- Object.entries(icons).forEach(([name, data]) => {
318
- const classname = data.class;
319
- const glyph = data.glyph;
320
- html += `
321
- <div class="icon-card" onclick="copyToClipboard('${classname}')">
322
- <div class="icon-glyph"><i class="${classname}"></i></div>
323
- <div class="icon-name">${name}</div>
324
- <div class="icon-code">${classname}</div>
325
- </div>
326
- `;
327
- });
328
-
329
- html += `
330
- </div>
331
- </div>
332
- `;
333
- });
334
-
335
- container.innerHTML = html;
336
- document.getElementById('showingCount').textContent = totalShown;
337
- }
338
-
339
- function copyToClipboard(text) {
340
- navigator.clipboard.writeText(text).then(() => {
341
- const notice = document.getElementById('copyNotice');
342
- notice.classList.add('show');
343
- setTimeout(() => notice.classList.remove('show'), 2000);
344
- });
345
- }
346
-
347
- function filterIcons() {
348
- const searchTerm = document.getElementById('searchInput').value.toLowerCase();
349
- const selectedCategory = document.getElementById('categoryFilter').value;
350
-
351
- filteredIcons = {};
352
-
353
- Object.entries(allIcons).forEach(([category, icons]) => {
354
- if (selectedCategory && category !== selectedCategory) return;
355
-
356
- const filtered = {};
357
- Object.entries(icons).forEach(([name, data]) => {
358
- if (searchTerm === '' || name.toLowerCase().includes(searchTerm) ||
359
- data.class.toLowerCase().includes(searchTerm)) {
360
- filtered[name] = data;
361
- }
362
- });
363
-
364
- if (Object.keys(filtered).length > 0) {
365
- filteredIcons[category] = filtered;
366
- }
367
- });
368
-
369
- renderGallery();
370
- }
371
-
372
- document.getElementById('searchInput').addEventListener('input', filterIcons);
373
- document.getElementById('categoryFilter').addEventListener('change', filterIcons);
374
-
375
- // Load icons on page load
376
- loadIcons();
377
- </script>
378
- </body>
379
- </html>
@@ -1,174 +0,0 @@
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>AG Icons - All 362 Icons</title>
7
- <style>
8
- * { margin: 0; padding: 0; box-sizing: border-box; }
9
- body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #333; }
10
-
11
- .container { max-width: 1400px; margin: 0 auto; padding: 30px 20px; }
12
-
13
- header { background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
14
- h1 { font-size: 28px; margin-bottom: 10px; }
15
- .subtitle { color: #666; }
16
-
17
- .controls { background: white; padding: 20px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
18
- input, select { padding: 10px; border: 0.5px solid #ddd; border-radius: 4px; font-size: 14px; }
19
- input:focus, select:focus { outline: none; border-color: #4CAF50; }
20
-
21
- .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
22
- .stat { background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
23
- .stat-num { font-size: 32px; font-weight: bold; color: #4CAF50; }
24
- .stat-label { color: #999; font-size: 12px; margin-top: 5px; }
25
-
26
- .category { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
27
- .category-header { font-size: 18px; font-weight: 600; color: #333; border-bottom: 2px solid #4CAF50; padding-bottom: 10px; margin-bottom: 15px; }
28
-
29
- .icon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
30
- .icon-row { background: #f9f9f9; padding: 12px; border-radius: 4px; border: 1px solid #eee; }
31
- .icon-class { font-family: monospace; font-size: 12px; font-weight: 500; color: #333; word-break: break-all; }
32
- .icon-glyph { font-size: 11px; color: #999; margin-top: 4px; }
33
-
34
- .hidden { display: none !important; }
35
-
36
- @media (max-width: 768px) {
37
- .controls { grid-template-columns: 1fr; }
38
- .icon-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
39
- .stat { font-size: 14px; }
40
- .stat-num { font-size: 24px; }
41
- }
42
- </style>
43
- </head>
44
- <body>
45
- <div class="container">
46
- <header>
47
- <h1>🎨 AG Icons - Complete Library</h1>
48
- <p class="subtitle">All 362 icons with class names and glyph codes</p>
49
- </header>
50
-
51
- <div class="stats">
52
- <div class="stat">
53
- <div class="stat-num" id="totalCount">362</div>
54
- <div class="stat-label">Total Icons</div>
55
- </div>
56
- <div class="stat">
57
- <div class="stat-num" id="categoryCount">20</div>
58
- <div class="stat-label">Categories</div>
59
- </div>
60
- <div class="stat">
61
- <div class="stat-num" id="displayCount">362</div>
62
- <div class="stat-label">Displayed</div>
63
- </div>
64
- </div>
65
-
66
- <div class="controls">
67
- <input type="text" id="searchInput" placeholder="Search icon name or class..." />
68
- <select id="categoryFilter">
69
- <option value="">All Categories</option>
70
- </select>
71
- </div>
72
-
73
- <div id="content"></div>
74
- </div>
75
-
76
- <script>
77
- const iconData = {
78
- "account": { "account-balance": "f254", "account-box": "f253", "account-circle": "f252", "account_balance_wallet": "f251", "chart-user": "f250", "person": "f24f", "supervisor-account": "f24e", "supervisor": "f24d", "user-tie": "f24c", "user": "f24b", "users-solid": "f24a" },
79
- "actions": { "add": "f249", "backspace": "f248", "ban": "f247", "bookmark-solid": "f246", "check-circle-o": "f245", "circle-check-regular": "f244", "clear-all": "f243", "close": "f242", "compare": "f241", "content_copy": "f240", "delete-left": "f23f", "delete-right": "f23e", "delete": "f23d", "description": "f23c", "done-all": "f23b", "done": "f23a", "download": "f239", "edit": "f238", "error-outline": "f237", "favorite-outline": "f236", "favorite": "f235", "file-circle-plus": "f234", "file-pen": "f233", "file-pen1": "f232", "flipbook": "f231", "memo": "f230", "menu": "f22f", "more-vert": "f22e", "notifications": "f22d", "pdffile": "f22c", "pen": "f22b", "penfill": "f22a", "picture_in_picture": "f229", "print": "f228", "refresh": "f227", "remove": "f226", "save": "f225", "search": "f224", "select_all": "f223", "settings-input": "f222", "settings": "f221", "share": "f220", "thumb-up-alt": "f21f", "thumbs-down": "f21e", "thumbs-down1": "f21d", "thumbs-up": "f21c", "thumbs-up1": "f21b", "times-circle": "f21a", "trash-fill": "f219", "trash": "f218", "update": "f217", "upload": "f216", "visibility-off": "f215", "visibility": "f214" },
80
- "alignment": { "align-center": "f212", "align-justify": "f211", "align-left": "f210", "align-right": "f20f" },
81
- "color": { "blockquote": "f26a", "bold": "f269", "clean-format": "f268", "code-block": "f267", "color-background-fixed": "f257", "color-background": "f256", "color-lens": "f255" },
82
- "communication": { "chat": "f20b", "email": "f20a", "envelope-normal": "f209", "envelope-round": "f208", "envelope-square": "f207", "envelope": "f206", "phone-iphone": "f205", "phone-ring": "f204", "phone-round": "f203", "phone-square": "f202", "phone-square1": "f201", "phone": "f200", "phone1": "f1ff", "phone2": "f1fe" },
83
- "direction": { "direction-ltr": "f1fd", "direction-rtl": "f1fc" },
84
- "finance": { "attach-money": "f1fb", "briefcase-solid": "f1fa", "business": "f1f9", "chart-column": "f1f8", "dns": "f1f7", "enterprise-network": "f1f6", "loyalty": "f1f5", "trending-up": "f1f4" },
85
- "formatting": { "bold": "f1f3", "clean-format": "f1f2", "italic": "f1f1", "strikethrough": "f1f0", "subscript": "f1ef", "superscript": "f1ee", "underline": "f1ed" },
86
- "history": { "redo": "f1ec", "undo": "f1eb" },
87
- "insert": { "blockquote": "f1ea", "code-block": "f1e9", "formula": "f1e8", "image": "f1e7", "link": "f1e6" },
88
- "layout-ui": { "3d_rotation": "f1e4", "border-bottom": "f1e3", "draw-circle": "f1e2", "draw-polygon": "f1e1", "draw-square": "f1e0", "flip-horizontal": "f1df", "flip-vertical": "f1de", "grid": "f1dd", "grid-off": "f1dc", "margin": "f1db", "padding": "f1da", "rotate-left": "f1d9", "rotate-right": "f1d8", "text-fields": "f1d7", "view-agenda": "f1d6", "view-comfy": "f1d5", "view-list": "f1d4", "view-stream": "f1d3", "web": "f1d2" },
89
- "lists": { "indent-decrease": "f1d1", "indent-increase": "f1d0", "list-bullet": "f1cf", "list-ordered": "f1ce" },
90
- "location": { "city": "f1cd", "destination": "f1cc", "directions": "f1cb", "directionsbus": "f1ca", "driving": "f1c9", "edit-location": "f1c8", "ev-station": "f1c7", "flight-takeoff": "f1c6", "hotel": "f1c5", "layers": "f1c4", "layers-clear": "f1c3", "local-activity": "f1c2", "local-airport": "f1c1", "local-bar": "f1c0", "local-cafe": "f1bf", "local-dining": "f1be", "local-gas-station": "f1bd", "local-grocery-store": "f1bc", "local-hospital": "f1bb", "local-laundry-service": "f1ba", "local-library": "f1b9", "local-mall": "f1b8" },
91
- "media": { "camera1": "f1b7", "collectionsphoto-library": "f1b6", "imageupload": "f1b5", "pause": "f1b4", "play-circle-outline": "f1b3", "play": "f1b2", "recent-actors": "f1b1", "slideshow": "f1b0", "stop": "f1af" },
92
- "misc": { "alarm-clock": "f1ae", "book-open-cover": "f1ad", "chrome-reader-mode": "f1ac", "cloud_download": "f1ab", "color-lenspalette": "f1aa", "dashboard": "f1a9", "data-usage": "f1a8", "dev-icons": "f1a7", "devices": "f1a6", "devices-other": "f1a5", "event-note": "f1a4", "extension": "f1a3", "find-in-page": "f1a2", "fingerprint": "f1a1", "get-app": "f1a0", "gif": "f19f", "grade": "f19e", "group-work": "f19d", "highlight-off": "f19c", "input": "f19b", "language": "f19a", "lightbulb": "f199", "line-style": "f198", "line-weight": "f197", "loyalty": "f196" },
93
- "navigation": { "angle-double-left": "f195", "angle-double-right": "f194", "arrow-down-arrow-up": "f193", "arrow-down-short-wide": "f192", "arrow-down": "f191", "arrow-left": "f190", "arrow-right": "f18f", "arrow-up": "f18e", "arrows-alt-h": "f18d", "arrows-alt-v": "f18c", "arrows-alt": "f18b", "arrows-h": "f18a", "arrows-v": "f189", "bars": "f188", "chevron-circle-down": "f187", "chevron-circle-left": "f186", "chevron-circle-right": "f185", "chevron-circle-up": "f184", "chevron-down": "f183", "chevron-left": "f182", "chevron-right": "f181", "chevron-up": "f180", "caret-down": "f17f", "caret-left": "f17e", "caret-right": "f17d", "caret-up": "f17c" },
94
- "real-estate": { "acres": "f17a", "bath": "f179", "bathtub": "f178", "bed": "f177", "bed1": "f176", "bedroom": "f175", "buildings": "f174", "cabin": "f173", "door": "f172", "door-sliding": "f171", "door-swinging": "f170", "doorbell": "f16f", "fence": "f16e", "garage": "f16d", "garage-door": "f16c", "garage-open": "f16b", "gate": "f16a", "gazebo": "f169", "guest-house": "f168" },
95
- "social-media": { "Al": "f166", "Instagram-round": "f165", "Messenger-round": "f164", "Messenger-square": "f163", "Snapchat-round": "f162", "Snapchat-square": "f161", "Telegram-round": "f160", "Telegram-square": "f15f", "Viber-round": "f15e", "Viber-square": "f15d", "Whatsapp-round": "f15c", "Whatsapp-square": "f15b", "facebook-box": "f15a", "facebook-f": "f159", "facebook": "f158", "google": "f157", "instagram": "f156", "linkedin": "f155", "pinterest-box": "f154", "pinterest-p": "f153", "pinterest": "f152", "reddit": "f151", "skype": "f150", "slack-hashtag": "f14f", "snapchat": "f14e", "spotify": "f14d", "telegram": "f14c", "twitter": "f14b", "vimeo": "f14a", "vine": "f149", "whatsapp": "f148", "youtube-play": "f147", "youtube": "f146" },
96
- "text-editor": { "align-center": "f130", "align-justify": "f12f", "align-left": "f12e", "align-right": "f12d", "blockquote": "f12c", "bold": "f12b", "clean-format": "f12a", "code-block": "f129", "color-background": "f128", "color-text": "f127", "direction-ltr": "f126", "direction-rtl": "f125", "edit": "f124", "format-clear": "f123", "header": "f122", "header-1": "f121", "header-2": "f120", "header-3": "f11f", "header-4": "f11e", "header-5": "f11d", "header-6": "f11c", "highlight": "f11b", "indent-decrease": "f11a", "indent-increase": "f119", "italic": "f118", "link": "f117", "list-bullet": "f116", "list-ordered": "f115", "picker-arrows": "f114", "redo": "f113", "strikethrough": "f112", "subscript": "f111", "superscript": "f110", "underline": "f10f", "undo": "f10e" },
97
- "weather": { "wi-day-cloudy": "f114", "wi-day-rain-mix": "f113", "wi-day-rain": "f112", "wi-day-sleet-storm": "f111", "wi-day-storm-showers": "f110", "wi-day-sunny": "f10f", "wi-day-thunderstorm": "f10e", "wi-dewpoint": "f10d", "wi-humidity": "f10c", "wi-night-alt-cloudy": "f10b", "wi-night-alt-rain-mix": "f10a", "wi-night-alt-thunderstorm": "f109", "wi-night-clear": "f108", "wi-night-rain": "f107", "wi-night-sleet-storm": "f106", "wi-night-storm-showers": "f105", "wi-raindrop": "f104", "wi-strong-wind": "f103", "wi-thermometer": "f102" }
98
- };
99
-
100
- const searchInput = document.getElementById('searchInput');
101
- const categoryFilter = document.getElementById('categoryFilter');
102
- const content = document.getElementById('content');
103
- const displayCount = document.getElementById('displayCount');
104
-
105
- // Populate category filter
106
- Object.keys(iconData).sort().forEach(cat => {
107
- const option = document.createElement('option');
108
- option.value = cat;
109
- option.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
110
- categoryFilter.appendChild(option);
111
- });
112
-
113
- function renderIcons() {
114
- const searchTerm = searchInput.value.toLowerCase();
115
- const selectedCategory = categoryFilter.value;
116
-
117
- content.innerHTML = '';
118
- let displayedCount = 0;
119
-
120
- Object.keys(iconData).sort().forEach(category => {
121
- if (selectedCategory && selectedCategory !== category) return;
122
-
123
- const icons = iconData[category];
124
- const filteredIcons = Object.entries(icons).filter(([name, glyph]) => {
125
- const className = `aga-${category}-${name}`;
126
- return name.includes(searchTerm) || className.includes(searchTerm);
127
- });
128
-
129
- if (filteredIcons.length === 0) return;
130
-
131
- const categoryDiv = document.createElement('div');
132
- categoryDiv.className = 'category';
133
-
134
- const header = document.createElement('div');
135
- header.className = 'category-header';
136
- header.textContent = `${category.charAt(0).toUpperCase() + category.slice(1)} (${filteredIcons.length})`;
137
- categoryDiv.appendChild(header);
138
-
139
- const list = document.createElement('div');
140
- list.className = 'icon-list';
141
-
142
- filteredIcons.forEach(([name, glyph]) => {
143
- const className = `aga-${category}-${name}`;
144
- const row = document.createElement('div');
145
- row.className = 'icon-row';
146
- row.innerHTML = `
147
- <div class="icon-class">${className}</div>
148
- <div class="icon-glyph">\\${glyph}</div>
149
- `;
150
- row.style.cursor = 'pointer';
151
- row.onclick = () => {
152
- navigator.clipboard.writeText(className);
153
- row.style.background = '#e8f5e9';
154
- setTimeout(() => { row.style.background = '#f9f9f9'; }, 200);
155
- };
156
- list.appendChild(row);
157
- displayedCount++;
158
- });
159
-
160
- categoryDiv.appendChild(list);
161
- content.appendChild(categoryDiv);
162
- });
163
-
164
- displayCount.textContent = displayedCount;
165
- }
166
-
167
- searchInput.addEventListener('input', renderIcons);
168
- categoryFilter.addEventListener('change', renderIcons);
169
-
170
- // Initial render
171
- renderIcons();
172
- </script>
173
- </body>
174
- </html>