Universal Dashboard

by velo_ninja

HTML

<div id="dashboard-container"></div>

CSS

body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #0a0a0f;
      color: #ffffff;
      height: 100vh;
      overflow: hidden;
    }
    #dashboard-container {
      height: 100vh;
    }body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #0a0a0f;
      color: #ffffff;
      height: 100vh;
      overflow: hidden;
    }
    #dashboard-container {
      height: 100vh;
    }

JavaScript

/**
     * UNIVERSAL DASHBOARD MODULE
     * Complete standalone implementation
     */
    class UniversalDashboard {
      constructor(options = {}) {
        // Validate required options
        if (!options.container) {
          throw new Error('UniversalDashboard requires a container element or selector');
        }

        // Process container (accepts element or selector)
        this.container = options.container instanceof HTMLElement 
          ? options.container 
          : document.querySelector(options.container);
          
        if (!this.container) {
          throw new Error('Could not find container element for UniversalDashboard');
        }

        // Set default options
        this.options = {
          data: options.data || [],
          idField: options.idField || 'id',
          nameField: options.nameField || 'name',
          typeField: options.typeField || 'type',
          levelField: options.levelField || 'lvl',
          imageField: options.imageField || 'image',
          sections: options.sections || [
            { title: 'Skills', path: 'skills', comparison: true },
            { title: 'Talents', path: 'talents', comparison: true },
            { title: 'Skins', path: 'skins', comparison: false }
          ],
          theme: {
            primary: '#6366f1',
            primaryLight: '#818cf8',
            primaryDark: '#4f46e5',
            accent: '#ec4899',
            accentLight: '#f472b6',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
            gold: '#FFD700',
            bgMain: '#0a0a0f',
            bgCard: '#13131a',
            bgElevated: '#1a1a24',
            textMain: '#ffffff',
            textSecondary: '#a0a0b0',
            textMuted: '#6b6b7b'
          },
          callbacks: {
            onSelectionChange: options.onSelectionChange || null,
            onViewModeChange: options.onViewModeChange...