GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Email Compose Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121212;15 color: #EAEAEA;16 }17 18 /* Status bar */19 .status-bar {20 height: 92px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #E0E0E0;26 font-size: 32px;27 letter-spacing: 0.5px;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 26px;33 }34 .status-dot {35 width: 10px; height: 10px; border-radius: 50%; background: #BDBDBD;36 }37 38 /* App bar */39 .app-bar {40 height: 120px;41 padding: 0 24px;42 display: flex;43 align-items: center;44 justify-content: space-between;45 }46 .app-left, .app-right { display: flex; align-items: center; gap: 32px; }47 .icon-btn svg { display: block; }48 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }49 50 /* Content */51 .content {52 padding: 12px 40px 0 40px;53 }54 .row {55 display: flex;56 align-items: center;57 padding: 22px 0;58 border-bottom: 1px solid #1F1F1F;59 }60 .label {61 width: 130px;62 color: #B0BEC5;63 font-size: 30px;64 }65 .value {66 font-size: 30px;67 color: #E0E0E0;68 }69 70 /* Recipient chip */71 .chip {72 display: inline-flex;73 align-items: center;74 border: 1px solid #5F6E78;75 border-radius: 40px;76 padding: 12px 18px;77 gap: 16px;78 color: #E0E0E0;79 background: #1A1D21;80 max-width: 780px;81 }82 .avatar {83 width: 56px; height: 56px; border-radius: 50%;84 background: #4CAF50; color: #0a0a0a;85 display: flex; align-items: center; justify-content: center;86 font-weight: 700; font-size: 30px;87 }88 .chip-email { font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }89 .chip-caret { margin-left: 8px; }90 91 /* Subject */92 .subject {93 font-size: 40px;94 padding: 24px 0 26px 0;95 color: #E6E6E6;96 border-bottom: 1px solid #1F1F1F;97 }98 99 /* Compose label */100 .compose-label {101 padding: 26px 0 16px 0;102 font-size: 34px;103 color: #9DA8AF;104 }105 106 /* Attachment card */107 .attachment {108 width: 1000px;109 background: #2C333B;110 border-radius: 18px;111 padding: 26px 28px;112 display: flex;113 align-items: center;114 gap: 26px;115 }116 .file-icon {117 width: 80px; height: 80px; border-radius: 12px;118 background: #F2994A; color: #262626;119 display: flex; align-items: center; justify-content: center;120 font-weight: 800; font-size: 40px;121 }122 .file-info { display: flex; flex-direction: column; gap: 6px; }123 .file-name { font-size: 34px; color: #FFFFFF; }124 .file-size { font-size: 26px; color: #B0BEC5; }125 .spacer { flex: 1; }126 127 /* Bottom gesture bar */128 .home-indicator {129 position: absolute;130 bottom: 42px;131 left: 50%;132 transform: translateX(-50%);133 width: 300px;134 height: 10px;135 border-radius: 6px;136 background: #E0E0E0;137 opacity: 0.7;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Status bar -->145 <div class="status-bar">146 <div>11:08</div>147 <div class="status-icons">148 <!-- simple status icons placeholders -->149 <div class="status-dot"></div>150 <div class="status-dot"></div>151 <div class="status-dot"></div>152 <svg width="36" height="36" viewBox="0 0 24 24">153 <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#E0E0E0" stroke-width="2"/>154 <rect x="4" y="8" width="14" height="8" fill="#E0E0E0"/>155 </svg>156 </div>157 </div>158 159 <!-- App bar -->160 <div class="app-bar">161 <div class="app-left">162 <div class="icon-btn">163 <svg width="48" height="48" viewBox="0 0 24 24">164 <path d="M15 6 L9 12 L15 18" fill="none" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>165 </svg>166 </div>167 </div>168 <div class="app-right">169 <div class="icon-btn">170 <!-- paperclip -->171 <svg width="48" height="48" viewBox="0 0 24 24">172 <path d="M7 13l6-6a4 4 0 015.7 5.7l-7 7a5 5 0 01-7.1-7.1l7-7" fill="none" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round"/>173 </svg>174 </div>175 <div class="icon-btn">176 <!-- send -->177 <svg width="48" height="48" viewBox="0 0 24 24">178 <path d="M3 12l18-8-6 16-4-6-8-2z" fill="#E0E0E0"/>179 </svg>180 </div>181 <div class="icon-btn">182 <!-- vertical menu -->183 <svg width="48" height="48" viewBox="0 0 24 24">184 <circle cx="12" cy="5" r="2" fill="#E0E0E0"/>185 <circle cx="12" cy="12" r="2" fill="#E0E0E0"/>186 <circle cx="12" cy="19" r="2" fill="#E0E0E0"/>187 </svg>188 </div>189 </div>190 </div>191 192 <!-- Content area -->193 <div class="content">194 <div class="row">195 <div class="label">From</div>196 <div class="value">dbwscratch.test.id16@gmail.com</div>197 </div>198 199 <div class="row" style="border-bottom: 1px solid #1F1F1F;">200 <div class="label">To</div>201 <div class="chip">202 <div class="avatar">k</div>203 <div class="chip-email">karin.iversen@example.com</div>204 <div class="chip-caret">205 <svg width="28" height="28" viewBox="0 0 24 24">206 <path d="M6 9l6 6 6-6" fill="none" stroke="#B0BEC5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 </div>210 </div>211 212 <div class="subject">I am sharing 'Presentation' with you</div>213 214 <div class="compose-label">Compose email</div>215 216 <div class="attachment">217 <div class="file-icon">P</div>218 <div class="file-info">219 <div class="file-name">Presentation.pptx</div>220 <div class="file-size">21.4 MB</div>221 </div>222 <div class="spacer"></div>223 <div class="icon-btn">224 <svg width="44" height="44" viewBox="0 0 24 24">225 <path d="M6 6l12 12M18 6L6 18" stroke="#C9D1D9" stroke-width="2" stroke-linecap="round"/>226 </svg>227 </div>228 </div>229 </div>230 231 <!-- Bottom gesture bar -->232 <div class="home-indicator"></div>233</div>234</body>235</html>