GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Compose Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1440px;10 height: 3120px;11 overflow: hidden;12 background: #0f0f0f;13 color: #eaeaea;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1440px;22 height: 120px;23 color: #eaeaea;24 font-size: 42px;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 }30 .status-left { display: flex; gap: 24px; align-items: center; }31 .status-right {32 margin-left: auto;33 display: flex; align-items: center; gap: 26px;34 }35 .sb-icon {36 width: 46px; height: 46px; border-radius: 6px; background: #2a2a2a;37 }38 39 /* App bar */40 .appbar {41 position: absolute;42 top: 120px;43 left: 0;44 width: 1440px;45 height: 180px;46 border-bottom: 1px solid #222;47 display: flex;48 align-items: center;49 padding: 0 28px;50 box-sizing: border-box;51 }52 .app-title {53 font-size: 64px;54 margin-left: 16px;55 color: #f1f1f1;56 }57 .app-actions { margin-left: auto; display: flex; gap: 34px; align-items: center; }58 .icon-btn svg { fill: #eaeaea; }59 .icon-btn { width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; }60 61 /* Compose area */62 .compose {63 position: absolute;64 top: 300px;65 left: 0;66 width: 1440px;67 bottom: 1200px; /* leave room for keyboard */68 overflow: hidden;69 padding: 26px 40px 0 40px;70 box-sizing: border-box;71 }72 73 .field {74 padding: 28px 0;75 border-bottom: 1px solid #1f1f1f;76 }77 .row {78 display: flex; align-items: center;79 gap: 18px;80 }81 .label {82 width: 160px;83 color: #9aa0a6;84 font-size: 42px;85 }86 .value {87 flex: 1;88 color: #eaeaea;89 font-size: 46px;90 }91 .chev {92 width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;93 }94 .subject {95 font-size: 54px;96 line-height: 1.2;97 color: #f2f2f2;98 }99 .body-text {100 white-space: pre-line;101 font-size: 50px;102 line-height: 1.34;103 color: #eeeeee;104 padding-top: 18px;105 }106 .link {107 color: #8ab4f8;108 word-break: break-all;109 }110 111 /* Keyboard mock */112 .keyboard {113 position: absolute;114 bottom: 86px;115 left: 0;116 width: 1440px;117 height: 1120px;118 background: #1b1b1b;119 border-top: 1px solid #2a2a2a;120 padding: 26px 26px 20px 26px;121 box-sizing: border-box;122 }123 .kb-top-row {124 display: flex;125 gap: 22px;126 margin-bottom: 26px;127 height: 120px;128 }129 .kb-puck {130 width: 120px; height: 120px; background: #2a2a2a; border-radius: 26px;131 display: flex; align-items: center; justify-content: center; color: #c7c7c7; font-size: 46px;132 }133 .kb-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; }134 .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; margin-top: 18px; }135 .key {136 height: 132px; background: #2a2a2a; border-radius: 22px;137 display: flex; align-items: center; justify-content: center; color: #f3f3f3; font-size: 56px;138 }139 .key.wide { grid-column: span 2; }140 .key.extra-wide { grid-column: span 4; }141 .kb-bottom {142 display: grid; grid-template-columns: 1fr 1fr 4fr 1fr 1fr; gap: 16px; margin-top: 18px;143 }144 145 /* Bottom nav pill */146 .nav-pill {147 position: absolute;148 bottom: 22px;149 left: 50%;150 transform: translateX(-50%);151 width: 300px; height: 16px; border-radius: 12px; background: #e0e0e0;152 opacity: 0.6;153 }154 155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Status Bar -->161 <div class="status-bar">162 <div class="status-left">163 <div style="font-weight:600;">10:11</div>164 <div>86°</div>165 </div>166 <div class="status-right">167 <div class="sb-icon"></div>168 <div class="sb-icon"></div>169 <div class="sb-icon"></div>170 </div>171 </div>172 173 <!-- App Bar -->174 <div class="appbar">175 <div class="icon-btn" aria-label="Back">176 <svg width="72" height="72" viewBox="0 0 24 24">177 <path d="M14 7l-5 5 5 5" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>178 </svg>179 </div>180 <div class="app-title">Compose</div>181 <div class="app-actions">182 <div class="icon-btn" aria-label="Attach">183 <svg width="72" height="72" viewBox="0 0 24 24">184 <path d="M7 12l6-6a4 4 0 015 5l-7 7a3 3 0 01-4-4l7-7" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>185 </svg>186 </div>187 <div class="icon-btn" aria-label="Send">188 <svg width="72" height="72" viewBox="0 0 24 24">189 <path d="M3 12l18-9-7 9 7 9-18-9z" fill="#eaeaea"/>190 </svg>191 </div>192 <div class="icon-btn" aria-label="More">193 <svg width="72" height="72" viewBox="0 0 24 24">194 <circle cx="12" cy="5" r="2" />195 <circle cx="12" cy="12" r="2" />196 <circle cx="12" cy="19" r="2" />197 </svg>198 </div>199 </div>200 </div>201 202 <!-- Compose Content -->203 <div class="compose">204 <div class="field">205 <div class="row">206 <div class="label">From</div>207 <div class="value">qc255913@gmail.com</div>208 <div class="chev">209 <svg width="36" height="36" viewBox="0 0 24 24">210 <path d="M6 9l6 6 6-6" stroke="#a8a8a8" stroke-width="2" fill="none" stroke-linecap="round"/>211 </svg>212 </div>213 </div>214 </div>215 216 <div class="field">217 <div class="row">218 <div class="label">To</div>219 <div class="value" style="color:#6f6f6f;"> </div>220 <div class="chev">221 <svg width="36" height="36" viewBox="0 0 24 24">222 <path d="M6 9l6 6 6-6" stroke="#a8a8a8" stroke-width="2" fill="none" stroke-linecap="round"/>223 </svg>224 </div>225 </div>226 </div>227 228 <div class="field">229 <div class="row">230 <div class="label" style="width:160px;"> </div>231 <div class="value subject">232 Check out Lakaz Maman - Mauritian Street Kitchen on OpenTable233 </div>234 </div>235 </div>236 237 <div class="field" style="border-bottom:none; padding-bottom:0;">238 <div class="body-text">239I think you'd like this restaurant I found on OpenTable:240Lakaz Maman - Mauritian Street Kitchen24122 Bedford Place242Southampton243Hampshire244SO15 2DB245<span class="link">https://www.opentable.co.uk/restaurant/profile/258288?ref=android-share&refid=123</span>246 </div>247 </div>248 </div>249 250 <!-- Keyboard Mock -->251 <div class="keyboard">252 <div class="kb-top-row">253 <div class="kb-puck">⌦</div>254 <div class="kb-puck">😊</div>255 <div class="kb-puck">GIF</div>256 <div class="kb-puck">G</div>257 <div class="kb-puck">⚙</div>258 <div class="kb-puck">🎨</div>259 <div class="kb-puck">🎤</div>260 </div>261 262 <div class="kb-grid">263 <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>264 </div>265 <div class="kb-row">266 <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><div class="key wide">↵</div>267 </div>268 <div class="kb-row">269 <div class="key wide">⇧</div>270 <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>271 <div class="key wide">⌫</div>272 </div>273 <div class="kb-bottom">274 <div class="key">@</div>275 <div class="key">☺</div>276 <div class="key extra-wide">space</div>277 <div class="key">.</div>278 <div class="key">↦</div>279 </div>280 </div>281 282 <div class="nav-pill"></div>283</div>284</body>285</html>