GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Mock</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:#FFFFFF;11    border-radius:24px;12    box-shadow: 0 8px 30px rgba(0,0,0,0.2);13  }14 15  /* Status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:120px; background:#000; color:#fff;19    display:flex; align-items:center; justify-content:space-between;20    padding:0 32px; font-size:38px;21  }22  .status-left { display:flex; align-items:center; gap:18px; }23  .status-right { display:flex; align-items:center; gap:26px; }24  .status-icon { width:34px; height:34px; border-radius:6px; background:#333; }25 26  /* Search header */27  .search-header {28    position:absolute; top:120px; left:0; right:0;29    height:120px; background:#fff; border-bottom:1px solid #eee;30    display:flex; align-items:center; padding:0 24px;31  }32  .back-icon {33    width:72px; height:72px; display:flex; align-items:center; justify-content:center;34    margin-right:16px;35  }36  .back-icon svg { width:44px; height:44px; }37  .search-text {38    font-size:48px; color:#101010; flex:1;39  }40  .clear-btn {41    width:72px; height:72px; display:flex; align-items:center; justify-content:center;42  }43  .clear-btn svg { width:56px; height:56px; }44 45  /* Content blank area */46  .content-area {47    position:absolute; top:240px; left:0; right:0; bottom:900px; /* leave space for keyboard */48    background:#fff;49  }50 51  /* Action pills */52  .action-pills {53    position:absolute; bottom:980px; left:0; right:0;54    display:flex; justify-content:center; gap:48px;55  }56  .pill {57    width:450px; height:130px; background:#111; color:#fff;58    border-radius:65px; display:flex; align-items:center; justify-content:center;59    gap:24px; font-size:44px; box-shadow:0 6px 12px rgba(0,0,0,0.25);60  }61  .pill svg { width:54px; height:54px; fill:none; stroke:#fff; stroke-width:4px; }62 63  /* Suggestion bar above keyboard */64  .suggestions {65    position:absolute; bottom:900px; left:0; right:0; height:90px;66    background:#1f2326; color:#cfd8dc;67    display:flex; align-items:center; justify-content:center;68    font-size:44px; letter-spacing:1px;69  }70  .suggestions .left, .suggestions .right {71    position:absolute; top:0; height:90px; width:90px; display:flex; align-items:center; justify-content:center;72  }73  .suggestions .left { left:20px; }74  .suggestions .right { right:20px; }75 76  /* Keyboard */77  .keyboard {78    position:absolute; bottom:0; left:0; right:0;79    height:900px; background:#0f1416; color:#e5e5e5;80    padding:28px;81  }82  .key-row { display:flex; justify-content:center; gap:12px; margin-bottom:22px; }83  .key {84    width:95px; height:120px; background:#2a2f31; border-radius:22px;85    display:flex; align-items:center; justify-content:center;86    font-size:48px; color:#d7dbe0;87  }88  .key.small { width:85px; }89  .key.wide { width:160px; }90  .key.space { flex:1; height:120px; }91  .key.icon { font-size:40px; }92  .row2 { padding:0 60px; }93  .row3 { padding:0 120px; }94  .bottom-row { display:flex; align-items:center; gap:16px; margin-top:36px; }95  .special-green {96    background:#7AD7AD; color:#102015; border-radius:40px;97    width:170px; height:110px; display:flex; align-items:center; justify-content:center;98    font-size:42px; font-weight:bold;99  }100  .enter-btn {101    width:140px; height:140px; background:#7CEBC1; border-radius:70px;102    display:flex; align-items:center; justify-content:center;103  }104  .enter-btn svg { width:70px; height:70px; fill:none; stroke:#0d3b2a; stroke-width:10px; }105 106  /* Minor icons */107  .mic svg, .grid svg { width:40px; height:40px; stroke:#cfd8dc; fill:none; stroke-width:4px; }108</style>109</head>110<body>111<div id="render-target">112 113  <!-- Status bar -->114  <div class="status-bar">115    <div class="status-left">116      <div>1:26</div>117      <div class="status-icon"></div>118      <div class="status-icon"></div>119      <div class="status-icon"></div>120    </div>121    <div class="status-right">122      <!-- Wi-Fi -->123      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">124        <path d="M2 8c5-4 15-4 20 0"></path>125        <path d="M5 11c3-3 11-3 14 0"></path>126        <path d="M8 14c2-2 6-2 8 0"></path>127        <circle cx="12" cy="18" r="1.5" fill="#fff"></circle>128      </svg>129      <!-- Battery -->130      <svg width="46" height="40" viewBox="0 0 26 14" fill="none" stroke="#fff" stroke-width="2">131        <rect x="1" y="2" width="20" height="10" rx="2"></rect>132        <rect x="22" y="5" width="3" height="4"></rect>133      </svg>134      <div style="font-weight:bold">100%</div>135    </div>136  </div>137 138  <!-- Search header -->139  <div class="search-header">140    <div class="back-icon">141      <svg viewBox="0 0 24 24">142        <path d="M15 6 L9 12 L15 18" stroke="#000" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>143      </svg>144    </div>145    <div class="search-text">42-size Black sneakers</div>146    <div class="clear-btn">147      <svg viewBox="0 0 48 48">148        <circle cx="24" cy="24" r="22" fill="#E9ECEF"/>149        <path d="M16 16 L32 32 M32 16 L16 32" stroke="#666" stroke-width="4" stroke-linecap="round"/>150      </svg>151    </div>152  </div>153 154  <!-- Blank content area -->155  <div class="content-area"></div>156 157  <!-- Action pills -->158  <div class="action-pills">159    <div class="pill">160      <svg viewBox="0 0 24 24">161        <rect x="3" y="6" width="18" height="12" rx="2"></rect>162        <circle cx="12" cy="12" r="4"></circle>163        <path d="M6 6 L8 3 L16 3 L18 6" stroke="#fff"></path>164      </svg>165      <span>Camera</span>166    </div>167    <div class="pill">168      <svg viewBox="0 0 24 24">169        <rect x="4" y="5" width="14" height="12" rx="2"></rect>170        <path d="M6 14 L9 11 L12 14 L15 10 L18 14" stroke="#fff"></path>171      </svg>172      <span>Photos</span>173    </div>174  </div>175 176  <!-- Suggestion bar -->177  <div class="suggestions">178    <div class="left grid">179      <svg viewBox="0 0 24 24">180        <rect x="3" y="3" width="7" height="7"></rect>181        <rect x="14" y="3" width="7" height="7"></rect>182        <rect x="3" y="14" width="7" height="7"></rect>183        <rect x="14" y="14" width="7" height="7"></rect>184      </svg>185    </div>186    sneakers187    <div class="right mic">188      <svg viewBox="0 0 24 24">189        <rect x="9" y="4" width="6" height="10" rx="3"></rect>190        <path d="M6 11 c0 4 12 4 12 0" ></path>191        <path d="M12 15 V20 M9 20 H15" ></path>192      </svg>193    </div>194  </div>195 196  <!-- Keyboard -->197  <div class="keyboard">198    <!-- Row 1 -->199    <div class="key-row">200      <div class="key">q</div>201      <div class="key">w</div>202      <div class="key">e</div>203      <div class="key">r</div>204      <div class="key">t</div>205      <div class="key">y</div>206      <div class="key">u</div>207      <div class="key">i</div>208      <div class="key">o</div>209      <div class="key">p</div>210    </div>211 212    <!-- Row 2 -->213    <div class="key-row row2">214      <div class="key">a</div>215      <div class="key">s</div>216      <div class="key">d</div>217      <div class="key">f</div>218      <div class="key">g</div>219      <div class="key">h</div>220      <div class="key">j</div>221      <div class="key">k</div>222      <div class="key">l</div>223    </div>224 225    <!-- Row 3 -->226    <div class="key-row row3">227      <div class="key icon">228        <svg width="34" height="34" viewBox="0 0 24 24">229          <path d="M6 16 L12 8 L18 16" stroke="#d7dbe0" stroke-width="3" fill="none" stroke-linecap="round"/>230        </svg>231      </div>232      <div class="key">z</div>233      <div class="key">x</div>234      <div class="key">c</div>235      <div class="key">v</div>236      <div class="key">b</div>237      <div class="key">n</div>238      <div class="key">m</div>239      <div class="key icon">240        <svg width="36" height="36" viewBox="0 0 24 24">241          <path d="M5 7 L19 7 L19 17 L5 17 Z" stroke="#d7dbe0" stroke-width="2" fill="none"/>242          <path d="M16 10 L19 13 L16 16" stroke="#d7dbe0" stroke-width="2" fill="none"/>243        </svg>244      </div>245    </div>246 247    <!-- Bottom function row -->248    <div class="bottom-row">249      <div class="special-green">?123</div>250      <div class="key small">,</div>251      <div class="key small">☺</div>252      <div class="key space"></div>253      <div class="key small">.</div>254      <div class="enter-btn">255        <svg viewBox="0 0 24 24">256          <path d="M5 12 L10 17 L19 8" />257        </svg>258      </div>259    </div>260  </div>261 262</div>263</body>264</html>