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>Complaint Letter UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9 10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #F4F6FA;16    font-family: Arial, Helvetica, sans-serif;17    color: #3C3946;18  }19 20  /* System bars */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 100%;26    height: 120px;27    background: #000;28  }29  .system-footer {30    position: absolute;31    bottom: 0;32    left: 0;33    width: 100%;34    height: 120px;35    background: #000;36  }37  .home-indicator {38    position: absolute;39    bottom: 38px;40    left: 50%;41    transform: translateX(-50%);42    width: 200px;43    height: 10px;44    background: #D9D9D9;45    border-radius: 6px;46  }47 48  /* Header */49  .header {50    position: relative;51    margin-top: 120px; /* below status bar */52    height: 220px;53  }54  .title {55    text-align: center;56    font-weight: 700;57    font-size: 56px;58    letter-spacing: 0.2px;59    margin: 60px 0 0 0;60    color: #3C3946;61  }62  .back-btn {63    position: absolute;64    left: 36px;65    top: 70px;66    width: 64px;67    height: 64px;68    background: transparent;69    border: none;70    padding: 0;71    cursor: default;72  }73  .back-btn svg { stroke: #3C3946; }74 75  /* List */76  .content {77    padding: 0 24px;78  }79  .card {80    background: #FFFFFF;81    border-radius: 12px;82    border: 1px solid #ECECEC;83    box-shadow: 0 1px 0 rgba(0,0,0,0.06);84    height: 170px;85    margin: 22px 0;86    display: flex;87    align-items: center;88    padding: 0 36px;89  }90  .doc-icon {91    width: 92px;92    height: 92px;93    margin-right: 32px;94    display: flex;95    align-items: center;96    justify-content: center;97  }98  .doc-icon svg {99    width: 80px;100    height: 80px;101    stroke: #3C3946;102    fill: none;103    stroke-width: 2.6;104    stroke-linecap: round;105    stroke-linejoin: round;106  }107  .card-text {108    font-size: 44px;109    color: #3C3946;110  }111 112  /* Ad banner placeholder */113  .ad-banner {114    position: absolute;115    left: 0;116    bottom: 120px; /* sit above system footer */117    width: 100%;118    height: 180px;119    background: #E0E0E0;120    border-top: 1px solid #BDBDBD;121    border-bottom: 1px solid #BDBDBD;122    display: flex;123    align-items: center;124    padding: 24px 32px;125    box-sizing: border-box;126    color: #757575;127  }128  .ad-text {129    font-size: 40px;130    line-height: 1.25;131  }132  .ad-sub {133    font-size: 36px;134    color: #3D7BFF;135    margin-top: 6px;136  }137  .ad-arrow {138    margin-left: auto;139    width: 60px;140    height: 60px;141    display: flex;142    align-items: center;143    justify-content: center;144  }145  .ad-arrow svg { fill: #3D7BFF; }146</style>147</head>148<body>149<div id="render-target">150  <div class="status-bar"></div>151 152  <div class="header">153    <button class="back-btn" aria-label="Back">154      <svg viewBox="0 0 24 24">155        <path d="M15 4L7 12l8 8"></path>156      </svg>157    </button>158    <div class="title">Complaint Letter</div>159  </div>160 161  <div class="content">162    <div class="card">163      <div class="doc-icon">164        <svg viewBox="0 0 24 24">165          <path d="M6 3h9l4 4v14H6z"></path>166          <path d="M15 3v5h4"></path>167          <path d="M9 10h6"></path>168          <path d="M9 13h6"></path>169          <path d="M9 16h6"></path>170        </svg>171      </div>172      <div class="card-text">Bad customer service</div>173    </div>174 175    <div class="card">176      <div class="doc-icon">177        <svg viewBox="0 0 24 24">178          <path d="M6 3h9l4 4v14H6z"></path>179          <path d="M15 3v5h4"></path>180          <path d="M9 10h6"></path>181          <path d="M9 13h6"></path>182          <path d="M9 16h6"></path>183        </svg>184      </div>185      <div class="card-text">Noise complaint</div>186    </div>187 188    <div class="card">189      <div class="doc-icon">190        <svg viewBox="0 0 24 24">191          <path d="M6 3h9l4 4v14H6z"></path>192          <path d="M15 3v5h4"></path>193          <path d="M9 10h6"></path>194          <path d="M9 13h6"></path>195          <path d="M9 16h6"></path>196        </svg>197      </div>198      <div class="card-text">About environmental pollution</div>199    </div>200  </div>201 202  <div class="ad-banner">203    <div>204      <div class="ad-text">[IMG: Ad banner - Cricket Shop in Gurugram]</div>205      <div class="ad-sub">S. G. FLAGSHIP STORE</div>206    </div>207    <div class="ad-arrow" aria-hidden="true">208      <svg viewBox="0 0 24 24">209        <path d="M8 5l8 7-8 7"></path>210      </svg>211    </div>212  </div>213 214  <div class="system-footer">215    <div class="home-indicator"></div>216  </div>217</div>218</body>219</html>