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>Sample letter screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F3F5FA;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;16    color: #1f2430;17  }18 19  /* Top bars */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 120px;26    background: #000;27  }28 29  .header {30    position: absolute;31    top: 120px;32    left: 0;33    right: 0;34    height: 190px;35    display: flex;36    align-items: center;37    justify-content: center;38    background: #F3F5FA;39  }40 41  .header h1 {42    font-size: 46px;43    letter-spacing: 0.2px;44    margin: 0;45    color: #3A3F4C;46    font-weight: 700;47  }48 49  .back-btn {50    position: absolute;51    left: 28px;52    top: 50%;53    transform: translateY(-50%);54    width: 96px;55    height: 96px;56    border-radius: 48px;57    display: flex;58    align-items: center;59    justify-content: center;60  }61 62  .page-count {63    position: absolute;64    right: 32px;65    top: 50%;66    transform: translateY(-50%);67    font-size: 40px;68    color: #3C4152;69    font-weight: 700;70  }71 72  /* Document card */73  .doc-card {74    position: absolute;75    left: 28px;76    right: 28px;77    top: 330px;78    height: 1680px;79    background: #ffffff;80    border-radius: 10px;81    box-shadow: 0 6px 18px rgba(0,0,0,0.06);82    padding: 64px 56px;83  }84 85  .doc-card p {86    margin: 22px 0;87    font-size: 30px;88    line-height: 1.6;89    color: #2B2F3A;90  }91 92  .doc-muted {93    color: #6B7280;94  }95  .doc-strong {96    font-weight: 700;97  }98 99  .spacer-xxl { height: 36px; }100 101  /* Ad banner */102  .ad-banner {103    position: absolute;104    left: 0;105    right: 0;106    bottom: 120px;107    height: 230px;108    background: #ffffff;109    border-top: 1px solid #e7e9ef;110    box-shadow: 0 -6px 16px rgba(0,0,0,0.08);111    display: flex;112    align-items: center;113    padding: 22px 28px;114  }115  .ad-controls {116    width: 58px;117    display: flex;118    flex-direction: column;119    align-items: center;120    gap: 14px;121  }122  .ad-controls .circle {123    width: 32px; height: 32px; border-radius: 16px; border: 2px solid #9aa0a6; color: #9aa0a6;124    display: flex; align-items: center; justify-content: center; font-size: 20px;125  }126  .ad-controls .x {127    width: 26px; height: 26px; color: #82b1ff; font-weight: 700; font-size: 26px; line-height: 24px;128  }129 130  .ad-logo {131    width: 112px;132    height: 112px;133    margin: 0 26px;134    background: #E0E0E0;135    border: 1px solid #BDBDBD;136    display: flex;137    justify-content: center;138    align-items: center;139    color: #757575;140    font-size: 22px;141  }142 143  .ad-text {144    flex: 1;145  }146  .ad-title {147    font-size: 40px;148    font-weight: 700;149    color: #2a2d38;150    margin-bottom: 8px;151  }152  .ad-sub {153    font-size: 34px;154    color: #2a64ff;155    font-weight: 700;156  }157 158  .ad-cta {159    width: 120px;160    height: 120px;161    border-radius: 24px;162    background: #3478F6;163    display: flex;164    align-items: center;165    justify-content: center;166    margin-left: 18px;167  }168 169  /* Bottom system bar with home indicator */170  .bottom-bar {171    position: absolute;172    left: 0; right: 0; bottom: 0;173    height: 120px;174    background: #000;175  }176  .home-indicator {177    position: absolute;178    bottom: 44px;179    left: 50%;180    transform: translateX(-50%);181    width: 300px;182    height: 10px;183    border-radius: 10px;184    background: #C7CCD6;185    opacity: 0.9;186  }187 188  /* Utility */189  .img-placeholder {190    width: 100%;191    height: 160px;192    background: #E0E0E0;193    border: 1px solid #BDBDBD;194    display: flex;195    align-items: center;196    justify-content: center;197    color: #757575;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <div class="status-bar"></div>205 206  <div class="header">207    <div class="back-btn" aria-label="Back">208      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">209        <path d="M14.7 5.3a1 1 0 0 1 0 1.4L10.4 11l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z" fill="#424756"/>210      </svg>211    </div>212    <h1>Sample letter 1691230553938</h1>213    <div class="page-count">1-1</div>214  </div>215 216  <div class="doc-card">217    <p class="doc-strong">[NAME OF ADDRESSEE]</p>218    <p class="doc-strong">[JOB TITLE]</p>219    <p class="doc-strong">[NAME OF COMPANY]</p>220    <p class="doc-strong">[COMPANY ADDRESS]</p>221    <p class="doc-strong">[DATE]</p>222 223    <div class="spacer-xxl"></div>224 225    <p>Dear <span class="doc-strong">[Sir/ Madam]</span>,</p>226 227    <p class="doc-muted">228      I am writing to you to file a complaint about the service that I was treated to in your hotel last229      December 12, 2007.230    </p>231 232    <p class="doc-strong">[Include the account of the events that happened and why you are making a complaint].</p>233 234    <p class="doc-muted">235      Furthermore, I have included in this letter some documents which will support the claim that I am making.236    </p>237 238    <p class="doc-muted">239      In conclusion, I wish that this matter will be settled as everything that transpired has caused a great240      deal of stress and hassle on my part.241    </p>242 243    <p class="doc-muted">I look forward to hearing from you regarding this matter soon.</p>244 245    <div class="spacer-xxl"></div>246 247    <p>Sincerely,</p>248 249    <div class="spacer-xxl"></div>250 251    <p class="doc-strong">[NAME OF CUSTOMER]</p>252    <p class="doc-strong">[CONTACT DETAILS]</p>253  </div>254 255  <div class="ad-banner">256    <div class="ad-controls">257      <div class="circle">i</div>258      <div class="x">×</div>259    </div>260    <div class="ad-logo">[IMG: Logo]</div>261    <div class="ad-text">262      <div class="ad-title">Trendy Cricket Shop -MGF Mall</div>263      <div class="ad-sub">S. G. FLAGSHIP STORE</div>264    </div>265    <div class="ad-cta" aria-label="Open ad">266      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">267        <path d="M8 5l8 7-8 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>268      </svg>269    </div>270  </div>271 272  <div class="bottom-bar"></div>273  <div class="home-indicator"></div>274</div>275</body>276</html>