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>Select Your Sport 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: #2d4752;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #ffffff;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 110px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 40px;30 box-sizing: border-box;31 color: #eaf1f4;32 font-size: 40px;33 font-weight: 600;34 opacity: 0.95;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 28px;40 }41 .status-icons svg { width: 44px; height: 44px; fill: none; stroke: #eaf1f4; stroke-width: 4; }42 43 /* Header */44 .header {45 position: absolute;46 top: 220px;47 left: 0;48 width: 100%;49 text-align: center;50 box-sizing: border-box;51 padding: 0 60px;52 }53 .header h1 {54 margin: 0;55 font-size: 78px;56 font-weight: 800;57 letter-spacing: 0.5px;58 color: #f6fbfd;59 }60 .header p {61 margin: 28px auto 0;62 max-width: 920px;63 font-size: 38px;64 line-height: 1.35;65 color: #d5e4ea;66 font-weight: 600;67 }68 69 /* Grid of sports */70 .grid {71 position: absolute;72 top: 560px;73 left: 0;74 width: 100%;75 padding: 0 80px;76 box-sizing: border-box;77 display: grid;78 grid-template-columns: repeat(3, 1fr);79 grid-column-gap: 60px;80 grid-row-gap: 92px;81 }82 .sport-item {83 text-align: center;84 }85 .icon {86 width: 220px;87 height: 160px;88 margin: 0 auto 26px;89 }90 .icon svg {91 width: 220px;92 height: 160px;93 }94 .label {95 font-size: 36px;96 font-weight: 700;97 color: #e6eef2;98 }99 100 /* Bottom button */101 .select-bar {102 position: absolute;103 left: 60px;104 right: 60px;105 bottom: 190px;106 height: 160px;107 background: rgba(255,255,255,0.12);108 border-radius: 36px;109 display: flex;110 align-items: center;111 justify-content: center;112 color: rgba(255,255,255,0.36);113 font-size: 48px;114 font-weight: 800;115 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);116 }117 118 /* Home indicator */119 .home-indicator {120 position: absolute;121 bottom: 70px;122 left: 50%;123 transform: translateX(-50%);124 width: 360px;125 height: 14px;126 background: rgba(255,255,255,0.65);127 border-radius: 8px;128 }129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Status Bar -->135 <div class="status-bar">136 <div>10:07</div>137 <div class="status-icons">138 <!-- Signal -->139 <svg viewBox="0 0 24 24"><path d="M3 21h18M6 17h3M11 13h3M16 9h3"/></svg>140 <!-- Upload/Sync arrows -->141 <svg viewBox="0 0 24 24">142 <path d="M12 4v10M8 8l4-4 4 4" />143 <path d="M12 20V10M16 16l-4 4-4-4" />144 </svg>145 <!-- Dot -->146 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" /></svg>147 <!-- WiFi -->148 <svg viewBox="0 0 24 24">149 <path d="M3 9c4.5-4 13.5-4 18 0"/>150 <path d="M6 12c3-2.5 9-2.5 12 0"/>151 <path d="M9 15c1.5-1 4.5-1 6 0"/>152 <circle cx="12" cy="18" r="1.8" fill="#eaf1f4"></circle>153 </svg>154 <!-- Battery -->155 <svg viewBox="0 0 28 24">156 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" />157 <rect x="22" y="9" width="4" height="6" rx="1" />158 <rect x="4" y="8" width="14" height="8" fill="#eaf1f4" stroke="none" />159 </svg>160 </div>161 </div>162 163 <!-- Header -->164 <div class="header">165 <h1>Select Your Sport</h1>166 <p>We will personalize the app according to your choice</p>167 </div>168 169 <!-- Grid -->170 <div class="grid">171 172 <!-- Boating -->173 <div class="sport-item">174 <div class="icon">175 <svg viewBox="0 0 100 80">176 <!-- Sail -->177 <path d="M52 16 L52 56 L20 56 Z" fill="#ffffff"/>178 <!-- Mast and boat -->179 <rect x="48" y="16" width="4" height="40" fill="#ffffff"/>180 <path d="M12 60 H88 C78 70 22 70 12 60 Z" fill="#ffffff"/>181 <!-- Waves -->182 <path d="M16 72 Q26 78 36 72 Q46 66 56 72 Q66 78 76 72" stroke="#ffffff" stroke-width="4" fill="none"/>183 </svg>184 </div>185 <div class="label">Boating</div>186 </div>187 188 <!-- Kitesurfing -->189 <div class="sport-item">190 <div class="icon">191 <svg viewBox="0 0 100 80">192 <!-- Kite crescent -->193 <path d="M86 24 Q58 6 30 24 Q58 52 86 34 Z" fill="#ffffff"/>194 <!-- Rider -->195 <circle cx="34" cy="40" r="6" fill="#ffffff"/>196 <path d="M26 46 L40 50 L34 62 L24 58 Z" fill="#ffffff"/>197 <!-- Board -->198 <path d="M20 64 Q42 70 64 64 Q42 68 20 64 Z" fill="#ffffff"/>199 </svg>200 </div>201 <div class="label">Kitesurfing</div>202 </div>203 204 <!-- Windsurfing -->205 <div class="sport-item">206 <div class="icon">207 <svg viewBox="0 0 100 80">208 <!-- Sail -->209 <path d="M62 16 L84 52 L62 52 Z" fill="#ffffff"/>210 <rect x="58" y="16" width="4" height="40" fill="#ffffff"/>211 <!-- Rider and board -->212 <circle cx="42" cy="40" r="5" fill="#ffffff"/>213 <path d="M36 46 L52 52 L40 60 L30 56 Z" fill="#ffffff"/>214 <path d="M24 62 Q48 68 76 62" stroke="#ffffff" stroke-width="4" fill="none"/>215 </svg>216 </div>217 <div class="label">Windsurfing</div>218 </div>219 220 <!-- Surfing -->221 <div class="sport-item">222 <div class="icon">223 <svg viewBox="0 0 100 80">224 <circle cx="40" cy="30" r="6" fill="#ffffff"/>225 <path d="M34 36 L48 40 L42 50 L30 46 Z" fill="#ffffff"/>226 <path d="M18 60 Q50 68 82 60" stroke="#ffffff" stroke-width="4" fill="none"/>227 </svg>228 </div>229 <div class="label">Surfing</div>230 </div>231 232 <!-- Fishing -->233 <div class="sport-item">234 <div class="icon">235 <svg viewBox="0 0 100 80">236 <path d="M20 40 Q40 28 60 40 Q40 52 20 40 Z" fill="#ffffff"/>237 <path d="M60 40 L80 30 L78 50 Z" fill="#ffffff"/>238 <circle cx="42" cy="40" r="3" fill="#2d4752"/>239 </svg>240 </div>241 <div class="label">Fishing</div>242 </div>243 244 <!-- Drones -->245 <div class="sport-item">246 <div class="icon">247 <svg viewBox="0 0 100 80">248 <circle cx="28" cy="28" r="12" fill="#ffffff"/>249 <circle cx="72" cy="28" r="12" fill="#ffffff"/>250 <circle cx="28" cy="52" r="12" fill="#ffffff"/>251 <circle cx="72" cy="52" r="12" fill="#ffffff"/>252 <rect x="47" y="36" width="6" height="8" fill="#ffffff"/>253 </svg>254 </div>255 <div class="label">Drones</div>256 </div>257 258 <!-- Bicycling -->259 <div class="sport-item">260 <div class="icon">261 <svg viewBox="0 0 100 80">262 <circle cx="28" cy="54" r="12" fill="#ffffff"/>263 <circle cx="70" cy="54" r="12" fill="#ffffff"/>264 <circle cx="44" cy="28" r="5" fill="#ffffff"/>265 <path d="M44 32 L36 46 L54 46 L62 54" stroke="#ffffff" stroke-width="6" fill="none"/>266 </svg>267 </div>268 <div class="label">Bicycling</div>269 </div>270 271 <!-- Paragliding -->272 <div class="sport-item">273 <div class="icon">274 <svg viewBox="0 0 100 80">275 <path d="M16 20 Q50 4 84 20" stroke="#ffffff" stroke-width="8" fill="none"/>276 <path d="M50 20 V34" stroke="#ffffff" stroke-width="6"/>277 <circle cx="50" cy="40" r="6" fill="#ffffff"/>278 <path d="M40 48 L50 46 L58 50 L50 60 L40 54 Z" fill="#ffffff"/>279 </svg>280 </div>281 <div class="label">Paragliding</div>282 </div>283 284 <!-- Kayaking -->285 <div class="sport-item">286 <div class="icon">287 <svg viewBox="0 0 100 80">288 <path d="M20 58 Q50 50 80 58" stroke="#ffffff" stroke-width="6" fill="none"/>289 <circle cx="50" cy="36" r="6" fill="#ffffff"/>290 <path d="M30 28 L72 44" stroke="#ffffff" stroke-width="6"/>291 <path d="M32 26 L26 34" stroke="#ffffff" stroke-width="6"/>292 <path d="M74 46 L80 38" stroke="#ffffff" stroke-width="6"/>293 </svg>294 </div>295 <div class="label">Kayaking</div>296 </div>297 298 <!-- Winter sports -->299 <div class="sport-item">300 <div class="icon">301 <svg viewBox="0 0 100 80">302 <circle cx="44" cy="28" r="6" fill="#ffffff"/>303 <path d="M38 34 L52 40 L48 50 L36 46 Z" fill="#ffffff"/>304 <path d="M20 62 L84 70" stroke="#ffffff" stroke-width="6"/>305 <path d="M58 38 L72 28" stroke="#ffffff" stroke-width="6"/>306 </svg>307 </div>308 <div class="label">Winter sports</div>309 </div>310 311 <!-- SUP -->312 <div class="sport-item">313 <div class="icon">314 <svg viewBox="0 0 100 80">315 <circle cx="42" cy="28" r="6" fill="#ffffff"/>316 <path d="M36 34 L48 40 L46 50 L34 46 Z" fill="#ffffff"/>317 <path d="M20 64 Q50 70 80 64" stroke="#ffffff" stroke-width="6" fill="none"/>318 <path d="M62 24 V60" stroke="#ffffff" stroke-width="6"/>319 </svg>320 </div>321 <div class="label">SUP</div>322 </div>323 324 <!-- Diving -->325 <div class="sport-item">326 <div class="icon">327 <svg viewBox="0 0 100 80">328 <circle cx="36" cy="30" r="6" fill="#ffffff"/>329 <path d="M40 36 L58 50 L48 60 L30 46 Z" fill="#ffffff"/>330 <path d="M64 56 L74 66" stroke="#ffffff" stroke-width="6"/>331 </svg>332 </div>333 <div class="label">Diving</div>334 </div>335 336 <!-- Foiling -->337 <div class="sport-item">338 <div class="icon">339 <svg viewBox="0 0 100 80">340 <circle cx="40" cy="28" r="6" fill="#ffffff"/>341 <path d="M34 34 L48 40 L44 50 L32 46 Z" fill="#ffffff"/>342 <path d="M20 60 Q50 66 80 60" stroke="#ffffff" stroke-width="6" fill="none"/>343 <path d="M50 60 V44" stroke="#ffffff" stroke-width="6"/>344 </svg>345 </div>346 <div class="label">Foiling</div>347 </div>348 349 <!-- Running -->350 <div class="sport-item">351 <div class="icon">352 <svg viewBox="0 0 100 80">353 <circle cx="50" cy="26" r="6" fill="#ffffff"/>354 <path d="M44 32 L60 36 L54 48 L40 44 Z" fill="#ffffff"/>355 <path d="M36 54 L48 50" stroke="#ffffff" stroke-width="6"/>356 <path d="M56 54 L68 60" stroke="#ffffff" stroke-width="6"/>357 </svg>358 </div>359 <div class="label">Running</div>360 </div>361 362 <!-- Other -->363 <div class="sport-item">364 <div class="icon">365 <svg viewBox="0 0 100 80">366 <circle cx="46" cy="24" r="6" fill="#ffffff"/>367 <path d="M40 30 L52 38 L48 50 L36 46 Z" fill="#ffffff"/>368 <path d="M70 20 L64 52" stroke="#ffffff" stroke-width="6"/>369 <rect x="52" y="26" width="8" height="10" rx="3" fill="#ffffff"/>370 </svg>371 </div>372 <div class="label">Other</div>373 </div>374 375 </div>376 377 <!-- Bottom Button -->378 <div class="select-bar">Select</div>379 380 <!-- Home Indicator -->381 <div class="home-indicator"></div>382 383</div>384</body>385</html>