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 - Project Name Dialog</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: #ffffff;14    border-radius: 0;15  }16 17  /* Top system/status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #f3f3f3;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    color: #333;30    font-size: 36px;31    box-sizing: border-box;32  }33  .status-icons {34    display: flex;35    gap: 24px;36    align-items: center;37  }38  .dot { width: 16px; height: 16px; background:#333; border-radius:50%; display:inline-block; opacity: .85; }39 40  /* App toolbar */41  .toolbar {42    position: absolute;43    top: 110px;44    left: 0;45    width: 1080px;46    height: 120px;47    background: #ffffff;48    border-bottom: 1px solid #e5e5e5;49    display: flex;50    align-items: center;51    padding: 0 28px;52    box-sizing: border-box;53    gap: 26px;54  }55  .tool-spacer { flex: 1; }56  .icon-btn {57    width: 76px;58    height: 76px;59    border-radius: 16px;60    display: flex;61    align-items: center;62    justify-content: center;63  }64  .icon-btn svg { width: 44px; height: 44px; fill: none; stroke: #222; stroke-width: 4; }65 66  /* App content behind dialog */67  .content {68    position: absolute;69    top: 230px;70    left: 0;71    width: 1080px;72    height: 1100px;73    background: #fafafa;74  }75  .hero-image {76    position: absolute;77    left: 0;78    right: 0;79    margin: 40px auto 0 auto;80    width: 1000px;81    height: 560px;82    background: #E0E0E0;83    border: 1px solid #BDBDBD;84    display: flex;85    align-items: center;86    justify-content: center;87    color: #6b6b6b;88    font-size: 34px;89  }90  .dark-strip {91    position: absolute;92    top: 620px;93    left: 0;94    width: 1080px;95    height: 160px;96    background: #111;97  }98 99  /* Dim overlay for modal */100  .dim {101    position: absolute;102    top: 0;103    left: 0;104    width: 1080px;105    height: 2400px;106    background: rgba(0,0,0,0.45);107    z-index: 5;108  }109 110  /* Bottom sheet dialog */111  .sheet {112    position: absolute;113    left: 40px;114    top: 660px;115    width: 1000px;116    background: #fff;117    border-radius: 28px;118    box-shadow: 0 12px 40px rgba(0,0,0,0.25);119    padding: 36px 36px 30px 36px;120    z-index: 10;121    box-sizing: border-box;122  }123  .field-label {124    font-size: 32px;125    color: #5b5b96;126    margin: 8px 0 12px 8px;127  }128  .text-field {129    border: 3px solid #6f63ff;130    border-radius: 24px;131    padding: 28px 28px;132    height: 120px;133    display: flex;134    align-items: center;135    font-size: 48px;136    color: #101010;137  }138 139  .option {140    display: flex;141    align-items: center;142    gap: 28px;143    padding: 34px 6px;144    font-size: 40px;145    color: #1d1d1d;146  }147  .option + .option { border-top: 1px solid #eee; }148  .opt-icon {149    width: 64px; height: 64px;150    display: inline-flex; align-items: center; justify-content: center;151  }152  .opt-icon svg { width: 60px; height: 60px; stroke: #222; stroke-width: 4; fill: none; }153 154  /* Keyboard */155  .keyboard {156    position: absolute;157    bottom: 0;158    left: 0;159    width: 1080px;160    height: 860px;161    background: #f4f1f6;162    border-top: 1px solid #e2deea;163    z-index: 20;164    padding: 24px 26px 26px 26px;165    box-sizing: border-box;166  }167  .key-row {168    display: grid;169    grid-auto-columns: 1fr;170    grid-auto-flow: column;171    gap: 16px;172    margin-bottom: 18px;173  }174  .key {175    background: #ffffff;176    border: 1px solid #dedbe6;177    height: 120px;178    border-radius: 22px;179    display: flex;180    align-items: center;181    justify-content: center;182    font-size: 44px;183    color: #1a1a1a;184    box-shadow: 0 2px 0 #dad6e5;185  }186  .key.small { font-size: 38px; }187  .key.wide { grid-column: span 2; }188  .key.extra-wide { grid-column: span 4; }189  .key.space { grid-column: span 6; }190  .bottom-row {191    display: grid;192    grid-template-columns: 1.6fr 1fr 1fr 5.5fr 1fr 1.6fr;193    gap: 16px;194  }195 196  /* Helper text sizes */197  .time { font-weight: 600; letter-spacing: 1px; }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status bar -->204  <div class="status-bar">205    <div class="time">6:17</div>206    <div class="status-icons">207      <span class="dot"></span>208      <span class="dot" style="opacity:.55;"></span>209      <span class="dot" style="opacity:.35;"></span>210      <svg width="34" height="34" viewBox="0 0 24 24">211        <path d="M3 6h18v12H3z" fill="none" stroke="#333" stroke-width="2"></path>212        <path d="M3 10h18" stroke="#333" stroke-width="2"></path>213      </svg>214      <svg width="36" height="36" viewBox="0 0 24 24">215        <path d="M3 12h10l4 4V4" fill="none" stroke="#333" stroke-width="2"></path>216      </svg>217    </div>218  </div>219 220  <!-- Toolbar -->221  <div class="toolbar">222    <div class="icon-btn" title="Back">223      <svg viewBox="0 0 48 48">224        <path d="M28 10 L16 24 L28 38" stroke-linecap="round" stroke-linejoin="round"></path>225      </svg>226    </div>227    <div class="icon-btn" title="Play">228      <svg viewBox="0 0 48 48">229        <path d="M18 12 L36 24 L18 36 Z" fill="#222" stroke="none"></path>230      </svg>231    </div>232    <div class="icon-btn" title="Layers">233      <svg viewBox="0 0 48 48">234        <path d="M8 24l16-10 16 10-16 10-16-10z"></path>235        <path d="M12 28l12 8 12-8" stroke="#222"></path>236      </svg>237    </div>238    <div class="icon-btn" title="Undo">239      <svg viewBox="0 0 48 48">240        <path d="M20 16H10v-10" stroke-linecap="round"></path>241        <path d="M10 16c10-8 26-2 26 10" stroke-linecap="round"></path>242      </svg>243    </div>244    <div class="tool-spacer"></div>245    <div class="icon-btn" title="More">246      <svg viewBox="0 0 48 48">247        <circle cx="12" cy="24" r="3" fill="#222"></circle>248        <circle cx="24" cy="24" r="3" fill="#222"></circle>249        <circle cx="36" cy="24" r="3" fill="#222"></circle>250      </svg>251    </div>252    <div class="icon-btn" title="Save">253      <svg viewBox="0 0 48 48">254        <path d="M10 10h28v28H10z"></path>255        <path d="M16 10v10h16V10" stroke="#222"></path>256      </svg>257    </div>258    <div class="icon-btn" title="Share">259      <svg viewBox="0 0 48 48">260        <circle cx="14" cy="26" r="4" stroke="#222"></circle>261        <circle cx="34" cy="14" r="4" stroke="#222"></circle>262        <circle cx="34" cy="34" r="4" stroke="#222"></circle>263        <path d="M18 24l12-8M18 28l12 8" stroke="#222"></path>264      </svg>265    </div>266  </div>267 268  <!-- Background content -->269  <div class="content">270    <div class="hero-image">[IMG: Editor Canvas / Video Preview]</div>271    <div class="dark-strip"></div>272  </div>273 274  <!-- Dim background -->275  <div class="dim"></div>276 277  <!-- Bottom sheet dialog -->278  <div class="sheet">279    <div class="field-label">Project name</div>280    <div class="text-field">Business Goal 1</div>281 282    <div class="option">283      <div class="opt-icon" aria-hidden="true">284        <!-- Floppy disk -->285        <svg viewBox="0 0 48 48">286          <path d="M10 10h28v28H10z"></path>287          <path d="M16 10v12h16V10" stroke="#222"></path>288          <rect x="18" y="28" width="12" height="8" fill="none" stroke="#222" stroke-width="4"></rect>289        </svg>290      </div>291      <div>Save</div>292    </div>293 294    <div class="option">295      <div class="opt-icon" aria-hidden="true">296        <!-- Clock -->297        <svg viewBox="0 0 48 48">298          <circle cx="24" cy="24" r="16"></circle>299          <path d="M24 14v10l8 4" stroke="#222"></path>300        </svg>301      </div>302      <div>Version history</div>303    </div>304  </div>305 306  <!-- Keyboard -->307  <div class="keyboard">308    <div class="key-row">309      <div class="key">q</div>310      <div class="key">w</div>311      <div class="key">e</div>312      <div class="key">r</div>313      <div class="key">t</div>314      <div class="key">y</div>315      <div class="key">u</div>316      <div class="key">i</div>317      <div class="key">o</div>318      <div class="key">p</div>319    </div>320    <div class="key-row">321      <div class="key">a</div>322      <div class="key">s</div>323      <div class="key">d</div>324      <div class="key">f</div>325      <div class="key">g</div>326      <div class="key">h</div>327      <div class="key">j</div>328      <div class="key">k</div>329      <div class="key">l</div>330    </div>331    <div class="key-row">332      <div class="key wide small">⇧</div>333      <div class="key">z</div>334      <div class="key">x</div>335      <div class="key">c</div>336      <div class="key">v</div>337      <div class="key">b</div>338      <div class="key">n</div>339      <div class="key">m</div>340      <div class="key wide small">⌫</div>341    </div>342    <div class="bottom-row">343      <div class="key small">?123</div>344      <div class="key small">,</div>345      <div class="key small">😊</div>346      <div class="key space"></div>347      <div class="key small">.</div>348      <div class="key small">✓</div>349    </div>350  </div>351 352</div>353</body>354</html>