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 { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #0D0F08; color: #D7DAB9;11  }12 13  /* Status bar */14  .status-bar {15    height: 90px;16    padding: 0 40px;17    display: flex; align-items: center; justify-content: space-between;18    color: #D7DAB9; font-size: 36px;19  }20  .status-icons { display: flex; align-items: center; gap: 24px; }21  .status-dot { width: 16px; height: 16px; background: #D7DAB9; border-radius: 50%; opacity: 0.8; }22 23  /* Header */24  .compose-header {25    height: 140px;26    padding: 0 48px;27    display: flex; align-items: center; justify-content: space-between;28  }29  .header-left { display: flex; align-items: center; gap: 24px; }30  .header-right { display: flex; align-items: center; gap: 52px; }31  .icon-btn {32    width: 60px; height: 60px;33    display: inline-flex; align-items: center; justify-content: center;34    color: #D7DAB9;35  }36  .icon-btn svg { width: 60px; height: 60px; }37  .unicode-icon { font-size: 52px; line-height: 60px; color: #D7DAB9; }38 39  /* Form fields */40  .form-area { padding: 20px 60px 0 60px; }41  .field {42    padding: 36px 0 24px 0;43    border-bottom: 2px solid #2A2C22;44    display: flex; align-items: center; justify-content: space-between;45  }46  .label { font-size: 42px; color: #B8BB97; }47  .input-line {48    flex: 1; margin-left: 24px; height: 54px;49    border-bottom: 3px solid #3A3C2E;50  }51  .chevron svg { width: 48px; height: 48px; }52 53  /* Subject line */54  .subject { font-size: 48px; color: #B8BB97; padding: 40px 0; border-bottom: 2px solid #2A2C22; }55 56  /* Attachment card */57  .attachment-wrapper { padding: 80px 60px; }58  .attachment-card {59    width: 960px; background: #3E4429; border-radius: 20px;60    display: flex; align-items: center; justify-content: space-between;61    padding: 36px 40px;62    color: #E7EACD;63    box-shadow: 0 2px 0 rgba(0,0,0,0.2);64  }65  .attachment-left { display: flex; align-items: center; gap: 32px; }66  .pdf-badge {67    width: 100px; height: 100px; border-radius: 12px;68    background: #E84B3C; color: #fff; font-weight: bold;69    display: flex; align-items: center; justify-content: center; font-size: 36px;70  }71  .file-info { display: flex; flex-direction: column; }72  .file-name { font-size: 46px; }73  .file-size { font-size: 34px; color: #C8CBAB; margin-top: 6px; }74  .close-icon svg { width: 56px; height: 56px; }75 76  /* Bottom gesture bar */77  .gesture-bar {78    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);79    width: 360px; height: 14px; background: #FFFFFF; border-radius: 7px; opacity: 0.9;80  }81</style>82</head>83<body>84<div id="render-target">85 86  <!-- Status Bar -->87  <div class="status-bar">88    <div>2:18</div>89    <div class="status-icons">90      <div class="status-dot"></div>91      <div class="status-dot"></div>92      <div class="status-dot"></div>93      <div class="status-dot" style="width:24px;height:24px;border-radius:6px;"></div>94    </div>95  </div>96 97  <!-- Compose Header -->98  <div class="compose-header">99    <div class="header-left">100      <div class="icon-btn" aria-label="Back">101        <svg viewBox="0 0 24 24">102          <path d="M12 19L5 12L12 5" stroke="#D7DAB9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>103          <path d="M5 12H20" stroke="#D7DAB9" stroke-width="2" fill="none" stroke-linecap="round"/>104        </svg>105      </div>106    </div>107    <div class="header-right">108      <div class="unicode-icon" aria-label="Attach">📎</div>109      <div class="icon-btn" aria-label="Send">110        <svg viewBox="0 0 24 24">111          <path d="M3 12L21 6L16 21L12 14L3 12Z" fill="#D7DAB9"/>112        </svg>113      </div>114      <div class="icon-btn" aria-label="More">115        <svg viewBox="0 0 24 24">116          <circle cx="12" cy="5" r="2.2" fill="#D7DAB9"/>117          <circle cx="12" cy="12" r="2.2" fill="#D7DAB9"/>118          <circle cx="12" cy="19" r="2.2" fill="#D7DAB9"/>119        </svg>120      </div>121    </div>122  </div>123 124  <!-- Form Fields -->125  <div class="form-area">126    <div class="field">127      <div class="label">From</div>128      <div style="width: 48px;"></div>129    </div>130 131    <div class="field">132      <div class="label">To</div>133      <div class="input-line"></div>134      <div class="chevron">135        <svg viewBox="0 0 24 24">136          <path d="M6 9L12 15L18 9" stroke="#D7DAB9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>137        </svg>138      </div>139    </div>140 141    <div class="subject">Subject</div>142  </div>143 144  <!-- Attachment -->145  <div class="attachment-wrapper">146    <div class="attachment-card">147      <div class="attachment-left">148        <div class="pdf-badge">PDF</div>149        <div class="file-info">150          <div class="file-name">Report.pdf</div>151          <div class="file-size">22 KB</div>152        </div>153      </div>154      <div class="close-icon" aria-label="Remove">155        <svg viewBox="0 0 24 24">156          <path d="M5 5L19 19M19 5L5 19" stroke="#D7DAB9" stroke-width="2" stroke-linecap="round"/>157        </svg>158      </div>159    </div>160  </div>161 162  <!-- Bottom gesture bar -->163  <div class="gesture-bar"></div>164</div>165</body>166</html>