GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose Email Dark UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: linear-gradient(180deg, #0b0b0b 0%, #0a0a0a 70%, #0c0c0f 100%);19    color: #e6e6e6;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 96px;29    padding: 0 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #eaeaea;34    font-weight: 500;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .status-time {42    font-size: 42px;43    letter-spacing: 0.5px;44  }45  .status-right {46    display: flex;47    align-items: center;48    gap: 26px;49  }50  .status-icon svg {51    width: 36px;52    height: 36px;53    fill: #eaeaea;54    opacity: 0.9;55  }56 57  /* Top action icons (attach, send, menu) */58  .top-actions {59    position: absolute;60    top: 170px;61    right: 36px;62    display: flex;63    gap: 60px;64    align-items: center;65  }66  .top-actions svg {67    width: 60px;68    height: 60px;69    fill: none;70    stroke: #bfbfbf;71    stroke-width: 4;72    opacity: 0.85;73  }74  .dots svg {75    stroke: none;76    fill: #bfbfbf;77  }78 79  /* Fields */80  .fields {81    position: absolute;82    top: 250px;83    left: 0;84    width: 1080px;85  }86  .field {87    height: 190px;88    padding: 0 36px;89    display: flex;90    align-items: center;91    justify-content: space-between;92    border-top: 1px solid #1e1e1e;93    border-bottom: 1px solid #1a1a1a;94  }95  .label {96    color: #8e8e8e;97    font-size: 50px;98    letter-spacing: 0.3px;99  }100  .chevron {101    width: 44px;102    height: 44px;103    opacity: 0.8;104  }105 106  /* Gesture bar */107  .gesture {108    position: absolute;109    bottom: 48px;110    left: 50%;111    transform: translateX(-50%);112    width: 340px;113    height: 12px;114    background: #ffffff;115    border-radius: 8px;116    opacity: 0.9;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status Bar -->124  <div class="status-bar">125    <div class="status-left">126      <div class="status-time">6:08</div>127      <div class="status-icon">128        <!-- Small rounded square (notification) -->129        <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>130      </div>131      <div class="status-icon">132        <!-- Calm icon placeholder: simple wave -->133        <svg viewBox="0 0 24 24"><path d="M2 15c4-8 8 8 12 0 2-4 4 4 8 0" stroke-width="2" fill="none" stroke="#eaeaea"/></svg>134      </div>135      <div class="status-icon">136        <!-- Mail glyph -->137        <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7" fill="#0b0b0b"/></svg>138      </div>139      <div class="status-icon">140        <!-- Dot -->141        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>142      </div>143    </div>144    <div class="status-right">145      <div class="status-icon">146        <!-- Location -->147        <svg viewBox="0 0 24 24"><path d="M12 2c4 0 7 3 7 7 0 5-7 13-7 13S5 14 5 9c0-4 3-7 7-7z"/><circle cx="12" cy="9" r="3" fill="#0b0b0b"/></svg>148      </div>149      <div class="status-icon">150        <!-- Do not disturb (minus in circle) -->151        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><rect x="6" y="11" width="12" height="2" fill="#0b0b0b"/></svg>152      </div>153      <div class="status-icon">154        <!-- WiFi -->155        <svg viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0"/><circle cx="12" cy="18" r="1.5"/></svg>156      </div>157      <div class="status-icon">158        <!-- Battery -->159        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="22" height="12" rx="2"/><rect x="24" y="9" width="2" height="6"/><rect x="4" y="8" width="18" height="8" fill="#0b0b0b"/></svg>160      </div>161    </div>162  </div>163 164  <!-- Top action icons -->165  <div class="top-actions">166    <!-- Attachment -->167    <svg viewBox="0 0 24 24">168      <path d="M7 12l6-6a4 4 0 016 6l-7 7a5 5 0 01-7-7l8-8" />169    </svg>170    <!-- Send -->171    <svg viewBox="0 0 24 24">172      <path d="M3 12l18-8-6 8 6 8-18-8z" />173    </svg>174    <!-- More (vertical dots) -->175    <div class="dots">176      <svg viewBox="0 0 24 24">177        <circle cx="12" cy="5" r="2.5"/>178        <circle cx="12" cy="12" r="2.5"/>179        <circle cx="12" cy="19" r="2.5"/>180      </svg>181    </div>182  </div>183 184  <!-- Form fields -->185  <div class="fields">186    <div class="field">187      <div class="label">From</div>188    </div>189    <div class="field">190      <div class="label">To</div>191      <svg class="chevron" viewBox="0 0 24 24">192        <path d="M6 9l6 6 6-6" stroke="#bfbfbf" stroke-width="3" fill="none"/>193      </svg>194    </div>195    <div class="field">196      <div class="label" style="color:#9aa0a6;">Subject</div>197    </div>198  </div>199 200  <!-- Gesture bar -->201  <div class="gesture"></div>202</div>203</body>204</html>