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>Mobile UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13    color: #222;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    right: 0;29    height: 120px;30    background: rgba(0,0,0,0.5);31    color: #fff;32    display: flex;33    align-items: center;34    padding: 0 32px;35    box-sizing: border-box;36  }37  .status-left {38    font-weight: 700;39    font-size: 38px;40    letter-spacing: 0.5px;41  }42  .status-right {43    margin-left: auto;44    display: flex;45    align-items: center;46    gap: 28px;47  }48  .status-icon svg {49    width: 44px;50    height: 44px;51    fill: none;52    stroke: #fff;53    stroke-width: 4;54  }55 56  /* Content */57  .content {58    position: absolute;59    top: 0;60    left: 0;61    right: 0;62    padding: 160px 64px 360px 64px; /* top allows for status bar, bottom for CTA bar */63    box-sizing: border-box;64  }65  .content p {66    font-size: 42px;67    line-height: 62px;68    color: #2F2F2F;69    margin: 32px 0;70  }71  .content .lead {72    margin-top: 8px;73  }74  .content .section-title {75    font-weight: 700;76    margin-top: 48px;77  }78 79  /* Gallery */80  .gallery {81    display: grid;82    grid-template-columns: 1.4fr 0.8fr;83    gap: 28px;84    margin-top: 32px;85  }86  .img-box {87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    color: #757575;90    display: flex;91    justify-content: center;92    align-items: center;93    text-align: center;94    border-radius: 28px;95    font-size: 36px;96  }97  .img-tall {98    height: 520px;99  }100  .thumb-col {101    display: flex;102    flex-direction: column;103    gap: 28px;104  }105  .thumb {106    height: 246px;107  }108 109  /* Bottom CTA bar */110  .cta-bar {111    position: absolute;112    left: 0;113    right: 0;114    bottom: 88px; /* keep space for home indicator */115    background: #FFFFFF;116    border-top: 1px solid #E6E6E6;117    box-shadow: 0 -6px 24px rgba(0,0,0,0.06);118    padding: 36px 44px;119    box-sizing: border-box;120    display: flex;121    align-items: center;122    gap: 28px;123  }124  .price-wrap {125    flex: 1;126  }127  .price {128    font-size: 48px;129    font-weight: 800;130    color: #111;131  }132  .price span {133    font-weight: 500;134    color: #444;135  }136  .show-prices {137    font-size: 36px;138    color: #6D6D6D;139    text-decoration: underline;140    margin-top: 8px;141  }142  .cta-btn {143    background: #EB3A6C;144    color: #fff;145    font-size: 44px;146    font-weight: 700;147    padding: 34px 64px;148    border-radius: 24px;149    border: none;150    outline: none;151  }152 153  /* Home indicator */154  .home-indicator {155    position: absolute;156    bottom: 24px;157    left: 50%;158    transform: translateX(-50%);159    width: 240px;160    height: 12px;161    background: #111;162    opacity: 0.8;163    border-radius: 8px;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Top translucent status bar -->171  <div class="status-bar">172    <div class="status-left">12:54</div>173    <div class="status-right">174      <div class="status-icon" title="Signal">175        <svg viewBox="0 0 24 24">176          <path d="M2 18h2M6 14h2M10 10h2M14 6h2" stroke-linecap="round"/>177        </svg>178      </div>179      <div class="status-icon" title="Wi‑Fi">180        <svg viewBox="0 0 24 24">181          <path d="M2 9c5-5 15-5 20 0" stroke-linecap="round"/>182          <path d="M6 13c3-3 9-3 12 0" stroke-linecap="round"/>183          <path d="M10 17c1.5-1.5 2.5-1.5 4 0" stroke-linecap="round"/>184        </svg>185      </div>186      <div class="status-icon" title="Battery">187        <svg viewBox="0 0 28 24">188          <rect x="2" y="6" width="20" height="12" rx="2" />189          <rect x="22.5" y="9" width="3" height="6" rx="1" />190          <rect x="4.5" y="8.5" width="12" height="7" fill="#fff" stroke="none"/>191        </svg>192      </div>193    </div>194  </div>195 196  <!-- Scroll content -->197  <div class="content">198    <p class="lead">- Customized trail route such as up to the lookout in our main photo, or to cool natural tree forts!</p>199    <p>- Special arrangements for a longer, more challenging hike to the summit of the iconic Mount Gardner.</p>200 201    <p class="section-title">A few considerations:</p>202    <p>Families as well as dogs on leashes are welcome, but please note that Peanut and Pickles are still growing and their headbutt play behaviour may intimidate children and dogs.</p>203 204    <p>You are welcome to request dates, but these will be considered "private hikes".</p>205 206    <p>This adventure is "rain or shine"! The boys look adorable in their rain coats, so (pending a major storm) we'll enjoy whatever mother nature brings our way.</p>207 208    <p>The boys can't wait to show you their beautiful backyard!</p>209 210    <div class="gallery">211      <div class="img-box img-tall">[IMG: Mountain overlook with hiker and goats]</div>212      <div class="thumb-col">213        <div class="img-box thumb">[IMG: Goat nuzzling guide]</div>214        <div class="img-box thumb">[IMG: Forest trail with trees]</div>215      </div>216    </div>217  </div>218 219  <!-- Bottom CTA bar -->220  <div class="cta-bar">221    <div class="price-wrap">222      <div class="price">From $41 <span>/ person</span></div>223      <div class="show-prices">Show all prices</div>224    </div>225    <button class="cta-btn">Show dates</button>226  </div>227 228  <!-- Home indicator -->229  <div class="home-indicator"></div>230</div>231</body>232</html>