GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    border-radius: 28px;14    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #333;25    font-weight: 600;26    font-size: 36px;27  }28  .status-right {29    display: flex;30    gap: 24px;31    align-items: center;32  }33  .status-dot {34    width: 18px; height: 18px; background:#666; border-radius:50%;35  }36 37  /* Search bar */38  .search-wrap {39    padding: 18px 24px 10px 24px;40  }41  .search-bar {42    height: 110px;43    border: 1px solid #E0E0E0;44    border-radius: 56px;45    display: flex;46    align-items: center;47    padding: 0 28px;48    gap: 24px;49    box-shadow: 0 2px 6px rgba(0,0,0,0.06);50  }51  .search-input {52    flex: 1;53    color: #666;54    font-size: 42px;55  }56 57  /* Quick chips */58  .chips-row {59    display: flex;60    gap: 32px;61    padding: 16px 24px 12px 24px;62  }63  .chip {64    flex: 0 0 auto;65    width: 300px;66    border: 1px solid #E7E7E7;67    border-radius: 26px;68    padding: 22px;69    display: flex;70    gap: 22px;71    align-items: center;72    background: #FAFAFA;73  }74  .chip .icon-circle {75    width: 72px; height: 72px; border-radius: 50%; background: #F1F1F1; display:flex; align-items:center; justify-content:center; border:1px solid #E0E0E0;76  }77  .chip .texts { line-height: 1.15; }78  .chip .title { font-size: 40px; color:#333; }79  .chip .subtitle { font-size: 30px; color:#7C7C7C; margin-top: 6px; }80  .chip.more { width: 220px; }81 82  /* Section title */83  .section-title {84    font-size: 40px;85    color: #333;86    padding: 18px 24px 8px 24px;87  }88 89  /* Recent list */90  .recent-list {91    padding: 0 24px 0 24px;92  }93  .recent-item {94    display: flex;95    gap: 26px;96    padding: 26px 0;97    border-bottom: 1px solid #F0F0F0;98  }99  .clock-circle {100    width: 84px; height: 84px; border-radius: 50%; background: #F3F3F3; border:1px solid #E3E3E3; display:flex; align-items:center; justify-content:center;101  }102  .item-texts { flex:1; }103  .item-title { font-size: 44px; color:#1F1F1F; }104  .item-subtitle { font-size: 34px; color:#6B6B6B; margin-top: 10px; }105  .item-subtitle .closed { color: #D64545; font-weight: 600; }106  .item-subtitle .dot { color:#B0B0B0; padding: 0 10px; }107 108  /* Bottom keyboard mock */109  .keyboard {110    position: absolute;111    left: 0; right: 0; bottom: 0;112    height: 920px;113    background: #F2EDF9;114    border-top: 1px solid #DDD;115    padding: 30px 28px;116  }117  .kb-top {118    display: flex;119    justify-content: space-between;120    margin-bottom: 24px;121  }122  .kb-chip {123    width: 96px; height: 96px; background:#E6E0F4; border-radius: 26px; display:flex; align-items:center; justify-content:center; color:#4E3C8C; font-size: 42px; border:1px solid #D7D1EA;124  }125  .kb-keys {126    display: grid;127    grid-template-columns: repeat(10, 1fr);128    gap: 16px;129  }130  .key {131    height: 120px;132    background: #FFF;133    border: 1px solid #E5E5EE;134    border-radius: 28px;135    display:flex;136    align-items:center;137    justify-content:center;138    color:#333;139    font-size: 48px;140    box-shadow: 0 1px 0 rgba(0,0,0,0.05);141  }142  .kb-row { margin-top: 18px; }143  .key.wide { grid-column: span 2; }144  .key.extra-wide { grid-column: span 5; }145  .key.small { height: 100px; font-size: 40px; }146 147  /* Simple SVG icons */148  .icon { width: 48px; height: 48px; }149  .icon-sm { width: 40px; height: 40px; }150 151</style>152</head>153<body>154<div id="render-target">155 156  <!-- STATUS BAR -->157  <div class="status-bar">158    <div>10:35</div>159    <div class="status-right">160      <!-- location dot -->161      <svg class="icon-sm" viewBox="0 0 24 24">162        <circle cx="12" cy="12" r="6" fill="#666"></circle>163      </svg>164      <!-- wifi -->165      <svg class="icon-sm" viewBox="0 0 24 24">166        <path d="M2 9c4-3 16-3 20 0M5 12c3-2 11-2 14 0M9 15c2-1 4-1 6 0M12 18l2 2-2 2-2-2 2-2z" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>167      </svg>168      <!-- battery -->169      <svg class="icon-sm" viewBox="0 0 24 24">170        <rect x="2" y="5" width="18" height="14" rx="2" ry="2" stroke="#555" stroke-width="2" fill="none"></rect>171        <rect x="4" y="7" width="12" height="10" fill="#555"></rect>172        <rect x="20" y="9" width="2" height="6" fill="#555"></rect>173      </svg>174    </div>175  </div>176 177  <!-- SEARCH BAR -->178  <div class="search-wrap">179    <div class="search-bar">180      <!-- back arrow -->181      <svg class="icon" viewBox="0 0 24 24">182        <path d="M15 5l-7 7 7 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>183      </svg>184      <div class="search-input">Search here</div>185      <!-- mic -->186      <svg class="icon" viewBox="0 0 24 24">187        <rect x="9" y="4" width="6" height="10" rx="3" fill="#333"></rect>188        <path d="M5 11c0 4 3 6 7 6s7-2 7-6M12 17v3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>189      </svg>190    </div>191  </div>192 193  <!-- QUICK CHIPS -->194  <div class="chips-row">195    <div class="chip">196      <div class="icon-circle">197        <svg class="icon-sm" viewBox="0 0 24 24">198          <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" fill="#606060"></path>199        </svg>200      </div>201      <div class="texts">202        <div class="title">Home</div>203        <div class="subtitle">Set location</div>204      </div>205    </div>206    <div class="chip">207      <div class="icon-circle">208        <svg class="icon-sm" viewBox="0 0 24 24">209          <rect x="5" y="6" width="14" height="10" rx="2" fill="#606060"></rect>210          <rect x="9" y="2" width="6" height="4" rx="1" fill="#606060"></rect>211        </svg>212      </div>213      <div class="texts">214        <div class="title">Work</div>215        <div class="subtitle">Set location</div>216      </div>217    </div>218    <div class="chip more">219      <div class="icon-circle">220        <svg class="icon-sm" viewBox="0 0 24 24">221          <circle cx="12" cy="12" r="3" fill="#606060"></circle>222          <circle cx="5" cy="12" r="3" fill="#606060"></circle>223          <circle cx="19" cy="12" r="3" fill="#606060"></circle>224        </svg>225      </div>226      <div class="texts">227        <div class="title">More</div>228      </div>229    </div>230  </div>231 232  <!-- Recent Section -->233  <div class="section-title">Recent</div>234 235  <div class="recent-list">236    <div class="recent-item">237      <div class="clock-circle">238        <svg class="icon-sm" viewBox="0 0 24 24">239          <circle cx="12" cy="12" r="8" stroke="#999" stroke-width="2" fill="none"></circle>240          <path d="M12 7v5l4 2" stroke="#999" stroke-width="2" stroke-linecap="round" fill="none"></path>241        </svg>242      </div>243      <div class="item-texts">244        <div class="item-title">Detroit</div>245        <div class="item-subtitle">MI, USA</div>246      </div>247    </div>248 249    <div class="recent-item">250      <div class="clock-circle">251        <svg class="icon-sm" viewBox="0 0 24 24">252          <circle cx="12" cy="12" r="8" stroke="#999" stroke-width="2" fill="none"></circle>253          <path d="M12 7v5l4 2" stroke="#999" stroke-width="2" stroke-linecap="round" fill="none"></path>254        </svg>255      </div>256      <div class="item-texts">257        <div class="item-title">98101</div>258        <div class="item-subtitle">Seattle, WA, USA</div>259      </div>260    </div>261 262    <div class="recent-item">263      <div class="clock-circle">264        <svg class="icon-sm" viewBox="0 0 24 24">265          <circle cx="12" cy="12" r="8" stroke="#999" stroke-width="2" fill="none"></circle>266          <path d="M12 7v5l4 2" stroke="#999" stroke-width="2" stroke-linecap="round" fill="none"></path>267        </svg>268      </div>269      <div class="item-texts">270        <div class="item-title">parks</div>271      </div>272    </div>273 274    <div class="recent-item">275      <div class="clock-circle">276        <svg class="icon-sm" viewBox="0 0 24 24">277          <circle cx="12" cy="12" r="8" stroke="#999" stroke-width="2" fill="none"></circle>278          <path d="M12 7v5l4 2" stroke="#999" stroke-width="2" stroke-linecap="round" fill="none"></path>279        </svg>280      </div>281      <div class="item-texts">282        <div class="item-title">Rose Cafe</div>283        <div class="item-subtitle">284          Westend Marg, Butterfly Park, Saiyad Ul Ajaib E...285          <span class="closed">Closed</span>286          <span class="dot">·</span>287          Opens 12:00 PM288        </div>289      </div>290    </div>291 292    <div class="recent-item">293      <div class="clock-circle">294        <svg class="icon-sm" viewBox="0 0 24 24">295          <circle cx="12" cy="12" r="8" stroke="#999" stroke-width="2" fill="none"></circle>296          <path d="M12 7v5l4 2" stroke="#999" stroke-width="2" stroke-linecap="round" fill="none"></path>297        </svg>298      </div>299      <div class="item-texts">300        <div class="item-title">Qutub Minar</div>301        <div class="item-subtitle">Qutub Minar, Seth Sarai, Mehrauli, New Delhi, D...</div>302      </div>303    </div>304  </div>305 306  <!-- Keyboard placeholder -->307  <div class="keyboard">308    <div class="kb-top">309      <div class="kb-chip">🔲</div>310      <div style="display:flex; gap:18px;">311        <div class="kb-chip">😊</div>312        <div class="kb-chip">GIF</div>313        <div class="kb-chip">⚙️</div>314        <div class="kb-chip">G</div>315        <div class="kb-chip">🎨</div>316        <div class="kb-chip">🎤</div>317      </div>318    </div>319 320    <!-- Letters rows -->321    <div class="kb-keys">322      <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>323    </div>324    <div class="kb-keys kb-row">325      <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 class="key">⌫</div>326    </div>327    <div class="kb-keys kb-row">328      <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">,</div><div class="key">.</div><div class="key">🔍</div>329    </div>330    <div class="kb-keys kb-row">331      <div class="key small">?123</div>332      <div class="key small">⬆︎</div>333      <div class="key extra-wide">space</div>334      <div class="key small">🙂</div>335      <div class="key small">•</div>336    </div>337  </div>338 339</div>340</body>341</html>