GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Chat UI Recreation</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0F1012; color: #FFF;12  }13  .status-bar {14    height: 100px;15    display: flex; align-items: center;16    padding: 0 36px;17    background: #141417;18    font-size: 34px; color: #fff;19  }20  .status-bar .right {21    margin-left: auto; display: flex; align-items: center; gap: 22px;22    color: #FFFFFF;23  }24  .header {25    height: 160px;26    display: flex; align-items: center;27    padding: 0 28px;28    border-bottom: 1px solid #23242a;29    background: #121316;30  }31  .header .back { margin-right: 18px; }32  .avatar {33    width: 92px; height: 92px; border-radius: 50%;34    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;35    display: flex; align-items: center; justify-content: center;36    font-size: 22px; margin-right: 22px;37  }38  .title-wrap { display: flex; flex-direction: column; }39  .contact-name { font-size: 40px; font-weight: 700; line-height: 1.2; }40  .presence { font-size: 28px; color: #d9d9d9; display: flex; align-items: center; gap: 10px; }41  .presence .dot { width: 14px; height: 14px; background: #f6c21b; border-radius: 50%; display: inline-block; }42  .header .actions { margin-left: auto; display: flex; gap: 26px; }43  .header .action-btn {44    width: 72px; height: 72px; border-radius: 18px;45    background: #1c1d21; display: flex; align-items: center; justify-content: center;46    border: 1px solid #272831;47  }48  .chat {49    display: flex; flex-direction: column;50    padding: 24px 24px 160px;51    gap: 18px;52  }53  .timestamp {54    font-size: 26px; color: #A4A6AC;55  }56  .message { display: flex; }57  .message.outgoing { justify-content: flex-end; }58  .message.incoming { justify-content: flex-start; }59  .bubble {60    max-width: 840px;61    border-radius: 26px;62    padding: 26px;63    box-sizing: border-box;64  }65  .bubble.outgoing {66    background: #184C8F;67    box-shadow: 0 4px 16px rgba(0,0,0,0.35);68  }69  .bubble.incoming {70    background: #26282D;71    box-shadow: 0 4px 16px rgba(0,0,0,0.35);72  }73  .reply {74    background: #11366D;75    border-radius: 20px;76    padding: 20px;77    position: relative;78    margin-bottom: 18px;79    color: #cfe7ff;80  }81  .reply.incoming {82    background: #2C2F36; color: #e9f5ff;83    border-left: 6px solid #3CC2FF; padding-left: 16px;84  }85  .reply .meta { font-size: 24px; color: #a8c2e8; margin-top: 12px; }86  .reply.incoming .meta { color: #9bd1ff; }87  .bubble p { margin: 0; font-size: 34px; line-height: 1.35; }88  .meta-line {89    font-size: 26px; color: #A4A6AC; margin: 6px 0 18px 0;90  }91  .mini-emoji {92    width: 46px; height: 46px; border-radius: 50%;93    background: #2B2D33; border: 1px solid #343741;94    display: flex; align-items: center; justify-content: center;95    margin-left: 12px;96  }97  .img-message {98    background: #ffffff; color: #111; border-radius: 28px;99    width: 620px; padding: 0; overflow: hidden; border: 1px solid #E6E6E6;100  }101  .img-placeholder {102    width: 100%; height: 820px;103    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;104    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;105  }106  .plane {107    width: 48px; height: 48px; margin-right: 10px; align-self: center;108  }109  .bottom-bar {110    position: absolute; left: 0; right: 0; bottom: 80px;111    padding: 0 24px;112  }113  .input-row {114    height: 120px; background: #15161A; border-top: 1px solid #272831;115    border-radius: 28px; display: flex; align-items: center; padding: 0 22px; gap: 20px;116  }117  .circle-btn {118    width: 86px; height: 86px; border-radius: 50%;119    background: #0A84FF; display: flex; align-items: center; justify-content: center;120    flex-shrink: 0;121  }122  .text-field {123    flex: 1; height: 86px; border-radius: 24px;124    background: #1C1D23; border: 1px solid #2C2D33;125    display: flex; align-items: center; padding: 0 24px; color: #AEB2BA;126    font-size: 32px;127  }128  .input-icons { display: flex; align-items: center; gap: 20px; }129  .nav-indicator {130    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);131    width: 320px; height: 10px; background: #FFFFFF; border-radius: 10px; opacity: 0.9;132  }133  /* simple helper */134  .row { display: flex; align-items: center; }135</style>136</head>137<body>138<div id="render-target">139 140  <!-- Status Bar -->141  <div class="status-bar">142    <div>2:37</div>143    <div class="right">144      <!-- small icons -->145      <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="14" fill="none" stroke="#fff" stroke-width="3"/></svg>146      <svg width="36" height="36" viewBox="0 0 36 36"><rect x="6" y="8" width="22" height="20" rx="3" fill="none" stroke="#fff" stroke-width="3"/></svg>147      <svg width="36" height="36" viewBox="0 0 36 36"><path d="M6 18h20" stroke="#fff" stroke-width="3"/></svg>148      <svg width="36" height="36" viewBox="0 0 36 36"><path d="M8 12h20" stroke="#fff" stroke-width="3"/></svg>149      <div class="row" style="gap:8px;">150        <svg width="36" height="36" viewBox="0 0 36 36"><path d="M6 26h24" stroke="#fff" stroke-width="3" stroke-linecap="round"/></svg>151        <div style="font-size:28px;">100%</div>152      </div>153    </div>154  </div>155 156  <!-- Header -->157  <div class="header">158    <div class="back">159      <svg width="60" height="60" viewBox="0 0 60 60">160        <path d="M36 14 L20 30 L36 46" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>161      </svg>162    </div>163    <div class="avatar">[IMG: Avatar]</div>164    <div class="title-wrap">165      <div class="contact-name">Natalie Larson</div>166      <div class="presence"><span class="dot"></span>Last seen 5h ago</div>167    </div>168    <div class="actions">169      <div class="action-btn">170        <svg width="48" height="48" viewBox="0 0 48 48">171          <rect x="6" y="12" width="26" height="20" rx="4" fill="none" stroke="#fff" stroke-width="3"/>172          <polygon points="34,16 42,20 42,24 34,28" fill="#fff"/>173        </svg>174      </div>175      <div class="action-btn">176        <svg width="48" height="48" viewBox="0 0 48 48">177          <path d="M10 14c4-4 14-4 20 2l4 4c-2 6-8 10-14 12l-4-4c-6-6-6-14-6-14z" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>178        </svg>179      </div>180    </div>181  </div>182 183  <!-- Chat Area -->184  <div class="chat">185 186    <!-- Outgoing timestamp -->187    <div class="row" style="justify-content:flex-end;"><div class="timestamp">8:41 AM</div></div>188 189    <!-- Outgoing message with reply -->190    <div class="message outgoing">191      <div class="bubble outgoing">192        <div class="reply">193          <svg width="40" height="40" viewBox="0 0 40 40" style="position:absolute; left:10px; top:10px;">194            <path d="M26 10 L14 20 L26 30" stroke="#cfe7ff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195          </svg>196          <div style="font-size:34px; color:#e5f1ff;">How are you doing?</div>197          <div class="meta">Natalie Larson, Today at 8:14 AM</div>198        </div>199        <p>I'm good, what about you, Natalie?</p>200      </div>201    </div>202 203    <!-- Incoming timestamp with name -->204    <div class="row" style="gap:12px;">205      <div class="avatar" style="width:64px;height:64px;font-size:18px;">[IMG: Avatar]</div>206      <div class="timestamp">Natalie, 9:32 AM</div>207    </div>208 209    <!-- Incoming message with reply -->210    <div class="message incoming">211      <div class="bubble incoming">212        <div class="reply incoming">213          <svg width="40" height="40" viewBox="0 0 40 40" style="position:absolute; left:10px; top:10px;">214            <path d="M26 10 L14 20 L26 30" stroke="#9bd1ff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215          </svg>216          <div style="font-size:34px; color:#ffffff;">I'm good, what about you,<br/>Natalie?</div>217          <div class="meta">Richard Wagner, Today at 8:41 AM</div>218        </div>219        <p style="margin-top:6px;">I’m Good</p>220      </div>221      <div class="mini-emoji">222        <svg width="28" height="28" viewBox="0 0 28 28">223          <circle cx="14" cy="14" r="12" fill="none" stroke="#bbb" stroke-width="2"/>224          <circle cx="9" cy="12" r="1.5" fill="#bbb"/>225          <circle cx="19" cy="12" r="1.5" fill="#bbb"/>226          <path d="M9 18c3 3 7 3 10 0" stroke="#bbb" stroke-width="2" fill="none" stroke-linecap="round"/>227        </svg>228      </div>229    </div>230 231    <!-- Image message -->232    <div class="row" style="justify-content:flex-end; gap:10px;">233      <div class="timestamp">2:31 PM</div>234    </div>235    <div class="message outgoing" style="align-items:flex-end;">236      <svg class="plane" viewBox="0 0 48 48">237        <polygon points="6,24 40,12 30,26 40,36" fill="#A4A6AC"/>238      </svg>239      <div class="img-message">240        <div class="img-placeholder">[IMG: Green plant]</div>241      </div>242    </div>243 244  </div>245 246  <!-- Bottom Input Bar -->247  <div class="bottom-bar">248    <div class="input-row">249      <div class="circle-btn">250        <svg width="44" height="44" viewBox="0 0 44 44">251          <path d="M22 10v24M10 22h24" stroke="#fff" stroke-width="4" stroke-linecap="round"/>252        </svg>253      </div>254      <div class="text-field">Type a message</div>255      <div class="input-icons">256        <svg width="48" height="48" viewBox="0 0 48 48">257          <circle cx="24" cy="24" r="20" fill="none" stroke="#AEB2BA" stroke-width="2"/>258          <circle cx="17" cy="20" r="2" fill="#AEB2BA"/>259          <circle cx="31" cy="20" r="2" fill="#AEB2BA"/>260          <path d="M16 30c4 4 12 4 16 0" stroke="#AEB2BA" stroke-width="2" fill="none" stroke-linecap="round"/>261        </svg>262        <svg width="48" height="48" viewBox="0 0 48 48">263          <rect x="18" y="10" width="12" height="20" rx="6" fill="none" stroke="#AEB2BA" stroke-width="2"/>264          <path d="M24 30v8" stroke="#AEB2BA" stroke-width="2"/>265        </svg>266        <svg width="48" height="48" viewBox="0 0 48 48">267          <rect x="10" y="16" width="28" height="20" rx="4" fill="none" stroke="#AEB2BA" stroke-width="2"/>268          <circle cx="24" cy="26" r="5" fill="none" stroke="#AEB2BA" stroke-width="2"/>269          <rect x="14" y="12" width="6" height="4" rx="2" fill="#AEB2BA"/>270        </svg>271        <svg width="48" height="48" viewBox="0 0 48 48">272          <polygon points="24,6 29,20 44,20 32,29 36,42 24,34 12,42 16,29 4,20 19,20" fill="none" stroke="#AEB2BA" stroke-width="2"/>273        </svg>274      </div>275    </div>276  </div>277 278  <div class="nav-indicator"></div>279</div>280</body>281</html>