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 Screen</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#FFFFFF;13 border-radius:36px;14 box-shadow:0 8px 24px rgba(0,0,0,0.12);15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color:#1f2937;17 }18 /* Status bar */19 .statusbar {20 position:absolute; top:0; left:0; right:0;21 height:110px; padding:28px 40px 0 40px;22 display:flex; align-items:center; justify-content:space-between;23 font-size:36px; color:#374151;24 }25 .status-left { display:flex; gap:28px; align-items:center; }26 .status-right { display:flex; gap:26px; align-items:center; }27 .header {28 position:absolute; top:110px; left:0; right:0;29 padding:48px 48px 36px 48px;30 background:#fff;31 }32 .header h1 {33 margin:0;34 font-size:64px; font-weight:700; letter-spacing:0.2px;35 }36 .avatar {37 position:absolute; right:48px; top:170px;38 width:120px; height:120px; border-radius:60px;39 background:#8D6E63; color:#fff; display:flex; align-items:center; justify-content:center;40 font-size:56px; font-weight:700;41 box-shadow:0 6px 14px rgba(0,0,0,0.12);42 }43 .content {44 position:absolute; top:310px; left:0; right:0; bottom:180px;45 padding:0 48px;46 overflow:auto;47 }48 .section-title {49 font-size:50px; font-weight:700; margin:40px 0 24px 0;50 }51 .list {52 display:flex; flex-direction:column; gap:6px;53 }54 .item {55 display:flex; align-items:center;56 padding:34px 24px;57 border-radius:22px;58 transition:background 0.2s ease;59 }60 .item:hover { background:#f8fafc; }61 .icon {62 width:56px; height:56px; display:flex; align-items:center; justify-content:center;63 margin-right:28px;64 }65 .item-text {66 flex:1;67 display:flex; flex-direction:column;68 }69 .title {70 font-size:42px; font-weight:600; color:#111827;71 }72 .subtitle {73 font-size:32px; color:#6b7280; margin-top:8px;74 }75 .chevron {76 width:38px; height:38px; margin-left:16px;77 }78 .pill {79 margin-left:18px;80 padding:10px 22px;81 border-radius:999px;82 font-size:32px; font-weight:600;83 color:#1f5fbf; background:#e8f0ff;84 }85 .divider {86 height:1px; background:#e5e7eb; margin:18px 0 8px 0;87 }88 .card {89 margin:36px 0;90 background:#F3F6F8;91 border:1px solid #E5E8EB;92 border-radius:28px;93 padding:28px;94 display:flex; align-items:center; gap:28px;95 box-shadow:0 1px 0 rgba(0,0,0,0.04) inset;96 }97 .img-placeholder {98 width:160px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;99 border-radius:14px; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; text-align:center;100 }101 .card-text { flex:1; }102 .card-title { font-size:40px; font-weight:600; color:#1f2937; }103 .card-link { font-size:38px; color:#0ba888; font-weight:700; margin-top:8px; }104 /* Bottom navigation */105 .bottom-nav {106 position:absolute; left:0; right:0; bottom:0;107 height:180px; border-top:1px solid #e5e7eb; background:#ffffff;108 display:flex; align-items:center; justify-content:space-around;109 padding-bottom:22px;110 }111 .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; }112 .nav-item span { font-size:32px; color:#6b7280; }113 .nav-item.active span { color:#0ba888; font-weight:700; }114 .home-indicator {115 position:absolute; left:50%; transform:translateX(-50%);116 bottom:18px; width:420px; height:14px; border-radius:7px; background:#cfd8dc;117 }118 /* Small helper text sizes for "Settings" heading above nav */119 .settings-title { font-size:48px; font-weight:700; margin:30px 0 0 0; }120</style>121</head>122<body>123<div id="render-target">124 <!-- Status bar -->125 <div class="statusbar">126 <div class="status-left">127 <div>8:11</div>128 <div>83°</div>129 <div style="display:flex; align-items:center;">130 <!-- Timer icon -->131 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">132 <circle cx="12" cy="13" r="8" stroke="#6b7280" stroke-width="2"></circle>133 <path d="M12 13V9" stroke="#6b7280" stroke-width="2" stroke-linecap="round"></path>134 <rect x="9" y="3" width="6" height="2" rx="1" fill="#6b7280"></rect>135 </svg>136 </div>137 <!-- Mail icon -->138 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">139 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#6b7280" stroke-width="2"/>140 <path d="M3 8l9 6 9-6" stroke="#6b7280" stroke-width="2" fill="none"/>141 </svg>142 <div style="width:8px; height:8px; background:#6b7280; border-radius:50%;"></div>143 </div>144 <div class="status-right">145 <!-- WiFi icon -->146 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">147 <path d="M2 9c5-5 15-5 20 0" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>148 <path d="M5 12c3-3 11-3 14 0" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>149 <path d="M8 15c2-2 6-2 8 0" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>150 <circle cx="12" cy="18" r="1.5" fill="#6b7280"/>151 </svg>152 <!-- Battery icon -->153 <svg width="46" height="40" viewBox="0 0 28 24" fill="none">154 <rect x="1" y="5" width="22" height="14" rx="2" stroke="#6b7280" stroke-width="2"/>155 <rect x="24" y="9" width="3" height="6" rx="1" fill="#6b7280"/>156 <rect x="3" y="7" width="14" height="10" fill="#6b7280"/>157 </svg>158 </div>159 </div>160 161 <!-- Header with name and avatar -->162 <div class="header">163 <h1>Thomas Blanc</h1>164 </div>165 <div class="avatar">T</div>166 167 <!-- Main content -->168 <div class="content">169 <div class="section-title">Notifications and support</div>170 <div class="list">171 <!-- Inbox -->172 <div class="item">173 <div class="icon">174 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">175 <rect x="3" y="5" width="18" height="14" rx="3" stroke="#374151" stroke-width="2"/>176 <path d="M3 8l9 6 9-6" stroke="#374151" stroke-width="2"/>177 </svg>178 </div>179 <div class="item-text">180 <div class="title">Inbox</div>181 </div>182 <svg class="chevron" viewBox="0 0 24 24">183 <path d="M9 6l6 6-6 6" fill="none" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>184 </svg>185 </div>186 187 <!-- Price alerts -->188 <div class="item">189 <div class="icon">190 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">191 <path d="M12 3c-3 0-5 2-5 5v3l-2 2v1h14v-1l-2-2V8c0-3-2-5-5-5z" stroke="#374151" stroke-width="2" fill="none"/>192 <circle cx="12" cy="18" r="2" fill="#374151"/>193 </svg>194 </div>195 <div class="item-text">196 <div class="title">Price alerts</div>197 </div>198 <svg class="chevron" viewBox="0 0 24 24">199 <path d="M9 6l6 6-6 6" fill="none" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>200 </svg>201 </div>202 203 <!-- Help -->204 <div class="item">205 <div class="icon">206 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">207 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2"/>208 <circle cx="12" cy="16" r="1" fill="#374151"/>209 <path d="M10.8 9.2c.5-1.6 3.2-1.6 3.7.1.3.9-.5 1.5-1.2 2-.6.4-1 .8-1 1.7" stroke="#374151" stroke-width="2" stroke-linecap="round"/>210 </svg>211 </div>212 <div class="item-text">213 <div class="title">Help</div>214 </div>215 <svg class="chevron" viewBox="0 0 24 24">216 <path d="M9 6l6 6-6 6" fill="none" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>217 </svg>218 </div>219 220 <!-- FAQ chat -->221 <div class="item">222 <div class="icon">223 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">224 <rect x="3" y="5" width="14" height="10" rx="2" stroke="#111827" stroke-width="2"/>225 <path d="M7 15v4l4-4" stroke="#111827" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>226 <rect x="17" y="8" width="4" height="8" rx="2" stroke="#111827" stroke-width="2"/>227 </svg>228 </div>229 <div class="item-text">230 <div class="title">FAQ chat in English</div>231 <div class="subtitle">Powered by ChatGPT</div>232 </div>233 <div class="pill">Beta</div>234 <svg class="chevron" viewBox="0 0 24 24">235 <path d="M9 6l6 6-6 6" fill="none" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>236 </svg>237 </div>238 </div>239 240 <div class="section-title" style="margin-top:44px;">Account</div>241 <div class="list">242 <!-- Personal details -->243 <div class="item">244 <div class="icon">245 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">246 <circle cx="12" cy="8" r="4" stroke="#374151" stroke-width="2"/>247 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#374151" stroke-width="2"/>248 </svg>249 </div>250 <div class="item-text"><div class="title">Personal details</div></div>251 <svg class="chevron" viewBox="0 0 24 24">252 <path d="M9 6l6 6-6 6" fill="none" stroke="#9CA3AF" stroke-width="2"/>253 </svg>254 </div>255 256 <!-- Saved travelers -->257 <div class="item">258 <div class="icon">259 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">260 <circle cx="9" cy="9" r="3" stroke="#374151" stroke-width="2"/>261 <path d="M2 20c1.5-3 5-4 7-4" stroke="#374151" stroke-width="2" stroke-linecap="round"/>262 <circle cx="17" cy="9" r="3" stroke="#374151" stroke-width="2"/>263 <path d="M15 16c2 0 5 1 7 4" stroke="#374151" stroke-width="2" stroke-linecap="round"/>264 </svg>265 </div>266 <div class="item-text"><div class="title">Saved travelers</div></div>267 <svg class="chevron" viewBox="0 0 24 24">268 <path d="M9 6l6 6-6 6" fill="none" stroke="#9CA3AF" stroke-width="2"/>269 </svg>270 </div>271 272 <!-- Billing details -->273 <div class="item">274 <div class="icon">275 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">276 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#374151" stroke-width="2"/>277 <rect x="5" y="10" width="6" height="2" fill="#374151"/>278 <rect x="13" y="10" width="6" height="2" fill="#374151"/>279 </svg>280 </div>281 <div class="item-text"><div class="title">Billing details</div></div>282 <svg class="chevron" viewBox="0 0 24 24">283 <path d="M9 6l6 6-6 6" fill="none" stroke="#9CA3AF" stroke-width="2"/>284 </svg>285 </div>286 287 <!-- Kiwi.com Credit -->288 <div class="item">289 <div class="icon">290 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">291 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2"/>292 <path d="M8 13c1.5 2.5 6 2.5 7-2" stroke="#374151" stroke-width="2" stroke-linecap="round"/>293 <path d="M12 7v10" stroke="#374151" stroke-width="2" stroke-linecap="round"/>294 </svg>295 </div>296 <div class="item-text"><div class="title">Kiwi.com Credit</div></div>297 <svg class="chevron" viewBox="0 0 24 24">298 <path d="M9 6l6 6-6 6" fill="none" stroke="#9CA3AF" stroke-width="2"/>299 </svg>300 </div>301 302 <!-- Refer a friend -->303 <div class="item">304 <div class="icon">305 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">306 <path d="M4 15V9l10-4v14L4 15z" stroke="#374151" stroke-width="2" fill="none"/>307 <circle cx="16" cy="12" r="2" fill="#374151"/>308 </svg>309 </div>310 <div class="item-text"><div class="title">Refer a friend</div></div>311 <svg class="chevron" viewBox="0 0 24 24">312 <path d="M9 6l6 6-6 6" fill="none" stroke="#9CA3AF" stroke-width="2"/>313 </svg>314 </div>315 </div>316 317 <!-- Luggage measurement card -->318 <div class="card">319 <div class="img-placeholder">[IMG: Luggage illustration]</div>320 <div class="card-text">321 <div class="card-title">Scan your bags to find out their size.</div>322 <div class="card-link">Measure your bags</div>323 </div>324 </div>325 326 <div class="settings-title">Settings</div>327 </div>328 329 <!-- Bottom navigation -->330 <div class="bottom-nav">331 <div class="nav-item">332 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">333 <circle cx="11" cy="11" r="7" stroke="#6b7280" stroke-width="2"/>334 <line x1="20" y1="20" x2="16" y2="16" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>335 </svg>336 <span>Search</span>337 </div>338 <div class="nav-item">339 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">340 <path d="M4 8h16M4 12h16M4 16h16" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>341 <circle cx="8" cy="8" r="1.5" fill="#6b7280"/>342 <circle cx="12" cy="12" r="1.5" fill="#6b7280"/>343 <circle cx="16" cy="16" r="1.5" fill="#6b7280"/>344 </svg>345 <span>Deals</span>346 </div>347 <div class="nav-item">348 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">349 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#6b7280" stroke-width="2"/>350 <path d="M7 6V4h10v2" stroke="#6b7280" stroke-width="2"/>351 <path d="M7 11h10" stroke="#6b7280" stroke-width="2"/>352 </svg>353 <span>My trips</span>354 </div>355 <div class="nav-item active">356 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">357 <circle cx="12" cy="8" r="4" stroke="#0ba888" stroke-width="2"/>358 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#0ba888" stroke-width="2"/>359 </svg>360 <span>Profile</span>361 </div>362 <div class="home-indicator"></div>363 </div>364</div>365</body>366</html>