GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Reply - Gmail Dark UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #EAEAEA;15 font-family: Arial, Helvetica, sans-serif;16 }17 18 /* Status bar */19 .statusbar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 padding: 0 32px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #DADADA;30 font-size: 40px;31 }32 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }33 .icon {34 width: 44px; height: 44px; fill: #DADADA;35 }36 37 /* App bar */38 .appbar {39 position: absolute;40 top: 120px;41 left: 0;42 width: 1080px;43 height: 120px;44 padding: 0 24px;45 display: flex;46 align-items: center;47 justify-content: space-between;48 background: #121212;49 }50 .appbar-left { display: flex; align-items: center; gap: 24px; }51 .appbar-right { display: flex; align-items: center; gap: 36px; }52 .title {53 font-size: 44px;54 color: #F2F2F2;55 display: flex; align-items: center; gap: 12px;56 }57 58 /* Form fields */59 .mail-form {60 position: absolute;61 top: 240px;62 left: 0;63 width: 1080px;64 background: #121212;65 border-top: 1px solid #2B2B2B;66 }67 .field {68 padding: 24px 32px;69 border-bottom: 1px solid #2B2B2B;70 display: flex; align-items: center; justify-content: space-between;71 }72 .label { color: #B9B9B9; font-size: 34px; }73 .value { font-size: 36px; color: #EDEDED; }74 75 .to-row { display: flex; align-items: center; gap: 16px; }76 .chip {77 display: inline-flex;78 align-items: center;79 gap: 14px;80 padding: 10px 18px;81 border: 1px solid #3A3A3A;82 border-radius: 28px;83 background: #1F1F1F;84 color: #FFFFFF;85 font-size: 34px;86 }87 .avatar {88 width: 42px; height: 42px;89 background: #E0E0E0;90 border: 1px solid #BDBDBD;91 border-radius: 50%;92 display: flex; align-items: center; justify-content: center;93 color: #757575; font-size: 22px;94 }95 96 /* Body area */97 .body-area {98 padding: 40px 32px 28px 32px;99 font-size: 48px;100 line-height: 1.5;101 color: #EFEFEF;102 min-height: 520px;103 }104 .dots {105 color: #9E9E9E;106 letter-spacing: 14px;107 font-size: 48px;108 padding-left: 8px;109 }110 111 /* Keyboard utility bar */112 .kb-utils {113 position: absolute;114 left: 0;115 width: 1080px;116 height: 120px;117 bottom: 1000px;118 padding: 0 24px;119 display: flex; align-items: center; gap: 34px;120 color: #DCDCDC;121 }122 .util-btn {123 width: 88px; height: 88px;124 background: #1F1F1F;125 border: 1px solid #2C2C2C;126 border-radius: 20px;127 display: flex; align-items: center; justify-content: center;128 }129 130 /* Keyboard */131 .keyboard {132 position: absolute;133 bottom: 120px;134 left: 0;135 width: 1080px;136 height: 880px;137 background: #1A1A1A;138 border-top: 1px solid #2B2B2B;139 padding: 24px;140 box-sizing: border-box;141 }142 .kb-row {143 display: flex;144 justify-content: center;145 gap: 12px;146 margin-bottom: 22px;147 }148 .key {149 background: #2A2A2A;150 color: #EDEDED;151 font-size: 40px;152 width: 88px; height: 120px;153 border-radius: 18px;154 display: flex; align-items: center; justify-content: center;155 }156 .key.wide { width: 148px; }157 .key.space { width: 520px; }158 .key.alt { background: #CFE0FF; color: #0E1A2F; }159 .key.light { background: #2F2F2F; }160 .key.circle {161 width: 120px; height: 120px; border-radius: 60px; background: #CFE0FF; color: #0E1A2F;162 }163 164 /* Gesture nav bar */165 .gesture-bar {166 position: absolute;167 bottom: 32px;168 left: 50%;169 transform: translateX(-50%);170 width: 240px;171 height: 16px;172 background: #E8E8E8;173 border-radius: 10px;174 opacity: 0.95;175 }176</style>177</head>178<body>179<div id="render-target">180 181 <!-- Status bar -->182 <div class="statusbar">183 <div class="status-left">184 <span>10:25</span>185 <svg class="icon" viewBox="0 0 48 48">186 <path d="M8 24l6 6 18-18" stroke="#DADADA" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>187 </svg>188 <svg class="icon" viewBox="0 0 48 48">189 <path d="M8 24l6 6 18-18" stroke="#DADADA" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>190 </svg>191 <svg class="icon" viewBox="0 0 48 48">192 <path d="M10 36h28l-8-16-8 10-6-8z" fill="#DADADA"></path>193 </svg>194 </div>195 <div class="status-right">196 <!-- Wi-Fi -->197 <svg class="icon" viewBox="0 0 48 48">198 <path d="M6 18c8-8 28-8 36 0" stroke="#DADADA" stroke-width="4" fill="none" stroke-linecap="round"/>199 <path d="M12 24c6-6 18-6 24 0" stroke="#DADADA" stroke-width="4" fill="none" stroke-linecap="round"/>200 <circle cx="24" cy="30" r="4" fill="#DADADA"/>201 </svg>202 <!-- Signal -->203 <svg class="icon" viewBox="0 0 48 48">204 <rect x="6" y="26" width="6" height="16" fill="#DADADA"/>205 <rect x="16" y="22" width="6" height="20" fill="#DADADA"/>206 <rect x="26" y="18" width="6" height="24" fill="#DADADA"/>207 <rect x="36" y="14" width="6" height="28" fill="#DADADA"/>208 </svg>209 <!-- Battery -->210 <svg class="icon" viewBox="0 0 60 48">211 <rect x="4" y="10" width="46" height="28" rx="4" ry="4" stroke="#DADADA" stroke-width="4" fill="none"/>212 <rect x="8" y="14" width="32" height="20" fill="#DADADA"/>213 <rect x="52" y="18" width="6" height="12" rx="2" fill="#DADADA"/>214 </svg>215 </div>216 </div>217 218 <!-- App bar -->219 <div class="appbar">220 <div class="appbar-left">221 <svg class="icon" viewBox="0 0 48 48">222 <path d="M30 10L14 24l16 14" stroke="#E0E0E0" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223 </svg>224 <div class="title">225 <span>Reply</span>226 <svg class="icon" viewBox="0 0 48 48">227 <path d="M12 18l12 12 12-12" fill="#E0E0E0"/>228 </svg>229 </div>230 </div>231 <div class="appbar-right">232 <!-- Attachment -->233 <svg class="icon" viewBox="0 0 48 48">234 <path d="M16 18c0-5 6-9 12-6 6 3 6 12-2 18L18 40c-6 4-12-2-8-8l12-12" stroke="#E0E0E0" stroke-width="4" fill="none" stroke-linecap="round"/>235 </svg>236 <!-- Send -->237 <svg class="icon" viewBox="0 0 48 48">238 <path d="M6 24l36-14-10 14 10 14-36-14z" fill="#87C3FF"/>239 </svg>240 <!-- More -->241 <svg class="icon" viewBox="0 0 48 48">242 <circle cx="24" cy="12" r="4" fill="#E0E0E0"/>243 <circle cx="24" cy="24" r="4" fill="#E0E0E0"/>244 <circle cx="24" cy="36" r="4" fill="#E0E0E0"/>245 </svg>246 </div>247 </div>248 249 <!-- Mail form fields -->250 <div class="mail-form">251 <div class="field">252 <div class="label">From</div>253 <div class="value">lucaskramer733@gmail.com</div>254 </div>255 256 <div class="field">257 <div class="label">To</div>258 <div class="to-row">259 <div class="chip">260 <div class="avatar">[IMG]</div>261 <span>Cerebra Research</span>262 </div>263 <svg class="icon" viewBox="0 0 48 48">264 <path d="M12 18l12 12 12-12" fill="#BDBDBD"/>265 </svg>266 </div>267 </div>268 269 <div class="field">270 <div class="label">Subject</div>271 <div class="value">Re: Shopping list</div>272 </div>273 </div>274 275 <!-- Message body -->276 <div class="body-area">277 Confirm the order.278 <div class="dots">...</div>279 </div>280 281 <!-- Keyboard utility bar -->282 <div class="kb-utils">283 <div class="util-btn">284 <svg class="icon" viewBox="0 0 48 48">285 <rect x="6" y="6" width="12" height="12" fill="#DADADA"/>286 <rect x="30" y="6" width="12" height="12" fill="#DADADA"/>287 <rect x="6" y="30" width="12" height="12" fill="#DADADA"/>288 <rect x="30" y="30" width="12" height="12" fill="#DADADA"/>289 </svg>290 </div>291 <div class="util-btn">292 <svg class="icon" viewBox="0 0 48 48">293 <circle cx="24" cy="18" r="8" fill="#DADADA"/>294 <path d="M8 40c2-8 12-8 16-8s14 0 16 8" stroke="#DADADA" stroke-width="4" fill="none" stroke-linecap="round"/>295 </svg>296 </div>297 <div class="util-btn">298 <span style="font-weight:bold;">GIF</span>299 </div>300 <div class="util-btn">301 <svg class="icon" viewBox="0 0 48 48">302 <circle cx="24" cy="24" r="18" stroke="#DADADA" stroke-width="4" fill="none"/>303 <rect x="22" y="14" width="4" height="16" fill="#DADADA"/>304 <rect x="22" y="32" width="4" height="4" fill="#DADADA"/>305 </svg>306 </div>307 <div class="util-btn">308 <svg class="icon" viewBox="0 0 48 48">309 <path d="M10 10h28v8H10zM10 22h20v8H10zM10 34h12v8H10z" fill="#DADADA"/>310 </svg>311 </div>312 <div class="util-btn">313 <svg class="icon" viewBox="0 0 48 48">314 <rect x="6" y="30" width="36" height="8" fill="#DADADA"/>315 <circle cx="12" cy="16" r="6" fill="#DADADA"/>316 </svg>317 </div>318 <div class="util-btn">319 <svg class="icon" viewBox="0 0 48 48">320 <path d="M24 6c-6 0-10 4-10 10v12c0 4 3 8 10 8s10-4 10-8V16c0-6-4-10-10-10zm0 8a4 4 0 0 1 4 4v6h-8v-6a4 4 0 0 1 4-4z" fill="#DADADA"/>321 </svg>322 </div>323 </div>324 325 <!-- Keyboard -->326 <div class="keyboard">327 <!-- Row 1 -->328 <div class="kb-row">329 <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>330 <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>331 </div>332 <!-- Row 2 -->333 <div class="kb-row">334 <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>335 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>336 <div class="key light">⌫</div>337 </div>338 <!-- Row 3 -->339 <div class="kb-row">340 <div class="key wide">⇧</div>341 <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>342 <div class="key wide">,</div>343 </div>344 <!-- Row 4 -->345 <div class="kb-row">346 <div class="key circle alt">?123</div>347 <div class="key wide">😊</div>348 <div class="key space"> </div>349 <div class="key wide">.</div>350 <div class="key circle alt">↵</div>351 </div>352 </div>353 354 <!-- Gesture bar -->355 <div class="gesture-bar"></div>356 357</div>358</body>359</html>