GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Email Compose UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #EDEDED;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #CFCFCF;24 font-size: 44px;25 }26 .status-right {27 display: flex;28 gap: 28px;29 align-items: center;30 }31 .dot { width: 14px; height: 14px; background: #CFCFCF; border-radius: 50%; display: inline-block; }32 33 /* Header */34 .header {35 height: 150px;36 display: flex;37 align-items: center;38 padding: 0 30px;39 border-bottom: 1px solid #2A2A2A;40 gap: 32px;41 }42 .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }43 .header .spacer { flex: 1; }44 45 /* Rows */46 .row {47 display: flex;48 align-items: center;49 padding: 0 30px;50 height: 120px;51 border-bottom: 1px solid #2A2A2A;52 font-size: 40px;53 color: #B8B8B8;54 }55 .row .label {56 width: 120px;57 color: #AFAFAF;58 }59 .from-text {60 font-size: 40px;61 color: #DADADA;62 }63 64 /* Recipient pill */65 .to-pill {66 display: inline-flex;67 align-items: center;68 background: #262626;69 border: 1px solid #3A3A3A;70 padding: 10px 24px;71 border-radius: 40px;72 color: #EDEDED;73 font-size: 40px;74 gap: 20px;75 }76 .avatar {77 width: 72px; height: 72px; border-radius: 50%;78 background: #A07E6B;79 color: #000;80 display: flex; align-items: center; justify-content: center;81 font-weight: bold; font-size: 44px;82 }83 .to-right {84 margin-left: auto;85 width: 60px; height: 60px;86 display: flex; align-items: center; justify-content: center;87 }88 89 /* Subject & body */90 .subject-row { color: #AFAFAF; }91 .body-area {92 height: 940px;93 padding: 36px 30px;94 color: #AFAFAF;95 font-size: 44px;96 }97 .body-placeholder { color: #AFAFAF; }98 99 /* Keyboard mock */100 .keyboard {101 position: absolute;102 left: 0; right: 0;103 bottom: 30px;104 height: 780px;105 background: #1A1A1A;106 border-top: 1px solid #2E2E2E;107 padding: 22px 22px 30px;108 box-sizing: border-box;109 }110 .kb-top-icons {111 height: 90px;112 display: flex; align-items: center;113 gap: 42px; color: #BDBDBD; font-size: 36px;114 padding-left: 8px;115 }116 .kb-row {117 display: flex;118 gap: 18px;119 margin-top: 18px;120 justify-content: space-between;121 }122 .key {123 flex: 1;124 height: 120px;125 border-radius: 18px;126 background: #2A2A2A;127 color: #EDEDED;128 display: flex; align-items: center; justify-content: center;129 font-size: 50px;130 box-shadow: inset 0 -4px 0 rgba(255,255,255,0.02);131 }132 .key.wide { flex: 2.6; }133 .key.space { flex: 6.6; }134 .key.small { flex: 1.3; }135 .key.icon { font-size: 44px; color: #C7C7C7; }136 .kb-row.center { padding: 0 80px; }137 138 /* Gesture bar */139 .gesture {140 position: absolute;141 bottom: 0;142 left: 50%;143 transform: translateX(-50%);144 width: 540px;145 height: 14px;146 border-radius: 7px;147 background: #EDEDED;148 opacity: 0.6;149 }150 151 /* Simple icons (SVG) */152 svg { display: block; }153 .svg-gray { fill: #CFCFCF; }154 .svg-blue { fill: #90CAF9; }155 .svg-muted { fill: #9E9E9E; }156</style>157</head>158<body>159<div id="render-target">160 161 <!-- Status bar -->162 <div class="status-bar">163 <div>9:29</div>164 <div class="status-right">165 <span class="dot"></span>166 <span class="dot"></span>167 <span class="dot"></span>168 <span>🔋</span>169 </div>170 </div>171 172 <!-- Header with actions -->173 <div class="header">174 <div class="icon-btn">175 <svg width="64" height="64" viewBox="0 0 24 24" class="svg-gray">176 <path d="M15.5 5.5L9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9 1.4 1.4z"/>177 </svg>178 </div>179 <div class="spacer"></div>180 <div class="icon-btn">181 <svg width="64" height="64" viewBox="0 0 24 24" class="svg-muted">182 <path d="M18 7l-7.5 7.5-2-2L16 5l2 2zm-9.5 8.6l-.5 2.9 2.9-.5 8.6-8.6-2.4-2.4-8.6 8.6z"/>183 </svg>184 </div>185 <div class="icon-btn">186 <svg width="64" height="64" viewBox="0 0 24 24" class="svg-blue">187 <path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/>188 </svg>189 </div>190 <div class="icon-btn">191 <svg width="64" height="64" viewBox="0 0 24 24" class="svg-gray">192 <circle cx="12" cy="5" r="2.2"></circle>193 <circle cx="12" cy="12" r="2.2"></circle>194 <circle cx="12" cy="19" r="2.2"></circle>195 </svg>196 </div>197 </div>198 199 <!-- From -->200 <div class="row">201 <div class="from-text">From victorjonesdbwresearchpersona@gmail.com</div>202 </div>203 204 <!-- To -->205 <div class="row" style="height:140px;">206 <div class="label">To</div>207 <div class="to-pill">208 <div class="avatar">m</div>209 <div>maria.rossi1993@gmail.com</div>210 </div>211 <div class="to-right">212 <svg width="44" height="44" viewBox="0 0 24 24" class="svg-gray">213 <path d="M7 10l5 5 5-5z"/>214 </svg>215 </div>216 </div>217 218 <!-- Subject -->219 <div class="row subject-row">220 <div class="label"></div>221 <div>Subject</div>222 </div>223 224 <!-- Body -->225 <div class="body-area">226 <div class="body-placeholder">Compose email</div>227 </div>228 229 <!-- Keyboard -->230 <div class="keyboard">231 <div class="kb-top-icons">232 <span>▦</span>233 <span>😊</span>234 <span>GIF</span>235 <span>⚙️</span>236 <span>G⇄</span>237 <span>🎨</span>238 <span>🔇</span>239 </div>240 241 <div class="kb-row">242 <div class="key">q</div>243 <div class="key">w</div>244 <div class="key">e</div>245 <div class="key">r</div>246 <div class="key">t</div>247 <div class="key">y</div>248 <div class="key">u</div>249 <div class="key">i</div>250 <div class="key">o</div>251 <div class="key">p</div>252 </div>253 254 <div class="kb-row center">255 <div class="key">a</div>256 <div class="key">s</div>257 <div class="key">d</div>258 <div class="key">f</div>259 <div class="key">g</div>260 <div class="key">h</div>261 <div class="key">j</div>262 <div class="key">k</div>263 <div class="key">l</div>264 </div>265 266 <div class="kb-row">267 <div class="key">z</div>268 <div class="key">x</div>269 <div class="key">c</div>270 <div class="key">v</div>271 <div class="key">b</div>272 <div class="key">n</div>273 <div class="key">m</div>274 <div class="key wide icon">⌫</div>275 </div>276 277 <div class="kb-row">278 <div class="key wide icon">?123</div>279 <div class="key small icon">@</div>280 <div class="key small icon">☺</div>281 <div class="key space"></div>282 <div class="key small">.</div>283 <div class="key wide icon">↵</div>284 </div>285 </div>286 287 <!-- Gesture bar -->288 <div class="gesture"></div>289 290</div>291</body>292</html>