Diagrammer 1.00 - MEGA

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DIAGRAMMER-1.00</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/konva.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    
  </style>
</head>
<body>
  <!-- Loading Overlay -->
  <div id="loading-overlay">
    <div class="spinner"></div>
  </div>

  <!-- Toolbar -->
  <div id="toolbar">
    <div class="toolbar-header">
      <h1>DIAGRAMMER-1.00</h1>
      <p>Create professional diagrams</p>
    </div>
    
    <div class="toolbar-section">
      <div class="toolbar-section-header" data-section="components">
        <span>Components</span>
        <i class="fas fa-chevron-down"></i>
      </div>
      <div class="toolbar-section-content" id="components-section">
        <button class="toolbar-button" id="addHopper">
          <i class="fas fa-box"></i> Add Hopper
        </button>
        <button class="toolbar-button" id="addControl">
          <i class="fas fa-sliders"></i> Add Control Panel
        </button>
        <button class="toolbar-button" id="addVacuum">
          <i class="fas fa-fan"></i> Add Vacuum Unit
        </button>
      </div>
    </div>
    
    <div class="toolbar-section">
      <div class="toolbar-section-header" data-section="tools">
        <span>Tools</span>
        <i class="fas fa-chevron-down"></i>
      </div>
      <div class="toolbar-section-content" id="tools-section">
        <button class="toolbar-button" id="wireMode">
          <i class="fas fa-project-diagram"></i> Connect Mode
        </button>
        <button class="toolbar-button" id="selectMode">
          <i class="fas fa-mouse-pointer"></i> Select Mode
        </button>
        <button class="toolbar-button" id="panMode">
          <i class="fas fa-hand-paper"></i> Pan Mode
        </button>
      </div>
    </div>
   ...

CSS

/* Reset & Base */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    :root {
      --primary: #3498db;
      --primary-dark: #2980b9;
      --secondary: #2c3e50;
      --secondary-light: #34495e;
      --light: #ecf0f1;
      --dark: #1a1a1a;
      --success: #2ecc71;
      --danger: #e74c3c;
      --warning: #f39c12;
      --info: #00cec9;
      --border-radius: 8px;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
    }
    
    body { 
      display: flex; 
      height: 100vh; 
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
      background: var(--light);
      overflow: hidden;
      color: var(--dark);
    }

    /* Toolbar */
    #toolbar {
      width: 280px;
      background: var(--secondary);
      color: white;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow);
      z-index: 10;
      transition: var(--transition);
    }
    
    .toolbar-header {
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .toolbar-header h1 {
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .toolbar-header p {
      font-size: 0.85rem;
      opacity: 0.7;
    }
    
    .toolbar-section {
      margin-bottom: 5px;
    }
    
    .toolbar-section-header {
      padding: 12px 20px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: var(--transition);
      border-left: 4px solid transparent;
    }
    
    .toolbar-section-header:hover {
      background: rgba(255, 255, 255, 0.1);
      border-left-color: var(--primary);
    }
    
    .toolbar-section-header i {
      transition: var(--transition);
    }
    
    .toolbar-section-header.active i {
      transform: rotate(180deg);
    }
    
    .toolbar-section-content {
      max-height: 0;
      overflow: hidden;
     ...