GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Chat UI - Amelia Miller</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#0f2c2c; color:#dbe7e7;13  }14 15  /* Status bar */16  .status-bar {17    height:96px; padding:0 32px;18    display:flex; align-items:center; justify-content:space-between;19    color:#e7f6f6; font-weight:600;20    font-size:34px;21    opacity:.95;22  }23  .sb-right { display:flex; align-items:center; gap:22px; font-size:32px; }24  .icon { width:44px; height:44px; fill:#e6f2f2; opacity:.9; }25 26  /* Header */27  .header {28    height:200px; padding:16px 28px 8px 20px;29    display:flex; align-items:center; gap:22px;30    border-bottom:1px solid rgba(255,255,255,0.04);31  }32  .back { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }33  .avatar {34    width:120px; height:120px; border-radius:60px;35    background:#7b3fb7; display:flex; align-items:center; justify-content:center;36    font-size:60px; font-weight:700; color:white;37    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.1);38  }39  .title { flex:1; }40  .title .name { font-size:58px; font-weight:700; letter-spacing:.2px; }41  .header-actions { display:flex; align-items:center; gap:26px; }42  .header-actions .icon { width:50px; height:50px; }43 44  /* Conversation area */45  .chat {46    position:absolute; left:0; right:0;47    top:296px; /* 96 status + 200 header */48    bottom:300px; /* space for suggestions + composer + handle */49    overflow-y:hidden;50    padding:10px 24px 0 24px;51  }52  .day-divider {53    text-align:center; color:#b5c7c7; opacity:.75;54    font-size:34px; margin:32px 0 24px;55  }56  .message-row {57    display:flex; align-items:flex-end; gap:18px;58    margin:16px 0;59  }60  .message-row.right { justify-content:flex-end; }61  .stamp {62    color:#99aaaa; font-size:28px; margin:8px 12px;63  }64  .bubble {65    max-width:720px; padding:26px 34px;66    border-radius:28px; line-height:1.4;67    font-size:40px; color:#e9f6f6;68  }69  .left .bubble {70    background:#2b3f42; color:#dfeaea;71    border-top-left-radius:18px; border-bottom-left-radius:18px;72  }73  .right .bubble {74    background:#0e5b42;75    border-top-right-radius:18px; border-bottom-right-radius:18px;76  }77  .sender {78    color:#b8c7c7; font-size:30px; margin-left:170px; margin-bottom:6px;79  }80  .avatar.small { width:84px; height:84px; border-radius:42px; font-size:44px; }81 82  /* Quoted/reply style inside bubble */83  .quoted {84    border:2px solid rgba(255,255,255,0.08);85    border-radius:26px; overflow:hidden; margin-bottom:18px;86    position:relative;87  }88  .quoted::before{89    content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:#1ad1b3;90  }91  .quoted-header {92    padding:18px 22px 8px 24px; border-bottom:1px solid rgba(255,255,255,0.06);93    display:flex; align-items:center; gap:14px; background:rgba(0,0,0,0.1);94  }95  .tiny-avatar {96    width:36px; height:36px; border-radius:18px; background:#f08a14; color:#082; display:flex;97    align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#132;98  }99  .quoted-title { font-weight:800; color:#fff; font-size:36px; }100  .quoted-text { padding:16px 24px 20px 24px; color:#d7eaea; font-size:36px; }101 102  /* Suggestions and composer */103  .suggestions {104    position:absolute; left:0; right:0; bottom:190px;105    padding:14px 24px; display:flex; gap:24px; flex-wrap:nowrap;106    overflow:hidden;107  }108  .chip {109    flex:0 0 auto; padding:26px 34px; border-radius:40px;110    border:2px solid #1ad1b3; color:#78e8d7; font-size:36px;111    background:transparent;112  }113  .composer {114    position:absolute; left:0; right:0; bottom:80px;115    padding:10px 22px 12px;116    display:flex; align-items:center; gap:16px;117  }118  .compose-box {119    flex:1; height:120px; border-radius:60px;120    background:#173b3a; display:flex; align-items:center; padding:0 26px; gap:22px;121    border:2px solid rgba(255,255,255,0.08);122    color:#b8cecd; font-size:40px;123  }124  .circle-btn {125    width:72px; height:72px; border-radius:36px;126    display:flex; align-items:center; justify-content:center;127    border:2px solid #1ad1b3; color:#7cf0db;128  }129  .compose-icons { margin-left:auto; display:flex; align-items:center; gap:22px; }130  .send {131    width:72px; height:72px; border-radius:36px; background:#1ad1b3;132    display:flex; align-items:center; justify-content:center;133  }134 135  .home-pill {136    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);137    width:320px; height:10px; border-radius:6px; background:#8fa5a4; opacity:.6;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status bar -->145  <div class="status-bar">146    <div>10:59</div>147    <div class="sb-right">148      <svg class="icon" viewBox="0 0 24 24"><path d="M3 10h18v4H3z"></path></svg>149      <svg class="icon" viewBox="0 0 24 24"><path d="M12 3L1 9l11 6 11-6-11-6zm0 10.5L3.5 9 12 4.5 20.5 9 12 13.5z"></path></svg>150      <span>100%</span>151      <svg class="icon" viewBox="0 0 24 24"><path d="M16 3H5c-1.1 0-2 .9-2 2v14h13l4-4V5c0-1.1-.9-2-2-2zm0 12V5H5v12h10zm1 3v-2h2l-2 2z"></path></svg>152    </div>153  </div>154 155  <!-- Header -->156  <div class="header">157    <div class="back">158      <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7"></path></svg>159    </div>160    <div class="avatar">A</div>161    <div class="title">162      <div class="name">Amelia miller</div>163    </div>164    <div class="header-actions">165      <svg class="icon" viewBox="0 0 24 24"><path d="M6 4h3l3 4h7v8h-6l-3 4H6z"></path></svg>166      <svg class="icon" viewBox="0 0 24 24"><path d="M4 7h16v10H4z M9 4h6v3H9z"></path></svg>167      <svg class="icon" viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"></path></svg>168    </div>169  </div>170 171  <!-- Conversation -->172  <div class="chat">173    <div class="day-divider">Wednesday, Dec 13</div>174 175    <!-- Left incoming -->176    <div class="sender">Amelia miller  Dec 13 12:50 PM</div>177    <div class="message-row left">178      <div class="avatar small">A</div>179      <div class="bubble">Hi</div>180    </div>181 182    <!-- Right outgoing -->183    <div class="stamp" style="text-align:right;">Dec 13 12:52 PM</div>184    <div class="message-row right">185      <div class="bubble right">Hello Amelia my friend</div>186    </div>187 188    <!-- Left incoming with quote -->189    <div class="sender">Amelia miller  Dec 13 1:02 PM</div>190    <div class="message-row left">191      <div class="avatar small">A</div>192      <div class="bubble">193        <div class="quoted">194          <div class="quoted-header">195            <div class="tiny-avatar"></div>196            <div class="quoted-title">Richard Wagner</div>197          </div>198          <div class="quoted-text">Hello Amelia my friend</div>199        </div>200        how you are201      </div>202    </div>203 204    <div class="day-divider">Today</div>205 206    <!-- Right message today -->207    <div class="stamp" style="text-align:right;">9:27 AM</div>208    <div class="message-row right">209      <div class="bubble right">Hi Amelia</div>210    </div>211 212    <!-- Left message today -->213    <div class="sender">Amelia miller  9:49 AM</div>214    <div class="message-row left">215      <div class="avatar small">A</div>216      <div class="bubble">Hello Richard</div>217    </div>218  </div>219 220  <!-- Suggestions -->221  <div class="suggestions">222    <div class="chip">How are you?</div>223    <div class="chip">I'm fine, t