GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Compose Email UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19    font-family: Roboto, Arial, sans-serif;20    color: #212121;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 96px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 32px;34    box-sizing: border-box;35    color: #2e2e2e;36    font-size: 36px;37    letter-spacing: 0.5px;38  }39  .status-left, .status-right {40    display: flex;41    align-items: center;42    gap: 16px;43  }44  .status-icon svg {45    width: 38px;46    height: 38px;47    fill: #707070;48    stroke: #707070;49  }50 51  /* App bar */52  .app-bar {53    position: absolute;54    top: 96px;55    left: 0;56    width: 100%;57    height: 160px;58    display: flex;59    align-items: center;60    padding: 0 24px;61    box-sizing: border-box;62    border-bottom: 1px solid #ECECEC;63  }64  .app-left {65    display: flex;66    align-items: center;67    gap: 24px;68  }69  .app-title {70    font-size: 54px;71    font-weight: 500;72    color: #222;73  }74  .app-right {75    margin-left: auto;76    display: flex;77    align-items: center;78    gap: 24px;79  }80  .icon-btn svg {81    width: 64px;82    height: 64px;83    fill: none;84    stroke: #424242;85    stroke-width: 3;86  }87  .icon-dots svg {88    width: 56px;89    height: 56px;90    fill: #424242;91    stroke: none;92  }93 94  /* Fields */95  .content {96    position: absolute;97    top: 256px; /* status + app bar */98    left: 0;99    width: 100%;100    box-sizing: border-box;101    padding: 0 32px;102  }103  .field {104    display: flex;105    align-items: center;106    padding: 24px 0;107    border-bottom: 1px solid #F0F0F0;108  }109  .field .label {110    min-width: 140px;111    color: #777;112    font-size: 34px;113  }114  .field .value {115    font-size: 36px;116    color: #222;117    flex: 1;118  }119  .chevron svg {120    width: 48px;121    height: 48px;122    stroke: #5f6368;123    stroke-width: 3.2;124    fill: none;125  }126 127  /* Contact suggestion */128  .contact-suggestion {129    display: flex;130    align-items: center;131    gap: 24px;132    padding: 28px 0;133  }134  .avatar {135    width: 96px;136    height: 96px;137    border-radius: 50%;138    background: #E0627E;139    color: #fff;140    display: flex;141    align-items: center;142    justify-content: center;143    font-size: 48px;144    font-weight: 500;145  }146  .contact-text .name {147    font-size: 40px;148    color: #222;149  }150  .contact-text .email {151    font-size: 32px;152    color: #757575;153    margin-top: 4px;154  }155 156  /* Gesture pill */157  .gesture {158    position: absolute;159    bottom: 36px;160    left: 50%;161    transform: translateX(-50%);162    width: 360px;163    height: 12px;164    background: #9E9E9E;165    border-radius: 8px;166    opacity: 0.9;167  }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Status bar -->174  <div class="status-bar">175    <div class="status-left">176      <div>1:16</div>177      <div class="status-icon">178        <!-- Cloud icon -->179        <svg viewBox="0 0 48 48">180          <path d="M16 30h18a7 7 0 0 0 0-14h-1a10 10 0 0 0-19-2 7 7 0 0 0 2 16z" />181        </svg>182      </div>183    </div>184    <div class="status-right">185      <!-- Wi-Fi icon -->186      <div class="status-icon">187        <svg viewBox="0 0 48 48">188          <path d="M6 18c10-8 26-8 36 0" stroke-width="3" fill="none"/>189          <path d="M12 24c7-6 17-6 24 0" stroke-width="3" fill="none"/>190          <path d="M18 30c4-3 8-3 12 0" stroke-width="3" fill="none"/>191          <circle cx="24" cy="36" r="2.8"/>192        </svg>193      </div>194      <!-- Battery icon -->195      <div class="status-icon">196        <svg viewBox="0 0 48 48">197          <rect x="6" y="12" width="32" height="24" rx="3" ry="3" fill="none"/>198          <rect x="40" y="18" width="4" height="12" rx="1" ry="1"/>199          <rect x="9" y="15" width="26" height="18" rx="2" ry="2"/>200        </svg>201      </div>202    </div>203  </div>204 205  <!-- App bar -->206  <div class="app-bar">207    <div class="app-left">208      <!-- Back arrow -->209      <div class="icon-btn">210        <svg viewBox="0 0 48 48">211          <path d="M28 10 L14 24 L28 38" stroke-linecap="round" stroke-linejoin="round"/>212        </svg>213      </div>214      <div class="app-title">Compose</div>215    </div>216    <div class="app-right">217      <!-- Attach (paperclip) -->218      <div class="icon-btn">219        <svg viewBox="0 0 48 48">220          <path d="M16 22v-6a8 8 0 1 1 16 0v14a10 10 0 0 1-20 0v-10" stroke-linecap="round" stroke-linejoin="round"/>221        </svg>222      </div>223      <!-- Send icon -->224      <div class="icon-btn">225        <svg viewBox="0 0 48 48">226          <path d="M6 24 L42 12 L32 24 L42 36 Z" stroke-linejoin="round"/>227        </svg>228      </div>229      <!-- More (vertical dots) -->230      <div class="icon-dots">231        <svg viewBox="0 0 48 48">232          <circle cx="24" cy="10" r="4"/>233          <circle cx="24" cy="24" r="4"/>234          <circle cx="24" cy="38" r="4"/>235        </svg>236      </div>237    </div>238  </div>239 240  <!-- Content fields -->241  <div class="content">242    <div class="field">243      <div class="label">From</div>244      <div class="value">dbwscratch.test.id8@gmail.com</div>245    </div>246 247    <div class="field" style="border-bottom: none;">248      <div class="label">To</div>249      <div class="value">akashgahlot@google.com</div>250      <div class="chevron">251        <svg viewBox="0 0 48 48">252          <path d="M10 18 L24 30 L38 18" stroke-linecap="round" stroke-linejoin="round"/>253        </svg>254      </div>255    </div>256 257    <!-- Contact suggestion -->258    <div class="contact-suggestion">259      <div class="avatar">a</div>260      <div class="contact-text">261        <div class="name">akashgahlot@google.com</div>262        <div class="email">akashgahlot@google.com</div>263      </div>264    </div>265  </div>266 267  <!-- Gesture bar -->268  <div class="gesture"></div>269 270</div>271</body>272</html>