ag-design 1.0.89 → 1.0.98

package/assets/static/fonts/icon-gallery.html

@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AG Icons Gallery</title>
+    <link rel="stylesheet" href="./ag-icons.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 40px 20px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 50px;
+        }
+
+        .header h1 {
+            font-size: 3em;
+            margin-bottom: 10px;
+            font-weight: 700;
+            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+        }
+
+        .header p {
+            font-size: 1.1em;
+            opacity: 0.95;
+        }
+
+        .controls {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 30px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .search-box {
+            flex: 0 1 300px;
+            padding: 12px 20px;
+            font-size: 1em;
+            border: none;
+            border-radius: 8px;
+            background: white;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .search-box::placeholder {
+            color: #999;
+        }
+
+        .size-buttons {
+            display: flex;
+            gap: 10px;
+            background: rgba(255, 255, 255, 0.2);
+            padding: 8px;
+            border-radius: 8px;
+            backdrop-filter: blur(10px);
+        }
+
+        .size-btn {
+            padding: 10px 15px;
+            background: rgba(255, 255, 255, 0.3);
+            border: 2px solid transparent;
+            border-radius: 6px;
+            color: white;
+            cursor: pointer;
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+
+        .size-btn.active,
+        .size-btn:hover {
+            background: white;
+            color: #667eea;
+            border-color: white;
+        }
+
+        .gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 20px;
+            animation: fadeIn 0.5s ease;
+        }
+
+        .gallery.large {
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        }
+
+        .gallery.xl {
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        }
+
+        .icon-item {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .icon-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .icon-item:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
+        }
+
+        .icon-item:hover::before {
+            opacity: 1;
+        }
+
+        .icon-display {
+            font-size: 3em;
+            margin-bottom: 12px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            z-index: 1;
+        }
+
+        .icon-name {
+            font-size: 0.85em;
+            color: #333;
+            font-weight: 500;
+            margin-bottom: 8px;
+            word-break: break-word;
+            position: relative;
+            z-index: 1;
+        }
+
+        .icon-code {
+            font-size: 0.75em;
+            color: #999;
+            font-family: 'Courier New', monospace;
+            position: relative;
+            z-index: 1;
+        }
+
+        .copy-indicator {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(102, 126, 234, 0.9);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 6px;
+            font-size: 0.8em;
+            font-weight: 600;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            z-index: 10;
+        }
+
+        .icon-item.copied .copy-indicator {
+            opacity: 1;
+        }
+
+        .stats {
+            text-align: center;
+            color: white;
+            margin-top: 30px;
+            font-size: 1.1em;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .no-results {
+            text-align: center;
+            padding: 60px 20px;
+            color: white;
+            font-size: 1.2em;
+        }
+
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 2em;
+            }
+
+            .controls {
+                flex-direction: column;
+            }
+
+            .search-box {
+                flex: 1;
+            }
+
+            .gallery {
+                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+                gap: 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>AG Icons Gallery</h1>
+            <p>Explore all available icons • Click to copy class name</p>
+        </div>
+
+        <div class="controls">
+            <input
+                type="text"
+                class="search-box"
+                id="searchInput"
+                placeholder="Search icons... (e.g., arrow, user, home)"
+                autocomplete="off"
+            >
+            <div class="size-buttons">
+                <button class="size-btn active" data-size="normal">Normal</button>
+                <button class="size-btn" data-size="large">Large</button>
+                <button class="size-btn" data-size="xl">Extra Large</button>
+            </div>
+        </div>
+
+        <div class="gallery" id="gallery"></div>
+
+        <div class="stats">
+            <p>Displaying <span id="count">0</span> icons</p>
+        </div>
+    </div>
+
+    <script>
+        // Load icons from ag-icons.json
+        const agIconsUrl = './ag-icons.json';
+        let allIcons = {};
+        let flatIcons = [];
+
+        async function loadIcons() {
+            try {
+                const response = await fetch(agIconsUrl);
+                const data = await response.json();
+
+                // Flatten the nested structure
+                flatIcons = [];
+                for (const [category, icons] of Object.entries(data)) {
+                    for (const [name, iconData] of Object.entries(icons)) {
+                        flatIcons.push({
+                            name: name,
+                            category: category,
+                            class: iconData.class,
+                            glyph: iconData.glyph,
+                            hex: iconData.hex
+                        });
+                    }
+                }
+
+                // Create lookup object
+                allIcons = flatIcons.reduce((acc, icon) => {
+                    acc[icon.name] = icon;
+                    return acc;
+                }, {});
+
+                renderGallery(flatIcons);
+            } catch (error) {
+                console.error('Failed to load icons:', error);
+                document.getElementById('gallery').innerHTML =
+                    '<div class="no-results">Failed to load ag-icons.json. Check the dev server console for details.</div>';
+            }
+        }
+
+        function renderGallery(icons) {
+            const gallery = document.getElementById('gallery');
+            gallery.innerHTML = '';
+
+            if (icons.length === 0) {
+                gallery.innerHTML = '<div class="no-results">No icons found</div>';
+                return;
+            }
+
+            icons.forEach((icon) => {
+                const item = document.createElement('div');
+                item.className = 'icon-item';
+                item.innerHTML = `
+                    <div class="copy-indicator">Copied!</div>
+                    <div class="icon-display"><i class="${icon.class}"></i></div>
+                    <div class="icon-name">${icon.name}</div>
+                    <div class="icon-code">${icon.class}</div>
+                `;
+
+                item.addEventListener('click', () => {
+                    navigator.clipboard.writeText(icon.class).then(() => {
+                        item.classList.add('copied');
+                        setTimeout(() => item.classList.remove('copied'), 1500);
+                    });
+                });
+
+                gallery.appendChild(item);
+            });
+
+            document.getElementById('count').textContent = icons.length;
+        }
+
+        // Search functionality
+        document.getElementById('searchInput').addEventListener('input', (e) => {
+            const searchTerm = e.target.value.toLowerCase();
+            const filtered = flatIcons.filter(icon =>
+                icon.name.toLowerCase().includes(searchTerm) ||
+                icon.category.toLowerCase().includes(searchTerm) ||
+                icon.class.toLowerCase().includes(searchTerm)
+            );
+            renderGallery(filtered);
+        });
+
+        // Size controls
+        document.querySelectorAll('.size-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+
+                const gallery = document.getElementById('gallery');
+                gallery.classList.remove('large', 'xl');
+                if (btn.dataset.size !== 'normal') {
+                    gallery.classList.add(btn.dataset.size);
+                }
+            });
+        });
+
+        // Load icons on page load
+        loadIcons();
+    </script>
+</body>
+</html>

package/base.css

@@ -612,6 +612,12 @@ img.ag-lazy:not(.ag-lazy-s){content: "";
 .s-bc-5{--b-color: var(--b-c-5);}
 .s-bc-6{--b-color: var(--b-c-6);}
 .s-bc-7{--b-color: var(--b-c-7);}
+.s-bc-98{--b-color: var(--c-98);}
+.s-bc-99{--b-color: var(--c-99);}
+.s-bc-100{--b-color: var(--c-100);}
+.s-bc-101{--b-color: var(--c-101);}
+.s-bc-102{--b-color: var(--c-102);}
+.s-bc-103{--b-color: var(--c-103);}
 .s-bc-t{--b-color: var(--b-c-t);}
 
 /* Top Utilities */
@@ -642,6 +648,12 @@ img.ag-lazy:not(.ag-lazy-s){content: "";
 .s-btc-5{--bt-color: var(--b-c-5);}
 .s-btc-6{--bt-color: var(--b-c-6);}
 .s-btc-7{--bt-color: var(--b-c-7);}
+.s-btc-98{--bt-color: var(--c-98);}
+.s-btc-99{--bt-color: var(--c-99);}
+.s-btc-100{--bt-color: var(--c-100);}
+.s-btc-101{--bt-color: var(--c-101);}
+.s-btc-102{--bt-color: var(--c-102);}
+.s-btc-103{--bt-color: var(--c-103);}
 .s-btc-t{--bt-color: var(--b-c-t)}
 
 /* Right Utilities */
@@ -672,6 +684,12 @@ img.ag-lazy:not(.ag-lazy-s){content: "";
 .s-brc-5{--br-color: var(--b-c-5);}
 .s-brc-6{--br-color: var(--b-c-6);}
 .s-brc-7{--br-color: var(--b-c-7);}
+.s-brc-98{--br-color: var(--c-98);}
+.s-brc-99{--br-color: var(--c-99);}
+.s-brc-100{--br-color: var(--c-100);}
+.s-brc-101{--br-color: var(--c-101);}
+.s-brc-102{--br-color: var(--c-102);}
+.s-brc-103{--br-color: var(--c-103);}
 .s-brc-t{--br-color: var(--b-c-t);}
 
 /* Bottom Utilities */
@@ -702,6 +720,12 @@ img.ag-lazy:not(.ag-lazy-s){content: "";
 .s-bbc-5{--bb-color: var(--b-c-5);}
 .s-bbc-6{--bb-color: var(--b-c-6);}
 .s-bbc-7{--bb-color: var(--b-c-7);}
+.s-bbc-98{--bb-color: var(--c-98);}
+.s-bbc-99{--bb-color: var(--c-99);}
+.s-bbc-100{--bb-color: var(--c-100);}
+.s-bbc-101{--bb-color: var(--c-101);}
+.s-bbc-102{--bb-color: var(--c-102);}
+.s-bbc-103{--bb-color: var(--c-103);}
 .s-bbc-t{--bb-color: var(--b-c-t);}
 
 /* Left Utilities */
@@ -732,6 +756,12 @@ img.ag-lazy:not(.ag-lazy-s){content: "";
 .s-blc-5{--bl-color: var(--b-c-5);}
 .s-blc-6{--bl-color: var(--b-c-6);}
 .s-blc-7{--bl-color: var(--b-c-7);}
+.s-blc-98{--bl-color: var(--c-98);}
+.s-blc-99{--bl-color: var(--c-99);}
+.s-blc-100{--bl-color: var(--c-100);}
+.s-blc-101{--bl-color: var(--c-101);}
+.s-blc-102{--bl-color: var(--c-102);}
+.s-blc-103{--bl-color: var(--c-103);}
 .s-blc-t{--bl-color: var(--b-c-t);}
 
 .s-va-m{vertical-align: middle;}
@@ -822,8 +852,13 @@ img.ag-lazy:not(.ag-lazy-s){content: "";
 .c-9{color: var(--c-9);}
 .c-10{color: var(--c-10);}
 .c-11{color: var(--c-11);}
+.c-98{color: var(--c-98);}
 .c-99{color: var(--c-99);}
 .c-100{color: var(--c-100);}
+.c-101{color: var(--c-101);}
+.c-102{color: var(--c-102);}
+.c-103{color: var(--c-103);}
+
 .s-c-cc{color: currentColor;}
 
 .s-b-w{background: var(--c-99);}
@@ -843,6 +878,9 @@ img.ag-lazy:not(.ag-lazy-s){content: "";
 .s-bc-c-98{background-color:  var(--c-98);}
 .s-bc-c-99{background-color:var(--c-99);}
 .s-bc-c-100{background-color:var(--c-100);}
+.s-bc-c-101{background-color: var(--c-101);}
+.s-bc-c-102{background-color: var(--c-102);}
+.s-bc-c-103{background-color: var(--c-103);}
 
 .s-pb-n{background-color: var(--p-badge-normal-bg);color: var(--p-badge-normal-text);}
 .s-pb-h{background-color: var(--p-badge-highlight-bg);color: var(--p-badge-highlight-text);}