GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Email Compose - 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    font-family: Arial, Helvetica, sans-serif;15    color: #EDEDED;16  }17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    height: 90px;22    width: 100%;23    color: #FFFFFF;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29  }30  .status-left {31    font-size: 38px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .status-dot {40    width: 14px; height: 14px; background:#BDBDBD; border-radius: 50%;41  }42  .battery {43    width: 46px; height: 24px; border: 2px solid #BDBDBD; border-radius: 4px; position: relative;44  }45  .battery:after {46    content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 10px; background:#BDBDBD; border-radius: 2px;47  }48  .battery-level {49    position: absolute; left: 2px; top: 2px; height: 18px; width: 30px; background:#BDBDBD; border-radius: 2px;50  }51 52  .app-header {53    position: absolute;54    top: 90px;55    left: 0;56    width: 100%;57    height: 110px;58    display: flex;59    align-items: center;60    justify-content: space-between;61    padding: 0 24px 0 20px;62    box-sizing: border-box;63  }64  .icon-btn {65    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;66  }67  .header-actions {68    display: flex; align-items: center; gap: 26px;69    margin-right: 10px;70  }71  .divider-line {72    position: absolute;73    left: 0;74    width: 100%;75    height: 1px;76    background: #2A2A2A;77  }78 79  .content {80    position: absolute;81    top: 200px;82    left: 0;83    width: 100%;84    box-sizing: border-box;85  }86  .row {87    padding: 22px 40px;88    box-sizing: border-box;89  }90  .label {91    color: #A6A6A6;92    font-size: 28px;93    margin-bottom: 8px;94  }95  .value {96    font-size: 36px;97    color: #EDEDED;98  }99 100  .to-row {101    display: flex;102    align-items: center;103    padding: 30px 40px;104  }105  .to-label {106    color:#A6A6A6; font-size: 30px; margin-right: 20px;107  }108  .to-input {109    flex: 1;110    height: 44px;111    border-bottom: 1px solid transparent;112    color:#EDEDED;113    font-size: 34px;114  }115  .section-divider {116    height: 1px; background:#2A2A2A; margin: 0 40px;117  }118 119  .subject {120    padding: 28px 40px;121    font-size: 38px;122    color:#EDEDED;123  }124  .compose {125    padding: 44px 40px 24px 40px;126    color:#A6A6A6;127    font-size: 34px;128  }129 130  .attachment {131    margin: 24px 40px;132    width: 1000px;133    height: 150px;134    background: #2F3C45;135    border-radius: 16px;136    display: flex;137    align-items: center;138    box-sizing: border-box;139    padding: 24px;140    gap: 24px;141  }142  .file-icon {143    width: 84px; height: 84px; background: #F57C00; border-radius: 12px;144    color:#1A1A1A; font-weight: bold; font-size: 46px; display:flex; align-items:center; justify-content:center;145  }146  .file-info {147    flex: 1;148  }149  .file-name {150    font-size: 34px; margin-bottom: 8px; color:#EDEDED;151  }152  .file-size {153    font-size: 26px; color:#B0BEC5;154  }155  .remove {156    width: 54px; height: 54px; border-radius: 50%;157    display:flex; align-items:center; justify-content:center;158    background: transparent; border: 2px solid #8FA1A8;159  }160 161  .gesture {162    position: absolute;163    bottom: 36px;164    left: 50%;165    transform: translateX(-50%);166    width: 420px;167    height: 10px;168    background: #E0E0E0;169    border-radius: 8px;170    opacity: 0.9;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status Bar -->178  <div class="status-bar">179    <div class="status-left">11:07</div>180    <div class="status-right">181      <div class="status-dot"></div>182      <div class="status-dot"></div>183      <div class="status-dot"></div>184      <div class="battery"><div class="battery-level"></div></div>185    </div>186  </div>187 188  <!-- App Header with navigation and actions -->189  <div class="app-header">190    <div class="icon-btn">191      <svg width="44" height="44" viewBox="0 0 44 44">192        <path d="M26 34 L14 22 L26 10" stroke="#EDEDED" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193      </svg>194    </div>195    <div class="header-actions">196      <!-- Paperclip -->197      <svg width="44" height="44" viewBox="0 0 44 44">198        <path d="M16 28c0 5 6 8 10 4l6-6c3-3 2-7-1-9s-6-1-8 1l-8 8c-4 4 0 10 5 10" stroke="#EDEDED" stroke-width="3" fill="none" stroke-linecap="round"/>199      </svg>200      <!-- Send -->201      <svg width="44" height="44" viewBox="0 0 44 44">202        <path d="M10 12 L34 22 L10 32 L14 24 L22 22 L14 20 Z" fill="#EDEDED"/>203      </svg>204      <!-- More (vertical ellipsis) -->205      <svg width="44" height="44" viewBox="0 0 44 44">206        <circle cx="22" cy="12" r="3.5" fill="#EDEDED"/>207        <circle cx="22" cy="22" r="3.5" fill="#EDEDED"/>208        <circle cx="22" cy="32" r="3.5" fill="#EDEDED"/>209      </svg>210    </div>211  </div>212 213  <!-- Divider under header -->214  <div class="divider-line" style="top: 200px;"></div>215 216  <!-- Content -->217  <div class="content">218    <!-- From -->219    <div class="row">220      <div class="label">From</div>221      <div class="value">dbwscratch.test.id16@gmail.com</div>222    </div>223 224    <div class="section-divider"></div>225 226    <!-- To -->227    <div class="to-row">228      <div class="to-label">To</div>229      <div class="to-input"></div>230      <svg width="44" height="44" viewBox="0 0 44 44">231        <path d="M12 16 L22 26 L32 16" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>232      </svg>233    </div>234 235    <div class="section-divider"></div>236 237    <!-- Subject -->238    <div class="subject">I am sharing 'Presentation' with you</div>239 240    <div class="section-divider"></div>241 242    <!-- Body placeholder -->243    <div class="compose">Compose email</div>244 245    <!-- Attachment card -->246    <div class="attachment">247      <div class="file-icon">P</div>248      <div class="file-info">249        <div class="file-name">Presentation.pptx</div>250        <div class="file-size">21.4 MB</div>251      </div>252      <div class="remove">253        <svg width="22" height="22" viewBox="0 0 22 22">254          <path d="M6 6 L16 16 M16 6 L6 16" stroke="#8FA1A8" stroke-width="2.5" stroke-linecap="round"/>255        </svg>256      </div>257    </div>258  </div>259 260  <!-- Gesture bar -->261  <div class="gesture"></div>262 263</div>264</body>265</html>