GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Chat UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0d0d0f;13 color: #fff;14 font-family: "Segoe UI", Roboto, Arial, sans-serif;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 100px;24 background: #111214;25 display: flex;26 align-items: center;27 padding: 0 32px;28 box-sizing: border-box;29 color: #e9e9e9;30 font-size: 36px;31 letter-spacing: 0.5px;32 }33 .status-left { flex: 0 0 auto; }34 .status-center {35 flex: 1 1 auto;36 display: flex;37 justify-content: center;38 gap: 18px;39 font-size: 38px;40 opacity: 0.9;41 }42 .status-right {43 flex: 0 0 auto;44 display: flex;45 align-items: center;46 gap: 22px;47 }48 .status-icon { width: 44px; height: 44px; }49 50 /* Main split area */51 .main {52 position: absolute;53 top: 100px;54 left: 0;55 width: 1080px;56 height: 2100px;57 display: flex;58 }59 .left-pane {60 width: 330px;61 background: #141416;62 position: relative;63 box-shadow: inset -1px 0 0 #222;64 }65 .right-pane {66 width: 750px;67 background: #0a0a0a;68 position: relative;69 border-left: 1px solid #232323;70 }71 72 /* Left pane decorative items */73 .dots {74 position: absolute;75 top: 540px;76 left: 20px;77 display: grid;78 gap: 40px;79 }80 .dot {81 width: 22px;82 height: 22px;83 border-radius: 50%;84 background: #bcbcbc;85 opacity: 0.6;86 }87 .left-text {88 position: absolute;89 bottom: 740px;90 left: 24px;91 color: #eaeaea;92 font-weight: 600;93 font-size: 40px;94 letter-spacing: 0.5px;95 }96 97 /* Right header */98 .chat-header {99 position: absolute;100 top: 0;101 left: 0;102 width: 750px;103 height: 170px;104 border-bottom: 1px solid #242424;105 display: flex;106 align-items: center;107 padding: 0 28px;108 box-sizing: border-box;109 gap: 26px;110 background: #0a0a0a;111 }112 .back-btn {113 width: 64px;114 height: 64px;115 display: flex;116 align-items: center;117 justify-content: center;118 }119 .avatar {120 width: 96px;121 height: 96px;122 border-radius: 50%;123 background: #d9c5ff;124 color: #3b2a5f;125 font-weight: 800;126 display: flex;127 align-items: center;128 justify-content: center;129 font-size: 42px;130 }131 .title-block {132 display: flex;133 flex-direction: column;134 gap: 10px;135 }136 .title {137 font-size: 48px;138 font-weight: 700;139 color: #ffffff;140 }141 .subtitle {142 font-size: 32px;143 color: #b7b7b7;144 }145 146 /* Chat area */147 .chat-body {148 position: absolute;149 top: 170px;150 left: 0;151 right: 0;152 bottom: 200px;153 background: #0a0a0a;154 }155 156 /* Input area */157 .chat-input {158 position: absolute;159 bottom: 260px;160 left: 24px;161 width: 702px;162 display: flex;163 align-items: center;164 gap: 24px;165 }166 .plus-btn {167 width: 110px;168 height: 110px;169 border-radius: 55px;170 background: #2e81ff;171 display: flex;172 align-items: center;173 justify-content: center;174 box-shadow: 0 8px 20px rgba(46,129,255,0.35);175 }176 .plus-btn svg { width: 60px; height: 60px; }177 .input-box {178 flex: 1 1 auto;179 height: 110px;180 border-radius: 55px;181 background: #1b1b1d;182 border: 1px solid #2a2a2d;183 color: #cfcfcf;184 display: flex;185 align-items: center;186 padding: 0 32px;187 box-sizing: border-box;188 font-size: 40px;189 }190 .placeholder { color: #9da0a6; }191 192 /* Gesture bar */193 .home-bar {194 position: absolute;195 bottom: 32px;196 left: 50%;197 transform: translateX(-50%);198 width: 520px;199 height: 10px;200 background: #e7e7e7;201 border-radius: 6px;202 opacity: 0.85;203 }204</style>205</head>206<body>207<div id="render-target">208 209 <!-- Status Bar -->210 <div class="status-bar">211 <div class="status-left">11:43</div>212 <div class="status-center">213 <span>👻</span><span>👻</span><span>👻</span><span>👻</span><span>👻</span>214 <span style="color:#9ea0a5;">•</span>215 </div>216 <div class="status-right">217 <!-- Wi-Fi icon -->218 <svg class="status-icon" viewBox="0 0 48 48">219 <path d="M6 16c9-7 27-7 36 0" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round"/>220 <path d="M12 24c6-5 18-5 24 0" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round"/>221 <path d="M20 31c4-3 8-3 12 0" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round"/>222 <circle cx="26" cy="36" r="3" fill="#ffffff"/>223 </svg>224 <!-- Battery icon -->225 <svg class="status-icon" viewBox="0 0 56 48">226 <rect x="4" y="10" width="40" height="24" rx="4" ry="4" stroke="#ffffff" stroke-width="4" fill="none"/>227 <rect x="8" y="14" width="30" height="16" fill="#ffffff"/>228 <rect x="46" y="16" width="6" height="12" rx="2" fill="#ffffff"/>229 </svg>230 </div>231 </div>232 233 <!-- Main Content -->234 <div class="main">235 236 <!-- Left Pane -->237 <div class="left-pane">238 <div class="dots">239 <div class="dot"></div>240 <div class="dot"></div>241 <div class="dot"></div>242 <div class="dot"></div>243 </div>244 <div class="left-text">conversation...</div>245 </div>246 247 <!-- Right Pane -->248 <div class="right-pane">249 250 <!-- Header -->251 <div class="chat-header">252 <div class="back-btn">253 <svg viewBox="0 0 48 48">254 <path d="M28 10 L14 24 L28 38" stroke="#ffffff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>255 </svg>256 </div>257 <div class="avatar">FR</div>258 <div class="title-block">259 <div class="title">Friends</div>260 <div class="subtitle">1 participant</div>261 </div>262 </div>263 264 <!-- Chat Body -->265 <div class="chat-body"></div>266 267 <!-- Input area -->268 <div class="chat-input">269 <div class="plus-btn">270 <svg viewBox="0 0 64 64">271 <path d="M32 14v36M14 32h36" stroke="#ffffff" stroke-width="8" stroke-linecap="round"/>272 </svg>273 </div>274 <div class="input-box"><span class="placeholder">Type a message</span></div>275 </div>276 277 </div>278 </div>279 280 <!-- Gesture home bar -->281 <div class="home-bar"></div>282 283</div>284</body>285</html>