GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Search Suggestions UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF; border-radius: 28px;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 120px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 40px; color: #333; font-size: 40px;19  }20  .status-right { display: flex; align-items: center; gap: 24px; }21  .status-icon { width: 48px; height: 48px; }22 23  /* Search header */24  .search-header {25    position: absolute; top: 120px; left: 0; right: 0; height: 160px;26    display: flex; align-items: center; gap: 24px; padding: 0 28px;27  }28  .back-btn {29    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;30  }31  .search-input {32    flex: 1; height: 120px; background: #F2F2F2; border-radius: 60px;33    display: flex; align-items: center; padding: 0 40px; gap: 24px;34  }35  .search-text {36    font-size: 44px; color: #FF7A00; letter-spacing: 0.2px; flex: 1;37  }38  .clear-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }39 40  /* Chips section */41  .chips-section {42    position: absolute; top: 300px; left: 0; right: 0;43    padding: 20px 40px 0 40px;44  }45  .chips-title {46    font-size: 42px; color: #333; margin-bottom: 24px; font-weight: 500;47  }48  .chips-wrap {49    display: flex; flex-wrap: wrap; gap: 16px 18px;50  }51  .chip {52    padding: 18px 28px; border-radius: 40px; border: 1px solid #E0E0E0; background: #FFFFFF;53    font-size: 34px; color: #444;54  }55 56  /* Suggestions list */57  .suggestions {58    position: absolute; top: 600px; left: 0; right: 0; bottom: 900px;59    overflow: hidden; padding: 0 18px;60  }61  .suggest-item {62    height: 150px; display: flex; align-items: center; justify-content: space-between;63    padding: 0 22px; border-bottom: 1px solid #EEEEEE;64  }65  .suggest-text { font-size: 40px; color: #606060; }66  .s-arrow { width: 56px; height: 56px; }67 68  /* Keyboard */69  .keyboard {70    position: absolute; left: 0; right: 0; bottom: 80px; height: 860px;71    background: #1E1E1E; border-top-left-radius: 28px; border-top-right-radius: 28px;72    padding: 24px 28px;73  }74  .kb-row {75    display: flex; justify-content: center; gap: 18px; margin-bottom: 28px;76  }77  .key {78    height: 120px; min-width: 92px; padding: 0 26px;79    background: #2B2B2B; color: #EED9C4; border-radius: 24px; display: flex; align-items: center; justify-content: center;80    font-size: 44px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);81  }82  .key-wide { min-width: 140px; }83  .key-space { flex: 1; height: 120px; }84  .key-accent { background: #F4D1B6; color: #2B2B2B; }85  .key-icon { width: 48px; height: 48px; }86 87  /* Bottom gesture bar */88  .gesture-bar {89    position: absolute; left: 50%; transform: translateX(-50%);90    bottom: 18px; width: 360px; height: 12px; background: #E0E0E0; border-radius: 12px;91  }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status bar -->98  <div class="status-bar">99    <div>3:58</div>100    <div class="status-right">101      <!-- Small mail icon placeholder -->102      <svg class="status-icon" viewBox="0 0 48 48">103        <rect x="6" y="10" width="36" height="28" rx="4" fill="#666"/>104        <polyline points="6,12 24,24 42,12" fill="none" stroke="#fff" stroke-width="3"/>105      </svg>106      <!-- Signal/WiFi -->107      <svg class="status-icon" viewBox="0 0 48 48">108        <path d="M8 20 C18 12, 30 12, 40 20" stroke="#666" stroke-width="4" fill="none"/>109        <path d="M14 26 C20 22, 28 22, 34 26" stroke="#666" stroke-width="4" fill="none"/>110        <circle cx="24" cy="32" r="3" fill="#666"/>111      </svg>112      <!-- Battery -->113      <svg class="status-icon" viewBox="0 0 48 48">114        <rect x="6" y="12" width="32" height="24" rx="4" fill="none" stroke="#666" stroke-width="4"/>115        <rect x="10" y="16" width="24" height="16" rx="2" fill="#666"/>116        <rect x="38" y="18" width="4" height="12" rx="2" fill="#666"/>117      </svg>118    </div>119  </div>120 121  <!-- Search header -->122  <div class="search-header">123    <div class="back-btn">124      <svg width="64" height="64" viewBox="0 0 48 48">125        <path d="M30 10 L14 24 L30 38" stroke="#333" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>126      </svg>127    </div>128    <div class="search-input">129      <div class="search-text">nike shoes</div>130      <div class="clear-btn">131        <svg width="56" height="56" viewBox="0 0 48 48">132          <circle cx="24" cy="24" r="22" fill="#FFFFFF" stroke="#CFCFCF" stroke-width="3"/>133          <path d="M16 16 L32 32 M32 16 L16 32" stroke="#666" stroke-width="4" stroke-linecap="round"/>134        </svg>135      </div>136    </div>137  </div>138 139  <!-- Chips section -->140  <div class="chips-section">141    <div class="chips-title">You may be interested in</div>142    <div class="chips-wrap">143      <div class="chip">nike shoes</div>144      <div class="chip">casual shoes woman</div>145      <div class="chip">shoes</div>146      <div class="chip">jordan shoes</div>147      <div class="chip">shoes men</div>148      <div class="chip">nike</div>149      <div class="chip">jordan 4</div>150    </div>151  </div>152 153  <!-- Suggestions -->154  <div class="suggestions">155    <div class="suggest-item">156      <div class="suggest-text">nike shoes</div>157      <svg class="s-arrow" viewBox="0 0 48 48">158        <path d="M14 34 L34 14" stroke="#9E9E9E" stroke-width="4" fill="none" stroke-linecap="round"/>159        <path d="M30 14 H34 V18" stroke="#9E9E9E" stroke-width="4" fill="none" stroke-linecap="round"/>160      </svg>161    </div>162    <div class="suggest-item">163      <div class="suggest-text">nike shoes air force 1</div>164      <svg class="s-arrow" viewBox="0 0 48 48">165        <path d="M14 34 L34 14" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>166        <path d="M30 14 H34 V18" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>167      </svg>168    </div>169    <div class="suggest-item">170      <div class="suggest-text">nike shoes men original</div>171      <svg class="s-arrow" viewBox="0 0 48 48">172        <path d="M14 34 L34 14" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>173        <path d="M30 14 H34 V18" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>174      </svg>175    </div>176    <div class="suggest-item">177      <div class="suggest-text">nike shoes woman</div>178      <svg class="s-arrow" viewBox="0 0 48 48">179        <path d="M14 34 L34 14" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>180        <path d="M30 14 H34 V18" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>181      </svg>182    </div>183    <div class="suggest-item">184      <div class="suggest-text">nike shoes men</div>185      <svg class="s-arrow" viewBox="0 0 48 48">186        <path d="M14 34 L34 14" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>187        <path d="M30 14 H34 V18" stroke="#B0B0B0" stroke-width="4" fill="none" stroke-linecap="round"/>188      </svg>189    </div>190  </div>191 192  <!-- Keyboard -->193  <div class="keyboard">194    <div class="kb-row">195      <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>196    </div>197    <div class="kb-row">198      <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>199    </div>200    <div class="kb-row">201      <div class="key-wide">⬆</div>202      <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>203      <div class="key-wide">204        <svg class="key-icon" viewBox="0 0 48 48">205          <path d="M10 14 L24 28 L38 14" stroke="#EED9C4" stroke-width="5" fill="none" stroke-linecap="round"/>206        </svg>207      </div>208    </div>209    <div class="kb-row">210      <div class="key key-accent key-wide">?123</div>211      <div class="key">,</div>212      <div class="key key-wide">🙂</div>213      <div class="key-space key"></div>214      <div class="key">.</div>215      <div class="key key-accent key-wide">216        <svg class="key-icon" viewBox="0 0 48 48">217          <circle cx="22" cy="22" r="12" stroke="#2B2B2B" stroke-width="0" fill="#2B2B2B"/>218          <rect x="28" y="28" width="14" height="4" rx="2" fill="#2B2B2B"/>219        </svg>220      </div>221    </div>222  </div>223 224  <div class="gesture-bar"></div>225</div>226</body>227</html>