Untitled

avatar
unknown
html
a day ago
11 kB
36
No Index
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Interactive Dashboard</title>

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&family=Inter:[email protected]&display=swap" rel="stylesheet" />
  
  <!-- Iconify -->
  <script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>

  <style>
    :root {
      /* Base Variables from Snippets */
      --background: #f5f7fa;
      --font-family-body: 'Inter', sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: #e5e5e5; /* Neutral background for the canvas presentation */
      font-family: var(--font-family-body);
      -webkit-font-smoothing: antialiased;
    }

    /* 1:1 Canvas Wrapper */
    .export-wrapper {
      width: 375px;
      height: 812px;
      position: relative;
      background-color: var(--background);
      border-radius: 40px; /* Optional: giving it an app-like feel */
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    /* Main App Layout */
    .main-wrapper {
      width: 100%;
      height: 100%;
      background: linear-gradient(
        180deg,
        #021855 0%,
        #073ea6 15%,
        #2081eb 32%,
        #78c4fd 50%,
        #d4ebfd 65%,
        #f4f6f9 80%,
        #f4f6f9 100%
      );
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* Status & Header */
    .status-bar {
      height: 54px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 28px 0 28px;
      color: white;
      font-size: 15px;
      font-weight: 600;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 12px 24px 24px 24px;
    }

    .header-title {
      margin: 0;
      font-size: 32px;
      font-weight: 700;
      color: white;
      letter-spacing: 0.5px;
    }

    .header-subtitle {
      margin: 4px 0 0 0;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
    }

    .grid-btn {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    /* Content Cards */
    .cards-container {
      flex: 1;
      padding: 0 24px 180px 24px; /* Extra padding at bottom for the floating nav */
      display: flex;
      gap: 16px;
      overflow-y: auto;
      scrollbar-width: none;
    }
    .cards-container::-webkit-scrollbar {
      display: none;
    }

    .cards-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
      flex: 1;
    }

    .glass-card {
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.02) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 28px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }

    /* === NEW FLOATING NAVIGATION WIDGET === */
    .floating-nav {
      position: absolute;
      bottom: 32px;
      left: 12.5px; /* Center 350px widget in 375px container */
      width: 350px;
      background: #f0f2f6;
      border-radius: 36px;
      padding: 12px;
      box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.9), 0 12px 36px rgba(19, 27, 43, 0.08);
      display: flex;
      flex-direction: column;
      z-index: 100;
    }

    /* Sub Menu (Top Row) */
    .sub-nav {
      display: flex;
      height: 48px; /* Fixed height for animation */
      margin-bottom: 8px;
      overflow: hidden;
      opacity: 1;
      transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth snap transition */
    }

    .sub-nav.hidden {
      height: 0;
      margin-bottom: 0;
      opacity: 0;
      pointer-events: none;
    }

    .sub-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 500;
      color: #5e6a7d;
      border-radius: 24px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sub-tab.active {
      background: #e6e8ed;
      color: #131b2b;
      box-shadow: -2px -2px 6px #ffffff, 2px 2px 6px rgba(19, 27, 43, 0.08);
    }

    /* Main Menu (Bottom Row) */
    .main-nav {
      background: #ffffff;
      border-radius: 32px;
      display: flex;
      height: 84px;
      padding: 6px;
    }

    .nav-tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 26px;
      color: #131b2b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .nav-tab.active {
      background: #f2f4f7;
    }

    .nav-tab span {
      font-size: 13px;
      font-weight: 600;
    }

    .icon-box {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* Dot element inside grid button */
    .grid-dot {
      width: 4px;
      height: 4px;
      background: white;
      border-radius: 50%;
    }
  </style>
</head>
<body>

  <div class="export-wrapper">
    <div class="main-wrapper">
      
      <!-- Status bar -->
      <div class="status-bar">
        <span>9:41</span>
        <div style="display: flex; gap: 6px; align-items: center">
          <iconify-icon icon="lucide:signal" style="font-size: 16px"></iconify-icon>
          <iconify-icon icon="lucide:wifi" style="font-size: 16px"></iconify-icon>
          <iconify-icon icon="lucide:battery-full" style="font-size: 18px"></iconify-icon>
        </div>
      </div>

      <!-- Header -->
      <div class="header">
        <div>
          <h1 class="header-title">Explore</h1>
          <p class="header-subtitle">San Francisco, CA</p>
        </div>
        <div class="grid-btn">
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3px">
            <div class="grid-dot"></div><div class="grid-dot"></div>
            <div class="grid-dot"></div><div class="grid-dot"></div>
          </div>
        </div>
      </div>

      <!-- Cards Grid -->
      <div class="cards-container">
        <!-- Left Column -->
        <div class="cards-col">
          <div class="glass-card" style="height: 230px"></div>
          <div class="glass-card" style="flex: 1; min-height: 200px"></div>
        </div>
        <!-- Right Column -->
        <div class="cards-col">
          <div class="glass-card" style="height: 107px"></div>
          <div class="glass-card" style="height: 107px"></div>
          <div class="glass-card" style="flex: 1; min-height: 200px"></div>
        </div>
      </div>

      <!-- Floating Navigation Widget -->
      <div class="floating-nav">
        
        <!-- Secondary Menu (Toggleable) -->
        <div class="sub-nav" id="sub-menu">
          <div class="sub-tab active">Rooms</div>
          <div class="sub-tab">Inspiration</div>
          <div class="sub-tab">Profiles</div>
        </div>

        <!-- Primary Menu -->
        <div class="main-nav">
          <div class="nav-tab active" data-tab="explore">
            <div class="icon-box">
              <iconify-icon icon="lucide:globe" style="font-size: 24px; stroke-width: 2.5px"></iconify-icon>
              <iconify-icon icon="lucide:mouse-pointer-2" style="font-size: 13px; position: absolute; bottom: -2px; right: -4px; fill: #131b2b; background: #f2f4f7; border-radius: 4px; padding: 2px;"></iconify-icon>
            </div>
            <span>Explore</span>
          </div>
          
          <div class="nav-tab" data-tab="assistant">
            <div class="icon-box">
              <iconify-icon icon="lucide:wand-2" style="font-size: 24px; stroke-width: 2.5px"></iconify-icon>
            </div>
            <span>Assistant</span>
          </div>
          
          <div class="nav-tab" data-tab="configs">
            <div class="icon-box">
              <iconify-icon icon="lucide:settings" style="font-size: 24px; stroke-width: 2.5px"></iconify-icon>
            </div>
            <span>Configs</span>
          </div>
        </div>

      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Elements
      const mainTabs = document.querySelectorAll('.nav-tab');
      const subTabs = document.querySelectorAll('.sub-tab');
      const subMenu = document.getElementById('sub-menu');
      const headerTitle = document.querySelector('.header-title');

      // Main Menu Interaction
      mainTabs.forEach(tab => {
        tab.addEventListener('click', () => {
          // 1. Reset all main tabs
          mainTabs.forEach(t => t.classList.remove('active'));
          
          // 2. Set active class to clicked tab
          tab.classList.add('active');

          // 3. Check which tab is clicked
          const tabName = tab.getAttribute('data-tab');
          
          // Update title just for a nice effect
          headerTitle.innerText = tabName.charAt(0).toUpperCase() + tabName.slice(1);

          // 4. Toggle Sub Menu visibility
          if (tabName === 'explore') {
            subMenu.classList.remove('hidden');
          } else {
            subMenu.classList.add('hidden');
          }
        });
      });

      // Sub Menu Interaction
      subTabs.forEach(tab => {
        tab.addEventListener('click', () => {
          // Reset all sub tabs
          subTabs.forEach(t => t.classList.remove('active'));
          // Set active to clicked sub tab
          tab.classList.add('active');
        });
      });
    });
  </script>
</body>
</html>
Editor is loading...
Leave a Comment