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>Slide Editor UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111213;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #0a0a0a;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 32px;30    box-sizing: border-box;31    font-size: 42px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .status-icons svg { width: 44px; height: 44px; }40 41  /* Top toolbar */42  .toolbar {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 160px;48    background: #1a1a1a;49    display: flex;50    align-items: center;51    justify-content: space-between;52    padding: 0 30px;53    box-sizing: border-box;54  }55  .toolbar-left {56    display: flex;57    align-items: center;58    gap: 36px;59    font-size: 44px;60  }61  .toolbar-left .label { font-weight: 600; }62  .toolbar-left svg { width: 46px; height: 46px; opacity: 0.85; }63  .toolbar-right {64    display: flex;65    align-items: center;66    gap: 24px;67  }68  .page-pill {69    width: 68px;70    height: 68px;71    border: 2px solid #9a9a9a;72    color: #ddd;73    display: flex;74    align-items: center;75    justify-content: center;76    font-size: 40px;77    border-radius: 10px;78    background: #2a2a2a;79  }80 81  /* Main content area */82  .content {83    position: absolute;84    top: 280px;85    left: 0;86    width: 1080px;87    bottom: 360px; /* leave room for bottom bar */88    background: #0f0f0f;89  }90 91  /* White slide canvas */92  .slide {93    position: absolute;94    left: 50%;95    transform: translateX(-50%);96    top: 300px;97    width: 1000px;98    height: 720px;99    background: #ffffff;100    box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset;101  }102 103  .placeholder {104    position: absolute;105    left: 70px;106    right: 70px;107    border: 2px dashed #bdbdbd;108    color: #000;109    padding: 24px;110    box-sizing: border-box;111  }112  .ph-title {113    top: 120px;114    height: 220px;115  }116  .ph-subtitle {117    top: 360px;118    height: 230px;119  }120  .title-text {121    font-size: 94px;122    font-weight: 600;123    color: #111;124    line-height: 1.1;125  }126  .subtitle-text {127    font-size: 42px;128    font-weight: 500;129    color: #333;130    text-align: center;131    margin-top: 18px;132  }133 134  /* Bottom toolbar */135  .bottom-bar {136    position: absolute;137    bottom: 80px;138    left: 0;139    width: 1080px;140    height: 320px;141    background: #1a1a1a;142    padding: 24px 32px;143    box-sizing: border-box;144  }145  .thumbnails {146    display: flex;147    align-items: center;148    gap: 26px;149    margin-bottom: 28px;150  }151  .thumb {152    width: 240px;153    height: 170px;154    background: #ffffff;155    border: 3px solid #ef6c00; /* active orange border */156    position: relative;157  }158  .thumb .badge {159    position: absolute;160    right: 6px;161    bottom: 6px;162    background: #ef6c00;163    color: #fff;164    font-size: 34px;165    padding: 4px 10px;166    border-radius: 6px;167  }168  .thumb-add {169    width: 240px;170    height: 170px;171    background: #ffffff;172    border: 2px solid #cccccc;173    display: flex;174    align-items: center;175    justify-content: center;176    color: #777;177    font-size: 100px;178    line-height: 1;179  }180 181  .actions {182    display: flex;183    align-items: center;184    gap: 40px;185  }186  .action {187    display: flex;188    align-items: center;189    gap: 16px;190    color: #ddd;191    font-size: 38px;192    opacity: 0.95;193  }194  .action svg { width: 40px; height: 40px; }195 196  /* Gesture pill */197  .gesture {198    position: absolute;199    bottom: 22px;200    left: 50%;201    transform: translateX(-50%);202    width: 180px;203    height: 12px;204    background: #ffffff;205    border-radius: 10px;206    opacity: 0.85;207  }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status bar -->214  <div class="status-bar">215    <div class="time">12:04</div>216    <div class="status-icons">217      <!-- Wifi -->218      <svg viewBox="0 0 36 36" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round">219        <path d="M5 12c9-8 17-8 26 0"></path>220        <path d="M9 16c6-5 12-5 18 0"></path>221        <path d="M15 22c3-2 6-2 9 0"></path>222        <circle cx="18" cy="27" r="2.3" fill="#fff" stroke="none"></circle>223      </svg>224      <!-- Battery -->225      <svg viewBox="0 0 36 36" fill="none" stroke="#fff" stroke-width="2.5">226        <rect x="4" y="10" width="24" height="16" rx="2"></rect>227        <rect x="28" y="14" width="4" height="8" fill="#fff" stroke="none"></rect>228        <rect x="7" y="13" width="18" height="10" fill="#fff" stroke="none"></rect>229      </svg>230    </div>231  </div>232 233  <!-- Top toolbar -->234  <div class="toolbar">235    <div class="toolbar-left">236      <div class="label">Done</div>237      <!-- Save icon -->238      <svg viewBox="0 0 36 36" fill="none" stroke="#fff" stroke-width="2.4" stroke-linejoin="round">239        <path d="M6 6h22l2 2v22H6V6z"></path>240        <rect x="10" y="10" width="10" height="8"></rect>241        <path d="M10 26h20"></path>242      </svg>243      <!-- Undo icon -->244      <svg viewBox="0 0 36 36" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round">245        <path d="M14 18H28"></path>246        <path d="M14 18l6-6"></path>247        <path d="M14 18l6 6"></path>248      </svg>249      <!-- Redo icon -->250      <svg viewBox="0 0 36 36" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round">251        <path d="M22 18H8"></path>252        <path d="M22 18l-6-6"></path>253        <path d="M22 18l-6 6"></path>254      </svg>255    </div>256    <div class="toolbar-right">257      <div class="page-pill">1</div>258      <!-- Close icon -->259      <svg viewBox="0 0 36 36" fill="none" stroke="#fff" stroke-width="2.8" stroke-linecap="round">260        <path d="M8 8L28 28"></path>261        <path d="M28 8L8 28"></path>262      </svg>263    </div>264  </div>265 266  <!-- Main content area -->267  <div class="content">268    <div class="slide">269      <div class="placeholder ph-title">270        <div class="title-text">Double tap to add title</div>271      </div>272      <div class="placeholder ph-subtitle">273        <div class="subtitle-text">Double tap to add subtitle</div>274      </div>275    </div>276  </div>277 278  <!-- Bottom toolbar -->279  <div class="bottom-bar">280    <div class="thumbnails">281      <div class="thumb">282        <div class="badge">1</div>283      </div>284      <div class="thumb-add">+</div>285    </div>286    <div class="actions">287      <div class="action">288        <!-- Grid icon -->289        <svg viewBox="0 0 36 36" fill="none" stroke="#ddd" stroke-width="2.4">290          <rect x="6" y="6" width="9" height="9"></rect>291          <rect x="21" y="6" width="9" height="9"></rect>292          <rect x="6" y="21" width="9" height="9"></rect>293          <rect x="21" y="21" width="9" height="9"></rect>294        </svg>295      </div>296      <div class="action">297        <!-- Plus icon -->298        <svg viewBox="0 0 36 36" fill="none" stroke="#ddd" stroke-width="2.8" stroke-linecap="round">299          <path d="M18 8v20"></path>300          <path d="M8 18h20"></path>301        </svg>302        <span>Slide</span>303      </div>304      <div class="action">305        <!-- Picture icon -->306        <svg viewBox="0 0 36 36" fill="none" stroke="#ddd" stroke-width="2.2">307          <rect x="6" y="8" width="24" height="20" rx="2"></rect>308          <path d="M10 24l6-6 6 6 6-8"></path>309          <circle cx="12" cy="14" r="2" fill="#ddd" stroke="none"></circle>310        </svg>311        <span>Picture</span>312      </div>313      <div class="action">314        <!-- Text box icon -->315        <svg viewBox="0 0 36 36" fill="none" stroke="#ddd" stroke-width="2.2">316          <rect x="6" y="8" width="24" height="20" rx="2"></rect>317          <path d="M12 24V12h12"></path>318          <path d="M20 12v12"></path>319        </svg>320        <span>Text Box</span>321      </div>322      <div class="action">323        <!-- Share icon -->324        <svg viewBox="0 0 36 36" fill="none" stroke="#ddd" stroke-width="2.6" stroke-linecap="round">325          <rect x="7" y="12" width="18" height="16" rx="2"></rect>326          <path d="M20 8l6 6"></path>327          <path d="M26 14V8h-6"></path>328        </svg>329        <span>Share</span>330      </div>331    </div>332  </div>333 334  <!-- Gesture navigation pill -->335  <div class="gesture"></div>336 337</div>338</body>339</html>