GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#0f1116; color:#eaeef7;11 }12 13 /* Status bar */14 .status-bar {15 height:80px;16 padding:0 32px;17 display:flex; align-items:center; justify-content:space-between;18 color:#cfd6e4; font-weight:600; font-size:36px;19 }20 .status-icons { display:flex; gap:22px; align-items:center; }21 .dot { width:18px; height:18px; border-radius:50%; background:#cfd6e4; opacity:.35; }22 .wifi { width:36px; height:24px; border:3px solid #cfd6e4; border-top:none; border-radius:0 0 18px 18px; opacity:.8; }23 .battery {24 width:54px; height:26px; border:3px solid #cfd6e4; position:relative; border-radius:6px;25 }26 .battery::after {27 content:''; position:absolute; right:-10px; top:6px; width:8px; height:14px; background:#cfd6e4; border-radius:3px;28 }29 30 /* Profile banner */31 .profile-banner {32 background:linear-gradient(180deg, #0d2d4f 0%, #0c2443 100%);33 padding:28px 32px 36px;34 }35 .profile-row { display:flex; align-items:center; justify-content:space-between; }36 .avatar-lg {37 width:120px; height:120px; border-radius:60px;38 background:#E0E0E0; border:1px solid #BDBDBD;39 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;40 margin-right:24px;41 }42 .profile-info { display:flex; align-items:center; }43 .name-block { display:flex; flex-direction:column; }44 .name {45 font-size:44px; font-weight:700; color:#79c7ff;46 line-height:1.2;47 }48 .subtitle {49 font-size:32px; color:#b7d6ff; opacity:.9;50 }51 .banner-actions { display:flex; gap:26px; align-items:center; }52 .icon-btn {53 width:64px; height:64px; border-radius:18px; background:#143457;54 display:flex; align-items:center; justify-content:center;55 }56 .icon-btn svg { fill:#b7d6ff; }57 58 /* Search */59 .search-row { margin-top:24px; display:flex; align-items:center; gap:24px; }60 .search-input {61 flex:1; height:92px; border-radius:24px;62 background:#0a0d12; border:2px solid #1e2330; color:#9aa6bf;63 display:flex; align-items:center; padding:0 28px; gap:18px; font-size:34px;64 }65 .filter-btn {66 width:92px; height:92px; border-radius:24px; background:#0a0d12; border:2px solid #1e2330;67 display:flex; align-items:center; justify-content:center;68 }69 .search-input svg, .filter-btn svg { fill:#9aa6bf; }70 71 /* Meeting banner */72 .meeting-banner {73 margin:26px 32px 18px; padding:26px;74 border-radius:22px; background:#0a0d12; border:2px solid #1e2330;75 display:flex; align-items:center; justify-content:space-between; color:#d7dfee;76 }77 .meet-left { display:flex; align-items:center; gap:24px; }78 .meet-text { display:flex; flex-direction:column; }79 .meet-title { font-size:38px; font-weight:700; }80 .meet-sub { font-size:30px; color:#9aa6bf; margin-top:6px; }81 .close-x { width:54px; height:54px; border-radius:16px; background:#0d1220; border:1px solid #263041; display:flex; align-items:center; justify-content:center; }82 .close-x svg { stroke:#9aa6bf; }83 84 /* Chat list */85 .list { margin-top:8px; }86 .chat-item {87 padding:22px 32px;88 display:flex; flex-direction:column; gap:16px;89 border-bottom:1px solid #1b2130;90 }91 .row { display:flex; align-items:center; }92 .avatar {93 width:110px; height:110px; border-radius:22px;94 background:#E0E0E0; border:1px solid #BDBDBD;95 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;96 margin-right:26px;97 flex-shrink:0;98 }99 .avatar.circle { border-radius:55px; }100 .content { flex:1; }101 .title-line {102 display:flex; align-items:center; gap:12px; font-size:40px; font-weight:700; color:#eaeef7;103 }104 .check-badge {105 width:34px; height:34px; border-radius:17px; background:#1c6bff;106 display:flex; align-items:center; justify-content:center;107 }108 .check-badge svg { stroke:#fff; }109 .time { color:#9aa6bf; font-size:30px; }110 .preview { margin-top:4px; color:#cfd6e4; font-size:32px; }111 .blue-dot {112 width:50px; height:50px; background:#2186ff; color:#fff;113 border-radius:25px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:28px;114 margin-left:18px;115 }116 .chips { display:flex; gap:18px; margin-left:168px; margin-top:6px; flex-wrap:wrap; }117 .chip {118 padding:20px 26px; border-radius:26px; background:#11223b; border:1px solid #234a7a; color:#b7d6ff; font-size:30px;119 }120 .star {121 width:40px; height:40px; margin-left:8px;122 }123 .unread-dot {124 width:38px; height:38px; background:#f0aa3a; color:#0f1116; border-radius:19px;125 display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin-left:18px;126 }127 .reply { width:34px; height:34px; margin-right:12px; }128 .subtitle-line { color:#9aa6bf; font-size:32px; display:flex; align-items:center; }129 130 /* Floating compose */131 .compose {132 position:absolute; right:40px; bottom:220px;133 width:150px; height:150px; border-radius:75px; background:#2c87ff;134 box-shadow:0 12px 30px rgba(0,0,0,0.5);135 display:flex; align-items:center; justify-content:center;136 }137 .compose svg { fill:#fff; }138 139 /* Bottom nav */140 .bottom-nav {141 position:absolute; bottom:0; left:0; width:100%; height:160px;142 background:#0a0d12; border-top:1px solid #1b2130;143 display:flex; align-items:center; justify-content:space-around;144 }145 .nav-item { display:flex; align-items:center; flex-direction:column; gap:10px; color:#9aa6bf; font-size:28px; position:relative; }146 .nav-item .icon { width:52px; height:52px; }147 .nav-item.active { color:#2c87ff; }148 .badge {149 position:absolute; top:2px; right:-10px;150 width:42px; height:42px; border-radius:21px; background:#ff3b3b; color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;151 }152 .skype-dot {153 position:absolute; top:0; right:0; width:30px; height:30px; background:#ff3b3b; border-radius:15px;154 }155</style>156</head>157<body>158<div id="render-target">159 160 <div class="status-bar">161 <div>11:38</div>162 <div class="status-icons">163 <div class="dot"></div>164 <div class="dot"></div>165 <div class="dot"></div>166 <div class="dot"></div>167 <div class="dot"></div>168 <div class="wifi"></div>169 <div class="battery"></div>170 </div>171 </div>172 173 <div class="profile-banner">174 <div class="profile-row">175 <div style="display:flex; align-items:center;">176 <div class="avatar-lg">[IMG: Profile Photo]</div>177 <div class="name-block">178 <div class="name">Amelia miller</div>179 <div class="subtitle">Share what you're up to</div>180 </div>181 </div>182 <div class="banner-actions">183 <div class="icon-btn">184 <svg width="36" height="28" viewBox="0 0 36 28">185 <rect x="2" y="6" width="20" height="16" rx="3"></rect>186 <polygon points="24,10 34,6 34,22 24,18"></polygon>187 </svg>188 </div>189 <div class="icon-btn">190 <svg width="32" height="32" viewBox="0 0 32 32">191 <path d="M16 4a10 10 0 0 0-10 10v4l-2 2v2h24v-2l-2-2v-4A10 10 0 0 0 16 4z"></path>192 </svg>193 </div>194 </div>195 </div>196 197 <div class="search-row">198 <div class="search-input">199 <svg width="34" height="34" viewBox="0 0 24 24">200 <circle cx="10" cy="10" r="7" stroke="none"></circle>201 <rect x="16" y="16" width="8" height="3" transform="rotate(45 16 16)"></rect>202 </svg>203 <span>Search</span>204 </div>205 <div class="filter-btn">206 <svg width="34" height="34" viewBox="0 0 24 24">207 <path d="M3 5h18l-7 8v6l-4-2v-4z"></path>208 </svg>209 </div>210 </div>211 </div>212 213 <div class="meeting-banner">214 <div class="meet-left">215 <svg width="48" height="42" viewBox="0 0 36 28">216 <rect x="2" y="6" width="20" height="16" rx="3" fill="#b7d6ff"></rect>217 <polygon points="24,10 34,6 34,22 24,18" fill="#b7d6ff"></polygon>218 </svg>219 <div class="meet-text">220 <div class="meet-title">Easy meetings with anyone</div>221 <div class="meet-sub">Tap here to start a video meeting</div>222 </div>223 </div>224 <div class="close-x">225 <svg width="26" height="26" viewBox="0 0 24 24">226 <line x1="5" y1="5" x2="19" y2="19" stroke-width="2"></line>227 <line x1="19" y1="5" x2="5" y2="19" stroke-width="2"></line>228 </svg>229 </div>230 </div>231 232 <div class="list">233 234 <!-- Bing chat -->235 <div class="chat-item">236 <div class="row">237 <div class="avatar">[IMG: Bing Logo]</div>238 <div class="content">239 <div class="title-line">240 <span>Bing</span>241 <div class="check-badge">242 <svg width="20" height="20" viewBox="0 0 24 24">243 <polyline points="5,13 10,17 19,7" fill="none" stroke-width="3"></polyline>244 </svg>245 </div>246 </div>247 <div class="preview">Hey, this is Bing! How can I help you ...</div>248 </div>249 <div class="time">9:50 AM</div>250 <div class="blue-dot">1</div>251 </div>252 <div class="chips">253 <div class="chip">Create a magic spell</div>254 <div class="chip">Imagine a new sea creature</div>255 </div>256 </div>257 258 <!-- Self chat -->259 <div class="chat-item">260 <div class="row">261 <div class="avatar circle">[IMG: Plant Photo]</div>262 <div class="content">263 <div class="title-line">264 <span>Amelia miller (You)</span>265 <div class="check-badge">266 <svg width="20" height="20" viewBox="0 0 24 24">267 <polyline points="5,13 10,17 19,7" fill="none" stroke-width="3"></polyline>268 </svg>269 </div>270 </div>271 </div>272 <svg class="star" viewBox="0 0 24 24">273 <path fill="#9aa6bf" d="M12 2l3 6 6 .9-4.5 4 1.3 6.1L12 16l-5.8 3 1.3-6.1L3 8.9 9 8z"></path>274 </svg>275 </div>276 </div>277 278 <!-- Natalie row -->279 <div class="chat-item">280 <div class="row">281 <div class="avatar circle">[IMG: Botanical Art]</div>282 <div class="content">283 <div class="title-line">284 <span>Natalie Larson</span>285 </div>286 <div class="subtitle-line">Dawson Creek, Dawson Creek Briti...</div>287 </div>288 <div class="time">11:34 AM</div>289 <div class="unread-dot">L</div>290 </div>291 </div>292 293 <!-- Richard row -->294 <div class="chat-item">295 <div class="row">296 <div class="avatar circle">RW</div>297 <div class="content">298 <div class="title-line">299 <span>Richard Wagner</span>300 </div>301 <div class="subtitle-line">302 <svg class="reply" viewBox="0 0 24 24">303 <path fill="#9aa6bf" d="M10 8V5l-7 7 7 7v-3h6v-8z"></path>304 </svg>305 quoted message306 </div>307 </div>308 <div class="time">9:57 AM</div>309 </div>310 </div>311 312 </div>313 314 <!-- Floating compose -->315 <div class="compose">316 <svg width="54" height="54" viewBox="0 0 24 24">317 <path d="M3 17v4h4l11-11-4-4L3 17zm13.5-13.5l4 4" fill="#fff"></path>318 </svg>319 </div>320 321 <!-- Bottom navigation -->322 <div class="bottom-nav">323 <div class="nav-item active">324 <svg class="icon" viewBox="0 0 24 24">325 <path fill="#2c87ff" d="M3 5h18v14H3z"></path>326 <circle cx="8" cy="9" r="2" fill="#0f1116"></circle>327 <circle cx="16" cy="9" r="2" fill="#0f1116"></circle>328 </svg>329 <div>Chats</div>330 <div class="badge">1</div>331 </div>332 <div class="nav-item">333 <svg class="icon" viewBox="0 0 24 24">334 <path fill="#9aa6bf" d="M6 4h12v16H6z"></path>335 <rect x="9" y="7" width="6" height="10" fill="#0f1116"></rect>336 </svg>337 <div>Calls</div>338 </div>339 <div class="nav-item">340 <svg class="icon" viewBox="0 0 24 24">341 <circle cx="12" cy="12" r="9" fill="#9aa6bf"></circle>342 <rect x="10" y="6" width="4" height="12" fill="#0f1116"></rect>343 </svg>344 <div>Phone</div>345 </div>346 <div class="nav-item">347 <svg class="icon" viewBox="0 0 24 24">348 <rect x="4" y="4" width="16" height="16" fill="#9aa6bf" rx="3"></rect>349 <circle cx="12" cy="11" r="5" fill="#0f1116"></circle>350 </svg>351 <div>Contacts</div>352 </div>353 <div class="nav-item">354 <svg class="icon" viewBox="0 0 24 24">355 <path fill="#9aa6bf" d="M12 2a10 10 0 1 0 0 20c5.5 0 7.5-4 5-6-1.2-1.1-3.6-.7-4.8-1.6-1.2-.9-.2-2.7 1.5-3.6 1.5-.8 2.3-2.2 1.6-3.6C14.4 4.1 13 2 12 2z"></path>356 </svg>357 <div>Today</div>358 <div class="skype-dot"></div>359 </div>360 </div>361 362</div>363</body>364</html>