GD-ML/AndroidCode

1<html lang="en">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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 32px;26    color: #222;27    font-weight: 600;28    font-size: 40px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .status-icon {36    width: 36px;37    height: 36px;38    opacity: 0.85;39  }40 41  /* Search area */42  .search-area {43    position: absolute;44    top: 140px;45    left: 32px;46    right: 32px;47    height: 120px;48  }49  .back-btn {50    position: absolute;51    left: 0;52    top: 32px;53    width: 56px;54    height: 56px;55    display: flex;56    align-items: center;57    justify-content: center;58  }59  .search-box {60    position: absolute;61    left: 72px;62    right: 0;63    height: 96px;64    border-radius: 48px;65    background: #F2F3F5;66    display: flex;67    align-items: center;68    padding: 0 32px;69    gap: 20px;70  }71  .search-icon {72    width: 40px;73    height: 40px;74    opacity: 0.7;75  }76  .search-text {77    font-size: 40px;78    color: #222;79    letter-spacing: 0.2px;80  }81 82  /* Content card */83  .content-area {84    position: absolute;85    top: 320px;86    left: 32px;87    right: 32px;88  }89  .product-card {90    width: 700px;91    border-radius: 28px;92    background: #fff;93    box-shadow: 0 4px 16px rgba(0,0,0,0.08);94    overflow: hidden;95  }96  .card-image {97    height: 440px;98    background: linear-gradient(135deg, #ffcf6a, #ff5f3e);99    border-bottom: 1px solid #e0e0e0;100    display: flex;101    align-items: center;102    justify-content: center;103    color: #ffffff;104    font-weight: 700;105    font-size: 40px;106    text-align: center;107    padding: 0 24px;108  }109  .card-body {110    padding: 32px;111  }112  .card-title {113    font-size: 44px;114    font-weight: 700;115    color: #222;116    line-height: 1.25;117    margin-bottom: 24px;118  }119  .card-price {120    font-size: 42px;121    font-weight: 800;122    color: #6C4DFF;123  }124 125  /* Keyboard & suggestion bar */126  .suggestion-bar {127    position: absolute;128    left: 0;129    right: 0;130    bottom: 1040px;131    height: 88px;132    display: flex;133    align-items: center;134    gap: 24px;135    padding: 0 32px;136    background: #0F0F10;137    color: #fff;138  }139  .suggest-pill {140    background: #1c1c1f;141    color: #fff;142    border-radius: 36px;143    padding: 14px 26px;144    font-size: 34px;145  }146  .kb-container {147    position: absolute;148    left: 0;149    right: 0;150    bottom: 0;151    height: 1040px;152    background: #0F0F10;153    color: #fff;154    padding: 24px 24px 32px;155    box-sizing: border-box;156  }157  .kb-row {158    display: flex;159    align-items: center;160    justify-content: space-between;161    margin: 18px 6px;162  }163  .key {164    background: #202124;165    border-radius: 22px;166    width: 88px;167    height: 120px;168    display: flex;169    align-items: center;170    justify-content: center;171    font-size: 46px;172    color: #fff;173  }174  .key.wide { width: 120px; }175  .key.space {176    flex: 1;177    height: 120px;178    margin: 0 16px;179    font-size: 40px;180    color: #bbb;181  }182  .key.icon {183    font-size: 34px;184    color: #d0d0d0;185  }186  .search-go {187    width: 120px;188    height: 120px;189    background: #C8F7C3;190    color: #0a0a0a;191    border-radius: 60px;192    display: flex;193    align-items: center;194    justify-content: center;195  }196  .green-pill {197    background: #BFD4BE;198    color: #0a0a0a;199    width: 140px;200  }201  .comma, .period { width: 120px; }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status Bar -->208  <div class="status-bar">209    <div>8:21</div>210    <div class="status-right">211      <!-- simple indicators -->212      <svg class="status-icon" viewBox="0 0 24 24">213        <circle cx="12" cy="12" r="10" fill="#555"/>214      </svg>215      <svg class="status-icon" viewBox="0 0 24 24">216        <path d="M2 18h20V6L2 18z" fill="#777"/>217      </svg>218      <svg class="status-icon" viewBox="0 0 24 24">219        <path d="M3 8h18v8H3z" fill="#777"/>220        <rect x="19" y="6" width="2" height="12" fill="#333"/>221      </svg>222    </div>223  </div>224 225  <!-- Search Area -->226  <div class="search-area">227    <div class="back-btn">228      <svg width="44" height="44" viewBox="0 0 24 24">229        <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>230      </svg>231    </div>232    <div class="search-box">233      <svg class="search-icon" viewBox="0 0 24 24">234        <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>235        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#666" stroke-width="2"/>236      </svg>237      <div class="search-text">Bicycles</div>238    </div>239  </div>240 241  <!-- Content -->242  <div class="content-area">243    <div class="product-card">244      <div class="card-image">[IMG: Playground bundle scene]</div>245      <div class="card-body">246        <div class="card-title">Playground Bundle Value<br/>Set</div>247        <div class="card-price">BHD 2899.000</div>248      </div>249    </div>250  </div>251 252  <!-- Suggestion bar above keyboard -->253  <div class="suggestion-bar">254    <div class="suggest-pill">Bicycles</div>255    <div class="suggest-pill">Bicycled</div>256    <div style="margin-left:auto; display:flex; align-items:center; gap:14px;">257      <svg width="40" height="40" viewBox="0 0 24 24">258        <circle cx="12" cy="12" r="10" fill="#1c1c1f"/>259        <rect x="11" y="8" width="2" height="8" fill="#fff"/>260        <circle cx="12" cy="17" r="1.5" fill="#fff"/>261      </svg>262    </div>263  </div>264 265  <!-- Keyboard -->266  <div class="kb-container">267    <!-- Row 1 -->268    <div class="kb-row">269      <div class="key">q</div>270      <div class="key">w</div>271      <div class="key">e</div>272      <div class="key">r</div>273      <div class="key">t</div>274      <div class="key">y</div>275      <div class="key">u</div>276      <div class="key">i</div>277      <div class="key">o</div>278      <div class="key">p</div>279    </div>280    <!-- Row 2 -->281    <div class="kb-row">282      <div class="key">a</div>283      <div class="key">s</div>284      <div class="key">d</div>285      <div class="key">f</div>286      <div class="key">g</div>287      <div class="key">h</div>288      <div class="key">j</div>289      <div class="key">k</div>290      <div class="key">l</div>291    </div>292    <!-- Row 3 -->293    <div class="kb-row">294      <div class="key icon">295        <svg width="36" height="36" viewBox="0 0 24 24">296          <path d="M8 16l4-8 4 8" fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round"/>297        </svg>298      </div>299      <div class="key">z</div>300      <div class="key">x</div>301      <div class="key">c</div>302      <div class="key">v</div>303      <div class="key">b</div>304      <div class="key">n</div>305      <div class="key">m</div>306      <div class="key icon">307        <svg width="36" height="36" viewBox="0 0 24 24">308          <rect x="4" y="7" width="16" height="10" rx="2" fill="#ddd"/>309          <path d="M18 9l3 3-3 3" fill="none" stroke="#0F0F10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>310        </svg>311      </div>312    </div>313    <!-- Row 4 -->314    <div class="kb-row">315      <div class="key green-pill">?123</div>316      <div class="key comma">,</div>317      <div class="key icon">318        <svg width="36" height="36" viewBox="0 0 24 24">319          <circle cx="12" cy="12" r="9" fill="#ddd"/>320          <circle cx="9" cy="10" r="1.5" fill="#0F0F10"/>321          <circle cx="15" cy="10" r="1.5" fill="#0F0F10"/>322          <path d="M8 15c2.5 2 5.5 2 8 0" stroke="#0F0F10" stroke-width="2" fill="none"/>323        </svg>324      </div>325      <div class="key space">space</div>326      <div class="key period">.</div>327      <div class="search-go">328        <svg width="44" height="44" viewBox="0 0 24 24">329          <circle cx="11" cy="11" r="7" stroke="#0a0a0a" stroke-width="2" fill="none"/>330          <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#0a0a0a" stroke-width="2"/>331        </svg>332      </div>333    </div>334  </div>335 336</div>337</body>338</html>