GD-ML/AndroidCode

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 - Mobile UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #111111;15    font-family: "Segoe UI", Arial, Helvetica, sans-serif;16    color: #eaeaea;17  }18 19  /* Status bar */20  .status {21    height: 90px;22    padding: 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #ffffff;27    font-size: 34px;28    letter-spacing: 1px;29    background: #101010;30  }31  .status .left, .status .right {32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .status .time { font-weight: 600; }37 38  /* App bar */39  .appbar {40    height: 120px;41    background: #1e1e1e;42    display: flex;43    align-items: center;44    padding: 0 24px;45    gap: 18px;46    border-bottom: 1px solid #2a2a2a;47  }48  .appbar .title {49    font-size: 48px;50    color: #dcdcdc;51    flex: 1;52  }53  .icon-btn {54    width: 72px;55    height: 72px;56    display: inline-flex;57    align-items: center;58    justify-content: center;59    border-radius: 36px;60  }61  .icon svg { width: 48px; height: 48px; fill: #e5e5e5; }62 63  /* Collage header */64  .collage {65    display: grid;66    grid-template-columns: repeat(4, 1fr);67    height: 200px;68    gap: 0;69    border-bottom: 2px solid #000;70    border-top: 2px solid #000;71  }72  .pattern {73    position: relative;74    background: #734e45;75  }76  .pattern.light {77    background: #cda7a5;78  }79  .pattern .cross-h, .pattern .cross-v {80    position: absolute;81    background: #d4d0c8;82  }83  .pattern .cross-h { height: 8px; width: 100%; top: 50%; transform: translateY(-50%); }84  .pattern .cross-v { width: 14px; height: 100%; left: 50%; transform: translateX(-50%); }85 86  .pattern .bow {87    position: absolute;88    top: 50%;89    left: 50%;90    width: 160px;91    height: 100px;92    transform: translate(-50%, -50%);93  }94  .pattern .loop {95    position: absolute;96    width: 80px;97    height: 80px;98    border: 8px solid #d4d0c8;99    border-radius: 50%;100  }101  .pattern .loop.left { left: 0; top: 10px; transform: rotate(-15deg); }102  .pattern .loop.right { right: 0; top: 10px; transform: rotate(15deg); }103  .pattern.light .speckles {104    position: absolute;105    inset: 0;106    background-image: radial-gradient(#b98f8d 1px, transparent 1px);107    background-size: 18px 18px;108    opacity: 0.6;109  }110 111  .img-ph {112    background: #E0E0E0;113    border: 1px solid #BDBDBD;114    color: #757575;115    display: flex;116    justify-content: center;117    align-items: center;118    font-size: 30px;119    text-align: center;120  }121 122  /* Slide cards */123  .slides { padding-bottom: 0; }124  .slide {125    width: 1040px;126    margin: 16px 20px;127    background: #5a4a36;128    border: 6px solid #000;129    border-radius: 4px;130    position: relative;131    color: #f1f1f1;132  }133  .slide.title {134    height: 420px;135    display: flex;136    align-items: center;137    padding-left: 64px;138  }139  .slide.title h1 {140    font-family: Georgia, "Times New Roman", serif;141    font-size: 84px;142    font-weight: 500;143    margin: 0;144    color: #ece6df;145  }146 147  .slide.content {148    height: 520px;149    display: grid;150    grid-template-columns: 1fr 320px;151    column-gap: 0;152  }153  .slide.content .text-area {154    padding: 64px 48px 0 64px;155  }156  .slide.content .text-area .lead {157    font-family: Georgia, "Times New Roman", serif;158    font-size: 48px;159    line-height: 1.35;160    color: #efeae3;161  }162  .slide.content .text-area .poster {163    width: 300px;164    height: 200px;165    margin: 36px auto 0;166  }167  .slide.content .side-pattern {168    position: relative;169    background: #734e45;170    border-left: 2px solid #9b7a73;171  }172  .side-pattern .cross-h, .side-pattern .cross-v,173  .side-pattern .bow, .side-pattern .loop { /* reuse visuals */ }174 175  .slide.blank {176    height: 720px;177  }178 179  /* Bottom actions bar */180  .bottom-bar {181    position: absolute;182    left: 0; right: 0;183    bottom: 0;184    height: 180px;185    background: #1c1c1c;186    border-top: 1px solid #2a2a2a;187    display: flex;188    align-items: center;189    justify-content: space-around;190    padding-bottom: 20px;191  }192  .action {193    display: flex;194    flex-direction: column;195    align-items: center;196    color: #cfcfcf;197    gap: 12px;198  }199  .action svg { width: 56px; height: 56px; fill: #cfcfcf; }200  .action span { font-size: 30px; }201 202  /* Gesture bar (pill) */203  .gesture {204    position: absolute;205    bottom: 8px;206    left: 50%;207    transform: translateX(-50%);208    width: 240px;209    height: 14px;210    background: #e7e7e7;211    border-radius: 10px;212    opacity: 0.8;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <!-- Status bar -->220  <div class="status">221    <div class="left">222      <div class="time">1:06</div>223      <!-- moon -->224      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#fff" d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.5 6.5 0 1 0 9.8 9.8z"/></svg>225      <!-- search -->226      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#fff" d="M10 4a6 6 0 1 1 0 12A6 6 0 0 1 10 4m0-2a8 8 0 1 0 5.3 14l5 5 1.4-1.4-5-5A8 8 0 0 0 10 2z"/></svg>227      <!-- dot -->228      <svg width="12" height="12" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>229    </div>230    <div class="right">231      <!-- wifi -->232      <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#fff" d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2 9l2 2a12 12 0 0 1 16 0l2-2a15 15 0 0 0-20 0zm5 5 2 2a7 7 0 0 1 6 0l2-2a10 10 0 0 0-10 0z"/></svg>233      <!-- battery -->234      <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#fff" d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v1h-1V6h1v1zm-9 0h8v10H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"/></svg>235    </div>236  </div>237 238  <!-- App bar -->239  <div class="appbar">240    <div class="icon-btn icon" aria-label="Back">241      <svg viewBox="0 0 24 24"><path d="M15.5 19 8.5 12l7-7 1.4 1.4L11.3 12l5.6 5.6z"/></svg>242    </div>243    <div class="title">Importance of hiking</div>244    <div class="icon-btn icon" aria-label="Cloud">245      <svg viewBox="0 0 24 24"><path d="M19 18H7a4 4 0 1 1 0-8h.3A5.5 5.5 0 0 1 18.7 9 3.5 3.5 0 0 1 19 18zm0-2a1.5 1.5 0 0 0 0-3h-1.2l-.3-1a3.5 3.5 0 0 0-6.6-.7l-.5 1H7a2 2 0 1 0 0 4h12z" fill="none" stroke="#e5e5e5" stroke-width="1.6"/></svg>246    </div>247    <div class="icon-btn icon" aria-label="More">248      <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>249    </div>250  </div>251 252  <!-- Decorative collage row -->253  <div class="collage">254    <!-- Pattern 1 -->255    <div class="pattern">256      <div class="cross-h"></div>257      <div class="cross-v" style="width:12px;"></div>258      <div class="bow">259        <div class="loop left"></div>260        <div class="loop right"></div>261      </div>262    </div>263    <!-- Center image -->264    <div class="img-ph" style="font-size:32px;">[IMG: Hiking gear flat lay]</div>265    <!-- Pattern 2 (vertical ribbon) -->266    <div class="pattern">267      <div class="cross-v" style="background:#cfd2c5; width:18px;"></div>268      <div class="bow" style="width:140px;">269        <div class="loop left" style="border-color:#cfd2c5;"></div>270        <div class="loop right" style="border-color:#cfd2c5;"></div>271      </div>272    </div>273    <!-- Pattern 3 (light with speckles) -->274    <div class="pattern light">275      <div class="speckles"></div>276    </div>277  </div>278 279  <div class="slides">280    <!-- Slide: Title -->281    <div class="slide title">282      <h1>Importance of Hiking</h1>283    </div>284 285    <!-- Slide: Content -->286    <div class="slide content">287      <div class="text-area">288        <div class="lead">289          Regular nature hikes strengthen our heart, lungs, and muscles, as well as our mind290        </div>291        <div class="img-ph poster">[IMG: Hiking benefits poster]</div>292      </div>293      <div class="side-pattern">294        <div class="cross-h" style="height:8px;"></div>295        <div class="cross-v" style="width:14px;"></div>296        <div class="bow">297          <div class="loop left"></div>298          <div class="loop right"></div>299        </div>300        <div class="pattern light" style="position:absolute; bottom:0; left:0; right:0; height:48%;">301          <div class="speckles"></div>302        </div>303      </div>304    </div>305 306    <!-- Slide: Blank (brown) -->307    <div class="slide blank"></div>308  </div>309 310  <!-- Bottom actions bar -->311  <div class="bottom-bar">312    <div class="action">313      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>314      <span>Present</span>315    </div>316    <div class="action">317      <svg viewBox="0 0 24 24"><path d="M5 3h14v18H5zM7 5h10v10H7z"/></svg>318      <span>Notes</span>319    </div>320    <div class="action">321      <svg viewBox="0 0 24 24"><path d="M4 4h12v2H6v12H4zM9 8h8l-4 4 4 4H9z"/></svg>322      <span>Edit</span>323    </div>324    <div class="action">325      <svg viewBox="0 0 24 24"><path d="M10 18l-6-6 6-6v4h8v4h-8z"/></svg>326      <span>Find</span>327    </div>328    <div class="action">329      <svg viewBox="0 0 24 24"><path d="M14 9V5l7 7-7 7v-4H3v-6z"/></svg>330      <span>Share</span>331    </div>332  </div>333 334  <div class="gesture"></div>335</div>336</body>337</html>