GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Profile Honor Screen</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#F7F8FA;11 border-radius:0;12 }13 14 /* Top map header */15 .top-map { position:absolute; top:0; left:0; width:1080px; height:420px; background: linear-gradient(180deg,#9EB6DF 0%, #85A6D8 100%); }16 .top-map .img-placeholder {17 position:absolute; inset:0;18 background:#E0E0E0; border:1px solid #BDBDBD;19 display:flex; align-items:center; justify-content:center;20 color:#757575; font-size:32px; letter-spacing:0.5px;21 }22 23 /* Status row */24 .status { position:absolute; top:24px; left:36px; color:#ffffff; display:flex; align-items:center; gap:18px; }25 .status .time { font-size:40px; font-weight:700; }26 .icon-24 { width:40px; height:40px; }27 28 .top-right-icons { position:absolute; top:22px; right:32px; display:flex; gap:22px; align-items:center; color:#fff; }29 .wifi, .battery { width:44px; height:40px; }30 31 /* Floating controls */32 .back-btn, .three-dots {33 position:absolute; top:110px; width:64px; height:64px;34 background: rgba(255,255,255,0.35); border-radius:32px;35 display:flex; align-items:center; justify-content:center;36 }37 .back-btn { left:34px; }38 .three-dots { right:34px; }39 .location-pill {40 position:absolute; right:60px; top:300px;41 background: rgba(0,0,0,0.45); color:#fff;42 padding:14px 24px; border-radius:28px; font-size:36px; font-weight:600;43 }44 45 /* White profile sheet */46 .profile-card {47 position:absolute; top:376px; left:0; width:1080px;48 background:#ffffff; border-top-left-radius:36px; border-top-right-radius:36px;49 box-shadow: 0 -8px 20px rgba(0,0,0,0.06);50 padding-bottom:40px;51 }52 53 .user-row { display:flex; gap:30px; padding:54px 52px 24px 52px; align-items:flex-start; }54 .avatar {55 width:180px; height:180px; border-radius:90px;56 background:#E0E0E0; border:1px solid #BDBDBD;57 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; position:relative;58 }59 .flag {60 position:absolute; bottom:-16px; left:-14px;61 width:68px; height:68px; border-radius:34px;62 background:#E0E0E0; border:1px solid #BDBDBD;63 display:flex; align-items:center; justify-content:center;64 color:#757575; font-size:18px;65 }66 67 .user-info { flex:1; }68 69 .name-row { display:flex; align-items:center; gap:18px; }70 .name-row .name { font-size:56px; font-weight:800; color:#2B2B2B; }71 .pill {72 font-size:28px; background:#5E7AF7; color:#fff;73 padding:6px 14px; border-radius:24px; font-weight:700;74 }75 .hex-badge {76 width:36px; height:36px; background:#F2C089;77 border-radius:10px; border:1px solid #E2A96D;78 }79 80 .lang-row { margin-top:14px; display:flex; align-items:center; gap:16px; }81 .lang-col { display:flex; flex-direction:column; gap:6px; }82 .lang-title { font-weight:700; color:#222; font-size:34px; }83 .lang-sub { color:#727272; font-size:28px; }84 .swap {85 width:38px; height:38px; border:2px dashed #CBD3F6; border-radius:8px;86 display:flex; align-items:center; justify-content:center; color:#5260A8; font-size:26px;87 }88 89 .handle-row { margin-top:18px; display:flex; align-items:center; gap:22px; color:#6B6B6B; font-size:30px; }90 .active { display:flex; align-items:center; gap:10px; color:#2E2E2E; }91 .active .dot { width:16px; height:16px; background:#28C76F; border-radius:8px; box-shadow:0 0 0 6px rgba(40,199,111,0.22); }92 93 /* Tabs */94 .tabs { display:flex; gap:60px; padding:26px 52px; border-top:1px solid #EEEEEE; }95 .tab { font-size:36px; color:#707070; }96 .tab.active { color:#5F6AF6; position:relative; }97 .tab.active::after { content:""; position:absolute; bottom:-16px; left:0; width:100%; height:6px; background:#5F6AF6; border-radius:3px; }98 99 /* Honor sections */100 .section { margin:22px 34px; }101 .section-header { display:flex; align-items:center; justify-content:space-between; padding:14px 8px; }102 .section-header .title { font-size:40px; font-weight:800; color:#2B2B2B; }103 .section-header .more { color:#8D8D8D; font-size:30px; }104 105 .gift-panel {106 margin-top:10px; border:1px solid #E8D5C7; background:#F7EBE2;107 border-radius:24px; height:300px;108 display:flex; align-items:center; gap:70px; padding:40px;109 }110 .gift-icon {111 width:130px; height:130px; border-radius:28px;112 background:#E0E0E0; border:1px solid #BDBDBD;113 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;114 }115 .stat { font-size:44px; color:#2B2B2B; }116 .stat small { display:block; font-size:28px; color:#787878; margin-top:6px; }117 .panel-bubbles {118 margin-left:auto; width:220px; height:220px;119 background:#EBD7CB; border:1px dashed #E0C6B6; border-radius:24px;120 display:flex; align-items:center; justify-content:center;121 color:#A78A77; font-size:24px; text-align:center; padding:8px;122 }123 124 .showcase-row {125 margin-top:26px; display:flex; align-items:center; justify-content:space-between;126 padding:26px 24px; background:#ffffff; border:1px solid #EEEEEE; border-radius:24px;127 font-size:40px; font-weight:800; color:#2B2B2B;128 }129 .chevron { width:36px; height:36px; }130 131 /* Bottom action bar */132 .bottom-bar {133 position:absolute; bottom:0; left:0; width:1080px; height:180px;134 background:#F7F7F7; border-top:1px solid #E6E6E6;135 display:flex; align-items:center; justify-content:space-around;136 }137 .action { display:flex; flex-direction:column; align-items:center; color:#5F6AF6; }138 .action .icon {139 width:74px; height:74px; border-radius:37px; border:2px solid #BFC7FF;140 display:flex; align-items:center; justify-content:center; margin-bottom:10px; background:#FFFFFF;141 }142 .action .label { font-size:34px; }143 .follow .icon { background:#E9EDFF; }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Top map area with world map placeholder -->150 <div class="top-map">151 <div class="img-placeholder">[IMG: World Map Background]</div>152 </div>153 154 <!-- Status -->155 <div class="status">156 <div class="time">12:32</div>157 <svg class="icon-24" viewBox="0 0 24 24">158 <path d="M2 6h20v12H2V6zm2 0l8 6 8-6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>159 </svg>160 </div>161 <div class="top-right-icons">162 <!-- WiFi -->163 <svg class="wifi" viewBox="0 0 24 24">164 <path d="M2 9c5-5 15-5 20 0M6 13c3-3 9-3 12 0M10 17c2-2 6-2 8 0M14 21l-2-2-2 2" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>165 </svg>166 <!-- Battery -->167 <svg class="battery" viewBox="0 0 26 24">168 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#ffffff" fill="none" stroke-width="2"></rect>169 <rect x="4" y="8" width="14" height="8" fill="#ffffff"></rect>170 <rect x="21" y="9" width="3" height="6" rx="1" fill="#ffffff"></rect>171 </svg>172 </div>173 174 <!-- Floating Controls -->175 <div class="back-btn">176 <svg width="28" height="28" viewBox="0 0 24 24">177 <path d="M15 19l-7-7 7-7" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>178 </svg>179 </div>180 <div class="three-dots">181 <svg width="28" height="28" viewBox="0 0 24 24">182 <circle cx="5" cy="12" r="2" fill="#ffffff"></circle>183 <circle cx="12" cy="12" r="2" fill="#ffffff"></circle>184 <circle cx="19" cy="12" r="2" fill="#ffffff"></circle>185 </svg>186 </div>187 188 <!-- Location pill -->189 <div class="location-pill">Niger 8:02 AM.</div>190 191 <!-- White profile sheet -->192 <div class="profile-card">193 194 <div class="user-row">195 <div class="avatar">[IMG: User Avatar]196 <div class="flag">[IT]</div>197 </div>198 199 <div class="user-info">200 <div class="name-row">201 <div class="name">Simone</div>202 <div class="pill">♂ 36</div>203 <div class="hex-badge"></div>204 </div>205 206 <div class="lang-row">207 <div class="lang-col">208 <div class="lang-title">IT</div>209 <div class="lang-sub">Italiano</div>210 </div>211 <div class="swap">⇄</div>212 <div class="lang-col">213 <div class="lang-title">EN</div>214 <div class="lang-sub">English</div>215 </div>216 </div>217 218 <div class="handle-row">219 <div>@ht_simone202</div>220 <div class="active"><div class="dot"></div><div>Active now</div></div>221 </div>222 </div>223 </div>224 225 <!-- Tabs -->226 <div class="tabs">227 <div class="tab">Profile</div>228 <div class="tab">Moments</div>229 <div class="tab active">Honor</div>230 </div>231 232 <!-- Honor: Gift Wall -->233 <div class="section">234 <div class="section-header">235 <div class="title">Gift Wall</div>236 <div class="more">More details ›</div>237 </div>238 <div class="gift-panel">239 <div class="gift-icon">[IMG: Badge]</div>240 <div class="stat">0<small>Collected</small></div>241 <div class="stat">0%<small>Progress</small></div>242 <div class="panel-bubbles">Decorative bubbles</div>243 </div>244 </div>245 246 <!-- Showcase -->247 <div class="section">248 <div class="showcase-row">249 <div>Showcase (0)</div>250 <svg class="chevron" viewBox="0 0 24 24">251 <path d="M9 6l6 6-6 6" fill="none" stroke="#9AA0A6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </div>254 </div>255 256 </div>257 258 <!-- Bottom action bar -->259 <div class="bottom-bar">260 <div class="action">261 <div class="icon">262 <svg width="34" height="34" viewBox="0 0 24 24">263 <path d="M4 19v-8a6 6 0 1 1 12 0v8H9l-5 4v-4z" fill="none" stroke="#5F6AF6" stroke-width="2" stroke-linejoin="round"/>264 </svg>265 </div>266 <div class="label">Say Hi</div>267 </div>268 269 <div class="action follow">270 <div class="icon">271 <svg width="34" height="34" viewBox="0 0 24 24">272 <path d="M12 5v14M5 12h14" stroke="#5F6AF6" stroke-width="2" fill="none" stroke-linecap="round"/>273 </svg>274 </div>275 <div class="label">Follow</div>276 </div>277 </div>278 279</div>280</body>281</html>