robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layer - List</title>
  <link rel="stylesheet" href="../list.css">
  <style>
    .card { min-height: 120px; padding: 18px 18px 16px 18px; }
    .card-preview {
      height: 62px;
      border-radius: 10px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
    }
    .preview-icons {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      opacity: 0.9;
    }
    .mini {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 2px solid currentColor;
      display: grid;
      place-items: center;
      color: #aaa;
    }
    .mini.success { color: #a5dc86; }
    .mini.error { color: #f27474; }
    .mini.warning { color: #f8bb86; }
    .mini.info { color: #3fc3ee; }
    .mini svg { width: 14px; height: 14px; display: block; }
    .preview-pill {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      color: #9a9a9a;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
      letter-spacing: 0.2px;
    }
  </style>
</head>
<body>
  <div class="search-header">
    <div class="search-title">Layer</div>
    <div class="search-input-container">
      <div class="search-icon"></div>
      <input type="text" class="search-input" placeholder="Filter layer tests..." disabled>
    </div>
  </div>

  <div class="grid-section">
    <div class="header-card active" onclick="selectItem('overview.html', this)">
      <div class="header-dots"></div>
      <div class="header-title">Layer</div>
    </div>

    <div class="card-grid" style="margin-top: 40px;">
      <div class="card" data-content="layer/test_icons_svg_animation.html" onclick="selectItem('test_icons_svg_animation.html', this)">
        <div class="card-preview">
          <div class="preview-icons" aria-hidden="true">
            <div class="mini success">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 6L9 17l-5-5"></path>
              </svg>
            </div>
            <div class="mini error">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round">
                <path d="M6 6l12 12"></path>
                <path d="M18 6L6 18"></path>
              </svg>
            </div>
            <div class="mini warning">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round">
                <path d="M12 3v12"></path>
                <path d="M12 19h.01"></path>
              </svg>
            </div>
            <div class="mini info">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round">
                <path d="M12 10v8"></path>
                <path d="M12 6h.01"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="card-footer">SVG Icon animation (SweetAlert-like)</div>
      </div>

      <div class="card" data-content="layer/test_confirm_flow.html" onclick="selectItem('test_confirm_flow.html', this)">
        <div class="card-preview">
          <div class="preview-pill">$.layer(...).then(res =&gt; ...)</div>
        </div>
        <div class="card-footer">Confirm flow (success / error)</div>
      </div>

      <div class="card" data-content="layer/test_selection_layer_dataset.html" onclick="selectItem('test_selection_layer_dataset.html', this)">
        <div class="card-preview">
          <div class="preview-pill">$('.btn').layer() + data-layer-*</div>
        </div>
        <div class="card-footer">Selection.layer() + dataset</div>
      </div>

      <div class="card" data-content="layer/test_static_fire.html" onclick="selectItem('test_static_fire.html', this)">
        <div class="card-preview">
          <div class="preview-pill">Layer.run(...) / Layer.$(...).run()</div>
        </div>
        <div class="card-footer">Static API / Builder API</div>
      </div>

      <div class="card" data-content="layer/test_dom_steps.html" onclick="selectItem('test_dom_steps.html', this)">
        <div class="card-preview">
          <div class="preview-pill">dom: '#el' + step() wizard</div>
        </div>
        <div class="card-footer">DOM content + Step flow</div>
      </div>
    </div>
  </div>

  <script>
    function selectItem(url, el) {
      document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
      document.querySelectorAll('.header-card').forEach(c => c.classList.remove('active'));
      el.classList.add('active');
      if (window.parent && window.parent.loadContent) {
        window.parent.loadContent('layer/' + url);
      }
    }

    function setActiveByContentUrl(contentUrl) {
      const normalized = String(contentUrl || '').replace(/^\.\//, '');
      const header = document.querySelector('.header-card');
      const cards = Array.from(document.querySelectorAll('.card[data-content]'));

      document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
      document.querySelectorAll('.header-card').forEach(c => c.classList.remove('active'));

      if (!normalized) return;
      if (normalized.includes('layer/overview.html')) {
        header?.classList.add('active');
        return;
      }

      header?.classList.add('active');
      const match = cards.find(c => normalized.endsWith(c.dataset.content) || normalized.includes(c.dataset.content));
      if (match) match.classList.add('active');
    }

    window.setActiveByContentUrl = setActiveByContentUrl;
  </script>
</body>
</html>