GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI - Rename + Keyboard</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #101214;14    border-radius: 0;15  }16 17  /* Status/rename sheet */18  .sheet {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 480px;24    background: #2b2e33;25    border-bottom-left-radius: 48px;26    border-bottom-right-radius: 48px;27    box-shadow: 0 15px 30px rgba(0,0,0,0.55);28    color: #ECEFF1;29  }30  .status-bar {31    height: 92px;32    padding: 0 40px;33    display: flex;34    align-items: center;35    justify-content: space-between;36    color: #CFD8DC;37    font-size: 36px;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .icon-wifi, .icon-battery {45    width: 44px; height: 24px;46  }47  .close-btn {48    position: absolute;49    left: 34px;50    top: 124px;51    width: 64px; height: 64px;52    display: flex; align-items: center; justify-content: center;53    color: #CFD8DC;54    font-size: 48px;55  }56  .save-btn {57    position: absolute;58    right: 44px;59    top: 136px;60    font-size: 44px;61    color: #aeb8ff;62    letter-spacing: 0.5px;63  }64  .title-input {65    position: absolute;66    left: 48px;67    top: 196px;68    right: 160px;69    font-size: 108px;70    line-height: 120px;71    font-weight: 600;72    color: #E6E7EB;73    white-space: nowrap;74  }75  .caret {76    display: inline-block;77    width: 4px;78    height: 110px;79    background: #7aa8ff;80    margin-left: 14px;81    border-radius: 2px;82    vertical-align: middle;83  }84 85  /* Main dark area behind sheet */86  .content-area {87    position: absolute;88    top: 480px; left: 0;89    width: 1080px; height: 1120px;90    background: #0f1114;91  }92  .wave-wrapper {93    position: absolute;94    top: 240px;95    left: 520px;96    width: 8px;97    height: 540px;98    background: #2f3238;99    border-radius: 4px;100  }101  .wave-part {102    position: absolute;103    right: 140px;104    bottom: 160px;105    width: 520px;106    height: 8px;107    background-image: radial-gradient(#5a5f69 1px, transparent 1px);108    background-size: 14px 8px;109  }110 111  /* Keyboard */112  .keyboard {113    position: absolute;114    left: 0;115    bottom: 120px;116    width: 1080px;117    height: 900px;118    background: #16191f;119    border-top-left-radius: 28px;120    border-top-right-radius: 28px;121    box-shadow: 0 -8px 24px rgba(0,0,0,0.55) inset;122  }123  .kb-top-tools {124    display: flex;125    align-items: center;126    gap: 46px;127    padding: 32px 36px 20px 36px;128  }129  .tool {130    width: 84px; height: 84px;131    background: #1d2026;132    border: 1px solid #2b2f36;133    border-radius: 22px;134    display: flex; align-items: center; justify-content: center;135    color: #B0BEC5;136    font-size: 30px;137  }138  .tool.glyph { font-weight: 700; letter-spacing: 1px; }139 140  .kb-row {141    display: flex;142    justify-content: center;143    gap: 22px;144    padding: 16px 34px;145  }146  .key {147    width: 92px; height: 120px;148    background: #1f232a;149    border: 1px solid #2f343d;150    border-radius: 24px;151    color: #E0E6EB;152    font-size: 46px;153    display: flex; align-items: center; justify-content: center;154    box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset;155  }156  .key.wide { width: 200px; }157  .space { width: 540px; }158  .key.light {159    background: #d7dbf9;160    color: #1f2331;161    border-color: #c9cef3;162  }163  .key.secondary { color: #B0BEC5; font-size: 40px; }164  .kb-bottom-row {165    display: flex;166    align-items: center;167    gap: 22px;168    padding: 20px 34px 28px 34px;169  }170  .bubble {171    background: #aeb6cc33;172    color: #E0E6EB;173    border-radius: 36px;174    padding: 16px 24px;175    font-size: 40px;176    border: 1px solid #3a3f49;177  }178  /* Android gesture pill */179  .gesture {180    position: absolute;181    bottom: 36px; left: 50%;182    transform: translateX(-50%);183    width: 540px; height: 10px;184    background: #cfd2d8;185    border-radius: 8px;186    opacity: 0.75;187  }188 189  /* Simple inline icon styles for wifi/battery */190  svg { display: block; }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Sheet with status and rename field -->197  <div class="sheet">198    <div class="status-bar">199      <div>9:12</div>200      <div class="status-icons">201        <!-- Cloud placeholder -->202        <div style="width:36px;height:26px;border:1px solid #7b8792;border-radius:14px;background:#3a3f47"></div>203        <!-- WiFi -->204        <svg class="icon-wifi" viewBox="0 0 24 24">205          <path d="M2 8c5-4 15-4 20 0" stroke="#cfd8dc" stroke-width="2" fill="none"/>206          <path d="M5 11c4-3 10-3 14 0" stroke="#cfd8dc" stroke-width="2" fill="none"/>207          <path d="M9 15c2-2 4-2 6 0" stroke="#cfd8dc" stroke-width="2" fill="none"/>208          <circle cx="12" cy="18" r="2" fill="#cfd8dc"/>209        </svg>210        <!-- Battery -->211        <svg class="icon-battery" viewBox="0 0 28 16">212          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#cfd8dc" fill="none" stroke-width="2"/>213          <rect x="3" y="4" width="16" height="8" fill="#cfd8dc"/>214          <rect x="23" y="6" width="4" height="4" fill="#cfd8dc"/>215        </svg>216      </div>217    </div>218 219    <div class="close-btn">×</div>220    <div class="save-btn">Save</div>221 222    <div class="title-input">223      Recording 1<span class="caret"></span>224    </div>225  </div>226 227  <!-- Mid content / waveform area -->228  <div class="content-area">229    <div class="wave-wrapper"></div>230    <div class="wave-part"></div>231  </div>232 233  <!-- Keyboard -->234  <div class="keyboard">235 236    <div class="kb-top-tools">237      <div class="tool">▦</div>238      <div class="tool">☺</div>239      <div class="tool glyph">GIF</div>240      <div class="tool">⚙</div>241      <div class="tool glyph">G↔</div>242      <div class="tool">🎨</div>243      <div class="tool">🎙</div>244    </div>245 246    <div class="kb-row">247      <div class="key">q</div>248      <div class="key">w</div>249      <div class="key">e</div>250      <div class="key">r</div>251      <div class="key">t</div>252      <div class="key">y</div>253      <div class="key">u</div>254      <div class="key">i</div>255      <div class="key">o</div>256      <div class="key">p</div>257    </div>258 259    <div class="kb-row">260      <div class="key">a</div>261      <div class="key">s</div>262      <div class="key">d</div>263      <div class="key">f</div>264      <div class="key">g</div>265      <div class="key">h</div>266      <div class="key">j</div>267      <div class="key">k</div>268      <div class="key">l</div>269      <div class="key secondary">⟵</div>270    </div>271 272    <div class="kb-row">273      <div class="key secondary">⇧</div>274      <div class="key">z</div>275      <div class="key">x</div>276      <div class="key">c</div>277      <div class="key">v</div>278      <div class="key">b</div>279      <div class="key">n</div>280      <div class="key">m</div>281      <div class="key secondary">⌫</div>282    </div>283 284    <div class="kb-bottom-row">285      <div class="bubble">?123</div>286      <div class="key secondary">,</div>287      <div class="key secondary">☺</div>288      <div class="key space"> </div>289      <div class="key secondary">.</div>290      <div class="key light">✔</div>291    </div>292  </div>293 294  <div class="gesture"></div>295</div>296</body>297</html>