GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Profile Screen Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #1f2123;14 color: #E9ECEF;15 }16 17 /* Top status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 96px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 color: #dfe4ea;29 font-size: 34px;30 letter-spacing: 0.5px;31 }32 .status-icons { display: flex; gap: 28px; align-items: center; }33 .status-icon {34 width: 36px; height: 36px; opacity: 0.9;35 }36 .battery {37 width: 52px; height: 28px; border: 3px solid #dfe4ea; border-radius: 6px; position: relative;38 }39 .battery::after {40 content: ""; position: absolute; right: -10px; top: 7px; width: 6px; height: 14px; background: #dfe4ea; border-radius: 2px;41 }42 .battery .level { position: absolute; left: 4px; top: 4px; width: 36px; height: 16px; background: #dfe4ea; border-radius: 3px; }43 44 /* Header area */45 .header {46 position: absolute;47 top: 96px;48 left: 0;49 width: 1080px;50 padding: 40px 48px 24px 48px;51 }52 .header-title {53 font-size: 98px;54 font-weight: 600;55 margin: 20px 0 20px 0;56 }57 .header-actions {58 position: absolute;59 right: 48px;60 top: 60px;61 display: flex;62 align-items: center;63 gap: 28px;64 }65 .icon-btn {66 width: 68px; height: 68px; display: flex; align-items: center; justify-content: center;67 border-radius: 50%;68 color: #cfd8dc; font-size: 44px; background: rgba(255,255,255,0.06);69 }70 .avatar {71 width: 92px; height: 92px; border-radius: 50%;72 background: #3aa6b7; display: flex; align-items: center; justify-content: center;73 font-weight: 700; font-size: 46px; color: #fff;74 }75 76 /* Sections */77 .content {78 position: absolute;79 top: 320px;80 left: 0; right: 0;81 padding: 0 48px;82 }83 .section-title {84 font-size: 42px;85 color: #c4c9ce;86 margin: 28px 0 24px 0;87 }88 .divider {89 height: 1px; width: 100%; background: #31363a; margin: 26px 0;90 }91 92 /* Tiles */93 .row {94 display: flex; gap: 40px; align-items: stretch;95 margin-bottom: 28px;96 }97 .tile {98 flex: 1;99 background: #242628;100 border: 1px solid #3a3f44;101 border-radius: 22px;102 padding: 28px;103 position: relative;104 min-height: 150px;105 }106 .tile .label {107 font-size: 34px; color: #b9c0c6; margin-bottom: 16px;108 }109 .tile .value {110 font-size: 56px; font-weight: 600; letter-spacing: 0.5px;111 }112 .chevron {113 position: absolute; right: 24px; top: 28px; width: 38px; height: 38px;114 fill: #b9c0c6;115 }116 117 /* Bedtime schedule row */118 .schedule-row {119 display: flex; align-items: center; justify-content: space-between;120 margin: 14px 0 22px 0;121 }122 .toggle {123 width: 132px; height: 64px; border-radius: 32px; background: #3a3f44; position: relative;124 }125 .toggle::before {126 content: ""; width: 54px; height: 54px; background: #b0b7bd; border-radius: 50%;127 position: absolute; left: 6px; top: 5px;128 }129 130 /* About you tiles */131 .short .value { font-size: 50px; }132 .tall { min-height: 150px; }133 134 /* Bottom navigation */135 .bottom-nav {136 position: absolute;137 bottom: 0; left: 0; width: 1080px; height: 160px;138 background: #252729;139 border-top: 1px solid #3a3f44;140 display: flex; justify-content: space-around; align-items: center;141 padding-bottom: 18px;142 }143 .nav-item {144 width: 200px; height: 120px;145 display: flex; flex-direction: column; align-items: center; justify-content: center;146 color: #b9c0c6; font-size: 34px; gap: 12px;147 }148 .nav-item.selected { color: #8ab4f8; }149 .nav-icon { width: 48px; height: 48px; fill: currentColor; opacity: 0.95; }150 151 /* Small helper for inline icon spacing */152 svg { display: block; }153</style>154</head>155<body>156<div id="render-target">157 158 <!-- Status bar -->159 <div class="status-bar">160 <div>8:07</div>161 <div class="status-icons">162 <!-- simple dot to represent notifications -->163 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="#dfe4ea"/></svg>164 <!-- wifi icon -->165 <svg class="status-icon" viewBox="0 0 24 24">166 <path d="M2 8c5-4 15-4 20 0" stroke="#dfe4ea" stroke-width="2" fill="none"/>167 <path d="M5 11c3-3 11-3 14 0" stroke="#dfe4ea" stroke-width="2" fill="none"/>168 <circle cx="12" cy="16" r="2" fill="#dfe4ea"/>169 </svg>170 <div class="battery"><div class="level"></div></div>171 </div>172 </div>173 174 <!-- Header -->175 <div class="header">176 <div class="header-actions">177 <div class="icon-btn">⚙</div>178 <div class="avatar">V</div>179 </div>180 <div class="header-title">Profile</div>181 </div>182 183 <!-- Content -->184 <div class="content">185 186 <div class="section-title">Activity goals</div>187 <div class="row">188 <div class="tile">189 <div class="label">Steps</div>190 <div class="value">8,000</div>191 <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#b9c0c6" stroke-width="2"/></svg>192 </div>193 <div class="tile">194 <div class="label">Heart Points</div>195 <div class="value">25</div>196 <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#b9c0c6" stroke-width="2"/></svg>197 </div>198 </div>199 200 <div class="section-title">Bedtime schedule</div>201 <div class="schedule-row">202 <div style="height:1px"></div>203 <div class="toggle"></div>204 </div>205 206 <div class="row">207 <div class="tile">208 <div class="label">Get in bed</div>209 <div class="value">11:00 PM</div>210 <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#b9c0c6" stroke-width="2"/></svg>211 </div>212 <div class="tile">213 <div class="label">Wake up</div>214 <div class="value">7:00 AM</div>215 <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#b9c0c6" stroke-width="2"/></svg>216 </div>217 </div>218 219 <div class="divider"></div>220 221 <div class="section-title">About you</div>222 223 <div class="row">224 <div class="tile">225 <div class="label">Gender</div>226 <div class="value short">Male</div>227 <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#b9c0c6" stroke-width="2"/></svg>228 </div>229 <div class="tile">230 <div class="label">Birthday</div>231 <div class="value short">Dec 3, 1992</div>232 <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#b9c0c6" stroke-width="2"/></svg>233 </div>234 </div>235 236 <div class="row">237 <div class="tile">238 <div class="label">Weight</div>239 <div class="value short">159.9 lb</div>240 <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#b9c0c6" stroke-width="2"/></svg>241 </div>242 <div class="tile">243 <div class="label">Height</div>244 <div class="value short">5'7"</div>245 <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#b9c0c6" stroke-width="2"/></svg>246 </div>247 </div>248 249 </div>250 251 <!-- Bottom navigation -->252 <div class="bottom-nav">253 <div class="nav-item">254 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 16-4 16 0" fill="none" stroke="currentColor" stroke-width="2"/></svg>255 </div>256 <div class="nav-item">257 <svg class="nav-icon" viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" ry="2" fill="currentColor"/></svg>258 </div>259 <div class="nav-item">260 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2"/></svg>261 </div>262 <div class="nav-item selected">263 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M6 22v-2a6 6 0 0 1 12 0v2" stroke="currentColor" stroke-width="2" fill="none"/></svg>264 <div>Profile</div>265 </div>266 </div>267 268</div>269</body>270</html>