GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">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;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111317;14    color: #EDEDED;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #EDEDED;28    padding: 0 36px;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .icon {38    width: 48px;39    height: 48px;40    fill: none;41    stroke: #EDEDED;42    stroke-width: 3;43  }44  .icon-fill {45    width: 48px;46    height: 48px;47    fill: #EDEDED;48  }49 50  /* App bar */51  .app-bar {52    position: absolute;53    top: 90px;54    left: 0;55    width: 1080px;56    height: 120px;57    display: flex;58    align-items: center;59    padding: 0 32px;60    gap: 26px;61    color: #EDEDED;62  }63  .app-actions {64    margin-left: auto;65    display: flex;66    align-items: center;67    gap: 32px;68  }69 70  /* Fields */71  .content {72    position: absolute;73    top: 210px;74    left: 0;75    width: 1080px;76  }77  .field {78    display: flex;79    align-items: center;80    padding: 36px 40px;81    border-bottom: 1px solid #262A33;82  }83  .label {84    width: 140px;85    color: #9AA0A6;86    font-size: 40px;87  }88  .value {89    flex: 1;90    font-size: 42px;91    color: #EDEDED;92  }93  .value.bold { font-weight: 600; }94  .dropdown {95    display: flex;96    align-items: center;97    gap: 14px;98  }99  .caret {100    width: 40px;101    height: 40px;102  }103 104  /* Suggestion card */105  .suggestion {106    padding: 24px 40px 0 40px;107  }108  .suggestion-item {109    display: flex;110    align-items: center;111    gap: 26px;112    padding: 22px 0 30px 0;113    border-bottom: 1px solid #1E222A;114  }115  .avatar {116    width: 92px;117    height: 92px;118    border-radius: 46px;119    background: #5E3AC9;120    color: #FFFFFF;121    display: flex;122    align-items: center;123    justify-content: center;124    font-weight: 700;125    font-size: 44px;126    text-transform: lowercase;127  }128  .suggestion-text {129    display: flex;130    flex-direction: column;131  }132  .s-title {133    font-size: 44px;134    color: #EDEDED;135  }136  .s-sub {137    font-size: 34px;138    color: #B5BDC7;139    margin-top: 8px;140  }141 142  /* Bottom gesture bar */143  .gesture-bar {144    position: absolute;145    bottom: 36px;146    left: 50%;147    transform: translateX(-50%);148    width: 720px;149    height: 16px;150    background: #EDEDED;151    border-radius: 12px;152    opacity: 0.8;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div>7:55</div>162    <div class="status-right">163      <!-- Signal icon -->164      <svg class="icon" viewBox="0 0 48 48">165        <path d="M6 40h6M12 34h6M18 28h6M24 22h6M30 16h6" />166      </svg>167      <!-- Battery icon -->168      <svg class="icon" viewBox="0 0 48 48">169        <rect x="6" y="12" width="32" height="24" rx="4" />170        <rect x="40" y="18" width="4" height="12" rx="1" />171        <rect x="10" y="16" width="24" height="16" fill="#EDEDED" stroke="none"/>172      </svg>173    </div>174  </div>175 176  <!-- App Bar -->177  <div class="app-bar">178    <!-- Back arrow -->179    <svg class="icon" viewBox="0 0 48 48">180      <path d="M30 8 L12 24 L30 40" />181    </svg>182 183    <div class="app-actions">184      <!-- Attach icon (paperclip) -->185      <svg class="icon" viewBox="0 0 48 48">186        <path d="M16 30l12-12a6 6 0 1 1 8 8L22 38a10 10 0 1 1-14-14l16-16" />187      </svg>188      <!-- Send icon (paper plane) -->189      <svg class="icon" viewBox="0 0 48 48">190        <path d="M6 24 L42 8 L32 40 L24 28 L6 24 Z" />191      </svg>192      <!-- Overflow menu -->193      <svg class="icon-fill" viewBox="0 0 48 48">194        <circle cx="24" cy="10" r="4"/>195        <circle cx="24" cy="24" r="4"/>196        <circle cx="24" cy="38" r="4"/>197      </svg>198    </div>199  </div>200 201  <!-- Content -->202  <div class="content">203    <!-- From field -->204    <div class="field">205      <div class="label">From</div>206      <div class="value">dbwscratch.test.id23@gmail.com</div>207    </div>208 209    <!-- To field -->210    <div class="field">211      <div class="label">To</div>212      <div class="value dropdown">213        <span class="bold">giorgio.rossi196503@gmail.com</span>214        <svg class="caret" viewBox="0 0 24 24">215          <path d="M4 8 L12 16 L20 8" fill="#EDEDED"/>216        </svg>217      </div>218    </div>219 220    <!-- Suggestion dropdown -->221    <div class="suggestion">222      <div class="suggestion-item">223        <div class="avatar">g</div>224        <div class="suggestion-text">225          <div class="s-title">giorgio.rossi196503@gmail.com</div>226          <div class="s-sub">giorgio.rossi196503@gmail.com</div>227        </div>228      </div>229    </div>230  </div>231 232  <!-- Empty area (black background) below fields is represented by page background -->233 234  <!-- Bottom gesture bar -->235  <div class="gesture-bar"></div>236</div>237</body>238</html>