GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Chat UI - Render</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;position:relative;overflow:hidden;10    background:#0f2c2c;color:#ffffff;border-radius:32px;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute;top:0;left:0;width:100%;height:90px;16    display:flex;align-items:center;justify-content:space-between;17    padding:0 28px;font-size:32px;letter-spacing:0.2px;18  }19  .status-left,.status-right{display:flex;align-items:center;gap:20px;}20  .sb-icon{21    width:34px;height:34px;border-radius:6px;background:#2a4040;22    border:1px solid #325050;23  }24  .battery{25    display:flex;align-items:center;gap:10px;color:#fff;font-size:28px;26  }27  .battery .icon{28    width:36px;height:20px;border:2px solid #d9d9d9;border-radius:4px;position:relative;29  }30  .battery .icon::after{31    content:"";position:absolute;right:-6px;top:4px;width:6px;height:12px;background:#d9d9d9;border-radius:2px;32  }33  .battery .level{34    position:absolute;left:2px;top:2px;height:14px;width:26px;background:#8ee8c4;35  }36 37  /* Header */38  .header{39    position:absolute;top:90px;left:0;width:100%;height:170px;40    background:#133837;color:#fff;padding:0 28px;41    display:flex;align-items:center;gap:22px;42    border-bottom-left-radius:60px;border-bottom-right-radius:60px;43  }44  .back-btn{width:56px;height:56px;display:flex;align-items:center;justify-content:center;}45  .avatar{46    width:92px;height:92px;border-radius:50%;background:#7a36d6;47    display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:42px;48  }49  .title-area{flex:1;}50  .title-area .name{font-size:46px;margin-bottom:4px;}51  .header-actions{display:flex;align-items:center;gap:28px;}52  .icon-btn{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;}53  .three-dots{width:10px;height:10px;border-radius:50%;background:#cfd8dc;box-shadow:0 18px 0 #cfd8dc, 0 -18px 0 #cfd8dc;}54 55  /* Chat area */56  .chat{57    position:absolute;top:260px;left:0;width:100%;bottom:970px; /* leaves room for composer + keyboard */58    padding:20px 40px 0 40px;overflow:hidden;59  }60  .day-label{61    text-align:center;color:#a7bdba;font-size:30px;margin:30px 0;62  }63  .msg-row{display:flex;margin:26px 0;align-items:flex-end;}64  .msg-row.right{justify-content:flex-end;}65  .msg-row.left{justify-content:flex-start;gap:16px;}66  .bubble{67    max-width:720px;padding:26px 28px;font-size:40px;line-height:1.35;border-radius:32px;color:#eaf5f3;68  }69  .bubble.green{background:#174b3f;}70  .bubble.gray{background:#425053;color:#eaf5f3;}71  .meta{72    color:#9fb6b3;font-size:28px;margin:0 16px;73  }74  .sender{color:#cfd8dc;margin-right:12px;}75  .small-avatar{76    width:60px;height:60px;border-radius:50%;background:#7a36d6;77    display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:bold;78  }79 80  /* Composer */81  .composer{82    position:absolute;left:0;bottom:790px;width:100%;height:160px;padding:0 30px;83    display:flex;align-items:center;gap:22px;84  }85  .plus{86    width:70px;height:70px;border-radius:50%;border:3px solid #5bd3ac;color:#5bd3ac;87    display:flex;align-items:center;justify-content:center;font-size:42px;88  }89  .input-wrap{90    flex:1;height:110px;border:3px solid #4aa288;border-radius:55px;display:flex;align-items:center;91    padding:0 26px;background:transparent;color:#cfe9e4;font-size:40px;92  }93  .placeholder{color:#a5c8c1;flex:1;}94  .composer-icons{display:flex;align-items:center;gap:20px;margin-left:10px;}95  .round-icon{96    width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;97    border:2px solid #2f5650;background:transparent;98  }99  .send{100    width:70px;height:70px;border-radius:50%;background:#66f0be;display:flex;align-items:center;justify-content:center;101  }102 103  /* Keyboard */104  .keyboard{105    position:absolute;left:0;bottom:100px;width:100%;height:690px;106    background:#1a2424;border-top:1px solid #2a3a3a;padding:18px 24px;107  }108  .kb-row{display:flex;justify-content:center;gap:14px;margin:18px 0;}109  .key{110    width:86px;height:110px;background:#2a3434;border-radius:18px;color:#d9e2e1;display:flex;align-items:center;justify-content:center;111    font-size:40px;box-shadow:inset 0 0 0 1px #344444;112  }113  .key.wide{width:140px;}114  .key.space{flex:1;height:110px;}115  .key.green{background:#6fe3bd;color:#063c31;}116  .key.icon{font-size:36px;}117  .shift{width:120px;}118  .backspace{width:120px;}119  .enter{width:120px;background:#6fe3bd;color:#063c31;}120  .mic{width:120px;}121 122  /* Gesture bar */123  .gesture{124    position:absolute;left:50%;transform:translateX(-50%);125    bottom:28px;width:260px;height:10px;border-radius:8px;background:#dddddd;126    opacity:0.8;127  }128 129  /* Simple SVG styling */130  svg{fill:none;stroke:#e1f2ee;stroke-width:4}131</style>132</head>133<body>134<div id="render-target">135  <!-- Status bar -->136  <div class="status-bar">137    <div class="status-left">138      <div>11:01</div>139      <div class="sb-icon"></div>140      <div class="sb-icon"></div>141      <div class="sb-icon"></div>142      <div class="sb-icon"></div>143    </div>144    <div class="status-right">145      <div class="sb-icon" style="border-radius:50%"></div>146      <div class="battery">147        <div class="icon"><div class="level"></div></div>148        <div>100%</div>149      </div>150    </div>151  </div>152 153  <!-- Header -->154  <div class="header">155    <div class="back-btn">156      <svg width="40" height="40" viewBox="0 0 40 40">157        <path d="M26 8 L12 20 L26 32" stroke-linecap="round" stroke-linejoin="round"></path>158      </svg>159    </div>160    <div class="avatar">A</div>161    <div class="title-area">162      <div class="name">Amelia miller</div>163    </div>164    <div class="header-actions">165      <div class="icon-btn">166        <svg width="40" height="40" viewBox="0 0 40 40">167          <path d="M12 10 L20 18 M20 18 L16 22" stroke-linecap="round"></path>168          <path d="M10 10 C18 6 26 14 30 22 C28 26 24 30 20 30" stroke-linecap="round"></path>169        </svg>170      </div>171      <div class="icon-btn">172        <svg width="40" height="40" viewBox="0 0 40 40">173          <rect x="8" y="12" width="18" height="14" rx="3" stroke="#e1f2ee"></rect>174          <polygon points="26,18 34,14 34,26" fill="#e1f2ee" stroke="#e1f2ee"></polygon>175        </svg>176      </div>177      <div class="icon-btn"><div class="three-dots"></div></div>178    </div>179  </div>180 181  <!-- Chat content -->182  <div class="chat">183    <div class="day-label">Today</div>184 185    <!-- Right message 1 -->186    <div class="msg-row right">187      <div class="bubble green">Hi Amelia</div>188    </div>189    <div class="msg-row right" style="margin-top:-10px;">190      <div class="meta">9:27 AM</div>191    </div>192 193    <!-- Left message -->194    <div class="msg-row left" style="margin-top:40px;">195      <div class="small-avatar">A</div>196      <div>197        <div class="meta"><span class="sender">Amelia miller</span>9:49 AM</div>198        <div class="bubble gray">Hello Richard</div>199      </div>200    </div>201 202    <!-- Right message 2 -->203    <div class="msg-row right" style="margin-top:80px;">204      <div class="bubble green">How are you, Amelia?</div>205    </div>206    <div class="msg-row right" style="margin-top:-10px;">207      <div class="meta">Now</div>208    </div>209  </div>210 211  <!-- Composer -->212  <div class="composer">213    <div class="plus">+</div>214    <div class="input-wrap">215      <div class="placeholder">History is on</div>216      <div class="composer-icons">217        <div class="round-icon">218          <svg width="32" height="32" viewBox="0 0 40 40">219            <circle cx="20" cy="20" r="12"></circle>220            <path d="M14 18 Q20 24 26 18" stroke-linecap="round"></path>221          </svg>222        </div>223        <div class="round-icon">224          <svg width="34" height="34" viewBox="0 0 40 40">225            <rect x="8" y="12" width="24" height="16" rx="4"></rect>226            <path d="M12 24 L18 18 L22 22 L26 20 L30 24" stroke-linecap="round"></path>227          </svg>228        </div>229        <div class="send">230          <svg width="34" height="34" viewBox="0 0 40 40">231            <path d="M8 20 L32 10 L24 20 L32 30 Z" stroke-linejoin="round" fill="#0f2c2c"></path>232          </svg>233        </div>234      </div>235    </div>236  </div>237 238  <!-- Keyboard -->239  <div class="keyboard">240    <div class="kb-row">241      <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div><div class="key">T</div>242      <div class="key">Y</div><div class="key">U</div><div class="key">I</div><div class="key">O</div><div class="key">P</div>243    </div>244    <div class="kb-row">245      <div class="key">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div><div class="key">G</div>246      <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>247      <div class="key backspace">⌫</div>248    </div>249    <div class="kb-row">250      <div class="key shift">⇧</div>251      <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div><div class="key">B</div><div class="key">N</div><div class="key">M</div>252      <div class="key">⌦</div>253    </div>254    <div class="kb-row">255      <div class="key green wide">?123</div>256      <div class="key">,</div>257      <div class="key icon">☺</div>258      <div class="key space"></div>259      <div class="key">.</div>260      <div class="key enter">↵</div>261      <div class="key mic">🎤</div>262    </div>263  </div>264 265  <!-- Gesture bar -->266  <div class="gesture"></div>267</div>268</body>269</html>