GD-ML/AndroidCode

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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #1f2a2e; /* app background */15    color: #e6f0f2;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    background: #1a1e21;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 36px;26    box-sizing: border-box;27    color: #cfd8dc;28    font-weight: 600;29    letter-spacing: 1px;30  }31  .status-left { display: flex; align-items: center; gap: 20px; }32  .status-right { display: flex; align-items: center; gap: 24px; }33  .status-time { font-size: 34px; }34 35  /* App bar */36  .app-bar {37    height: 120px;38    background: #223238;39    display: flex;40    align-items: center;41    padding: 0 36px;42    box-sizing: border-box;43    border-bottom: 1px solid rgba(255,255,255,0.06);44  }45  .app-title {46    font-size: 56px;47    font-weight: 700;48    color: #e7f3f5;49    margin-left: 28px;50  }51 52  /* Content */53  .content {54    padding: 36px;55    box-sizing: border-box;56  }57 58  /* Profile header */59  .profile-row {60    display: flex;61    align-items: center;62    gap: 36px;63    padding: 40px 8px 32px 8px;64    border-bottom: 1px solid rgba(255,255,255,0.06);65  }66  .avatar {67    width: 168px;68    height: 168px;69    border-radius: 50%;70    background: #E0E0E0;71    border: 1px solid #BDBDBD;72    display: flex;73    justify-content: center;74    align-items: center;75    color: #616161;76    font-size: 28px;77    position: relative;78  }79  .edit-badge {80    position: absolute;81    right: -4px;82    bottom: -4px;83    width: 56px;84    height: 56px;85    background: #cfd8dc;86    border: 3px solid #1f2a2e;87    border-radius: 50%;88    display: flex;89    align-items: center;90    justify-content: center;91  }92  .profile-info .name {93    font-size: 58px;94    font-weight: 800;95    color: #e7f3f5;96    line-height: 1.1;97    margin: 0 0 10px 0;98  }99  .profile-info .meta {100    font-size: 30px;101    color: #b7c4c8;102    line-height: 1.5;103  }104  .profile-info .edit-link {105    margin-top: 10px;106    color: #00bcd4;107    font-weight: 700;108    font-size: 32px;109  }110 111  /* Section headings */112  .section-title {113    font-size: 44px;114    font-weight: 800;115    margin: 44px 8px 22px 8px;116    color: #e7f3f5;117  }118 119  /* Cards */120  .card {121    background: #22343b;122    border: 1px solid rgba(200, 220, 225, 0.18);123    border-radius: 28px;124    padding: 28px 24px;125    margin: 0 8px 36px 8px;126  }127  .card-item {128    position: relative;129    padding: 28px 84px 28px 24px;130    border-radius: 18px;131  }132  .card-item + .card-item {133    border-top: 1px solid rgba(200, 220, 225, 0.18);134  }135  .item-title {136    font-size: 40px;137    font-weight: 700;138    margin: 0 0 8px 0;139    color: #e8f1f3;140  }141  .item-sub {142    font-size: 28px;143    color: #a7b6bb;144    line-height: 1.5;145  }146  .chev {147    position: absolute;148    right: 20px;149    top: 50%;150    transform: translateY(-50%);151    opacity: 0.8;152  }153 154  /* Bottom gesture pill (illustrative) */155  .gesture-area {156    position: absolute;157    left: 0;158    right: 0;159    bottom: 0;160    height: 120px;161    background: #0f1416;162    display: flex;163    align-items: center;164    justify-content: center;165  }166  .gesture-pill {167    width: 220px;168    height: 10px;169    background: #cfd8dc;170    border-radius: 8px;171    opacity: 0.85;172  }173 174  /* Small utility */175  .muted { color: #9fb0b6; }176</style>177</head>178<body>179<div id="render-target">180  <!-- Status bar -->181  <div class="status-bar">182    <div class="status-left">183      <div class="status-time">10:43</div>184      <div style="display:flex; align-items:center; gap:10px;">185        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#cfd8dc" stroke-width="2"><path d="M2 8c5-5 15-5 20 0"/><path d="M6 12c3-3 9-3 12 0"/><path d="M10 16c1.5-1.5 4.5-1.5 6 0"/><circle cx="12" cy="20" r="1.2" fill="#cfd8dc"/></svg>186        <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfd8dc"><circle cx="12" cy="12" r="5"/></svg>187      </div>188    </div>189    <div class="status-right">190      <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#cfd8dc" stroke-width="2"><path d="M2 12l5-5v10z"/><rect x="9" y="7" width="13" height="10" rx="2" ry="2"/></svg>191      <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#cfd8dc" stroke-width="2"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="20" y="9" width="2" height="6" fill="#cfd8dc" stroke="none"/></svg>192    </div>193  </div>194 195  <!-- App bar -->196  <div class="app-bar">197    <svg width="54" height="54" viewBox="0 0 24 24" fill="#cfe3e7">198      <rect x="3" y="5" width="18" height="2"></rect>199      <rect x="3" y="11" width="18" height="2"></rect>200      <rect x="3" y="17" width="18" height="2"></rect>201    </svg>202    <div class="app-title">Profile</div>203  </div>204 205  <div class="content">206    <!-- Profile header -->207    <div class="profile-row">208      <div class="avatar">209        [IMG: Avatar]210        <div class="edit-badge">211          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#263238" stroke-width="2">212            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"></path>213          </svg>214        </div>215      </div>216      <div class="profile-info">217        <div class="name">Kieran Sato</div>218        <div class="meta">kieran.sato2002@gmail.com</div>219        <div class="meta">New Delhi, India (DEL)</div>220        <div class="edit-link">Edit</div>221      </div>222    </div>223 224    <!-- Personal details -->225    <div class="section-title">Personal details</div>226    <div class="card">227      <div class="card-item">228        <div class="item-title">Account</div>229        <div class="item-sub">Manage your name, email, and password.</div>230        <div class="chev">231          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#9fb0b6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">232            <path d="M8 4l8 8-8 8"/>233          </svg>234        </div>235      </div>236      <div class="card-item">237        <div class="item-title">Preferences</div>238        <div class="item-sub">Customize your search preferences to see more of the results you want.</div>239        <div class="chev">240          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#9fb0b6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">241            <path d="M8 4l8 8-8 8"/>242          </svg>243        </div>244      </div>245    </div>246 247    <!-- Manage your stay -->248    <div class="section-title">Manage your stay</div>249    <div class="card">250      <div class="card-item">251        <div class="item-title">Connect a reservation</div>252        <div class="item-sub">Find and manage existing reservations with KAYAK Enabled hotels.</div>253        <div class="chev">254          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#9fb0b6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">255            <path d="M8 4l8 8-8 8"/>256          </svg>257        </div>258      </div>259    </div>260 261    <!-- Features -->262    <div class="section-title">Features</div>263    <div class="card">264      <div class="card-item">265        <div class="item-title">Price Alerts</div>266        <div class="chev">267          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#9fb0b6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">268            <path d="M8 4l8 8-8 8"/>269          </svg>270        </div>271      </div>272    </div>273 274    <!-- Settings -->275    <div class="section-title">Settings</div>276    <div class="card">277      <div class="card-item">278        <div class="item-title">Notifications</div>279        <div class="chev">280          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#9fb0b6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">281            <path d="M8 4l8 8-8 8"/>282          </svg>283        </div>284      </div>285    </div>286  </div>287 288  <!-- Bottom gesture bar -->289  <div class="gesture-area">290    <div class="gesture-pill"></div>291  </div>292</div>293</body>294</html>