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,163 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>AG Icons Font Debug</title>
6
- <link rel="stylesheet" href="ag-icons.css">
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- padding: 40px;
11
- background: #f5f5f5;
12
- line-height: 1.6;
13
- }
14
- .test-section {
15
- background: white;
16
- padding: 20px;
17
- margin: 20px 0;
18
- border-radius: 8px;
19
- border-left: 4px solid #4CAF50;
20
- }
21
- .test-row {
22
- display: grid;
23
- grid-template-columns: 100px 1fr 1fr;
24
- gap: 20px;
25
- padding: 15px;
26
- border-bottom: 1px solid #eee;
27
- align-items: center;
28
- }
29
- .test-row:last-child { border-bottom: none; }
30
- .icon-cell {
31
- font-size: 32px;
32
- min-height: 40px;
33
- display: flex;
34
- align-items: center;
35
- justify-content: center;
36
- }
37
- .code-cell {
38
- font-family: monospace;
39
- font-size: 12px;
40
- color: #666;
41
- }
42
- h2 { margin-top: 30px; }
43
- .font-check {
44
- font-family: ag-icons;
45
- font-size: 24px;
46
- }
47
- </style>
48
- </head>
49
- <body>
50
- <h1>🔍 AG Icons Font Debugging</h1>
51
-
52
- <div class="test-section">
53
- <h2>Test 1: CSS :before Pseudo-Elements</h2>
54
- <p>These use the ag-icons.css stylesheet with :before content</p>
55
- <div class="test-row">
56
- <div class="code-cell">CSS</div>
57
- <div class="code-cell">Icon Class</div>
58
- <div class="icon-cell">
59
- <i class="aga-actions-add"></i>
60
- </div>
61
- </div>
62
- <div class="test-row">
63
- <div class="code-cell">Expected: ✓</div>
64
- <div class="code-cell">aga-actions-add</div>
65
- <div class="icon-cell">
66
- <i class="aga-actions-search"></i>
67
- </div>
68
- </div>
69
- <div class="test-row">
70
- <div class="code-cell">Codepoint: f1f5</div>
71
- <div class="code-cell">aga-weather-wi-sunny</div>
72
- <div class="icon-cell">
73
- <i class="aga-weather-wi-day-sunny"></i>
74
- </div>
75
- </div>
76
- </div>
77
-
78
- <div class="test-section">
79
- <h2>Test 2: Direct HTML Entity (CSS Font Applied)</h2>
80
- <p>Using HTML entities with ag-icons font applied directly</p>
81
- <div class="test-row">
82
- <div class="code-cell">&#xf101;</div>
83
- <div class="code-cell">Glyph f101</div>
84
- <div class="icon-cell font-check">&#xf101;</div>
85
- </div>
86
- <div class="test-row">
87
- <div class="code-cell">&#xf102;</div>
88
- <div class="code-cell">Glyph f102</div>
89
- <div class="icon-cell font-check">&#xf102;</div>
90
- </div>
91
- <div class="test-row">
92
- <div class="code-cell">&#xf254;</div>
93
- <div class="code-cell">Glyph f254</div>
94
- <div class="icon-cell font-check">&#xf254;</div>
95
- </div>
96
- <div class="test-row">
97
- <div class="code-cell">&#x61697;</div>
98
- <div class="code-cell">Glyph 61697 (decimal)</div>
99
- <div class="icon-cell font-check">&#x61697;</div>
100
- </div>
101
- </div>
102
-
103
- <div class="test-section">
104
- <h2>Test 3: Font @font-face Declaration</h2>
105
- <pre style="background: #f5f5f5; padding: 10px; overflow-x: auto;">
106
- @font-face {
107
- font-family: 'ag-icons';
108
- src: url('./ag-icons.woff2') format('woff2'),
109
- url('./ag-icons.woff') format('woff'),
110
- url('./ag-icons.ttf') format('truetype');
111
- }
112
- </pre>
113
- <p style="color: #666; margin-top: 10px;">
114
- Check browser DevTools > Network tab:
115
- <ul>
116
- <li>✓ ag-icons.woff2 should show 200 OK</li>
117
- <li>✓ ag-icons.css should show 200 OK</li>
118
- <li>Check Font tab in DevTools to see what glyphs are in the font</li>
119
- </ul>
120
- </p>
121
- </div>
122
-
123
- <div class="test-section">
124
- <h2>Test 4: Debugging Info</h2>
125
- <p>Open DevTools (F12) and check:</p>
126
- <ul>
127
- <li><strong>Console tab:</strong> Look for any CSS/font loading errors</li>
128
- <li><strong>Network tab:</strong> Check that ag-icons.woff2, ag-icons.css load with 200 status</li>
129
- <li><strong>Elements tab:</strong> Inspect the icons to see what content is being rendered</li>
130
- <li><strong>Application > Fonts:</strong> Check which fonts are available</li>
131
- </ul>
132
- <p style="background: #fff3cd; padding: 10px; border-radius: 4px;">
133
- <strong>Note:</strong> If Test 2 doesn't show any glyphs, the font file may not contain the expected glyphs or is corrupted.
134
- </p>
135
- </div>
136
-
137
- <div class="test-section">
138
- <h2>Test 5: Font File Info</h2>
139
- <ul>
140
- <li>Font file: ag-icons.woff2 (28 KB)</li>
141
- <li>CSS file: ag-icons.css (19 KB)</li>
142
- <li>Total icons: 362</li>
143
- <li>Starting codepoint: f101 (61697)</li>
144
- <li>Ending codepoint: f26e (62062)</li>
145
- <li>Font family name: ag-icons</li>
146
- <li>Prefix: aga-</li>
147
- </ul>
148
- </div>
149
-
150
- <script>
151
- console.log('Debugging AG Icons Font...');
152
- console.log('Font files loaded from:', window.location.href);
153
-
154
- // Try to detect if font is loaded
155
- const testEl = document.createElement('span');
156
- testEl.style.fontFamily = 'ag-icons';
157
- testEl.textContent = '';
158
- document.body.appendChild(testEl);
159
- const fontLoaded = window.getComputedStyle(testEl).fontFamily.includes('ag-icons');
160
- console.log('ag-icons font available:', fontLoaded);
161
- </script>
162
- </body>
163
- </html>
@@ -1,58 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Direct Icon Test</title>
6
- <link rel="stylesheet" href="ag-icons.css">
7
- <style>
8
- body { font-family: Arial; padding: 40px; background: #f5f5f5; }
9
- .test-group { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; }
10
- .icon { font-size: 64px; display: inline-block; margin: 10px; }
11
- h2 { color: #333; }
12
- </style>
13
- </head>
14
- <body>
15
- <h1>🎨 Direct Icon Font Test</h1>
16
-
17
- <div class="test-group">
18
- <h2>Actions Category (Aligned Icons)</h2>
19
- <p>Testing icons that should have agorafont glyphs (e9xx range):</p>
20
- <div>
21
- <span class="icon aga-actions-add" title="add"></span>
22
- <span class="icon aga-actions-backspace" title="backspace"></span>
23
- <span class="icon aga-actions-delete" title="delete"></span>
24
- <span class="icon aga-actions-edit" title="edit"></span>
25
- </div>
26
- </div>
27
-
28
- <div class="test-group">
29
- <h2>Account Category (Aligned Icons)</h2>
30
- <div>
31
- <span class="icon aga-account-balance" title="balance"></span>
32
- <span class="icon aga-account-box" title="box"></span>
33
- <span class="icon aga-account-circle" title="circle"></span>
34
- <span class="icon aga-account-person" title="person"></span>
35
- </div>
36
- </div>
37
-
38
- <div class="test-group">
39
- <h2>Text Editor Category (Non-Aligned - Old Icons)</h2>
40
- <p>These should show old font icons (f1xx range):</p>
41
- <div>
42
- <span class="icon aga-text-editor-video" title="video"></span>
43
- <span class="icon aga-text-editor-undo" title="undo"></span>
44
- <span class="icon aga-text-editor-redo" title="redo"></span>
45
- </div>
46
- </div>
47
-
48
- <div class="test-group">
49
- <h2>Raw Unicode Tests</h2>
50
- <p>Testing raw Unicode values:</p>
51
- <div>
52
- <p>Account Balance (0xe93c): <span style="font-family: ag-icons; font-size: 32px;">&#xe93c;</span></p>
53
- <p>Actions Add (0xe90e): <span style="font-family: ag-icons; font-size: 32px;">&#xe90e;</span></p>
54
- <p>Text Editor Video (0xf115): <span style="font-family: ag-icons; font-size: 32px;">&#xf115;</span></p>
55
- </div>
56
- </div>
57
- </body>
58
- </html>
@@ -1,79 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Final Icon Test</title>
6
- <link rel="stylesheet" href="ag-icons.css">
7
- <style>
8
- body { font-family: Arial; padding: 40px; background: #f5f5f5; }
9
- .test { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; }
10
- .icons { display: flex; gap: 20px; flex-wrap: wrap; }
11
- .icon { font-size: 48px; text-align: center; }
12
- .label { font-size: 12px; color: #666; margin-top: 5px; }
13
- </style>
14
- </head>
15
- <body>
16
- <h1>🎨 Final Icon Rendering Test</h1>
17
-
18
- <div class="test">
19
- <h2>Weather Category (Aligned to agorafont)</h2>
20
- <div class="icons">
21
- <div class="icon">
22
- <i class="aga-weather-wi-thermometer"></i>
23
- <div class="label">wi-thermometer</div>
24
- </div>
25
- <div class="icon">
26
- <i class="aga-weather-wi-strong-wind"></i>
27
- <div class="label">wi-strong-wind</div>
28
- </div>
29
- <div class="icon">
30
- <i class="aga-weather-wi-raindrop"></i>
31
- <div class="label">wi-raindrop</div>
32
- </div>
33
- </div>
34
- </div>
35
-
36
- <div class="test">
37
- <h2>Actions Category</h2>
38
- <div class="icons">
39
- <div class="icon">
40
- <i class="aga-actions-add"></i>
41
- <div class="label">add</div>
42
- </div>
43
- <div class="icon">
44
- <i class="aga-actions-edit"></i>
45
- <div class="label">edit</div>
46
- </div>
47
- <div class="icon">
48
- <i class="aga-actions-delete"></i>
49
- <div class="label">delete</div>
50
- </div>
51
- </div>
52
- </div>
53
-
54
- <div class="test">
55
- <h2>Test Results</h2>
56
- <p id="results">Checking font rendering...</p>
57
- </div>
58
-
59
- <script>
60
- // Test if glyphs are rendering
61
- setTimeout(() => {
62
- const icon = document.querySelector('.aga-weather-wi-thermometer');
63
- const style = window.getComputedStyle(icon, ':before');
64
- const content = style.content;
65
-
66
- let result = `Font Family: ${style.fontFamily}<br>`;
67
- result += `Content: ${content}<br>`;
68
-
69
- if (content && content !== 'none' && content !== '""') {
70
- result += '✅ Icons should be rendering!';
71
- } else {
72
- result += '⚠️ Icons may not be rendering (content empty)';
73
- }
74
-
75
- document.getElementById('results').innerHTML = result;
76
- }, 500);
77
- </script>
78
- </body>
79
- </html>
@@ -1,195 +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 Preview - All 362 Icons</title>
7
- <style>
8
- @font-face {
9
- font-family: 'ag-icons';
10
- font-display: swap;
11
- font-style: normal;
12
- font-weight: 400;
13
- src: url('./ag-icons.woff2') format('woff2'),
14
- url('./ag-icons.woff') format('woff'),
15
- url('./ag-icons.ttf') format('truetype');
16
- }
17
-
18
- * { margin: 0; padding: 0; box-sizing: border-box; }
19
- body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #333; }
20
-
21
- .container { max-width: 1400px; margin: 0 auto; padding: 30px 20px; }
22
-
23
- header { background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
24
- h1 { font-size: 28px; margin-bottom: 10px; }
25
-
26
- .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; }
27
- input, select { padding: 10px; border: 0.5px solid #ddd; border-radius: 4px; font-size: 14px; }
28
-
29
- .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
30
- .stat { background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
31
- .stat-num { font-size: 32px; font-weight: bold; color: #4CAF50; }
32
- .stat-label { color: #999; font-size: 12px; margin-top: 5px; }
33
-
34
- .category { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
35
- .category-header { font-size: 18px; font-weight: 600; color: #333; border-bottom: 2px solid #4CAF50; padding-bottom: 10px; margin-bottom: 15px; }
36
-
37
- .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; }
38
- .icon-box { background: #f9f9f9; padding: 15px; border-radius: 4px; border: 1px solid #eee; text-align: center; cursor: pointer; transition: all 0.2s; }
39
- .icon-box:hover { background: #e8f5e9; border-color: #4CAF50; }
40
- .icon-display { font-size: 48px; margin-bottom: 10px; min-height: 60px; display: flex; align-items: center; justify-content: center; }
41
- .icon-name { font-size: 11px; color: #666; word-break: break-word; margin-bottom: 5px; }
42
- .icon-class { font-size: 10px; color: #999; font-family: monospace; word-break: break-all; }
43
-
44
- .hidden { display: none !important; }
45
-
46
- @media (max-width: 768px) {
47
- .controls { grid-template-columns: 1fr; }
48
- .icon-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
49
- .icon-display { font-size: 32px; }
50
- }
51
- </style>
52
- </head>
53
- <body>
54
- <div class="container">
55
- <header>
56
- <h1>🎨 AG Icons - Visual Preview</h1>
57
- <p>All 362 icons with live preview - Click any icon to copy class name</p>
58
- </header>
59
-
60
- <div class="stats">
61
- <div class="stat">
62
- <div class="stat-num">362</div>
63
- <div class="stat-label">Total Icons</div>
64
- </div>
65
- <div class="stat">
66
- <div class="stat-num">20</div>
67
- <div class="stat-label">Categories</div>
68
- </div>
69
- <div class="stat">
70
- <div class="stat-num" id="displayCount">362</div>
71
- <div class="stat-label">Displayed</div>
72
- </div>
73
- </div>
74
-
75
- <div class="controls">
76
- <input type="text" id="searchInput" placeholder="Search icon name..." />
77
- <select id="categoryFilter">
78
- <option value="">All Categories</option>
79
- </select>
80
- </div>
81
-
82
- <div id="content"></div>
83
- </div>
84
-
85
- <script>
86
- const iconData = {
87
- "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" },
88
- "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" },
89
- "alignment": { "align-center": "f212", "align-justify": "f211", "align-left": "f210", "align-right": "f20f" },
90
- "color": { "blockquote": "f26a", "bold": "f269", "clean-format": "f268", "code-block": "f267", "color-background-fixed": "f257", "color-background": "f256", "color-lens": "f255" },
91
- "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" },
92
- "direction": { "direction-ltr": "f1fd", "direction-rtl": "f1fc" },
93
- "finance": { "attach-money": "f1fb", "briefcase-solid": "f1fa", "business": "f1f9", "chart-column": "f1f8", "dns": "f1f7", "enterprise-network": "f1f6", "loyalty": "f1f5", "trending-up": "f1f4" },
94
- "formatting": { "bold": "f1f3", "clean-format": "f1f2", "italic": "f1f1", "strikethrough": "f1f0", "subscript": "f1ef", "superscript": "f1ee", "underline": "f1ed" },
95
- "history": { "redo": "f1ec", "undo": "f1eb" },
96
- "insert": { "blockquote": "f1ea", "code-block": "f1e9", "formula": "f1e8", "image": "f1e7", "link": "f1e6" },
97
- "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" },
98
- "lists": { "indent-decrease": "f1d1", "indent-increase": "f1d0", "list-bullet": "f1cf", "list-ordered": "f1ce" },
99
- "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" },
100
- "media": { "camera1": "f1b7", "collectionsphoto-library": "f1b6", "imageupload": "f1b5", "pause": "f1b4", "play-circle-outline": "f1b3", "play": "f1b2", "recent-actors": "f1b1", "slideshow": "f1b0", "stop": "f1af" },
101
- "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" },
102
- "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" },
103
- "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" },
104
- "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" },
105
- "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" },
106
- "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" }
107
- };
108
-
109
- const searchInput = document.getElementById('searchInput');
110
- const categoryFilter = document.getElementById('categoryFilter');
111
- const content = document.getElementById('content');
112
- const displayCount = document.getElementById('displayCount');
113
-
114
- // Populate category filter
115
- Object.keys(iconData).sort().forEach(cat => {
116
- const option = document.createElement('option');
117
- option.value = cat;
118
- option.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
119
- categoryFilter.appendChild(option);
120
- });
121
-
122
- function renderIcons() {
123
- const searchTerm = searchInput.value.toLowerCase();
124
- const selectedCategory = categoryFilter.value;
125
-
126
- content.innerHTML = '';
127
- let displayedCount = 0;
128
-
129
- Object.keys(iconData).sort().forEach(category => {
130
- if (selectedCategory && selectedCategory !== category) return;
131
-
132
- const icons = iconData[category];
133
- const filteredIcons = Object.entries(icons).filter(([name, glyph]) => {
134
- const className = `aga-${category}-${name}`;
135
- return name.includes(searchTerm) || className.includes(searchTerm);
136
- });
137
-
138
- if (filteredIcons.length === 0) return;
139
-
140
- const categoryDiv = document.createElement('div');
141
- categoryDiv.className = 'category';
142
-
143
- const header = document.createElement('div');
144
- header.className = 'category-header';
145
- header.textContent = `${category.charAt(0).toUpperCase() + category.slice(1)} (${filteredIcons.length})`;
146
- categoryDiv.appendChild(header);
147
-
148
- const grid = document.createElement('div');
149
- grid.className = 'icon-grid';
150
-
151
- filteredIcons.forEach(([name, glyph]) => {
152
- const className = `aga-${category}-${name}`;
153
- const box = document.createElement('div');
154
- box.className = 'icon-box';
155
-
156
- const display = document.createElement('div');
157
- display.className = 'icon-display';
158
- display.innerHTML = `<i style="font-family: ag-icons; font-size: 48px;">&#x${glyph};</i>`;
159
-
160
- const nameEl = document.createElement('div');
161
- nameEl.className = 'icon-name';
162
- nameEl.textContent = name;
163
-
164
- const classEl = document.createElement('div');
165
- classEl.className = 'icon-class';
166
- classEl.textContent = className;
167
-
168
- box.appendChild(display);
169
- box.appendChild(nameEl);
170
- box.appendChild(classEl);
171
-
172
- box.onclick = () => {
173
- navigator.clipboard.writeText(className);
174
- box.style.background = '#e8f5e9';
175
- setTimeout(() => { box.style.background = '#f9f9f9'; }, 200);
176
- };
177
-
178
- grid.appendChild(box);
179
- displayedCount++;
180
- });
181
-
182
- categoryDiv.appendChild(grid);
183
- content.appendChild(categoryDiv);
184
- });
185
-
186
- displayCount.textContent = displayedCount;
187
- }
188
-
189
- searchInput.addEventListener('input', renderIcons);
190
- categoryFilter.addEventListener('change', renderIcons);
191
-
192
- renderIcons();
193
- </script>
194
- </body>
195
- </html>