Display server information-2

by velo_ninja

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flask Server Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      rel="stylesheet"
    />
    <style>
      :root {
        --coralBlue: #007bff;
        --kingsBlue: #1e3a8a;
        --lightWhite: #f8f9fa;
        --background-light: #f4f6f8;
        --baseBg: #d3d3d3;
        --transition-speed: 0.4s;
        --leftSidebarWidth: 10%;
        --rightSidebarWidth: 10%;
      }
      * {/* Reset some defaults */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {/* Body setup */
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        min-height: 100vh;
        font-family: 'Roboto', sans-serif;
      }
      .barSidebarLeft {/* Left Sidebar */
        width: var(--leftSidebarWidth);
        background: linear-gradient(135deg, var(--coralBlue), var(--kingsBlue));
        color: var(--lightWhite);
        padding: 10px;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1000;
        display: flex;
        flex-direction: column;
      }      
      .secSidebarTop {
        flex: 0 0 10%;
        margin-bottom: 5px;
        background: rgba(255, 255, 255, 0.1);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }      
      .secSidebarMiddle {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
        background: rgba(255, 255, 255, 0.1);
      }      
      .secSidebarBottom {
        flex: 0 0 10%;
        background:...

JavaScript

menuItems = [
  { label: 'DASHBOARD', icon: 'fa-tachometer-alt', path: '/admin' },
  { label: 'OPTIONS', icon: 'fa-sliders-h', path: '/options' },
  { label: 'REPORTS', icon: 'fa-chart-line', path: '/reports' },
  { label: 'LOGS', icon: 'fa-file-lines', path: '/logs' },
  { label: 'CONFIGS', icon: 'fa-cogs', path: '/configs' },
  { label: 'CONTACTS', icon: 'fa-address-book', path: '/contact' },
  { label: 'DIAGNOSTICS', icon: 'fa-flask', path: '/test-routes' },
  { label: 'PACKAGES & INSTALLATIONS', icon: 'fa-box-open', path: '/test-routes' }
];