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>Sports Interest Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 150px;25    background: #c43b0b; /* deep Strava-like orange/red */26    padding: 0 36px;27    display: flex;28    align-items: flex-end;29    justify-content: space-between;30    box-sizing: border-box;31  }32  .status-content {33    width: 100%;34    height: 110px;35    display: flex;36    align-items: center;37    color: #fff;38    font-size: 46px;39    font-weight: 600;40  }41  .status-right {42    margin-left: auto;43    display: flex;44    align-items: center;45    gap: 28px;46  }47  .status-icon svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 6; }48 49  /* Main content area */50  .content {51    position: absolute;52    top: 150px;53    left: 0;54    right: 0;55    bottom: 380px; /* leave space for bottom sheet and system bar */56    padding: 48px 36px 0 36px;57    overflow-y: auto;58    box-sizing: border-box;59  }60 61  .title {62    font-size: 88px;63    line-height: 1.05;64    font-weight: 800;65    color: #2b2b2b;66    margin: 10px 8px 18px 8px;67  }68  .subtitle {69    font-size: 38px;70    line-height: 1.45;71    color: #666;72    margin: 0 8px 36px 8px;73  }74 75  .divider {76    height: 2px;77    background: #e5e5e5;78    margin: 18px 0 18px 0;79  }80 81  .list {82    padding-bottom: 40px;83  }84 85  .option {86    display: flex;87    align-items: center;88    justify-content: space-between;89    height: 152px;90    border: 3px solid #cfcfcf;91    border-radius: 26px;92    padding: 0 28px;93    margin: 22px 8px;94    background: #ffffff;95    box-sizing: border-box;96  }97  .option .left {98    display: flex;99    align-items: center;100    gap: 26px;101  }102  .option .icon {103    width: 84px; height: 84px;104    color: #111;105  }106  .option .icon svg { width: 84px; height: 84px; stroke: currentColor; fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }107  .label {108    font-size: 48px;109    color: #111;110  }111 112  .option.selected {113    border-color: #ff4d00;114    background: #fff3ec;115  }116  .option.selected .label,117  .option.selected .icon { color: #ff4d00; }118 119  .check {120    width: 42px; height: 42px;121    color: #ff4d00;122  }123  .check svg { width: 42px; height: 42px; stroke: currentColor; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }124 125  /* Bottom action area */126  .bottom-sheet {127    position: absolute;128    left: 0;129    right: 0;130    bottom: 120px; /* above system bar */131    height: 260px;132    background: #ffffff;133    box-shadow: 0 -6px 18px rgba(0,0,0,0.08);134    padding: 36px 36px;135    box-sizing: border-box;136  }137  .cta {138    width: 100%;139    height: 160px;140    background: #ff4c02;141    color: #fff;142    font-size: 56px;143    font-weight: 700;144    border-radius: 22px;145    display: flex;146    align-items: center;147    justify-content: center;148  }149 150  /* System gesture area */151  .system-bar {152    position: absolute;153    left: 0; right: 0; bottom: 0;154    height: 120px;155    background: #000;156    display: flex;157    align-items: center;158    justify-content: center;159  }160  .handle {161    width: 240px;162    height: 14px;163    background: #d3d3d3;164    border-radius: 8px;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status bar -->172  <div class="status-bar">173    <div class="status-content">174      <div>8:31</div>175      <div class="status-right">176        <div class="status-icon">177          <!-- Wi-Fi icon -->178          <svg viewBox="0 0 24 24">179            <path d="M2 8c5-4 15-4 20 0" />180            <path d="M6 12c3-3 9-3 12 0" />181            <path d="M10 16c2-2 4-2 6 0" />182            <circle cx="17" cy="20" r="1.5" fill="#fff" stroke="none"/>183          </svg>184        </div>185        <div class="status-icon">186          <!-- Battery icon -->187          <svg viewBox="0 0 28 18">188            <rect x="1" y="3" width="22" height="12" rx="2" />189            <rect x="24" y="6" width="3" height="6" rx="1" />190            <rect x="3" y="5" width="18" height="8" fill="#fff" stroke="none"/>191          </svg>192        </div>193      </div>194    </div>195  </div>196 197  <!-- Main content -->198  <div class="content">199    <div class="title">Which sports are you interested in?</div>200    <div class="subtitle">Here's a peek at what Strava has to offer. When it's time to record an activity, you can choose from over 30 sport types.</div>201    <div class="divider"></div>202 203    <div class="list">204      <!-- Run -->205      <div class="option">206        <div class="left">207          <div class="icon">208            <svg viewBox="0 0 100 100">209              <path d="M10 60 L58 60 L70 48 L86 48 L92 60 L92 70 L10 70 Z" />210              <line x1="35" y1="64" x2="50" y2="64" />211              <line x1="18" y1="64" x2="28" y2="64" />212            </svg>213          </div>214          <div class="label">Run</div>215        </div>216      </div>217 218      <!-- Ride -->219      <div class="option">220        <div class="left">221          <div class="icon">222            <svg viewBox="0 0 100 100">223              <circle cx="26" cy="64" r="18"></circle>224              <circle cx="74" cy="64" r="18"></circle>225              <path d="M26 64 L44 36 L60 36 L74 64" />226              <line x1="44" y1="36" x2="54" y2="54" />227            </svg>228          </div>229          <div class="label">Ride</div>230        </div>231      </div>232 233      <!-- Walk (selected) -->234      <div class="option selected">235        <div class="left">236          <div class="icon">237            <svg viewBox="0 0 100 100">238              <path d="M10 60 L58 60 L70 48 L86 48 L92 60 L92 70 L10 70 Z" />239              <circle cx="25" cy="64" r="2"></circle>240              <circle cx="38" cy="64" r="2"></circle>241            </svg>242          </div>243          <div class="label">Walk</div>244        </div>245        <div class="check">246          <svg viewBox="0 0 24 24">247            <path d="M4 12 L10 18 L20 6" />248          </svg>249        </div>250      </div>251 252      <!-- Hike -->253      <div class="option">254        <div class="left">255          <div class="icon">256            <svg viewBox="0 0 100 100">257              <path d="M12 62 L60 62 L60 72 L12 72 Z" />258              <path d="M60 62 L76 46 L88 50 L80 68 L60 72 Z" />259            </svg>260          </div>261          <div class="label">Hike</div>262        </div>263      </div>264 265      <!-- Swim -->266      <div class="option">267        <div class="left">268          <div class="icon">269            <svg viewBox="0 0 100 100">270              <path d="M10 48 Q20 54 30 48 T50 48 T70 48 T90 48" />271              <path d="M10 60 Q20 66 30 60 T50 60 T70 60 T90 60" />272              <path d="M10 72 Q20 78 30 72 T50 72 T70 72 T90 72" />273            </svg>274          </div>275          <div class="label">Swim</div>276        </div>277      </div>278 279      <!-- Crossfit -->280      <div class="option">281        <div class="left">282          <div class="icon">283            <svg viewBox="0 0 100 100">284              <path d="M10 58 L20 48 L30 58 L40 48 L50 58 L60 48 L70 58 L80 48 L90 58" />285              <path d="M10 70 L20 60 L30 70 L40 60 L50 70 L60 60 L70 70 L80 60 L90 70" />286            </svg>287          </div>288          <div class="label">Crossfit</div>289        </div>290      </div>291 292      <!-- Elliptical -->293      <div class="option">294        <div class="left">295          <div class="icon">296            <svg viewBox="0 0 100 100">297              <ellipse cx="50" cy="62" rx="38" ry="14"></ellipse>298              <line x1="12" y1="62" x2="88" y2="62" />299            </svg>300          </div>301          <div class="label">Elliptical</div>302        </div>303      </div>304 305      <!-- Golf -->306      <div class="option">307        <div class="left">308          <div class="icon">309            <svg viewBox="0 0 100 100">310              <circle cx="56" cy="30" r="10"></circle>311              <path d="M56 40 L56 72" />312              <path d="M30 72 L80 72" />313            </svg>314          </div>315          <div class="label">Golf</div>316        </div>317      </div>318 319      <!-- Kayak -->320      <div class="option">321        <div class="left">322          <div class="icon">323            <svg viewBox="0 0 100 100">324              <path d="M20 72 L80 28" />325              <path d="M32 28 L20 20 L28 32" />326              <path d="M80 28 L92 20 L84 32" />327              <ellipse cx="50" cy="50" rx="16" ry="10"></ellipse>328            </svg>329          </div>330          <div class="label">Kayak</div>331        </div>332      </div>333 334      <!-- Rock Climb -->335      <div class="option">336        <div class="left">337          <div class="icon">338            <svg viewBox="0 0 100 100">339              <path d="M20 72 L60 30 L80 72 Z" />340              <circle cx="50" cy="46" r="4" />341            </svg>342          </div>343          <div class="label">Rock Climb</div>344        </div>345      </div>346    </div>347  </div>348 349  <!-- Bottom action area -->350  <div class="bottom-sheet">351    <div class="cta">Continue</div>352  </div>353 354  <!-- System bar -->355  <div class="system-bar">356    <div class="handle"></div>357  </div>358</div>359</body>360</html>