GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Chat UI - Natalie Larson</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}7  #render-target{8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background:#111315;13    color:#fff;14  }15 16  /* Status bar */17  .status-bar{18    position:absolute; left:0; top:0;19    width:100%; height:110px;20    display:flex; align-items:center; justify-content:space-between;21    padding:0 32px; box-sizing:border-box;22    color:#eaeaea; font-size:40px;23  }24  .status-right{25    display:flex; align-items:center; gap:26px; font-size:34px; color:#d9d9d9;26  }27  .icon{28    width:56px; height:56px;29  }30 31  /* App bar */32  .app-bar{33    position:absolute; left:0; top:110px;34    width:100%; height:160px;35    display:flex; align-items:center;36    padding:0 26px; box-sizing:border-box;37    border-bottom:1px solid #1c1f22;38  }39  .back-btn{width:72px;height:72px;margin-right:12px;}40  .avatar{41    width:90px; height:90px; border-radius:50%;42    background:#E0E0E0; border:1px solid #BDBDBD;43    display:flex; align-items:center; justify-content:center;44    color:#757575; font-size:22px; margin-right:18px;45  }46  .title-wrap{flex:1;}47  .title{font-size:46px; font-weight:700; color:#f5f5f5; line-height:1;}48  .subtitle{font-size:32px; color:#a9a9a9; margin-top:6px;}49  .app-actions{display:flex; align-items:center; gap:28px; margin-right:10px;}50 51  /* Chat area */52  .chat{53    position:absolute; left:0; top:270px; bottom:210px; width:100%;54    padding:0 28px; box-sizing:border-box; overflow:hidden;55  }56  .divider{57    display:flex; align-items:center; justify-content:center;58    gap:24px; color:#c7c7c7; font-size:34px; margin:48px 0 36px;59  }60  .divider .line{height:2px; background:#2a2f35; flex:1;}61  .stamp{color:#a8a8a8; font-size:30px; margin:22px 12px;}62  .msg-row{display:flex; margin-bottom:28px; align-items:flex-end;}63  .left{justify-content:flex-start;}64  .right{justify-content:flex-end;}65  .bubble-left{66    max-width:720px; background:#23272b; color:#ffffff;67    border-radius:26px 26px 26px 10px; padding:28px 34px; font-size:42px;68  }69  .bubble-right{70    max-width:720px; background:#153F8F; color:#ffffff;71    border-radius:26px 26px 10px 26px; padding:28px 34px; font-size:42px;72  }73  .smiley{margin-left:16px; width:48px; height:48px;}74  .tip{display:flex; align-items:center; gap:18px; color:#bdbdbd; font-size:34px; margin:22px 0 18px 120px;}75  .small-avatar{76    width:54px; height:54px; border-radius:50%;77    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;78    display:flex; align-items:center; justify-content:center; font-size:18px;79    margin-left:auto; margin-right:26px;80  }81 82  /* Input bar */83  .input-bar{84    position:absolute; left:0; bottom:0; width:100%; height:210px;85    padding:24px 26px; box-sizing:border-box; background:rgba(10,12,14,0.96);86    border-top:1px solid #1c1f22; display:flex; align-items:center; gap:22px;87  }88  .plus-btn{89    width:110px; height:110px; border-radius:55px; background:#2287ff;90    display:flex; align-items:center; justify-content:center; color:#fff; font-size:64px; font-weight:700;91  }92  .input-field{93    flex:1; height:110px; border-radius:60px; background:#1b1f24; border:1px solid #2b2f36;94    display:flex; align-items:center; padding:0 34px; box-sizing:border-box; color:#e3e3e3; font-size:40px;95  }96  .placeholder{flex:1; color:#a7a7a7;}97  .input-icon{width:60px; height:60px; margin-left:18px;}98  .tools{display:flex; align-items:center; gap:28px; margin-left:8px;}99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status Bar -->105  <div class="status-bar">106    <div>7:47</div>107    <div class="status-right">108      <!-- wifi icon -->109      <svg class="icon" viewBox="0 0 24 24">110        <path fill="#d9d9d9" d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5 10.5 20.8 10.5 20s.7-1.5 1.5-1.5z"/>111        <path fill="#d9d9d9" d="M3 8c5.5-4.1 12.5-4.1 18 0l-1.7 2.1C15.2 6.8 8.8 6.8 4.7 10.1L3 8z"/>112        <path fill="#d9d9d9" d="M5.5 11.2c4.3-3.2 8.7-3.2 13 0l-1.7 2c-3.7-2.6-6-2.6-9.6 0l-1.7-2z"/>113        <path fill="#d9d9d9" d="M8 14.3c2.6-1.9 5.4-1.9 8 0l-2 2.2c-1.8-1.2-2.2-1.2-4 0L8 14.3z"/>114      </svg>115      <!-- mail dot -->116      <svg class="icon" viewBox="0 0 24 24">117        <circle cx="12" cy="12" r="8" fill="#d9d9d9"/>118      </svg>119      <!-- battery icon -->120      <svg class="icon" viewBox="0 0 32 24">121        <rect x="1" y="5" width="26" height="14" rx="2" ry="2" fill="none" stroke="#d9d9d9" stroke-width="2"/>122        <rect x="28" y="9" width="3" height="6" rx="1" fill="#d9d9d9"/>123        <rect x="3" y="7" width="18" height="10" fill="#d9d9d9"/>124      </svg>125      <div>95%</div>126    </div>127  </div>128 129  <!-- App Bar -->130  <div class="app-bar">131    <!-- back -->132    <svg class="back-btn" viewBox="0 0 24 24">133      <path fill="#eaeaea" d="M15.5 5l-7 7 7 7 1.5-1.5-5.5-5.5 5.5-5.5z"/>134    </svg>135    <div class="avatar">[IMG: Avatar]</div>136    <div class="title-wrap">137      <div class="title">Natalie Larson</div>138      <div class="subtitle">Last seen 15h ago</div>139    </div>140    <div class="app-actions">141      <!-- video icon -->142      <svg class="icon" viewBox="0 0 24 24">143        <rect x="2" y="6" width="13" height="12" rx="2" fill="none" stroke="#eaeaea" stroke-width="2"/>144        <polygon points="16,9 22,6 22,18 16,15" fill="#eaeaea"/>145      </svg>146      <!-- phone icon -->147      <svg class="icon" viewBox="0 0 24 24">148        <path fill="#eaeaea" d="M6 2c.6 0 1 .4 1 1l1 4c0 .3 0 .6-.3.8l-1.8 1.8c1.8 3.3 4.5 6 7.8 7.8l1.8-1.8c.2-.3.5-.3.8-.3l4 1c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1C11.9 22 2 12.1 2 3c0-.6.4-1 1-1h3z"/>149      </svg>150    </div>151  </div>152 153  <!-- Chat Content -->154  <div class="chat">155 156    <div style="height:860px;"></div> <!-- big empty top like screenshot -->157 158    <div class="divider">159      <div class="line"></div>160      <div>Yesterday</div>161      <div class="line"></div>162    </div>163 164    <div class="stamp">Natalie, 4:37 PM</div>165    <div class="msg-row left">166      <div class="bubble-left">Hii Richard</div>167      <!-- smile icon -->168      <svg class="smiley" viewBox="0 0 24 24">169        <circle cx="12" cy="12" r="10" fill="none" stroke="#cfcfcf" stroke-width="2"/>170        <circle cx="8.5" cy="10" r="1.2" fill="#cfcfcf"/>171        <circle cx="15.5" cy="10" r="1.2" fill="#cfcfcf"/>172        <path d="M7.5 14c2.5 2 6.5 2 9 0" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>173      </svg>174    </div>175 176    <div class="tip">177      <div style="font-size:46px;">👍</div>178      <div>Double tap message to like it</div>179    </div>180 181    <div class="small-avatar">[IMG]</div>182 183    <div class="divider" style="margin-top:70px;">184      <div class="line"></div>185      <div>Today</div>186      <div class="line"></div>187    </div>188 189    <div class="stamp" style="text-align:right;">7:30 AM</div>190    <div class="msg-row right">191      <div class="bubble-right">Hi Natalie</div>192    </div>193 194    <div class="stamp" style="text-align:right;">7:42 AM</div>195    <div class="msg-row right">196      <div class="bubble-right">Hi Natalie</div>197    </div>198 199  </div>200 201  <!-- Input Bar -->202  <div class="input-bar">203    <div class="plus-btn">+</div>204    <div class="input-field">205      <div class="placeholder">Type a message</div>206      <!-- smile icon in input -->207      <svg class="input-icon" viewBox="0 0 24 24">208        <circle cx="12" cy="12" r="10" fill="none" stroke="#b8b8b8" stroke-width="2"/>209        <circle cx="8.5" cy="10" r="1.2" fill="#b8b8b8"/>210        <circle cx="15.5" cy="10" r="1.2" fill="#b8b8b8"/>211        <path d="M7.5 14c2.5 2 6.5 2 9 0" stroke="#b8b8b8" stroke-width="2" fill="none" stroke-linecap="round"/>212      </svg>213    </div>214    <div class="tools">215      <!-- mic -->216      <svg class="icon" viewBox="0 0 24 24">217        <rect x="9" y="4" width="6" height="10" rx="3" fill="#eaeaea"/>218        <path d="M6 11c0 4 3 6 6 6s6-2 6-6" stroke="#eaeaea" stroke-width="2" fill="none"/>219        <rect x="11" y="18" width="2" height="3" fill="#eaeaea"/>220        <rect x="8" y="21" width="8" height="2" fill="#eaeaea"/>221      </svg>222      <!-- photo -->223      <svg class="icon" viewBox="0 0 24 24">224        <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#eaeaea" stroke-width="2"/>225        <circle cx="9" cy="10" r="2.2" fill="#eaeaea"/>226        <path d="M21 17l-6-6-4 4-3-2-5 4" stroke="#eaeaea" stroke-width="2" fill="none"/>227      </svg>228      <!-- sparkle/sticker -->229      <svg class="icon" viewBox="0 0 24 24">230        <path d="M12 2l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z" fill="#eaeaea"/>231      </svg>232    </div>233  </div>234 235</div>236</body>237</html>