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 Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #fff; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #0d0d0d;14  }15 16  /* Status bar */17  .statusbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 18px 28px;24    box-sizing: border-box;25    color: #eaeaea;26    font-size: 38px;27    letter-spacing: .5px;28  }29  .status-right {30    position: absolute;31    right: 28px;32    top: 28px;33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .dot { width: 18px; height: 18px; border-radius: 50%; background: #eaeaea; opacity: .9; }38  .battery {39    width: 50px; height: 26px; border: 3px solid #eaeaea; border-radius: 4px; position: relative;40  }41  .battery::after { content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 14px; background: #eaeaea; border-radius: 2px; }42 43  /* Top app bar */44  .toolbar {45    position: absolute;46    top: 110px;47    left: 0;48    width: 1080px;49    height: 120px;50  }51  .tool-left {52    position: absolute;53    left: 24px;54    top: 24px;55    width: 72px; height: 72px;56    display: flex; align-items: center; justify-content: center;57  }58  .tool-right {59    position: absolute;60    right: 24px;61    top: 24px;62    display: flex;63    gap: 36px;64    align-items: center;65  }66  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }67 68  /* Title row */69  .title-row {70    position: absolute;71    top: 220px;72    left: 0;73    width: 1080px;74    height: 64px;75    padding: 0 28px;76    box-sizing: border-box;77    display: flex;78    align-items: center;79    justify-content: space-between;80  }81  .doc-title { color: #e5e5e5; font-size: 40px; font-weight: 600; display: flex; align-items: center; gap: 16px; }82  .subtitle { color: #9aa0a6; font-size: 28px; }83 84  /* Slide canvas zone */85  .stage-wrap {86    position: absolute;87    top: 320px;88    left: 0;89    width: 1080px;90    height: 1100px;91  }92  .slide-card {93    width: 1000px;94    height: 620px;95    margin: 0 auto;96    background: #0f1f3a;97    border-radius: 2px;98    box-shadow: 0 0 0 1px #1e1e1e inset;99    position: relative;100  }101  .space-glow {102    position: absolute;103    inset: 0;104    background: radial-gradient(1000px 500px at 85% 30%, rgba(34,77,154,0.55), transparent 60%),105                radial-gradient(700px 300px at 60% 0%, rgba(28,60,128,0.6), transparent 55%);106    pointer-events: none;107  }108  .slide-heading {109    position: absolute;110    left: 76px;111    top: 270px;112    font-size: 64px;113    font-weight: 700;114    color: #ffd24d;115    letter-spacing: .5px;116  }117  .yellow-line {118    position: absolute;119    left: 76px;120    top: 350px;121    width: 120px; height: 6px; background: #ffcc39; border-radius: 3px;122  }123  .dashed-box {124    position: absolute;125    left: 60px;126    right: 60px;127    top: 240px;128    height: 120px;129    border: 2px dashed rgba(255,255,255,0.35);130    border-radius: 6px;131  }132  .dashed-box.small {133    top: 380px;134    height: 90px;135  }136  .subtitle-slide {137    position: absolute;138    left: 76px; top: 410px;139    font-size: 36px; color: #d9dde3;140  }141  .photo-overlay {142    position: absolute;143    right: 260px;144    top: 140px;145    width: 250px;146    height: 350px;147    background: #E0E0E0;148    border: 1px solid #BDBDBD;149    display: flex; align-items: center; justify-content: center;150    color: #757575; font-size: 26px; text-align: center; padding: 10px;151  }152 153  /* Bottom sheet: Add Transition */154  .sheet {155    position: absolute;156    left: 0; right: 0; bottom: 0;157    height: 900px;158    background: #000;159    border-top: 1px solid #1f1f1f;160    box-shadow: 0 -10px 30px rgba(0,0,0,0.7);161  }162  .sheet-header {163    position: relative;164    height: 140px;165    padding: 28px;166    box-sizing: border-box;167    display: flex; align-items: center;168  }169  .sheet-title {170    font-size: 64px; font-weight: 700; margin-left: 24px;171  }172  .sheet-header .left { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }173  .sheet-header .right {174    position: absolute; right: 32px; top: 34px;175    width: 90px; height: 90px; border-radius: 50%;176    border: 3px solid #d6d6d6; display: flex; align-items: center; justify-content: center;177  }178  .list {179    padding: 10px 28px 40px;180  }181  .row {182    height: 120px; display: flex; align-items: center; justify-content: space-between;183    border-bottom: 1px solid rgba(255,255,255,0.06);184    color: #eaeaea; font-size: 48px;185  }186  .row.dim { color: #666; }187  .row.selected { color: #8ab4f8; font-weight: 700; }188  .check {189    width: 44px; height: 44px; border: 3px solid #8ab4f8; border-radius: 4px; display: flex; align-items: center; justify-content: center;190  }191 192  /* Utility SVG sizing */193  svg { display: block; }194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Status bar -->200  <div class="statusbar">201    <div>8:07</div>202    <div class="status-right">203      <div class="dot"></div>204      <div class="dot"></div>205      <div class="battery"></div>206    </div>207  </div>208 209  <!-- Toolbar -->210  <div class="toolbar">211    <div class="tool-left">212      <!-- Back Arrow -->213      <svg width="42" height="42" viewBox="0 0 24 24" fill="#eaeaea">214        <path d="M14.7 5.3a1 1 0 0 1 0 1.4L10.4 11l4.3 4.3a1 1 0 0 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z"/>215      </svg>216    </div>217    <div class="tool-right">218      <div class="icon-btn">219        <!-- Undo -->220        <svg width="42" height="42" viewBox="0 0 24 24" fill="#dcdcdc">221          <path d="M7 7H3V3h2v1.6A9 9 0 1 1 4.6 17l1.4-1.4A7 7 0 1 0 7 7z"/>222        </svg>223      </div>224      <div class="icon-btn">225        <!-- Redo -->226        <svg width="42" height="42" viewBox="0 0 24 24" fill="#dcdcdc">227          <path d="M17 7h4V3h-2v1.6A9 9 0 1 0 19.4 17L18 15.6A7 7 0 1 1 17 7z"/>228        </svg>229      </div>230      <div class="icon-btn">231        <!-- Plus -->232        <svg width="42" height="42" viewBox="0 0 24 24" fill="#dcdcdc">233          <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>234        </svg>235      </div>236      <div class="icon-btn">237        <!-- Play -->238        <svg width="42" height="42" viewBox="0 0 24 24" fill="#dcdcdc">239          <path d="M8 5v14l11-7z"/>240        </svg>241      </div>242      <div class="icon-btn">243        <!-- Share -->244        <svg width="42" height="42" viewBox="0 0 24 24" fill="#dcdcdc">245          <path d="M18 16a3 3 0 0 0-2.4 1.2L8.9 13a3.2 3.2 0 0 0 0-2l6.7-4.2A3 3 0 1 0 15 5a3 3 0 0 0 .1.7L8.4 9.9a3 3 0 1 0 0 4.2l6.7 4.2A3 3 0 1 0 18 16z"/>246        </svg>247      </div>248    </div>249  </div>250 251  <!-- Document title row -->252  <div class="title-row">253    <div class="doc-title">254      <svg width="36" height="36" viewBox="0 0 24 24" fill="#e5e5e5">255        <path d="M3 17.2V21h3.8L17.6 10.2 13.8 6.4 3 17.2zM20.7 7.1a1 1 0 0 0 0-1.4l-2.4-2.4a1 1 0 0 0-1.4 0l-1.8 1.8 3.8 3.8 1.8-1.8z"/>256      </svg>257      Untitled Presentation258    </div>259    <div class="subtitle">Last modified on 7:57:24 AM</div>260  </div>261 262  <!-- Slide stage -->263  <div class="stage-wrap">264    <div class="slide-card">265      <div class="space-glow"></div>266 267      <div class="dashed-box"></div>268      <div class="dashed-box small"></div>269 270      <div class="slide-heading">Double tap to a</div>271      <div class="yellow-line"></div>272      <div class="subtitle-slide">Double tap to add text</div>273 274      <div class="photo-overlay">[IMG: Phone photo of keyboard keys]</div>275    </div>276  </div>277 278  <!-- Bottom sheet: Add Transition -->279  <div class="sheet">280    <div class="sheet-header">281      <div class="left">282        <!-- Back arrow -->283        <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">284          <path d="M14.7 5.3a1 1 0 0 1 0 1.4L10.4 11l4.3 4.3a1 1 0 0 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z"/>285        </svg>286      </div>287      <div class="sheet-title">Add Transition</div>288      <div class="right">289        <!-- Play circle -->290        <svg width="46" height="46" viewBox="0 0 24 24" fill="#ffffff">291          <path d="M8 5v14l11-7z"/>292        </svg>293      </div>294    </div>295    <div class="list">296      <div class="row">None</div>297      <div class="row selected">298        SERENE299        <div class="check">300          <svg width="26" height="26" viewBox="0 0 24 24" fill="#8ab4f8">301            <path d="M9 16.2 4.8 12l1.4-1.4L9 13.4l8.8-8.8L19.2 6z"/>302          </svg>303        </div>304      </div>305      <div class="row">Blinds</div>306      <div class="row">Checkers</div>307      <div class="row dim">Draw</div>308      <div class="row">Fade</div>309    </div>310  </div>311 312</div>313</body>314</html>