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 Templates</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #2f2f3a; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F3F4F6;15  }16 17  /* Top and bottom system bars */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25  }26  .home-indicator {27    position: absolute;28    bottom: 0;29    left: 0;30    width: 1080px;31    height: 120px;32    background: #000;33  }34  .pill {35    position: absolute;36    bottom: 38px;37    left: 50%;38    transform: translateX(-50%);39    width: 260px;40    height: 16px;41    background: #EDEDED;42    border-radius: 10px;43    opacity: 0.9;44  }45 46  /* Header */47  .header {48    position: absolute;49    top: 140px; /* below status bar */50    left: 0;51    width: 1080px;52    padding: 0 48px;53    box-sizing: border-box;54  }55  .back-btn {56    position: absolute;57    left: 32px;58    top: 8px;59    width: 72px;60    height: 72px;61    display: flex;62    align-items: center;63    justify-content: center;64    color: #3a3a44;65  }66  .title {67    text-align: center;68    font-weight: 700;69    font-size: 60px;70    line-height: 1.2;71    letter-spacing: 0.5px;72    color: #3a3a44;73    margin-top: 0;74  }75 76  /* Template icons row */77  .templates {78    position: absolute;79    top: 400px;80    left: 0;81    width: 1080px;82    display: flex;83    justify-content: center;84    gap: 90px;85  }86  .tile {87    width: 260px;88    text-align: center;89    color: #4b4b55;90  }91  .img-circle {92    width: 240px;93    height: 240px;94    border-radius: 50%;95    background: #E0E0E0;96    border: 1px solid #BDBDBD;97    display: flex;98    align-items: center;99    justify-content: center;100    color: #757575;101    font-size: 28px;102    padding: 10px;103    box-sizing: border-box;104  }105  .tile .label {106    margin-top: 24px;107    font-size: 36px;108    color: #5a5a66;109  }110 111  /* Bottom ad */112  .ad-card {113    position: absolute;114    bottom: 140px; /* above home indicator */115    left: 90px;116    width: 900px;117    height: 420px;118    background: #ffffff;119    border-radius: 22px;120    box-shadow: 0 8px 24px rgba(0,0,0,0.12);121    display: flex;122    overflow: hidden;123  }124  .ad-left {125    width: 460px;126    height: 100%;127    display: flex;128    align-items: center;129    justify-content: center;130    background: #E0E0E0;131    border-right: 1px solid #E6E6E6;132    color: #757575;133    font-size: 32px;134  }135  .ad-right {136    position: relative;137    flex: 1;138    padding: 28px 28px 24px 28px;139    box-sizing: border-box;140  }141  .ad-brand {142    display: flex;143    align-items: center;144    gap: 18px;145    margin-bottom: 12px;146  }147  .ad-logo {148    width: 86px;149    height: 86px;150    border-radius: 20px;151    background: #E0E0E0;152    border: 1px solid #BDBDBD;153    display: flex;154    align-items: center;155    justify-content: center;156    color: #757575;157    font-size: 26px;158  }159  .ad-title {160    font-size: 44px;161    font-weight: 700;162    color: #23232b;163  }164  .ad-text {165    margin-top: 10px;166    font-size: 28px;167    line-height: 1.4;168    color: #5a5a66;169    max-width: 360px;170  }171  .ad-actions {172    position: absolute;173    bottom: 24px;174    left: 28px;175    right: 28px;176    display: flex;177    align-items: center;178    justify-content: space-between;179  }180  .ad-store {181    display: flex;182    align-items: center;183    gap: 10px;184    color: #5a5a66;185    font-size: 26px;186  }187  .btn-install {188    background: #2E7D32;189    color: #fff;190    font-size: 32px;191    padding: 18px 46px;192    border-radius: 18px;193    border: none;194  }195  .ad-icons {196    position: absolute;197    top: 16px;198    right: 16px;199    display: flex;200    align-items: center;201    gap: 18px;202    color: #7b7b86;203  }204  .icon-circle {205    width: 36px;206    height: 36px;207    border-radius: 50%;208    border: 1px solid #D1D1D6;209    display: flex;210    align-items: center;211    justify-content: center;212    background: #ffffff;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <div class="status-bar"></div>220 221  <div class="header">222    <div class="back-btn" aria-label="Back">223      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">224        <path d="M15 6l-6 6 6 6" stroke="#3a3a44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>225      </svg>226    </div>227    <h1 class="title">Letter Writing<br>Templates</h1>228  </div>229 230  <div class="templates">231    <div class="tile">232      <div class="img-circle">[IMG: Pencil and Paper Icon]</div>233      <div class="label">Write Letter</div>234    </div>235    <div class="tile">236      <div class="img-circle">[IMG: Checklist Clipboard Icon]</div>237      <div class="label">My Notes</div>238    </div>239    <div class="tile">240      <div class="img-circle">[IMG: Folder Download Icon]</div>241      <div class="label">Saved Template</div>242    </div>243  </div>244 245  <div class="ad-card">246    <div class="ad-left">[IMG: Purple Promo – Unlimited free deliveries]</div>247    <div class="ad-right">248      <div class="ad-icons">249        <div class="icon-circle" title="Info">250          <svg width="18" height="18" viewBox="0 0 24 24">251            <circle cx="12" cy="12" r="9" stroke="#9aa0a6" fill="none" stroke-width="1.5"></circle>252            <rect x="11" y="10" width="2" height="7" fill="#9aa0a6"></rect>253            <circle cx="12" cy="7.5" r="1.2" fill="#9aa0a6"></circle>254          </svg>255        </div>256        <div class="icon-circle" title="Close">257          <svg width="18" height="18" viewBox="0 0 24 24">258            <path d="M6 6l12 12M18 6L6 18" stroke="#9aa0a6" stroke-width="1.8" stroke-linecap="round"></path>259          </svg>260        </div>261      </div>262 263      <div class="ad-brand">264        <div class="ad-logo">[IMG: Z Logo]</div>265        <div class="ad-title">Zepto</div>266      </div>267      <div class="ad-text">Shop from over 7000 products and get free delivery on...</div>268 269      <div class="ad-actions">270        <div class="ad-store">271          <svg width="28" height="28" viewBox="0 0 24 24">272            <path d="M3 5h18v14H3z" fill="#F4B400"></path>273            <path d="M3 5l9 7-9 7z" fill="#0F9D58"></path>274            <path d="M21 5l-9 7 9 7z" fill="#DB4437"></path>275            <circle cx="12" cy="12" r="2.5" fill="#4285F4"></circle>276          </svg>277          <span>Google Play</span>278        </div>279        <button class="btn-install">Install</button>280      </div>281    </div>282  </div>283 284  <div class="home-indicator"><div class="pill"></div></div>285</div>286</body>287</html>