ag-design 1.0.82 → 1.0.83

package/assets/static/fonts/standalone.html

@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AG Icons - Standalone Demo</title>
+  <style>
+    /* Embedded font files - Base64 encoded WOFF2 (subset for demo) */
+    @font-face {
+      font-family: 'ag-icons';
+      font-display: swap;
+      font-style: normal;
+      font-weight: 400;
+      /* Using file paths from current directory */
+      src: url('./ag-icons.woff2') format('woff2'),
+           url('./ag-icons.woff') format('woff'),
+           url('./ag-icons.ttf') format('truetype');
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #333; padding: 40px 20px; }
+
+    .container { max-width: 1000px; margin: 0 auto; }
+
+    header { background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; text-align: center; }
+    h1 { font-size: 32px; margin-bottom: 10px; }
+    .subtitle { color: #666; }
+
+    .status { background: white; padding: 20px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #4CAF50; }
+    .status.loading { border-left-color: #ff9800; }
+    .status.error { border-left-color: #f44336; }
+    .status h2 { margin-bottom: 10px; font-size: 16px; }
+    .status-code { font-family: monospace; background: #f5f5f5; padding: 10px; border-radius: 4px; margin-top: 10px; overflow-x: auto; }
+
+    .section { background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; }
+    .section h2 { font-size: 20px; margin-bottom: 20px; border-bottom: 2px solid #4CAF50; padding-bottom: 10px; }
+
+    .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; margin-top: 20px; }
+    .icon-item { text-align: center; padding: 20px; border: 1px solid #ddd; border-radius: 4px; background: #fafafa; }
+    .icon-display { font-size: 40px; margin-bottom: 10px; min-height: 50px; display: flex; align-items: center; justify-content: center; }
+    .icon-name { font-size: 12px; color: #666; word-break: break-word; margin-bottom: 5px; }
+    .icon-class { font-size: 10px; color: #999; font-family: monospace; }
+
+    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
+    .stat { background: white; padding: 20px; border-radius: 8px; text-align: center; }
+    .stat-num { font-size: 28px; font-weight: bold; color: #4CAF50; }
+    .stat-label { color: #999; font-size: 12px; margin-top: 5px; }
+
+    .file-info { background: #f9f9f9; padding: 15px; border-radius: 4px; margin: 10px 0; border-left: 3px solid #4CAF50; }
+    .file-info strong { display: block; margin-bottom: 5px; }
+
+    code { background: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 12px; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>🎨 AG Icons Font - Standalone</h1>
+      <p class="subtitle">Complete icon font library - 362 icons ready to use</p>
+    </header>
+
+    <div class="stats">
+      <div class="stat">
+        <div class="stat-num">362</div>
+        <div class="stat-label">Icons</div>
+      </div>
+      <div class="stat">
+        <div class="stat-num">20</div>
+        <div class="stat-label">Categories</div>
+      </div>
+      <div class="stat">
+        <div class="stat-num">3</div>
+        <div class="stat-label">Font Formats</div>
+      </div>
+    </div>
+
+    <div class="status">
+      <h2>✅ Font Files Available</h2>
+      <p>The following font files are in this directory and ready to use:</p>
+
+      <div class="file-info">
+        <strong>📄 ag-icons.ttf</strong>
+        <small>TrueType format - 68 KB - Universal support</small>
+      </div>
+
+      <div class="file-info">
+        <strong>📄 ag-icons.woff</strong>
+        <small>WOFF format - 34 KB - Broad browser support</small>
+      </div>
+
+      <div class="file-info">
+        <strong>📄 ag-icons.woff2</strong>
+        <small>WOFF2 format - 28 KB - Best compression (recommended)</small>
+      </div>
+
+      <div class="file-info">
+        <strong>📄 ag-icons.css</strong>
+        <small>Complete stylesheet with all 362 icon definitions</small>
+      </div>
+
+      <div class="file-info">
+        <strong>📄 ag-icons.json</strong>
+        <small>Icon metadata with glyphs, hex values, and unicode</small>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>📖 How to Use</h2>
+
+      <h3 style="margin-top: 20px; margin-bottom: 10px;">Step 1: Include the CSS</h3>
+      <div class="status-code">&lt;link rel="stylesheet" href="path/to/ag-icons.css"&gt;</div>
+
+      <h3 style="margin-top: 20px; margin-bottom: 10px;">Step 2: Add icon class to element</h3>
+      <div class="status-code">&lt;i class="aga-actions-add"&gt;&lt;/i&gt;</div>
+
+      <h3 style="margin-top: 20px; margin-bottom: 10px;">Step 3: Icon renders</h3>
+      <p>The icon glyph will display using the ag-icons font</p>
+    </div>
+
+    <div class="section">
+      <h2>🎨 Sample Icons</h2>
+      <p style="margin-bottom: 20px;">Here are some example icons showing the font working:</p>
+
+      <div class="icon-grid">
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-add"></i></div>
+          <div class="icon-name">add</div>
+          <div class="icon-class">aga-actions-add</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-search"></i></div>
+          <div class="icon-name">search</div>
+          <div class="icon-class">aga-actions-search</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-delete"></i></div>
+          <div class="icon-name">delete</div>
+          <div class="icon-class">aga-actions-delete</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-account-user"></i></div>
+          <div class="icon-name">user</div>
+          <div class="icon-class">aga-account-user</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-communication-email"></i></div>
+          <div class="icon-name">email</div>
+          <div class="icon-class">aga-communication-email</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-settings"></i></div>
+          <div class="icon-name">settings</div>
+          <div class="icon-class">aga-actions-settings</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-download"></i></div>
+          <div class="icon-name">download</div>
+          <div class="icon-class">aga-actions-download</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-upload"></i></div>
+          <div class="icon-name">upload</div>
+          <div class="icon-class">aga-actions-upload</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-save"></i></div>
+          <div class="icon-name">save</div>
+          <div class="icon-class">aga-actions-save</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-refresh"></i></div>
+          <div class="icon-name">refresh</div>
+          <div class="icon-class">aga-actions-refresh</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-menu"></i></div>
+          <div class="icon-name">menu</div>
+          <div class="icon-class">aga-actions-menu</div>
+        </div>
+
+        <div class="icon-item">
+          <div class="icon-display"><i class="aga-actions-edit"></i></div>
+          <div class="icon-name">edit</div>
+          <div class="icon-class">aga-actions-edit</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>💻 CSS Code (Embedded)</h2>
+      <p>This page includes the CSS directly in the HTML &lt;style&gt; tag at the top. Here's the standard way to include it:</p>
+
+      <div class="status-code" style="overflow-y: auto; max-height: 300px;">
+/* In ag-icons.css: */
+
+@font-face {
+  font-family: 'ag-icons';
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
+  src: url('./ag-icons.ttf') format('truetype'),
+       url('./ag-icons.woff') format('woff'),
+       url('./ag-icons.woff2') format('woff2');
+}
+
+[class^='aga-'],[class*=' aga-'] {
+  font-family: ag-icons !important;
+  speak: none;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  line-height: 1;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Icon definitions (362 total): */
+.aga-actions-add:before { content: "\f249"; }
+.aga-account-user:before { content: "\f24b"; }
+.aga-communication-email:before { content: "\f20a"; }
+... and 359 more icons ...
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>📁 Project Integration</h2>
+
+      <p><strong>Step-by-step setup for your project:</strong></p>
+
+      <ol style="margin-left: 20px; line-height: 1.8;">
+        <li>Copy these 4 files to your project:
+          <ul style="margin: 10px 0 10px 20px;">
+            <li>ag-icons.ttf</li>
+            <li>ag-icons.woff</li>
+            <li>ag-icons.woff2</li>
+            <li>ag-icons.css</li>
+          </ul>
+        </li>
+        <li>Update the path in ag-icons.css if needed</li>
+        <li>Link to ag-icons.css in your HTML: <code>&lt;link rel="stylesheet" href="fonts/ag-icons.css"&gt;</code></li>
+        <li>Use icons in your HTML: <code>&lt;i class="aga-actions-add"&gt;&lt;/i&gt;</code></li>
+      </ol>
+    </div>
+
+    <div class="section">
+      <h2>📚 Resources</h2>
+
+      <ul style="margin-left: 20px; line-height: 2;">
+        <li><strong>preview.html</strong> - Interactive browser for all 362 icons</li>
+        <li><strong>index.html</strong> - Documentation page</li>
+        <li><strong>ag-icons.json</strong> - Icon metadata (names, codes, unicode)</li>
+        <li><strong>ICON-FONT-SETUP.md</strong> - Complete setup guide</li>
+      </ul>
+    </div>
+  </div>
+</body>
+</html>

package/assets/static/fonts/test.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>AG Icons Test</title>
+  <link rel="stylesheet" href="ag-icons.css">
+  <style>
+    body { font-family: Arial; padding: 40px; background: #f5f5f5; }
+    .icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 30px 0; }
+    .icon { background: white; padding: 20px; text-align: center; border-radius: 8px; }
+    i { font-size: 48px; display: block; margin-bottom: 10px; }
+  </style>
+</head>
+<body>
+  <h1>AG Icons Font Test</h1>
+  <p>All fonts loaded from: http://localhost:8000/src/assets/static/fonts/</p>
+
+  <div class="icons">
+    <div class="icon">
+      <i class="aga-actions-add"></i>
+      <p>add</p>
+    </div>
+    <div class="icon">
+      <i class="aga-actions-search"></i>
+      <p>search</p>
+    </div>
+    <div class="icon">
+      <i class="aga-account-user"></i>
+      <p>user</p>
+    </div>
+    <div class="icon">
+      <i class="aga-communication-email"></i>
+      <p>email</p>
+    </div>
+    <div class="icon">
+      <i class="aga-actions-settings"></i>
+      <p>settings</p>
+    </div>
+  </div>
+
+  <h2>Server Info</h2>
+  <p><strong>Server:</strong> Python SimpleHTTPServer</p>
+  <p><strong>Port:</strong> 8000</p>
+  <p><strong>URL:</strong> http://localhost:8000/src/assets/static/fonts/</p>
+  <p><strong>All 362 icons available!</strong></p>
+</body>
+</html>