GD-ML/AndroidCode
13.4k
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 Interests</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width:1080px;12 height:2400px;13 overflow:hidden;14 background:#ffffff;15 }16 17 /* Status/top bar */18 .topbar {19 height:160px;20 background:#B3331E;21 color:#fff;22 position:relative;23 padding:0 36px;24 display:flex;25 align-items:center;26 justify-content:space-between;27 }28 .status-time {29 font-weight:700;30 font-size:44px;31 letter-spacing:1px;32 }33 .status-icons {34 display:flex; align-items:center; gap:28px;35 }36 .icon { display:inline-flex; }37 .icon svg { width:42px; height:42px; fill:none; stroke:#fff; stroke-width:32; stroke-linecap:round; stroke-linejoin:round; }38 39 /* Page content */40 .content {41 position:absolute;42 top:160px;43 left:0;44 right:0;45 bottom:0;46 overflow:auto;47 padding:56px 48px 320px 48px; /* give space for CTA */48 box-sizing:border-box;49 background:#ffffff;50 }51 h1 {52 font-size:86px;53 line-height:96px;54 margin:24px 0 20px;55 color:#2E2E2E;56 font-weight:800;57 letter-spacing:-0.5px;58 }59 .subtitle {60 font-size:36px;61 line-height:52px;62 color:#6d6d6d;63 margin-bottom:28px;64 }65 .divider {66 height:2px;67 background:#e0e0e0;68 margin:20px 0 36px;69 }70 71 .list { display:flex; flex-direction:column; gap:28px; }72 .option {73 border:2px solid #BDBDBD;74 border-radius:28px;75 padding:28px 32px;76 height:130px;77 display:flex;78 align-items:center;79 gap:28px;80 background:#fff;81 }82 .option .opt-icon svg {83 width:72px;84 height:72px;85 stroke:#111; fill:none; stroke-width:22;86 stroke-linecap:round; stroke-linejoin:round;87 }88 .option .label {89 font-size:46px;90 color:#222;91 font-weight:600;92 }93 94 /* Bottom CTA area */95 .cta-area {96 position:absolute;97 left:0;98 right:0;99 bottom:110px; /* leave space for home indicator area */100 padding:24px 48px;101 background:linear-gradient(to top, rgba(255,255,255,1) 40%, rgba(255,255,255,0));102 }103 .cta-btn {104 width:100%;105 height:130px;106 border-radius:26px;107 border:none;108 background:#D8D6D2;109 color:#4A4A4A;110 font-size:48px;111 font-weight:700;112 box-shadow:0 2px 0 rgba(0,0,0,0.06) inset;113 }114 115 /* Home indicator area */116 .home-indicator {117 position:absolute;118 left:0; right:0; bottom:0;119 height:110px;120 background:#000000;121 display:flex; align-items:center; justify-content:center;122 }123 .home-pill {124 width:220px; height:12px; background:#dcdcdc; border-radius:12px;125 opacity:0.9;126 }127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Top status bar -->133 <div class="topbar">134 <div class="status-time">8:30</div>135 <div class="status-icons">136 <!-- wifi -->137 <span class="icon">138 <svg viewBox="0 0 64 64">139 <path d="M6 26c14-12 38-12 52 0"/>140 <path d="M16 36c9-8 23-8 32 0"/>141 <path d="M26 46c4-4 8-4 12 0"/>142 <circle cx="32" cy="54" r="2" fill="#fff" stroke="#fff"/>143 </svg>144 </span>145 <!-- battery -->146 <span class="icon">147 <svg viewBox="0 0 80 48">148 <rect x="2" y="8" width="64" height="32" rx="6"></rect>149 <rect x="68" y="16" width="8" height="16" rx="3"></rect>150 <rect x="8" y="14" width="50" height="20" rx="4" fill="#fff" stroke="none"></rect>151 </svg>152 </span>153 </div>154 </div>155 156 <!-- Scrollable content -->157 <div class="content">158 <h1>Which sports are you interested in?</h1>159 <div class="subtitle">160 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.161 </div>162 <div class="divider"></div>163 164 <div class="list">165 <div class="option">166 <div class="opt-icon">167 <!-- Shoe / Run -->168 <svg viewBox="0 0 64 64">169 <path d="M6 42h34l8-10M6 42c1 6 4 10 10 10h30c5 0 8-4 8-10" />170 <path d="M28 26l-6 8m6-8l10 6" />171 </svg>172 </div>173 <div class="label">Run</div>174 </div>175 176 <div class="option">177 <div class="opt-icon">178 <!-- Bicycle -->179 <svg viewBox="0 0 64 64">180 <circle cx="14" cy="44" r="10"></circle>181 <circle cx="46" cy="44" r="10"></circle>182 <path d="M14 44l10-18h12l10 18M32 26l4-8h10" />183 </svg>184 </div>185 <div class="label">Ride</div>186 </div>187 188 <div class="option">189 <div class="opt-icon">190 <!-- Walk (shoe outline) -->191 <svg viewBox="0 0 64 64">192 <path d="M6 42h38c7 0 10-4 10-10M6 42c2 6 6 10 12 10h28" />193 <path d="M24 28l-6 8m10-6l8 4" />194 </svg>195 </div>196 <div class="label">Walk</div>197 </div>198 199 <div class="option">200 <div class="opt-icon">201 <!-- Hike (boot) -->202 <svg viewBox="0 0 64 64">203 <path d="M8 40h30v-8l-8-4-8 2-6-8-8 4z" />204 <path d="M8 40v6c0 4 3 6 6 6h30" />205 </svg>206 </div>207 <div class="label">Hike</div>208 </div>209 210 <div class="option">211 <div class="opt-icon">212 <!-- Swim (waves) -->213 <svg viewBox="0 0 64 64">214 <path d="M6 26c6 6 14 6 20 0s14-6 20 0 14 6 20 0" />215 <path d="M6 36c6 6 14 6 20 0s14-6 20 0 14 6 20 0" />216 <path d="M6 46c6 6 14 6 20 0s14-6 20 0 14 6 20 0" />217 </svg>218 </div>219 <div class="label">Swim</div>220 </div>221 222 <div class="option">223 <div class="opt-icon">224 <!-- Crossfit (barbell) -->225 <svg viewBox="0 0 64 64">226 <path d="M6 32h52" />227 <rect x="10" y="24" width="6" height="16" rx="2"></rect>228 <rect x="48" y="24" width="6" height="16" rx="2"></rect>229 </svg>230 </div>231 <div class="label">Crossfit</div>232 </div>233 234 <div class="option">235 <div class="opt-icon">236 <!-- Elliptical (ellipse + pedals) -->237 <svg viewBox="0 0 64 64">238 <ellipse cx="32" cy="36" rx="20" ry="10"></ellipse>239 <path d="M22 18l-6 8m26-8l6 8" />240 </svg>241 </div>242 <div class="label">Elliptical</div>243 </div>244 245 <div class="option">246 <div class="opt-icon">247 <!-- Golf (flag in hole) -->248 <svg viewBox="0 0 64 64">249 <path d="M18 50c10-6 26-6 36 0" />250 <circle cx="18" cy="50" r="2" fill="none"></circle>251 <path d="M26 50V14l10 4-10 4" />252 </svg>253 </div>254 <div class="label">Golf</div>255 </div>256 257 <div class="option">258 <div class="opt-icon">259 <!-- Kayak (boat + paddle) -->260 <svg viewBox="0 0 64 64">261 <path d="M12 32l20-12 20 12-20 12z" />262 <path d="M8 20l48 24M56 20l-6 4M8 44l6-4" />263 </svg>264 </div>265 <div class="label">Kayak</div>266 </div>267 268 <div class="option">269 <div class="opt-icon">270 <!-- Rock Climb (mountain) -->271 <svg viewBox="0 0 64 64">272 <path d="M4 50l14-20 8 10 6-8 14 18z" />273 <path d="M18 30l4-6 4 6" />274 </svg>275 </div>276 <div class="label">Rock Climb</div>277 </div>278 </div>279 </div>280 281 <!-- Sticky CTA -->282 <div class="cta-area">283 <button class="cta-btn">Continue</button>284 </div>285 286 <!-- Home indicator bar -->287 <div class="home-indicator">288 <div class="home-pill"></div>289 </div>290 291</div>292</body>293</html>