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>Presentation - Saved</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Segoe UI", Roboto, Arial, sans-serif;13 }14 #render-target {15 position: relative;16 width: 1080px;17 height: 2400px;18 overflow: hidden;19 background: #121212;20 color: #ECECEC;21 }22 23 /* Status bar */24 .status-bar {25 height: 110px;26 background: #1B1B1B;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 0 32px;31 box-sizing: border-box;32 font-size: 36px;33 color: #FFFFFF;34 }35 .status-left,36 .status-right {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .status-dot {42 width: 12px;43 height: 12px;44 background: #FFFFFF;45 border-radius: 50%;46 opacity: 0.9;47 }48 .status-icon svg {49 display: block;50 width: 48px;51 height: 48px;52 fill: none;53 stroke: #FFFFFF;54 stroke-width: 3.5;55 }56 57 /* App bar */58 .app-bar {59 height: 150px;60 background: #212121;61 display: flex;62 align-items: center;63 padding: 0 28px;64 box-sizing: border-box;65 border-bottom: 1px solid #2A2A2A;66 }67 .app-bar .title {68 font-size: 44px;69 font-weight: 500;70 margin-left: 20px;71 }72 .spacer {73 flex: 1;74 }75 .icon-btn {76 width: 72px;77 height: 72px;78 display: grid;79 place-items: center;80 }81 .icon-btn svg {82 width: 48px;83 height: 48px;84 fill: none;85 stroke: #EDEDED;86 stroke-width: 3.5;87 }88 89 /* Slides area */90 .slides {91 box-sizing: border-box;92 }93 .slide {94 width: 100%;95 box-sizing: border-box;96 background: #5A4B37; /* deep brown */97 border: 6px solid #000000;98 }99 100 /* Slide sizes (sum to fit remaining space with bottom bar) */101 #slide-1 { height: 620px; }102 #slide-2 { height: 780px; border-top: 8px solid #C14E2F; border-bottom: 8px solid #C14E2F; }103 #slide-3 { height: 540px; }104 105 /* Slide 1 content */106 .slide1-top {107 height: 185px;108 display: grid;109 grid-template-columns: 1fr 1.6fr 1fr 1fr;110 }111 .tile {112 position: relative;113 }114 .maroon { background: #7B4A49; }115 .pink { background: #CFA6A2; }116 .center-photo {117 background: #E0E0E0;118 border-left: 1px solid #BDBDBD;119 border-right: 1px solid #BDBDBD;120 display: flex;121 align-items: center;122 justify-content: center;123 color: #757575;124 font-size: 34px;125 text-align: center;126 padding: 0 18px;127 }128 .bow {129 position: absolute;130 inset: 0;131 display: grid;132 place-items: center;133 }134 .bow svg {135 width: 160px;136 height: 80px;137 stroke: #E8DCCF;138 stroke-width: 8;139 fill: none;140 opacity: 0.9;141 }142 143 .slide1-title {144 height: calc(100% - 185px);145 display: flex;146 align-items: center;147 justify-content: center;148 padding: 0 40px;149 text-align: center;150 }151 .slide1-title h1 {152 margin: 0;153 font-size: 76px;154 font-weight: 500;155 color: #FFFFFF;156 font-family: "Georgia", "Times New Roman", serif;157 letter-spacing: 0.5px;158 }159 160 /* Slide 2 layout */161 .slide2-wrap {162 display: grid;163 grid-template-columns: 1.1fr 0.6fr;164 height: 100%;165 }166 .slide2-left {167 padding: 48px 56px 24px 48px;168 box-sizing: border-box;169 }170 .slide2-left p {171 margin: 0 0 32px 0;172 font-size: 48px;173 line-height: 1.2;174 color: #FFFFFF;175 font-family: "Georgia", "Times New Roman", serif;176 }177 .poster {178 width: 360px;179 height: 380px;180 background: #E0E0E0;181 border: 1px solid #BDBDBD;182 color: #757575;183 display: flex;184 align-items: center;185 justify-content: center;186 font-size: 30px;187 text-align: center;188 margin-left: 52px;189 }190 .slide2-right {191 position: relative;192 display: grid;193 grid-template-rows: 1fr 1fr;194 }195 .ribbon-top { background: #7B4A49; position: relative; }196 .ribbon-bottom { background: #CFA6A2; position: relative; }197 .ribbon-top .bow,198 .ribbon-bottom .sprinkles { position: absolute; inset: 0; display: grid; place-items: center; }199 .sprinkles {200 opacity: 0.5;201 }202 .sprinkles svg {203 width: 260px;204 height: 260px;205 fill: none;206 stroke: #E8DCCF;207 stroke-width: 4;208 opacity: 0.5;209 }210 211 /* Slide 3 is a large brown block similar to screenshot */212 #slide-3 { background: #5A4B37; }213 214 /* Bottom app bar */215 .bottom-bar {216 position: absolute;217 left: 0;218 right: 0;219 bottom: 0;220 height: 220px;221 background: #1E1E1E;222 border-top: 1px solid #2A2A2A;223 display: flex;224 align-items: center;225 justify-content: space-around;226 box-sizing: border-box;227 padding-bottom: 24px;228 }229 .bottom-item {230 width: 160px;231 display: grid;232 place-items: center;233 gap: 10px;234 color: #D9D9D9;235 font-size: 30px;236 }237 .bottom-item svg {238 width: 58px;239 height: 58px;240 stroke: #D9D9D9;241 fill: none;242 stroke-width: 3.5;243 }244 245 /* Home indicator pill */246 .home-pill {247 position: absolute;248 bottom: 12px;249 left: 50%;250 transform: translateX(-50%);251 width: 280px;252 height: 10px;253 background: #FFFFFF;254 border-radius: 8px;255 opacity: 0.9;256 }257</style>258</head>259<body>260<div id="render-target">261 262 <!-- Status bar -->263 <div class="status-bar">264 <div class="status-left">265 <div>1:03</div>266 <div class="status-dot"></div>267 <div class="status-dot"></div>268 <div class="status-icon">269 <svg viewBox="0 0 24 24" aria-hidden="true">270 <path d="M2 18h2c3-5 7-8 12-10v-2C10 8 6 12 2 18z"></path>271 </svg>272 </div>273 <div class="status-icon">274 <svg viewBox="0 0 24 24" aria-hidden="true">275 <circle cx="6" cy="12" r="2"></circle>276 <circle cx="12" cy="12" r="2"></circle>277 <circle cx="18" cy="12" r="2"></circle>278 </svg>279 </div>280 </div>281 <div class="status-right">282 <div class="status-icon">283 <svg viewBox="0 0 24 24" aria-hidden="true">284 <path d="M2 18c4-5 9-8 15-8 2 0 3 0 5 1v7H2z"></path>285 </svg>286 </div>287 <div class="status-icon">288 <svg viewBox="0 0 24 24" aria-hidden="true">289 <rect x="3" y="6" width="16" height="12" rx="2"></rect>290 <path d="M19 10h2v4h-2z"></path>291 </svg>292 </div>293 </div>294 </div>295 296 <!-- App bar -->297 <div class="app-bar">298 <div class="icon-btn" aria-label="Back">299 <svg viewBox="0 0 24 24">300 <path d="M15 6L9 12l6 6"></path>301 </svg>302 </div>303 <div class="title">Presentation - Saved</div>304 <div class="spacer"></div>305 <div class="icon-btn" aria-label="More">306 <svg viewBox="0 0 24 24">307 <circle cx="12" cy="5" r="2"></circle>308 <circle cx="12" cy="12" r="2"></circle>309 <circle cx="12" cy="19" r="2"></circle>310 </svg>311 </div>312 </div>313 314 <!-- Slides -->315 <div class="slides">316 317 <!-- Slide 1 -->318 <div class="slide" id="slide-1">319 <div class="slide1-top">320 <div class="tile maroon">321 <div class="bow">322 <svg viewBox="0 0 120 60">323 <path d="M10,30 C10,10 40,10 50,30 C40,50 10,50 10,30 Z"></path>324 <path d="M110,30 C110,10 80,10 70,30 C80,50 110,50 110,30 Z"></path>325 <path d="M60 20 v20"></path>326 </svg>327 </div>328 </div>329 <div class="tile center-photo">[IMG: Hiking Gear Flat Lay]</div>330 <div class="tile maroon">331 <div class="bow">332 <svg viewBox="0 0 120 60">333 <path d="M10,30 C10,10 40,10 50,30 C40,50 10,50 10,30 Z"></path>334 <path d="M110,30 C110,10 80,10 70,30 C80,50 110,50 110,30 Z"></path>335 <path d="M60 20 v20"></path>336 </svg>337 </div>338 </div>339 <div class="tile pink"></div>340 </div>341 <div class="slide1-title">342 <h1>Importance of Hiking</h1>343 </div>344 </div>345 346 <!-- Slide 2 -->347 <div class="slide" id="slide-2">348 <div class="slide2-wrap">349 <div class="slide2-left">350 <p>Regular nature hikes strengthen our heart, lungs, and muscles, as well as our mind</p>351 <div class="poster">[IMG: Poster - Whole Body Benefits of Hiking]</div>352 </div>353 <div class="slide2-right">354 <div class="ribbon-top">355 <div class="bow">356 <svg viewBox="0 0 160 80">357 <path d="M20,40 C20,15 55,15 70,40 C55,65 20,65 20,40 Z"></path>358 <path d="M140,40 C140,15 105,15 90,40 C105,65 140,65 140,40 Z"></path>359 <path d="M80 28 v24"></path>360 </svg>361 </div>362 </div>363 <div class="ribbon-bottom">364 <div class="sprinkles">365 <svg viewBox="0 0 200 200">366 <path d="M30 30 l10 6M60 40 l10 6M90 32 l10 6M120 36 l10 6M150 50 l10 6M50 80 l10 6M80 90 l10 6M110 100 l10 6M140 92 l10 6M70 130 l10 6M100 140 l10 6M130 150 l10 6M160 136 l10 6" />367 </svg>368 </div>369 </div>370 </div>371 </div>372 </div>373 374 <!-- Slide 3 -->375 <div class="slide" id="slide-3"></div>376 377 </div>378 379 <!-- Bottom app bar -->380 <div class="bottom-bar">381 <div class="bottom-item">382 <svg viewBox="0 0 24 24" aria-hidden="true">383 <rect x="3" y="5" width="18" height="12" rx="2"></rect>384 <path d="M12 17v3"></path>385 <path d="M9 20h6"></path>386 </svg>387 <div>Present</div>388 </div>389 <div class="bottom-item">390 <svg viewBox="0 0 24 24" aria-hidden="true">391 <rect x="4" y="4" width="16" height="16" rx="2"></rect>392 <path d="M7 9h10M7 13h10M7 17h6"></path>393 </svg>394 <div>Notes</div>395 </div>396 <div class="bottom-item">397 <svg viewBox="0 0 24 24" aria-hidden="true">398 <path d="M5 20l5-2 9-9a2 2 0 0 0-3-3l-9 9-2 5z"></path>399 <path d="M14 6l4 4"></path>400 </svg>401 <div>Edit</div>402 </div>403 <div class="bottom-item">404 <svg viewBox="0 0 24 24" aria-hidden="true">405 <circle cx="11" cy="11" r="6"></circle>406 <path d="M16 16l5 5"></path>407 </svg>408 <div>Find</div>409 </div>410 <div class="bottom-item">411 <svg viewBox="0 0 24 24" aria-hidden="true">412 <path d="M4 12c5-2 11-2 16 0"></path>413 <path d="M12 5v14"></path>414 <circle cx="12" cy="12" r="9"></circle>415 </svg>416 <div>Share</div>417 </div>418 </div>419 420 <div class="home-pill"></div>421</div>422</body>423</html>