code/10023/10023_3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Search Suggestions UI</title>
<style>
  body { margin: 0; padding: 0; background: transparent; }
  #render-target {
    width: 1080px;
    height: 2400px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    font-family: Roboto, Arial, sans-serif;
    color: #1a1a1a;
  }

  /* Top gradient area */
  .top-gradient {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 340px;
    background: linear-gradient(180deg, #8fded6 0%, #a8eadb 100%);
  }

  /* Status bar */
  .status-bar {
    position: absolute;
    top: 24px; left: 24px; right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #0e0e0e;
    font-size: 38px;
    font-weight: 600;
  }
  .status-icons {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .status-dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #b7d6d0;
    display: inline-block;
  }
  .icon {
    width: 44px; height: 44px;
  }

  /* Back button */
  .back-btn {
    position: absolute;
    top: 98px; left: 26px;
    width: 72px; height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .back-btn svg { width: 52px; height: 52px; }

  /* Search bar */
  .search-bar {
    position: absolute;
    top: 120px; left: 90px;
    width: 900px; height: 106px;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 20px;
  }
  .search-input {
    font-size: 44px;
    color: #1a1a1a;
    letter-spacing: 0.2px;
    flex: 1;
  }
  .search-icon, .close-icon { width: 52px; height: 52px; }

  /* Suggestions list */
  .suggestions {
    position: absolute;
    top: 360px;
    left: 0; right: 0;
    padding-left: 40px;
    padding-right: 24px;
  }
  .suggestion-item {
    display: flex;
    align-items: center;
    height: 118px;
    border-bottom: 1px solid #e6e6e6;
    gap: 26px;
  }
  .suggestion-text {
    font-size: 40px;
    color: #222;
    flex: 1;
  }
  .suggestion-text b { font-weight: 700; }
  .right-arrow {
    width: 40px; height: 40px;
  }
  .magnifier {
    width: 48px; height: 48px;
  }

  /* Keyboard mock */
  .keyboard {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 760px;
    background: #2a221d;
    color: #e8d6c8;
    padding: 24px 24px 100px;
    box-sizing: border-box;
  }
  .kb-suggest {
    display: flex; align-items: center;
    gap: 18px;
    margin-bottom: 24px;
  }
  .chip {
    padding: 12px 20px;
    background: #3a2f29;
    border-radius: 18px;
    font-size: 34px;
    color: #f1dfd1;
  }
  .kb-mic {
    margin-left: auto;
    width: 44px; height: 44px;
  }
  .kb-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 18px 0;
  }
  .key {
    width: 86px; height: 100px;
    background: #3a2f29;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px;
    color: #f1dfd1;
  }
  .key.wide { width: 140px; }
  .key.circle {
    width: 120px; height: 120px; border-radius: 60px; background: #eec8a8; color: #3a2f29; font-weight: 700;
  }
  .key.small { width: 100px; }
  .kb-bottom {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px;
    padding: 0 40px;
  }
  .gesture {
    position: absolute; bottom: 20px; left: 50%;
    transform: translateX(-50%);
    width: 220px; height: 8px; border-radius: 4px; background: #e5e5e5;
  }
</style>
</head>
<body>
<div id="render-target">
  <div class="top-gradient"></div>

  <div class="status-bar">
    <div style="display:flex; align-items:center; gap:14px;">
      <span>9:39</span>
      <span class="status-dot"></span>
    </div>
    <div class="status-icons">
      <!-- WiFi -->
      <svg class="icon" viewBox="0 0 24 24">
        <path d="M12 18.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z" fill="#1a1a1a"/>
        <path d="M2.5 9.5c5.7-5.3 13.3-5.3 19 0" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"/>
        <path d="M5.5 12.5c4-3.8 9-3.8 13 0" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"/>
        <path d="M8.5 15.5c2.2-2 4.8-2 7 0" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"/>
      </svg>
      <!-- Battery -->
      <svg class="icon" viewBox="0 0 28 24">
        <rect x="2" y="5" width="20" height="14" rx="3" ry="3" stroke="#1a1a1a" stroke-width="2" fill="none"/>
        <rect x="5" y="8" width="14" height="8" rx="2" fill="#1a1a1a"/>
        <rect x="22" y="9" width="4" height="6" rx="1" fill="#1a1a1a"/>
      </svg>
    </div>
  </div>

  <div class="back-btn">
    <svg viewBox="0 0 24 24">
      <path d="M15 5l-7 7 7 7" stroke="#1a1a1a" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>

  <div class="search-bar">
    <!-- Magnifier -->
    <svg class="search-icon" viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="7" stroke="#1a1a1a" stroke-width="2" fill="none"/>
      <path d="M20 20l-4.5-4.5" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round"/>
    </svg>
    <div class="search-input">iPhone</div>
    <!-- Close X -->
    <svg class="close-icon" viewBox="0 0 24 24">
      <path d="M5 5l14 14M19 5L5 19" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round"/>
    </svg>
  </div>

  <div class="suggestions">
    <!-- 1 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone</div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <!-- 2 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone <b>15</b></div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <!-- 3 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone <b>13</b></div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <!-- 4 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone <b>14</b></div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <!-- 5 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone <b>15</b> pro max</div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <!-- 6 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone <b>13</b> back cover</div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <!-- 7 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone <b>14</b> back cover</div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <!-- 8 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone <b>15</b> pro max case</div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <!-- 9 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone <b>15</b> cover</div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <!-- 10 -->
    <div class="suggestion-item">
      <svg class="magnifier" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>
        <path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="suggestion-text">iphone <b>15</b> pro case</div>
      <svg class="right-arrow" viewBox="0 0 24 24">
        <path d="M5 19l12-12M9 5h8v8" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>

  <!-- Keyboard mock -->
  <div class="keyboard">
    <div class="kb-suggest">
      <div class="chip">iPhone</div>
      <div class="chip">iphone</div>
      <div class="chip">iphones</div>
      <svg class="kb-mic" viewBox="0 0 24 24">
        <rect x="8" y="4" width="8" height="10" rx="4" fill="#e8d6c8"/>
        <path d="M6 11c0 3.3 2.4 5.5 6 5.5s6-2.2 6-5.5" stroke="#e8d6c8" stroke-width="2" fill="none" stroke-linecap="round"/>
        <path d="M12 18v3" stroke="#e8d6c8" stroke-width="2" stroke-linecap="round"/>
      </svg>
    </div>

    <div class="kb-row">
      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>
    </div>
    <div class="kb-row">
      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>
    </div>
    <div class="kb-row">
      <div class="key wide">⇧</div>
      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>
      <div class="key wide">⌫</div>
    </div>
    <div class="kb-bottom">
      <div class="key circle">?123</div>
      <div class="key small">,</div>
      <div class="key small">☺</div>
      <div class="key small">.</div>
      <div class="key circle">➜</div>
    </div>
  </div>

  <div class="gesture"></div>
</div>
</body>
</html>