GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Email Compose Dark UI Mock</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: #0F110C; /* deep olive black */14    border-radius: 30px;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 18px;21    left: 0;22    right: 0;23    height: 96px;24    padding: 0 40px;25    display: flex;26    align-items: center;27    color: #F2F2EA;28    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;29    font-size: 44px;30    font-weight: 600;31  }32  .status-left { flex: 1; }33  .status-right {34    display: flex;35    align-items: center;36    gap: 30px;37  }38  .status-icon svg { display: block; }39 40  /* Action icons row (attach, send, more) */41  .action-icons {42    position: absolute;43    top: 170px;44    right: 40px;45    display: flex;46    gap: 56px;47    align-items: center;48  }49  .action-icons svg {50    width: 60px;51    height: 60px;52    fill: none;53    stroke: #DADBCF;54    stroke-width: 6;55  }56 57  /* Content fields */58  .content {59    position: absolute;60    top: 260px;61    left: 0;62    right: 0;63    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;64    color: #B9BCB0;65  }66  .row {67    display: flex;68    align-items: center;69    height: 170px;70    padding: 0 40px;71    border-top: 1px solid #24261F;72    border-bottom: 1px solid #24261F;73    font-size: 54px;74    letter-spacing: 0.2px;75  }76  .row .label {77    width: 140px;78    color: #B9BCB0;79  }80 81  .to-row { border-top: none; }82  .subject-row { }83 84  /* Recipient pill */85  .to-pill {86    flex: 1;87    display: flex;88    align-items: center;89    height: 104px;90    border-radius: 52px;91    border: 2px solid #8E9382;92    padding: 0 24px;93    margin-left: 20px;94    color: #E7E7DA;95    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);96  }97  .avatar {98    width: 72px;99    height: 72px;100    border-radius: 36px;101    background: #F0D26A;102    display: flex;103    align-items: center;104    justify-content: center;105    margin-right: 20px;106    box-shadow: 0 0 0 3px rgba(255,255,255,0.06);107  }108  .avatar svg { width: 40px; height: 40px; fill: #4A4A2F; }109 110  .chevron {111    width: 44px;112    height: 44px;113    margin-left: 16px;114  }115  .chevron path { stroke: #C8C9BC; stroke-width: 6; fill: none; }116 117  /* Bottom gesture bar */118  .gesture {119    position: absolute;120    bottom: 38px;121    left: 50%;122    transform: translateX(-50%);123    width: 420px;124    height: 14px;125    background: #EDEDEA;126    border-radius: 8px;127    opacity: 0.96;128  }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar -->135  <div class="status-bar">136    <div class="status-left">7:35</div>137    <div class="status-right">138      <!-- Small status icons (simplified) -->139      <div class="status-icon">140        <!-- Calm icon (tiny dot) -->141        <svg width="20" height="20"><circle cx="10" cy="10" r="4" fill="#DADBCF"/></svg>142      </div>143      <div class="status-icon">144        <!-- Cloud icon -->145        <svg width="34" height="24" viewBox="0 0 34 24">146          <path d="M6 16c0-4 3-7 7-7 2-4 8-4 10 0 3 0 5 2 5 5s-2 6-6 6H12c-4 0-6-2-6-4z" fill="#DADBCF"/>147        </svg>148      </div>149      <div class="status-icon">150        <!-- Dot separator -->151        <svg width="10" height="10"><circle cx="5" cy="5" r="3" fill="#DADBCF"/></svg>152      </div>153      <div class="status-icon">154        <!-- Wi-Fi -->155        <svg width="40" height="26" viewBox="0 0 40 26">156          <path d="M4 8c8-8 24-8 32 0" stroke="#DADBCF" stroke-width="3" fill="none"/>157          <path d="M9 13c6-6 16-6 22 0" stroke="#DADBCF" stroke-width="3" fill="none"/>158          <path d="M16 18c3-3 5-3 8 0" stroke="#DADBCF" stroke-width="3" fill="none"/>159          <circle cx="20" cy="22" r="2.5" fill="#DADBCF"/>160        </svg>161      </div>162      <div class="status-icon">163        <!-- Battery -->164        <svg width="50" height="26" viewBox="0 0 50 26">165          <rect x="2" y="4" width="40" height="18" rx="3" ry="3" fill="none" stroke="#DADBCF" stroke-width="3"/>166          <rect x="5" y="7" width="34" height="12" rx="2" fill="#DADBCF"/>167          <rect x="44" y="8" width="6" height="10" rx="2" fill="#DADBCF"/>168        </svg>169      </div>170    </div>171  </div>172 173  <!-- Action icons -->174  <div class="action-icons">175    <!-- Paperclip -->176    <svg viewBox="0 0 24 24">177      <path d="M8 12l6-6a4 4 0 015 5l-8 8a6 6 0 01-9-9l7-7" />178    </svg>179    <!-- Send (triangle) -->180    <svg viewBox="0 0 24 24">181      <path d="M3 12l18-9-6 9 6 9-18-9z" />182    </svg>183    <!-- More (vertical dots) -->184    <svg viewBox="0 0 24 24">185      <circle cx="12" cy="4" r="2.5" fill="#DADBCF"/>186      <circle cx="12" cy="12" r="2.5" fill="#DADBCF"/>187      <circle cx="12" cy="20" r="2.5" fill="#DADBCF"/>188    </svg>189  </div>190 191  <!-- Content fields -->192  <div class="content">193    <div class="row from-row">194      <span class="label">From</span>195    </div>196 197    <div class="row to-row">198      <span class="label">To</span>199      <div class="to-pill">200        <div class="avatar">201          <!-- simple user icon -->202          <svg viewBox="0 0 24 24">203            <circle cx="12" cy="8" r="5" />204            <path d="M3 21c2-5 7-7 9-7s7 2 9 7" fill="none" stroke="#4A4A2F" stroke-width="2"/>205          </svg>206        </div>207        <span>info-hi@cookpad.com</span>208      </div>209      <svg class="chevron viewBoxFix" viewBox="0 0 24 24">210        <path d="M6 9l6 6 6-6" />211      </svg>212    </div>213 214    <div class="row subject-row">215      <span class="label">Subject</span>216    </div>217  </div>218 219  <!-- Bottom gesture bar -->220  <div class="gesture"></div>221</div>222</body>223</html>