GD-ML/AndroidCode

1<html>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: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #0E0E10;13    color: #fff;14  }15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 80px;22    display: flex;23    align-items: center;24    padding: 0 24px;25    font-weight: 600;26    font-size: 36px;27    color: #EDEDED;28  }29  .status-left { display: flex; align-items: center; gap: 24px; }30  .ghost-dot {31    width: 22px; height: 22px; border-radius: 50%; background: #FFF; opacity: 0.9;32  }33  .status-right {34    margin-left: auto;35    display: flex; align-items: center; gap: 22px;36  }37  /* Icons */38  .icon { display: inline-block; vertical-align: middle; }39  .icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }40  .wifi svg { stroke-width: 4; }41  .battery svg { fill: none; stroke-width: 4; }42  /* App bar */43  .app-bar {44    position: absolute;45    top: 80px;46    left: 0;47    width: 1080px;48    height: 120px;49    display: flex;50    align-items: center;51    gap: 24px;52    padding: 0 24px;53    color: #FFF;54    font-size: 52px;55    font-weight: 700;56  }57  .back-btn svg { width: 52px; height: 52px; stroke: #fff; stroke-width: 6; }58  /* Gradient banner */59  .banner {60    position: absolute;61    top: 200px;62    left: 0;63    width: 1080px;64    height: 380px;65    background: linear-gradient(180deg, #58B6FF 0%, #3B7BDB 100%);66  }67  .camera-circle {68    position: absolute;69    top: 262px;70    left: 50%;71    transform: translateX(-50%);72    width: 340px;73    height: 340px;74    border-radius: 50%;75    background: radial-gradient(circle at 50% 40%, #5FB7FF 0%, #3576D7 100%);76    display: flex; align-items: center; justify-content: center;77    box-shadow: 0 8px 24px rgba(0,0,0,0.35);78  }79  .camera-circle svg { width: 120px; height: 120px; stroke: #fff; stroke-width: 12; fill: none; }80  /* Input area */81  .dots-vertical {82    position: absolute;83    top: 620px;84    left: 24px;85    display: grid;86    grid-template-rows: repeat(3, 1fr);87    gap: 28px;88  }89  .dot {90    width: 24px; height: 24px; border-radius: 50%;91    background: #C7C7C7;92    opacity: 0.7;93  }94  .group-name {95    position: absolute;96    top: 640px;97    left: 0;98    width: 1080px;99    text-align: center;100    font-size: 86px;101    font-weight: 800;102    color: #F6F6F9;103    letter-spacing: 1px;104  }105  .underline {106    position: absolute;107    top: 740px;108    left: 120px;109    width: 840px;110    height: 4px;111    background: #1F1F22;112    opacity: 0.8;113  }114  /* Send arrow circle */115  .send-circle {116    position: absolute;117    right: 48px;118    bottom: 960px; /* sits above keyboard */119    width: 150px;120    height: 150px;121    border-radius: 50%;122    background: linear-gradient(180deg, #59B6FF 0%, #3777D8 100%);123    display: flex; align-items: center; justify-content: center;124    box-shadow: 0 8px 24px rgba(0,0,0,0.35);125  }126  .send-circle svg { width: 90px; height: 90px; stroke: #fff; stroke-width: 12; fill: none; }127  /* Keyboard */128  .keyboard {129    position: absolute;130    left: 0;131    bottom: 0;132    width: 1080px;133    height: 900px;134    background: #151517;135    border-top: 1px solid #24242A;136  }137  .suggest-bar {138    height: 90px;139    background: #1B1B1F;140    display: flex; align-items: center;141    color: #EDEDED; font-size: 44px; font-weight: 600;142    padding: 0 28px; gap: 24px;143    border-bottom: 1px solid #2A2A30;144  }145  .suggest-sep {146    width: 1px; height: 46px; background: #3A3A40;147  }148  .suggest-right {149    margin-left: auto; display: flex; align-items: center; gap: 24px;150  }151  .suggest-right .mic svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 5; }152  .keys {153    padding: 24px 18px;154    display: grid;155    grid-template-rows: repeat(4, auto);156    gap: 22px;157  }158  .row { display: flex; justify-content: space-between; align-items: center; }159  .key {160    width: 88px; height: 110px;161    border-radius: 20px;162    background: #2A2A2F;163    color: #DDD;164    font-size: 48px;165    display: flex; align-items: center; justify-content: center;166    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);167  }168  .key.wide { width: 180px; }169  .space { flex: 1; height: 110px; margin: 0 16px; border-radius: 20px; background: #2A2A2F; }170  .enter {171    width: 128px; height: 110px; border-radius: 20px; background: #2A2A2F; display:flex; align-items:center; justify-content:center;172  }173  .enter .check {174    width: 88px; height: 88px; background: #CFE0FF; border-radius: 50%;175    display:flex; align-items:center; justify-content:center;176  }177  .enter .check svg { width: 48px; height: 48px; stroke: #2A5BD5; stroke-width: 8; fill: none; }178  .backspace svg { width: 52px; height: 52px; stroke: #fff; stroke-width: 5; }179  .shift svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 5; }180  .nav-pill {181    position: absolute;182    bottom: 20px; left: 50%;183    transform: translateX(-50%);184    width: 520px; height: 8px; border-radius: 8px; background: #D9D9DE; opacity: 0.6;185  }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status Bar -->192  <div class="status-bar">193    <div class="status-left">194      <div>11:40</div>195      <div class="ghost-dot"></div>196      <div class="ghost-dot"></div>197      <div class="ghost-dot"></div>198      <div class="ghost-dot"></div>199      <div style="width:10px;height:10px;border-radius:50%;background:#FFF;opacity:0.9;"></div>200    </div>201    <div class="status-right">202      <span class="icon wifi">203        <svg viewBox="0 0 24 24">204          <path d="M3 8c5-4 13-4 18 0"></path>205          <path d="M6 12c3-3 9-3 12 0"></path>206          <path d="M9 16c2-2 4-2 6 0"></path>207          <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"></circle>208        </svg>209      </span>210      <span class="icon battery">211        <svg viewBox="0 0 32 20">212          <rect x="2" y="4" width="24" height="12" rx="2"></rect>213          <rect x="4" y="6" width="16" height="8" fill="#fff" stroke="none"></rect>214          <rect x="26" y="8" width="4" height="4" rx="1"></rect>215        </svg>216      </span>217    </div>218  </div>219 220  <!-- App Bar -->221  <div class="app-bar">222    <span class="back-btn">223      <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"></path></svg>224    </span>225    <span>New Group Chat</span>226  </div>227 228  <!-- Gradient banner + camera -->229  <div class="banner"></div>230  <div class="camera-circle">231    <svg viewBox="0 0 64 64">232      <rect x="12" y="20" width="40" height="28" rx="6"></rect>233      <circle cx="32" cy="34" r="10"></circle>234      <path d="M25 20l4-6h6l4 6" stroke-linejoin="round"></path>235    </svg>236  </div>237 238  <!-- Input area -->239  <div class="dots-vertical">240    <div class="dot"></div>241    <div class="dot"></div>242    <div class="dot"></div>243  </div>244  <div class="group-name">Friends</div>245  <div class="underline"></div>246 247  <!-- Send arrow -->248  <div class="send-circle">249    <svg viewBox="0 0 24 24">250      <path d="M5 12h14"></path>251      <path d="M13 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path>252    </svg>253  </div>254 255  <!-- Keyboard -->256  <div class="keyboard">257    <div class="suggest-bar">258      <div>Friends</div>259      <div class="suggest-sep"></div>260      <div>Friend's</div>261      <div class="suggest-sep"></div>262      <div>Friendship</div>263      <div class="suggest-right">264        <span class="mic icon">265          <svg viewBox="0 0 24 24">266            <rect x="9" y="4" width="6" height="10" rx="3"></rect>267            <path d="M5 12c0 4 4 6 7 6s7-2 7-6"></path>268            <path d="M12 18v4"></path>269          </svg>270        </span>271      </div>272    </div>273 274    <div class="keys">275      <div class="row">276        <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><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>277      </div>278      <div class="row">279        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>280      </div>281      <div class="row">282        <div class="key shift">283          <svg viewBox="0 0 24 24"><path d="M12 4l7 7h-4v9H9v-9H5z"></path></svg>284        </div>285        <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>286        <div class="key backspace">287          <svg viewBox="0 0 24 24">288            <path d="M22 6H10l-6 6 6 6h12z"></path>289            <path d="M13 9l6 6M19 9l-6 6"></path>290          </svg>291        </div>292      </div>293      <div class="row">294        <div class="key wide">?123</div>295        <div class="key">,</div>296        <div class="key wide">😊</div>297        <div class="space"></div>298        <div class="key">.</div>299        <div class="enter">300          <div class="check">301            <svg viewBox="0 0 24 24"><path d="M5 13l5 5 9-12"></path></svg>302          </div>303        </div>304      </div>305    </div>306 307    <div class="nav-pill"></div>308  </div>309 310</div>311</body>312</html>