GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f10;15    font-family: Arial, Helvetica, sans-serif;16    color: #eaeaea;17  }18 19  /* Status bar */20  .status-bar {21    height: 92px;22    padding: 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #ffffff;27    font-size: 36px;28    box-sizing: border-box;29    background: #191a1b;30  }31  .status-left { display: flex; align-items: center; gap: 12px; }32  .status-right { display: flex; align-items: center; gap: 22px; }33  .icon {34    display: inline-flex;35    align-items: center;36    justify-content: center;37  }38  .ico-svg { width: 38px; height: 38px; fill: #eaeaea; }39 40  /* Top toolbar */41  .app-toolbar {42    height: 120px;43    background: #1e1f21;44    display: flex;45    align-items: center;46    padding: 0 22px;47    box-sizing: border-box;48  }49  .toolbar-left, .toolbar-right {50    display: flex;51    align-items: center;52  }53  .toolbar-left { gap: 26px; }54  .toolbar-right { margin-left: auto; gap: 40px; }55  .tool-btn svg { width: 46px; height: 46px; fill: #eaeaea; opacity: 0.9; }56 57  /* Document header */58  .doc-header {59    display: flex;60    align-items: center;61    justify-content: space-between;62    padding: 16px 32px 8px 32px;63    color: #cfcfcf;64    font-size: 36px;65    box-sizing: border-box;66  }67  .doc-title { display: flex; align-items: center; gap: 16px; }68  .doc-title .pencil {69    width: 32px; height: 32px; border: 2px solid #7b7b7b; border-radius: 2px;70    transform: rotate(45deg);71  }72  .modified { font-size: 28px; color: #9a9a9a; }73 74  /* Slide area */75  .content-area {76    padding: 12px 32px 0 32px;77    box-sizing: border-box;78  }79  .slide-preview {80    width: 1016px;81    height: 576px;82    margin: 24px auto 0 auto;83    position: relative;84    background: radial-gradient(1000px 600px at 70% 10%, #0a2a5d 0%, #071b3e 40%, #0a0f1e 100%);85    border: 1px solid #2e2e2f;86    border-radius: 8px;87    overflow: hidden;88  }89  .dash-box {90    position: absolute;91    left: 44px;92    right: 44px;93    height: 94px;94    border: 2px dashed rgba(200,200,200,0.35);95    border-radius: 6px;96  }97  .dash-1 { top: 240px; }98  .dash-2 { top: 340px; height: 70px; }99  .title-text {100    position: absolute;101    top: 246px;102    left: 58px;103    font-size: 80px;104    font-weight: 700;105    color: #ffc21a;106    letter-spacing: 0.5px;107    white-space: nowrap;108  }109  .subtitle-text {110    position: absolute;111    top: 350px;112    left: 58px;113    font-size: 38px;114    color: #d6d6d6;115    opacity: 0.9;116  }117  .inline-accent {118    position: absolute;119    top: 330px;120    left: 58px;121    width: 130px;122    height: 6px;123    background: #ffb300;124    border-radius: 4px;125  }126  .slide-photo {127    position: absolute;128    top: 120px;129    right: 180px;130    width: 250px;131    height: 360px;132    background: #E0E0E0;133    border: 1px solid #BDBDBD;134    display: flex;135    align-items: center;136    justify-content: center;137    color: #757575;138    font-size: 26px;139    text-align: center;140  }141 142  /* Bottom sheet */143  .bottom-sheet {144    position: absolute;145    left: 0; right: 0; bottom: 0;146    height: 880px;147    background: #0c0c0d;148    border-top-left-radius: 26px;149    border-top-right-radius: 26px;150    box-shadow: 0 -8px 24px rgba(0,0,0,0.5);151  }152  .sheet-header {153    height: 120px;154    display: flex;155    align-items: center;156    padding: 0 28px;157    box-sizing: border-box;158    font-size: 46px;159    font-weight: 600;160  }161  .sheet-header .title { margin-left: 18px; }162  .play-circle {163    margin-left: auto;164    width: 68px; height: 68px; border: 2px solid #eaeaea; border-radius: 50%;165    display: flex; align-items: center; justify-content: center;166  }167  .play-circle svg { width: 34px; height: 34px; fill: #eaeaea; }168 169  .transition-list {170    list-style: none;171    margin: 10px 0 0 0;172    padding: 0 28px;173  }174  .transition-list li {175    height: 110px;176    display: flex;177    align-items: center;178    border-bottom: 1px solid #1b1b1c;179    font-size: 44px;180    color: #eaeaea;181    position: relative;182  }183  .transition-list li:last-child { border-bottom: none; }184  .transition-list .active { color: #82a6ff; font-weight: 600; }185  .transition-list .disabled { color: #5a5a5a; }186  .check-mark {187    position: absolute;188    right: 24px;189    color: #eaeaea;190    font-size: 46px;191  }192 193  /* Bottom navigation pill */194  .nav-pill {195    position: absolute;196    bottom: 18px;197    left: 50%;198    transform: translateX(-50%);199    width: 272px;200    height: 10px;201    background: #cfcfcf;202    border-radius: 10px;203    opacity: 0.9;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status Bar -->211  <div class="status-bar">212    <div class="status-left">213      <span>7:57</span>214      <div class="icon">215        <svg class="ico-svg" viewBox="0 0 24 24"><path d="M7 2h10v2H7zM5 6h14v2H5zM3 10h18v2H3z"/></svg>216      </div>217    </div>218    <div class="status-right">219      <div class="icon" title="signal">220        <svg class="ico-svg" viewBox="0 0 24 24"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2V20zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/></svg>221      </div>222      <div class="icon" title="wifi">223        <svg class="ico-svg" viewBox="0 0 24 24"><path d="M12 18.5l3 3-3 3-3-3 3-3zM2 8c5.5-4.7 14.5-4.7 20 0l-1.5 1.5C16 5.6 8 5.6 3.5 9.5L2 8zm4 4c3.9-3.1 10.1-3.1 14 0l-1.5 1.5c-2.9-2.3-8.1-2.3-11 0L6 12z"/></svg>224      </div>225      <div class="icon" title="battery">226        <svg class="ico-svg" viewBox="0 0 24 24"><path d="M17 6H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H4V8h13v8zm4-6v4h-2V10h2z"/></svg>227      </div>228    </div>229  </div>230 231  <!-- App Toolbar -->232  <div class="app-toolbar">233    <div class="toolbar-left">234      <div class="tool-btn" title="Back">235        <svg viewBox="0 0 24 24"><path d="M15.5 3.5L7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9z"/></svg>236      </div>237    </div>238    <div class="toolbar-right">239      <div class="tool-btn" title="Undo">240        <svg viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6 0 1.1-.3 2.1-.8 3l1.7 1C20.6 15.9 21 14.5 21 13c0-5-4-8-9-8z"/></svg>241      </div>242      <div class="tool-btn" title="Redo">243        <svg viewBox="0 0 24 24"><path d="M12 5V1l5 5-5 5V7c-3.3 0-6 2.7-6 6 0 1.1.3 2.1.8 3l-1.7 1C3.4 15.9 3 14.5 3 13c0-5 4-8 9-8z"/></svg>244      </div>245      <div class="tool-btn" title="Add">246        <svg viewBox="0 0 24 24"><path d="M11 4h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>247      </div>248      <div class="tool-btn" title="Present">249        <svg viewBox="0 0 24 24"><path d="M8 5h8c1.7 0 3 1.3 3 3v6c0 1.7-1.3 3-3 3H8c-1.7 0-3-1.3-3-3V8c0-1.7 1.3-3 3-3zm4 4l4 3-4 3V9z"/></svg>250      </div>251      <div class="tool-btn" title="Share">252        <svg viewBox="0 0 24 24"><path d="M18 16c-1.1 0-2 .9-2 2 0 .2 0 .3.1.5L8.9 14c.1.3.1.6.1 1 0 .3 0 .6-.1.9l7.1 4.5c.3-.3.7-.4 1-.4 1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2c0-.2 0-.3.1-.5L8.9 17c-.3.3-.7.4-1 .4-1.1 0-2-.9-2-2s.9-2 2-2c.4 0 .7.1 1 .4l7.1-4.5C15 9 15 8.7 15 8.5c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2z"/></svg>253      </div>254    </div>255  </div>256 257  <!-- Document header row -->258  <div class="doc-header">259    <div class="doc-title">260      <div class="pencil"></div>261      <div>Untitled Presentation</div>262    </div>263    <div class="modified">Last modified on 7:57:24 AM</div>264  </div>265 266  <!-- Slide area -->267  <div class="content-area">268    <div class="slide-preview">269      <div class="dash-box dash-1"></div>270      <div class="dash-box dash-2"></div>271      <div class="inline-accent"></div>272      <div class="title-text">Double tap to a</div>273      <div class="subtitle-text">Double tap to add text</div>274 275      <div class="slide-photo">[IMG: Inserted photo]</div>276    </div>277  </div>278 279  <!-- Bottom sheet: Add Transition -->280  <div class="bottom-sheet">281    <div class="sheet-header">282      <div class="icon">283        <svg class="ico-svg" viewBox="0 0 24 24"><path d="M15.5 3.5L7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9z"/></svg>284      </div>285      <div class="title">Add Transition</div>286      <div class="play-circle">287        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>288      </div>289    </div>290    <ul class="transition-list">291      <li>None</li>292      <li class="active">SERENE <span class="check-mark">✔</span></li>293      <li>Blinds</li>294      <li>Checkers</li>295      <li class="disabled">Draw</li>296      <li>Fade</li>297    </ul>298  </div>299 300  <!-- Navigation pill -->301  <div class="nav-pill"></div>302 303</div>304</body>305</html>