GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>New Chat UI Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#F6F7FA; color:#222;12 }13 14 /* Top status bar */15 .status-bar {16 position:absolute; top:0; left:0; width:100%; height:120px;17 background:#9EA0A4; color:#fff; display:flex; align-items:center; justify-content:space-between;18 padding:0 40px; font-size:40px; font-weight:600;19 }20 .status-icons { display:flex; align-items:center; gap:26px; opacity:.95; }21 .status-icons svg { width:38px; height:38px; fill:#fff; }22 23 /* Tabs */24 .tab-bar {25 position:absolute; top:120px; left:0; width:100%; height:160px;26 background:#F2F3F5; border-bottom:1px solid #DADDE1;27 display:flex; align-items:flex-end; justify-content:space-between; padding:0 40px 22px;28 }29 .tab {30 display:flex; align-items:center; gap:18px; font-size:44px; color:#7A7F85;31 }32 .tab svg { width:44px; height:44px; fill:currentColor; }33 .tab.active { color:#111; position:relative; }34 .tab.active::after {35 content:""; position:absolute; left:0; bottom:-22px; width:220px; height:6px; background:#111; border-radius:6px;36 }37 38 /* Content */39 .content { position:absolute; top:280px; left:0; right:0; bottom:0; }40 .title {41 text-align:center; font-size:64px; color:#656B70; font-weight:700; margin:8px 0 8px;42 display:flex; align-items:center; justify-content:center; gap:14px;43 }44 .title svg { width:46px; height:46px; fill:#9AA0A6; }45 46 .to-input {47 width:980px; height:110px; margin:30px auto 34px; background:#ECEFF1;48 border-radius:55px; display:flex; align-items:center; padding:0 30px; font-size:44px; color:#2E7D32;49 box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);50 }51 .caret { width:4px; height:56px; background:#1DB954; margin-left:8px; border-radius:2px; }52 53 .section { width:100%; padding:0 38px; }54 .section h3 { margin:26px 0 20px; font-size:44px; color:#6B7176; font-weight:800; }55 56 .list-card {57 background:#fff; border-radius:28px; padding:28px 32px; display:flex; align-items:center; justify-content:space-between;58 margin-bottom:22px; box-shadow:0 18px 40px rgba(0,0,0,0.06);59 }60 .info { display:flex; align-items:center; gap:28px; }61 .avatar {62 width:110px; height:110px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:999px;63 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px; text-align:center;64 line-height:1.2; padding:0 8px;65 }66 .name { font-size:46px; color:#222; }67 .subtext { font-size:32px; color:#9BA1A7; margin-top:6px; }68 .right-check {69 width:70px; height:70px; border:3px solid #D2D6DB; border-radius:50%;70 }71 72 /* Right index */73 .index {74 position:absolute; top:820px; right:10px; width:60px;75 display:flex; flex-direction:column; align-items:center; gap:10px; color:#A8ADB2; font-size:26px;76 }77 78 /* Floating Chat pill */79 .chat-pill {80 position:absolute; left:50%; transform:translateX(-50%); bottom:770px;81 width:520px; height:140px; background:#C6CBD1; color:#fff; border-radius:80px;82 display:flex; align-items:center; justify-content:center; font-size:56px; font-weight:800; z-index:5;83 letter-spacing:.5px;84 }85 86 /* Keyboard */87 .keyboard {88 position:absolute; left:0; bottom:0; width:100%; height:880px; background:#F2EDF8;89 border-top-left-radius:24px; border-top-right-radius:24px; box-shadow:0 -8px 24px rgba(0,0,0,0.06);90 }91 .k-top { display:flex; align-items:center; gap:36px; padding:20px 26px; color:#777; font-size:36px; }92 .k-chip {93 width:96px; height:96px; border-radius:22px; background:#CFE9C4; display:flex; align-items:center; justify-content:center;94 }95 .k-chip.gray { background:#EAE8F3; color:#555; }96 .k-chip.small { width:88px; height:88px; }97 98 .keys-row { display:grid; grid-template-columns: repeat(10, 1fr); gap:16px; padding:12px 22px; }99 .key {100 background:#fff; border-radius:16px; height:120px; display:flex; align-items:center; justify-content:center;101 font-size:44px; color:#222; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.05);102 }103 .keys-row.center { grid-template-columns: repeat(9, 1fr); padding:12px 72px; }104 .keys-row.center2 { grid-template-columns: repeat(7, 1fr); padding:12px 150px; }105 .keys-row.bottom { grid-template-columns: 160px repeat(5, 1fr) 160px 160px; padding:12px 30px; }106 .key.space { grid-column: span 3; }107 .key.pink { background:#F5DCE3; }108 .send {109 position:absolute; right:28px; bottom:180px; width:130px; height:130px; background:#BEE6B6; border-radius:50%;110 display:flex; align-items:center; justify-content:center;111 }112 .send svg { width:60px; height:60px; fill:#2E7D32; }113 .mic {114 position:absolute; right:28px; bottom:326px; width:96px; height:96px; background:#fff; border-radius:50%;115 display:flex; align-items:center; justify-content:center; box-shadow:0 6px 12px rgba(0,0,0,0.08);116 }117 .mic svg { width:44px; height:44px; fill:#666; }118</style>119</head>120<body>121<div id="render-target">122 <!-- Status bar -->123 <div class="status-bar">124 <div>3:29</div>125 <div class="status-icons">126 <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v10a2 2 0 0 1-2 2h-5v-7H10v7H5a2 2 0 0 1-2-2z"/></svg>127 <svg viewBox="0 0 24 24"><path d="M2 8.5C6.5 4 17.5 4 22 8.5l-2 2C17 7.5 7 7.5 4 10.5l-2-2z"/></svg>128 <svg viewBox="0 0 24 24"><path d="M16 4H8a2 2 0 0 0-2 2v14l6-3 6 3V6a2 2 0 0 0-2-2z"/></svg>129 <svg viewBox="0 0 24 24"><path d="M16 4h-1V2h-6v2H8a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4zm2 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z"/></svg>130 </div>131 </div>132 133 <!-- Tabs -->134 <div class="tab-bar">135 <div class="tab active">136 <svg viewBox="0 0 24 24"><path d="M21 6H3a1 1 0 0 0-1 1v11l4-3h15a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"/></svg>137 <span>New Chat</span>138 </div>139 <div class="tab">140 <svg class="phone" viewBox="0 0 24 24"><path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.6 11.6 0 0 0 3.6.6 1 1 0 0 1 1 1V20a2 2 0 0 1-2 2A18 18 0 0 1 2 6a2 2 0 0 1 2-2h3.5a1 1 0 0 1 1 1c0 1.25.22 2.5.63 3.6a1 1 0 0 1-.25 1l-2.28 2.2z"/></svg>141 <span>New Call</span>142 </div>143 </div>144 145 <!-- Content -->146 <div class="content">147 <div class="title">148 <span>New Group Name</span>149 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>150 </div>151 152 <div class="to-input">153 To: <div class="caret"></div>154 </div>155 156 <div class="section">157 <h3>Best Friends</h3>158 <div class="list-card">159 <div class="info">160 <div class="avatar">[IMG: Avatar]</div>161 <div>162 <div class="name">Amelia miller</div>163 <div class="subtext">😊</div>164 </div>165 </div>166 <div class="right-check"></div>167 </div>168 </div>169 170 <div class="section" style="margin-top:10px;">171 <h3>Recents</h3>172 173 <div class="list-card">174 <div class="info">175 <div class="avatar">[IMG: Avatar]</div>176 <div>177 <div class="name">Richard Wagner</div>178 </div>179 </div>180 <div class="right-check"></div>181 </div>182 183 <div class="list-card">184 <div class="info">185 <div class="avatar">[IMG: Avatar]</div>186 <div>187 <div class="name">My AI</div>188 <div class="subtext">🤖 📌</div>189 </div>190 </div>191 <div class="right-check"></div>192 </div>193 194 <div class="list-card">195 <div class="info">196 <div class="avatar">[IMG: Avatar]</div>197 <div>198 <div class="name">Natalie</div>199 </div>200 </div>201 <div class="right-check"></div>202 </div>203 </div>204 </div>205 206 <!-- Right A–Z index -->207 <div class="index">208 <div>😊</div>209 <div>⏰</div>210 <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>211 <div>G</div><div>H</div><div>I</div><div>J</div><div>K</div><div>L</div>212 <div>M</div><div>N</div><div>O</div><div>P</div><div>Q</div><div>R</div>213 <div>S</div><div>T</div><div>U</div><div>V</div><div>W</div><div>X</div>214 <div>Y</div><div>Z</div>215 </div>216 217 <!-- Floating Chat Pill -->218 <div class="chat-pill">Chat</div>219 220 <!-- Keyboard -->221 <div class="keyboard">222 <div class="k-top">223 <div class="k-chip">⬛️</div>224 <div class="k-chip gray">🙂</div>225 <div class="k-chip gray">GIF</div>226 <div class="k-chip gray">⚙️</div>227 <div class="k-chip gray">G↔︎</div>228 <div class="k-chip gray">🎨</div>229 <div class="k-chip small gray">🎙️</div>230 </div>231 232 <div class="keys-row">233 <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>234 <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>235 </div>236 <div class="keys-row center">237 <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>238 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>239 </div>240 <div class="keys-row center2">241 <div class="key pink">⇧</div>242 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>243 <div class="key">b</div><div class="key">n</div><div class="key">m</div>244 <div class="key pink">⌫</div>245 </div>246 <div class="keys-row bottom">247 <div class="key pink">?123</div>248 <div class="key">,</div>249 <div class="key">🙂</div>250 <div class="key space" style="grid-column: span 3;"> </div>251 <div class="key">.</div>252 <div class="key pink">✓</div>253 </div>254 255 <div class="mic">256 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>257 </div>258 <div class="send">259 <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>260 </div>261 </div>262</div>263</body>264</html>