ag-design 1.0.86 → 1.0.91

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>