GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f4f4f4;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #6e2a10;24    color: #fff;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 34px;29    box-sizing: border-box;30    z-index: 2;31  }32  .status-time { font-size: 42px; letter-spacing: 1px; }33  .status-icons { display: flex; align-items: center; gap: 24px; }34  .status-icons .dot {35    width: 36px; height: 36px; border-radius: 50%; background: #fff;36  }37  .battery {38    width: 60px; height: 30px; border: 3px solid #fff; border-radius: 6px; position: relative;39  }40  .battery::after {41    content: ""; position: absolute; right: -10px; top: 7px; width: 8px; height: 16px; background: #fff; border-radius: 2px;42  }43  .battery .level { width: 42px; height: 22px; background: #fff; margin: 2px; }44 45  /* App header */46  .app-header {47    position: absolute;48    top: 110px;49    left: 0;50    width: 1080px;51    height: 160px;52    background: #7a2f11;53    color: #e9e9e9;54    display: flex;55    align-items: center;56    padding: 0 40px;57    box-sizing: border-box;58    z-index: 1;59  }60  .app-title { font-size: 64px; font-weight: 600; }61  .header-actions {62    margin-left: auto; display: flex; align-items: center; gap: 44px; opacity: 0.8;63  }64  .header-actions svg, .header-actions span {65    width: 60px; height: 60px; fill: none; stroke: #e9e9e9; stroke-width: 6px;66  }67  .header-actions span { font-size: 60px; line-height: 60px; color: #e9e9e9; display: inline-flex; align-items: center; justify-content: center; }68 69  /* Page content (dimmed by overlay) */70  .content {71    position: absolute;72    top: 270px; left: 0; right: 0; bottom: 220px;73    padding: 40px;74    box-sizing: border-box;75    overflow: hidden;76  }77  .section-title { font-size: 88px; font-weight: 700; color: #333; margin: 20px 0 30px; }78  .card {79    background: #fff; border-radius: 14px; box-shadow: 0 6px 10px rgba(0,0,0,0.15);80    overflow: hidden;81    width: 100%;82  }83  .card-img {84    height: 380px; background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;85    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 42px;86  }87  .card-body { padding: 30px 34px 40px; color: #444; font-size: 34px; }88 89  /* Dim overlay + modal */90  .overlay {91    position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 4;92  }93  .modal {94    position: absolute;95    left: 30px; right: 30px;96    top: 420px;97    background: #fff;98    border-radius: 18px;99    box-shadow: 0 24px 60px rgba(0,0,0,0.35);100    z-index: 5;101    overflow: hidden;102  }103  .modal-img {104    height: 420px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;105    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 42px; position: relative;106  }107  .close-btn {108    position: absolute; right: 30px; top: 30px; width: 72px; height: 72px; cursor: default;109  }110  .close-btn svg { width: 72px; height: 72px; stroke: #333; stroke-width: 8px; }111  .modal-body { padding: 36px 34px 44px; }112  .modal-title {113    font-size: 72px; line-height: 1.1; font-weight: 700; color: #333; margin: 10px 0 24px;114  }115  .modal-text {116    font-size: 36px; line-height: 1.5; color: #555; margin-bottom: 40px;117  }118  .btn {119    width: 100%;120    height: 120px;121    border-radius: 14px;122    border: none;123    font-size: 40px;124    font-weight: 700;125    cursor: default;126  }127  .btn-primary {128    background: #FC4C02; color: #fff;129    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);130  }131  .btn-secondary {132    background: #fff; color: #FC4C02;133    border: 4px solid #FC4C02;134  }135  .btn-spacer { height: 24px; }136 137  /* Bottom tab bar */138  .tabbar {139    position: absolute; bottom: 0; left: 0; width: 1080px; height: 210px; background: #ffffff;140    border-top: 1px solid #e0e0e0; display: flex; justify-content: space-around; align-items: center; z-index: 2;141  }142  .tab {143    width: 160px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 34px; gap: 8px;144  }145  .tab svg { width: 64px; height: 64px; stroke: #777; stroke-width: 6px; fill: none; }146  .tab.active { color: #FC4C02; }147  .tab.active svg { stroke: #FC4C02; }148  .record-center {149    position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; color: #555; font-size: 34px;150  }151  .record-center .ring {152    width: 92px; height: 92px; border-radius: 50%; border: 10px solid #FC4C02; background: #fff; box-shadow: 0 0 0 6px #ffe3d7 inset;153  }154  .label { margin-top: 8px; }155 156  /* Gesture handle (bottom) */157  .gesture {158    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);159    width: 300px; height: 10px; background: #0a0a0a; border-radius: 6px; opacity: 0.9; z-index: 3;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status bar -->167  <div class="status-bar">168    <div class="status-time">8:36</div>169    <div class="status-icons">170      <svg viewBox="0 0 24 24" width="44" height="44" stroke="#fff" stroke-width="2" fill="none"><path d="M2 18L10 10l4 4 8-8"/></svg>171      <div class="battery"><div class="level"></div></div>172    </div>173  </div>174 175  <!-- App header -->176  <div class="app-header">177    <div class="app-title">Home</div>178    <div class="header-actions">179      <!-- People -->180      <svg viewBox="0 0 24 24">181        <circle cx="8" cy="8" r="3"></circle>182        <path d="M2 18c0-3 4-5 6-5"></path>183        <circle cx="16" cy="9" r="2.5"></circle>184        <path d="M12 18c0-2 3-4 4.5-4"></path>185      </svg>186      <!-- Bell -->187      <svg viewBox="0 0 24 24">188        <path d="M4 18h16l-2-3v-4a6 6 0 0 0-12 0v4l-2 3z"></path>189        <path d="M9 19a3 3 0 0 0 6 0"></path>190      </svg>191      <!-- Gear (unicode fallback) -->192      <span>⚙</span>193    </div>194  </div>195 196  <!-- Background content (under the modal) -->197  <div class="content">198    <div class="section-title">Getting Started</div>199    <div class="card" style="max-width: 1000px;">200      <div class="card-img">[IMG: Onboarding Banner]</div>201      <div class="card-body">202        This area represents the home feed content behind the modal.203      </div>204    </div>205  </div>206 207  <!-- Dim overlay -->208  <div class="overlay"></div>209 210  <!-- Modal card -->211  <div class="modal">212    <div class="modal-img">213      [IMG: Cyclist with bike near coast]214      <div class="close-btn">215        <svg viewBox="0 0 24 24">216          <path d="M4 4L20 20M20 4L4 20"></path>217        </svg>218      </div>219    </div>220    <div class="modal-body">221      <div class="modal-title">Record an activity with Strava</div>222      <div class="modal-text">223        Ready to take us for a spin? Just choose from 30+ sport types and start moving. Or you can upload activities by connecting your Garmin, Peloton or other device.224      </div>225      <button class="btn btn-primary">Record now using Strava</button>226      <div class="btn-spacer"></div>227      <button class="btn btn-secondary">Connect a device</button>228    </div>229  </div>230 231  <!-- Bottom tab bar -->232  <div class="tabbar">233    <div class="tab active">234      <svg viewBox="0 0 24 24"><path d="M3 12l9-8 9 8v8H3zM9 20v-6h6v6"></path></svg>235      <div class="label">Home</div>236    </div>237    <div class="tab">238      <svg viewBox="0 0 24 24"><path d="M3 20l8-16 4 8 6 8z"></path></svg>239      <div class="label">Maps</div>240    </div>241    <div class="record-center">242      <div class="ring"></div>243      <div class="label">Record</div>244    </div>245    <div class="tab">246      <svg viewBox="0 0 24 24"><circle cx="6" cy="8" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="18" cy="8" r="2"></circle><circle cx="18" cy="16" r="2"></circle></svg>247      <div class="label">Groups</div>248    </div>249    <div class="tab">250      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path></svg>251      <div class="label">You</div>252    </div>253  </div>254 255  <!-- Gesture bar -->256  <div class="gesture"></div>257 258</div>259</body>260</html>