popup.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>DevX</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Anybody:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: #080808; }
    ::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }
    body {
      width: 360px;
      max-width: 360px;
      max-height: 520px;
      overflow-x: hidden;
      font-family: "Anybody", sans-serif;
      background: #000;
      color: #fff;
      overflow-y: auto;
    }

    .header {
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid #141414;
      position: sticky;
      top: 0;
      background: #000;
      z-index: 10;
    }
    .logo { display: flex; align-items: center; gap: 6px; }
    .logo-name { font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #fff; }
    .logo-text { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; opacity: 0.45; }
    .logo-name-wrap { display: inline-flex; align-items: baseline; gap: 3px; }
    .logo-version { font-size: 8px; font-weight: 500; opacity: 0.3; }
    .header-btns { margin-left: auto; display: flex; gap: 6px; }
    .icon-btn {
      background: none; border: 1px solid #1a1a1a; color: #fff;
      width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: border-color 0.2s;
    }
    .icon-btn:hover { border-color: #fff; }

    .menu-list {
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .panel { display: none; padding: 14px 16px; }
    .panel.active { display: block; }
    .section-title {
      font-size: 11px; font-weight: 600; color: #444;
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
    }
    .empty { text-align: center; padding: 30px 16px; color: #333; font-size: 12px; }

    .item-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
    .item-card {
      background: #080808; border: 1px solid #141414; border-radius: 8px;
      padding: 10px 12px; display: flex; align-items: center; gap: 10px;
      transition: border-color 0.15s;
    }
    .item-card:hover { border-color: #2a2a2a; }
    .item-card .url {
      flex: 1; font-size: 12px; word-break: break-all;
      color: #555; line-height: 1.5; font-family: monospace;
    }

    .btn {
      flex-shrink: 0; background: #080808; border: 1px solid #1a1a1a; color: #fff;
      font-family: "Anybody", sans-serif; font-size: 11px; font-weight: 600;
      padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
    }
    .btn:hover { background: #111; border-color: #333; }
    .btn.success { border-color: #1a3a1a; color: #5a5; }
    .btn.active-toggle { border-color: #fff; color: #fff; background: #111; }
    .btn.kb-focus { border-color: #555; color: #ccc; background: #0a0a0a; }
    .btn-full { width: 100%; text-align: center; padding: 10px; margin-top: 6px; }
    .btn-full:first-child { margin-top: 0; }

    .font-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
    .font-tab {
      flex: 1; background: #080808; border: 1px solid #1a1a1a; color: #555;
      font-family: "Anybody", sans-serif; font-size: 9px; font-weight: 600;
      padding: 6px 0; border-radius: 6px; cursor: pointer; text-align: center;
      text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.15s;
    }
    .font-tab:hover { border-color: #333; color: #888; }
    .font-tab.active { border-color: #fff; color: #fff; background: #111; }
    .font-btn-wrap {
      display: flex; align-items: center; gap: 0; width: 100%;
    }
    .font-btn-wrap .btn { flex: 1; border-radius: 6px 0 0 6px; min-width: 0; }
    .font-star {
      background: #080808; border: 1px solid #1a1a1a; border-left: none;
      color: #333; width: 32px; height: 100%; min-height: 30px; border-radius: 0 6px 6px 0;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 12px; transition: all 0.15s; flex-shrink: 0;
    }
    .font-star:hover { color: #fa0; border-color: #333; }
    .font-star.starred { color: #fa0; }
    .font-loading { text-align: center; padding: 12px; color: #333; font-size: 10px; }

    .settings-view { padding: 16px; }
    .settings-title { font-size: 13px; font-weight: 700; margin-bottom: 14px; letter-spacing: 1px; }
    .setting-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 11px 0; border-bottom: 1px solid #0a0a0a;
    }
    .setting-info { flex: 1; }
    .setting-name { font-size: 12px; font-weight: 600; }
    .setting-desc { font-size: 10px; color: #333; margin-top: 2px; }
    .toggle { position: relative; width: 34px; height: 18px; flex-shrink: 0; margin-left: 12px; }
    .toggle input { display: none; }
    .toggle .slider {
      position: absolute; inset: 0; background: #151515;
      border-radius: 9px; cursor: pointer; transition: background 0.2s;
    }
    .toggle .slider::before {
      content: ""; position: absolute; width: 12px; height: 12px;
      left: 3px; top: 3px; background: #444; border-radius: 50%; transition: all 0.2s;
    }
    .toggle input:checked + .slider { background: #fff; }
    .toggle input:checked + .slider::before { background: #000; transform: translateX(16px); }

    .menu-cat-wrap {
      display: flex; align-items: center; gap: 6px; padding: 8px 14px 4px;
    }
    .menu-cat-arrow {
      background: #080808; border: 1px solid #1a1a1a; color: #555;
      width: 22px; height: 22px; border-radius: 5px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; transition: all 0.15s; flex-shrink: 0;
    }
    .menu-cat-arrow:hover { border-color: #333; color: #fff; }
    .menu-cat-tabs {
      display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none;
    }
    .menu-cat-tabs::-webkit-scrollbar { display: none; }
    .menu-cat-tab {
      flex-shrink: 0; background: #080808; border: 1px solid #1a1a1a; color: #555;
      font-family: "Anybody", sans-serif; font-size: 9px; font-weight: 600;
      padding: 5px 8px; border-radius: 6px; cursor: pointer;
      transition: all 0.15s; display: flex; align-items: center; gap: 4px;
    }
    .menu-cat-tab .cat-icon { font-size: 10px; line-height: 1; }
    .menu-cat-tab .cat-label { text-transform: uppercase; letter-spacing: 0.3px; }
    .menu-cat-tab:hover { border-color: #333; color: #888; }
    .menu-cat-tab.active { border-color: #fff; color: #fff; background: #111; }
    .menu-search-wrap {
      padding: 6px 14px 2px;
    }
    .menu-search {
      width: 100%; background: #080808; border: 1px solid #1a1a1a; border-radius: 7px;
      color: #ccc; font-family: "Anybody", sans-serif; font-size: 10px;
      padding: 7px 10px; outline: none; transition: border-color 0.15s;
      box-sizing: border-box;
    }
    .menu-search::placeholder { color: #2e2e2e; }
    .menu-search:focus { border-color: #333; }
    .menu-items-wrapper { padding: 0 14px 8px; }
    .menu-category-section { margin-bottom: 4px; }
    .menu-category-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 4px 6px; position: sticky; top: 0; background: #000;
      z-index: 5; margin-bottom: 4px; border-bottom: 1px solid #141414;
    }
    .cat-header-name {
      font-size: 10px; font-weight: 700; color: #666;
      text-transform: uppercase; letter-spacing: 1px;
      display: flex; align-items: center; gap: 5px;
    }
    .cat-header-badge {
      background: #1a1a1a; color: #666; font-size: 9px; font-weight: 700;
      padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center;
    }
    .menu-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding-bottom: 4px; }
    .menu-item {
      background: #080808; border: 1px solid #141414; border-radius: 10px;
      padding: 14px 6px 12px; cursor: pointer; transition: all 0.15s;
      display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: 7px; position: relative;
    }
    .menu-item:hover { border-color: #333; background: #0c0c0c; }
    .menu-item .item-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
    .menu-item .item-info { flex: 1; min-width: 0; width: 100%; }
    .menu-item .item-name {
      font-size: 10px; font-weight: 700; line-height: 1.3;
      letter-spacing: 0.2px; hyphens: auto;
    }
    .menu-item .item-desc { display: block; font-size: 9px; color: #555; margin-top: 2px; line-height: 1.3; }
    .menu-item .item-badge {
      position: absolute; top: 5px; right: 24px;
      background: #fff; color: #000; font-size: 8px; font-weight: 700;
      padding: 1px 4px; border-radius: 5px;
    }
    .menu-item .item-arrow { display: none; }
    .tool-fav-btn {
      position: absolute; top: 4px; right: 4px;
      background: none; border: none; color: #2a2a2a; font-size: 16px;
      cursor: pointer; padding: 4px; line-height: 1; transition: color 0.15s;
    }
    .tool-fav-btn:hover { color: #fa0; }
    .tool-fav-btn.starred { color: #fa0; }
    .esc-hint {
      margin-top: 10px; padding: 7px 12px; background: #080808;
      border: 1px solid #1a1a1a; border-radius: 6px;
      font-size: 10px; color: #555; text-align: center;
    }
    #site-bar {
      display: flex; align-items: center; gap: 9px;
      padding: 8px 14px; background: #0a0a0a;
      border-bottom: 1px solid #1c1c1c; flex-shrink: 0;
    }
    @keyframes sr-blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
    .mac-dots { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
    .mac-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      cursor: pointer; transition: filter 0.15s;
    }
    .mac-dot:hover { filter: brightness(1.3); }
    .mac-dot.red    { background: #ff5f57; }
    .mac-dot.yellow { background: #febc2e; }
    .mac-dot.green  { background: #28c840; cursor: default; }
    #site-favicon { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; object-fit: contain; }
    #site-info { flex: 1; min-width: 0; }
    #site-title { font-size: 10px; font-weight: 600; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #site-url   { font-size: 9px; color: #3a3a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; font-family: monospace; }
  </style>
</head>
<body>
  <div id="site-bar">
    <img id="site-favicon" src="" alt="" style="display:none;">
    <div id="site-info">
      <div id="site-title"></div>
      <div id="site-url"></div>
    </div>
    <div class="mac-dots">
      <span class="mac-dot red"  id="dot-close"  title="Fechar"></span>
      <span class="mac-dot yellow" id="dot-float" title="Abrir flutuante"></span>
      <span class="mac-dot green"></span>
    </div>
  </div>
  <div id="view-menu">
    <div class="header">
      <div class="logo"><span class="logo-name">DevX</span><span class="logo-text">Toolkit</span></div>
      <div class="header-btns">
        <button class="icon-btn" id="btn-settings" title="Configurações">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="3"/>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
          </svg>
        </button>
      </div>
    </div>
    <div class="menu-list" id="menu-list"></div>
  </div>

  <div id="view-panel" style="display:none;">
    <div class="header">
      <div class="logo"><span class="logo-name">DevX</span><span class="logo-text">Toolkit</span></div>
      <div class="header-btns">
        <button class="icon-btn" id="btn-panel-back" title="Voltar">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <path d="M19 12H5M12 19l-7-7 7-7"/>
          </svg>
        </button>
      </div>
    </div>
    <div id="panel-content" class="panel active"></div>
  </div>

    <div id="view-settings" style="display:none;">
    <div class="header">
      <button class="icon-btn" id="btn-settings-back" title="Voltar">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </button>
      <div class="logo"><span class="logo-name">DevX</span><span class="logo-text">Toolkit</span></div>
    </div>
    <div class="settings-view">
      <div class="settings-title">CONFIGURAÇÕES</div>
      <div id="settings-list"></div>
    </div>
  </div>

  <div id="view-features-toggle" style="display:none;">
    <div class="header">
      <button class="icon-btn" id="btn-features-toggle-back" title="Voltar">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </button>
      <div class="logo"><span class="logo-name">DevX</span><span class="logo-text">Toolkit</span></div>
    </div>
    <div class="settings-view">
      <div class="settings-title">FERRAMENTAS ATIVAS</div>
      <div id="features-toggle-list"></div>
    </div>
  </div>

  <script src="popup.js"></script>

  <div style="border-top:1px solid #0e0e0e;padding:10px 14px;font-size:10px;color:#444;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;">
    <span>Desenvolvido por</span>
    <a href="https://revoltz.dev" target="_blank" style="color:#666;text-decoration:none;font-weight:600;">Revoltz</a>
  </div>
</body>
</html>