GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Chat UI - Natalie</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b0b0b;14    color: #fff;15  }16 17  /* Top app bar */18  .status-bar {19    height: 56px;20    padding: 0 24px;21    color: #dcdcdc;22    display: flex;23    align-items: center;24    font-size: 28px;25    letter-spacing: .5px;26  }27  .status-bar .right { margin-left: auto; display:flex; gap:18px; align-items:center; }28  .header {29    height: 120px;30    display: flex;31    align-items: center;32    padding: 0 24px;33    border-bottom: 1px solid #1e1e1e;34  }35  .icon-btn {36    width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; margin-right: 10px;37  }38  .header .title {39    display: flex; flex-direction: column; justify-content: center;40  }41  .header .name { font-size: 42px; font-weight: 700; }42  .header .sub {43    font-size: 26px; color: #9bd18a; display:flex; align-items:center; gap:10px;44  }45  .active-dot { width: 12px; height: 12px; background:#3ddc84; border-radius:50%; display:inline-block; }46  .header .right-actions { margin-left:auto; display:flex; gap:26px; }47 48  .avatar {49    width: 72px; height: 72px; border-radius: 50%;50    background:#E0E0E0; border:1px solid #BDBDBD; color:#555;51    display:flex; align-items:center; justify-content:center; font-size:18px;52    margin-right: 18px;53  }54  .chat-area {55    position: absolute;56    top: 176px;57    bottom: 190px;58    left: 0; right: 0;59    overflow-y: hidden;60    padding: 10px 0 0 0;61  }62 63  .day-sep {64    width: 100%;65    display:flex; align-items:center; gap:20px;66    padding: 20px 30px;67    color:#bfbfbf; font-size: 30px;68  }69  .day-sep .line { height: 2px; background:#2a2a2a; flex:1; }70  .day-sep .label { white-space: nowrap; color:#9a9a9a; }71 72  .meta-time {73    color:#8a8a8a; font-size:26px; margin: 16px 34px 6px;74  }75 76  .message { display:flex; padding: 6px 24px; }77  .message.left { justify-content: flex-start; }78  .message.right { justify-content: flex-end; }79 80  .bubble {81    max-width: 720px;82    padding: 26px 30px;83    font-size: 42px;84    line-height: 1.25;85  }86  .bubble.left {87    background:#222428;88    color:#ffffff;89    border-radius: 28px 28px 28px 8px;90    border:1px solid #2e2e2e;91  }92  .bubble.right {93    background:#1f57c8;94    color:#fff;95    border-radius: 28px 28px 8px 28px;96  }97 98  /* Bottom composer */99  .composer {100    position:absolute; left:0; right:0; bottom:0;101    height: 190px; padding: 18px 26px;102    background: rgba(10,10,10,0.98);103    display:flex; align-items:center; gap:22px;104    border-top: 1px solid #1e1e1e;105  }106  .plus {107    width: 110px; height: 110px; border-radius: 55px; background:#1c7bf0;108    display:flex; align-items:center; justify-content:center; color:#fff; font-size:70px; font-weight:600;109  }110  .input-box {111    flex:1; height: 118px; background:#1b1b1b; border-radius: 60px;112    border:1px solid #2c2c2c; display:flex; align-items:center; padding: 0 28px; gap:22px;113  }114  .input-box .placeholder { color:#a2a2a2; font-size: 40px; }115  .small-icon {116    width: 58px; height: 58px; display:flex; align-items:center; justify-content:center; color:#cfcfcf;117  }118 119  /* Utility icons (simple SVGs) */120  svg { display:block; }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Simulated status bar -->127  <div class="status-bar">128    8:15129    <div class="right">130      <span>📶</span>131      <span>🔋100%</span>132    </div>133  </div>134 135  <!-- Header -->136  <div class="header">137    <div class="icon-btn">138      <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff">139        <path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"/>140      </svg>141    </div>142    <div class="avatar">[IMG: Avatar]</div>143    <div class="title">144      <div class="name">Natalie Larson</div>145      <div class="sub"><span class="active-dot"></span> Active now</div>146    </div>147    <div class="right-actions">148      <div class="icon-btn">149        <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">150          <path d="M17 10.5V7c0-1.1-.9-2-2-2H5C3.9 5 3 5.9 3 7v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-3.5l4 4V6.5l-4 4z"/>151        </svg>152      </div>153      <div class="icon-btn">154        <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">155          <path d="M6.6 10.8c1.7 3.1 4.5 5.9 7.6 7.6l2.5-2.5c.3-.3.8-.4 1.2-.2 1.3.5 2.7.8 4.1.8.7 0 1.2.5 1.2 1.2V22c0 .7-.5 1.2-1.2 1.2C11 23.2.8 13 .8 1.2.8.5 1.3 0 2 0h3.3c.7 0 1.2.5 1.2 1.2 0 1.4.3 2.8.8 4.1.1.4 0 .9-.3 1.2L6.6 10.8z"/>156        </svg>157      </div>158    </div>159  </div>160 161  <!-- Chat Area -->162  <div class="chat-area">163 164    <div class="day-sep" style="margin-top: 420px;">165      <div class="line"></div>166      <div class="label">Yesterday</div>167      <div class="line"></div>168    </div>169 170    <div class="meta-time">Natalie, 4:37 PM</div>171    <div class="message left">172      <div class="avatar" style="width:80px;height:80px;margin-right:18px;">[IMG: Avatar]</div>173      <div class="bubble left">Hii Richard</div>174    </div>175 176    <div class="day-sep" style="margin-top: 24px;">177      <div class="line"></div>178      <div class="label">Today</div>179      <div class="line"></div>180    </div>181 182    <div class="meta-time" style="text-align:right;">7:30 AM</div>183    <div class="message right">184      <div class="bubble right">Hi Natalie</div>185    </div>186 187    <div class="meta-time" style="text-align:right;">7:42 AM</div>188    <div class="message right">189      <div class="bubble right">Hi Natalie</div>190    </div>191 192    <div class="meta-time">Natalie, 8:14 AM</div>193    <div class="message left">194      <div class="avatar" style="width:80px;height:80px;margin-right:18px;">[IMG: Avatar]</div>195      <div class="bubble left">How are you doing?</div>196    </div>197 198  </div>199 200  <!-- Composer -->201  <div class="composer">202    <div class="plus">+</div>203    <div class="input-box">204      <div class="placeholder">Type a message</div>205      <div class="small-icon">206        <svg width="40" height="40" viewBox="0 0 24 24" fill="#cfcfcf">207          <path d="M12 17c3.3 0 6-2.2 6-5s-2.7-5-6-5-6 2.2-6 5 2.7 5 6 5zm0 2c-4.4 0-8-2.9-8-7s3.6-7 8-7 8 2.9 8 7-3.6 7-8 7z"/>208        </svg>209      </div>210    </div>211    <div class="small-icon">212      <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfcfcf">213        <path d="M12 3a9 9 0 100 18 9 9 0 000-18zm-1 5h2v6h-2V8zm1 9.2c-.7 0-1.2-.5-1.2-1.2S11.3 14.8 12 14.8s1.2.5 1.2 1.2-.5 1.2-1.2 1.2z"/>214      </svg>215    </div>216    <div class="small-icon">217      <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfcfcf">218        <path d="M20 5H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zM8 9l4 5 3-4 5 7H4l4-8z"/>219      </svg>220    </div>221    <div class="small-icon">222      <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfcfcf">223        <path d="M12 7a4 4 0 100 8 4 4 0 000-8zm8-2h-3.2l-1.6-2H8.8L7.2 5H4a2 2 0 00-2 2v11a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2z"/>224      </svg>225    </div>226  </div>227 228</div>229</body>230</html>