GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Presentation Editor Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111314;14    color: #eaeaea;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; left: 0; top: 0; width: 100%; height: 90px;20    background: #17181a; color: #fff; font-size: 36px;21    display: flex; align-items: center; justify-content: space-between;22    padding: 0 28px;23  }24  .status-left { display: flex; align-items: center; gap: 16px; opacity: 0.95; }25  .status-right { display: flex; align-items: center; gap: 22px; opacity: 0.95; }26  .status-icon { width: 36px; height: 36px; }27 28  /* Action toolbar */29  .toolbar {30    position: absolute; left: 0; top: 90px; width: 100%; height: 120px;31    background: #1b1c1f; display: flex; align-items: center; gap: 38px; padding: 0 36px;32  }33  .tool-btn {34    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;35    border-radius: 12px;36  }37  .tool-btn svg { width: 48px; height: 48px; fill: #eaeaea; opacity: 0.95; }38 39  /* Title / metadata row */40  .meta-row {41    position: absolute; left: 0; top: 210px; width: 100%; height: 70px; background: #1b1c1f;42    display: flex; align-items: center; justify-content: space-between; padding: 0 36px; color: #c9c9c9;43    font-size: 34px;44  }45  .meta-left { display: flex; align-items: center; gap: 16px; }46  .meta-right { opacity: 0.6; }47 48  /* Work area */49  .work-area {50    position: absolute; left: 0; top: 280px; width: 100%; bottom: 270px; background: #101112;51  }52  .divider { position: absolute; left: 0; top: 280px; width: 100%; height: 2px; background: #2a2c30; }53 54  /* Slide canvas */55  .slide-wrap {56    position: absolute; left: 0; top: 520px; width: 100%; height: 700px;57    border-top: 1px solid #2a2c30;58    background: #0c0d10;59  }60  .slide {61    position: absolute; left: 0; top: 0; width: 1080px; height: 700px;62    background: radial-gradient(1200px 700px at 75% 10%, #14387c 0%, #0e1a3a 45%, #09112b 70%, #071027 100%);63  }64 65  /* Title text and guides */66  .title-guide {67    position: absolute; left: 54px; top: 180px; width: 560px; height: 170px;68    border: 2px dashed rgba(255,255,255,0.25); border-radius: 8px;69  }70  .title {71    position: absolute; left: 80px; top: 214px; color: #ffc107; font-weight: 800; font-size: 78px; letter-spacing: 0.5px;72  }73  .title-underline {74    position: absolute; left: 80px; top: 320px; width: 140px; height: 6px; background: #e0a400;75  }76  .subtitle-guide {77    position: absolute; left: 54px; top: 360px; width: 520px; height: 110px;78    border: 2px dashed rgba(255,255,255,0.25); border-radius: 8px;79  }80  .subtitle {81    position: absolute; left: 80px; top: 388px; color: #ddd; font-size: 44px; opacity: 0.95;82  }83 84  /* Video placeholder with selection handles */85  .video-box {86    position: absolute; left: 640px; top: 120px; width: 340px; height: 430px;87    border: 2px dashed rgba(255,255,255,0.7); border-radius: 6px;88  }89  .video-thumb {90    position: absolute; left: 0; top: 0; right: 0; bottom: 0;91    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #666;92    font-size: 30px; font-weight: 600;93  }94  .play-overlay {95    position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);96    width: 120px; height: 120px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;97  }98  .play-overlay svg { width: 56px; height: 56px; fill: #111; margin-left: 6px; }99  .handle { position: absolute; width: 26px; height: 26px; background: #fff; border: 2px solid #d0d0d0; border-radius: 50%; }100  .sq { border-radius: 4px; }101 102  .h-tl { left: -14px; top: -14px; }103  .h-tm { left: 50%; transform: translateX(-50%); top: -16px; }104  .h-tr { right: -14px; top: -14px; }105  .h-ml { left: -16px; top: 50%; transform: translateY(-50%); }106  .h-mr { right: -16px; top: 50%; transform: translateY(-50%); }107  .h-bl { left: -14px; bottom: -14px; }108  .h-bm { left: 50%; transform: translateX(-50%); bottom: -16px; }109  .h-br { right: -14px; bottom: -14px; }110 111  /* Floating Play button */112  .big-play {113    position: absolute; right: 48px; top: 1320px;114    background: #0d0e10; border-radius: 18px; padding: 24px 34px; display: flex; align-items: center; gap: 18px;115    box-shadow: 0 6px 18px rgba(0,0,0,0.4); border: 1px solid #22262b;116  }117  .big-play .triangle { width: 0; height: 0; border-left: 28px solid #e53935; border-top: 18px solid transparent; border-bottom: 18px solid transparent; }118  .big-play span { font-size: 44px; color: #fff; }119 120  /* Filmstrip */121  .filmstrip {122    position: absolute; left: 0; bottom: 180px; width: 100%; height: 260px; background: #16181b; border-top: 1px solid #262a30;123    display: flex; align-items: center; gap: 24px; padding: 0 24px;124  }125  .thumb {126    position: relative; width: 300px; height: 180px; background: radial-gradient(260px 120px at 70% 10%, #14387c 0%, #0e1a3a 55%, #0a122b 100%);127    border: 2px solid #2a2f36; border-radius: 8px; overflow: hidden;128  }129  .thumb .num {130    position: absolute; left: 10px; top: 10px; width: 44px; height: 44px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%;131    display: flex; align-items: center; justify-content: center; font-weight: 700;132  }133  .thumb.selected { border-color: #ff6b5f; box-shadow: 0 0 0 3px rgba(255,107,95,0.35) inset; }134 135  /* Right-side add screen button */136  .right-add {137    position: absolute; right: 24px; bottom: 214px; width: 64px; height: 64px; border-radius: 14px; border: 2px solid #2c3036;138    display: flex; align-items: center; justify-content: center; background: #181a1e;139  }140  .right-add svg { width: 36px; height: 36px; fill: #dcdcdc; }141 142  /* Bottom action bar */143  .bottom-bar {144    position: absolute; left: 0; bottom: 70px; width: 100%; height: 110px; background: #15171a;145    display: flex; align-items: center; justify-content: space-around; color: #d5d5d5; border-top: 1px solid #25292e;146  }147  .b-item { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 32px; }148  .b-item svg { width: 42px; height: 42px; fill: #d5d5d5; opacity: 0.95; }149 150  /* Home indicator */151  .home-indicator {152    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);153    width: 330px; height: 10px; background: #e6e6e6; border-radius: 8px; opacity: 0.9;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status bar -->161  <div class="status-bar">162    <div class="status-left">163      <span>7:55</span>164    </div>165    <div class="status-right">166      <!-- Simple signal -->167      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M2 20h2v-2H2v2zm3 0h2v-4H5v4zm3 0h2v-6H8v6zm3 0h2v-8h-2v8zm3 0h2v-10h-2v10zm3 0h2V8h-2v12z"/></svg>168      <!-- Wifi -->169      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M12 20l4-4H8l4 4zm8-9.5C16.9 7.2 7.1 7.2 4 10.5l1.4 1.4c2.6-2.6 10.6-2.6 13.2 0L20 10.5zm-3 3c-3.5-3.5-9.5-3.5-13 0l1.4 1.4c2.7-2.7 7.5-2.7 10.2 0L17 13.5z"/></svg>170      <!-- Battery -->171      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M16 7H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm4 3h-1V14h1c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1z"/></svg>172    </div>173  </div>174 175  <!-- Toolbar -->176  <div class="toolbar">177    <!-- Check -->178    <div class="tool-btn">179      <svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>180    </div>181    <!-- Undo -->182    <div class="tool-btn">183      <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.5 1.3C19.8 15.3 20 14.2 20 13c0-4.4-3.6-8-8-8z"/></svg>184    </div>185    <!-- Redo -->186    <div class="tool-btn">187      <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 3L5.3 17C4.2 15.3 4 14.2 4 13c0-4.4 3.6-8 8-8z"/></svg>188    </div>189    <!-- Add -->190    <div class="tool-btn">191      <svg viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>192    </div>193    <!-- Play -->194    <div class="tool-btn">195      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>196    </div>197    <!-- Share -->198    <div class="tool-btn">199      <svg viewBox="0 0 24 24"><path d="M18 16.1c-.9 0-1.7.4-2.3 1L8.9 13c.1-.3.1-.6.1-.9s0-.6-.1-.9l6.6-4.1c.6.6 1.4 1 2.3 1 1.9 0 3.5-1.6 3.5-3.5S19.9 1 18 1s-3.5 1.6-3.5 3.5c0 .3 0 .6.1.9L8 9.5C7.4 8.9 6.7 8.5 5.8 8.5 3.9 8.5 2.3 10.1 2.3 12S3.9 15.5 5.8 15.5c.9 0 1.6-.4 2.2-.9l6.6 4.1c-.1.3-.1.6-.1.9 0 1.9 1.6 3.5 3.5 3.5s3.5-1.6 3.5-3.5S19.9 16.1 18 16.1z"/></svg>200    </div>201  </div>202 203  <!-- Meta row -->204  <div class="meta-row">205    <div class="meta-left">206      <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#c9c9c9" d="M3 17.2V21h3.8L18.6 9.2 14.8 5.4 3 17.2zM21.7 6.1c.4-.4.4-1 0-1.4L19.3 2.3c-.4-.4-1-.4-1.4 0l-1.8 1.8 3.8 3.8 1.8-1.8z"/></svg>207      <span>Untitled Presentation</span>208    </div>209    <div class="meta-right">Last modified on 7:53:20 AM</div>210  </div>211 212  <!-- Work area background -->213  <div class="divider"></div>214  <div class="work-area"></div>215 216  <!-- Slide viewport -->217  <div class="slide-wrap">218    <div class="slide">219      <div class="title-guide"></div>220      <div class="title">Double tap to a</div>221      <div class="title-underline"></div>222      <div class="subtitle-guide"></div>223      <div class="subtitle">Double tap to add text</div>224 225      <!-- Video placeholder with play and handles -->226      <div class="video-box">227        <div class="video-thumb">[IMG: Video Thumbnail]</div>228        <div class="play-overlay">229          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>230        </div>231        <div class="handle h-tl"></div>232        <div class="handle h-tm sq"></div>233        <div class="handle h-tr"></div>234        <div class="handle h-ml sq"></div>235        <div class="handle h-mr sq"></div>236        <div class="handle h-bl"></div>237        <div class="handle h-bm sq"></div>238        <div class="handle h-br"></div>239      </div>240    </div>241  </div>242 243  <!-- Floating play button -->244  <div class="big-play">245    <div class="triangle"></div>246    <span>Play</span>247  </div>248 249  <!-- Filmstrip thumbnails -->250  <div class="filmstrip">251    <div class="thumb">252      <div class="num">1</div>253    </div>254    <div class="thumb">255      <div class="num">2</div>256    </div>257    <div class="thumb selected">258      <div class="num">3</div>259      <!-- preview image placeholder inside -->260      <div style="position:absolute; right:10px; top:10px; width:55px; height:55px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#666; font-size:20px;">IMG</div>261    </div>262  </div>263 264  <!-- Right-side add screen button -->265  <div class="right-add" title="Add">266    <svg viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>267  </div>268 269  <!-- Bottom action bar -->270  <div class="bottom-bar">271    <div class="b-item">272      <svg viewBox="0 0 24 24"><path d="M4 17h16l-8-12zM4 19h16v2H4z"/></svg>273      <div>Animate</div>274    </div>275    <div class="b-item">276      <svg viewBox="0 0 24 24"><path d="M3 5v14h18V5H3zm16 12H5V7h14v10zM7 9h10v2H7V9zm0 4h6v2H7v-2z"/></svg>277      <div>Format</div>278    </div>279    <div class="b-item">280      <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4V4zm0 5h16v2H4V9zm0 5h16v2H4v-2z"/></svg>281      <div>Review</div>282    </div>283  </div>284 285  <!-- Home indicator -->286  <div class="home-indicator"></div>287</div>288</body>289</html>