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>Importance of Hiking - Mock UI</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#0f0f10; color:#e5e5e5; font-family: "Segoe UI", Roboto, Arial, sans-serif;12 }13 14 /* Status bar */15 .status-bar{16 position:absolute; top:0; left:0; width:100%; height:100px;17 background:#0a0a0a; color:#fff; display:flex; align-items:center; padding:0 36px;18 box-sizing:border-box; font-weight:600; letter-spacing:0.5px; font-size:36px;19 }20 .status-right{ margin-left:auto; display:flex; gap:28px; align-items:center; }21 .sb-icon{ width:40px; height:40px; opacity:0.9; }22 23 /* App bar */24 .app-bar{25 position:absolute; top:100px; left:0; width:100%; height:140px;26 background:#1a1a1d; display:flex; align-items:center; padding:0 28px; box-sizing:border-box;27 }28 .back{29 width:64px; height:64px; display:flex; align-items:center; justify-content:center; margin-right:12px;30 }31 .title{32 font-size:48px; color:#c8c8c8; opacity:0.9;33 }34 .app-actions{ margin-left:auto; display:flex; align-items:center; gap:18px; }35 .cloud, .menu{36 width:64px; height:64px; display:flex; align-items:center; justify-content:center;37 }38 .menu{ background:#505054; border-radius:8px; width:88px; }39 40 /* Slides area */41 .slides{42 position:absolute; top:240px; left:0; width:100%; padding-bottom:24px;43 }44 .slide{45 width:100%; height:560px; background:#362a22; position:relative; box-sizing:border-box;46 border-top:6px solid #000; border-bottom:6px solid #000;47 }48 .ribbon-row{49 position:absolute; top:0; left:0; width:100%; height:160px; display:grid; grid-template-columns:1fr 1fr 1fr 1fr;50 }51 .panel{ position:relative; }52 .panel.p1{ background:#5a3a36; }53 .panel.p2{ background:#5a3a36; display:flex; align-items:center; justify-content:center; }54 .panel.p3{ background:#73423d; }55 .panel.p4{ background:#8b6a66; }56 .bow{57 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:160px; height:80px; opacity:0.55;58 }59 .bow::before, .bow::after{60 content:""; position:absolute; border:6px solid #bfbfbf; border-radius:50%;61 }62 .bow::before{ width:70px; height:70px; left:0; top:5px; }63 .bow::after{ width:70px; height:70px; right:0; top:5px; }64 .center-line{ position:absolute; left:50%; top:0; width:6px; height:100%; background:#bfbfbf; opacity:0.4; }65 66 .slide-title{67 position:absolute; top:200px; left:0; width:100%; text-align:center; font-size:72px; color:#cfcfcf;68 letter-spacing:0.5px;69 }70 71 /* Second slide content */72 .slide2-wrap{ display:flex; height:100%; }73 .slide2-left{74 flex:1.1; padding:56px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start; gap:40px;75 }76 .slide2-left .desc{77 font-size:44px; line-height:1.3; color:#cfcfcf; opacity:0.95;78 }79 .img-ph{80 width:360px; height:360px; background:#E0E0E0; border:1px solid #BDBDBD;81 color:#757575; display:flex; align-items:center; justify-content:center; font-size:28px; text-align:center; margin-left:40px;82 }83 .slide2-right{84 width:320px; background:#5a3a36; position:relative;85 }86 .slide2-right .bow{ opacity:0.6; }87 .slide2-right .center-line{ left:50%; background:#c9c9c9; opacity:0.5; }88 89 /* Bottom sheet */90 .sheet{91 position:absolute; left:0; right:0; bottom:0; height:980px; background:#242426; border-top-left-radius:28px; border-top-right-radius:28px;92 box-shadow:0 -10px 30px rgba(0,0,0,0.6); padding:18px 0 40px 0;93 }94 .grabber{95 width:160px; height:8px; background:#5a5a5e; border-radius:4px; margin:10px auto 18px auto; opacity:0.7;96 }97 .sheet-list{ padding:10px 28px; box-sizing:border-box; }98 .item{99 height:120px; display:flex; align-items:center; gap:28px; border-bottom:1px solid rgba(255,255,255,0.06);100 }101 .icon{102 width:64px; height:64px; display:flex; align-items:center; justify-content:center;103 }104 .item span{ font-size:44px; color:#f0f0f0; }105 .item .chev{ margin-left:auto; opacity:0.7; }106 .muted span, .muted svg{ color:#8a8a8f; fill:#8a8a8f; opacity:0.55; }107 .purple svg{ fill:#b56ad9; }108 .pdf svg rect{ fill:#cf3d3d; }109 .sheet-bottom-pad{ height:40px; }110 111 /* Home indicator */112 .home-indicator{113 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);114 width:240px; height:10px; background:#bdbdc2; border-radius:5px; opacity:0.75;115 }116 117 /* Utility SVG defaults */118 svg{ width:100%; height:100%; }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status Bar -->125 <div class="status-bar">126 <div>8:43</div>127 <div class="status-right">128 <div class="sb-icon">129 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="#d9d9d9"/></svg>130 </div>131 <div class="sb-icon">132 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#d9d9d9"/></svg>133 </div>134 <div class="sb-icon">135 <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#d9d9d9" stroke-width="2"/></svg>136 </div>137 <div class="sb-icon">138 <svg viewBox="0 0 24 24"><path d="M3 18h18M6 14h12M9 10h6M11 6h2" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg>139 </div>140 <div class="sb-icon">141 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#ffffff" fill="none" stroke-width="2"/><path d="M22 10v4" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg>142 </div>143 </div>144 </div>145 146 <!-- App Bar -->147 <div class="app-bar">148 <div class="back">149 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>150 </div>151 <div class="title">Importance of hiking</div>152 <div class="app-actions">153 <div class="cloud">154 <svg viewBox="0 0 24 24">155 <path d="M7 18a4 4 0 010-8 5 5 0 019.5-1.5A4.5 4.5 0 0116 18H7z" fill="none" stroke="#cfcfcf" stroke-width="2"/>156 <path d="M12 10v6m0 0l-2-2m2 2l2-2" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>157 </svg>158 </div>159 <div class="menu">160 <svg viewBox="0 0 24 24">161 <circle cx="12" cy="5" r="2" fill="#e5e5e5"/>162 <circle cx="12" cy="12" r="2" fill="#e5e5e5"/>163 <circle cx="12" cy="19" r="2" fill="#e5e5e5"/>164 </svg>165 </div>166 </div>167 </div>168 169 <!-- Slides Preview -->170 <div class="slides">171 <!-- Slide 1 -->172 <div class="slide">173 <div class="ribbon-row">174 <div class="panel p1">175 <div class="bow"></div>176 </div>177 <div class="panel p2">178 <div class="img-ph">[IMG: Hiking Gear Flatlay]</div>179 </div>180 <div class="panel p3">181 <div class="center-line"></div>182 <div class="bow"></div>183 </div>184 <div class="panel p4"></div>185 </div>186 <div class="slide-title">Importance of Hiking</div>187 </div>188 189 <!-- Slide 2 -->190 <div class="slide">191 <div class="slide2-wrap">192 <div class="slide2-left">193 <div class="desc">194 Regular nature hikes strengthen our heart, lungs, and muscles, as well as our mind195 </div>196 <div class="img-ph">[IMG: Hiking Benefits Poster]</div>197 </div>198 <div class="slide2-right">199 <div class="center-line"></div>200 <div class="bow"></div>201 </div>202 </div>203 </div>204 </div>205 206 <!-- Bottom Sheet -->207 <div class="sheet">208 <div class="grabber"></div>209 <div class="sheet-list">210 211 <div class="item pdf">212 <div class="icon">213 <svg viewBox="0 0 24 24">214 <rect x="4" y="3" width="14" height="18" rx="2" ry="2"/>215 <path d="M6 8h10" stroke="#ffffff" stroke-width="2"/>216 <text x="7" y="17" font-size="7" fill="#ffffff" font-family="Arial">PDF</text>217 </svg>218 </div>219 <span>Share as PDF</span>220 </div>221 222 <div class="item">223 <div class="icon">224 <svg viewBox="0 0 24 24">225 <rect x="3" y="5" width="18" height="12" rx="2" ry="2" fill="none" stroke="#eaeaea" stroke-width="2"/>226 <path d="M9 17v2h6v-2" stroke="#eaeaea" stroke-width="2"/>227 </svg>228 </div>229 <span>Rehearse with Coach (Preview)</span>230 <div class="chev" style="width:48px; height:48px;">231 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#d7d7d7" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>232 </div>233 </div>234 235 <div class="item purple">236 <div class="icon">237 <svg viewBox="0 0 24 24">238 <path d="M6 7h12v10H6z" fill="none" stroke="#b56ad9" stroke-width="2"/>239 <path d="M8 7V5h8v2" fill="none" stroke="#b56ad9" stroke-width="2"/>240 </svg>241 </div>242 <span>Save</span>243 </div>244 245 <div class="item">246 <div class="icon">247 <svg viewBox="0 0 24 24">248 <path d="M6 7h12v10H6z" fill="none" stroke="#eaeaea" stroke-width="2"/>249 <path d="M8 7V5h8v2" fill="none" stroke="#eaeaea" stroke-width="2"/>250 <path d="M16 16l3 3" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>251 <circle cx="12" cy="12" r="3" fill="none" stroke="#eaeaea" stroke-width="2"/>252 </svg>253 </div>254 <span>Save As</span>255 </div>256 257 <div class="item muted">258 <div class="icon">259 <svg viewBox="0 0 24 24">260 <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/>261 <path d="M12 7v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>262 </svg>263 </div>264 <span>History</span>265 </div>266 267 <div class="item">268 <div class="icon">269 <svg viewBox="0 0 24 24">270 <rect x="5" y="9" width="14" height="8" rx="2" ry="2" fill="none" stroke="#eaeaea" stroke-width="2"/>271 <path d="M8 9V6h8v3" stroke="#eaeaea" stroke-width="2"/>272 </svg>273 </div>274 <span>Print</span>275 </div>276 277 <div class="item">278 <div class="icon">279 <svg viewBox="0 0 24 24">280 <circle cx="12" cy="12" r="7" fill="none" stroke="#eaeaea" stroke-width="2"/>281 <path d="M12 9v6M9 12h6" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>282 </svg>283 </div>284 <span>Settings</span>285 </div>286 287 <div class="sheet-bottom-pad"></div>288 </div>289 </div>290 291 <div class="home-indicator"></div>292</div>293</body>294</html>