GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Audio Rename with Keyboard</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f1012;13    border-radius: 36px;14    box-shadow: 0 20px 60px rgba(0,0,0,0.35);15    color: #e6e8ea;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 95px;25    padding: 0 28px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #cfd3d8;31    font-size: 36px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .icon {40    width: 38px; height: 38px;41    display: inline-block;42  }43  .battery-label { font-size: 28px; color: #cfd3d8; }44 45  /* Top overlay sheet (rename dialog) */46  .overlay {47    position: absolute;48    top: 95px;49    left: 0;50    width: 1080px;51    height: 540px;52    background: #2a2d31;53    border-bottom-left-radius: 56px;54    border-bottom-right-radius: 56px;55    box-shadow: 0 16px 40px rgba(0,0,0,0.45);56  }57  .overlay-header {58    height: 120px;59    padding: 0 36px;60    display: flex;61    align-items: center;62    justify-content: space-between;63    color: #cfd3d8;64  }65  .close-btn {66    width: 56px; height: 56px;67    border-radius: 28px;68    display: flex; align-items: center; justify-content: center;69    color: #d1d5db;70    font-weight: 700;71    border: 1px solid rgba(255,255,255,0.12);72  }73  .save-btn {74    color: #a8b7ff;75    font-size: 42px;76  }77  .overlay-body {78    padding: 16px 40px;79  }80  .title-input {81    font-size: 120px;82    line-height: 1.1;83    color: #ffffff;84    border-bottom: 2px solid rgba(255,255,255,0.18);85    padding-bottom: 12px;86    width: calc(100% - 80px);87  }88 89  /* Workspace behind sheet */90  .workspace {91    position: absolute;92    top: 635px;93    left: 0;94    width: 1080px;95    height: 825px;96    background: #0c0d0f;97  }98  .workspace::before {99    /* subtle split area */100    content: "";101    position: absolute;102    left: 360px;103    top: 40px;104    bottom: 40px;105    width: 3px;106    background: rgba(255,255,255,0.08);107  }108  .workspace::after {109    content: "";110    position: absolute;111    left: 540px;112    top: 40px;113    bottom: 40px;114    width: 3px;115    background: rgba(255,255,255,0.08);116  }117  .dotted {118    position: absolute;119    left: 570px;120    top: 300px;121    width: 430px;122    height: 8px;123    background-image: radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 2px);124    background-size: 18px 8px;125    background-repeat: repeat-x;126    opacity: 0.7;127  }128  .divider-v {129    position: absolute;130    left: 540px;131    top: 120px;132    width: 4px;133    height: 600px;134    background: rgba(255,255,255,0.08);135  }136 137  /* Keyboard */138  .keyboard {139    position: absolute;140    left: 0;141    bottom: 120px;142    width: 1080px;143    height: 900px;144    background: #121315;145    border-top: 1px solid rgba(255,255,255,0.08);146    box-sizing: border-box;147  }148  .kb-tools {149    height: 110px;150    display: flex;151    align-items: center;152    justify-content: space-around;153    color: #cfd3d8;154    padding: 0 12px;155  }156  .tool {157    width: 90px; height: 90px;158    border-radius: 22px;159    background: #1f2023;160    border: 1px solid rgba(255,255,255,0.08);161    display: flex; align-items: center; justify-content: center;162    font-size: 28px;163  }164  .kb-rows { padding: 12px 20px; }165  .row { display: flex; justify-content: center; gap: 14px; margin: 18px 0; }166  .key {167    width: 90px; height: 120px;168    background: #2a2b2f;169    border-radius: 26px;170    color: #e9edf2;171    display: flex; align-items: center; justify-content: center;172    font-size: 44px;173    box-shadow: inset 0 -3px 0 rgba(255,255,255,0.06);174  }175  .key.small { width: 80px; }176  .key.wide { width: 120px; }177  .space { flex: 0 0 420px; height: 120px; background: #252629; border-radius: 30px; }178  .enter { width: 120px; }179  .kb-bottom {180    position: absolute;181    left: 0; right: 0; bottom: -4px;182    height: 124px;183    background: #0f1012;184    display: flex; align-items: center; justify-content: center;185  }186  .home-handle {187    width: 420px; height: 12px; border-radius: 6px; background: #d0d3d8; opacity: 0.35;188  }189 190  /* Subtle dotted hints on keys to mimic number hints */191  .hint {192    font-size: 20px;193    color: #aeb4bb;194    position: absolute;195    top: -10px;196    right: -6px;197    opacity: 0.5;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <!-- Status Bar -->205  <div class="status-bar">206    <div>9:12</div>207    <div class="status-right">208      <!-- Wi-Fi icon -->209      <svg class="icon" viewBox="0 0 24 24" fill="#d7dbe0">210        <path d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6.6-7.2c4.4-3.6 8.8-3.6 13.2 0l-1.6 1.6c-3.6-2.8-6.4-2.8-9.9 0l-1.7-1.6zm-3.1-3c6.7-5.3 13.7-5.3 20.4 0l-1.7 1.7c-5.8-4.5-11.2-4.5-17 0L2.3 7.8z"/>211      </svg>212      <!-- Battery icon simple -->213      <svg class="icon" viewBox="0 0 24 24" fill="#d7dbe0">214        <rect x="2" y="7" width="18" height="10" rx="2"></rect>215        <rect x="20" y="10" width="2" height="4" rx="1"></rect>216        <rect x="4" y="9" width="12" height="6" fill="#9ed47a"></rect>217      </svg>218    </div>219  </div>220 221  <!-- Top overlay sheet -->222  <div class="overlay">223    <div class="overlay-header">224      <div class="close-btn">✕</div>225      <div class="save-btn">Save</div>226    </div>227    <div class="overlay-body">228      <div class="title-input">Audio 1</div>229    </div>230  </div>231 232  <!-- Workspace area -->233  <div class="workspace">234    <div class="divider-v"></div>235    <div class="dotted"></div>236  </div>237 238  <!-- Keyboard -->239  <div class="keyboard">240    <div class="kb-tools">241      <div class="tool">▦</div>242      <div class="tool">🙂</div>243      <div class="tool">GIF</div>244      <div class="tool">⚙️</div>245      <div class="tool">G↔️</div>246      <div class="tool">🎨</div>247      <div class="tool">🎙️</div>248    </div>249 250    <div class="kb-rows">251      <!-- Row 1 -->252      <div class="row">253        <div class="key">q</div>254        <div class="key">w</div>255        <div class="key">e</div>256        <div class="key">r</div>257        <div class="key">t</div>258        <div class="key">y</div>259        <div class="key">u</div>260        <div class="key">i</div>261        <div class="key">o</div>262        <div class="key">p</div>263      </div>264 265      <!-- Row 2 -->266      <div class="row">267        <div class="key">a</div>268        <div class="key">s</div>269        <div class="key">d</div>270        <div class="key">f</div>271        <div class="key">g</div>272        <div class="key">h</div>273        <div class="key">j</div>274        <div class="key">k</div>275        <div class="key">l</div>276      </div>277 278      <!-- Row 3 -->279      <div class="row">280        <div class="key wide">⇧</div>281        <div class="key">z</div>282        <div class="key">x</div>283        <div class="key">c</div>284        <div class="key">v</div>285        <div class="key">b</div>286        <div class="key">n</div>287        <div class="key">m</div>288        <div class="key wide">⌫</div>289      </div>290 291      <!-- Row 4 -->292      <div class="row">293        <div class="key wide">?123</div>294        <div class="key small">,</div>295        <div class="key small">☺️</div>296        <div class="space"></div>297        <div class="key small">.</div>298        <div class="key wide">⏎</div>299      </div>300    </div>301  </div>302 303  <!-- Navigation handle -->304  <div class="kb-bottom">305    <div class="home-handle"></div>306  </div>307 308</div>309</body>310</html>