GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Email Compose - Android Dark</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px; position: relative; overflow: hidden;9 background: #0f1113; color: #e5e5e5;10 }11 12 /* Status bar */13 .status-bar {14 position: absolute; top: 0; left: 0; right: 0;15 height: 90px; background: #0f1113; display: flex; align-items: center;16 padding: 0 30px; color: #d9d9d9; font-size: 34px;17 }18 .status-left { display: flex; align-items: center; gap: 18px; }19 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }20 .status-dot { width: 22px; height: 22px; border-radius: 50%; background:#cfd8dc; opacity: .8; }21 22 /* App bar */23 .app-bar {24 position: absolute; top: 90px; left: 0; right: 0;25 height: 120px; display: flex; align-items: center;26 padding: 0 30px; color: #cfd8dc;27 }28 .icon-btn { width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; }29 .app-actions { margin-left: auto; display: flex; gap: 26px; }30 .svg-icon { width: 44px; height: 44px; fill: #9fb3c8; }31 32 /* Content area */33 .content {34 position: absolute; top: 210px; left: 0; right: 0; bottom: 930px;35 padding: 0 36px; overflow: hidden;36 }37 .field-row { padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }38 .label { color: #a7b0b7; font-size: 38px; margin-bottom: 14px; }39 .value { font-size: 42px; color: #e6edf3; display:flex; align-items:center; gap: 18px; }40 .caret { width: 3px; height: 64px; background:#6fb1ff; display:inline-block; margin-top: 18px; }41 .chip {42 display: inline-flex; align-items: center; gap: 22px;43 background: #2a2f34; border-radius: 50px; padding: 20px 28px;44 color: #e6edf3; font-size: 36px;45 }46 .avatar {47 width: 64px; height: 64px; border-radius: 50%; background: #57c2c2; display:flex; align-items:center; justify-content:center; color:#0b1c1c; font-weight: bold;48 border: 2px solid rgba(255,255,255,0.08);49 }50 .dropdown { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid #98a7b7; margin-left: 8px; }51 52 .placeholder { color:#cfd8dc; font-size: 40px; padding: 30px 0; }53 54 /* Attachment card */55 .attach-card {56 margin-top: 28px; width: 100%; height: 170px;57 background: #34424c; border-radius: 16px; display: flex; align-items: center; justify-content: space-between;58 padding: 28px 30px; color: #e6edf3;59 }60 .attach-left { display:flex; align-items:center; gap: 30px; }61 .pdf-badge {62 width: 74px; height: 74px; border-radius: 14px; background:#e64a19; display:flex; align-items:center; justify-content:center; font-weight:bold;63 color:#fff; font-size: 28px;64 }65 .attach-name { font-size: 42px; }66 .attach-meta { font-size: 32px; color: #b7c1c9; margin-top: 6px; }67 .close-x {68 width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25);69 display:flex; align-items:center; justify-content:center; color:#cfd8dc; font-size: 36px;70 }71 72 /* Keyboard */73 .keyboard {74 position: absolute; bottom: 0; left: 0; right: 0;75 height: 930px; background: #1a1d21; border-top: 1px solid rgba(255,255,255,0.06);76 padding: 28px 20px;77 }78 .kb-toolbar { display:flex; gap: 26px; padding: 10px 4px 24px; }79 .kb-tool {80 width: 96px; height: 96px; border-radius: 20px; background: #2a2f34; display:flex; align-items:center; justify-content:center;81 color:#cfd8dc; font-size: 28px; border: 1px solid rgba(255,255,255,0.06);82 }83 84 .kb-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }85 .key {86 flex: 1; height: 130px; background: #2a2f34; border-radius: 22px; display:flex; align-items:center; justify-content:center;87 color:#e6edf3; font-size: 46px; border: 1px solid rgba(255,255,255,0.06);88 }89 .key.wide { flex: 2.4; }90 .key.space { flex: 6; font-size: 40px; color:#a7b0b7; }91 .key.small { height: 118px; font-size: 38px; }92 .kb-bottom { display:flex; gap: 12px; align-items:center; }93</style>94</head>95<body>96<div id="render-target">97 98 <!-- Status bar -->99 <div class="status-bar">100 <div class="status-left">101 <div>10:18</div>102 <div class="status-dot"></div>103 <div class="status-dot"></div>104 <div class="status-dot"></div>105 <div class="status-dot"></div>106 </div>107 <div class="status-right">108 <div class="status-dot" style="background:#cfd8dc;"></div>109 <div class="status-dot" style="background:#cfd8dc;"></div>110 </div>111 </div>112 113 <!-- App bar -->114 <div class="app-bar">115 <div class="icon-btn">116 <svg class="svg-icon" viewBox="0 0 24 24">117 <path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6z"/>118 </svg>119 </div>120 121 <div class="app-actions">122 <div class="icon-btn">123 <svg class="svg-icon" viewBox="0 0 24 24">124 <path d="M17 3a3 3 0 00-3 3v9a2 2 0 11-4 0V7H8v8a4 4 0 108 0V6h-2v9a2 2 0 11-4 0V6a1 1 0 012 0v9h2V6a3 3 0 013-3z"/>125 </svg>126 </div>127 <div class="icon-btn">128 <svg class="svg-icon" viewBox="0 0 24 24">129 <path d="M3 11l18-8-8 18-2-6-6-2z"/>130 </svg>131 </div>132 <div class="icon-btn">133 <svg class="svg-icon" viewBox="0 0 24 24">134 <circle cx="5" cy="12" r="2"/>135 <circle cx="12" cy="12" r="2"/>136 <circle cx="19" cy="12" r="2"/>137 </svg>138 </div>139 </div>140 </div>141 142 <!-- Content -->143 <div class="content">144 <div class="field-row">145 <div class="label">From</div>146 <div class="value">ffionh41@gmail.com147 <div class="dropdown" style="margin-left:20px;"></div>148 </div>149 </div>150 151 <div class="field-row">152 <div class="label">To</div>153 <div class="value">154 <span class="chip">155 <span class="avatar">M</span>156 maredharris@gmail.com157 </span>158 <div class="dropdown" style="margin-left: 18px;"></div>159 </div>160 <div class="caret"></div>161 </div>162 163 <div class="field-row">164 <div class="label">Subject</div>165 </div>166 167 <div class="field-row" style="border-bottom:none;">168 <div class="placeholder">Compose email</div>169 170 <div class="attach-card">171 <div class="attach-left">172 <div class="pdf-badge">PDF</div>173 <div>174 <div class="attach-name">Upcoming Events .pdf</div>175 <div class="attach-meta">18 KB</div>176 </div>177 </div>178 <div class="close-x">×</div>179 </div>180 </div>181 </div>182 183 <!-- Keyboard -->184 <div class="keyboard">185 <div class="kb-toolbar">186 <div class="kb-tool">▦</div>187 <div class="kb-tool">☺</div>188 <div class="kb-tool">GIF</div>189 <div class="kb-tool">⚙</div>190 <div class="kb-tool">A↔</div>191 <div class="kb-tool">🎨</div>192 <div class="kb-tool">🎤</div>193 </div>194 195 <div class="kb-row">196 <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>197 <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>198 </div>199 <div class="kb-row">200 <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>201 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>202 </div>203 <div class="kb-row">204 <div class="key small">z</div><div class="key small">x</div><div class="key small">c</div><div class="key small">v</div>205 <div class="key small">b</div><div class="key small">n</div><div class="key small">m</div>206 </div>207 208 <div class="kb-bottom">209 <div class="key wide small">?123</div>210 <div class="key small">@</div>211 <div class="key small">☺</div>212 <div class="key space">space</div>213 <div class="key small">.</div>214 <div class="key wide small">↩</div>215 </div>216 </div>217 218</div>219</body>220</html>