GD-ML/AndroidCode
13.4k
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 Slide Editor 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: #121212;15 color: #FFFFFF;16 }17 18 /* Top status bar */19 .status-bar {20 height: 90px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #EDEDED;26 font-size: 34px;27 letter-spacing: 0.5px;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 24px;33 }34 .icon { width: 42px; height: 42px; display: inline-block; }35 .icon svg { width: 100%; height: 100%; fill: none; stroke: #EDEDED; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }36 37 /* Editor toolbar */38 .toolbar {39 height: 110px;40 display: flex;41 align-items: center;42 gap: 34px;43 padding: 0 26px;44 border-bottom: 1px solid #222;45 }46 .tool-btn {47 width: 64px;48 height: 64px;49 display: inline-flex;50 align-items: center;51 justify-content: center;52 }53 .tool-btn svg { width: 64px; height: 64px; stroke: #FFFFFF; }54 55 /* Title row */56 .doc-meta {57 display: flex;58 align-items: center;59 justify-content: space-between;60 padding: 18px 36px 24px 36px;61 color: #D8D8D8;62 font-size: 36px;63 }64 .doc-left {65 display: flex;66 align-items: center;67 gap: 16px;68 color: #FFFFFF;69 font-weight: 600;70 }71 .doc-right { font-size: 26px; color: #9E9E9E; }72 73 /* Slide area */74 .canvas-area {75 padding: 12px 24px 0 24px;76 }77 .slide {78 width: 1016px;79 height: 570px;80 margin: 14px auto 40px auto;81 background: radial-gradient(1200px 600px at 85% 5%, #163a7c 0%, #0c1d3f 40%, #08142b 100%);82 border-radius: 6px;83 position: relative;84 box-shadow: 0 0 0 1px #2b2b2b inset;85 overflow: hidden;86 }87 /* Starry specks approximation */88 .slide::after{89 content:"";90 position:absolute; inset:0;91 background-image: radial-gradient(#5b6c9e 0.7px, transparent 0.7px);92 background-size: 24px 24px;93 opacity: 0.15;94 pointer-events: none;95 }96 97 /* Placeholder dashed guides */98 .dash-line {99 position: absolute;100 left: 40px;101 right: 40px;102 height: 96px;103 border: 2px dashed rgba(255,255,255,0.25);104 border-radius: 4px;105 }106 .dash-line.yellow { border-color: rgba(251,191,36,0.8); top: 280px; height: 120px; }107 .dash-line.white { top: 420px; height: 80px; }108 109 .title-text {110 position: absolute;111 left: 60px;112 top: 300px;113 font-size: 72px;114 font-weight: 800;115 color: #FFC107;116 letter-spacing: 0.5px;117 z-index: 2;118 }119 .accent-line {120 position: absolute;121 left: 60px;122 top: 420px;123 width: 120px;124 height: 6px;125 background: #FFC107;126 border-radius: 3px;127 }128 .subtitle {129 position: absolute;130 left: 60px;131 top: 452px;132 font-size: 34px;133 color: #C7D1E6;134 z-index: 2;135 }136 137 /* Image placeholder on slide */138 .img-ph {139 position: absolute;140 right: 320px;141 top: 170px;142 width: 300px;143 height: 420px;144 background: #E0E0E0;145 border: 1px solid #BDBDBD;146 display: flex;147 align-items: center;148 justify-content: center;149 color: #757575;150 font-size: 28px;151 z-index: 3;152 }153 154 /* Lower panel */155 .panel {156 margin-top: 36px;157 padding: 36px 32px 120px 32px;158 background: #0E0E0E;159 border-top: 1px solid #222;160 }161 .panel-header {162 display: flex;163 align-items: center;164 justify-content: space-between;165 margin-bottom: 26px;166 }167 .panel-title {168 font-size: 58px;169 font-weight: 700;170 }171 .panel-actions { display: flex; align-items: center; gap: 26px; }172 .circle-btn {173 width: 64px; height: 64px; border-radius: 50%;174 border: 2px solid #2b2b2b;175 display:flex; align-items:center; justify-content:center;176 }177 .circle-btn svg { width: 40px; height: 40px; stroke: #EDEDED; }178 179 .row {180 display: flex; align-items: center; justify-content: space-between;181 padding: 28px 8px;182 border-bottom: 1px solid #1f1f1f;183 font-size: 38px;184 }185 .row .label { color: #FFFFFF; }186 .row .value { color: #BDBDBD; display:flex; align-items:center; gap: 12px; }187 188 .subtle {189 color: #7aa2ff;190 font-size: 24px;191 margin-top: 24px;192 letter-spacing: 1px;193 }194 195 .slider {196 margin: 12px 0 34px 0;197 height: 18px;198 background: #1e1e1e;199 border-radius: 9px;200 position: relative;201 }202 .slider::before {203 content:"";204 position:absolute; left:0; top:0; bottom:0; width: 40%;205 background:#2962FF;206 border-radius: 9px;207 }208 .slider::after {209 content:"";210 position:absolute; left:40%; top:50%;211 width: 30px; height: 30px; background:#FFFFFF; border-radius:50%;212 transform: translate(-50%, -50%);213 }214 215 .advance {216 margin-top: 18px;217 }218 .checkbox {219 display: flex; align-items: center; gap: 18px; margin-top: 16px; font-size: 34px; color:#E0E0E0;220 }221 .box {222 width: 40px; height: 40px; border: 2px solid #3a3a3a; border-radius: 6px;223 }224 .dropdown {225 margin-left: 18px; padding: 8px 14px; border:1px solid #2b2b2b; border-radius: 6px; color:#BDBDBD; font-size: 30px;226 }227 228 /* Bottom gesture bar */229 .home-indicator {230 position: absolute;231 left: 50%; bottom: 18px;232 transform: translateX(-50%);233 width: 260px; height: 8px;234 background: #BDBDBD;235 border-radius: 8px;236 opacity: 0.65;237 }238</style>239</head>240<body>241<div id="render-target">242 243 <!-- Status Bar -->244 <div class="status-bar">245 <div>7:55</div>246 <div class="status-right">247 <!-- Cloud -->248 <span class="icon">249 <svg viewBox="0 0 24 24">250 <path d="M6 15h10a4 4 0 0 0 0-8 5 5 0 0 0-9.5 2" />251 </svg>252 </span>253 <!-- Signal -->254 <span class="icon">255 <svg viewBox="0 0 24 24">256 <path d="M3 17h2M7 13h2M11 9h2M15 5h2" />257 </svg>258 </span>259 <!-- WiFi -->260 <span class="icon">261 <svg viewBox="0 0 24 24">262 <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18h0" />263 </svg>264 </span>265 <!-- Battery -->266 <span class="icon">267 <svg viewBox="0 0 24 24">268 <rect x="3" y="6" width="16" height="12" rx="2"></rect>269 <rect x="19" y="10" width="2" height="4"></rect>270 </svg>271 </span>272 </div>273 </div>274 275 <!-- Toolbar -->276 <div class="toolbar">277 <!-- Back -->278 <div class="tool-btn">279 <svg viewBox="0 0 24 24"><path d="M15 5L7 12l8 7"/></svg>280 </div>281 <!-- Undo -->282 <div class="tool-btn">283 <svg viewBox="0 0 24 24"><path d="M7 7v5h5"/><path d="M7 12a7 7 0 1 1 7 7"/></svg>284 </div>285 <!-- Redo -->286 <div class="tool-btn">287 <svg viewBox="0 0 24 24"><path d="M17 7v5h-5"/><path d="M17 12a7 7 0 1 0-7 7"/></svg>288 </div>289 <!-- Add -->290 <div class="tool-btn">291 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>292 </div>293 <!-- Play -->294 <div class="tool-btn">295 <svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7z"/></svg>296 </div>297 <!-- Share -->298 <div class="tool-btn">299 <svg viewBox="0 0 24 24">300 <circle cx="6" cy="12" r="2"></circle>301 <circle cx="18" cy="6" r="2"></circle>302 <circle cx="18" cy="18" r="2"></circle>303 <path d="M8 12l8-6M8 12l8 6"/>304 </svg>305 </div>306 </div>307 308 <!-- Document meta -->309 <div class="doc-meta">310 <div class="doc-left">311 <!-- Pencil icon -->312 <span class="icon" style="width:34px;height:34px;">313 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"/><path d="M14.06 4.94l3.75 3.75"/></svg>314 </span>315 <span>Untitled Presentation</span>316 </div>317 <div class="doc-right">Last modified on 7:53:20 AM</div>318 </div>319 320 <!-- Slide canvas preview -->321 <div class="canvas-area">322 <div class="slide">323 <div class="dash-line yellow"></div>324 <div class="dash-line white"></div>325 <div class="title-text">Double tap to a</div>326 <div class="accent-line"></div>327 <div class="subtitle">Double tap to add text</div>328 329 <div class="img-ph">[IMG: Keyboard close-up]</div>330 </div>331 </div>332 333 <!-- Transition panel -->334 <div class="panel">335 <div class="panel-header">336 <div class="panel-title">Transition</div>337 <div class="panel-actions">338 <div class="circle-btn" title="Preview">339 <svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7z"/></svg>340 </div>341 <div class="circle-btn" title="More">342 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>343 </div>344 <div class="circle-btn" title="Download">345 <svg viewBox="0 0 24 24"><path d="M12 3v12"/><path d="M7 10l5 5 5-5"/><path d="M4 20h16"/></svg>346 </div>347 </div>348 </div>349 350 <div class="row">351 <div class="label">Type</div>352 <div class="value">None353 <svg class="icon" style="width:32px;height:32px" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#BDBDBD" fill="none" stroke-width="3"/></svg>354 </div>355 </div>356 357 <div class="subtle">DURATION</div>358 <div class="slider"></div>359 360 <div class="subtle">ADVANCE SLIDE</div>361 <div class="advance">362 <div class="checkbox">363 <div class="box"></div>364 <span>After</span>365 <span class="dropdown">5 s366 <svg class="icon" style="width:26px;height:26px" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#BDBDBD" fill="none" stroke-width="3"/></svg>367 </span>368 </div>369 </div>370 </div>371 372 <div class="home-indicator"></div>373</div>374</body>375</html>