GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Chat UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000000;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    padding: 16px 24px;24    box-sizing: border-box;25    color: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    font-size: 36px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 18px;35    font-size: 28px;36  }37  .battery {38    display: flex;39    align-items: center;40    gap: 8px;41  }42  .battery-icon {43    width: 44px;44    height: 22px;45    border: 3px solid #fff;46    border-radius: 4px;47    position: relative;48  }49  .battery-icon::after {50    content: "";51    position: absolute;52    right: -8px;53    top: 6px;54    width: 6px;55    height: 10px;56    background: #fff;57    border-radius: 2px;58  }59  .battery-level {60    position: absolute;61    left: 3px;62    top: 3px;63    width: 32px;64    height: 14px;65    background: #fff;66  }67 68  /* Header */69  .chat-header {70    position: absolute;71    top: 96px;72    left: 0;73    width: 1080px;74    height: 160px;75    display: flex;76    align-items: center;77    padding: 24px;78    box-sizing: border-box;79    gap: 18px;80  }81  .purple { color: #7B2EAF; } /* messenger purple tone */82  .back-btn {83    width: 56px;84    height: 56px;85    display: flex;86    align-items: center;87    justify-content: center;88  }89  .avatar {90    width: 72px;91    height: 72px;92    border-radius: 50%;93    overflow: hidden;94    border: 1px solid #BDBDBD;95    background: #E0E0E0;96    display: flex;97    align-items: center;98    justify-content: center;99    color: #757575;100    font-size: 20px;101  }102  .title-wrap {103    flex: 1;104  }105  .title {106    font-size: 44px;107    font-weight: 700;108    margin-bottom: 8px;109  }110  .subtitle {111    font-size: 26px;112    color: #B0B0B0;113  }114  .header-actions {115    display: flex;116    align-items: center;117    gap: 28px;118    margin-left: auto;119    margin-right: 8px;120  }121  .action-icon {122    width: 56px;123    height: 56px;124    display: flex;125    align-items: center;126    justify-content: center;127  }128 129  /* Conversation area */130  .chat-area {131    position: absolute;132    top: 256px;133    left: 0;134    width: 100%;135    height: 1640px;136    padding: 0 24px;137    box-sizing: border-box;138  }139  .timestamp {140    color: #8f8f8f;141    font-size: 26px;142    text-align: center;143    margin: 24px 0 10px;144  }145  .message-row {146    display: flex;147    align-items: flex-end;148    gap: 14px;149    margin: 16px 0;150  }151  .msg-bubble {152    max-width: 68%;153    padding: 22px 28px;154    border-radius: 28px;155    font-size: 34px;156    line-height: 1.3;157  }158  .incoming {159    background: #1F1F1F;160    color: #EDEDED;161  }162  .outgoing {163    background: #6A2FA6;164    color: #ffffff;165    margin-left: auto;166    border-top-right-radius: 30px;167    border-bottom-right-radius: 30px;168  }169 170  /* Reaction pill */171  .reaction-bar {172    position: absolute;173    left: 90px;174    top: 1050px;175    height: 96px;176    width: 820px;177    background: rgba(28,28,28,0.95);178    border-radius: 48px;179    display: flex;180    align-items: center;181    gap: 34px;182    padding: 0 30px;183    box-sizing: border-box;184    border: 1px solid #2a2a2a;185  }186  .reaction {187    width: 70px;188    height: 70px;189    border-radius: 35px;190    background: #2A2A2A;191    display: flex;192    align-items: center;193    justify-content: center;194    font-size: 40px;195  }196  .plus-btn {197    background: #3a3a3a;198    font-size: 44px;199  }200 201  /* Bottom options sheet */202  .sheet {203    position: absolute;204    left: 56px;205    top: 860px;206    width: 880px;207    background: #1E1E1E;208    border-radius: 56px;209    padding: 48px 48px 40px;210    box-sizing: border-box;211    box-shadow: 0 12px 24px rgba(0,0,0,0.55);212    border: 1px solid #2b2b2b;213    z-index: 5;214  }215  .sheet-title {216    font-size: 56px;217    margin-bottom: 30px;218  }219  .sheet-item {220    font-size: 40px;221    color: #EDEDED;222    padding: 26px 0;223    border-bottom: 1px solid #2d2d2d;224  }225  .sheet-item:last-child { border-bottom: none; }226 227  /* Bottom action bar */228  .bottom-actions {229    position: absolute;230    bottom: 120px;231    left: 0;232    width: 100%;233    height: 120px;234    background: #0D0D0D;235    display: flex;236    align-items: center;237    justify-content: space-around;238    border-top: 1px solid #1f1f1f;239  }240  .action {241    display: flex;242    flex-direction: column;243    align-items: center;244    gap: 8px;245    color: #AAB4D6;246    font-size: 30px;247  }248  .action svg { width: 48px; height: 48px; fill: #1f3b73; }249 250  .gesture-bar {251    position: absolute;252    bottom: 32px;253    left: 50%;254    transform: translateX(-50%);255    width: 320px;256    height: 10px;257    background: #EDEDED;258    border-radius: 5px;259    opacity: 0.85;260  }261 262  /* Small floating avatars seen in screenshot edges */263  .side-avatar {264    position: absolute;265    width: 58px;266    height: 58px;267    border-radius: 50%;268    background: #E0E0E0;269    border: 1px solid #BDBDBD;270    color: #757575;271    display: flex;272    align-items: center;273    justify-content: center;274    font-size: 16px;275  }276</style>277</head>278<body>279<div id="render-target">280 281  <!-- Status bar -->282  <div class="status-bar">283    <div>9:17</div>284    <div class="status-right">285      <div style="width:26px;height:26px;border-radius:50%;border:3px solid #fff;"></div>286      <div style="width:26px;height:26px;border-radius:50%;border:3px solid #fff;"></div>287      <div class="battery">288        <div class="battery-icon"><div class="battery-level"></div></div>289        <div>100%</div>290      </div>291    </div>292  </div>293 294  <!-- Header -->295  <div class="chat-header">296    <div class="back-btn">297      <svg viewBox="0 0 24 24" width="44" height="44">298        <path fill="#7B2EAF" d="M15.5 3l-9 9 9 9 1.5-1.5-7.5-7.5 7.5-7.5z"/>299      </svg>300    </div>301    <div class="avatar">[IMG: User Avatar]</div>302    <div class="title-wrap">303      <div class="title">Natalie</div>304      <div class="subtitle">Active 31 minutes ago</div>305    </div>306    <div class="header-actions">307      <div class="action-icon">308        <svg viewBox="0 0 24 24" width="48" height="48">309          <path fill="#7B2EAF" d="M6.6 10.2c1.7 3.1 4.1 5.5 7.2 7.2l2.4-2.4c.3-.3.9-.4 1.3-.2 1.4.6 3 1 4.6 1 .7 0 1.3.6 1.3 1.3V21c0 .7-.6 1.3-1.3 1.3C10 22.3 1.7 14 1.7 3.3 1.7 2.6 2.3 2 3 2h3.8c.7 0 1.3.6 1.3 1.3 0 1.6.3 3.2 1 4.6.2.4.1 1-.2 1.3L6.6 10.2z"/>310        </svg>311      </div>312      <div class="action-icon">313        <svg viewBox="0 0 24 24" width="48" height="48">314          <path fill="#7B2EAF" d="M3 5h12c1.1 0 2 .9 2 2v3l4-3v14l-4-3v3c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z"/>315        </svg>316      </div>317      <div class="action-icon">318        <svg viewBox="0 0 24 24" width="48" height="48">319          <path fill="#7B2EAF" d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 6a2 2 0 110 4 2 2 0 010-4zm-1 6h2v6h-2v-6z"/>320        </svg>321      </div>322    </div>323  </div>324 325  <!-- Conversation area -->326  <div class="chat-area">327 328    <div class="timestamp">8:20 AM</div>329 330    <div class="message-row">331      <div class="avatar" style="width:56px;height:56px;border-radius:28px;">[IMG: User Avatar]</div>332      <div class="msg-bubble incoming">Hlo Richard</div>333    </div>334 335    <div class="timestamp" style="margin-top: 40px;">8:37 AM</div>336 337    <div class="message-row" style="justify-content: flex-end;">338      <div class="msg-bubble outgoing">Hi Natalie</div>339    </div>340 341    <!-- Reaction pill overlapping -->342    <div class="reaction-bar">343      <div class="reaction" style="background:#3a0c0c;">❤️</div>344      <div class="reaction">😂</div>345      <div class="reaction">😮</div>346      <div class="reaction">😢</div>347      <div class="reaction">😡</div>348      <div class="reaction">👍</div>349      <div class="reaction plus-btn">＋</div>350    </div>351 352  </div>353 354  <!-- Bottom sheet open -->355  <div class="sheet">356    <div class="sheet-title">Message</div>357    <div class="sheet-item">Forward</div>358    <div class="sheet-item">Bump</div>359    <div class="sheet-item">Remove</div>360  </div>361 362  <!-- Bottom actions bar -->363  <div class="bottom-actions">364    <div class="action">365      <svg viewBox="0 0 24 24">366        <path d="M12 4l-9 8h6v8h6v-8h6z"/>367      </svg>368      <div>Reply</div>369    </div>370    <div class="action">371      <svg viewBox="0 0 24 24">372        <path d="M16 1H5c-1.1 0-2 .9-2 2v14h2V3h11V1zm3 5H8c-1.1 0-2 .9-2 2v15h13c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 17H8V8h11v15z"/>373      </svg>374      <div>Copy</div>375    </div>376    <div class="action">377      <svg viewBox="0 0 24 24">378        <path d="M12 2l4 6h-3v12h-2V8H8l4-6z"/>379      </svg>380      <div>Pin</div>381    </div>382    <div class="action">383      <svg viewBox="0 0 24 24">384        <circle cx="12" cy="5" r="2"></circle>385        <circle cx="12" cy="12" r="2"></circle>386        <circle cx="12" cy="19" r="2"></circle>387      </svg>388      <div>More</div>389    </div>390  </div>391 392  <!-- Side floating avatars (decorative as seen on edges) -->393  <div class="side-avatar" style="left: 24px; top: 780px;">[IMG]</div>394  <div class="side-avatar" style="right: 24px; top: 1120px;">[IMG]</div>395 396  <!-- Gesture bar -->397  <div class="gesture-bar"></div>398 399</div>400</body>401</html>