GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Email Compose 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;10    position: relative; overflow: hidden;11    background: #1b160f; color: #e9ddcc;12  }13  .status-bar {14    height: 110px; padding: 0 36px;15    display: flex; align-items: center; justify-content: space-between;16    color: #ffffff;17  }18  .status-left { font-size: 42px; font-weight: 600; letter-spacing: 0.5px; }19  .status-right { display: flex; align-items: center; gap: 26px; }20  .icon { width: 40px; height: 40px; fill: none; stroke: #ffffff; stroke-width: 3; }21  .app-bar {22    height: 120px; padding: 0 24px 0 16px;23    display: flex; align-items: center; justify-content: space-between;24  }25  .app-left { display: flex; align-items: center; gap: 16px; }26  .app-right { display: flex; align-items: center; gap: 40px; }27  .accent { stroke: #f0b39c; fill: #f0b39c; }28  .section { padding: 0 36px; }29  .row {30    display: flex; align-items: center; justify-content: space-between;31    padding: 22px 0; border-bottom: 1px solid #3a3026;32    color: #b7ad9c;33    font-size: 34px;34  }35  .row .label { color: #b7ad9c; min-width: 140px; }36  .row .value { color: #e9ddcc; font-size: 36px; }37  .dropdown { width: 32px; height: 32px; margin-left: 10px; }38  .to-row { padding: 26px 0; border-bottom: 1px solid #3a3026; }39  .to-label { color: #b7ad9c; font-size: 34px; }40  .pill {41    margin-left: 12px;42    border: 2px solid #8b7c68; border-radius: 40px;43    padding: 12px 22px; display: flex; align-items: center; gap: 18px;44    color: #e9ddcc; font-size: 34px;45  }46  .avatar {47    width: 64px; height: 64px; border-radius: 50%;48    background: #1aa6a6; color: #ffffff;49    display: flex; align-items: center; justify-content: center;50    font-weight: 700; font-size: 36px;51    border: 2px solid #0f7e7e;52  }53  .caret-line { height: 80px; display: flex; align-items: flex-start; }54  .caret {55    width: 4px; height: 44px; background: #e8a26f; margin-left: 160px; border-radius: 2px;56  }57  .subject { padding: 26px 36px; font-size: 38px; color: #a89c88; border-bottom: 1px solid #3a3026; }58  .body-placeholder { padding: 24px 36px; font-size: 46px; color: #b9ad9a; }59  .attachment {60    margin: 40px 36px 0 36px; background: #7c4427; border-radius: 18px;61    padding: 26px; display: flex; align-items: center; justify-content: space-between;62  }63  .file-left { display: flex; align-items: center; gap: 24px; }64  .file-icon {65    width: 86px; height: 86px; border-radius: 10px; background: #d77b44;66    color: #3a1e12; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 44px;67  }68  .file-info { color: #f4e7d8; }69  .file-name { font-size: 40px; margin-bottom: 8px; }70  .file-size { font-size: 30px; color: #e0cfba; }71  .close-x {72    width: 56px; height: 56px; border-radius: 50%;73    display: flex; align-items: center; justify-content: center;74  }75  .close-x svg { width: 36px; height: 36px; stroke: #f4d1c1; stroke-width: 4; }76  /* Keyboard mock */77  .keyboard {78    position: absolute; left: 0; bottom: 72px;79    width: 100%; height: 800px; background: #1c1610; border-top: 1px solid #332a22;80    padding: 24px 26px; box-sizing: border-box;81  }82  .kb-row { display: flex; gap: 18px; justify-content: center; margin-bottom: 22px; }83  .key {84    background: #2a231c; color: #efe3cf; font-size: 40px;85    border-radius: 16px; min-width: 84px; height: 110px; display: flex; align-items: center; justify-content: center;86    box-shadow: inset 0 0 0 1px #3c3229;87  }88  .key.wide { min-width: 160px; }89  .key.circle {90    border-radius: 999px; width: 140px; min-width: 140px;91    height: 140px; background: #f0b39c; color: #2a231c; font-weight: 700;92  }93  .home-indicator {94    position: absolute; left: 50%; transform: translateX(-50%);95    bottom: 18px; width: 320px; height: 8px; background: #e9e9e9; border-radius: 8px; opacity: 0.7;96  }97  /* Small helpers */98  .tiny-icon { width: 36px; height: 36px; }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div class="status-left">9:19</div>107    <div class="status-right">108      <!-- Simple cloud icon -->109      <svg class="icon" viewBox="0 0 24 24">110        <path d="M7 15h9a4 4 0 0 0 0-8c-.5-3-4-5-7-3a5 5 0 0 0-5 6" stroke="#ffffff" fill="none"/>111      </svg>112      <!-- Wi-Fi -->113      <svg class="icon" viewBox="0 0 24 24">114        <path d="M2 9c8-6 12-6 20 0" />115        <path d="M6 13c5-4 7-4 12 0" />116        <circle cx="12" cy="17" r="2" />117      </svg>118      <!-- Battery -->119      <svg class="icon" viewBox="0 0 24 24">120        <rect x="2" y="6" width="18" height="12" rx="2" />121        <rect x="20" y="10" width="2" height="4" />122      </svg>123    </div>124  </div>125 126  <!-- App bar -->127  <div class="app-bar section">128    <div class="app-left">129      <!-- Back arrow -->130      <svg class="icon accent" viewBox="0 0 24 24">131        <path d="M15 5l-8 7 8 7" />132      </svg>133    </div>134    <div class="app-right">135      <!-- Paperclip -->136      <svg class="icon accent" viewBox="0 0 24 24">137        <path d="M7 12l6-6a4 4 0 0 1 6 6l-8 8a5 5 0 0 1-7-7l7-7" />138      </svg>139      <!-- Send -->140      <svg class="icon accent" viewBox="0 0 24 24">141        <path d="M3 12l18-9-6 9 6 9-18-9z" fill="#f0b39c" stroke="none"/>142      </svg>143      <!-- More (kebab) -->144      <svg class="icon accent" viewBox="0 0 24 24">145        <circle cx="12" cy="5" r="2" />146        <circle cx="12" cy="12" r="2" />147        <circle cx="12" cy="19" r="2" />148      </svg>149    </div>150  </div>151 152  <!-- From row -->153  <div class="section">154    <div class="row">155      <div class="label">From</div>156      <div class="value" style="display:flex; align-items:center; gap:10px;">157        dbwscratch.test.id10@gmail.com158        <svg class="dropdown tiny-icon" viewBox="0 0 24 24">159          <path d="M6 9l6 6 6-6" stroke="#b7ad9c" stroke-width="3" fill="none"/>160        </svg>161      </div>162    </div>163  </div>164 165  <!-- To row with pill -->166  <div class="section to-row">167    <div style="display:flex; align-items:center; justify-content:space-between;">168      <div class="to-label">To</div>169      <div style="display:flex; align-items:center;">170        <div class="pill">171          <div class="avatar">n</div>172          <div>naomi.rousseau@example.com</div>173        </div>174        <svg class="dropdown tiny-icon" viewBox="0 0 24 24">175          <path d="M6 9l6 6 6-6" stroke="#b7ad9c" stroke-width="3" fill="none"/>176        </svg>177      </div>178    </div>179  </div>180 181  <!-- Caret after To -->182  <div class="section caret-line">183    <div class="caret"><