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>Donation Letter UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #333744;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #F5F7FB;21  }22 23  /* Status bar (safe area) */24  .status-bar {25    height: 110px;26    background: #000;27    width: 100%;28  }29 30  /* Header */31  .appbar {32    height: 190px;33    background: #F2F4F8;34    position: relative;35    display: flex;36    align-items: center;37    justify-content: center;38    border-bottom: 1px solid #ECEFF5;39  }40  .back-btn {41    position: absolute;42    left: 36px;43    top: 50%;44    transform: translateY(-50%);45    width: 72px;46    height: 72px;47    display: flex;48    align-items: center;49    justify-content: center;50  }51  .title {52    font-weight: 800;53    font-size: 54px;54    color: #3C3F4A;55    letter-spacing: 0.2px;56  }57 58  /* Content list */59  .content {60    padding: 36px 24px 0 24px;61  }62  .card {63    background: #FFFFFF;64    border: 1px solid #EEF0F4;65    border-radius: 8px;66    height: 190px;67    display: flex;68    align-items: center;69    padding: 0 40px;70    margin: 26px 18px;71  }72  .icon-wrap {73    width: 120px;74    height: 120px;75    display: flex;76    align-items: center;77    justify-content: center;78    margin-right: 36px;79  }80  .card-title {81    font-size: 44px;82    color: #3E4150;83  }84 85  /* Bottom ad banner */86  .ad-banner {87    position: absolute;88    left: 0;89    right: 0;90    bottom: 130px; /* keep space for home indicator area */91    height: 210px;92    background: #FFFFFF;93    border-top: 1px solid #DBDFE6;94    border-bottom: 1px solid #DBDFE6;95    display: flex;96    align-items: center;97    padding: 0 28px;98  }99  .ad-left {100    display: flex;101    align-items: center;102    gap: 18px;103  }104  .ad-chip {105    width: 58px;106    height: 58px;107    border-radius: 50%;108    border: 2px solid #C9CFDA;109    display: flex;110    align-items: center;111    justify-content: center;112    color: #6B7280;113    font-weight: 700;114    font-size: 32px;115  }116  .ad-close {117    width: 48px;118    height: 48px;119    color: #6B7280;120    font-size: 40px;121    line-height: 40px;122  }123  .ad-texts {124    margin-left: 24px;125  }126  .ad-title {127    font-size: 50px;128    color: #2F3342;129    margin-bottom: 8px;130  }131  .ad-sub {132    font-size: 44px;133    color: #2E6DE8;134    font-weight: 700;135  }136  .ad-action {137    margin-left: auto;138    width: 110px;139    height: 110px;140    border-radius: 24px;141    background: #2E6DE8;142    display: flex;143    align-items: center;144    justify-content: center;145  }146 147  /* Bottom home indicator area */148  .home-area {149    position: absolute;150    bottom: 0;151    left: 0;152    right: 0;153    height: 130px;154    background: #000;155  }156  .home-indicator {157    position: absolute;158    bottom: 38px;159    left: 50%;160    transform: translateX(-50%);161    width: 240px;162    height: 12px;163    background: #C7C7C7;164    border-radius: 12px;165    opacity: 0.8;166  }167 168  /* Simple utility for SVG colors */169  .icon-stroke {170    stroke: #3C3F4A;171  }172  .icon-fill {173    fill: #3C3F4A;174  }175</style>176</head>177<body>178<div id="render-target">179  <div class="status-bar"></div>180 181  <div class="appbar">182    <div class="back-btn" aria-label="Back">183      <svg width="56" height="56" viewBox="0 0 24 24">184        <path class="icon-fill" d="M15.5 4.5a1 1 0 0 1 0 1.4L9.4 12l6.1 6.1a1 1 0 0 1-1.4 1.4l-6.8-6.8a1 1 0 0 1 0-1.4l6.8-6.8a1 1 0 0 1 1.4 0z"/>185      </svg>186    </div>187    <div class="title">Donation Letter</div>188  </div>189 190  <div class="content">191    <div class="card">192      <div class="icon-wrap">193        <svg width="92" height="92" viewBox="0 0 24 24">194          <path class="icon-stroke" d="M7 3h7l3 3v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" fill="none" stroke-width="1.6"/>195          <path class="icon-stroke" d="M14 3v4h4" fill="none" stroke-width="1.6"/>196          <path class="icon-stroke" d="M8.8 11.2h6.4M8.8 14.2h6.4M8.8 17.2h4.2" fill="none" stroke-width="1.6" stroke-linecap="round"/>197        </svg>198      </div>199      <div class="card-title">Charitable donation letter</div>200    </div>201 202    <div class="card">203      <div class="icon-wrap">204        <svg width="92" height="92" viewBox="0 0 24 24">205          <path class="icon-stroke" d="M7 3h7l3 3v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" fill="none" stroke-width="1.6"/>206          <path class="icon-stroke" d="M14 3v4h4" fill="none" stroke-width="1.6"/>207          <path class="icon-stroke" d="M8.8 11.2h6.4M8.8 14.2h6.4M8.8 17.2h4.2" fill="none" stroke-width="1.6" stroke-linecap="round"/>208        </svg>209      </div>210      <div class="card-title">Donation request letter</div>211    </div>212 213    <div class="card">214      <div class="icon-wrap">215        <svg width="92" height="92" viewBox="0 0 24 24">216          <path class="icon-stroke" d="M7 3h7l3 3v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" fill="none" stroke-width="1.6"/>217          <path class="icon-stroke" d="M14 3v4h4" fill="none" stroke-width="1.6"/>218          <path class="icon-stroke" d="M8.8 11.2h6.4M8.8 14.2h6.4M8.8 17.2h4.2" fill="none" stroke-width="1.6" stroke-linecap="round"/>219        </svg>220      </div>221      <div class="card-title">Giving donation letter</div>222    </div>223  </div>224 225  <div class="ad-banner">226    <div class="ad-left">227      <div class="ad-chip">i</div>228      <div class="ad-close">×</div>229      <div class="ad-texts">230        <div class="ad-title">Cricket Shop in Gurugram</div>231        <div class="ad-sub">S. G. FLAGSHIP STORE</div>232      </div>233    </div>234    <div class="ad-action" aria-label="Go">235      <svg width="52" height="52" viewBox="0 0 24 24">236        <path fill="#FFFFFF" d="M5 12a1 1 0 0 1 1-1h8.6L12 8.4a1 1 0 1 1 1.4-1.4l4.8 4.8a1 1 0 0 1 0 1.4l-4.8 4.8A1 1 0 0 1 12 16.6L14.6 14H6a1 1 0 0 1-1-1z"/>237      </svg>238    </div>239  </div>240 241  <div class="home-area">242    <div class="home-indicator"></div>243  </div>244</div>245</body>246</html>