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 Screen - Amelia Miller</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #1b1b1b;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 120px;30    background: #000;31    color: #fff;32    display: flex;33    align-items: center;34    padding: 0 36px;35    box-sizing: border-box;36    font-size: 40px;37  }38  .status-left { flex: 1; }39  .status-right {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .status-icon {45    width: 36px;46    height: 36px;47    display: inline-block;48  }49 50  /* Header gradient and back */51  .header {52    position: absolute;53    top: 120px;54    left: 0;55    width: 100%;56    height: 520px;57    background: linear-gradient(180deg, #0d66b7 0%, #177fd4 50%, #2196f3 100%);58  }59  .back-btn {60    position: absolute;61    top: 160px;62    left: 26px;63    width: 90px;64    height: 90px;65    display: flex;66    align-items: center;67    justify-content: center;68  }69  .back-btn svg { width: 48px; height: 48px; }70 71  /* Avatar */72  .avatar-wrap {73    position: absolute;74    top: 320px;75    left: 50%;76    transform: translateX(-50%);77    width: 330px;78    height: 330px;79    border-radius: 50%;80    box-sizing: border-box;81    border: 8px solid #ffffff;82    overflow: hidden;83  }84  .avatar {85    width: 100%;86    height: 100%;87    border-radius: 50%;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #757575;94    font-size: 34px;95    text-align: center;96    padding: 10px;97    box-sizing: border-box;98  }99  .avatar-badge {100    position: absolute;101    right: 14px;102    bottom: 14px;103    width: 56px;104    height: 56px;105    background: #f6c229;106    color: #fff;107    border-radius: 50%;108    font-weight: 700;109    display: flex;110    align-items: center;111    justify-content: center;112    font-size: 28px;113    box-shadow: 0 2px 6px rgba(0,0,0,0.25);114    pointer-events: none;115  }116 117  /* Content */118  .content {119    position: absolute;120    top: 540px;121    left: 0;122    right: 0;123    background: #fff;124    padding-top: 170px; /* space for overlapping avatar */125  }126  .name-block {127    position: relative;128    text-align: center;129    padding: 0 48px 32px;130  }131  .name {132    font-size: 72px;133    font-weight: 800;134    margin: 0 0 14px 0;135  }136  .sub {137    color: #8b8f94;138    font-size: 36px;139  }140  .edit-icon {141    position: absolute;142    right: 48px;143    top: 10px;144    width: 64px;145    height: 64px;146    display: flex;147    align-items: center;148    justify-content: center;149  }150  .edit-icon svg { width: 48px; height: 48px; }151 152  /* List */153  .list {154    margin-top: 10px;155    border-top: 1px solid #eeeeee;156  }157  .row {158    display: flex;159    align-items: center;160    gap: 32px;161    padding: 34px 42px;162    height: 150px;163    box-sizing: border-box;164    border-bottom: 1px solid #eeeeee;165  }166  .row .icon {167    width: 72px;168    height: 72px;169    display: flex;170    align-items: center;171    justify-content: center;172    color: #3b3b3b;173  }174  .row .label {175    font-size: 44px;176    font-weight: 700;177    color: #111;178  }179  .muted .label {180    color: #b8b8b8;181    font-weight: 700;182  }183  .muted svg {184    stroke: #b8b8b8;185    fill: none;186  }187  .secondary {188    font-weight: 700;189    color: #222;190  }191 192  .section-title {193    padding: 40px 48px 10px;194    color: #9da3a7;195    font-size: 30px;196    letter-spacing: 2px;197    font-weight: 800;198  }199 200  /* Bottom navigation pill */201  .nav-area {202    position: absolute;203    bottom: 0;204    left: 0;205    width: 100%;206    height: 140px;207    background: #000;208    display: flex;209    align-items: center;210    justify-content: center;211  }212  .home-pill {213    width: 260px;214    height: 14px;215    background: #e6e6e6;216    border-radius: 8px;217    opacity: 0.95;218  }219 220  /* SVG defaults */221  svg {222    width: 64px;223    height: 64px;224    stroke: #333;225    stroke-width: 6;226    fill: none;227    stroke-linecap: round;228    stroke-linejoin: round;229  }230</style>231</head>232<body>233<div id="render-target">234 235  <!-- Status bar -->236  <div class="status-bar">237    <div class="status-left">11:08</div>238    <div class="status-right">239      <!-- simple placeholder icons -->240      <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 20h20M6 16h12M10 12h4" stroke="#fff" /></svg>241      <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 18l9-12 9 12" stroke="#fff"/></svg>242      <svg class="status-icon" viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff"/><path d="M18 10v4" stroke="#fff"/></svg>243    </div>244  </div>245 246  <!-- Header gradient -->247  <div class="header"></div>248 249  <!-- Back button -->250  <div class="back-btn" aria-label="Back">251    <svg viewBox="0 0 24 24">252      <path d="M15 4L7 12l8 8" />253    </svg>254  </div>255 256  <!-- Avatar -->257  <div class="avatar-wrap">258    <div class="avatar">[IMG: Plant avatar]</div>259    <div class="avatar-badge">L</div>260  </div>261 262  <!-- Content -->263  <div class="content">264    <div class="name-block">265      <div class="edit-icon" title="Edit">266        <svg viewBox="0 0 24 24">267          <path d="M3 17.25V21h3.75L18.81 8.94l-3.75-3.75L3 17.25z"/>268          <path d="M14.06 4.19l3.75 3.75" />269        </svg>270      </div>271      <h1 class="name">Amelia miller</h1>272      <div class="sub">Last seen 2d ago</div>273    </div>274 275    <div class="list">276      <!-- Send message -->277      <div class="row">278        <div class="icon">279          <svg viewBox="0 0 24 24">280            <path d="M21 15a4 4 0 0 1-4 4H8l-5 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8z"/>281          </svg>282        </div>283        <div class="label">Send message</div>284      </div>285 286      <!-- Start call (muted/disabled) -->287      <div class="row muted">288        <div class="icon">289          <svg viewBox="0 0 24 24">290            <path d="M6.5 3.5l3.5 3.5-2 2a13 13 0 0 0 6 6l2-2 3.5 3.5-1.5 2.5c-.7 1.1-2.1 1.6-3.4 1.2-3.2-1-6.7-3.7-9.1-6.1C3.7 11.9 1 8.4 0 5.2c-.4-1.3.1-2.7 1.2-3.4L3.7.3 6.5 3.5z"/>291          </svg>292        </div>293        <div class="label">Start call</div>294      </div>295 296      <!-- Start video call (muted) -->297      <div class="row muted">298        <div class="icon">299          <svg viewBox="0 0 24 24">300            <rect x="2.5" y="6" width="13" height="12" rx="2"/>301            <path d="M15.5 10l6-3v10l-6-3z"/>302          </svg>303        </div>304        <div class="label">Start video call</div>305      </div>306 307      <!-- Search in conversation -->308      <div class="row">309        <div class="icon">310          <svg viewBox="0 0 24 24">311            <circle cx="10" cy="10" r="7"/>312            <path d="M16 16l6 6"/>313          </svg>314        </div>315        <div class="label secondary">Search in conversation</div>316      </div>317 318      <!-- Start private conversation -->319      <div class="row">320        <div class="icon">321          <svg viewBox="0 0 24 24">322            <path d="M21 14a5 5 0 0 1-5 5H8l-5 4V9a5 5 0 0 1 5-5h6"/>323            <rect x="13.5" y="4" width="7" height="6" rx="2"/>324          </svg>325        </div>326        <div class="label secondary">Start private conversation</div>327      </div>328 329      <!-- Schedule a call -->330      <div class="row">331        <div class="icon">332          <svg viewBox="0 0 24 24">333            <rect x="3" y="5" width="18" height="16" rx="2"/>334            <path d="M3 9h18"/>335            <path d="M12 13v5M12 13l3 2"/>336          </svg>337        </div>338        <div class="label secondary">Schedule a call</div>339      </div>340 341      <!-- Share contact -->342      <div class="row">343        <div class="icon">344          <svg viewBox="0 0 24 24">345            <rect x="3" y="4" width="18" height="14" rx="2"/>346            <circle cx="9" cy="10" r="2"/>347            <path d="M5 15c1.2-2 6.8-2 8 0M14 8h5M14 12h5"/>348          </svg>349        </div>350        <div class="label secondary">Share contact</div>351      </div>352 353      <!-- Create new group with Amelia -->354      <div class="row">355        <div class="icon">356          <svg viewBox="0 0 24 24">357            <circle cx="7" cy="8" r="3"/>358            <circle cx="17" cy="7" r="2.5"/>359            <circle cx="17" cy="15" r="2.5"/>360            <path d="M2 18c1.4-3 8.6-3 10 0"/>361          </svg>362        </div>363        <div class="label secondary">Create new group with Amelia</div>364      </div>365 366      <!-- Translate section -->367      <div class="section-title">TRANSLATE CONVERSATION</div>368      <div class="row">369        <div class="icon">370          <svg viewBox="0 0 24 24">371            <path d="M3 5h10l-4 10h4"/>372            <path d="M14 5h7M17 5c0 7-6 10-6 10"/>373          </svg>374        </div>375        <div class="label secondary">Send translation request</div>376      </div>377    </div>378  </div>379 380  <!-- Bottom nav area -->381  <div class="nav-area">382    <div class="home-pill"></div>383  </div>384</div>385</body>386</html>