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;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #101215; /* dark app background */13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    height: 100px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #dcdcdc;24    font-weight: 600;25    font-size: 34px;26  }27  .sb-left, .sb-right {28    display: flex;29    align-items: center;30    gap: 26px;31  }32  .icon-dot {33    width: 12px; height: 12px; background: #dcdcdc; border-radius: 50%;34  }35 36  /* Search area */37  .search-wrap {38    padding: 12px 36px 0 36px;39  }40  .search-bar {41    height: 120px;42    background: #21252b;43    border-radius: 24px;44    display: flex;45    align-items: center;46    padding: 0 32px;47    gap: 24px;48    color: #bfc6d0;49    font-size: 40px;50  }51  .search-cancel {52    position: absolute;53    right: 36px;54    top: 148px;55    color: #7fb5db;56    font-size: 40px;57  }58 59  /* Tabs */60  .tabs {61    margin-top: 28px;62    padding: 0 36px;63    display: flex;64    align-items: center;65    gap: 40px;66    font-size: 44px;67  }68  .tab {69    color: #bfc6d0;70    padding-bottom: 18px;71  }72  .tab.active {73    color: #bfe0ff;74    border-bottom: 6px solid #3e8edc;75  }76 77  /* List container */78  .list {79    margin-top: 12px;80    border-top: 1px solid #1f242b;81  }82  .row {83    display: flex;84    align-items: center;85    padding: 28px 36px;86    border-bottom: 1px solid #1f242b;87    height: 168px;88  }89  .thumb {90    width: 180px;91    height: 110px;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    display: flex;95    justify-content: center;96    align-items: center;97    color: #757575;98    font-size: 28px;99    border-radius: 8px;100    margin-right: 36px;101  }102  .title {103    flex: 1;104    font-size: 48px;105    color: #e8eaed;106  }107  .chevron {108    width: 48px; height: 48px;109  }110 111  /* Keyboard mock */112  .keyboard {113    position: absolute;114    left: 0;115    bottom: 0;116    width: 1080px;117    height: 920px;118    background: #221f1a;119    border-top-left-radius: 24px;120    border-top-right-radius: 24px;121    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);122  }123  .kb-top {124    height: 110px;125    display: flex;126    align-items: center;127    gap: 44px;128    padding: 0 36px;129    color: #e8e0d4;130    font-size: 40px;131  }132  .kb-icon {133    width: 76px; height: 76px; background: #2c2722; border-radius: 20px;134    display: flex; align-items: center; justify-content: center;135    border: 1px solid #3a342e;136  }137  .key-row {138    display: flex;139    justify-content: space-between;140    padding: 20px 18px;141  }142  .key {143    height: 120px;144    min-width: 90px;145    background: #2a251f;146    border: 1px solid #3b332d;147    border-radius: 26px;148    color: #f1e6d7;149    font-size: 44px;150    display: flex; align-items: center; justify-content: center;151    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);152  }153  .key.wide { min-width: 180px; }154  .space {155    flex: 1;156    margin: 0 18px;157    height: 120px;158    background: #2a251f;159    border: 1px solid #3b332d;160    border-radius: 26px;161    color: #d9d0c5;162    font-size: 40px;163    display: flex; align-items: center; justify-content: center;164  }165  .gesture-bar {166    position: absolute;167    bottom: 20px;168    left: 50%;169    transform: translateX(-50%);170    width: 390px;171    height: 10px;172    background: #e6e6e6;173    border-radius: 6px;174    opacity: 0.9;175  }176 177  /* Helper for mini text in placeholders */178  .thumb small { font-size: 22px; }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status bar -->185  <div class="status-bar">186    <div class="sb-left">187      <div>11:29</div>188      <div class="icon-dot"></div>189      <div class="icon-dot"></div>190      <div class="icon-dot"></div>191      <div class="icon-dot"></div>192    </div>193    <div class="sb-right">194      <!-- WiFi -->195      <svg width="38" height="38" viewBox="0 0 24 24" fill="#dcdcdc">196        <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6.5-5c4.3-3.7 12.7-3.7 17 0l-1.6 1.9c-3.3-2.8-10.5-2.8-13.8 0L5.5 13.5zm3.8 3.9c2.7-2.3 7.2-2.3 9.9 0l-1.6 1.8c-1.9-1.6-4.8-1.6-6.7 0l-1.6-1.8z"/>197      </svg>198      <!-- Battery -->199      <svg width="54" height="38" viewBox="0 0 28 18" fill="none" stroke="#dcdcdc" stroke-width="2">200        <rect x="1" y="3" width="22" height="12" rx="2"></rect>201        <rect x="24" y="6" width="3" height="6" rx="1" fill="#dcdcdc" stroke="#dcdcdc"></rect>202        <rect x="3" y="5" width="16" height="8" fill="#dcdcdc" stroke="#dcdcdc"></rect>203      </svg>204    </div>205  </div>206 207  <!-- Search -->208  <div class="search-wrap">209    <div class="search-bar">210      <!-- magnifier -->211      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#bfc6d0" stroke-width="2">212        <circle cx="11" cy="11" r="7"></circle>213        <line x1="16.5" y1="16.5" x2="22" y2="22"></line>214      </svg>215      <div>What are you looking for?</div>216    </div>217    <div class="search-cancel">Cancel</div>218  </div>219 220  <!-- Tabs -->221  <div class="tabs">222    <div class="tab active">Categories</div>223    <div class="tab">For you</div>224  </div>225 226  <!-- Category list -->227  <div class="list">228    <div class="row">229      <div class="thumb">[IMG: Laptop & Tablet]</div>230      <div class="title">Computers & tablets</div>231      <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#9aa3ad" stroke-width="2">232        <polyline points="8,4 16,12 8,20"></polyline>233      </svg>234    </div>235    <div class="row">236      <div class="thumb">[IMG: Smartphones]</div>237      <div class="title">Telephony</div>238      <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#9aa3ad" stroke-width="2">239        <polyline points="8,4 16,12 8,20"></polyline>240      </svg>241    </div>242    <div class="row">243      <div class="thumb">[IMG: TV & Headphones]</div>244      <div class="title">Image & sound</div>245      <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#9aa3ad" stroke-width="2">246        <polyline points="8,4 16,12 8,20"></polyline>247      </svg>248    </div>249    <div class="row">250      <div class="thumb">[IMG: Console & VR]</div>251      <div class="title">Gaming</div>252      <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#9aa3ad" stroke-width="2">253        <polyline points="8,4 16,12 8,20"></polyline>254      </svg>255    </div>256    <div class="row">257      <div class="thumb">[IMG: Desk & Chair]</div>258      <div class="title">Working from home & business</div>259      <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#9aa3ad" stroke-width="2">260        <polyline points="8,4 16,12 8,20"></polyline>261      </svg>262    </div>263    <div class="row">264      <div class="thumb">[IMG: Washer & Vacuum]</div>265      <div class="title">Household & living</div>266      <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#9aa3ad" stroke-width="2">267        <polyline points="8,4 16,12 8,20"></polyline>268      </svg>269    </div>270    <div class="row">271      <div class="thumb">[IMG: Kitchen Appliances]</div>272      <div class="title">Kitchen</div>273      <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#9aa3ad" stroke-width="2">274        <polyline points="8,4 16,12 8,20"></polyline>275      </svg>276    </div>277  </div>278 279  <!-- Keyboard -->280  <div class="keyboard">281    <div class="kb-top">282      <div class="kb-icon">GIF</div>283      <div class="kb-icon">😊</div>284      <div class="kb-icon">⚙️</div>285      <div class="kb-icon">G⋮</div>286      <div class="kb-icon">🎨</div>287      <div class="kb-icon">🎙️</div>288    </div>289 290    <!-- Row 1 -->291    <div class="key-row">292      <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>293      <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>294    </div>295    <!-- Row 2 -->296    <div class="key-row">297      <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>298      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>299      <div class="key wide">300        <!-- backspace icon -->301        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#f1e6d7" stroke-width="2">302          <path d="M3 12l5-6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8l-5-6z"></path>303          <line x1="11" y1="9" x2="15" y2="13"></line>304          <line x1="15" y1="9" x2="11" y2="13"></line>305        </svg>306      </div>307    </div>308    <!-- Row 3 -->309    <div class="key-row">310      <div class="key wide">311        <!-- shift/home icon -->312        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#f1e6d7" stroke-width="2">313          <path d="M12 4l6 6h-4v6H10v-6H6l6-6z"></path>314        </svg>315      </div>316      <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>317      <div class="key wide">⤺</div>318    </div>319    <!-- Bottom row -->320    <div class="key-row">321      <div class="key wide">?123</div>322      <div class="key">,</div>323      <div class="key">😊</div>324      <div class="space">space</div>325      <div class="key">.</div>326      <div class="key wide">327        <!-- search icon -->328        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#f1e6d7" stroke-width="2">329          <circle cx="11" cy="11" r="7"></circle>330          <line x1="16.5" y1="16.5" x2="22" y2="22"></line>331        </svg>332      </div>333    </div>334 335    <div class="gesture-bar"></div>336  </div>337 338</div>339</body>340</html>