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>Compose Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #F7F7F2;13 font-family: Arial, Helvetica, sans-serif;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; right: 0;20 height: 88px;21 display: flex; align-items: center; justify-content: space-between;22 padding: 0 36px;23 font-size: 34px; color: #454545;24 }25 .status-left { display: flex; align-items: center; gap: 22px; }26 .status-right { display: flex; align-items: center; gap: 26px; }27 .icon-small svg { width: 40px; height: 40px; }28 29 /* App bar */30 .app-bar {31 position: absolute; top: 88px; left: 0; right: 0;32 height: 140px;33 display: flex; align-items: center;34 padding: 0 24px;35 border-bottom: 1px solid #E7E7DF;36 background: #F8F8F2;37 }38 .app-left { display: flex; align-items: center; gap: 18px; }39 .app-title {40 font-size: 56px; font-weight: 600; letter-spacing: 0.5px;41 }42 .app-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }43 .icon-tap svg { width: 54px; height: 54px; }44 45 /* Compose fields */46 .content {47 position: absolute; top: 228px; left: 0; right: 0; bottom: 900px;48 padding: 20px 36px;49 }50 .field {51 padding: 22px 0;52 border-bottom: 1px solid #E7E7DF;53 display: flex; align-items: center;54 }55 .label {56 width: 120px; color: #6F6F6F; font-size: 32px;57 }58 .value {59 font-size: 40px; color: #222;60 }61 .value.bold { font-weight: 600; }62 .field .right {63 margin-left: auto; display: flex; align-items: center;64 }65 .dropdown-icon svg { width: 40px; height: 40px; }66 67 /* Suggestion row */68 .suggestion {69 padding-top: 20px;70 }71 .suggest-item {72 display: flex; align-items: center; gap: 24px;73 padding: 18px 0;74 }75 .avatar {76 width: 92px; height: 92px; border-radius: 50%;77 background: #E0E0E0; border: 1px solid #BDBDBD;78 display: flex; align-items: center; justify-content: center;79 font-size: 18px; color: #757575; text-align: center;80 }81 .suggest-text { display: flex; flex-direction: column; }82 .suggest-text .name { font-size: 42px; font-weight: 700; color: #222; }83 .suggest-text .email { font-size: 30px; color: #777; margin-top: 4px; }84 85 /* Keyboard toolbar */86 .kbd-toolbar {87 position: absolute; left: 0; right: 0; bottom: 900px;88 height: 86px; padding: 0 26px;89 background: #EEF0E6; border-top: 1px solid #E0E2D6;90 display: flex; align-items: center; gap: 28px;91 }92 .kbd-toolbar .tool-icon svg { width: 40px; height: 40px; }93 94 /* Keyboard keys area */95 .keyboard {96 position: absolute; left: 0; right: 0; bottom: 112px;97 height: 788px;98 background: #EEF0E6;99 padding: 18px 24px 24px;100 }101 .key-row {102 display: flex; justify-content: space-between;103 margin-bottom: 18px;104 }105 .key {106 width: 88px; height: 120px;107 background: #FFFFFF; border: 1px solid #E2E2DA;108 border-radius: 26px;109 display: flex; align-items: center; justify-content: center;110 font-size: 40px; color: #2B2B2B;111 box-shadow: 0 1px 0 #E6E6DE inset;112 }113 .key.wide { width: 140px; }114 .key.space { flex: 1; margin: 0 12px; }115 .key.special {116 background: #D7E7D0; color: #2A2A2A; border-color: #C8D9C3;117 }118 .key-icon svg { width: 48px; height: 48px; }119 120 /* Gesture pill */121 .gesture {122 position: absolute; bottom: 42px; left: 50%;123 transform: translateX(-50%);124 width: 320px; height: 12px;125 background: #BFBFBF; border-radius: 6px;126 }127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Status Bar -->133 <div class="status-bar">134 <div class="status-left">135 <div>4:00</div>136 <div>32°</div>137 <div class="icon-small">138 <svg viewBox="0 0 24 24">139 <circle cx="12" cy="12" r="9" fill="none" stroke="#666" stroke-width="2"></circle>140 <path d="M12 4v8l5 5" fill="none" stroke="#666" stroke-width="2"></path>141 </svg>142 </div>143 <div class="icon-small">144 <svg viewBox="0 0 24 24">145 <path d="M3 7h18M6 12h12M9 17h6" stroke="#666" stroke-width="2" fill="none"></path>146 </svg>147 </div>148 <div class="icon-small">149 <svg viewBox="0 0 24 24">150 <path d="M4 6h16M4 12h16M4 18h16" stroke="#666" stroke-width="2" fill="none"></path>151 </svg>152 </div>153 </div>154 <div class="status-right">155 <div class="icon-small">156 <svg viewBox="0 0 24 24">157 <path d="M2 16c5-8 15-8 20 0" fill="none" stroke="#666" stroke-width="2"></path>158 <path d="M6 16c3-5 9-5 12 0" fill="none" stroke="#666" stroke-width="2"></path>159 <circle cx="12" cy="16" r="1.5" fill="#666"></circle>160 </svg>161 </div>162 <div class="icon-small">163 <svg viewBox="0 0 24 24">164 <rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"></rect>165 <rect x="20" y="9" width="2" height="8" fill="#666"></rect>166 </svg>167 </div>168 </div>169 </div>170 171 <!-- App Bar -->172 <div class="app-bar">173 <div class="app-left icon-tap">174 <svg viewBox="0 0 24 24">175 <path d="M15 5L8 12l7 7" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>176 </svg>177 </div>178 <div class="app-title">Compose</div>179 <div class="app-right">180 <div class="icon-tap">181 <svg viewBox="0 0 24 24">182 <path d="M7 7c0-3 4-4 6-2s2 5-1 7l-6 6c-2 2-5 0-3-3l7-7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"></path>183 </svg>184 </div>185 <div class="icon-tap">186 <svg viewBox="0 0 24 24">187 <path d="M3 12l18-8-8 18-2-7-8-3z" fill="#2E7D32"></path>188 </svg>189 </div>190 <div class="icon-tap">191 <svg viewBox="0 0 24 24">192 <circle cx="12" cy="5" r="2" fill="#333"></circle>193 <circle cx="12" cy="12" r="2" fill="#333"></circle>194 <circle cx="12" cy="19" r="2" fill="#333"></circle>195 </svg>196 </div>197 </div>198 </div>199 200 <!-- Content -->201 <div class="content">202 <div class="field">203 <div class="label">From</div>204 <div class="value">dbwscratch.test.id2@gmail.com</div>205 </div>206 207 <div class="field">208 <div class="label">To</div>209 <div class="value bold">dbwscratch.test.id3@gmail.com</div>210 <div class="right dropdown-icon">211 <svg viewBox="0 0 24 24">212 <path d="M6 9l6 6 6-6" fill="none" stroke="#666" stroke-width="2"></path>213 </svg>214 </div>215 </div>216 217 <div class="suggestion">218 <div class="suggest-item">219 <div class="avatar">[IMG: User Avatar]</div>220 <div class="suggest-text">221 <div class="name">dbwscratch.test.id3@gmail.com</div>222 <div class="email">dbwscratch.test.id3@gmail.com</div>223 </div>224 </div>225 </div>226 </div>227 228 <!-- Keyboard toolbar -->229 <div class="kbd-toolbar">230 <div class="tool-icon">231 <svg viewBox="0 0 24 24">232 <rect x="3" y="3" width="7" height="7" fill="#333"></rect>233 <rect x="14" y="3" width="7" height="7" fill="#333"></rect>234 <rect x="3" y="14" width="7" height="7" fill="#333"></rect>235 <rect x="14" y="14" width="7" height="7" fill="#333"></rect>236 </svg>237 </div>238 <div class="tool-icon">239 <svg viewBox="0 0 24 24">240 <circle cx="12" cy="8" r="4" fill="#333"></circle>241 <path d="M4 21c2-5 14-5 16 0" fill="#333"></path>242 </svg>243 </div>244 <div style="font-size:34px; color:#333;">GIF</div>245 <div class="tool-icon">246 <svg viewBox="0 0 24 24">247 <circle cx="12" cy="12" r="9" fill="none" stroke="#333" stroke-width="2"></circle>248 <path d="M12 8v8M8 12h8" stroke="#333" stroke-width="2"></path>249 </svg>250 </div>251 <div class="tool-icon">252 <svg viewBox="0 0 24 24">253 <path d="M3 21l8-18 8 18" fill="none" stroke="#333" stroke-width="2"></path>254 <path d="M9 14h6" stroke="#333" stroke-width="2"></path>255 </svg>256 </div>257 <div class="tool-icon">258 <svg viewBox="0 0 24 24">259 <circle cx="12" cy="12" r="10" fill="none" stroke="#333" stroke-width="2"></circle>260 <path d="M7 12h10" stroke="#333" stroke-width="2"></path>261 </svg>262 </div>263 <div class="tool-icon">264 <svg viewBox="0 0 24 24">265 <path d="M5 5l14 14M5 19l14-14" stroke="#333" stroke-width="2"></path>266 </svg>267 </div>268 </div>269 270 <!-- Keyboard -->271 <div class="keyboard">272 <!-- Row 1 -->273 <div class="key-row">274 <div class="key">q</div>275 <div class="key">w</div>276 <div class="key">e</div>277 <div class="key">r</div>278 <div class="key">t</div>279 <div class="key">y</div>280 <div class="key">u</div>281 <div class="key">i</div>282 <div class="key">o</div>283 <div class="key">p</div>284 </div>285 <!-- Row 2 -->286 <div class="key-row" style="padding: 0 44px;">287 <div class="key">a</div>288 <div class="key">s</div>289 <div class="key">d</div>290 <div class="key">f</div>291 <div class="key">g</div>292 <div class="key">h</div>293 <div class="key">j</div>294 <div class="key">k</div>295 <div class="key">l</div>296 </div>297 <!-- Row 3 -->298 <div class="key-row">299 <div class="key special wide">300 <svg class="key-icon" viewBox="0 0 24 24">301 <path d="M14 19L7 12l7-7" fill="none" stroke="#2A2A2A" stroke-width="3" stroke-linecap="round"></path>302 </svg>303 </div>304 <div class="key">z</div>305 <div class="key">x</div>306 <div class="key">c</div>307 <div class="key">v</div>308 <div class="key">b</div>309 <div class="key">n</div>310 <div class="key">m</div>311 <div class="key special wide">312 <svg class="key-icon" viewBox="0 0 24 24">313 <path d="M4 12h14M12 5l7 7-7 7" fill="none" stroke="#2A2A2A" stroke-width="2.6"></path>314 </svg>315 </div>316 </div>317 <!-- Row 4 -->318 <div class="key-row">319 <div class="key special wide">?123</div>320 <div class="key special wide">@</div>321 <div class="key special wide">322 <svg class="key-icon" viewBox="0 0 24 24">323 <circle cx="12" cy="12" r="3" fill="#2A2A2A"></circle>324 </svg>325 </div>326 <div class="key space"></div>327 <div class="key">.</div>328 <div class="key special wide">329 <svg class="key-icon" viewBox="0 0 24 24">330 <path d="M4 12h14M12 5l7 7-7 7" fill="none" stroke="#2A2A2A" stroke-width="2.6"></path>331 </svg>332 </div>333 </div>334 </div>335 336 <!-- Gesture pill -->337 <div class="gesture"></div>338 339</div>340</body>341</html>