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: #F4F6FA;15    border-radius: 36px;16  }17 18  /* Top system bar (notch area) */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 130px;25    background: #000;26  }27 28  /* Header */29  .header {30    position: absolute;31    top: 130px;32    left: 0;33    width: 100%;34    height: 170px;35    display: flex;36    align-items: center;37    justify-content: center;38    box-sizing: border-box;39  }40  .header h1 {41    margin: 0;42    font-family: "Inter", "SF Pro Text", Arial, sans-serif;43    font-weight: 700;44    font-size: 44px;45    color: #2E2F33;46    letter-spacing: 0.2px;47  }48  .back-btn {49    position: absolute;50    left: 40px;51    top: 50%;52    transform: translateY(-50%);53    width: 64px;54    height: 64px;55    color: #4A4D57;56  }57  .page-count {58    position: absolute;59    right: 40px;60    top: 50%;61    transform: translateY(-50%);62    font-family: "Inter", "SF Pro Text", Arial, sans-serif;63    font-size: 36px;64    font-weight: 600;65    color: #3C3D43;66  }67 68  /* Document card */69  .doc-card {70    position: absolute;71    top: 330px;72    left: 30px;73    width: 1020px;74    height: 1870px;75    background: #FFFFFF;76    border-radius: 14px;77    box-shadow: 0 0 0 1px #E6E7EB inset;78    box-sizing: border-box;79    padding: 70px 70px;80  }81  .doc-card p,82  .doc-card .line {83    font-family: "Inter", "SF Pro Text", Arial, sans-serif;84    font-size: 32px;85    line-height: 48px;86    color: #3A3A3A;87    margin: 0 0 22px 0;88  }89  .doc-card .bold {90    font-weight: 700;91    color: #2F2F2F;92    letter-spacing: 0.2px;93  }94  .doc-card .muted {95    color: #64676F;96  }97 98  /* Bottom gesture area */99  .bottom-bar {100    position: absolute;101    left: 0;102    bottom: 0;103    width: 100%;104    height: 160px;105    background: #000;106  }107  .home-indicator {108    position: absolute;109    bottom: 50px;110    left: 50%;111    transform: translateX(-50%);112    width: 380px;113    height: 16px;114    background: #DDDEE2;115    border-radius: 10px;116  }117</style>118</head>119<body>120<div id="render-target">121  <div class="status-bar"></div>122 123  <div class="header">124    <svg class="back-btn" viewBox="0 0 64 64">125      <path d="M40 12 L20 32 L40 52" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>126    </svg>127    <h1>Sample letter 1691230553938</h1>128    <div class="page-count">1-1</div>129  </div>130 131  <div class="doc-card">132    <p class="bold">[NAME OF ADDRESSEE]</p>133    <p class="bold">[JOB TITLE]</p>134    <p class="bold">[NAME OF COMPANY]</p>135    <p class="bold">[COMPANY ADDRESS]</p>136    <p class="bold">[DATE]</p>137 138    <p>Dear <span class="bold">[Sir/ Madam]</span>,</p>139 140    <p class="muted">I am writing to you to file a complaint about the service that I was treated to in your hotel last December 12, 2007.</p>141 142    <p class="bold">[Include the account of the events that happened and why you are making a complaint].</p>143 144    <p class="muted">Furthermore, I have included in this letter some documents which will support the claim that I am making.</p>145 146    <p class="muted">In conclusion, I wish that this matter will be settled as everything that transpired has caused a great deal of stress and hassle on my part.</p>147 148    <p class="muted">I look forward to hearing from you regarding this matter soon.</p>149 150    <p class="muted" style="margin-top: 60px;">Sincerely,</p>151 152    <p class="bold" style="margin-top: 40px;">[NAME OF CUSTOMER]</p>153    <p class="bold">[CONTACT DETAILS]</p>154  </div>155 156  <div class="bottom-bar">157    <div class="home-indicator"></div>158  </div>159</div>160</body>161</html>