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>Saved Template - UI Mock</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: #F5F7FB;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;16    color: #222;17  }18 19  /* Status bar (safe area) */20  .status-bar {21    height: 90px;22    background: #000;23    width: 100%;24  }25 26  /* Header */27  .header {28    background: #F3F5F9;29    padding: 28px 40px 10px;30    border-bottom: 1px solid #E6E8EE;31  }32  .header-inner {33    position: relative;34    height: 110px;35    display: flex;36    align-items: center;37    justify-content: center;38  }39  .back-btn {40    position: absolute;41    left: 8px;42    top: 50%;43    transform: translateY(-50%);44    width: 90px;45    height: 90px;46    display: flex;47    align-items: center;48    justify-content: center;49    cursor: default;50  }51  .title {52    font-size: 44px;53    font-weight: 600;54    color: #222431;55    letter-spacing: 0.2px;56  }57 58  /* Tabs */59  .tabs {60    display: flex;61    gap: 60px;62    padding: 10px 40px 0;63    background: #F3F5F9;64  }65  .tab {66    position: relative;67    padding: 26px 8px 22px;68    font-size: 34px;69    color: #8B9099;70    font-weight: 600;71  }72  .tab.active {73    color: #22283A;74  }75  .tab.active::after {76    content: "";77    position: absolute;78    left: 0;79    bottom: 8px;80    width: 180px;81    height: 6px;82    background: #2F6BFF;83    border-radius: 3px;84  }85 86  /* List area */87  .list {88    padding: 30px 24px 0;89  }90  .card {91    background: #FFFFFF;92    border-radius: 22px;93    box-shadow: 0 6px 18px rgba(18, 38, 63, 0.06);94    margin: 22px 10px;95    padding: 34px 34px;96    display: flex;97    align-items: center;98    gap: 28px;99  }100  .thumb {101    width: 120px;102    height: 120px;103    border-radius: 16px;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    display: flex;107    align-items: center;108    justify-content: center;109    color: #D32F2F;110    font-weight: 800;111    font-size: 34px;112  }113  .file-name {114    font-size: 36px;115    color: #3F424D;116    flex: 1;117    white-space: nowrap;118    overflow: hidden;119    text-overflow: ellipsis;120  }121  .more {122    width: 70px;123    height: 70px;124    display: flex;125    align-items: center;126    justify-content: center;127  }128 129  /* Bottom ad banner */130  .ad-banner {131    position: absolute;132    left: 0;133    right: 0;134    bottom: 110px;135    height: 180px;136    background: #FFFFFF;137    border-top: 1px solid #E4E6ED;138    padding: 24px 30px;139    display: flex;140    align-items: center;141    gap: 22px;142  }143  .ad-badge {144    width: 52px;145    height: 52px;146    border-radius: 26px;147    background: #E6F0FF;148    border: 1px solid #C5D7FF;149    color: #2F6BFF;150    font-size: 30px;151    display: flex;152    align-items: center;153    justify-content: center;154  }155  .ad-text {156    flex: 1;157  }158  .ad-title {159    font-size: 40px;160    color: #1F2430;161    margin-bottom: 6px;162    font-weight: 600;163  }164  .ad-sub {165    font-size: 34px;166    color: #2F6BFF;167    font-weight: 700;168  }169  .ad-cta {170    width: 90px;171    height: 90px;172    border-radius: 16px;173    background: #2F6BFF;174    display: flex;175    align-items: center;176    justify-content: center;177  }178 179  /* Home indicator area */180  .home-area {181    position: absolute;182    left: 0;183    right: 0;184    bottom: 0;185    height: 110px;186    background: #000;187    display: flex;188    align-items: center;189    justify-content: center;190  }191  .home-indicator {192    width: 240px;193    height: 12px;194    background: #FFFFFF;195    opacity: 0.9;196    border-radius: 8px;197  }198</style>199</head>200<body>201<div id="render-target">202  <div class="status-bar"></div>203 204  <div class="header">205    <div class="header-inner">206      <div class="back-btn" aria-label="Back">207        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">208          <path d="M15.5 19L8.5 12L15.5 5" stroke="#222" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>209        </svg>210      </div>211      <div class="title">Saved Template</div>212    </div>213  </div>214 215  <div class="tabs">216    <div class="tab active">Pdf Letters</div>217    <div class="tab">Draft Letters</div>218  </div>219 220  <div class="list">221    <div class="card">222      <div class="thumb">PDF</div>223      <div class="file-name">Sample letter 1691337902411.pdf</div>224      <div class="more" aria-label="More options">225        <svg width="32" height="32" viewBox="0 0 24 24" fill="#3C3F4A">226          <circle cx="12" cy="5" r="2"></circle>227          <circle cx="12" cy="12" r="2"></circle>228          <circle cx="12" cy="19" r="2"></circle>229        </svg>230      </div>231    </div>232 233    <div class="card">234      <div class="thumb">PDF</div>235      <div class="file-name">Sample letter 1691337807675.pdf</div>236      <div class="more" aria-label="More options">237        <svg width="32" height="32" viewBox="0 0 24 24" fill="#3C3F4A">238          <circle cx="12" cy="5" r="2"></circle>239          <circle cx="12" cy="12" r="2"></circle>240          <circle cx="12" cy="19" r="2"></circle>241        </svg>242      </div>243    </div>244 245    <div class="card">246      <div class="thumb">PDF</div>247      <div class="file-name">Sample letter 1691230553938.pdf</div>248      <div class="more" aria-label="More options">249        <svg width="32" height="32" viewBox="0 0 24 24" fill="#3C3F4A">250          <circle cx="12" cy="5" r="2"></circle>251          <circle cx="12" cy="12" r="2"></circle>252          <circle cx="12" cy="19" r="2"></circle>253        </svg>254      </div>255    </div>256  </div>257 258  <div class="ad-banner">259    <div class="ad-badge">i</div>260    <div class="ad-text">261      <div class="ad-title">Best Cricket Shop in MGF Mall</div>262      <div class="ad-sub">S. G. FLAGSHIP STORE</div>263    </div>264    <div class="ad-cta" aria-label="Open Ad">265      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">266        <path d="M8 5l8 7-8 7" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>267      </svg>268    </div>269  </div>270 271  <div class="home-area">272    <div class="home-indicator"></div>273  </div>274</div>275</body>276</html>