GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Select Your Sport</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #223f48; /* deep blue-teal */14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 right: 0;22 height: 120px;23 color: #ffffff;24 padding: 0 48px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 opacity: 0.95;29 }30 .status-left {31 font-size: 42px;32 font-weight: 600;33 letter-spacing: 0.5px;34 }35 .status-right {36 display: flex;37 align-items: center;38 gap: 24px;39 }40 .status-icon { width: 44px; height: 44px; }41 .status-icon path, .status-icon rect, .status-icon circle { fill: none; stroke: #ffffff; stroke-width: 5; }42 43 /* Header */44 .header {45 margin-top: 220px;46 text-align: center;47 color: #ffffff;48 padding: 0 64px;49 }50 .header h1 {51 margin: 0 0 24px 0;52 font-size: 68px;53 font-weight: 800;54 }55 .header p {56 margin: 0;57 font-size: 36px;58 line-height: 50px;59 color: rgba(255,255,255,0.85);60 max-width: 880px;61 display: inline-block;62 }63 64 /* Grid of sports */65 .sports-grid {66 width: 960px;67 margin: 90px auto 0;68 display: grid;69 grid-template-columns: repeat(3, 1fr);70 grid-column-gap: 60px;71 grid-row-gap: 90px;72 text-align: center;73 }74 .sport {75 color: #eaf2f6;76 }77 .sport .icon {78 width: 160px;79 height: 160px;80 margin: 0 auto 24px;81 }82 .sport .icon svg { width: 160px; height: 160px; }83 .sport .icon svg * { fill: #ffffff; stroke: none; }84 .sport .label {85 font-size: 36px;86 font-weight: 700;87 letter-spacing: 0.2px;88 }89 .sport.other .icon svg * { fill: #18F5B0; }90 .sport.other .label { color: #18F5B0; }91 92 /* CTA button */93 .cta {94 position: absolute;95 left: 48px;96 right: 48px;97 bottom: 170px;98 height: 150px;99 background: #18F5B0;100 border-radius: 32px;101 display: flex;102 align-items: center;103 justify-content: center;104 box-shadow: 0 10px 20px rgba(0,0,0,0.15);105 }106 .cta span {107 font-size: 50px;108 font-weight: 800;109 color: #1f3e47;110 }111 112 /* Home indicator */113 .home-indicator {114 position: absolute;115 bottom: 48px;116 left: 50%;117 transform: translateX(-50%);118 width: 240px;119 height: 14px;120 background: rgba(235,235,235,0.9);121 border-radius: 7px;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status Bar -->129 <div class="status-bar">130 <div class="status-left">10:08</div>131 <div class="status-right">132 <!-- Signal dots -->133 <svg class="status-icon" viewBox="0 0 44 44">134 <circle cx="8" cy="22" r="3" fill="#fff"></circle>135 <circle cx="18" cy="22" r="3" fill="#fff"></circle>136 <circle cx="28" cy="22" r="3" fill="#fff"></circle>137 <circle cx="38" cy="22" r="3" fill="#fff"></circle>138 </svg>139 <!-- Upload/arrow -->140 <svg class="status-icon" viewBox="0 0 44 44">141 <path d="M22 32V12"></path>142 <path d="M14 20l8-8 8 8"></path>143 </svg>144 <!-- Dot -->145 <svg class="status-icon" viewBox="0 0 44 44">146 <circle cx="22" cy="22" r="4" fill="#fff"></circle>147 </svg>148 <!-- WiFi -->149 <svg class="status-icon" viewBox="0 0 44 44">150 <path d="M6 18c8-8 24-8 32 0"></path>151 <path d="M12 24c6-6 18-6 24 0"></path>152 <path d="M18 30c4-4 12-4 16 0"></path>153 <circle cx="26" cy="34" r="2" fill="#fff"></circle>154 </svg>155 <!-- Battery -->156 <svg class="status-icon" viewBox="0 0 44 44">157 <rect x="7" y="12" width="28" height="20" rx="3" ry="3"></rect>158 <rect x="36" y="18" width="3" height="8" rx="1" ry="1"></rect>159 <rect x="10" y="15" width="22" height="14" fill="#fff" stroke="none"></rect>160 </svg>161 </div>162 </div>163 164 <!-- Header -->165 <div class="header">166 <h1>Select Your Sport</h1>167 <p>We will personalize the app according to your choice</p>168 </div>169 170 <!-- Sports Grid -->171 <div class="sports-grid">172 <!-- Boating -->173 <div class="sport">174 <div class="icon">175 <svg viewBox="0 0 160 160">176 <!-- hull -->177 <path d="M30 110h80l-20 12H40z"></path>178 <!-- waves -->179 <path d="M24 127c12 8 28 8 40 0 12 8 28 8 40 0" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round"></path>180 <!-- sails -->181 <polygon points="68,30 68,100 110,76"></polygon>182 <polygon points="68,30 40,60 68,72"></polygon>183 </svg>184 </div>185 <div class="label">Boating</div>186 </div>187 188 <!-- Kitesurfing -->189 <div class="sport">190 <div class="icon">191 <svg viewBox="0 0 160 160">192 <!-- kite crescent -->193 <path d="M120 40a40 40 0 1 1-60 60 60 60 0 0 0 60-60z"></path>194 <!-- person -->195 <circle cx="58" cy="78" r="10"></circle>196 <path d="M48 98c18 4 30 2 42-6" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>197 <path d="M55 88l-8 20" stroke="#ffffff" stroke-width="10" stroke-linecap="round" fill="none"></path>198 </svg>199 </div>200 <div class="label">Kitesurfing</div>201 </div>202 203 <!-- Windsurfing -->204 <div class="sport">205 <div class="icon">206 <svg viewBox="0 0 160 160">207 <!-- sail -->208 <polygon points="60,28 110,60 60,104"></polygon>209 <!-- board -->210 <path d="M38 114c32 0 68 0 84 8" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>211 <!-- waves -->212 <path d="M40 130c12 8 28 8 40 0 12 8 28 8 40 0" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round"></path>213 <!-- rider head -->214 <circle cx="50" cy="96" r="8"></circle>215 </svg>216 </div>217 <div class="label">Windsurfing</div>218 </div>219 220 <!-- Surfing -->221 <div class="sport">222 <div class="icon">223 <svg viewBox="0 0 160 160">224 <circle cx="72" cy="58" r="10"></circle>225 <path d="M62 74l24 10-18 16" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>226 <path d="M40 110h80" stroke="#ffffff" stroke-width="10" stroke-linecap="round"></path>227 </svg>228 </div>229 <div class="label">Surfing</div>230 </div>231 232 <!-- Fishing -->233 <div class="sport">234 <div class="icon">235 <svg viewBox="0 0 160 160">236 <path d="M30 80c20-20 70-20 90 0-20 20-70 20-90 0z"></path>237 <polygon points="120,80 140,92 120,104"></polygon>238 <circle cx="88" cy="78" r="5" fill="#223f48"></circle>239 </svg>240 </div>241 <div class="label">Fishing</div>242 </div>243 244 <!-- Drones -->245 <div class="sport">246 <div class="icon">247 <svg viewBox="0 0 160 160">248 <circle cx="50" cy="50" r="18"></circle>249 <circle cx="110" cy="50" r="18"></circle>250 <circle cx="50" cy="110" r="18"></circle>251 <circle cx="110" cy="110" r="18"></circle>252 <path d="M50 68v24M68 50h24M110 92v-24M92 110H68" stroke="#223f48" stroke-width="6" fill="none"></path>253 </svg>254 </div>255 <div class="label">Drones</div>256 </div>257 258 <!-- Bicycling -->259 <div class="sport">260 <div class="icon">261 <svg viewBox="0 0 160 160">262 <circle cx="52" cy="112" r="22"></circle>263 <circle cx="110" cy="112" r="22"></circle>264 <circle cx="80" cy="52" r="9"></circle>265 <path d="M78 62l-18 30 28 0 12-20" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>266 </svg>267 </div>268 <div class="label">Bicycling</div>269 </div>270 271 <!-- Paragliding -->272 <div class="sport">273 <div class="icon">274 <svg viewBox="0 0 160 160">275 <path d="M30 44c30-24 70-24 100 0" stroke="#ffffff" stroke-width="12" fill="none" stroke-linecap="round"></path>276 <path d="M80 44v26" stroke="#ffffff" stroke-width="8" stroke-linecap="round"></path>277 <circle cx="80" cy="86" r="10"></circle>278 <path d="M70 98l-10 18M90 98l10 18" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>279 </svg>280 </div>281 <div class="label">Paragliding</div>282 </div>283 284 <!-- Kayaking -->285 <div class="sport">286 <div class="icon">287 <svg viewBox="0 0 160 160">288 <path d="M40 104c30-20 50-20 80 0" stroke="#ffffff" stroke-width="12" fill="none" stroke-linecap="round"></path>289 <circle cx="70" cy="78" r="9"></circle>290 <path d="M52 86l56 36" stroke="#ffffff" stroke-width="8" stroke-linecap="round"></path>291 <rect x="36" y="112" width="88" height="10" rx="5" ry="5"></rect>292 </svg>293 </div>294 <div class="label">Kayaking</div>295 </div>296 297 <!-- Winter sports -->298 <div class="sport">299 <div class="icon">300 <svg viewBox="0 0 160 160">301 <circle cx="70" cy="50" r="10"></circle>302 <path d="M60 64l18 10-10 20" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>303 <path d="M36 122l92-22" stroke="#ffffff" stroke-width="8" stroke-linecap="round"></path>304 </svg>305 </div>306 <div class="label">Winter sports</div>307 </div>308 309 <!-- SUP -->310 <div class="sport">311 <div class="icon">312 <svg viewBox="0 0 160 160">313 <rect x="36" y="110" width="88" height="10" rx="5" ry="5"></rect>314 <circle cx="72" cy="58" r="10"></circle>315 <path d="M68 70l2 30" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>316 <path d="M100 50l-4 64" stroke="#ffffff" stroke-width="8" fill="none" stroke-linecap="round"></path>317 </svg>318 </div>319 <div class="label">SUP</div>320 </div>321 322 <!-- Diving -->323 <div class="sport">324 <div class="icon">325 <svg viewBox="0 0 160 160">326 <circle cx="60" cy="64" r="10"></circle>327 <path d="M70 72l30 18" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>328 <path d="M86 100l22 18" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>329 <path d="M40 120c30-10 60-10 80 0" stroke="#ffffff" stroke-width="8" fill="none" stroke-linecap="round"></path>330 </svg>331 </div>332 <div class="label">Diving</div>333 </div>334 335 <!-- Foiling -->336 <div class="sport">337 <div class="icon">338 <svg viewBox="0 0 160 160">339 <circle cx="72" cy="60" r="10"></circle>340 <path d="M60 76l24 8-14 16" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>341 <path d="M40 112h80" stroke="#ffffff" stroke-width="10" stroke-linecap="round"></path>342 <path d="M80 96v24" stroke="#ffffff" stroke-width="8" stroke-linecap="round"></path>343 </svg>344 </div>345 <div class="label">Foiling</div>346 </div>347 348 <!-- Running -->349 <div class="sport">350 <div class="icon">351 <svg viewBox="0 0 160 160">352 <circle cx="80" cy="46" r="10"></circle>353 <path d="M74 56l20 12-12 20" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>354 <path d="M70 92l-18 16" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>355 <path d="M92 92l18 16" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round"></path>356 </svg>357 </div>358 <div class="label">Running</div>359 </div>360 361 <!-- Other -->362 <div class="sport other">363 <div class="icon">364 <svg viewBox="0 0 160 160">365 <circle cx="90" cy="46" r="10"></circle>366 <path d="M84 56l-16 28" stroke="#18F5B0" stroke-width="10" fill="none" stroke-linecap="round"></path>367 <path d="M68 84l-18 36" stroke="#18F5B0" stroke-width="10" fill="none" stroke-linecap="round"></path>368 <path d="M100 64l30 44" stroke="#18F5B0" stroke-width="10" fill="none" stroke-linecap="round"></path>369 <rect x="42" y="118" width="88" height="10" rx="5" ry="5" fill="#18F5B0"></rect>370 </svg>371 </div>372 <div class="label">Other</div>373 </div>374 </div>375 376 <!-- CTA Button -->377 <div class="cta"><span>Select</span></div>378 379 <!-- Home indicator -->380 <div class="home-indicator"></div>381 382</div>383</body>384</html>