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>EPFO file.pdf Viewer Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #1C1C1C;30    color: #FFFFFF;31    display: flex;32    align-items: center;33    padding: 0 32px;34    box-sizing: border-box;35    font-size: 36px;36  }37  .status-left {38    display: flex;39    align-items: center;40    gap: 24px;41  }42  .status-right {43    margin-left: auto;44    display: flex;45    align-items: center;46    gap: 26px;47  }48  .status-icon {49    width: 36px;50    height: 36px;51  }52 53  /* App bar */54  .app-bar {55    position: absolute;56    top: 120px;57    left: 0;58    width: 1080px;59    height: 160px;60    background: #3B3B3B;61    color: #FFFFFF;62    display: flex;63    align-items: center;64    box-sizing: border-box;65    padding: 0 28px;66    gap: 22px;67  }68  .app-title {69    font-size: 44px;70    font-weight: 500;71  }72  .app-actions {73    margin-left: auto;74    display: flex;75    align-items: center;76    gap: 34px;77  }78  .icon-btn {79    width: 64px;80    height: 64px;81    display: inline-flex;82    align-items: center;83    justify-content: center;84  }85  .icon-svg {86    width: 48px;87    height: 48px;88    fill: none;89    stroke: #FFFFFF;90    stroke-width: 2.5;91  }92  .icon-svg.fill {93    fill: #FFFFFF;94    stroke: none;95  }96 97  /* Content area */98  .content {99    position: absolute;100    top: 280px; /* status + app bar */101    left: 0;102    width: 1080px;103    height: calc(2400px - 280px - 260px); /* leave space for bottom bar + nav pill */104    background: #FFFFFF;105  }106 107  /* Loading spinner */108  .spinner {109    position: absolute;110    width: 120px;111    height: 120px;112    left: 480px; /* centers in 1080 */113    top: 1480px;114    border-radius: 50%;115    border: 12px solid #E6EAFD;116    border-top-color: #2A66FF;117    animation: spin 1s linear infinite;118  }119  @keyframes spin {120    to { transform: rotate(360deg); }121  }122 123  /* Floating Edit pill */124  .edit-pill {125    position: absolute;126    left: 40px;127    bottom: 320px;128    height: 110px;129    padding: 0 36px;130    background: #2B2B2B;131    color: #FFFFFF;132    border-radius: 55px;133    display: flex;134    align-items: center;135    gap: 18px;136    box-shadow: 0 6px 14px rgba(0,0,0,0.25);137    font-size: 40px;138  }139  .edit-icon {140    width: 42px;141    height: 42px;142  }143 144  /* Bottom action bar */145  .bottom-bar {146    position: absolute;147    bottom: 60px;148    left: 0;149    width: 1080px;150    height: 220px;151    background: #2A2A2A;152    display: flex;153    align-items: center;154    padding: 0 40px;155    box-sizing: border-box;156    gap: 36px;157  }158  .action-tile {159    width: 140px;160    height: 160px;161    background: #3A3A3A;162    border-radius: 12px;163    display: flex;164    align-items: center;165    justify-content: center;166  }167  .action-icon {168    width: 72px;169    height: 72px;170    stroke: #CFCFCF;171    fill: none;172    stroke-width: 3;173  }174  .share-btn {175    width: 260px;176    height: 160px;177    background: #2A66FF;178    border-radius: 12px;179    color: #FFFFFF;180    display: flex;181    align-items: center;182    justify-content: center;183    font-size: 46px;184    font-weight: 600;185    letter-spacing: 0.3px;186  }187 188  /* Navigation gesture pill */189  .nav-pill {190    position: absolute;191    bottom: 16px;192    left: 50%;193    transform: translateX(-50%);194    width: 200px;195    height: 16px;196    background: #EDEDED;197    border-radius: 10px;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <!-- Status Bar -->205  <div class="status-bar">206    <div class="status-left">207      <div>1:02</div>208      <!-- simple app icons -->209      <svg class="status-icon" viewBox="0 0 24 24">210        <rect x="3" y="4" width="18" height="6" fill="#FFFFFF"></rect>211        <rect x="3" y="14" width="18" height="6" fill="#FFFFFF"></rect>212      </svg>213      <svg class="status-icon" viewBox="0 0 24 24">214        <rect x="4" y="4" width="6" height="6" fill="#FFFFFF"></rect>215        <rect x="14" y="4" width="6" height="6" fill="#FFFFFF"></rect>216        <rect x="4" y="14" width="6" height="6" fill="#FFFFFF"></rect>217        <rect x="14" y="14" width="6" height="6" fill="#FFFFFF"></rect>218      </svg>219      <svg class="status-icon" viewBox="0 0 24 24">220        <path d="M2 6h20M2 12h20M2 18h20" stroke="#FFFFFF" stroke-width="2"></path>221      </svg>222      <svg class="status-icon" viewBox="0 0 24 24">223        <circle cx="12" cy="12" r="2" fill="#FFFFFF"></circle>224      </svg>225    </div>226    <div class="status-right">227      <svg class="status-icon" viewBox="0 0 24 24">228        <path d="M2 18h20" stroke="#FFFFFF" stroke-width="2"></path>229        <rect x="3" y="6" width="18" height="10" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"></rect>230      </svg>231      <svg class="status-icon" viewBox="0 0 24 24">232        <rect x="3" y="4" width="18" height="16" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"></rect>233        <path d="M6 8h12M6 12h12M6 16h12" stroke="#FFFFFF" stroke-width="2"></path>234      </svg>235    </div>236  </div>237 238  <!-- App Bar -->239  <div class="app-bar">240    <!-- Back arrow -->241    <div class="icon-btn">242      <svg class="icon-svg" viewBox="0 0 24 24">243        <path d="M15 5L7 12l8 7" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>244      </svg>245    </div>246    <div class="app-title">EPFO file.pdf</div>247    <div class="app-actions">248      <!-- Star outline -->249      <div class="icon-btn">250        <svg class="icon-svg" viewBox="0 0 24 24">251          <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3.9L7.5 14 3 9.8 9 9z" stroke="#FFFFFF" fill="none"></path>252        </svg>253      </div>254      <!-- Search -->255      <div class="icon-btn">256        <svg class="icon-svg" viewBox="0 0 24 24">257          <circle cx="10" cy="10" r="6" stroke="#FFFFFF"></circle>258          <path d="M14.5 14.5L21 21" stroke="#FFFFFF"></path>259        </svg>260      </div>261      <!-- More (vertical dots) -->262      <div class="icon-btn">263        <svg class="icon-svg" viewBox="0 0 24 24">264          <circle cx="12" cy="5" r="2" fill="#FFFFFF"></circle>265          <circle cx="12" cy="12" r="2" fill="#FFFFFF"></circle>266          <circle cx="12" cy="19" r="2" fill="#FFFFFF"></circle>267        </svg>268      </div>269    </div>270  </div>271 272  <!-- Content area -->273  <div class="content">274    <!-- Loading spinner -->275    <div class="spinner"></div>276  </div>277 278  <!-- Floating Edit pill -->279  <div class="edit-pill">280    <svg class="edit-icon" viewBox="0 0 24 24">281      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#FFFFFF"></path>282      <path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#FFFFFF"></path>283    </svg>284    <div>Edit</div>285  </div>286 287  <!-- Bottom action bar -->288  <div class="bottom-bar">289    <!-- Comment tile -->290    <div class="action-tile">291      <svg class="action-icon" viewBox="0 0 24 24">292        <path d="M4 4h16v12H8l-4 4V4z" stroke="#CFCFCF" fill="none"></path>293      </svg>294    </div>295    <!-- Open in new tile -->296    <div class="action-tile">297      <svg class="action-icon" viewBox="0 0 24 24">298        <rect x="4" y="4" width="14" height="14" rx="2" stroke="#CFCFCF" fill="none"></rect>299        <path d="M10 10l7-7M12 3h8v8" stroke="#CFCFCF"></path>300      </svg>301    </div>302    <!-- Link tile -->303    <div class="action-tile">304      <svg class="action-icon" viewBox="0 0 24 24">305        <path d="M8 12a4 4 0 0 1 4-4h3M16 12a4 4 0 0 1-4 4H9" stroke="#CFCFCF" fill="none"></path>306        <path d="M13 9l-2 2m2 4l-2-2" stroke="#CFCFCF"></path>307      </svg>308    </div>309    <!-- Share button -->310    <div class="share-btn">Share</div>311  </div>312 313  <!-- Navigation gesture pill -->314  <div class="nav-pill"></div>315 316</div>317</body>318</html>