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 - Mock UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #1b1b1b;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-size: 42px;31    letter-spacing: 0.5px;32  }33  .status-left { flex: 1; }34  .status-center { flex: 1; text-align: center; opacity: 0.85; font-size: 36px; }35  .status-right { flex: 1; display: flex; justify-content: flex-end; gap: 28px; align-items: center; }36 37  /* Simple status icons */38  .icon { width: 48px; height: 48px; fill: #fff; opacity: 0.9; }39 40  /* App bar */41  .app-bar {42    position: absolute;43    top: 120px;44    left: 0;45    width: 1080px;46    height: 140px;47    background: #222;48    display: flex;49    align-items: center;50    padding: 0 28px;51    box-sizing: border-box;52    gap: 24px;53  }54  .app-title { font-size: 52px; color: #d9d9d9; flex: 1; }55  .app-actions { display: flex; gap: 28px; }56 57  /* Slide canvas */58  .slide {59    position: absolute;60    top: 260px; /* below status + app bar */61    left: 0;62    width: 1080px;63    height: 1700px;64    background: #5a4936;65    border-top: 4px solid #000;66    border-bottom: 4px solid #000;67    box-sizing: border-box;68  }69 70  /* Sections inside the slide */71  .mosaic-row {72    display: grid;73    grid-template-columns: repeat(4, 1fr);74    gap: 0;75    height: 260px;76    border-bottom: 4px solid #000;77  }78  .img-ph {79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    color: #757575;82    display: flex;83    align-items: center;84    justify-content: center;85    font-size: 34px;86    text-align: center;87    padding: 10px;88    box-sizing: border-box;89  }90 91  .title-row {92    height: 320px;93    display: flex;94    align-items: center;95    padding: 0 64px;96    box-sizing: border-box;97    border-bottom: 8px solid #000;98  }99  .title-row h1 {100    margin: 0;101    font-size: 76px;102    font-weight: 600;103    color: #f0f0f0;104  }105 106  .content-row {107    display: grid;108    grid-template-columns: 720px 360px;109    gap: 0;110    height: 540px;111    border-bottom: 8px solid #000;112  }113  .content-left {114    padding: 42px 56px;115    box-sizing: border-box;116    display: flex;117    flex-direction: column;118    justify-content: flex-start;119    gap: 32px;120  }121  .content-left .text {122    font-size: 44px;123    line-height: 1.25;124    color: #f2f2f2;125  }126  .content-left .mini-img {127    width: 360px;128    height: 420px;129    align-self: center;130  }131  .content-right {132    display: grid;133    grid-template-rows: 1fr 1fr;134  }135 136  .filler {137    height: calc(1700px - 260px - 320px - 540px - 8px - 8px - 4px); /* remaining slide height */138    /* large empty brown area as in screenshot */139  }140 141  /* Bottom action bar */142  .bottom-bar {143    position: absolute;144    left: 0;145    bottom: 0;146    width: 1080px;147    height: 220px;148    background: #1f1f1f;149    border-top: 1px solid #2a2a2a;150    display: grid;151    grid-template-columns: repeat(5, 1fr);152    padding-bottom: 36px; /* space above gesture bar */153    box-sizing: border-box;154  }155  .bar-item {156    display: flex;157    flex-direction: column;158    align-items: center;159    justify-content: center;160    gap: 18px;161    color: #cfcfcf;162    font-size: 34px;163  }164  .bar-item .icon { width: 56px; height: 56px; }165 166  /* Gesture bar indicator */167  .gesture-pill {168    position: absolute;169    bottom: 16px;170    left: 50%;171    transform: translateX(-50%);172    width: 180px;173    height: 12px;174    background: #eaeaea;175    border-radius: 8px;176    opacity: 0.9;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div class="status-left">8:45</div>186    <div class="status-center">• • •</div>187    <div class="status-right">188      <!-- WiFi -->189      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">190        <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>191      </svg>192      <!-- Battery -->193      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">194        <path d="M16 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v2H7V5h9v2zM9 7v10h7a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H9z"/>195      </svg>196    </div>197  </div>198 199  <!-- App bar -->200  <div class="app-bar">201    <!-- Back arrow -->202    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">203      <path d="M14 7l-5 5 5 5 1.5-1.5L12 12l3.5-3.5L14 7z"/>204    </svg>205    <div class="app-title">Importance of hiking</div>206    <div class="app-actions">207      <!-- Cloud upload -->208      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">209        <path d="M6 18h11a4 4 0 0 0 0-8h-1a6 6 0 0 0-11.3 2A3.5 3.5 0 0 0 6 18zm6-9l-3 3h2v3h2v-3h2l-3-3z"/>210      </svg>211      <!-- More vertical -->212      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">213        <path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/>214      </svg>215    </div>216  </div>217 218  <!-- Slide content -->219  <div class="slide">220    <!-- Mosaic row -->221    <div class="mosaic-row">222      <div class="img-ph">[IMG: Decorative Pattern]</div>223      <div class="img-ph">[IMG: Hiking Gear Flatlay]</div>224      <div class="img-ph">[IMG: Decorative Ribbon]</div>225      <div class="img-ph">[IMG: Subtle Pattern]</div>226    </div>227 228    <!-- Title row -->229    <div class="title-row">230      <h1>Importance of Hiking</h1>231    </div>232 233    <!-- Content row -->234    <div class="content-row">235      <div class="content-left">236        <div class="text">237          Regular nature hikes strengthen our heart, lungs, and muscles, as well as our mind238        </div>239        <div class="img-ph mini-img">[IMG: Hiking Benefits Infographic]</div>240      </div>241      <div class="content-right">242        <div class="img-ph">[IMG: Decorative Pattern]</div>243        <div class="img-ph">[IMG: Subtle Pattern]</div>244      </div>245    </div>246 247    <!-- Filler area to match screenshot's large empty brown space -->248    <div class="filler"></div>249  </div>250 251  <!-- Bottom action bar -->252  <div class="bottom-bar">253    <div class="bar-item">254      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">255        <path d="M8 17h8v2H8v-2zm8-3l-7-4v8l7-4z"/>256      </svg>257      <div>Present</div>258    </div>259    <div class="bar-item">260      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">261        <path d="M5 4h14v14H5V4zm2 2v10h10V6H7zm2 2h6v2H9V8zm0 3h6v2H9v-2z"/>262      </svg>263      <div>Notes</div>264    </div>265    <div class="bar-item">266      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">267        <path d="M4 20V5a2 2 0 0 1 2-2h7l5 5v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm9-13V4l5 5h-3a2 2 0 0 1-2-2zM7 14l5-5 2 2-5 5H7v-2z"/>268      </svg>269      <div>Edit</div>270    </div>271    <div class="bar-item">272      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">273        <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 15.5 14zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14zM18 18l4 4-1.5 1.5L16.5 19 18 18z"/>274      </svg>275      <div>Find</div>276    </div>277    <div class="bar-item">278      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">279        <path d="M13 5l5 5-1.4 1.4L14 9.8V18h-2V9.8l-2.6 1.6L8 10l5-5zM6 20h12v2H6v-2z"/>280      </svg>281      <div>Share</div>282    </div>283    <div class="gesture-pill"></div>284  </div>285 286</div>287</body>288</html>