GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Presentation Editor UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #EEEEEE;13 }14 /* Status bar */15 .status-bar {16 position: absolute;17 top: 0;18 left: 0;19 width: 1080px;20 height: 90px;21 background: #FFFFFF;22 display: flex;23 align-items: center;24 padding: 0 28px;25 color: #333;26 font-size: 34px;27 box-shadow: 0 1px 0 rgba(0,0,0,0.06);28 }29 .status-right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 18px;34 color: #111;35 font-size: 30px;36 }37 .dot { width: 8px; height: 8px; background: #111; border-radius: 50%; display: inline-block; }38 /* Header toolbar */39 .header {40 position: absolute;41 top: 90px;42 left: 0;43 width: 1080px;44 height: 120px;45 background: #FFFFFF;46 display: flex;47 align-items: center;48 padding: 0 26px;49 color: #2e2e2e;50 border-bottom: 1px solid #e5e5e5;51 }52 .check-btn {53 width: 44px;54 height: 44px;55 border: 2px solid #6d6d6d;56 border-radius: 6px;57 margin-right: 18px;58 position: relative;59 }60 .check-btn:after {61 content: "";62 position: absolute;63 left: 10px; top: 12px;64 width: 18px; height: 10px;65 border-left: 3px solid #6d6d6d;66 border-bottom: 3px solid #6d6d6d;67 transform: rotate(-45deg);68 }69 .title {70 font-size: 40px;71 font-weight: 600;72 }73 .toolbar-icons {74 margin-left: auto;75 display: flex;76 gap: 28px;77 align-items: center;78 }79 .tool {80 width: 54px; height: 54px; border-radius: 8px;81 display: flex; align-items: center; justify-content: center;82 border: 1px solid #dcdcdc;83 background: #fafafa;84 }85 /* Workspace */86 .workspace {87 position: absolute;88 top: 210px;89 left: 0;90 width: 1080px;91 height: 1250px;92 background: #E9E9E9;93 }94 .slide-canvas {95 position: absolute;96 left: 40px;97 top: 380px;98 width: 1000px;99 height: 700px;100 background: #FFFFFF;101 border: 1px solid #d0d0d0;102 box-shadow: 0 2px 0 rgba(0,0,0,0.02);103 }104 .textbox {105 position: absolute;106 left: 90px;107 top: 280px;108 width: 820px;109 height: 230px;110 border: 2px dotted #9c9c9c;111 }112 .handle {113 position: absolute;114 width: 30px; height: 30px;115 border: 4px solid #8c8c8c;116 border-radius: 50%;117 background: #fff;118 }119 .rotate-holder {120 position: absolute;121 left: 50%;122 transform: translateX(-50%);123 top: 230px;124 width: 60px; height: 60px;125 }126 .heading {127 position: absolute;128 left: 0; right: 0;129 top: 330px;130 text-align: center;131 font-size: 68px;132 color: #222;133 font-weight: 500;134 }135 .subtitle {136 position: absolute;137 left: 0; right: 0;138 top: 440px;139 text-align: center;140 font-size: 30px;141 color: #606060;142 }143 /* Notes & Comments */144 .notes-row {145 position: absolute;146 left: 0;147 top: 1460px;148 width: 1080px;149 height: 120px;150 display: flex;151 align-items: center;152 padding: 0 40px;153 gap: 40px;154 }155 .pill {156 display: flex;157 align-items: center;158 gap: 18px;159 padding: 16px 20px;160 border-radius: 8px;161 background: #FFFFFF;162 border: 1px solid #dcdcdc;163 font-size: 38px;164 color: #333;165 }166 /* Thumbnails row */167 .thumbs {168 position: absolute;169 left: 0;170 top: 1580px;171 width: 1080px;172 height: 300px;173 background: #efefef;174 border-top: 1px solid #e5e5e5;175 display: flex;176 align-items: flex-start;177 padding: 24px 24px;178 gap: 24px;179 }180 .thumb {181 width: 220px; height: 220px; background: #FFFFFF;182 border: 1px solid #cfcfcf;183 box-shadow: 0 1px 0 rgba(0,0,0,0.05);184 position: relative;185 }186 .thumb .label {187 position: absolute; left: 20px; top: 90px; color: #777; font-size: 28px;188 }189 .thumb-active {190 outline: 6px solid #a6523a;191 }192 .thumb-number {193 margin-top: 14px;194 font-size: 38px;195 color: #6b2c1c;196 }197 .thumbs-right {198 flex: 1;199 height: 100%;200 background: #FFFFFF;201 border: 1px solid #dcdcdc;202 }203 .add-btn {204 position: absolute;205 right: 26px; top: 1688px;206 width: 88px; height: 88px;207 border-radius: 8px;208 border: 2px solid #c64a30;209 display: flex; align-items: center; justify-content: center;210 color: #c64a30; font-size: 48px; font-weight: 600;211 background: #fff;212 }213 /* Bottom formatting toolbar */214 .format-bar {215 position: absolute;216 left: 0;217 bottom: 0;218 width: 1080px;219 height: 180px;220 background: #FFFFFF;221 border-top: 1px solid #dcdcdc;222 display: flex;223 align-items: center;224 padding: 0 30px;225 gap: 48px;226 }227 .fmt {228 font-size: 70px; color: #333; font-weight: 700;229 }230 .fmt.i { font-style: italic; font-weight: 500; }231 .fmt.u { text-decoration: underline; font-weight: 600; }232 .fmt-a { position: relative; font-size: 70px; }233 .fmt-a:after {234 content: "";235 position: absolute; left: 0; right: 0; bottom: -14px;236 height: 14px; background: #c64a30; border-radius: 2px;237 }238 .list-icon, .align-icon {239 width: 120px; height: 90px; border: 1px solid #dcdcdc; border-radius: 6px;240 display: grid; grid-template-rows: repeat(3, 1fr); padding: 10px;241 color: #777; font-size: 22px;242 }243 .line { height: 12px; background: #bdbdbd; margin: 10px 0; }244 .bullet { width: 12px; height: 12px; background: #777; border-radius: 2px; }245 .align-box { display: grid; grid-template-columns: 1fr; gap: 10px; justify-items: end; }246</style>247</head>248<body>249<div id="render-target">250 251 <!-- Status bar -->252 <div class="status-bar">253 <div>11:47</div>254 <div class="status-right">255 <span>◯</span>256 <span class="dot"></span>257 <span>🔋 100%</span>258 </div>259 </div>260 261 <!-- Header -->262 <div class="header">263 <div class="check-btn"></div>264 <div class="title">Presentation (1)</div>265 266 <div class="toolbar-icons">267 <!-- simple SVG icons -->268 <div class="tool">269 <svg width="30" height="30" viewBox="0 0 24 24">270 <path d="M4 20h4l9-9-4-4-9 9v4z" fill="#666"/>271 </svg>272 </div>273 <div class="tool">274 <svg width="30" height="30" viewBox="0 0 24 24">275 <circle cx="11" cy="11" r="6" stroke="#666" stroke-width="2" fill="none"/>276 <line x1="16" y1="16" x2="21" y2="21" stroke="#666" stroke-width="2"/>277 </svg>278 </div>279 <div class="tool">280 <svg width="30" height="30" viewBox="0 0 24 24">281 <polygon points="8,5 19,12 8,19" fill="#666"/>282 <rect x="4" y="5" width="2" height="14" fill="#666"/>283 </svg>284 </div>285 <div class="tool">286 <svg width="30" height="30" viewBox="0 0 24 24">287 <path d="M8 7h11v2H8zM5 12h14v2H5zM8 17h11v2H8z" fill="#666"/>288 <path d="M10 9l-4 4 4 4" stroke="#666" stroke-width="2" fill="none"/>289 </svg>290 </div>291 <div class="tool">292 <svg width="30" height="30" viewBox="0 0 24 24">293 <circle cx="12" cy="5" r="2" fill="#666"/>294 <circle cx="12" cy="12" r="2" fill="#666"/>295 <circle cx="12" cy="19" r="2" fill="#666"/>296 </svg>297 </div>298 </div>299 </div>300 301 <!-- Workspace area -->302 <div class="workspace">303 <div class="slide-canvas">304 <!-- dotted text box -->305 <div class="textbox">306 <!-- handles -->307 <div class="handle" style="left:-15px; top:-15px;"></div>308 <div class="handle" style="right:-15px; top:-15px;"></div>309 <div class="handle" style="left:-15px; bottom:-15px;"></div>310 <div class="handle" style="right:-15px; bottom:-15px;"></div>311 <div class="handle" style="left:50%; transform:translateX(-50%); bottom:-15px;"></div>312 <div class="handle" style="left:50%; transform:translateX(-50%); top:-15px;"></div>313 <div class="handle" style="left:-15px; top:50%; transform:translateY(-50%);"></div>314 <div class="handle" style="right:-15px; top:50%; transform:translateY(-50%);"></div>315 </div>316 <!-- rotate icon above box -->317 <div class="rotate-holder">318 <svg width="60" height="60" viewBox="0 0 24 24">319 <circle cx="12" cy="12" r="9" stroke="#848484" stroke-width="2" fill="#fff"/>320 <path d="M12 5v4l3-3" stroke="#848484" stroke-width="2" fill="none"/>321 <path d="M7 12a5 5 0 0 0 9 3" stroke="#848484" stroke-width="2" fill="none"/>322 </svg>323 </div>324 325 <div class="heading">New car</div>326 <div class="subtitle">Double tap to add subtitle</div>327 </div>328 </div>329 330 <!-- Notes & Comments row -->331 <div class="notes-row">332 <div class="pill">333 <svg width="40" height="40" viewBox="0 0 24 24">334 <rect x="4" y="4" width="16" height="16" stroke="#666" stroke-width="2" fill="none"/>335 <line x1="7" y1="9" x2="17" y2="9" stroke="#666" stroke-width="2"/>336 <line x1="7" y1="13" x2="17" y2="13" stroke="#666" stroke-width="2"/>337 </svg>338 <span>Notes</span>339 </div>340 <div class="pill">341 <svg width="40" height="40" viewBox="0 0 24 24">342 <path d="M4 5h16v10H8l-4 4z" stroke="#666" stroke-width="2" fill="none"/>343 </svg>344 <span>Comments</span>345 </div>346 </div>347 348 <!-- Thumbnails -->349 <div class="thumbs">350 <div>351 <div class="thumb thumb-active">352 <div class="label">New car</div>353 </div>354 <div class="thumb-number">1</div>355 </div>356 <div>357 <div class="thumb"></div>358 <div class="thumb-number" style="color:#333;">2</div>359 </div>360 <div class="thumbs-right"></div>361 </div>362 363 <!-- Add button -->364 <div class="add-btn">+</div>365 366 <!-- Bottom format bar -->367 <div class="format-bar">368 <div class="fmt">B</div>369 <div class="fmt i">I</div>370 <div class="fmt u">U</div>371 <div class="fmt-a">A</div>372 373 <div class="list-icon" style="grid-template-columns: 18px 1fr; gap: 8px;">374 <div class="bullet"></div><div class="line"></div>375 <div class="bullet"></div><div class="line"></div>376 <div class="bullet"></div><div class="line"></div>377 </div>378 379 <div class="list-icon" style="grid-template-columns: 28px 1fr;">380 <div style="font-size:24px; color:#555; align-self:center;">1</div><div class="line"></div>381 <div style="font-size:24px; color:#555; align-self:center;">2</div><div class="line"></div>382 <div style="font-size:24px; color:#555; align-self:center;">3</div><div class="line"></div>383 </div>384 385 <div class="align-icon align-box" style="width:140px;">386 <div class="line" style="width:80%;"></div>387 <div class="line" style="width:60%;"></div>388 <div class="line" style="width:90%;"></div>389 </div>390 391 <div class="align-icon align-box" style="width:140px; justify-items:start;">392 <div class="line" style="width:80%;"></div>393 <div class="line" style="width:60%;"></div>394 <div class="line" style="width:90%;"></div>395 </div>396 397 <div class="align-icon align-box" style="width:140px; justify-items:center;">398 <div class="line" style="width:70%;"></div>399 <div class="line" style="width:50%;"></div>400 <div class="line" style="width:90%;"></div>401 </div>402 </div>403 404</div>405</body>406</html>