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>Letter writing</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Top system bar */23  .status-bar {24    height: 120px;25    background: #000;26    width: 100%;27  }28 29  /* Header */30  .header {31    position: relative;32    height: 170px;33    background: #fff;34    display: flex;35    align-items: center;36    justify-content: center;37    color: #3F3A4A;38    font-weight: 700;39    font-size: 56px;40  }41  .back-btn {42    position: absolute;43    left: 36px;44    top: 50%;45    transform: translateY(-50%);46    width: 80px;47    height: 80px;48    display: flex;49    align-items: center;50    justify-content: center;51    color: #3F3A4A;52  }53  .back-btn svg { width: 44px; height: 44px; }54 55  /* Grid */56  .content {57    position: absolute;58    top: 290px; /* below status bar + header */59    left: 0;60    right: 0;61    bottom: 300px; /* make room for ad + home bar */62    padding: 30px 48px 40px 48px;63    overflow: hidden;64  }65  .grid {66    display: flex;67    flex-wrap: wrap;68    column-gap: 48px;69    row-gap: 56px;70    padding: 10px 12px;71  }72  .card {73    width: 468px;74    height: 250px;75    background: #FFFFFF;76    border-radius: 28px;77    box-shadow: 0 12px 30px rgba(0, 140, 255, 0.12);78    display: flex;79    flex-direction: column;80    align-items: center;81    justify-content: center;82  }83  .card-label {84    margin-top: 26px;85    font-size: 36px;86    color: #4B4656;87  }88 89  .doc-icon {90    width: 84px;91    height: 84px;92  }93  .doc-icon svg {94    width: 100%;95    height: 100%;96    stroke: #3F3A4A;97    fill: none;98    stroke-width: 10;99    stroke-linecap: round;100    stroke-linejoin: round;101  }102 103  /* Ad banner */104  .ad-banner {105    position: absolute;106    left: 0;107    right: 0;108    bottom: 90px;109    height: 220px;110    background: #F6F7F9;111    border-top: 1px solid #E2E5EA;112    display: flex;113    align-items: center;114    padding: 0 24px;115    box-sizing: border-box;116  }117  .ad-side {118    width: 120px;119    display: flex;120    flex-direction: column;121    align-items: center;122    gap: 12px;123  }124  .ad-body {125    flex: 1;126    padding: 0 16px;127  }128  .ad-title {129    font-size: 40px;130    color: #2F2B3A;131    margin-bottom: 10px;132    font-weight: 700;133  }134  .ad-sub {135    font-size: 34px;136    color: #2D66FF;137  }138  .ad-cta {139    width: 120px;140    height: 120px;141    border-radius: 16px;142    background: #3D7CFF;143    display: flex;144    align-items: center;145    justify-content: center;146    margin-left: 12px;147  }148  .ad-cta svg { width: 54px; height: 54px; stroke: #fff; fill: none; stroke-width: 10; }149 150  .ad-small {151    width: 38px;152    height: 38px;153    border-radius: 19px;154    border: 1px solid #BFC5D1;155    color: #6C7485;156    display: flex;157    align-items: center;158    justify-content: center;159    font-weight: 700;160    font-size: 24px;161    background: #fff;162  }163  .ad-close {164    width: 38px;165    height: 38px;166    border-radius: 19px;167    border: 1px solid #BFC5D1;168    color: #6C7485;169    display: flex;170    align-items: center;171    justify-content: center;172    font-weight: 700;173    font-size: 28px;174    background: #fff;175  }176 177  /* Home indicator */178  .home-indicator {179    position: absolute;180    bottom: 24px;181    left: 50%;182    transform: translateX(-50%);183    width: 240px;184    height: 12px;185    background: #C9CBD3;186    border-radius: 8px;187  }188</style>189</head>190<body>191<div id="render-target">192  <div class="status-bar"></div>193 194  <div class="header">195    <div class="back-btn" aria-label="Back">196      <svg viewBox="0 0 24 24">197        <path d="M14.5 5L7.5 12l7 7"/>198      </svg>199    </div>200    <div>Letter writing</div>201  </div>202 203  <div class="content">204    <div class="grid">205      <!-- Row 1 -->206      <div class="card">207        <div class="doc-icon">208          <svg viewBox="0 0 48 48">209            <path d="M14 6h18l6 6v26H14z"></path>210            <path d="M32 6v8h8"></path>211            <path d="M18 22h16M18 28h12M18 34h10"></path>212          </svg>213        </div>214        <div class="card-label">Plain Letter</div>215      </div>216      <div class="card">217        <div class="doc-icon">218          <svg viewBox="0 0 48 48">219            <path d="M14 6h18l6 6v26H14z"></path>220            <path d="M32 6v8h8"></path>221            <path d="M18 22h16M18 28h12M18 34h10"></path>222          </svg>223        </div>224        <div class="card-label">Offer Letter</div>225      </div>226 227      <!-- Row 2 -->228      <div class="card">229        <div class="doc-icon">230          <svg viewBox="0 0 48 48">231            <path d="M14 6h18l6 6v26H14z"></path>232            <path d="M32 6v8h8"></path>233            <path d="M18 22h16M18 28h12M18 34h10"></path>234          </svg>235        </div>236        <div class="card-label">Cover Letter</div>237      </div>238      <div class="card">239        <div class="doc-icon">240          <svg viewBox="0 0 48 48">241            <path d="M14 6h18l6 6v26H14z"></path>242            <path d="M32 6v8h8"></path>243            <path d="M18 22h16M18 28h12M18 34h10"></path>244          </svg>245        </div>246        <div class="card-label">Job Application Letter</div>247      </div>248 249      <!-- Row 3 -->250      <div class="card">251        <div class="doc-icon">252          <svg viewBox="0 0 48 48">253            <path d="M14 6h18l6 6v26H14z"></path>254            <path d="M32 6v8h8"></path>255            <path d="M18 22h16M18 28h12M18 34h10"></path>256          </svg>257        </div>258        <div class="card-label">Resignation Letter</div>259      </div>260      <div class="card">261        <div class="doc-icon">262          <svg viewBox="0 0 48 48">263            <path d="M14 6h18l6 6v26H14z"></path>264            <path d="M32 6v8h8"></path>265            <path d="M18 22h16M18 28h12M18 34h10"></path>266          </svg>267        </div>268        <div class="card-label">Complaint Letter</div>269      </div>270 271      <!-- Row 4 -->272      <div class="card">273        <div class="doc-icon">274          <svg viewBox="0 0 48 48">275            <path d="M14 6h18l6 6v26H14z"></path>276            <path d="M32 6v8h8"></path>277            <path d="M18 22h16M18 28h12M18 34h10"></path>278          </svg>279        </div>280        <div class="card-label">Application Letter</div>281      </div>282      <div class="card">283        <div class="doc-icon">284          <svg viewBox="0 0 48 48">285            <path d="M14 6h18l6 6v26H14z"></path>286            <path d="M32 6v8h8"></path>287            <path d="M18 22h16M18 28h12M18 34h10"></path>288          </svg>289        </div>290        <div class="card-label">Leave Letter</div>291      </div>292 293      <!-- Row 5 -->294      <div class="card">295        <div class="doc-icon">296          <svg viewBox="0 0 48 48">297            <path d="M14 6h18l6 6v26H14z"></path>298            <path d="M32 6v8h8"></path>299            <path d="M18 22h16M18 28h12M18 34h10"></path>300          </svg>301        </div>302        <div class="card-label">Recommendation Letter</div>303      </div>304      <div class="card">305        <div class="doc-icon">306          <svg viewBox="0 0 48 48">307            <path d="M14 6h18l6 6v26H14z"></path>308            <path d="M32 6v8h8"></path>309            <path d="M18 22h16M18 28h12M18 34h10"></path>310          </svg>311        </div>312        <div class="card-label">Donation Letter</div>313      </div>314    </div>315  </div>316 317  <!-- Ad banner -->318  <div class="ad-banner">319    <div class="ad-side">320      <div class="ad-small">i</div>321      <div class="ad-close">×</div>322    </div>323    <div class="ad-body">324      <div class="ad-title">Cricket Equipments at MGF Mall</div>325      <div class="ad-sub">S. G. FLAGSHIP STORE</div>326    </div>327    <div class="ad-cta" aria-label="Open ad">328      <svg viewBox="0 0 24 24">329        <path d="M8 5l8 7-8 7" />330      </svg>331    </div>332  </div>333 334  <div class="home-indicator"></div>335</div>336</body>337</html>