GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Gmail Compose Dark UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #E7E7E7;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    color: #E7E7E7;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 40px;29    font-size: 42px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .icon {38    width: 60px;39    height: 60px;40  }41 42  /* Top app bar */43  .app-bar {44    position: absolute;45    top: 110px;46    left: 0;47    width: 1080px;48    height: 170px;49    display: flex;50    align-items: center;51    justify-content: space-between;52    padding: 0 32px;53    border-bottom: 1px solid #2A2E33;54  }55  .app-left, .app-right {56    display: flex;57    align-items: center;58    gap: 32px;59  }60  .app-left .icon { width: 64px; height: 64px; }61  .app-right .icon { width: 64px; height: 64px; }62 63  /* Form area */64  .form {65    position: absolute;66    top: 280px;67    left: 0;68    width: 1080px;69    padding: 0 40px;70  }71  .row {72    display: flex;73    align-items: center;74    min-height: 140px;75    border-bottom: 1px solid #2A2E33;76  }77  .label {78    width: 170px;79    color: #9EA6AD;80    font-size: 40px;81  }82  .value {83    flex: 1;84    font-size: 40px;85    color: #E7E7E7;86  }87  .placeholder {88    color: #9EA6AD;89  }90  .dropdown {91    width: 52px;92    height: 52px;93  }94 95  /* Attachment chip */96  .attachment-wrap {97    margin-top: 60px;98    display: flex;99    justify-content: center;100  }101  .attachment {102    width: 980px;103    background: #2F3438;104    border-radius: 18px;105    padding: 26px 28px;106    display: flex;107    align-items: center;108    gap: 26px;109    box-shadow: 0 2px 0 rgba(0,0,0,0.25);110  }111  .att-icon {112    width: 84px;113    height: 84px;114    background: #D9534F;115    border-radius: 18px;116    display: flex;117    align-items: center;118    justify-content: center;119  }120  .att-texts {121    flex: 1;122  }123  .att-title {124    font-size: 40px;125    color: #E7E7E7;126    line-height: 1.2;127  }128  .att-sub {129    font-size: 34px;130    color: #9EA6AD;131    margin-top: 6px;132  }133  .att-close {134    width: 56px;135    height: 56px;136  }137 138  /* Compose hint text area (no actual textarea for static UI) */139  .compose-hint {140    font-size: 40px;141    color: #9EA6AD;142    padding: 42px 0;143  }144 145  /* Gesture bar */146  .gesture-bar {147    position: absolute;148    bottom: 40px;149    left: 50%;150    transform: translateX(-50%);151    width: 360px;152    height: 16px;153    background: #E6E6E6;154    border-radius: 10px;155    opacity: 0.85;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Status bar -->163  <div class="status-bar">164    <div>3:43</div>165    <div class="status-icons">166      <!-- Signal -->167      <svg class="icon" viewBox="0 0 24 24">168        <rect x="2" y="16" width="3" height="6" fill="#E7E7E7"></rect>169        <rect x="7" y="12" width="3" height="10" fill="#E7E7E7" opacity="0.9"></rect>170        <rect x="12" y="8" width="3" height="14" fill="#E7E7E7" opacity="0.8"></rect>171        <rect x="17" y="4" width="3" height="18" fill="#E7E7E7" opacity="0.7"></rect>172      </svg>173      <!-- WiFi -->174      <svg class="icon" viewBox="0 0 24 24">175        <path d="M2 8c5-4 15-4 20 0" stroke="#E7E7E7" stroke-width="2" fill="none"></path>176        <path d="M5 12c4-3 10-3 14 0" stroke="#E7E7E7" stroke-width="2" fill="none"></path>177        <path d="M9 16c2-2 4-2 6 0" stroke="#E7E7E7" stroke-width="2" fill="none"></path>178        <circle cx="12" cy="19" r="2" fill="#E7E7E7"></circle>179      </svg>180      <!-- Battery -->181      <svg class="icon" viewBox="0 0 30 24">182        <rect x="2" y="4" width="22" height="16" stroke="#E7E7E7" fill="none" stroke-width="2"></rect>183        <rect x="4" y="6" width="16" height="12" fill="#E7E7E7"></rect>184        <rect x="24" y="8" width="4" height="8" fill="#E7E7E7"></rect>185      </svg>186    </div>187  </div>188 189  <!-- App bar -->190  <div class="app-bar">191    <div class="app-left">192      <!-- Back arrow -->193      <svg class="icon" viewBox="0 0 24 24">194        <path d="M15 4 L7 12 L15 20" stroke="#E7E7E7" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>195      </svg>196    </div>197    <div class="app-right">198      <!-- Paperclip -->199      <svg class="icon" viewBox="0 0 24 24">200        <path d="M7 12l7-7a4 4 0 1 1 6 6l-9 9a6 6 0 0 1-8-8l8-8" stroke="#E7E7E7" stroke-width="2" fill="none" stroke-linecap="round"></path>201      </svg>202      <!-- Send -->203      <svg class="icon" viewBox="0 0 24 24">204        <path d="M2 12 L22 4 L15 12 L22 20 Z" fill="#E7E7E7"></path>205      </svg>206      <!-- More (kebab) -->207      <svg class="icon" viewBox="0 0 24 24">208        <circle cx="12" cy="5" r="2.5" fill="#E7E7E7"></circle>209        <circle cx="12" cy="12" r="2.5" fill="#E7E7E7"></circle>210        <circle cx="12" cy="19" r="2.5" fill="#E7E7E7"></circle>211      </svg>212    </div>213  </div>214 215  <!-- Form -->216  <div class="form">217    <div class="row">218      <div class="label">From</div>219      <div class="value">levivanloon93@gmail.com</div>220    </div>221    <div class="row">222      <div class="label">To</div>223      <div class="value placeholder"></div>224      <svg class="dropdown" viewBox="0 0 24 24">225        <path d="M6 9 L12 15 L18 9" stroke="#9EA6AD" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>226      </svg>227    </div>228    <div class="row">229      <div class="label">Subject</div>230      <div class="value