ag-design 1.0.89 → 1.0.98

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 (43) 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/base.css +38 -0
  8. package/fonts/ag-icons.css +493 -493
  9. package/fonts/ag-icons.json +1668 -1668
  10. package/fonts/ag-icons.ttf +0 -0
  11. package/fonts/ag-icons.woff +0 -0
  12. package/fonts/ag-icons.woff2 +0 -0
  13. package/fonts/icon-gallery.html +366 -0
  14. package/index.css +1 -1
  15. package/package.json +1 -1
  16. package/assets/static/fonts/all-icons-gallery.html +0 -379
  17. package/assets/static/fonts/all-icons.html +0 -174
  18. package/assets/static/fonts/debug-fonts.html +0 -163
  19. package/assets/static/fonts/direct-test.html +0 -58
  20. package/assets/static/fonts/final-test.html +0 -79
  21. package/assets/static/fonts/icon-preview.html +0 -195
  22. package/assets/static/fonts/index.html +0 -194
  23. package/assets/static/fonts/preview.html +0 -391
  24. package/assets/static/fonts/simple-test.html +0 -73
  25. package/assets/static/fonts/simplified-test.html +0 -67
  26. package/assets/static/fonts/standalone.html +0 -268
  27. package/assets/static/fonts/test-glyph.html +0 -50
  28. package/assets/static/fonts/test-icon.html +0 -33
  29. package/assets/static/fonts/test.html +0 -38
  30. package/fonts/all-icons-gallery.html +0 -379
  31. package/fonts/all-icons.html +0 -174
  32. package/fonts/debug-fonts.html +0 -163
  33. package/fonts/direct-test.html +0 -58
  34. package/fonts/final-test.html +0 -79
  35. package/fonts/icon-preview.html +0 -195
  36. package/fonts/index.html +0 -194
  37. package/fonts/preview.html +0 -391
  38. package/fonts/simple-test.html +0 -73
  39. package/fonts/simplified-test.html +0 -67
  40. package/fonts/standalone.html +0 -268
  41. package/fonts/test-glyph.html +0 -50
  42. package/fonts/test-icon.html +0 -33
  43. 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>