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>Profile Edit UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #FFFFFF;11 }12 13 /* Top header area */14 .header {15 position: absolute; top: 0; left: 0; width: 100%; height: 520px;16 background: linear-gradient(180deg, #6E86A8 0%, #5F7AA0 100%);17 }18 .map-placeholder {19 position: absolute; left: 0; top: 0; width: 1080px; height: 520px;20 background: #E0E0E0; border: 1px solid #BDBDBD;21 display: flex; align-items: center; justify-content: center;22 color: #757575; font-size: 34px; letter-spacing: 0.5px; opacity: 0.35;23 }24 25 /* Status bar */26 .status-bar { position: absolute; top: 20px; left: 24px; right: 24px; height: 44px; display: flex; align-items: center; color: #fff; }27 .status-time { font-size: 36px; font-weight: 600; margin-right: 20px; }28 .status-icons { display: flex; gap: 18px; align-items: center; }29 .icon-dot { width: 16px; height: 16px; background: rgba(255,255,255,0.9); border-radius: 50%; }30 .wifi-battery { margin-left: auto; display: flex; align-items: center; gap: 22px; }31 .wifi-icon, .battery-icon { display: inline-block; }32 .wifi-icon svg, .battery-icon svg { width: 38px; height: 24px; }33 34 /* Back and Edit */35 .back-btn { position: absolute; left: 24px; top: 120px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }36 .back-btn svg { width: 40px; height: 40px; }37 .edit-pill {38 position: absolute; right: 24px; top: 120px; background: rgba(0,0,0,0.4);39 color: #fff; padding: 10px 22px; border-radius: 24px; font-size: 34px; display: flex; align-items: center; gap: 12px;40 }41 .edit-pill svg { width: 26px; height: 26px; }42 43 /* White sheet */44 .sheet {45 position: absolute; top: 360px; left: 0; width: 100%; height: calc(100% - 360px);46 background: #fff; border-top-left-radius: 36px; border-top-right-radius: 36px; box-shadow: 0 -6px 16px rgba(0,0,0,0.08);47 }48 49 /* Avatar */50 .avatar-wrap {51 position: absolute; top: -110px; left: 50%; transform: translateX(-50%);52 width: 220px; height: 220px; border-radius: 50%; background: #7E665A; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 110px; font-weight: 700;53 box-shadow: 0 8px 16px rgba(0,0,0,0.15);54 }55 .camera-badge {56 position: absolute; right: -4px; bottom: 8px; width: 60px; height: 60px; border-radius: 50%; background: #4F78FF;57 display: flex; align-items: center; justify-content: center; border: 4px solid #fff;58 }59 .camera-badge svg { width: 34px; height: 28px; fill: #fff; }60 61 /* Message chip */62 .tip-chip {63 position: absolute; top: 140px; left: 50%; transform: translateX(-50%);64 background: #F0F0F0; color: #888; font-size: 32px; padding: 18px 24px; border-radius: 20px; border: 1px solid #E4E4E4;65 max-width: 910px; text-align: center;66 }67 68 /* Progress */69 .progress-text {70 position: absolute; top: 216px; left: 50%; transform: translateX(-50%); width: 910px;71 text-align: center; font-size: 34px; color: #9E9E9E;72 }73 .progress-text .blue { color: #3D6BFF; font-weight: 600; }74 .progress-bar {75 position: absolute; top: 266px; left: 50%; transform: translateX(-50%); width: 720px; height: 10px; background: #E6E6E6; border-radius: 6px; overflow: hidden;76 }77 .progress-fill { width: 35%; height: 100%; background: #6F82FF; }78 79 /* List sections */80 .list { position: absolute; top: 320px; left: 40px; right: 40px; }81 .item {82 position: relative; padding: 34px 80px 34px 0; border-bottom: 1px solid #EEEEEE;83 }84 .item-title { font-size: 42px; color: #222; font-weight: 700; }85 .item-sub { margin-top: 10px; color: #B0B0B0; font-size: 34px; display: flex; align-items: center; gap: 12px; }86 .right-info { position: absolute; right: 80px; top: 34px; font-size: 36px; color: #8E8E8E; }87 .chev { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }88 .chev svg { width: 26px; height: 26px; fill: #C7C7C7; }89 .req-dot { position: absolute; right: 140px; top: 44px; width: 14px; height: 14px; background: #FF6B6B; border-radius: 50%; }90 91 .lang-badges { position: absolute; right: 80px; top: 30px; display: flex; align-items: center; gap: 10px; color: #333; font-size: 30px; }92 .lang-bars { display: flex; gap: 12px; margin-top: 6px; }93 .bar { width: 36px; height: 6px; border-radius: 3px; }94 .bar.en { background: #3CC98E; }95 .bar.de { background: #5677FF; }96 .pencil svg { width: 28px; height: 28px; fill: #B0B0B0; }97 98 .divider { height: 18px; background: #F7F7F7; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; }99 100 /* Footer submit */101 .submit {102 position: absolute; bottom: 140px; left: 0; width: 100%; text-align: center; font-size: 38px; color: #5A77FF;103 }104 105 /* Android navigation bar */106 .android-nav {107 position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: #000;108 }109 .home-pill {110 position: absolute; top: 18px; left: 50%; transform: translateX(-50%);111 width: 240px; height: 10px; background: #C7C7C7; border-radius: 8px;112 }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Header background with world map placeholder -->119 <div class="header">120 <div class="map-placeholder">[IMG: World Map Background]</div>121 122 <div class="status-bar">123 <div class="status-time">1:45</div>124 <div class="status-icons">125 <div class="icon-dot"></div>126 <div class="icon-dot"></div>127 <div class="icon-dot"></div>128 <div class="icon-dot"></div>129 <div class="icon-dot"></div>130 </div>131 <div class="wifi-battery">132 <span class="wifi-icon">133 <svg viewBox="0 0 24 24">134 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>135 <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>136 <circle cx="12" cy="16" r="2" fill="#fff"/>137 </svg>138 </span>139 <span class="battery-icon">140 <svg viewBox="0 0 32 16">141 <rect x="2" y="3" width="26" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>142 <rect x="4" y="5" width="18" height="6" fill="#fff"/>143 <rect x="28" y="6" width="3" height="4" fill="#fff"/>144 </svg>145 </span>146 </div>147 </div>148 149 <div class="back-btn">150 <svg viewBox="0 0 48 48">151 <path d="M28 10 L12 24 L28 38" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>152 </svg>153 </div>154 155 <div class="edit-pill">156 <svg viewBox="0 0 24 24">157 <path d="M12 2 L13 7 L18 8 L13 10 L12 15 L11 10 L6 8 L11 7 Z" fill="#fff"/>158 </svg>159 Edit160 </div>161 </div>162 163 <!-- Main white sheet -->164 <div class="sheet">165 <div class="avatar-wrap">166 C167 <div class="camera-badge">168 <svg viewBox="0 0 24 24">169 <rect x="3" y="7" width="18" height="12" rx="2" ry="2"></rect>170 <circle cx="12" cy="13" r="4"></circle>171 <rect x="9" y="4" width="6" height="3"></rect>172 </svg>173 </div>174 </div>175 176 <div class="tip-chip">Get more exposure when your profile reaches 100% completion.</div>177 <div class="progress-text">Profile progress <span class="blue">35%</span></div>178 <div class="progress-bar"><div class="progress-fill"></div></div>179 180 <div class="list">181 182 <!-- Name -->183 <div class="item">184 <div class="item-title">Name</div>185 <div class="right-info">Global</div>186 <div class="chev">187 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>188 </div>189 </div>190 191 <!-- Language -->192 <div class="item">193 <div class="item-title">Language</div>194 <div class="lang-badges">195 <span>EN</span>196 <span style="opacity:0.6;">↔</span>197 <span>DE</span>198 </div>199 <div class="lang-bars">200 <div class="bar en"></div>201 <div class="bar de"></div>202 </div>203 <div class="chev">204 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>205 </div>206 </div>207 208 <div class="divider"></div>209 210 <!-- Self-introduction -->211 <div class="item">212 <div class="item-title">Self-introduction</div>213 <div class="req-dot"></div>214 <div class="item-sub">215 <span class="pencil">216 <svg viewBox="0 0 24 24"><path d="M3 17 L7 21 L21 7 L17 3 Z M3 17 L3 21 L7 21" /></svg>217 </span>218 Add Bio and Audio Bio so more users can find you219 </div>220 <div class="chev">221 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>222 </div>223 </div>224 225 <!-- Interest & Hobbies -->226 <div class="item">227 <div class="item-title">Interest & Hobbies</div>228 <div class="req-dot"></div>229 <div class="item-sub">230 <span class="pencil">231 <svg viewBox="0 0 24 24"><path d="M3 17 L7 21 L21 7 L17 3 Z M3 17 L3 21 L7 21" /></svg>232 </span>233 Share interests to attract friends!234 </div>235 <div class="chev">236 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>237 </div>238 </div>239 240 <!-- Places I want to go -->241 <div class="item">242 <div class="item-title">Places I want to go</div>243 <div class="right-info">Not Set</div>244 <div class="req-dot"></div>245 <div class="chev">246 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>247 </div>248 </div>249 250 <!-- My Occupation -->251 <div class="item">252 <div class="item-title">My Occupation</div>253 <div class="right-info">Not Set</div>254 <div class="chev">255 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>256 </div>257 </div>258 259 <!-- My Hometown -->260 <div class="item">261 <div class="item-title">My Hometown</div>262 <div class="right-info">Not Set</div>263 <div class="chev">264 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>265 </div>266 </div>267 268 <!-- My School -->269 <div class="item">270 <div class="item-title">My School</div>271 <div class="right-info"