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 Viewer Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000; color: #fff; font-family: "Segoe UI", Arial, sans-serif;13 }14 15 /* Top system status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; width: 1080px; height: 110px;18 background: #121212; color: #fff;19 display: flex; align-items: center; justify-content: space-between;20 padding: 0 28px; box-sizing: border-box; font-size: 38px;21 }22 .status-left { display: flex; align-items: center; gap: 24px; }23 .status-right { display: flex; align-items: center; gap: 24px; }24 .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }25 26 /* App navigation bar */27 .nav-bar {28 position: absolute; top: 110px; left: 0; width: 1080px; height: 120px;29 background: #1d1d1d; border-bottom: 1px solid #2a2a2a;30 display: flex; align-items: center; justify-content: space-between;31 padding: 0 24px; box-sizing: border-box;32 }33 .nav-left { display: flex; align-items: center; gap: 28px; }34 .nav-title { font-size: 40px; font-weight: 500; color: #eaeaea; }35 .icon-btn svg { width: 56px; height: 56px; stroke: #eaeaea; fill: none; stroke-width: 3; }36 37 /* Slides area */38 .content {39 position: absolute; top: 250px; left: 0; width: 1080px; height: 1640px;40 overflow: hidden; /* simulate viewport */41 }42 43 .slide {44 width: 1028px; margin: 0 auto 24px auto; box-sizing: border-box;45 background: #4e3f2e; color: #fff;46 }47 48 /* Slide 1 styling */49 .slide.one { border: 6px solid #0a0a0a; }50 .strip {51 display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;52 height: 210px;53 }54 .tile {55 position: relative; height: 100%;56 }57 .tile.dark { background: #6d3f39; }58 .tile.mid { background: #77443d; }59 .tile.light { background: #c99a96; }60 .tile .bow {61 position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;62 }63 .tile .bow svg { width: 140px; height: 140px; stroke: #e7d1c6; stroke-width: 10; fill: none; }64 .tile .ribbon-v {65 position: absolute; top: 0; bottom: 0; left: 50%; width: 16px; background: #b2c6bd; transform: translateX(-50%);66 }67 .tile .ribbon-h {68 position: absolute; left: 0; right: 0; top: 50%; height: 16px; background: #d7c2b7; transform: translateY(-50%);69 }70 71 /* Image placeholder per spec */72 .img-placeholder {73 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;74 display: flex; align-items: center; justify-content: center;75 font-size: 32px; text-align: center;76 height: 100%;77 }78 79 .title-band {80 height: 250px; display: flex; align-items: center; padding-left: 56px;81 box-sizing: border-box;82 }83 .title-text { font-size: 64px; font-weight: 600; letter-spacing: 0.5px; }84 85 /* Divider between slides */86 .divider { width: 1080px; height: 22px; background: #000; }87 88 /* Slide 2 styling */89 .slide.two { border: 8px solid #cf5636; height: 860px; display: grid; grid-template-columns: 1fr 330px; }90 .two .left {91 background: #4e3f2e;92 }93 .two .right { display: grid; grid-template-rows: 1fr 1fr; }94 .pattern-box { position: relative; background: #6d3f39; }95 .pattern-box.light { background: #c99a96; }96 .pattern-box .bow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }97 .pattern-box .bow svg { width: 160px; height: 160px; stroke: #e7d1c6; stroke-width: 10; fill: none; }98 .pattern-box .ribbon-v, .pattern-box .ribbon-h { background: #d9c9bf; }99 .pattern-box .ribbon-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 18px; transform: translateX(-50%); }100 .pattern-box .ribbon-h { position: absolute; top: 50%; left: 0; right: 0; height: 18px; transform: translateY(-50%); }101 .dot-ring {102 position: absolute; left: 50%; top: 50%; width: 220px; height: 220px;103 transform: translate(-50%, -50%); border-radius: 50%;104 border: 2px dotted rgba(255,255,255,0.35);105 }106 107 /* Bottom bar */108 .bottom-bar {109 position: absolute; bottom: 0; left: 0; width: 1080px; height: 180px;110 background: #1d1d1d; border-top: 1px solid #2a2a2a;111 display: flex; align-items: center; justify-content: space-around;112 }113 .action {114 width: 200px; text-align: center; color: #cfcfcf; font-size: 30px;115 }116 .action svg { width: 64px; height: 64px; stroke: #cfcfcf; fill: none; stroke-width: 4; margin-bottom: 14px; }117 118 /* Gesture handle */119 .handle {120 position: absolute; bottom: 12px; left: 50%;121 width: 180px; height: 10px; background: #fff; border-radius: 6px;122 transform: translateX(-50%); opacity: 0.85;123 }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status bar -->130 <div class="status-bar">131 <div class="status-left">132 <div>12:29</div>133 <div class="status-icon">134 <!-- Moon -->135 <svg viewBox="0 0 40 40"><path d="M26 4a14 14 0 1 0 10 22A16 16 0 0 1 26 4z" fill="#fff" stroke="none"/></svg>136 </div>137 <div class="status-icon">138 <!-- Do Not Disturb (circle) -->139 <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="12" stroke="#fff"/><line x1="10" y1="20" x2="30" y2="20" stroke="#fff"/></svg>140 </div>141 <div class="status-icon">142 <!-- Cast -->143 <svg viewBox="0 0 40 40"><rect x="6" y="8" width="28" height="20" rx="3" stroke="#fff"/><path d="M6 32c6 0 10 4 10 4" stroke="#fff"/></svg>144 </div>145 <div class="status-icon">146 <!-- Dot -->147 <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="4" fill="#fff"/></svg>148 </div>149 </div>150 <div class="status-right">151 <div class="status-icon">152 <!-- Signal -->153 <svg viewBox="0 0 40 40"><path d="M6 28h4M6 24h8M6 20h12M6 16h16" stroke="#fff"/></svg>154 </div>155 <div class="status-icon">156 <!-- Battery -->157 <svg viewBox="0 0 40 40"><rect x="8" y="10" width="24" height="20" rx="3" stroke="#fff"/><rect x="32" y="16" width="3" height="8" fill="#fff" stroke="none"/></svg>158 </div>159 </div>160 </div>161 162 <!-- Navigation bar -->163 <div class="nav-bar">164 <div class="nav-left">165 <div class="icon-btn">166 <!-- Back arrow -->167 <svg viewBox="0 0 64 64"><polyline points="38,14 20,32 38,50" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>168 </div>169 <div class="nav-title">Presentation.pptx - Saved</div>170 </div>171 <div class="icon-btn">172 <!-- More (vertical dots) -->173 <svg viewBox="0 0 64 64">174 <circle cx="32" cy="16" r="4" fill="#eaeaea" stroke="none"/>175 <circle cx="32" cy="32" r="4" fill="#eaeaea" stroke="none"/>176 <circle cx="32" cy="48" r="4" fill="#eaeaea" stroke="none"/>177 </svg>178 </div>179 </div>180 181 <!-- Main content -->182 <div class="content">183 184 <!-- Slide 1 -->185 <div class="slide one">186 <div class="strip">187 <div class="tile dark">188 <div class="ribbon-h"></div>189 <div class="ribbon-v"></div>190 <div class="bow">191 <svg viewBox="0 0 140 140">192 <path d="M70 70c-20-10-30-30-50-30 20 0 30 20 50 30z" />193 <path d="M70 70c20-10 30-30 50-30-20 0-30 20-50 30z" />194 <circle cx="70" cy="70" r="8" />195 </svg>196 </div>197 </div>198 <div class="tile">199 <div class="img-placeholder">[IMG: Hiking Gear Flatlay]</div>200 </div>201 <div class="tile mid">202 <div class="ribbon-v" style="background:#a8c0b4; width:14px;"></div>203 <div class="bow">204 <svg viewBox="0 0 140 140">205 <path d="M70 70c-18-8-28-26-44-26 18 0 26 18 44 26z" />206 <path d="M70 70c18-8 28-26 44-26-18 0-26 18-44 26z" />207 <circle cx="70" cy="70" r="8" />208 </svg>209 </div>210 </div>211 <div class="tile light">212 <div class="dot-ring"></div>213 </div>214 </div>215 <div class="title-band">216 <div class="title-text">Importance of Hiking</div>217 </div>218 </div>219 220 <div class="divider"></div>221 222 <!-- Slide 2 -->223 <div class="slide two">224 <div class="left"></div>225 <div class="right">226 <div class="pattern-box">227 <div class="ribbon-h"></div>228 <div class="ribbon-v"></div>229 <div class="bow">230 <svg viewBox="0 0 160 160">231 <path d="M80 80c-24-12-36-34-60-34 24 0 36 22 60 34z" />232 <path d="M80 80c24-12 36-34 60-34-24 0-36 22-60 34z" />233 <circle cx="80" cy="80" r="9" />234 </svg>235 </div>236 </div>237 <div class="pattern-box light">238 <div class="dot-ring"></div>239 </div>240 </div>241 </div>242 243 <!-- Spacer representing empty area -->244 <div style="width:1080px; height: 540px; background:#000;"></div>245 </div>246 247 <!-- Bottom action bar -->248 <div class="bottom-bar">249 <div class="action">250 <svg viewBox="0 0 64 64">251 <polygon points="24,16 48,32 24,48" fill="none" stroke-linejoin="round"/>252 <rect x="10" y="14" width="8" height="36" rx="2" />253 </svg>254 <div>Present</div>255 </div>256 <div class="action">257 <svg viewBox="0 0 64 64">258 <rect x="12" y="12" width="40" height="40" rx="4"/>259 <line x1="18" y1="24" x2="46" y2="24"/>260 <line x1="18" y1="32" x2="38" y2="32"/>261 <line x1="18" y1="40" x2="34" y2="40"/>262 </svg>263 <div>Notes</div>264 </div>265 <div class="action">266 <svg viewBox="0 0 64 64">267 <path d="M18 46l28-28" />268 <path d="M18 46l2-12 10 2" />269 <rect x="12" y="12" width="40" height="40" rx="8" style="opacity:0.2; stroke:#cfcfcf"/>270 </svg>271 <div>Edit</div>272 </div>273 <div class="action">274 <svg viewBox="0 0 64 64">275 <circle cx="28" cy="28" r="16"/>276 <line x1="42" y1="42" x2="54" y2="54"/>277 </svg>278 <div>Find</div>279 </div>280 <div class="action">281 <svg viewBox="0 0 64 64">282 <circle cx="20" cy="42" r="6"/>283 <circle cx="44" cy="12" r="6"/>284 <circle cx="52" cy="44" r="6"/>285 <line x1="24" y1="38" x2="40" y2="18"/>286 <line x1="26" y1="38" x2="47" y2="41"/>287 </svg>288 <div>Share</div>289 </div>290 <div class="handle"></div>291 </div>292 293</div>294</body>295</html>