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>Trails Near Me - Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #5F9D3A;30    color: #ffffff;31  }32  .status-content {33    position: relative;34    height: 100%;35    padding: 0 36px;36    display: flex;37    align-items: center;38    justify-content: space-between;39    font-size: 40px;40    font-weight: 600;41  }42  .status-icons {43    display: flex;44    align-items: center;45    gap: 24px;46    font-size: 0;47  }48  .dot {49    width: 12px;50    height: 12px;51    background: #ffffff;52    border-radius: 50%;53    opacity: 0.8;54  }55  .icon-wifi,56  .icon-battery {57    width: 60px;58    height: 36px;59  }60 61  /* Header / Title bar */62  .header {63    position: absolute;64    top: 120px;65    left: 0;66    width: 1080px;67    height: 170px;68    background: #ffffff;69    display: flex;70    align-items: center;71    padding: 0 48px;72    border-bottom: 1px solid #e6e6e6;73  }74  .header h1 {75    margin: 0;76    font-size: 56px;77    font-weight: 700;78    color: #1e1e1e;79  }80 81  /* Map area placeholder */82  .map-wrap {83    position: absolute;84    top: 290px; /* 120 + 170 */85    left: 0;86    width: 1080px;87    height: 1870px; /* remaining minus bottom areas (170+80) */88  }89  .map {90    width: 100%;91    height: 100%;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    color: #757575;95    display: flex;96    align-items: center;97    justify-content: center;98    font-size: 42px;99    text-align: center;100  }101  .google-watermark {102    position: absolute;103    left: 24px;104    bottom: 210px; /* just above bottom bar */105    font-size: 40px;106    color: #5f5f5f;107    opacity: 0.9;108    font-weight: 600;109  }110 111  /* Floating map buttons */112  .fab-stack {113    position: absolute;114    right: 32px;115    top: 120px;116    display: flex;117    flex-direction: column;118    gap: 24px;119  }120  .fab {121    width: 120px;122    height: 120px;123    background: #ffffff;124    border-radius: 60px;125    box-shadow: 0 8px 18px rgba(0,0,0,0.2);126    display: flex;127    align-items: center;128    justify-content: center;129    border: 1px solid #eaeaea;130  }131  .fab svg {132    width: 56px;133    height: 56px;134    fill: none;135    stroke: #333;136    stroke-width: 6;137    stroke-linecap: round;138    stroke-linejoin: round;139  }140 141  /* Bottom navigation bar */142  .bottom-bar {143    position: absolute;144    left: 0;145    bottom: 80px; /* leave space for gesture handle */146    width: 1080px;147    height: 170px;148    background: #5F9D3A;149    display: flex;150    align-items: center;151    justify-content: space-around;152    padding: 0 24px;153  }154  .nav-item {155    width: 20%;156    height: 100%;157    display: flex;158    align-items: center;159    justify-content: center;160  }161  .nav-item svg {162    width: 72px;163    height: 72px;164    fill: none;165    stroke: #ffffff;166    stroke-width: 8;167    stroke-linecap: round;168    stroke-linejoin: round;169  }170 171  /* Gesture area */172  .gesture-area {173    position: absolute;174    bottom: 0;175    left: 0;176    width: 1080px;177    height: 80px;178    background: #000000;179  }180  .home-indicator {181    position: absolute;182    left: 50%;183    top: 28px;184    transform: translateX(-50%);185    width: 260px;186    height: 10px;187    background: rgba(255,255,255,0.5);188    border-radius: 8px;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status Bar -->196  <div class="status-bar">197    <div class="status-content">198      <div class="time">1:07</div>199      <div class="status-icons">200        <div class="dot"></div>201        <div class="dot" style="opacity:0.6"></div>202        <!-- WiFi Icon -->203        <svg class="icon-wifi" viewBox="0 0 24 24">204          <path d="M2 8c5-4 15-4 20 0"></path>205          <path d="M5 12c3-3 11-3 14 0"></path>206          <path d="M8 16c2-2 6-2 8 0"></path>207          <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"></circle>208        </svg>209        <!-- Battery Icon -->210        <svg class="icon-battery" viewBox="0 0 28 16">211          <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>212          <rect x="3" y="5" width="18" height="6" rx="1" ry="1" fill="#ffffff"></rect>213          <rect x="23" y="6" width="3" height="4" fill="#fff"></rect>214        </svg>215      </div>216    </div>217  </div>218 219  <!-- Header -->220  <div class="header">221    <h1>Trails Near Me</h1>222  </div>223 224  <!-- Map Area -->225  <div class="map-wrap">226    <div class="map">[IMG: Google Map of Michigan & Ohio Region]</div>227 228    <div class="fab-stack">229      <div class="fab" title="Expand/Adjust">230        <!-- Expand arrows icon -->231        <svg viewBox="0 0 24 24">232          <path d="M7 3v4H3"></path>233          <path d="M3 7L9 1"></path>234          <path d="M17 21v-4h4"></path>235          <path d="M21 17l-6 6"></path>236        </svg>237      </div>238      <div class="fab" title="Route">239        <!-- Curvy route icon -->240        <svg viewBox="0 0 24 24">241          <path d="M5 20c4-8 10-8 14-16"></path>242          <circle cx="5" cy="20" r="2" fill="none"></circle>243          <circle cx="19" cy="4" r="2" fill="none"></circle>244        </svg>245      </div>246    </div>247 248    <div class="google-watermark">Google</div>249  </div>250 251  <!-- Bottom Navigation -->252  <div class="bottom-bar">253    <!-- Trails/Leaf -->254    <div class="nav-item">255      <svg viewBox="0 0 24 24">256        <path d="M4 14c6-1 10-5 14-10"></path>257        <path d="M6 18c4-2 7-5 10-9"></path>258        <path d="M4 14c0 4 2 6 6 6"></path>259      </svg>260    </div>261    <!-- Search -->262    <div class="nav-item">263      <svg viewBox="0 0 24 24">264        <circle cx="10" cy="10" r="6"></circle>265        <path d="M15 15l6 6"></path>266      </svg>267    </div>268    <!-- Heart -->269    <div class="nav-item">270      <svg viewBox="0 0 24 24">271        <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 5 6.8 5c2.2 0 3.6 1.5 5.2 3 1.6-1.5 3-3 5.2-3C20.5 5 23 8 21 12.5 19 16.5 12 21 12 21z"></path>272      </svg>273    </div>274    <!-- User -->275    <div class="nav-item">276      <svg viewBox="0 0 24 24">277        <circle cx="12" cy="8" r="4"></circle>278        <path d="M4 22c2-4 6-6 8-6s6 2 8 6"></path>279      </svg>280    </div>281    <!-- Settings -->282    <div class="nav-item">283      <svg viewBox="0 0 24 24">284        <circle cx="12" cy="12" r="3"></circle>285        <path d="M12 2v3"></path>286        <path d="M12 19v3"></path>287        <path d="M4.9 4.9l2.1 2.1"></path>288        <path d="M17 17l2.1 2.1"></path>289        <path d="M2 12h3"></path>290        <path d="M19 12h3"></path>291        <path d="M4.9 19.1l2.1-2.1"></path>292        <path d="M17 7l2.1-2.1"></path>293      </svg>294    </div>295  </div>296 297  <!-- Gesture Area -->298  <div class="gesture-area">299    <div class="home-indicator"></div>300  </div>301 302</div>303</body>304</html>