ag-design 1.0.82 → 1.0.83

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.
@@ -0,0 +1,194 @@
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 Font - Complete Package</title>
7
+ <style>
8
+ @font-face {
9
+ font-family: 'ag-icons';
10
+ src: url('./ag-icons.woff2') format('woff2'),
11
+ url('./ag-icons.woff') format('woff'),
12
+ url('./ag-icons.ttf') format('truetype');
13
+ font-weight: 400;
14
+ font-style: normal;
15
+ font-display: swap;
16
+ }
17
+
18
+ * { margin: 0; padding: 0; box-sizing: border-box; }
19
+ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8f8f8; color: #333; }
20
+
21
+ .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
22
+ header { background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
23
+ h1 { font-size: 32px; margin-bottom: 10px; }
24
+ .subtitle { color: #666; font-size: 16px; }
25
+
26
+ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
27
+
28
+ .card { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
29
+ .card h2 { font-size: 20px; margin-bottom: 20px; border-bottom: 2px solid #4CAF50; padding-bottom: 10px; }
30
+
31
+ .files-list { list-style: none; }
32
+ .files-list li { padding: 10px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
33
+ .files-list li:last-child { border-bottom: none; }
34
+ .file-name { font-family: monospace; font-weight: 500; }
35
+ .file-size { color: #999; font-size: 12px; }
36
+
37
+ .download-btn { display: inline-block; background: #4CAF50; color: white; padding: 10px 20px; border-radius: 4px; text-decoration: none; margin-top: 15px; }
38
+ .download-btn:hover { background: #45a049; }
39
+
40
+ .code-block { background: #f5f5f5; border-left: 4px solid #4CAF50; padding: 15px; font-family: monospace; font-size: 12px; overflow-x: auto; margin-top: 15px; }
41
+
42
+ .icon-preview { margin-top: 30px; }
43
+ .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; margin-top: 20px; }
44
+ .icon-item { text-align: center; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
45
+ .icon-display { font-size: 36px; margin-bottom: 10px; }
46
+ .icon-name { font-size: 12px; color: #666; word-break: break-word; }
47
+
48
+ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
49
+ .stat-box { background: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
50
+ .stat-num { font-size: 32px; font-weight: bold; color: #4CAF50; }
51
+ .stat-label { color: #999; font-size: 12px; margin-top: 5px; }
52
+
53
+ .usage-section { background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
54
+ .usage-section h2 { font-size: 20px; margin-bottom: 20px; border-bottom: 2px solid #4CAF50; padding-bottom: 10px; }
55
+ .step { margin-bottom: 20px; }
56
+ .step-title { font-weight: bold; margin-bottom: 8px; }
57
+ </style>
58
+ </head>
59
+ <body>
60
+ <div class="container">
61
+ <header>
62
+ <h1>🎨 AG Icons Font Package</h1>
63
+ <p class="subtitle">Complete icon font library with 362 icons across 20 categories</p>
64
+ </header>
65
+
66
+ <div class="stats">
67
+ <div class="stat-box">
68
+ <div class="stat-num">362</div>
69
+ <div class="stat-label">Total Icons</div>
70
+ </div>
71
+ <div class="stat-box">
72
+ <div class="stat-num">20</div>
73
+ <div class="stat-label">Categories</div>
74
+ </div>
75
+ <div class="stat-box">
76
+ <div class="stat-num">3</div>
77
+ <div class="stat-label">Font Formats</div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="grid">
82
+ <div class="card">
83
+ <h2>📦 Font Files</h2>
84
+ <ul class="files-list">
85
+ <li>
86
+ <span class="file-name">ag-icons.ttf</span>
87
+ <span class="file-size">68 KB</span>
88
+ </li>
89
+ <li>
90
+ <span class="file-name">ag-icons.woff</span>
91
+ <span class="file-size">34 KB</span>
92
+ </li>
93
+ <li>
94
+ <span class="file-name">ag-icons.woff2</span>
95
+ <span class="file-size">28 KB</span>
96
+ </li>
97
+ </ul>
98
+ <div class="code-block">
99
+ /* Include CSS in your HTML */
100
+ &lt;link rel="stylesheet" href="ag-icons.css"&gt;
101
+ </div>
102
+ </div>
103
+
104
+ <div class="card">
105
+ <h2>📄 CSS Code</h2>
106
+ <div class="code-block">
107
+ @font-face {
108
+ font-family: 'ag-icons';
109
+ src: url('./ag-icons.woff2') format('woff2'),
110
+ url('./ag-icons.woff') format('woff'),
111
+ url('./ag-icons.ttf') format('truetype');
112
+ }
113
+
114
+ [class^='aga-'],[class*=' aga-'] {
115
+ font-family: ag-icons !important;
116
+ speak: none;
117
+ font-style: normal;
118
+ font-variant: normal;
119
+ font-weight: 400;
120
+ line-height: 1;
121
+ text-transform: none;
122
+ -webkit-font-smoothing: antialiased;
123
+ -moz-osx-font-smoothing: grayscale;
124
+ }
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="usage-section">
130
+ <h2>📖 How to Use</h2>
131
+
132
+ <div class="step">
133
+ <div class="step-title">Step 1: Include the CSS file</div>
134
+ <div class="code-block">
135
+ &lt;link rel="stylesheet" href="path/to/ag-icons.css"&gt;
136
+ </div>
137
+ </div>
138
+
139
+ <div class="step">
140
+ <div class="step-title">Step 2: Use icon classes in HTML</div>
141
+ <div class="code-block">
142
+ &lt;i class="aga-actions-add"&gt;&lt;/i&gt;
143
+ &lt;i class="aga-account-user"&gt;&lt;/i&gt;
144
+ &lt;i class="aga-communication-email"&gt;&lt;/i&gt;
145
+ </div>
146
+ </div>
147
+
148
+ <div class="step">
149
+ <div class="step-title">Step 3: Icons render as glyphs</div>
150
+ <div style="padding: 20px; background: #f9f9f9; border-radius: 4px; margin-top: 10px;">
151
+ <i class="aga-actions-add" style="font-size: 24px; margin-right: 10px;"></i>
152
+ <i class="aga-account-user" style="font-size: 24px; margin-right: 10px;"></i>
153
+ <i class="aga-communication-email" style="font-size: 24px;"></i>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="card">
159
+ <h2>🔍 Icon Preview (Sample - See preview.html for full list)</h2>
160
+ <div class="icon-grid" id="iconGrid"></div>
161
+ </div>
162
+ </div>
163
+
164
+ <script>
165
+ // Sample icons to display
166
+ const sampleIcons = [
167
+ { name: 'add', class: 'aga-actions-add', code: 'f249' },
168
+ { name: 'user', class: 'aga-account-user', code: 'f24b' },
169
+ { name: 'email', class: 'aga-communication-email', code: 'f20a' },
170
+ { name: 'search', class: 'aga-actions-search', code: 'f224' },
171
+ { name: 'menu', class: 'aga-actions-menu', code: 'f22f' },
172
+ { name: 'settings', class: 'aga-actions-settings', code: 'f221' },
173
+ { name: 'delete', class: 'aga-actions-delete', code: 'f23d' },
174
+ { name: 'download', class: 'aga-actions-download', code: 'f239' },
175
+ { name: 'upload', class: 'aga-actions-upload', code: 'f216' },
176
+ { name: 'edit', class: 'aga-actions-edit', code: 'f238' },
177
+ { name: 'save', class: 'aga-actions-save', code: 'f225' },
178
+ { name: 'refresh', class: 'aga-actions-refresh', code: 'f227' },
179
+ ];
180
+
181
+ const grid = document.getElementById('iconGrid');
182
+ sampleIcons.forEach(icon => {
183
+ const item = document.createElement('div');
184
+ item.className = 'icon-item';
185
+ item.innerHTML = `
186
+ <div class="icon-display"><i class="${icon.class}"></i></div>
187
+ <div class="icon-name">${icon.name}</div>
188
+ <div style="font-size: 10px; color: #999;">\\${icon.code}</div>
189
+ `;
190
+ grid.appendChild(item);
191
+ });
192
+ </script>
193
+ </body>
194
+ </html>
@@ -0,0 +1,391 @@
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 Font Preview</title>
7
+ <style>
8
+ @font-face {
9
+ font-family: 'ag-icons';
10
+ src: url('/src/assets/static/fonts/ag-icons.woff2') format('woff2'),
11
+ url('/src/assets/static/fonts/ag-icons.woff') format('woff'),
12
+ url('/src/assets/static/fonts/ag-icons.ttf') format('truetype');
13
+ font-weight: 400;
14
+ font-style: normal;
15
+ font-display: swap;
16
+ }
17
+ </style>
18
+ <style>
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ body {
26
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
27
+ background: #f5f5f5;
28
+ padding: 40px 20px;
29
+ }
30
+
31
+ .container {
32
+ max-width: 1400px;
33
+ margin: 0 auto;
34
+ }
35
+
36
+ header {
37
+ margin-bottom: 40px;
38
+ text-align: center;
39
+ }
40
+
41
+ h1 {
42
+ font-size: 32px;
43
+ margin-bottom: 10px;
44
+ color: #333;
45
+ }
46
+
47
+ .info {
48
+ font-size: 14px;
49
+ color: #666;
50
+ }
51
+
52
+ .search-box {
53
+ margin: 30px 0;
54
+ text-align: center;
55
+ }
56
+
57
+ input[type="search"] {
58
+ width: 100%;
59
+ max-width: 400px;
60
+ padding: 12px 16px;
61
+ font-size: 16px;
62
+ border: 2px solid #ddd;
63
+ border-radius: 4px;
64
+ transition: border-color 0.3s;
65
+ }
66
+
67
+ input[type="search"]:focus {
68
+ outline: none;
69
+ border-color: #4CAF50;
70
+ }
71
+
72
+ .categories {
73
+ display: flex;
74
+ gap: 10px;
75
+ margin: 20px 0;
76
+ flex-wrap: wrap;
77
+ justify-content: center;
78
+ }
79
+
80
+ .category-btn {
81
+ padding: 8px 16px;
82
+ border: 2px solid #ddd;
83
+ background: white;
84
+ border-radius: 4px;
85
+ cursor: pointer;
86
+ font-size: 14px;
87
+ transition: all 0.3s;
88
+ }
89
+
90
+ .category-btn.active,
91
+ .category-btn:hover {
92
+ border-color: #4CAF50;
93
+ color: #4CAF50;
94
+ }
95
+
96
+ .category-section {
97
+ margin-bottom: 50px;
98
+ }
99
+
100
+ .category-title {
101
+ font-size: 20px;
102
+ font-weight: 600;
103
+ color: #333;
104
+ margin-bottom: 20px;
105
+ padding-bottom: 10px;
106
+ border-bottom: 2px solid #4CAF50;
107
+ }
108
+
109
+ .icon-grid {
110
+ display: grid;
111
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
112
+ gap: 20px;
113
+ }
114
+
115
+ .icon-item {
116
+ background: white;
117
+ border-radius: 8px;
118
+ padding: 20px;
119
+ text-align: center;
120
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
121
+ transition: all 0.3s;
122
+ cursor: pointer;
123
+ }
124
+
125
+ .icon-item:hover {
126
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
127
+ transform: translateY(-4px);
128
+ }
129
+
130
+ .icon-display {
131
+ font-size: 48px;
132
+ height: 60px;
133
+ display: flex;
134
+ align-items: center;
135
+ justify-content: center;
136
+ margin-bottom: 12px;
137
+ color: #4CAF50;
138
+ min-height: 60px;
139
+ }
140
+
141
+ .icon-name {
142
+ font-size: 12px;
143
+ color: #666;
144
+ font-weight: 500;
145
+ margin-bottom: 8px;
146
+ word-break: break-word;
147
+ }
148
+
149
+ .icon-class {
150
+ font-size: 11px;
151
+ color: #999;
152
+ font-family: 'Courier New', monospace;
153
+ background: #f9f9f9;
154
+ padding: 4px;
155
+ border-radius: 3px;
156
+ margin-bottom: 6px;
157
+ }
158
+
159
+ .icon-glyph {
160
+ font-size: 10px;
161
+ color: #ccc;
162
+ font-family: 'Courier New', monospace;
163
+ }
164
+
165
+ .empty-message {
166
+ text-align: center;
167
+ padding: 40px;
168
+ color: #999;
169
+ }
170
+
171
+ .stats {
172
+ background: white;
173
+ padding: 20px;
174
+ border-radius: 8px;
175
+ margin-bottom: 30px;
176
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
177
+ display: grid;
178
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
179
+ gap: 20px;
180
+ text-align: center;
181
+ }
182
+
183
+ .stat-item {
184
+ padding: 10px;
185
+ }
186
+
187
+ .stat-number {
188
+ font-size: 28px;
189
+ font-weight: bold;
190
+ color: #4CAF50;
191
+ }
192
+
193
+ .stat-label {
194
+ font-size: 14px;
195
+ color: #666;
196
+ margin-top: 5px;
197
+ }
198
+
199
+ .hidden {
200
+ display: none;
201
+ }
202
+
203
+ @media (max-width: 768px) {
204
+ .icon-grid {
205
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
206
+ gap: 15px;
207
+ }
208
+
209
+ h1 {
210
+ font-size: 24px;
211
+ }
212
+
213
+ .icon-display {
214
+ font-size: 36px;
215
+ }
216
+ }
217
+ </style>
218
+ </head>
219
+ <body>
220
+ <div class="container">
221
+ <header>
222
+ <h1>🎨 AG Icons Font Preview</h1>
223
+ <p class="info">Browse and preview all available icons</p>
224
+ </header>
225
+
226
+ <div class="stats" id="stats"></div>
227
+
228
+ <div class="search-box">
229
+ <input
230
+ type="search"
231
+ id="searchInput"
232
+ placeholder="Search icons by name..."
233
+ autocomplete="off"
234
+ >
235
+ </div>
236
+
237
+ <div class="categories" id="categories"></div>
238
+
239
+ <div id="content"></div>
240
+ </div>
241
+
242
+ <script>
243
+ const glyphsDataPath = './ag-icons.json';
244
+ let allIcons = {};
245
+ let filteredCategory = 'all';
246
+
247
+ async function loadIcons() {
248
+ try {
249
+ const response = await fetch(glyphsDataPath);
250
+ allIcons = await response.json();
251
+ renderCategoryButtons();
252
+ renderIcons();
253
+ updateStats();
254
+ } catch (error) {
255
+ console.error('Failed to load icons:', error);
256
+ document.getElementById('content').innerHTML =
257
+ '<div class="empty-message">Failed to load icon data. Please ensure ag-icons.json is in the same directory.</div>';
258
+ }
259
+ }
260
+
261
+ function renderCategoryButtons() {
262
+ const categories = Object.keys(allIcons).sort();
263
+ const container = document.getElementById('categories');
264
+
265
+ const allBtn = document.createElement('button');
266
+ allBtn.className = 'category-btn active';
267
+ allBtn.textContent = 'All';
268
+ allBtn.onclick = () => filterByCategory('all');
269
+ container.appendChild(allBtn);
270
+
271
+ categories.forEach(cat => {
272
+ const btn = document.createElement('button');
273
+ btn.className = 'category-btn';
274
+ btn.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
275
+ btn.onclick = () => filterByCategory(cat);
276
+ container.appendChild(btn);
277
+ });
278
+ }
279
+
280
+ function filterByCategory(category) {
281
+ filteredCategory = category;
282
+
283
+ document.querySelectorAll('.category-btn').forEach(btn => {
284
+ btn.classList.remove('active');
285
+ });
286
+ event.target.classList.add('active');
287
+
288
+ renderIcons();
289
+ }
290
+
291
+ function renderIcons() {
292
+ const content = document.getElementById('content');
293
+ content.innerHTML = '';
294
+
295
+ const categories = filteredCategory === 'all'
296
+ ? Object.keys(allIcons).sort()
297
+ : [filteredCategory];
298
+
299
+ categories.forEach(category => {
300
+ const icons = allIcons[category];
301
+ if (!icons || Object.keys(icons).length === 0) return;
302
+
303
+ const section = document.createElement('div');
304
+ section.className = 'category-section';
305
+
306
+ const title = document.createElement('h2');
307
+ title.className = 'category-title';
308
+ title.textContent = category.charAt(0).toUpperCase() + category.slice(1);
309
+ section.appendChild(title);
310
+
311
+ const grid = document.createElement('div');
312
+ grid.className = 'icon-grid';
313
+
314
+ Object.entries(icons).forEach(([name, data]) => {
315
+ const item = document.createElement('div');
316
+ item.className = 'icon-item';
317
+
318
+ const display = document.createElement('div');
319
+ display.className = 'icon-display';
320
+ if (data.unicode) {
321
+ display.textContent = data.unicode;
322
+ } else {
323
+ display.style.color = '#ddd';
324
+ display.style.fontSize = '12px';
325
+ display.textContent = 'No glyph';
326
+ }
327
+ item.appendChild(display);
328
+
329
+ const nameEl = document.createElement('div');
330
+ nameEl.className = 'icon-name';
331
+ nameEl.textContent = name;
332
+ nameEl.title = name;
333
+ item.appendChild(nameEl);
334
+
335
+ const classEl = document.createElement('div');
336
+ classEl.className = 'icon-class';
337
+ classEl.textContent = data.class;
338
+ classEl.title = data.class;
339
+ item.appendChild(classEl);
340
+
341
+ if (data.glyph) {
342
+ const glyphEl = document.createElement('div');
343
+ glyphEl.className = 'icon-glyph';
344
+ glyphEl.textContent = `U+${data.glyph.toUpperCase()}`;
345
+ item.appendChild(glyphEl);
346
+ }
347
+
348
+ grid.appendChild(item);
349
+ });
350
+
351
+ section.appendChild(grid);
352
+ content.appendChild(section);
353
+ });
354
+ }
355
+
356
+ function updateStats() {
357
+ const stats = document.getElementById('stats');
358
+ const totalIcons = Object.values(allIcons).reduce((sum, cat) => sum + Object.keys(cat).length, 0);
359
+ const categories = Object.keys(allIcons).length;
360
+ const withGlyphs = Object.values(allIcons).reduce((sum, cat) =>
361
+ sum + Object.values(cat).filter(icon => icon.glyph).length, 0);
362
+
363
+ stats.innerHTML = `
364
+ <div class="stat-item">
365
+ <div class="stat-number">${totalIcons}</div>
366
+ <div class="stat-label">Total Icons</div>
367
+ </div>
368
+ <div class="stat-item">
369
+ <div class="stat-number">${categories}</div>
370
+ <div class="stat-label">Categories</div>
371
+ </div>
372
+ <div class="stat-item">
373
+ <div class="stat-number">${withGlyphs}</div>
374
+ <div class="stat-label">With Glyphs</div>
375
+ </div>
376
+ `;
377
+ }
378
+
379
+ document.getElementById('searchInput').addEventListener('input', (e) => {
380
+ const query = e.target.value.toLowerCase();
381
+ document.querySelectorAll('.icon-item').forEach(item => {
382
+ const name = item.querySelector('.icon-name').textContent.toLowerCase();
383
+ const iconClass = item.querySelector('.icon-class').textContent.toLowerCase();
384
+ item.classList.toggle('hidden', !name.includes(query) && !iconClass.includes(query));
385
+ });
386
+ });
387
+
388
+ loadIcons();
389
+ </script>
390
+ </body>
391
+ </html>
@@ -0,0 +1,73 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Simple Font Test</title>
6
+ <style>
7
+ @font-face {
8
+ font-family: 'ag-icons';
9
+ src: url('./ag-icons.woff2') format('woff2'),
10
+ url('./ag-icons.woff') format('woff'),
11
+ url('./ag-icons.ttf') format('truetype');
12
+ }
13
+ body { font-family: Arial; padding: 20px; }
14
+ .test { font-family: 'ag-icons'; font-size: 40px; margin: 10px 0; }
15
+ label { display: inline-block; width: 200px; }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <h1>Font Glyph Test</h1>
20
+ <p>Testing which glyphs exist in the font...</p>
21
+
22
+ <div style="margin: 20px 0; padding: 20px; background: #f0f0f0; border-radius: 4px;">
23
+ <h2>Unicode Characters from Font:</h2>
24
+ <p>If you see characters below, the font has glyphs at those Unicode points.</p>
25
+ <p>If you see blank squares or nothing, the glyphs don't exist in the font.</p>
26
+ </div>
27
+
28
+ <div class="test">
29
+ <label>f101 (61697):</label>
30
+ &#xf101; &#61697;
31
+ </div>
32
+
33
+ <div class="test">
34
+ <label>f102 (61698):</label>
35
+ &#xf102; &#61698;
36
+ </div>
37
+
38
+ <div class="test">
39
+ <label>f103 (61699):</label>
40
+ &#xf103; &#61699;
41
+ </div>
42
+
43
+ <div class="test">
44
+ <label>f254 (62036):</label>
45
+ &#xf254; &#62036;
46
+ </div>
47
+
48
+ <div class="test">
49
+ <label>f1f5 (61941):</label>
50
+ &#xf1f5; &#61941;
51
+ </div>
52
+
53
+ <div class="test">
54
+ <label>f26e (62062):</label>
55
+ &#xf26e; &#62062;
56
+ </div>
57
+
58
+ <h2>Via CSS Classes:</h2>
59
+ <link rel="stylesheet" href="ag-icons.css">
60
+
61
+ <div>
62
+ <i class="aga-actions-add"></i> aga-actions-add
63
+ </div>
64
+
65
+ <div>
66
+ <i class="aga-weather-wi-thermometer"></i> aga-weather-wi-thermometer
67
+ </div>
68
+
69
+ <div>
70
+ <i class="aga-account-user"></i> aga-account-user
71
+ </div>
72
+ </body>
73
+ </html>