GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>New Group Chat UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #0f0f0f;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    font-weight: 500;29    letter-spacing: 1px;30  }31  .status-left { display: flex; align-items: center; gap: 16px; }32  .status-time { font-size: 40px; color: #eaeaea; }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .icon { width: 40px; height: 40px; display: inline-block; }40 41  /* Header */42  .header {43    position: absolute;44    top: 110px;45    left: 0;46    width: 1080px;47    height: 140px;48    display: flex;49    align-items: center;50    padding: 0 32px;51    box-sizing: border-box;52    gap: 28px;53  }54  .back-btn {55    width: 72px;56    height: 72px;57    display: flex;58    align-items: center;59    justify-content: center;60    border-radius: 36px;61  }62  .title {63    font-size: 64px;64    font-weight: 700;65    color: #f7f7f7;66  }67 68  /* Blue banner with camera */69  .banner {70    position: absolute;71    top: 250px;72    left: 0;73    width: 1080px;74    height: 380px;75    background: linear-gradient(180deg, #50A9FF 0%, #3179E4 100%);76  }77  .camera-circle {78    position: absolute;79    top: 280px; /* overlaps slightly below the banner */80    left: 50%;81    transform: translateX(-50%);82    width: 360px;83    height: 360px;84    background: radial-gradient(circle at 50% 40%, #5AA9FF, #2F73D9);85    border-radius: 50%;86    box-shadow: 0 18px 36px rgba(0,0,0,0.35);87    display: flex;88    align-items: center;89    justify-content: center;90  }91 92  /* Three vertical dots */93  .dots {94    position: absolute;95    top: 650px;96    left: 22px;97    display: grid;98    gap: 26px;99  }100  .dot {101    width: 22px;102    height: 22px;103    border-radius: 11px;104    background: #D6D6D6;105    opacity: 0.8;106    box-shadow: 0 0 0 2px rgba(255,255,255,0.15) inset;107  }108 109  /* Input area */110  .input-area {111    position: absolute;112    top: 760px;113    left: 76px;114    width: 928px;115  }116  .placeholder {117    font-size: 72px;118    color: #A9A9A9;119    font-weight: 700;120    letter-spacing: 1px;121  }122  .underline {123    margin-top: 18px;124    height: 2px;125    background: #262626;126    width: 928px;127  }128 129  /* Send arrow button */130  .send-btn {131    position: absolute;132    bottom: 900px;133    right: 76px;134    width: 160px;135    height: 160px;136    border-radius: 80px;137    background: #3A86E9;138    box-shadow: 0 14px 24px rgba(0,0,0,0.35);139    display: flex;140    align-items: center;141    justify-content: center;142  }143 144  /* Keyboard */145  .keyboard {146    position: absolute;147    bottom: 0;148    left: 0;149    width: 1080px;150    height: 760px;151    background: #1E1E1E;152    border-top: 1px solid #2A2A2A;153    box-sizing: border-box;154    padding: 28px 28px 36px 28px;155    display: grid;156    grid-template-rows: repeat(4, 1fr);157    gap: 22px;158  }159  .row {160    display: grid;161    gap: 14px;162  }163  .row.top { grid-template-columns: repeat(10, 1fr); }164  .row.middle { grid-template-columns: repeat(9, 1fr); padding: 0 32px; }165  .row.bottom { grid-template-columns: repeat(8, 1fr); padding: 0 90px; }166  .row.space {167    grid-template-columns: 1.2fr 0.9fr 0.9fr 4.2fr 0.9fr 1.2fr;168    align-items: center;169  }170  .key {171    background: #2A2A2A;172    color: #EDEDED;173    border-radius: 18px;174    display: flex;175    align-items: center;176    justify-content: center;177    font-size: 46px;178    box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset;179  }180  .key.small { font-size: 40px; }181  .key.spacebar { justify-content: center; font-size: 42px; color: #cfcfcf; }182  .key.icon { background: #2A2A2A; }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status Bar -->189  <div class="status-bar">190    <div class="status-left">191      <div class="status-time">11:39</div>192    </div>193    <div class="status-right">194      <!-- WiFi icon -->195      <svg class="icon" viewBox="0 0 24 24">196        <path fill="#FFFFFF" d="M12 18c.8 0 1.5.7 1.5 1.5S12.8 21 12 21s-1.5-.7-1.5-1.5S11.2 18 12 18zm-6.7-6.2c3.7-3.6 9.7-3.6 13.4 0l-1.6 1.6c-2.8-2.7-7.3-2.7-10.1 0l-1.7-1.6zm3.7 3.7c2.3-2.3 6-2.3 8.3 0l-1.6 1.6c-1.4-1.4-3.7-1.4-5.1 0l-1.6-1.6z"/>197      </svg>198      <!-- Battery icon -->199      <svg class="icon" viewBox="0 0 24 24">200        <rect x="2" y="6" width="17" height="12" rx="2" ry="2" fill="#FFFFFF"></rect>201        <rect x="4" y="8" width="13" height="8" fill="#1B5E20"></rect>202        <rect x="20" y="9" width="2" height="6" fill="#FFFFFF"></rect>203      </svg>204    </div>205  </div>206 207  <!-- Header -->208  <div class="header">209    <div class="back-btn">210      <svg width="64" height="64" viewBox="0 0 24 24">211        <path fill="#FFFFFF" d="M15.5 5l-7 7 7 7-1.5 1.5L6 12l8-8 1.5 1z"/>212      </svg>213    </div>214    <div class="title">New Group Chat</div>215  </div>216 217  <!-- Banner -->218  <div class="banner"></div>219 220  <!-- Camera Circle -->221  <div class="camera-circle">222    <svg width="140" height="140" viewBox="0 0 24 24">223      <path fill="#FFFFFF" d="M9 5l1.5-2h3L15 5h3c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h3zm3 13a5 5 0 100-10 5 5 0 000 10zm0-2.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/>224    </svg>225  </div>226 227  <!-- Dots -->228  <div class="dots">229    <div class="dot"></div>230    <div class="dot"></div>231    <div class="dot"></div>232  </div>233 234  <!-- Input Area -->235  <div class="input-area">236    <div class="placeholder">Group name</div>237    <div class="underline"></div>238  </div>239 240  <!-- Send Button -->241  <div class="send-btn">242    <svg width="90" height="90" viewBox="0 0 24 24">243      <path fill="#FFFFFF" d="M3 12l18-9-6 9 6 9-18-9z"/>244    </svg>245  </div>246 247  <!-- Keyboard -->248  <div class="keyboard">249    <div class="row top">250      <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>251      <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>252    </div>253    <div class="row middle">254      <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>255      <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>256    </div>257    <div class="row bottom">258      <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>259      <div class="key">N</div><div class="key">M</div>260      <div class="key small">⌫</div>261    </div>262    <div class="row space">263      <div class="key small">?123</div>264      <div class="key small">,</div>265      <div class="key small">😊</div>266      <div class="key spacebar">Space</div>267      <div class="key small">.</div>268      <div class="key small">⏎</div>269    </div>270  </div>271 272</div>273</body>274</html>