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>Select Activity Type - UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .status-bar {21    height: 96px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 36px;26    color: #616161;27    font-size: 34px;28  }29  .status-left { display: flex; align-items: center; gap: 18px; }30  .status-right { display: flex; align-items: center; gap: 22px; }31 32  /* Header with back + title */33  .header {34    height: 140px;35    display: flex;36    align-items: center;37    padding: 0 32px 0 24px;38  }39  .back-btn {40    width: 96px;41    height: 96px;42    display: flex;43    align-items: center;44    justify-content: center;45    color: #4650d6;46  }47  .title {48    font-size: 48px;49    font-weight: 700;50    color: #333;51    margin-left: 8px;52  }53 54  /* Tabs */55  .tabs {56    height: 120px;57    background: #4f51c9;58    display: flex;59    position: relative;60  }61  .tab {62    flex: 1;63    color: #e9e9ff;64    font-weight: 600;65    letter-spacing: 1px;66    text-align: center;67    line-height: 120px;68    font-size: 36px;69    text-transform: uppercase;70  }71  .tab.active { color: #ffffff; position: relative; }72  .tab.active::after {73    content: "";74    position: absolute;75    left: 50%;76    transform: translateX(-50%);77    bottom: 0;78    width: 78%;79    height: 6px;80    background: #ffffff;81    border-radius: 4px;82  }83 84  /* List */85  .list {86    height: 1924px; /* 2400 - status(96) - header(140) - tabs(120) - gesture(120) */87    overflow: hidden; /* mimic static screenshot */88  }89  .row {90    display: flex;91    align-items: center;92    padding: 0 34px 0 36px;93    height: 160px;94    border-bottom: 1px solid #e9edf2;95  }96  .row .icon {97    width: 76px;98    height: 76px;99    margin-right: 30px;100    color: #0e2b63; /* navy-ish */101  }102  .row .label {103    font-size: 40px;104    font-weight: 600;105    color: #111;106  }107  .row .spacer { flex: 1; }108  .row .check {109    width: 54px;110    height: 54px;111    color: #2bb1a6; /* teal check like screenshot */112  }113 114  /* Bottom gesture area */115  .gesture {116    position: absolute;117    left: 0; right: 0; bottom: 0;118    height: 120px;119    background: #0a0a0a;120    display: flex;121    align-items: center;122    justify-content: center;123  }124  .home-indicator {125    width: 300px;126    height: 14px;127    background: #d1d1d1;128    border-radius: 10px;129    opacity: 0.9;130  }131 132  /* Helper: simple, consistent stick-figure icons */133  svg { display: block; width: 100%; height: 100%; }134  .stroke { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }135</style>136</head>137<body>138<div id="render-target">139 140  <!-- Status bar -->141  <div class="status-bar">142    <div class="status-left">143      <span>2:56</span>144      <!-- small dot icon -->145      <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#9e9e9e"/></svg>146      <!-- cloud -->147      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 16h10a3 3 0 0 0 0-6 4.5 4.5 0 0 0-8.7-1.3A3.5 3.5 0 0 0 6 16z" fill="#9e9e9e"/></svg>148    </div>149    <div class="status-right">150      <!-- location -->151      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2c-3.3 0-6 2.6-6 5.9 0 4.6 6 12.1 6 12.1s6-7.5 6-12.1C18 4.6 15.3 2 12 2zm0 8.3a2.4 2.4 0 1 1 0-4.8 2.4 2.4 0 0 1 0 4.8z" fill="#757575"/></svg>152      <!-- wifi -->153      <svg width="38" height="38" viewBox="0 0 24 24"><path d="M2 8c5.5-4.7 14.5-4.7 20 0M5 12c3.6-3.1 10.4-3.1 14 0M9 16c2-1.8 4-1.8 6 0M12 20h0" class="stroke" style="stroke:#757575"/></svg>154      <!-- battery -->155      <svg width="40" height="40" viewBox="0 0 28 24">156        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="#757575"/>157        <rect x="4" y="8" width="16" height="8" fill="#ffffff"/>158        <rect x="22" y="9" width="4" height="6" rx="1" ry="1" fill="#757575"/>159      </svg>160    </div>161  </div>162 163  <!-- Header -->164  <div class="header">165    <div class="back-btn">166      <svg viewBox="0 0 24 24"><path d="M15.5 5L8 12l7.5 7" class="stroke" style="stroke:#4650d6; stroke-width:3.5"/></svg>167    </div>168    <div class="title">Select Activity Type</div>169  </div>170 171  <!-- Tabs -->172  <div class="tabs">173    <div class="tab active">GPS MODE</div>174    <div class="tab">STOPWATCH MODE</div>175  </div>176 177  <!-- List of activities -->178  <div class="list">179    <!-- 1 Running (selected) -->180    <div class="row">181      <div class="icon">182        <!-- simple running stick figure -->183        <svg viewBox="0 0 24 24">184          <circle cx="8" cy="4.8" r="2.2" fill="currentColor"/>185          <path d="M7 8l4 2-2 3M7 8l-1.5 3M9 13l3 2.5M8 14l-3 4" class="stroke"/>186        </svg>187      </div>188      <div class="label">Running</div>189      <div class="spacer"></div>190      <div class="check">191        <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" class="stroke" style="stroke:#2bb1a6; stroke-width:3.6"/></svg>192      </div>193    </div>194 195    <!-- 2 Walking -->196    <div class="row">197      <div class="icon">198        <svg viewBox="0 0 24 24">199          <circle cx="8" cy="5" r="2.2" fill="currentColor"/>200          <path d="M8 7.5v4M8 11.5l-3 4M8 11.5l3 3M6 10l4 1.2" class="stroke"/>201        </svg>202      </div>203      <div class="label">Walking</div>204      <div class="spacer"></div>205    </div>206 207    <!-- 3 Biking -->208    <div class="row">209      <div class="icon">210        <svg viewBox="0 0 24 24">211          <circle cx="7" cy="16" r="4.2" class="stroke"/>212          <circle cx="18" cy="16" r="4.2" class="stroke"/>213          <path d="M10 16l3-6h3M8 9h4" class="stroke"/>214          <circle cx="12" cy="6" r="1.7" fill="currentColor"/>215        </svg>216      </div>217      <div class="label">Biking</div>218      <div class="spacer"></div>219    </div>220 221    <!-- 4 Hiking -->222    <div class="row">223      <div class="icon">224        <svg viewBox="0 0 24 24">225          <circle cx="8" cy="4.8" r="2.2" fill="currentColor"/>226          <path d="M8 7.5l-1.8 3.2M8 7.5l3 2.2M6.2 10.7l-1.2 7.3M14 4v16" class="stroke"/>227        </svg>228      </div>229      <div class="label">Hiking</div>230      <div class="spacer"></div>231    </div>232 233    <!-- 5 Swimming -->234    <div class="row">235      <div class="icon">236        <svg viewBox="0 0 24 24">237          <circle cx="6" cy="7" r="1.8" fill="currentColor"/>238          <path d="M4 12c2 1.2 4 1.2 6 0 2 1.2 4 1.2 6 0M6 9l3 2.2" class="stroke"/>239        </svg>240      </div>241      <div class="label">Swimming</div>242      <div class="spacer"></div>243    </div>244 245    <!-- 6 Mountain Biking -->246    <div class="row">247      <div class="icon">248        <svg viewBox="0 0 24 24">249          <circle cx="6" cy="16" r="3.8" class="stroke"/>250          <circle cx="18" cy="16" r="3.8" class="stroke"/>251          <path d="M8 16l3-6 3 2 2-3" class="stroke"/>252        </svg>253      </div>254      <div class="label">Mountain Biking</div>255      <div class="spacer"></div>256    </div>257 258    <!-- 7 Rowing -->259    <div class="row">260      <div class="icon">261        <svg viewBox="0 0 24 24">262          <path d="M4 16h16M10 14l4 4M14 14l-4 4" class="stroke"/>263          <circle cx="12" cy="9" r="1.8" fill="currentColor"/>264        </svg>265      </div>266      <div class="label">Rowing</div>267      <div class="spacer"></div>268    </div>269 270    <!-- 8 Downhill Skiing -->271    <div class="row">272      <div class="icon">273        <svg viewBox="0 0 24 24">274          <path d="M3 20h18" class="stroke"/>275          <circle cx="12" cy="5.2" r="1.8" fill="currentColor"/>276          <path d="M10 8l3 2.2-1.5 2.2M9 12l-3 2" class="stroke"/>277        </svg>278      </div>279      <div class="label">Downhill Skiing</div>280      <div class="spacer"></div>281    </div>282 283    <!-- 9 Cross-Country Skiing -->284    <div class="row">285      <div class="icon">286        <svg viewBox="0 0 24 24">287          <path d="M2 20h20" class="stroke"/>288          <circle cx="8" cy="5" r="2" fill="currentColor"/>289          <path d="M8 7.5l3 2-2 3M6 10l-2 6M18 3v17" class="stroke"/>290        </svg>291      </div>292      <div class="label">Cross-Country Skiing</div>293      <div class="spacer"></div>294    </div>295 296    <!-- 10 Snowboarding -->297    <div class="row">298      <div class="icon">299        <svg viewBox="0 0 24 24">300          <path d="M4 19c3 2 13 2 16 0" class="stroke"/>301          <circle cx="12" cy="6" r="1.8" fill="currentColor"/>302          <path d="M10 8l3 2-1 2M9 12l-2 2" class="stroke"/>303        </svg>304      </div>305      <div class="label">Snowboarding</div>306      <div class="spacer"></div>307    </div>308 309    <!-- 11 Skating -->310    <div class="row">311      <div class="icon">312        <svg viewBox="0 0 24 24">313          <circle cx="8" cy="5" r="2.2" fill="currentColor"/>314          <path d="M8 8l3 2-2 2M8 12l-2 3M4 18h10" class="stroke"/>315        </svg>316      </div>317      <div class="label">Skating</div>318      <div class="spacer"></div>319    </div>320  </div>321 322  <!-- Bottom gesture / home indicator -->323  <div class="gesture">324    <div class="home-indicator"></div>325  </div>326 327</div>328</body>329</html>