GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Presentation - Saved UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 box-sizing: border-box;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 color: #e0e0e0;21 background: #0f0f0f;22 padding: 0 40px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 box-sizing: border-box;27 }28 .status-left, .status-right { display: flex; align-items: center; gap: 28px; }29 .time { font-size: 42px; font-weight: 600; letter-spacing: 1px; }30 .icon-small svg { width: 36px; height: 36px; opacity: 0.85; }31 32 /* App header */33 .app-header {34 height: 220px;35 color: #b87343;36 padding: 20px 36px 0 36px;37 box-sizing: border-box;38 }39 .title-row {40 display: flex;41 align-items: center;42 justify-content: center;43 height: 90px;44 }45 .title {46 font-size: 46px;47 font-weight: 600;48 color: #b87343;49 }50 .toolbar {51 margin-top: 18px;52 display: flex;53 align-items: center;54 justify-content: space-around;55 padding: 0 60px;56 }57 .tool-icon svg {58 width: 64px;59 height: 64px;60 stroke: #8a8a8a;61 fill: none;62 stroke-width: 4;63 opacity: 0.65;64 }65 66 /* Spacer above slide */67 .preview-spacer {68 height: 350px;69 background: #0a0a0a;70 }71 72 /* Slide preview area */73 .slide-preview {74 height: 650px;75 display: flex;76 align-items: center;77 justify-content: center;78 background: #0a0a0a;79 padding-bottom: 10px;80 }81 .slide-box {82 width: 1000px;83 height: 580px;84 background: #d9d9d9;85 border: 1px solid #bdbdbd;86 position: relative;87 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);88 }89 .slide-red {90 position: absolute;91 left: 80px;92 top: 160px;93 width: 360px;94 background: #9e2c22;95 color: #f0e0e0;96 padding: 40px;97 border: 2px dashed rgba(255,255,255,0.25);98 font-size: 40px;99 line-height: 1.25;100 box-sizing: border-box;101 }102 .slide-red::after {103 content: "";104 position: absolute;105 bottom: -22px;106 left: 80px;107 width: 0; height: 0;108 border-left: 18px solid transparent;109 border-right: 18px solid transparent;110 border-top: 22px solid #9e2c22;111 }112 .slide-img {113 position: absolute;114 right: 70px;115 top: 160px;116 width: 470px;117 height: 300px;118 background: #E0E0E0;119 border: 1px solid #BDBDBD;120 display: flex;121 align-items: center;122 justify-content: center;123 color: #757575;124 font-size: 30px;125 }126 127 /* Handle bar above sheet */128 .handle {129 height: 40px;130 display: flex;131 align-items: center;132 justify-content: center;133 background: #0f0f0f;134 }135 .handle .pill {136 width: 160px;137 height: 12px;138 background: #777;139 border-radius: 8px;140 opacity: 0.45;141 }142 143 /* Bottom sheet */144 .sheet {145 height: 880px;146 background: #1f1f1f;147 color: #e8e8e8;148 padding: 20px 30px;149 box-sizing: border-box;150 }151 .list {152 margin-top: 10px;153 }154 .item {155 display: flex;156 align-items: center;157 height: 110px;158 border-bottom: 1px solid rgba(255,255,255,0.1);159 padding: 0 10px;160 box-sizing: border-box;161 }162 .item .ico {163 width: 90px;164 height: 90px;165 display: flex;166 align-items: center;167 justify-content: center;168 margin-right: 30px;169 }170 .item .label {171 font-size: 46px;172 letter-spacing: 0.2px;173 flex: 1;174 }175 .chev {176 width: 70px;177 display: flex;178 align-items: center;179 justify-content: center;180 }181 .divider {182 width: 2px;183 height: 60px;184 background: rgba(255,255,255,0.2);185 margin-right: 18px;186 }187 188 /* Bottom gesture nav bar */189 .gesture {190 position: absolute;191 left: 0;192 right: 0;193 bottom: 20px;194 height: 80px;195 display: flex;196 align-items: center;197 justify-content: center;198 }199 .gesture .pill {200 width: 220px; height: 10px; background: #e0e0e0; border-radius: 8px; opacity: 0.9;201 }202</style>203</head>204<body>205<div id="render-target">206 207 <!-- Status bar -->208 <div class="status-bar">209 <div class="status-left">210 <div class="time">11:06</div>211 <div class="icon-small">212 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#d0d0d0" fill="none" stroke-width="2"/></svg>213 </div>214 <div class="icon-small">215 <svg viewBox="0 0 24 24">216 <circle cx="12" cy="12" r="5" fill="#d0d0d0"/>217 <circle cx="12" cy="12" r="9" stroke="#d0d0d0" fill="none" stroke-width="2"/>218 </svg>219 </div>220 <div class="icon-small">221 <svg viewBox="0 0 24 24">222 <rect x="6" y="3" width="12" height="14" stroke="#d0d0d0" fill="none" stroke-width="2"/>223 <rect x="9" y="7" width="6" height="3" fill="#d0d0d0"/>224 </svg>225 </div>226 <div class="icon-small">227 <svg viewBox="0 0 24 24">228 <path d="M15 7 L9 12 L15 17" stroke="#d0d0d0" stroke-width="2" fill="none" />229 </svg>230 </div>231 <div class="icon-small">232 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#d0d0d0"/></svg>233 </div>234 </div>235 <div class="status-right">236 <div class="icon-small">237 <svg viewBox="0 0 24 24">238 <path d="M2 18 H6 V14 H2 ZM8 18 H12 V10 H8 ZM14 18 H18 V6 H14 Z" fill="#e0e0e0"/>239 </svg>240 </div>241 <div class="icon-small">242 <svg viewBox="0 0 24 24">243 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#e0e0e0" fill="none" stroke-width="2"/>244 <rect x="5" y="8" width="12" height="8" fill="#e0e0e0"/>245 </svg>246 </div>247 </div>248 </div>249 250 <!-- App header with title and toolbar -->251 <div class="app-header">252 <div class="title-row">253 <div class="title">Presentation - Saved</div>254 </div>255 <div class="toolbar">256 <div class="tool-icon">257 <svg viewBox="0 0 24 24"><path d="M4 12 L9 17 L20 6" /></svg>258 </div>259 <div class="tool-icon">260 <svg viewBox="0 0 24 24"><path d="M3 21 L9 19 L19 9 L15 5 L5 15 Z" /></svg>261 </div>262 <div class="tool-icon">263 <svg viewBox="0 0 24 24">264 <path d="M5 13a7 7 0 0114 0" />265 <path d="M6 13v5h12v-5" />266 </svg>267 </div>268 <div class="tool-icon">269 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M15 15 L21 21"/></svg>270 </div>271 <div class="tool-icon">272 <svg viewBox="0 0 24 24">273 <rect x="4" y="6" width="16" height="10" rx="1"/>274 <path d="M12 16 V20 M8 20 H16"/>275 </svg>276 </div>277 <div class="tool-icon">278 <svg viewBox="0 0 24 24">279 <path d="M15 7 L9 12 L15 17" />280 <path d="M10 7 H6" />281 </svg>282 </div>283 <div class="tool-icon">284 <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>285 </div>286 </div>287 </div>288 289 <!-- Spacer -->290 <div class="preview-spacer"></div>291 292 <!-- Slide preview -->293 <div class="slide-preview">294 <div class="slide-box">295 <div class="slide-red">Double tap to<br>add title</div>296 <div class="slide-img">[IMG: Workspace illustration]</div>297 </div>298 </div>299 300 <!-- Handle -->301 <div class="handle"><div class="pill"></div></div>302 303 <!-- Bottom sheet menu -->304 <div class="sheet">305 <div class="list">306 <div class="item">307 <div class="ico">308 <svg viewBox="0 0 64 64">309 <circle cx="32" cy="32" r="28" fill="none" stroke="#56c271" stroke-width="4"/>310 <path d="M32 18 V46 M18 32 H46" stroke="#56c271" stroke-width="6" />311 </svg>312 </div>313 <div class="label">New Slide</div>314 </div>315 316 <div class="item">317 <div class="ico">318 <svg viewBox="0 0 64 64">319 <rect x="12" y="8" width="40" height="48" rx="4" ry="4" stroke="#cfcfcf" fill="none" stroke-width="4"/>320 <path d="M18 20 H46 M18 28 H40 M18 36 H42" stroke="#cfcfcf" stroke-width="4"/>321 </svg>322 </div>323 <div class="label">Notes</div>324 </div>325 326 <div class="item">327 <div class="ico">328 <svg viewBox="0 0 64 64">329 <rect x="8" y="8" width="48" height="48" rx="8" fill="none" stroke="#6fb5ff" stroke-width="4"/>330 <path d="M32 18 C26 18 24 22 24 28 V36 C24 40 26 46 32 46 C38 46 40 40 40 36 V28 C40 22 38 18 32 18 Z" fill="none" stroke="#6fb5ff" stroke-width="4"/>331 </svg>332 </div>333 <div class="label">Rehearse with Coach (Preview)</div>334 <div class="divider"></div>335 <div class="chev">336 <svg viewBox="0 0 24 24"><path d="M8 5 L16 12 L8 19" stroke="#dcdcdc" stroke-width="3" fill="none"/></svg>337 </div>338 </div>339 340 <div class="item">341 <div class="ico">342 <svg viewBox="0 0 64 64">343 <circle cx="20" cy="44" r="8" stroke="#cfcfcf" fill="none" stroke-width="4"/>344 <circle cx="44" cy="20" r="8" stroke="#cfcfcf" fill="none" stroke-width="4"/>345 <path d="M26 38 L38 26" stroke="#cfcfcf" stroke-width="4"/>346 </svg>347 </div>348 <div class="label">Share</div>349 </div>350 351 <div class="item">352 <div class="ico">353 <svg viewBox="0 0 64 64">354 <rect x="14" y="8" width="36" height="48" rx="3" stroke="#ff6b6b" fill="none" stroke-width="4"/>355 <path d="M14 20 H50" stroke="#ff6b6b" stroke-width="4"/>356 <rect x="20" y="36" width="24" height="12" fill="#ff6b6b"/>357 <text x="32" y="45" font-size="10" text-anchor="middle" fill="#1f1f1f">PDF</text>358 </svg>359 </div>360 <div class="label">Share as PDF</div>361 </div>362 363 <div class="item">364 <div class="ico">365 <svg viewBox="0 0 64 64">366 <rect x="10" y="14" width="44" height="36" rx="6" stroke="#b57adb" fill="none" stroke-width="4"/>367 <rect x="20" y="20" width="12" height="16" fill="#b57adb"/>368 <rect x="34" y="42" width="14" height="6" fill="#b57adb"/>369 </svg>370 </div>371 <div class="label">Save</div>372 </div>373 374 <div class="item">375 <div class="ico">376 <svg viewBox="0 0 64 64">377 <rect x="12" y="8" width="40" height="48" rx="4" stroke="#cfcfcf" fill="none" stroke-width="4"/>378 <path d="M22 24 H42 M22 34 H42" stroke="#cfcfcf" stroke-width="4"/>379 <path d="M22 44 L30 44 L34 40" stroke="#cfcfcf" stroke-width="4"/>380 </svg>381 </div>382 <div class="label">Save As</div>383 </div>384 </div>385 </div>386 387 <!-- Gesture pill -->388 <div class="gesture"><div class="pill"></div></div>389 390</div>391</body>392</html>