ag-design 1.0.83 → 1.0.86

package/assets/static/fonts/direct-test.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Direct Icon Test</title>
+  <link rel="stylesheet" href="ag-icons.css">
+  <style>
+    body { font-family: Arial; padding: 40px; background: #f5f5f5; }
+    .test-group { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; }
+    .icon { font-size: 64px; display: inline-block; margin: 10px; }
+    h2 { color: #333; }
+  </style>
+</head>
+<body>
+  <h1>🎨 Direct Icon Font Test</h1>
+
+  <div class="test-group">
+    <h2>Actions Category (Aligned Icons)</h2>
+    <p>Testing icons that should have agorafont glyphs (e9xx range):</p>
+    <div>
+      <span class="icon aga-actions-add" title="add"></span>
+      <span class="icon aga-actions-backspace" title="backspace"></span>
+      <span class="icon aga-actions-delete" title="delete"></span>
+      <span class="icon aga-actions-edit" title="edit"></span>
+    </div>
+  </div>
+
+  <div class="test-group">
+    <h2>Account Category (Aligned Icons)</h2>
+    <div>
+      <span class="icon aga-account-balance" title="balance"></span>
+      <span class="icon aga-account-box" title="box"></span>
+      <span class="icon aga-account-circle" title="circle"></span>
+      <span class="icon aga-account-person" title="person"></span>
+    </div>
+  </div>
+
+  <div class="test-group">
+    <h2>Text Editor Category (Non-Aligned - Old Icons)</h2>
+    <p>These should show old font icons (f1xx range):</p>
+    <div>
+      <span class="icon aga-text-editor-video" title="video"></span>
+      <span class="icon aga-text-editor-undo" title="undo"></span>
+      <span class="icon aga-text-editor-redo" title="redo"></span>
+    </div>
+  </div>
+
+  <div class="test-group">
+    <h2>Raw Unicode Tests</h2>
+    <p>Testing raw Unicode values:</p>
+    <div>
+      <p>Account Balance (0xe93c): <span style="font-family: ag-icons; font-size: 32px;">&#xe93c;</span></p>
+      <p>Actions Add (0xe90e): <span style="font-family: ag-icons; font-size: 32px;">&#xe90e;</span></p>
+      <p>Text Editor Video (0xf115): <span style="font-family: ag-icons; font-size: 32px;">&#xf115;</span></p>
+    </div>
+  </div>
+</body>
+</html>

package/assets/static/fonts/final-test.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Final Icon Test</title>
+  <link rel="stylesheet" href="ag-icons.css">
+  <style>
+    body { font-family: Arial; padding: 40px; background: #f5f5f5; }
+    .test { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; }
+    .icons { display: flex; gap: 20px; flex-wrap: wrap; }
+    .icon { font-size: 48px; text-align: center; }
+    .label { font-size: 12px; color: #666; margin-top: 5px; }
+  </style>
+</head>
+<body>
+  <h1>🎨 Final Icon Rendering Test</h1>
+
+  <div class="test">
+    <h2>Weather Category (Aligned to agorafont)</h2>
+    <div class="icons">
+      <div class="icon">
+        <i class="aga-weather-wi-thermometer"></i>
+        <div class="label">wi-thermometer</div>
+      </div>
+      <div class="icon">
+        <i class="aga-weather-wi-strong-wind"></i>
+        <div class="label">wi-strong-wind</div>
+      </div>
+      <div class="icon">
+        <i class="aga-weather-wi-raindrop"></i>
+        <div class="label">wi-raindrop</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="test">
+    <h2>Actions Category</h2>
+    <div class="icons">
+      <div class="icon">
+        <i class="aga-actions-add"></i>
+        <div class="label">add</div>
+      </div>
+      <div class="icon">
+        <i class="aga-actions-edit"></i>
+        <div class="label">edit</div>
+      </div>
+      <div class="icon">
+        <i class="aga-actions-delete"></i>
+        <div class="label">delete</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="test">
+    <h2>Test Results</h2>
+    <p id="results">Checking font rendering...</p>
+  </div>
+
+  <script>
+    // Test if glyphs are rendering
+    setTimeout(() => {
+      const icon = document.querySelector('.aga-weather-wi-thermometer');
+      const style = window.getComputedStyle(icon, ':before');
+      const content = style.content;
+
+      let result = `Font Family: ${style.fontFamily}<br>`;
+      result += `Content: ${content}<br>`;
+
+      if (content && content !== 'none' && content !== '""') {
+        result += '✅ Icons should be rendering!';
+      } else {
+        result += '⚠️ Icons may not be rendering (content empty)';
+      }
+
+      document.getElementById('results').innerHTML = result;
+    }, 500);
+  </script>
+</body>
+</html>

package/assets/static/fonts/simplified-test.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Simplified Icon Test</title>
+  <link rel="stylesheet" href="ag-icons.css">
+  <style>
+    body { font-family: Arial; padding: 40px; background: #f5f5f5; }
+    .test-group { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; }
+    .icon { font-size: 64px; display: inline-block; margin: 10px; }
+  </style>
+</head>
+<body>
+  <h1>🎨 Simplified Icon Font Test</h1>
+
+  <div class="test-group">
+    <h2>Actions Icons (Using Simplified Names)</h2>
+    <div>
+      <span class="icon aga-add" title="add"></span>
+      <span class="icon aga-backspace" title="backspace"></span>
+      <span class="icon aga-delete" title="delete"></span>
+      <span class="icon aga-edit" title="edit"></span>
+      <span class="icon aga-done" title="done"></span>
+    </div>
+  </div>
+
+  <div class="test-group">
+    <h2>Account Icons</h2>
+    <div>
+      <span class="icon aga-users-solid" title="users"></span>
+      <span class="icon aga-user" title="user"></span>
+      <span class="icon aga-user-tie" title="user-tie"></span>
+      <span class="icon aga-supervisor" title="supervisor"></span>
+    </div>
+  </div>
+
+  <div class="test-group">
+    <h2>Status Check</h2>
+    <p>Font loaded: <span id="fontLoaded">Checking...</span></p>
+    <p>CSS rules: <span id="ruleCount">Checking...</span></p>
+  </div>
+
+  <script>
+    // Check font loading and CSS
+    const styleSheets = Array.from(document.styleSheets);
+    const agIconsCSS = styleSheets.find(s => s.href && s.href.includes('ag-icons.css'));
+
+    if (agIconsCSS) {
+      try {
+        const ruleCount = agIconsCSS.cssRules.length;
+        document.getElementById('ruleCount').textContent = ruleCount;
+
+        // Check if add icon rule exists
+        for (let i = 0; i < agIconsCSS.cssRules.length; i++) {
+          const rule = agIconsCSS.cssRules[i];
+          if (rule.selectorText === '.aga-add:before') {
+            document.getElementById('fontLoaded').textContent = 'YES - add rule found with content: ' + rule.style.content;
+            break;
+          }
+        }
+      } catch (e) {
+        document.getElementById('ruleCount').textContent = 'Error: ' + e.message;
+      }
+    }
+  </script>
+</body>
+</html>

package/assets/static/fonts/test-glyph.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Font Glyph Test</title>
+  <link rel="stylesheet" href="ag-icons.css">
+  <style>
+    body { font-family: Arial; padding: 20px; }
+    .test { font-size: 48px; }
+    .info { background: #f0f0f0; padding: 10px; margin: 10px 0; }
+  </style>
+</head>
+<body>
+  <h1>AG Icons Font Glyph Test</h1>
+
+  <div class="info">
+    <strong>Using CSS class:</strong>
+    <p><i class="aga-actions-add test"></i> aga-actions-add (should render icon)</p>
+  </div>
+
+  <div class="info">
+    <strong>Raw Unicode (\\e90e):</strong>
+    <p><span style="font-family: ag-icons; font-size: 48px;">&#xe90e;</span> e90e in ag-icons font</p>
+  </div>
+
+  <div class="info">
+    <strong>CSS content check:</strong>
+    <pre id="cssCheck">Checking...</pre>
+  </div>
+
+  <script>
+    // Check what's in the CSS
+    const sheet = Array.from(document.styleSheets).find(s => s.href && s.href.includes('ag-icons.css'));
+    if (sheet) {
+      try {
+        const addRule = Array.from(sheet.cssRules).find(r => r.selectorText && r.selectorText.includes('aga-add'));
+        if (addRule) {
+          document.getElementById('cssCheck').textContent = `Found: ${addRule.selectorText}\nContent: ${addRule.style.content}`;
+        } else {
+          document.getElementById('cssCheck').textContent = 'aga-add rule not found in CSS';
+        }
+      } catch (e) {
+        document.getElementById('cssCheck').textContent = 'Cannot access CSS rules: ' + e.message;
+      }
+    } else {
+      document.getElementById('cssCheck').textContent = 'ag-icons.css not loaded';
+    }
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Font Test</title>
+  <link rel="stylesheet" href="ag-icons.css">
+  <style>
+    body { font-family: Arial; padding: 20px; }
+    .test-icon { font-size: 48px; }
+  </style>
+</head>
+<body>
+  <h1>Font Test</h1>
+  <p>Testing if font glyphs render:</p>
+
+  <p>
+    <strong>Using aga-balance class:</strong><br>
+    <i class="aga-balance test-icon"></i>
+  </p>
+
+  <p>
+    <strong>Raw Unicode test (\\f254):</strong><br>
+    <span style="font-family: ag-icons; font-size: 48px;">&#xf254;</span>
+  </p>
+
+  <p>
+    <strong>Check CSS in console:</strong><br>
+    <code>
+      Open DevTools (F12) and check if ag-icons.css is loaded and contains .aga-balance:before
+    </code>
+  </p>
+</body>
+</html>

package/assets/static/fonts/test.html

@@ -2,46 +2,37 @@
 <html>
 <head>
   <meta charset="UTF-8">
-  <title>AG Icons Test</title>
-  <link rel="stylesheet" href="ag-icons.css">
+  <title>Font Test</title>
   <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; }
+    @font-face {
+      font-family: test-font;
+      src: url('./ag-icons.ttf') format('truetype');
+    }
+    body { font-family: Arial; }
+    .test { font-family: test-font; font-size: 60px; }
+    .test::before { content: "\e900"; }
+    .test2 { font-family: test-font; font-size: 60px; }
+    .test2::after { content: "\e901"; }
   </style>
 </head>
 <body>
-  <h1>AG Icons Font Test</h1>
-  <p>All fonts loaded from: http://localhost:8000/src/assets/static/fonts/</p>
+  <h1>Font Test</h1>
+  <p>Testing if ag-icons font has glyphs:</p>
+  <div class="test"></div>
+  <div class="test2"></div>
+  <p>If you see 2 icons above, the font is working.</p>
+  <p>If you see empty boxes, the font doesn't have glyphs at those codepoints.</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>Direct content test:</h2>
+  <div style="font-family: test-font; font-size: 60px;">\e900</div>
+  <div style="font-family: test-font; font-size: 60px;">a</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>
+  <h2>Base64 encoded single character test:</h2>
+  <div style="font-family: test-font; font-size: 60px;">
+    <span id="unichar"></span>
+  </div>
+  <script>
+    document.getElementById('unichar').textContent = String.fromCodePoint(0xe900);
+  </script>
 </body>
 </html>