GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Presentation Editor Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #0f0f0f;24 color: #ffffff;25 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;26 font-size: 40px;27 display: flex;28 align-items: center;29 padding: 0 36px;30 box-sizing: border-box;31 }32 .status-left { flex: 0 0 auto; }33 .status-right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 30px;38 }39 .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #ffffff; stroke-width: 4; }40 41 /* App bar */42 .app-bar {43 position: absolute;44 top: 120px;45 left: 0;46 width: 1080px;47 height: 120px;48 background: #151515;49 display: flex;50 align-items: center;51 box-sizing: border-box;52 padding: 0 24px;53 color: #ff8f00;54 font-weight: 600;55 font-size: 46px;56 }57 .app-actions {58 display: flex;59 gap: 46px;60 margin: 0 auto;61 align-items: center;62 }63 .app-actions .icon-btn svg { width: 54px; height: 54px; stroke: #e0e0e0; stroke-width: 4; fill: none; }64 .title {65 position: absolute;66 left: 50%;67 transform: translateX(-50%);68 color: #ff8f00;69 font-size: 46px;70 }71 72 /* Slide workspace */73 .slide-area {74 position: absolute;75 top: 240px;76 left: 0;77 width: 1080px;78 height: 1260px;79 background: #4e3a26;80 }81 82 /* Text box selection */83 .textbox {84 position: absolute;85 top: 140px;86 left: 72px;87 width: 936px;88 padding: 26px 32px 40px 80px;89 border: 2px dashed #bdbdbd;90 box-sizing: border-box;91 }92 .handle {93 position: absolute;94 width: 32px;95 height: 32px;96 background: #f5f5f5;97 border-radius: 50%;98 border: 2px solid #9e9e9e;99 }100 .handle.tl { top: -16px; left: -16px; }101 .handle.tr { top: -16px; right: -16px; }102 .handle.bl { bottom: -16px; left: -16px; }103 .handle.br { bottom: -16px; right: -16px; }104 .rotate-handle {105 position: absolute;106 top: -80px;107 left: 50%;108 transform: translateX(-50%);109 width: 48px;110 height: 48px;111 background: #f5f5f5;112 border: 2px solid #9e9e9e;113 border-radius: 50%;114 display: flex;115 align-items: center;116 justify-content: center;117 }118 .rotate-handle svg { width: 30px; height: 30px; stroke: #757575; stroke-width: 3; fill: none; }119 120 .slide-text {121 color: #ffffff;122 font-size: 86px;123 line-height: 1.05;124 font-weight: 500;125 letter-spacing: 0.5px;126 }127 .bullet {128 position: absolute;129 left: 38px;130 top: 188px;131 width: 22px;132 height: 22px;133 background: #ffffff;134 border-radius: 50%;135 }136 .subtext {137 position: absolute;138 top: 490px;139 left: 90px;140 font-size: 42px;141 color: #e0e0e0;142 }143 144 /* Formatting bar above keyboard */145 .format-bar {146 position: absolute;147 top: 1500px;148 left: 0;149 width: 1080px;150 height: 120px;151 background: #1a1a1a;152 display: flex;153 align-items: center;154 box-sizing: border-box;155 padding: 0 30px;156 color: #e0e0e0;157 gap: 36px;158 font-size: 44px;159 }160 .fmt-btn {161 display: flex;162 align-items: center;163 gap: 16px;164 }165 .fmt-icon {166 width: 60px;167 height: 60px;168 border-radius: 8px;169 display: flex;170 align-items: center;171 justify-content: center;172 color: #e0e0e0;173 }174 .a-underline {175 border-bottom: 8px solid #e53935;176 padding-bottom: 6px;177 }178 179 /* Keyboard */180 .keyboard {181 position: absolute;182 bottom: 60px;183 left: 0;184 width: 1080px;185 height: 810px;186 background: #191b1d;187 box-sizing: border-box;188 padding-top: 16px;189 color: #e0e0e0;190 }191 .suggest {192 height: 90px;193 display: flex;194 align-items: center;195 gap: 28px;196 padding: 0 26px;197 box-sizing: border-box;198 font-size: 36px;199 }200 .suggest .spacer { margin-left: auto; }201 .suggest .mic svg { width: 48px; height: 48px; stroke: #e0e0e0; stroke-width: 3; fill: none; }202 203 .keys {204 padding: 10px 16px 0;205 box-sizing: border-box;206 display: grid;207 grid-template-rows: repeat(4, 1fr);208 gap: 16px;209 height: 680px;210 }211 .row {212 display: flex;213 justify-content: space-between;214 gap: 12px;215 }216 .key {217 flex: 1 1 auto;218 height: 120px;219 background: #222428;220 border-radius: 16px;221 display: flex;222 align-items: center;223 justify-content: center;224 font-size: 44px;225 color: #e0e0e0;226 }227 .key.small { flex: 0 0 120px; }228 .key.wide { flex: 1 1 420px; }229 .key.circle {230 border-radius: 60px;231 background: #aab7c6;232 color: #0f0f0f;233 font-weight: 600;234 }235 .key.light {236 background: #2a2d32;237 }238 239 /* Bottom gesture pill */240 .gesture {241 position: absolute;242 bottom: 16px;243 left: 50%;244 transform: translateX(-50%);245 width: 360px;246 height: 12px;247 background: #ffffffaa;248 border-radius: 8px;249 }250</style>251</head>252<body>253<div id="render-target">254 255 <!-- Status bar -->256 <div class="status-bar">257 <div class="status-left">12:30</div>258 <div class="status-right">259 <div class="status-icon">260 <!-- Crescent (Do Not Disturb) -->261 <svg viewBox="0 0 24 24"><path d="M17 12a7 7 0 1 1-6-9c-2 2-2 5 0 7s5 2 6 2z"/></svg>262 </div>263 <div class="status-icon">264 <!-- Wi-Fi -->265 <svg viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 15c2-2 6-2 8 0"/><circle cx="12" cy="18" r="1.5" fill="#ffffff"/></svg>266 </div>267 <div class="status-icon">268 <!-- Cellular -->269 <svg viewBox="0 0 24 24"><rect x="3" y="14" width="3" height="7" fill="#ffffff"/><rect x="9" y="11" width="3" height="10" fill="#ffffff"/><rect x="15" y="7" width="3" height="14" fill="#ffffff"/></svg>270 </div>271 <div class="status-icon">272 <!-- Battery -->273 <svg viewBox="0 0 26 24"><rect x="2" y="5" width="18" height="12" rx="2" stroke="#ffffff"/><rect x="4" y="7" width="14" height="8" fill="#ffffff"/><rect x="20" y="9" width="4" height="4" rx="1" fill="#ffffff"/></svg>274 </div>275 </div>276 </div>277 278 <!-- App bar -->279 <div class="app-bar">280 <div class="app-actions">281 <div class="icon-btn">282 <!-- check -->283 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>284 </div>285 <div class="icon-btn">286 <!-- pencil -->287 <svg viewBox="0 0 24 24"><path d="M4 16l12-12 4 4-12 12H4z"/></svg>288 </div>289 <div class="icon-btn">290 <!-- search -->291 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M14 14l6 6"/></svg>292 </div>293 <div class="icon-btn">294 <!-- slideshow screen -->295 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="12" rx="2"/><path d="M12 17v4M7 21h10"/></svg>296 </div>297 <div class="icon-btn">298 <!-- undo -->299 <svg viewBox="0 0 24 24"><path d="M9 7H4l5-5"/><path d="M4 7c8 0 12 2 12 8"/></svg>300 </div>301 <div class="icon-btn">302 <!-- kebab -->303 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>304 </div>305 </div>306 <div class="title">Presentation.pptx</div>307 </div>308 309 <!-- Slide area -->310 <div class="slide-area">311 <div class="textbox">312 <div class="rotate-handle">313 <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 1 1-6 10"/><path d="M6 15l-3-1 1 3"/></svg>314 </div>315 <div class="handle tl"></div>316 <div class="handle tr"></div>317 <div class="handle bl"></div>318 <div class="handle br"></div>319 320 <div class="slide-text">321 Regular nature hikes strengthen<br>322 our heart, lungs, and muscles,<br>323 well as our mind324 </div>325 </div>326 <div class="bullet"></div>327 328 <div class="subtext">Double tap to add text</div>329 </div>330 331 <!-- Formatting bar -->332 <div class="format-bar">333 <div class="fmt-btn"><div class="fmt-icon">B</div></div>334 <div class="fmt-btn"><div class="fmt-icon">I</div></div>335 <div class="fmt-btn"><div class="fmt-icon">U</div></div>336 <div class="fmt-btn"><div class="fmt-icon a-underline">A</div></div>337 <div class="fmt-btn"><div class="fmt-icon">•</div><span>Lists</span></div>338 <div class="fmt-btn"><div class="fmt-icon">1</div><span>2 3</span></div>339 <div class="fmt-btn"><div class="fmt-icon">≡</div></div>340 <div class="fmt-btn"><div class="fmt-icon">⇆</div></div>341 </div>342 343 <!-- Keyboard -->344 <div class="keyboard">345 <div class="suggest">346 <div>mind</div>347 <div>mindset</div>348 <div>minds</div>349 <div class="spacer"></div>350 <div class="mic">351 <svg viewBox="0 0 24 24"><rect x="9" y="4" width="6" height="10" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2"/><path d="M12 17v4"/></svg>352 </div>353 </div>354 <div class="keys">355 <div class="row">356 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>357 </div>358 <div class="row" style="padding: 0 40px;">359 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>360 </div>361 <div class="row">362 <div class="key small">⇧</div>363 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>364 <div class="key small">⌫</div>365 </div>366 <div class="row">367 <div class="key circle">?123</div>368 <div class="key small">,</div>369 <div class="key wide"> </div>370 <div class="key small">.</div>371 <div class="key circle">↵</div>372 </div>373 </div>374 </div>375 376 <div class="gesture"></div>377</div>378</body>379</html>