GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Compose - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #121212; color: #EDEDED;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 88px; padding: 0 32px;18 display: flex; align-items: center; justify-content: space-between;19 color: #EDEDED; font-weight: 600; font-size: 34px;20 }21 .status-right { display: flex; align-items: center; gap: 28px; }22 .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #EDEDED; stroke-width: 3; }23 24 /* App bar */25 .app-bar {26 position: absolute; top: 88px; left: 0; right: 0;27 height: 140px; padding: 0 24px;28 display: flex; align-items: center; gap: 24px;29 border-bottom: 1px solid #232323;30 }31 .app-title { font-size: 44px; font-weight: 600; flex: 1; }32 .app-ic { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 18px; }33 .app-ic svg { width: 52px; height: 52px; }34 .accent { color: #CDB7FF; }35 .app-ic svg path, .app-ic svg circle { stroke: currentColor; fill: none; stroke-width: 4; }36 37 /* Fields */38 .content { position: absolute; top: 228px; left: 0; right: 0; padding: 24px 36px; }39 .field { padding: 22px 0; border-bottom: 1px solid #232323; }40 .label { color: #B7B7B7; font-size: 36px; margin-bottom: 14px; }41 .value { font-size: 40px; color: #EDEDED; }42 .to-row { display: flex; align-items: center; gap: 18px; }43 .chip {44 display: inline-flex; align-items: center; gap: 16px;45 background: #1E1E1E; border: 1px solid #343434;46 padding: 12px 18px; border-radius: 32px;47 font-size: 34px; color: #EDEDED;48 }49 .avatar {50 width: 56px; height: 56px; border-radius: 50%;51 background: #78909C; display: flex; align-items: center; justify-content: center;52 color: #121212; font-weight: 700;53 }54 .caret { margin-left: auto; }55 .caret svg { width: 40px; height: 40px; fill: none; stroke: #B7B7B7; stroke-width: 4; }56 57 /* Message body */58 .body-block { padding-top: 28px; }59 .msg-line { font-size: 42px; margin: 18px 0; }60 .link-box {61 margin-top: 12px; padding: 24px;62 background: #1A1A1A; border: 1px solid #2E2E2E; border-radius: 16px;63 color: #CFCFCF; font-size: 36px; line-height: 1.4;64 }65 66 /* Keyboard toolbar above keys */67 .kb-toolbar {68 position: absolute; left: 0; right: 0;69 bottom: 950px; height: 100px;70 display: flex; align-items: center; gap: 24px;71 padding: 0 24px; color: #DADADA;72 }73 .tool-btn {74 width: 72px; height: 72px; border-radius: 18px;75 background: #1F1F1F; border: 1px solid #333; display: flex; align-items: center; justify-content: center;76 }77 .tool-btn svg { width: 40px; height: 40px; stroke: #DADADA; stroke-width: 3; fill: none; }78 79 /* Keyboard */80 .keyboard {81 position: absolute; left: 0; right: 0; bottom: 120px;82 height: 830px; padding: 22px 20px;83 background: #141414; border-top: 1px solid #222;84 }85 .key-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; margin-bottom: 22px; }86 .key {87 background: #2B2B2B; border: 1px solid #3A3A3A;88 height: 110px; border-radius: 22px;89 display: flex; align-items: center; justify-content: center;90 color: #EDEDED; font-size: 44px; font-weight: 500;91 }92 .key.small { font-size: 36px; }93 .key.wide { grid-column: span 3; }94 .key.space { grid-column: span 4; }95 .key.accent { background: #E2D6FF; color: #2B2B2B; border-color: #E2D6FF; }96 .key.icon svg { width: 44px; height: 44px; stroke: #EDEDED; stroke-width: 4; fill: none; }97 .key.icon.accent svg { stroke: #2B2B2B; }98 99 /* Gesture bar */100 .gesture {101 position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);102 width: 320px; height: 10px; border-radius: 20px; background: #D7D7D7;103 opacity: 0.7;104 }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status bar -->111 <div class="status-bar">112 <div>8:31</div>113 <div class="status-right">114 <div class="status-icon">115 <svg viewBox="0 0 24 24">116 <path d="M2 18l10-10 10 10" />117 <path d="M7 18l5-5 5 5" />118 </svg>119 </div>120 <div class="status-icon">121 <svg viewBox="0 0 24 24">122 <rect x="2" y="7" width="20" height="10" rx="2" />123 <rect x="20" y="9" width="2" height="6" />124 </svg>125 </div>126 <div class="status-icon">127 <svg viewBox="0 0 24 24">128 <rect x="3" y="6" width="18" height="12" rx="2" />129 <rect x="5" y="8" width="10" height="8" rx="1" />130 </svg>131 </div>132 </div>133 </div>134 135 <!-- App bar -->136 <div class="app-bar">137 <div class="app-ic accent">138 <svg viewBox="0 0 24 24">139 <path d="M15 6l-6 6 6 6" />140 </svg>141 </div>142 <div class="app-title">Compose</div>143 <div class="app-ic">144 <svg viewBox="0 0 24 24">145 <path d="M7 7c2.5-2.5 7-2.5 9.5 0 2.5 2.5 2.5 6.5 0 9l-4.5 4.5c-2 2-5.5.5-5.5-2v-7c0-2.2 2.7-3.4 4.3-1.8l4.2 4.2" />146 </svg>147 </div>148 <div class="app-ic accent">149 <svg viewBox="0 0 24 24">150 <path d="M3 20l18-8-18-8v6l10 2-10 2z" />151 </svg>152 </div>153 <div class="app-ic">154 <svg viewBox="0 0 24 24">155 <circle cx="12" cy="4" r="2" />156 <circle cx="12" cy="12" r="2" />157 <circle cx="12" cy="20" r="2" />158 </svg>159 </div>160 </div>161 162 <!-- Content -->163 <div class="content">164 <div class="field">165 <div class="label">From</div>166 <div class="value">dbwscratch.test.id4@gmail.com</div>167 </div>168 169 <div class="field">170 <div class="label">To</div>171 <div class="to-row">172 <div class="chip">173 <div class="avatar">V</div>174 vadubey@google.com175 </div>176 <div class="caret">177 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>178 </div>179 </div>180 </div>181 182 <div class="body-block">183 <div class="msg-line">Look at this on eBay</div>184 <div class="link-box">185 https://www.ebay.com/itm/iPhone-14-Pro-Max-Unlocked-128GB-Black-Excellent-/275550774521?mkcid=16&mkevt=1&_trksid=p4429486.m46890.l6249&mkrid=711-127632-2357-0186 </div>187 </div>188 </div>189 190 <!-- Keyboard toolbar -->191 <div class="kb-toolbar">192 <div class="tool-btn">193 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>194 </div>195 <div class="tool-btn">196 <svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16"/></svg>197 </div>198 <div class="tool-btn">199 <svg viewBox="0 0 24 24"><path d="M4 20l16-8-16-8v6l10 2-10 2z"/></svg>200 </div>201 <div class="tool-btn">202 <svg viewBox="0 0 24 24"><rect x="5" y="6" width="14" height="12" rx="2"/><path d="M8 9h8M8 13h6"/></svg>203 </div>204 <div class="tool-btn">205 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>206 </div>207 </div>208 209 <!-- Keyboard -->210 <div class="keyboard">211 <!-- Row 1 -->212 <div class="key-row">213 <div class="key">q</div>214 <div class="key">w</div>215 <div class="key">e</div>216 <div class="key">r</div>217 <div class="key">t</div>218 <div class="key">y</div>219 <div class="key">u</div>220 <div class="key">i</div>221 <div class="key">o</div>222 <div class="key">p</div>223 </div>224 <!-- Row 2 -->225 <div class="key-row">226 <div class="key">a</div>227 <div class="key">s</div>228 <div class="key">d</div>229 <div class="key">f</div>230 <div class="key">g</div>231 <div class="key">h</div>232 <div class="key">j</div>233 <div class="key">k</div>234 <div class="key">l</div>235 <div class="key icon accent">236 <svg viewBox="0 0 24 24"><path d="M18 6l-6 6-6-6"/></svg>237 </div>238 </div>239 <!-- Row 3 -->240 <div class="key-row">241 <div class="key">z</div>242 <div class="key">x</div>243 <div class="key">c</div>244 <div class="key">v</div>245 <div class="key">b</div>246 <div class="key">n</div>247 <div class="key">m</div>248 <div class="key icon"><svg viewBox="0 0 24 24"><path d="M15 12H6"/><path d="M10 7l-5 5 5 5"/></svg></div>249 <div class="key">⌫</div>250 <div class="key icon accent">251 <svg viewBox="0 0 24 24"><path d="M6 12h12M12 6l6 6-6 6"/></svg>252 </div>253 </div>254 <!-- Row 4 -->255 <div class="key-row">256 <div class="key accent small">?123</div>257 <div class="key small">@</div>258 <div class="key small">☺</div>259 <div class="key space"> </div>260 <div class="key small">.</div>261 <div class="key icon accent">262 <svg viewBox="0 0 24 24"><path d="M3 12h14"/><path d="M12 5l7 7-7 7"/></svg>263 </div>264 <div class="key small">,</div>265 <div class="key small">:</div>266 <div class="key small">;</div>267 <div class="key small">?</div>268 </div>269 </div>270 271 <!-- Gesture bar -->272 <div class="gesture"></div>273</div>274</body>275</html>