GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Mobile UI - Presentation Transitions</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #111;19    color: #fff;20  }21 22  /* Top status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #1b1b1b;30    color: #eaeaea;31    display: flex;32    align-items: center;33    padding: 0 36px;34    box-sizing: border-box;35    font-size: 42px;36    letter-spacing: 0.5px;37  }38  .status-left { display: flex; align-items: center; gap: 20px; }39  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }40 41  /* App toolbar */42  .app-toolbar {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 160px;48    background: #121212;49    color: #cfcfcf;50    display: flex;51    align-items: center;52    padding: 0 32px;53    box-sizing: border-box;54  }55  .toolbar-left {56    display: flex;57    align-items: center;58    gap: 28px;59  }60  .toolbar-actions {61    margin-left: auto;62    display: flex;63    align-items: center;64    gap: 40px;65  }66  .toolbar-title {67    position: absolute;68    bottom: 12px;69    left: 32px;70    font-size: 34px;71    color: #eaeaea;72  }73  .toolbar-meta {74    position: absolute;75    bottom: 12px;76    right: 32px;77    font-size: 30px;78    color: #9a9a9a;79  }80  .icon {81    width: 56px;82    height: 56px;83    fill: #9a9a9a;84  }85 86  /* Main canvas showing slide preview */87  .canvas {88    position: absolute;89    top: 280px; /* below toolbar */90    left: 0;91    width: 1080px;92    height: 1520px;93    background: #0f0f0f;94    padding-top: 120px;95    box-sizing: border-box;96  }97  .slide {98    width: 940px;99    height: 540px;100    background: #ffffff;101    margin: 0 auto;102    border-radius: 6px;103    box-shadow: 0 6px 0 rgba(255,255,255,0.08) inset;104    position: relative;105    color: #222;106  }107 108  /* Image placeholders inside slide */109  .img {110    background: #E0E0E0;111    border: 1px solid #BDBDBD;112    color: #757575;113    display: flex;114    justify-content: center;115    align-items: center;116    font-size: 26px;117  }118  .img.bulbs { position: absolute; left: 26px; top: 22px; width: 160px; height: 80px; }119  .img.clock { position: absolute; right: 26px; top: 22px; width: 86px; height: 86px; border-radius: 50%; }120  .img.plant { position: absolute; right: 28px; bottom: 22px; width: 120px; height: 160px; }121 122  .slide-title {123    position: absolute;124    top: 220px;125    left: 0;126    width: 100%;127    text-align: center;128    font-size: 52px;129    font-weight: 900;130    letter-spacing: 2px;131  }132  .slide-sub {133    position: absolute;134    top: 290px;135    left: 0;136    width: 100%;137    text-align: center;138    font-size: 34px;139    color: #e37f75;140  }141 142  /* Bottom panel - Add Transition */143  .bottom-panel {144    position: absolute;145    bottom: 0;146    left: 0;147    width: 1080px;148    height: 600px;149    background: #0f0f0f;150    border-top: 1px solid #1e1e1e;151    box-sizing: border-box;152    padding: 24px 32px;153  }154  .bottom-header {155    display: flex;156    align-items: center;157    justify-content: space-between;158    color: #ffffff;159    margin-bottom: 24px;160  }161  .bottom-header .title {162    display: flex;163    align-items: center;164    gap: 18px;165    font-size: 48px;166    font-weight: 600;167  }168  .play-circle {169    width: 72px;170    height: 72px;171    border: 2px solid #cfcfcf;172    border-radius: 50%;173    display: flex;174    align-items: center;175    justify-content: center;176  }177  .transition-list {178    margin-top: 20px;179    display: flex;180    flex-direction: column;181    gap: 34px;182    color: #fff;183    font-size: 40px;184  }185 186  /* Gesture bar simulation */187  .gesture {188    position: absolute;189    bottom: 12px;190    left: 50%;191    transform: translateX(-50%);192    width: 360px;193    height: 16px;194    border-radius: 10px;195    background: #cfcfcf;196    opacity: 0.5;197  }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status bar -->204  <div class="status-bar">205    <div class="status-left">206      <div>5:49</div>207      <!-- simple status glyphs -->208      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>209      <svg class="icon" viewBox="0 0 24 24"><path d="M4 12h16M12 4v16" stroke="#9a9a9a" stroke-width="2" fill="none"/></svg>210      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" /></svg>211    </div>212    <div class="status-right">213      <svg class="icon" viewBox="0 0 24 24"><path d="M2 18l8-8 6 6 6-6" stroke="#9a9a9a" stroke-width="2" fill="none"/></svg>214      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="3" /></svg>215    </div>216  </div>217 218  <!-- App toolbar -->219  <div class="app-toolbar">220    <div class="toolbar-left">221      <!-- Back arrow -->222      <svg class="icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" fill="#9a9a9a"/></svg>223    </div>224    <div class="toolbar-actions">225      <!-- Undo -->226      <svg class="icon" viewBox="0 0 24 24"><path d="M6 9H2l5-5 5 5H8a8 8 0 1 1 0 16h-2a10 10 0 1 0 0-20" fill="#6f6f6f"/></svg>227      <!-- Redo -->228      <svg class="icon" viewBox="0 0 24 24"><path d="M18 9h4l-5-5-5 5h4a8 8 0 1 0 0 16h2a10 10 0 1 1 0-20" fill="#6f6f6f"/></svg>229      <!-- Add -->230      <svg class="icon" viewBox="0 0 24 24"><path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#cfcfcf"/></svg>231      <!-- Play -->232      <svg class="icon" viewBox="0 0 24 24"><path d="M8 5l12 7-12 7z" fill="#cfcfcf"/></svg>233      <!-- Share -->234      <svg class="icon" viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.9-3.5L8.7 8.4a3 3 0 0 0 0 7.1l6.4 3.9A3 3 0 1 0 16 18l-6.4-3.9a3 3 0 0 0 0-4.2L16 6a3 3 0 0 0 2 .8z" fill="#cfcfcf"/></svg>235    </div>236    <div class="toolbar-title">Untitled Presentation</div>237    <div class="toolbar-meta">Last modified on 5:45:44 PM</div>238  </div>239 240  <!-- Main canvas -->241  <div class="canvas">242    <div class="slide">243      <div class="img bulbs">[IMG: Hanging Bulbs]</div>244      <div class="img clock">[IMG: Clock]</div>245      <div class="slide-title">TOMORROWLAND FESTIVE</div>246      <div class="slide-sub">My favorite event is the Tomorrowland Festival</div>247      <div class="img plant">[IMG: Plant]</div>248    </div>249  </div>250 251  <!-- Bottom panel -->252  <div class="bottom-panel">253    <div class="bottom-header">254      <div class="title">255        <svg class="icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" fill="#ffffff"/></svg>256        <span>Add Transition</span>257      </div>258      <div class="play-circle">259        <svg width="36" height="36" viewBox="0 0 24 24"><path d="M8 5l12 7-12 7z" fill="#ffffff"/></svg>260      </div>261    </div>262    <div class="transition-list">263      <div>Split</div>264      <div>Wedge</div>265      <div>Wheel</div>266      <div>Whip</div>267      <div>Wipe</div>268    </div>269  </div>270 271  <div class="gesture"></div>272</div>273</body>274</html>