GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Gmail Compose Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #F6F6F8;13  }14  /* Status bar */15  .status-bar {16    position: absolute;17    top: 0;18    left: 0;19    width: 1080px;20    height: 90px;21    background: #FFFFFF;22    display: flex;23    align-items: center;24    padding: 0 32px;25    box-sizing: border-box;26  }27  .status-left {28    font-size: 34px;29    color: #2E2E2E;30    font-weight: 600;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 22px;37  }38  /* App bar */39  .app-bar {40    position: absolute;41    top: 90px;42    left: 0;43    width: 1080px;44    height: 110px;45    background: #FFFFFF;46    display: flex;47    align-items: center;48    padding: 0 28px;49    box-sizing: border-box;50    border-bottom: 1px solid #E5E5E7;51  }52  .back-btn {53    width: 64px;54    height: 64px;55    display: flex;56    align-items: center;57    justify-content: center;58    margin-right: 18px;59  }60  .actions {61    margin-left: auto;62    display: flex;63    align-items: center;64    gap: 42px;65  }66  /* Content area */67  .content {68    position: absolute;69    top: 200px;70    left: 0;71    width: 100%;72    padding: 34px 36px;73    box-sizing: border-box;74    color: #222;75  }76  .field {77    display: flex;78    align-items: center;79    padding: 30px 0;80  }81  .label {82    width: 140px;83    color: #666;84    font-size: 32px;85  }86  .value {87    flex: 1;88    font-size: 34px;89    color: #111;90  }91  .placeholder {92    color: #8E8E8E;93  }94  .chevron {95    width: 44px;96    height: 44px;97    margin-left: 16px;98  }99  .body-text {100    margin-top: 26px;101    font-size: 40px;102    line-height: 1.5;103    color: #222;104  }105  .link {106    color: #1a73e8;107    text-decoration: none;108  }109  /* Attachment chip */110  .attachment {111    margin-top: 54px;112    width: calc(100% - 72px);113    height: 180px;114    background: #F7DDE3;115    border-radius: 18px;116    display: flex;117    align-items: center;118    padding: 26px 28px;119    box-sizing: border-box;120  }121  .pdf-badge {122    width: 84px;123    height: 84px;124    border-radius: 12px;125    background: #E74C3C;126    color: #fff;127    font-weight: 700;128    display: flex;129    align-items: center;130    justify-content: center;131    margin-right: 28px;132    letter-spacing: 1px;133  }134  .att-info {135    flex: 1;136  }137  .att-title {138    font-size: 40px;139    color: #1f1f1f;140  }141  .att-sub {142    margin-top: 8px;143    font-size: 30px;144    color: #6f6f6f;145  }146  .att-close {147    width: 56px;148    height: 56px;149    margin-left: 18px;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status Bar -->157  <div class="status-bar">158    <div class="status-left">12:04</div>159    <div class="status-right">160      <!-- small icons -->161      <svg width="34" height="34" viewBox="0 0 24 24">162        <circle cx="12" cy="12" r="5" fill="#8E8E8E"></circle>163      </svg>164      <svg width="34" height="34" viewBox="0 0 24 24">165        <path d="M2 16c4-6 16-6 20 0" stroke="#8E8E8E" stroke-width="2" fill="none" stroke-linecap="round"/>166        <path d="M6 16c3-4 9-4 12 0" stroke="#8E8E8E" stroke-width="2" fill="none" stroke-linecap="round"/>167      </svg>168      <svg width="34" height="34" viewBox="0 0 24 24">169        <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#8E8E8E" stroke-width="2"/>170        <rect x="5" y="8" width="14" height="8" fill="#8E8E8E"/>171      </svg>172    </div>173  </div>174 175  <!-- App Bar -->176  <div class="app-bar">177    <div class="back-btn">178      <svg width="44" height="44" viewBox="0 0 24 24">179        <path d="M15 6l-6 6 6 6" stroke="#2E2E2E" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>180      </svg>181    </div>182    <div class="actions">183      <!-- paperclip -->184      <svg width="48" height="48" viewBox="0 0 24 24">185        <path d="M7 13l7-7a4 4 0 115.7 5.7L10.7 18.7a6 6 0 11-8.5-8.5L12 1" stroke="#4A4A4A" stroke-width="2" fill="none" stroke-linecap="round"/>186      </svg>187      <!-- send -->188      <svg width="48" height="48" viewBox="0 0 24 24">189        <path d="M3 20l18-8L3 4l3 7 9 1-9 1-3 7z" fill="#4A4A4A"/>190      </svg>191      <!-- more -->192      <svg width="48" height="48" viewBox="0 0 24 24">193        <circle cx="12" cy="5" r="2.2" fill="#4A4A4A"></circle>194        <circle cx="12" cy="12" r="2.2" fill="#4A4A4A"></circle>195        <circle cx="12" cy="19" r="2.2" fill="#4A4A4A"></circle>196      </svg>197    </div>198  </div>199 200  <!-- Content -->201  <div class="content">202    <!-- From row -->203    <div class="field">204      <div class="label">From</div>205      <div class="value">natalie.larson1998@gmail.com</div>206      <svg class="chevron" viewBox="0 0 24 24">207        <path d="M6 9l6 6 6-6" stroke="#7A7A7A" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>208      </svg>209    </div>210 211    <!-- To row -->212    <div class="field">213      <div class="label">To</div>214      <div class="value placeholder">|</div>215      <svg class="chevron" viewBox="0 0 24 24">216        <path d="M6 9l6 6 6-6" stroke="#7A7A7A" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217      </svg>218    </div>219 220    <!-- Body text -->221    <div class="body-text">222      I am sharing "Into-the-Wild-Jon-Krakauer.pdf" with you from WPS Office223      <br><br>224      Please check the attachment225      <br><br>226      Get WPS Office for PC:227      <a class="link" href="#">https://www.wps.com/d/?from=t</a>228    </div>229 230    <!-- Attachment chip -->231    <div class="attachment">232      <div class="pdf-badge">PDF</div>233      <div class="att-info">234        <div class="att-title">Into-the-Wild-Jon-Krakauer.pdf</div>235        <div class="att-sub">1.9 MB</div>236      </div>237      <svg class="att-close" viewBox="0 0 24 24">238        <path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="2.6" stroke-linecap="round"/>239      </svg>240    </div>241 242  </div>243 244</div>245</body>246</html>