GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search Suggestions</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#000; color:#ECECEC;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:110px;16    padding:0 40px; box-sizing:border-box;17    display:flex; align-items:center; justify-content:space-between;18    color:#fff; font-weight:600;19    font-size:42px;20  }21  .status-left { display:flex; align-items:center; gap:24px; }22  .status-right { display:flex; align-items:center; gap:26px; }23  .dot { width:24px; height:24px; background:#fff; border-radius:50%; opacity:0.95; }24  .battery {25    width:58px; height:28px; border:3px solid #fff; border-radius:6px; position:relative;26  }27  .battery::after { content:''; position:absolute; right:-10px; top:6px; width:8px; height:16px; background:#fff; border-radius:2px; }28  .battery .level { position:absolute; left:3px; top:3px; height:20px; width:36px; background:#fff; }29 30  /* Search bar */31  .search-wrap { position:absolute; top:120px; left:30px; right:30px; }32  .search-bar {33    width:100%; height:112px; background:#1A1A1A; border-radius:56px;34    display:flex; align-items:center; padding:0 28px; box-sizing:border-box;35    gap:26px; border:1px solid #222;36  }37  .search-text { flex:1; font-size:44px; color:#E5E5E5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }38  .icon-btn { width:68px; height:68px; display:flex; align-items:center; justify-content:center; border-radius:34px; }39  .icon-btn svg { width:44px; height:44px; }40 41  /* Suggestions */42  .suggestions { position:absolute; top:260px; left:30px; right:30px; bottom:930px; overflow:hidden; }43  .suggestion {44    padding:28px 12px; display:flex; align-items:center; justify-content:space-between;45    border-bottom:1px solid rgba(255,255,255,0.05);46  }47  .s-text { font-size:46px; color:#DADADA; }48  .s-sub { font-size:32px; color:#A0A0A0; margin-top:8px; }49  .arrow { width:54px; height:54px; opacity:0.75; }50  .keyword { color:#FFFFFF; font-weight:600; }51  .muted { color:#BDBDBD; }52 53  /* Keyboard */54  .keyboard {55    position:absolute; bottom:0; left:0; width:100%; height:930px;56    background:#121212; border-top:1px solid #1f1f1f;57  }58  .kb-predictions {59    height:120px; display:flex; align-items:center; gap:40px;60    padding:0 40px; box-sizing:border-box; color:#D0D0D0; font-size:46px;61    border-bottom:1px solid #1f1f1f;62  }63  .kb-grid { padding:36px 32px 26px; box-sizing:border-box; }64  .row { display:flex; justify-content:center; gap:22px; margin-bottom:28px; }65  .key {66    height:120px; min-width:84px; padding:0 24px;67    background:#1E1E1E; border-radius:18px; color:#E6E6E6; font-size:58px;68    display:flex; align-items:center; justify-content:center;69    box-shadow: inset 0 0 0 1px #2a2a2a;70  }71  .key.wide { min-width:140px; }72  .key.space { flex:1; min-width:500px; }73  .key.circle { width:126px; height:126px; border-radius:63px; background:#DDE67E; color:#000; }74  .bottom-indicator {75    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);76    width:300px; height:10px; background:#EDEDED; border-radius:10px; opacity:0.85;77  }78</style>79</head>80<body>81<div id="render-target">82 83  <!-- Status Bar -->84  <div class="status-bar">85    <div class="status-left">86      <div>6:11</div>87    </div>88    <div class="status-right">89      <div class="dot"></div>90      <div class="dot" style="opacity:0.85;"></div>91      <div class="dot" style="opacity:0.75;"></div>92      <div class="battery"><div class="level"></div></div>93    </div>94  </div>95 96  <!-- Search Bar -->97  <div class="search-wrap">98    <div class="search-bar">99      <!-- Back Arrow -->100      <div class="icon-btn">101        <svg viewBox="0 0 48 48">102          <path d="M30 10 L18 24 L30 38" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>103          <path d="M18 24 H40" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>104        </svg>105      </div>106      <div class="search-text">1984 by George Orwell</div>107      <!-- Close X -->108      <div class="icon-btn">109        <svg viewBox="0 0 48 48">110          <path d="M12 12 L36 36 M36 12 L12 36" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>111        </svg>112      </div>113      <!-- Camera/Lens Icon -->114      <div class="icon-btn">115        <svg viewBox="0 0 56 56">116          <rect x="7" y="7" width="42" height="42" rx="10" fill="none" stroke="#FFFFFF" stroke-width="3"/>117          <circle cx="28" cy="28" r="10" fill="none" stroke="#FFFFFF" stroke-width="3"/>118          <rect x="18" y="14" width="20" height="6" rx="3" fill="#FFFFFF"/>119        </svg>120      </div>121    </div>122  </div>123 124  <!-- Suggestions List -->125  <div class="suggestions">126    <div class="suggestion">127      <div>128        <div class="s-text">1984 by George Orwell</div>129        <div class="s-sub">Recent</div>130      </div>131      <svg class="arrow" viewBox="0 0 48 48">132        <path d="M12 34 L34 12 M34 12 V26 M34 12 H20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>133      </svg>134    </div>135 136    <div class="suggestion">137      <div class="s-text"><span class="keyword">1984</span> george orwell <span class="keyword">hardcover</span></div>138      <svg class="arrow" viewBox="0 0 48 48">139        <path d="M12 34 L34 12 M34 12 V26 M34 12 H20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>140      </svg>141    </div>142 143    <div class="suggestion">144      <div class="s-text"><span class="keyword">1984</span> book george orwell</div>145      <svg class="arrow" viewBox="0 0 48 48">146        <path d="M12 34 L34 12 M34 12 V26 M34 12 H20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>147      </svg>148    </div>149 150    <div class="suggestion">151      <div class="s-text"><span class="keyword">1984</span> george orwell <span class="keyword">first edition</span></div>152      <svg class="arrow" viewBox="0 0 48 48">153        <path d="M12 34 L34 12 M34 12 V26 M34 12 H20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>154      </svg>155    </div>156 157    <div class="suggestion">158      <div class="s-text"><span class="keyword">1984</span> george orwell <span class="keyword">paperback</span></div>159      <svg class="arrow" viewBox="0 0 48 48">160        <path d="M12 34 L34 12 M34 12 V26 M34 12 H20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>161      </svg>162    </div>163 164    <div class="suggestion">165      <div class="s-text"><span class="keyword">1984</span> george orwell <span class="keyword">dvd</span></div>166      <svg class="arrow" viewBox="0 0 48 48">167        <path d="M12 34 L34 12 M34 12 V26 M34 12 H20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>168      </svg>169    </div>170 171    <div class="suggestion">172      <div class="s-text"><span class="keyword">1984</span> george orwell <span class="keyword">easton press</span></div>173      <svg class="arrow" viewBox="0 0 48 48">174        <path d="M12 34 L34 12 M34 12 V26 M34 12 H20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>175      </svg>176    </div>177 178    <div class="suggestion">179      <div class="s-text">1. <span class="keyword">1984</span> by george orwell</div>180      <svg class="arrow" viewBox="0 0 48 48">181        <path d="M12 34 L34 12 M34 12 V26 M34 12 H20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>182      </svg>183    </div>184 185    <div class="suggestion">186      <div class="s-text"><span class="keyword">1984</span> george orwell <span class="keyword">hardcover 1st edition</span></div>187      <svg class="arrow" viewBox="0 0 48 48">188        <path d="M12 34 L34 12 M34 12 V26 M34 12 H20" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>189      </svg>190    </div>191  </div>192 193  <!-- Keyboard -->194  <div class="keyboard">195    <div class="kb-predictions">196      <div>Orwell</div>197      <div style="border-left:1px solid #303030; height:44px;"></div>198      <div>Rowell</div>199      <div style="flex:1;"></div>200      <svg viewBox="0 0 48 48" width="48" height="48">201        <circle cx="20" cy="20" r="14" stroke="#BEBEBE" stroke-width="4" fill="none"/>202        <line x1="34" y1="34" x2="46" y2="46" stroke="#BEBEBE" stroke-width="4" stroke-linecap="round"/>203      </svg>204    </div>205 206    <div class="kb-grid">207      <!-- Row 1 -->208      <div class="row">209        <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>210        <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>211      </div>212      <!-- Row 2 -->213      <div class="row">214        <div class="key wide">a</div><div class="key wide">s</div><div class="key wide">d</div><div class="key wide">f</div><div class="key wide">g</div>215        <div class="key wide">h</div><div class="key wide">j</div><div class="key wide">k</div><div class="key wide">l</div>216      </div>217      <!-- Row 3 -->218      <div class="row">219        <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>220        <div class="key">n</div><div class="key">m</div>221        <div class="key wide">222          <svg viewBox="0 0 48 48" width="48" height="48">223            <path d="M10 34 L24 20 L38 34" stroke="#E6E6E6" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>224          </svg>225        </div>226      </div>227      <!-- Row 4 -->228      <div class="row">229        <div class="key wide">?123</div>230        <div class="key">,</div>231        <div class="key wide">232          <svg viewBox="0 0 48 48" width="48" height="48">233            <circle cx="24" cy="24" r="14" stroke="#E6E6E6" stroke-width="4" fill="none"/>234            <circle cx="24" cy="24" r="4" fill="#E6E6E6"/>235          </svg>236        </div>237        <div class="key space"></div>238        <div class="key">.</div>239        <div class="key wide">240          <svg viewBox="0 0 48 48" width="48" height="48">241            <path d="M20 14 C20 12 28 12 28 14 V26 C28 30 32 32 34 32 H14 C16 32 20 30 20 26 Z" fill="#E6E6E6"/>242          </svg>243        </div>244        <div class="key circle">245          <svg viewBox="0 0 48 48" width="48" height="48">246            <circle cx="20" cy="20" r="14" stroke="#000" stroke-width="4" fill="none"/>247            <line x1="34" y1="34" x2="46" y2="46" stroke="#000" stroke-width="4" stroke-linecap="round"/>248          </svg>249        </div>250      </div>251    </div>252  </div>253 254  <div class="bottom-indicator"></div>255</div>256</body>257</html>