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 - Mock UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2160px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #EDEDED;16 }17 18 /* Status bar */19 .status-bar {20 height: 96px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #EDEDED;26 font-size: 38px;27 letter-spacing: 0.5px;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 22px;33 color: #EDEDED;34 }35 .status-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; }36 37 /* App bar */38 .app-bar {39 height: 144px;40 display: flex;41 align-items: center;42 padding: 0 24px;43 border-bottom: 1px solid #2A2A2A;44 }45 .app-bar .title {46 font-size: 48px;47 font-weight: 600;48 margin-left: 18px;49 }50 .app-actions {51 margin-left: auto;52 display: flex;53 align-items: center;54 gap: 28px;55 }56 .icon-btn {57 width: 60px;58 height: 60px;59 display: inline-flex;60 align-items: center;61 justify-content: center;62 color: #EDEDED;63 }64 .divider {65 height: 1px;66 background: #2A2A2A;67 width: 100%;68 }69 70 /* Fields */71 .content {72 padding-bottom: 0;73 }74 .field {75 padding: 24px 28px;76 border-bottom: 1px solid #2A2A2A;77 }78 .field-row {79 display: flex;80 align-items: center;81 gap: 18px;82 font-size: 38px;83 }84 .label {85 min-width: 110px;86 color: #B8B8B8;87 font-size: 34px;88 }89 .address {90 font-size: 38px;91 color: #EDEDED;92 }93 .to-input {94 display: flex;95 align-items: center;96 gap: 16px;97 flex: 1;98 }99 .caret {100 width: 4px;101 height: 48px;102 background: #FFB74D;103 border-radius: 2px;104 }105 .dropdown {106 margin-left: auto;107 opacity: 0.9;108 }109 .placeholder {110 color: #8F8F8F;111 }112 113 /* Message body */114 .message-body {115 padding: 28px;116 font-size: 40px;117 line-height: 1.5;118 color: #FFFFFF;119 }120 121 /* Keyboard mock */122 .keyboard {123 position: absolute;124 left: 0;125 right: 0;126 bottom: 0;127 background: #1A1A1A;128 border-top: 1px solid #2A2A2A;129 padding: 18px 16px 28px;130 }131 .kb-toolbar {132 display: flex;133 align-items: center;134 gap: 22px;135 margin-bottom: 16px;136 }137 .kb-pill {138 width: 72px;139 height: 72px;140 border-radius: 36px;141 background: #2A2A2A;142 display: flex;143 align-items: center;144 justify-content: center;145 color: #DCDCDC;146 font-size: 28px;147 }148 .kb-pill.wide {149 padding: 0 16px;150 width: auto;151 border-radius: 36px;152 }153 154 .keys-row {155 display: grid;156 grid-template-columns: repeat(10, 1fr);157 gap: 12px;158 margin: 12px 6px;159 }160 .key {161 height: 120px;162 background: #2A2A2A;163 border-radius: 18px;164 display: flex;165 align-items: center;166 justify-content: center;167 color: #F0F0F0;168 font-size: 44px;169 }170 .row-2 { grid-template-columns: repeat(9, 1fr); padding: 0 44px; }171 .row-3 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.6fr; padding: 0 6px; }172 .space-row {173 display: grid;174 grid-template-columns: 1.3fr 1fr 1fr 5fr 1fr 1.6fr;175 gap: 12px;176 margin: 12px 6px 0;177 align-items: center;178 }179 .key.space { height: 120px; font-size: 36px; color: #CFCFCF; }180 .send-btn {181 width: 120px;182 height: 120px;183 background: #80AFFF;184 color: #0B1736;185 border-radius: 60px;186 display: flex;187 align-items: center;188 justify-content: center;189 margin-left: auto;190 }191 192 /* Gesture pill */193 .gesture-pill {194 position: absolute;195 bottom: 10px;196 left: 50%;197 transform: translateX(-50%);198 width: 180px;199 height: 12px;200 background: #9E9E9E33;201 border-radius: 8px;202 }203</style>204</head>205<body>206<div id="render-target">207 <!-- Status bar -->208 <div class="status-bar">209 <div>12:53</div>210 <div class="status-right">211 <div class="status-icon">212 <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEDED" xmlns="http://www.w3.org/2000/svg">213 <path d="M2 18h20L12 6 2 18z"/>214 </svg>215 </div>216 <div class="status-icon">217 <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEDED" xmlns="http://www.w3.org/2000/svg">218 <path d="M2 21h20V7H2v14zm2-2V9h16v10H4zM7 4h10v2H7V4z"/>219 </svg>220 </div>221 <div style="font-size:34px;">100%</div>222 </div>223 </div>224 225 <!-- App Bar -->226 <div class="app-bar">227 <div class="icon-btn">228 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">229 <path d="M15 18l-6-6 6-6"/>230 </svg>231 </div>232 <div class="title">Compose</div>233 <div class="app-actions">234 <div class="icon-btn" title="Attach">235 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">236 <path d="M21 8v7a5 5 0 0 1-10 0V7a3 3 0 0 1 6 0v7a1 1 0 0 1-2 0V8"/>237 </svg>238 </div>239 <div class="icon-btn" title="Send">240 <svg width="52" height="52" viewBox="0 0 24 24" fill="#EDEDED" xmlns="http://www.w3.org/2000/svg">241 <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>242 </svg>243 </div>244 <div class="icon-btn" title="More">245 <svg width="44" height="44" viewBox="0 0 24 24" fill="#EDEDED" xmlns="http://www.w3.org/2000/svg">246 <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>247 </svg>248 </div>249 </div>250 </div>251 252 <!-- Fields -->253 <div class="content">254 <div class="field">255 <div class="field-row">256 <div class="label">From</div>257 <div class="address">dbwscratch.test.id10@gmail.com</div>258 </div>259 </div>260 261 <div class="field">262 <div class="field-row">263 <div class="label">To</div>264 <div class="to-input">265 <div class="caret"></div>266 </div>267 <div class="dropdown">268 <svg width="44" height="44" viewBox="0 0 24 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">269 <path d="M7 10l5 5 5-5H7z"/>270 </svg>271 </div>272 </div>273 </div>274 275 <div class="field">276 <div class="placeholder" style="font-size:38px;">Subject</div>277 </div>278 279 <div class="message-body">280 <div>birthday party</div>281 <div>Monday, Jun 19 • 1:00 – 2:00 PM</div>282 <div>Google Meet joining info</div>283 <div>Video call link: https://meet.google.com/bub-pmwn-dct</div>284 </div>285 </div>286 287 <!-- Keyboard -->288 <div class="keyboard">289 <div class="kb-toolbar">290 <div class="kb-pill">291 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#DCDCDC" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">292 <path d="M15 18l-6-6 6-6"/>293 </svg>294 </div>295 <div class="kb-pill">296 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#DCDCDC" stroke-width="2">297 <circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 3"/>298 </svg>299 </div>300 <div class="kb-pill">Gx</div>301 <div class="kb-pill">302 <svg width="30" height="30" viewBox="0 0 24 24" fill="#DCDCDC">303 <path d="M12 2l3 7h7l-5.6 4 2.2 7-6.6-4.6L5.6 20 7.8 13 2 9h7z"/>304 </svg>305 </div>306 <div class="kb-pill">307 <svg width="28" height="28" viewBox="0 0 24 24" fill="#DCDCDC">308 <path d="M16 2H8a2 2 0 0 0-2 2v16l6-3 6 3V4a2 2 0 0 0-2-2z"/>309 </svg>310 </div>311 <div class="kb-pill">•••</div>312 <div class="kb-pill">313 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#DCDCDC" stroke-width="2">314 <path d="M12 5v14"/><path d="M18 9v6"/><path d="M6 9v6"/>315 </svg>316 </div>317 </div>318 319 <div class="keys-row">320 <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><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>321 </div>322 <div class="keys-row row-2">323 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>324 </div>325 <div class="keys-row row-3">326 <div class="key">327 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#F0F0F0" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">328 <path d="M7 20l5-16 5 16M5 16h14"/>329 </svg>330 </div>331 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>332 <div class="key">333 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#F0F0F0" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">334 <path d="M20 12H8"/><path d="M14 6l6 6-6 6"/>335 </svg>336 </div>337 </div>338 339 <div class="space-row">340 <div class="key">?123</div>341 <div class="key">@</div>342 <div class="key">🌐</div>343 <div class="key space">HG • EN</div>344 <div class="key">.</div>345 <div class="send-btn">346 <svg width="48" height="48" viewBox="0 0 24 24" fill="#0B1736" xmlns="http://www.w3.org/2000/svg">347 <path fill="#0B1736" d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>348 </svg>349 </div>350 </div>351 </div>352 353 <div class="gesture-pill"></div>354</div>355</body>356</html>