Your Name
feat: UI improvements and error suppression - Enhanced dashboard and market pages with improved header buttons, logo, and currency symbol display - Stopped animated ticker - Removed pie chart legends - Added error suppressor for external service errors (SSE, Permissions-Policy warnings) - Improved header button prominence and icon appearance - Enhanced logo with glow effects and better design - Fixed currency symbol visibility in market tables
8b7b267
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Config Helper Demo</title> | |
| <style> | |
| :root { | |
| --teal-dark: #0d7377; | |
| --teal: #14b8a6; | |
| --teal-light: #2dd4bf; | |
| --cyan: #22d3ee; | |
| --text-primary: #0f2926; | |
| --text-secondary: #2a5f5a; | |
| --text-muted: #6b7280; | |
| --bg-main: #ffffff; | |
| --bg-secondary: #f8fdfc; | |
| --border-light: #e5e7eb; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: system-ui, -apple-system, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .demo-container { | |
| text-align: center; | |
| color: white; | |
| } | |
| .demo-container h1 { | |
| font-size: 48px; | |
| margin-bottom: 16px; | |
| text-shadow: 0 2px 10px rgba(0,0,0,0.2); | |
| } | |
| .demo-container p { | |
| font-size: 20px; | |
| margin-bottom: 32px; | |
| opacity: 0.9; | |
| } | |
| .demo-btn { | |
| background: white; | |
| color: #667eea; | |
| border: none; | |
| padding: 16px 48px; | |
| border-radius: 12px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| transition: all 0.3s; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .demo-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 15px 40px rgba(0,0,0,0.3); | |
| } | |
| .demo-btn:active { | |
| transform: translateY(0); | |
| } | |
| .features { | |
| margin-top: 48px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 24px; | |
| max-width: 800px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .feature { | |
| background: rgba(255,255,255,0.1); | |
| backdrop-filter: blur(10px); | |
| padding: 24px; | |
| border-radius: 12px; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| } | |
| .feature h3 { | |
| font-size: 18px; | |
| margin-bottom: 8px; | |
| } | |
| .feature p { | |
| font-size: 14px; | |
| opacity: 0.8; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="demo-container"> | |
| <h1>🚀 API Configuration Helper</h1> | |
| <p>Click the button below to see all available backend services</p> | |
| <button class="demo-btn" id="open-config"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> | |
| </svg> | |
| Open Configuration Guide | |
| </button> | |
| <div class="features"> | |
| <div class="feature"> | |
| <h3>📊 10 Services</h3> | |
| <p>All backend APIs organized by category</p> | |
| </div> | |
| <div class="feature"> | |
| <h3>📋 Copy-Paste</h3> | |
| <p>One-click copy for all configurations</p> | |
| </div> | |
| <div class="feature"> | |
| <h3>💻 Code Examples</h3> | |
| <p>Working examples for each service</p> | |
| </div> | |
| <div class="feature"> | |
| <h3>🎨 Clean UI</h3> | |
| <p>Compact and beautiful design</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module"> | |
| import { ConfigHelperModal } from '/static/shared/components/config-helper-modal.js'; | |
| const configHelper = new ConfigHelperModal(); | |
| document.getElementById('open-config').addEventListener('click', () => { | |
| configHelper.show(); | |
| }); | |
| // Auto-open after 1 second for demo | |
| setTimeout(() => { | |
| configHelper.show(); | |
| }, 1000); | |
| </script> | |
| </body> | |
| </html> | |