GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Focus Area Selection</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 24px;20 left: 32px;21 right: 32px;22 height: 72px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #1a1a1a;27 font-size: 36px;28 letter-spacing: 0.5px;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .icon {36 width: 40px;37 height: 40px;38 }39 40 /* Top navigation */41 .top-nav {42 position: absolute;43 top: 150px;44 left: 40px;45 right: 40px;46 height: 80px;47 }48 .back-btn {49 position: absolute;50 left: 0;51 top: 6px;52 width: 60px;53 height: 60px;54 border-radius: 30px;55 display: flex;56 align-items: center;57 justify-content: center;58 }59 .skip {60 position: absolute;61 right: 0;62 top: 4px;63 font-size: 44px;64 color: #5a5a5a;65 }66 .progress {67 position: absolute;68 left: 220px;69 right: 180px;70 top: 20px;71 height: 12px;72 background: #e9ecef;73 border-radius: 8px;74 overflow: hidden;75 }76 .progress .bar {77 width: 160px;78 height: 100%;79 background: #2f6bff;80 border-radius: 8px;81 }82 83 /* Title */84 .title {85 position: absolute;86 top: 260px;87 left: 40px;88 right: 40px;89 font-size: 78px;90 font-weight: 800;91 line-height: 1.15;92 color: #111111;93 }94 95 /* Options list */96 .options {97 position: absolute;98 left: 40px;99 top: 820px;100 width: 560px;101 }102 .option {103 height: 140px;104 border: 2px solid #e6e6e6;105 border-radius: 32px;106 display: flex;107 align-items: center;108 padding-left: 40px;109 margin-bottom: 70px;110 font-size: 54px;111 font-weight: 700;112 color: #111;113 background: #fafafa;114 }115 116 /* Right-side model image placeholder */117 .model {118 position: absolute;119 right: 60px;120 top: 700px;121 width: 420px;122 height: 1120px;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 display: flex;126 align-items: center;127 justify-content: center;128 color: #757575;129 font-size: 34px;130 text-align: center;131 border-radius: 8px;132 }133 134 /* Connectors */135 .connector {136 position: absolute;137 height: 2px;138 background: #CFCFCF;139 }140 .dot {141 position: absolute;142 width: 26px;143 height: 26px;144 border-radius: 50%;145 background: #111111;146 border: 4px solid #ffffff;147 box-shadow: 0 0 0 2px #CFCFCF;148 }149 150 /* Next button */151 .next-btn {152 position: absolute;153 left: 60px;154 right: 60px;155 bottom: 190px;156 height: 170px;157 border-radius: 100px;158 background: linear-gradient(90deg, #2a62ff, #1f43ff);159 display: flex;160 align-items: center;161 justify-content: center;162 font-size: 64px;163 font-weight: 800;164 color: #ffffff;165 letter-spacing: 1px;166 }167 168 /* Bottom home indicator */169 .home-indicator {170 position: absolute;171 left: 50%;172 transform: translateX(-50%);173 bottom: 80px;174 width: 360px;175 height: 16px;176 background: #1a1a1a;177 border-radius: 12px;178 opacity: 0.08;179 }180</style>181</head>182<body>183<div id="render-target">184 185 <!-- Status Bar -->186 <div class="status-bar">187 <div>9:26</div>188 <div class="status-icons">189 <!-- Simple WiFi Icon -->190 <svg class="icon" viewBox="0 0 24 24">191 <path d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-6.5-6.5a9 9 0 0113 0l-1.9 1.9a6.5 6.5 0 00-9.2 0l-1.9-1.9zm-3.3-3.3a13 13 0 0119.6 0l-2 2a10.5 10.5 0 00-15.6 0l-2-2z" fill="#1a1a1a"/>192 </svg>193 <!-- Battery Icon -->194 <svg class="icon" viewBox="0 0 28 24">195 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#1a1a1a" stroke-width="2"/>196 <rect x="4" y="8" width="14" height="8" rx="1" ry="1" fill="#1a1a1a"/>197 <rect x="22" y="9" width="4" height="6" rx="1" ry="1" fill="#1a1a1a"/>198 </svg>199 </div>200 </div>201 202 <!-- Top Navigation -->203 <div class="top-nav">204 <div class="back-btn">205 <svg width="54" height="54" viewBox="0 0 24 24">206 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 <div class="progress">210 <div class="bar"></div>211 </div>212 <div class="skip">Skip</div>213 </div>214 215 <!-- Title -->216 <div class="title">Please choose your focus area</div>217 218 <!-- Right-side model image -->219 <div class="model">[IMG: Fitness model standing]</div>220 221 <!-- Options -->222 <div class="options">223 <div class="option">Full body</div>224 <div class="option" id="opt-arm">Arm</div>225 <div class="option" id="opt-chest">Chest</div>226 <div class="option" id="opt-abs">Abs</div>227 <div class="option" id="opt-leg">Leg</div>228 </div>229 230 <!-- Connectors to model -->231 <!-- Arm -->232 <div class="connector" style="left: 600px; top: 1050px; width: 270px;"></div>233 <div class="dot" style="left: 870px; top: 1038px;"></div>234 235 <!-- Chest -->236 <div class="connector" style="left: 600px; top: 1270px; width: 260px;"></div>237 <div class="dot" style="left: 860px; top: 1258px;"></div>238 239 <!-- Abs -->240 <div class="connector" style="left: 600px; top: 1490px; width: 270px;"></div>241 <div class="dot" style="left: 870px; top: 1478px;"></div>242 243 <!-- Leg -->244 <div class="connector" style="left: 600px; top: 1710px; width: 270px;"></div>245 <div class="dot" style="left: 870px; top: 1698px;"></div>246 247 <!-- Next Button -->248 <div class="next-btn">NEXT</div>249 250 <!-- Bottom Indicator -->251 <div class="home-indicator"></div>252 253</div>254</body>255</html>