GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>New Chat UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">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: #0f0f12;14    color: #fff;15  }16 17  /* Top status bar */18  .status-bar {19    height: 90px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #eaeaea;25    font-size: 32px;26    letter-spacing: 1px;27  }28  .status-icons { display: flex; align-items: center; gap: 26px; }29  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }30  .wifi {31    width: 28px; height: 18px; border: 2px solid #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: none;32  }33  .battery {34    width: 36px; height: 18px; border: 2px solid #fff; position: relative; border-radius: 3px;35  }36  .battery:after {37    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 10px; background: #fff; border-radius: 1px;38  }39 40  /* Header */41  .header {42    height: 128px;43    display: flex;44    align-items: center;45    padding: 0 26px;46    border-bottom: 1px solid #1e1e22;47  }48  .back-btn {49    width: 96px; height: 96px;50    display: flex; align-items: center; justify-content: center;51  }52  .header-title {53    font-size: 56px; font-weight: 700; margin-left: 10px;54  }55  .separator { height: 18px; }56 57  /* Search */58  .search-wrap {59    padding: 26px 30px 4px 30px;60  }61  .search-bar {62    height: 110px; border-radius: 18px; background: #1b1c21; border: 1px solid #23242a;63    display: flex; align-items: center; padding: 0 28px; color: #9aa0a6; font-size: 40px;64  }65  .search-icon {66    width: 44px; height: 44px; margin-right: 22px;67  }68 69  /* Options list */70  .list { margin-top: 6px; border-top: 1px solid #17181c; }71  .item {72    display: flex; align-items: center;73    padding: 34px 34px;74    border-bottom: 1px solid #1c1d22;75  }76  .item .left-icon {77    width: 86px; height: 86px; border-radius: 20px;78    background: #23252b; display: flex; align-items: center; justify-content: center;79    margin-right: 26px;80  }81  .item .label { font-size: 44px; font-weight: 700; color: #f1f1f1; }82 83  /* Section headers */84  .section-title {85    color: #a6aab0; font-size: 36px; letter-spacing: 0.5px;86    padding: 34px 34px 16px 34px;87  }88 89  /* Contacts */90  .contact {91    display: flex; align-items: center;92    padding: 26px 34px;93    border-bottom: 1px solid #1c1d22;94  }95  .avatar {96    width: 96px; height: 96px; border-radius: 50%;97    background: #E0E0E0; border: 1px solid #BDBDBD;98    display: flex; align-items: center; justify-content: center;99    color: #757575; font-size: 22px; text-align: center;100    position: relative; flex-shrink: 0;101  }102  .presence {103    position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #0f0f12; background: #ffcd3c;104  }105  .presence.online { background: #38d76b; }106  .contact .name { font-size: 42px; color: #f4f6f9; margin-left: 26px; display: flex; align-items: center; gap: 10px; }107  .verify {108    width: 34px; height: 34px; background: #2a8cff; border-radius: 50%;109    display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #fff;110  }111 112  /* Bottom home indicator */113  .home-indicator {114    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);115    width: 420px; height: 10px; background: #e9e9ea; border-radius: 10px; opacity: 0.9;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status Bar -->123  <div class="status-bar">124    <div>11:39</div>125    <div class="status-icons">126      <div class="dot"></div>127      <div class="dot"></div>128      <div class="dot"></div>129      <div class="dot"></div>130      <div class="dot"></div>131      <div class="wifi"></div>132      <div class="battery"></div>133    </div>134  </div>135 136  <!-- Header -->137  <div class="header">138    <div class="back-btn">139      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">140        <path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6z"/>141      </svg>142    </div>143    <div class="header-title">New Chat</div>144  </div>145 146  <!-- Search -->147  <div class="search-wrap">148    <div class="search-bar">149      <svg class="search-icon" viewBox="0 0 24 24" fill="#9aa0a6">150        <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.8.8l.3.3v.8L20 21l1-1-5.5-6zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/>151      </svg>152      <span>Search</span>153    </div>154  </div>155 156  <!-- Quick actions -->157  <div class="list">158    <div class="item">159      <div class="left-icon">160        <svg width="48" height="48" viewBox="0 0 24 24" fill="#9ecbff">161          <path d="M17 10.5V7a2 2 0 00-2-2H5A2 2 0 003 7v10a2 2 0 002 2h10a2 2 0 002-2v-3.5l4 4v-11l-4 4z"/>162        </svg>163      </div>164      <div class="label">Meet Now</div>165    </div>166 167    <div class="item">168      <div class="left-icon">169        <svg width="50" height="50" viewBox="0 0 24 24" fill="#b8c1ff">170          <path d="M7 10a3 3 0 100-6 3 3 0 000 6zm10 0a3 3 0 100-6 3 3 0 000 6zM7 22a5 5 0 015-5H2a5 5 0 015 5zm10 0a5 5 0 015-5h-10a5 5 0 015 5z"/>171        </svg>172      </div>173      <div class="label">New Group Chat</div>174    </div>175 176    <div class="item">177      <div class="left-icon">178        <svg width="48" height="48" viewBox="0 0 24 24" fill="#9ecbff">179          <path d="M6.6 10.8a7 7 0 006.6 6.6v3l5-5-5-5v3A5 5 0 017 5v5.8z"/>180        </svg>181      </div>182      <div class="label">New Call</div>183    </div>184 185    <div class="item">186      <div class="left-icon">187        <svg width="48" height="48" viewBox="0 0 24 24" fill="#c9a9ff">188          <path d="M12 2l3 6 6 .5-4.5 4 1.2 6.5L12 16l-5.7 3 1.2-6.5L3 8.5 9 8l3-6z"/>189        </svg>190      </div>191      <div class="label">New Moderated Chat</div>192    </div>193 194    <div class="item">195      <div class="left-icon">196        <svg width="48" height="48" viewBox="0 0 24 24" fill="#9bd3a8">197          <path d="M12 1a5 5 0 00-5 5v3H5v14h14V9h-2V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9z"/>198        </svg>199      </div>200      <div class="label">New Private Conversation</div>201    </div>202  </div>203 204  <!-- Suggested -->205  <div class="section-title">Suggested</div>206  <div class="contact">207    <div class="avatar">[Avatar]<span class="presence"></span></div>208    <div class="name">Natalie Larson</div>209  </div>210  <div class="contact">211    <div class="avatar">[Avatar]<span class="presence"></span></div>212    <div class="name">Richard Wagner</div>213  </div>214 215  <!-- People -->216  <div class="section-title">People</div>217 218  <div class="contact">219    <div class="avatar">[Avatar]</div>220    <div class="name">Amelia miller (You) <span class="verify">✓</span></div>221  </div>222 223  <div class="contact">224    <div class="avatar">[Avatar]</div>225    <div class="name">Bing <span class="verify">✓</span></div>226  </div>227 228  <div class="contact">229    <div class="avatar">[Avatar]<span class="presence online"></span></div>230    <div class="name">Echo / Sound Test Service</div>231  </div>232 233  <div class="contact">234    <div class="avatar">[Avatar]<span class="presence"></span></div>235    <div class="name">Natalie Larson</div>236  </div>237 238  <div class="contact">239    <div class="avatar">[Avatar]<span class="presence"></span></div>240    <div class="name">Richard Wagner</div>241  </div>242 243  <div class="home-indicator"></div>244</div>245</body>246</html>