GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Profile Edit UI</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 * { box-sizing: border-box; }10 #render-target {11 position: relative;12 overflow: hidden;13 width: 1080px;14 height: 2400px;15 background: #ffffff;16 border-radius: 0;17 }18 19 /* Top banner with map */20 .banner {21 position: relative;22 width: 1080px;23 height: 540px;24 background: linear-gradient(#6f88ad, #6a84a6);25 }26 .status-bar {27 position: absolute;28 top: 16px;29 left: 24px;30 right: 24px;31 height: 60px;32 display: flex;33 align-items: center;34 color: #fff;35 font: 500 32px/1.2 Arial, sans-serif;36 }37 .status-bar .time { margin-right: 18px; }38 .status-icons {39 display: flex;40 gap: 22px;41 margin-left: 8px;42 flex: 1;43 }44 .status-icons span {45 width: 26px; height: 26px; border-radius: 50%;46 background: rgba(255,255,255,0.85);47 display: inline-block;48 }49 .status-right {50 margin-left: auto; display: flex; gap: 18px; align-items: center;51 }52 .wifi {53 width: 34px; height: 24px;54 }55 .battery {56 width: 40px; height: 24px;57 }58 59 .map-placeholder {60 position: absolute;61 left: 24px; right: 24px; top: 80px; bottom: 24px;62 background: #E0E0E0;63 border: 1px solid #BDBDBD;64 border-radius: 12px;65 display: flex; align-items: center; justify-content: center;66 color: #757575; font: 500 30px/1.2 Arial, sans-serif;67 opacity: 0.35;68 }69 70 .back-btn {71 position: absolute; left: 30px; top: 170px;72 width: 64px; height: 64px;73 }74 .edit-pill {75 position: absolute; right: 40px; top: 290px;76 padding: 16px 26px;77 background: rgba(0,0,0,0.35);78 color: #fff;79 border-radius: 28px;80 font: 600 32px/1 Arial, sans-serif;81 }82 83 /* Main white sheet */84 .sheet {85 position: absolute;86 left: 0; right: 0;87 top: 400px;88 background: #fff;89 border-top-left-radius: 42px;90 border-top-right-radius: 42px;91 padding-bottom: 160px;92 box-shadow: 0 -4px 8px rgba(0,0,0,0.06);93 }94 95 /* Avatar */96 .avatar-wrap {97 position: absolute;98 left: 50%;99 transform: translateX(-50%);100 top: -110px;101 width: 220px; height: 220px;102 border-radius: 50%;103 background: #8b6f62;104 display: flex; align-items: center; justify-content: center;105 color: #fff; font: 700 120px/1 Arial, sans-serif;106 box-shadow: 0 6px 16px rgba(0,0,0,0.25);107 }108 .camera-badge {109 position: absolute; right: -8px; bottom: -8px;110 width: 64px; height: 64px; border-radius: 50%;111 background: #6f8cf8;112 display: flex; align-items: center; justify-content: center;113 box-shadow: 0 2px 8px rgba(0,0,0,0.25);114 }115 .camera-badge svg { width: 34px; height: 34px; }116 117 /* Tips and progress */118 .tip {119 margin: 160px auto 14px auto;120 width: 92%;121 background: #efefef;122 color: #777;123 border-radius: 20px;124 padding: 22px 26px;125 font: 500 30px/1.4 Arial, sans-serif;126 }127 .progress-row {128 width: 92%;129 margin: 12px auto 16px auto;130 color: #9e9e9e;131 font: 500 32px/1.2 Arial, sans-serif;132 display: flex; align-items: center; gap: 10px;133 }134 .progress-row .percent { color: #6788f7; }135 .progress-bar {136 width: 92%;137 height: 12px;138 background: #e5e5e5;139 border-radius: 8px;140 margin: 6px auto 28px auto;141 overflow: hidden;142 }143 .progress-fill {144 width: 35%;145 height: 100%;146 background: #6f8cf8;147 border-top-right-radius: 8px; border-bottom-right-radius: 8px;148 }149 150 /* Rows */151 .group-divider {152 width: 100%;153 height: 18px;154 background: #f5f5f5;155 border-top: 1px solid #eee;156 border-bottom: 1px solid #eee;157 margin: 10px 0 20px 0;158 }159 160 .row {161 position: relative;162 width: 100%;163 padding: 28px 34px;164 display: flex;165 align-items: center;166 border-bottom: 1px solid #f0f0f0;167 }168 .row .label {169 color: #222;170 font: 700 44px/1.2 Arial, sans-serif;171 }172 .row .sub {173 margin-top: 12px;174 color: #b5b5b5;175 font: 500 32px/1.4 Arial, sans-serif;176 }177 .row .right {178 margin-left: auto;179 color: #757575;180 font: 600 38px/1.2 Arial, sans-serif;181 }182 .chev {183 margin-left: 16px;184 width: 36px; height: 36px;185 }186 .dot {187 position: absolute;188 right: 94px;189 top: 46px;190 width: 14px; height: 14px; border-radius: 50%;191 background: #ff6b6b;192 }193 194 /* Language badges */195 .lang-tags {196 display: flex; align-items: center; gap: 16px;197 color: #1b1b1b;198 font: 600 34px/1.2 Arial, sans-serif;199 }200 .lang-bars {201 display: flex; gap: 22px; margin-top: 8px;202 }203 .bar {204 width: 80px; height: 8px; border-radius: 6px;205 }206 .bar.en { background: #31b36b; }207 .bar.de { background: #4d6df2; }208 209 .submit {210 text-align: center;211 color: #6f8cf8;212 font: 600 40px/1.2 Arial, sans-serif;213 margin: 34px 0 80px 0;214 }215 216 /* Footer safe-area (gesture bar) mock */217 .gesture-bar {218 position: absolute; bottom: 22px; left: 50%;219 transform: translateX(-50%);220 width: 320px; height: 12px; background: #d1d1d1; border-radius: 12px;221 }222</style>223</head>224<body>225<div id="render-target">226 227 <div class="banner">228 <div class="status-bar">229 <div class="time">1:43</div>230 <div class="status-icons">231 <span></span><span></span><span></span><span></span><span></span>232 </div>233 <div class="status-right">234 <!-- simple wifi and battery icons -->235 <svg class="wifi" viewBox="0 0 24 24" fill="none">236 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>237 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>238 <circle cx="12" cy="16" r="2" fill="#fff"/>239 </svg>240 <svg class="battery" viewBox="0 0 28 18" fill="none">241 <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>242 <rect x="24" y="6" width="3" height="6" rx="1" fill="#fff"/>243 <rect x="3" y="5" width="14" height="8" rx="1" fill="#fff"/>244 </svg>245 </div>246 </div>247 248 <div class="map-placeholder">[IMG: World Map]</div>249 250 <svg class="back-btn" viewBox="0 0 40 40">251 <path d="M24 8 L12 20 L24 32" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>252 </svg>253 254 <div class="edit-pill">Edit</div>255 </div>256 257 <div class="sheet">258 <div class="avatar-wrap">259 C260 <div class="camera-badge">261 <svg viewBox="0 0 24 24" fill="none">262 <rect x="4" y="7" width="16" height="11" rx="2" stroke="#fff" stroke-width="2"/>263 <rect x="8" y="5" width="8" height="3" rx="1" fill="#fff"/>264 <circle cx="12" cy="12" r="3" stroke="#fff" stroke-width="2"/>265 </svg>266 </div>267 </div>268 269 <div class="tip">Get more exposure when your profile reaches 100% completion.</div>270 271 <div class="progress-row">272 <div>Profile progress</div>273 <div class="percent">35%</div>274 </div>275 <div class="progress-bar"><div class="progress-fill"></div></div>276 277 <!-- Name -->278 <div class="row">279 <div>280 <div class="label">Name</div>281 </div>282 <div class="right">Cerebra Research</div>283 <svg class="chev" viewBox="0 0 24 24">284 <path d="M9 6 L15 12 L9 18" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>285 </svg>286 </div>287 288 <!-- Language -->289 <div class="row">290 <div style="flex:1">291 <div class="label">Language</div>292 <div class="lang-bars">293 <div class="bar en"></div>294 <div class="bar de"></div>295 </div>296 </div>297 <div class="lang-tags">EN ⇄ DE</div>298 <svg class="chev" viewBox="0 0 24 24">299 <path d="M9 6 L15 12 L9 18" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>300 </svg>301 </div>302 303 <div class="group-divider"></div>304 305 <!-- Self-introduction -->306 <div class="row" style="padding-top:30px; padding-bottom:34px;">307 <div style="flex:1">308 <div class="label">Self-introduction</div>309 <div class="sub">310 <svg viewBox="0 0 24 24" width="28" height="28" style="vertical-align: middle; margin-right: 10px;">311 <path d="M4 20h4l10-10-4-4L4 16v4z" fill="#cfcfcf"/>312 </svg>313 Add Bio and Audio Bio so more users can find you314 </div>315 </div>316 <div class="dot"></div>317 <svg class="chev" viewBox="0 0 24 24">318 <path d="M9 6 L15 12 L9 18" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>319 </svg>320 </div>321 322 <!-- Interest & Hobbies -->323 <div class="row" style="padding-top:30px; padding-bottom:34px;">324 <div style="flex:1">325 <div class="label">Interest & Hobbies</div>326 <div class="sub">327 <svg viewBox="0 0 24 24" width="28" height="28" style="vertical-align: middle; margin-right: 10px;">328 <path d="M4 20h4l10-10-4-4L4 16v4z" fill="#cfcfcf"/>329 </svg>330 Share interests to attract friends!331 </div>332 </div>333 <div class="dot"></div>334 <svg class="chev" viewBox="0 0 24 24">335 <path d="M9 6 L15 12 L9 18" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>336 </svg>337 </div>338 339 <!-- Places I want to go -->340 <div class="row">341 <div class="label">Places I want to go</div>342 <div class="right">Not Set</div>343 <div class="dot"></div>344 <svg class="chev" viewBox="0 0 24 24">345 <path d="M9 6 L15 12 L9 18" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>346 </svg>347 </div>348 349 <!-- My Occupation -->350 <div class="row">351 <div class="label">My Occupation</div>352 <div class="right">Not Set</div>353 <div class="dot"></div>354 <svg class="chev" viewBox="0 0 24 24">355 <path d="M9 6 L15 12 L9 18" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>356 </svg>357 </div>358 359 <!-- My Hometown -->360 <div class="row">361 <div class="label">My Hometown</div>362 <div class="right">Not Set</div>363 <div class="dot"></div>364 <svg class="chev" viewBox="0 0 24 24">365 <path d="M9 6 L15 12 L9 18" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>366 </svg>367 </div>368 369 <!-- My School -->370 <div class="row">371 <div class="label">My School</div>372 <div class="right">Not Set</div>373 <div class="dot"></div>374 <svg class="chev" viewBox="0 0 24 24">375 <path d="M9 6 L15 12 L9 18" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>376 </svg>377 </div>378 379 <div class="group-divider"></div>380 381 <!-- Location -->382 <div class="row">383 <div class="label">Location</div>384 <div class="right">Location Not Provided</div>385 <svg class="chev" viewBox="0 0 24 24">386 <path d="M9 6 L15 12 L9 18" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>387 </svg>388 </div>389 390 <div class="submit">Submit</div>391 </div>392 393 <div class="gesture-bar"></div>394</div>395</body>396</html>