GD-ML/AndroidCode
13.4k
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 - Mock UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 border-radius: 24px; /* subtle rounding like mobile screenshot */14 box-shadow: 0 8px 40px rgba(0,0,0,0.25);15 font-family: Arial, Helvetica, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute; left: 0; top: 0;22 width: 100%; height: 120px;23 background: #111;24 color: #fff;25 display: flex; align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-size: 42px; letter-spacing: 0.2px;29 }30 .status-right {31 margin-left: auto; display: flex; align-items: center; gap: 36px;32 }33 .status-icon { width: 52px; height: 52px; }34 35 /* App bar */36 .app-bar {37 position: absolute; left: 0; top: 120px;38 width: 100%; height: 140px;39 background: #3a3a3a;40 color: #fff;41 display: flex; align-items: center;42 box-sizing: border-box;43 padding: 0 24px;44 }45 .app-title {46 font-size: 44px; margin-left: 24px;47 }48 .app-actions {49 margin-left: auto; display: flex; align-items: center; gap: 34px;50 }51 .icon-btn {52 width: 72px; height: 72px;53 display: inline-flex; align-items: center; justify-content: center;54 border-radius: 36px;55 }56 .icon-btn svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 4; }57 58 /* Content area */59 .content {60 position: absolute; left: 0; top: 260px; /* 120 + 140 */61 width: 100%; height: 1820px; /* leaves space for bottom toolbar */62 overflow: hidden;63 background: #fff;64 }65 .page {66 position: absolute; left: 36px; right: 36px; top: 36px;67 bottom: 36px;68 overflow: hidden;69 border-radius: 8px;70 }71 72 /* Watermark */73 .watermark {74 position: absolute; left: -200px; top: 300px;75 font-size: 300px; color: #dedede; font-weight: 700;76 transform: rotate(-30deg);77 pointer-events: none;78 }79 80 .center-title {81 text-align: center; margin-top: 120px;82 }83 .title-big {84 font-size: 64px; color: #1f3f67; letter-spacing: 2px; font-weight: 700;85 }86 .sub-red { color: #d72626; font-size: 34px; margin-top: 20px; }87 .logo {88 width: 160px; height: 160px; margin: 60px auto 24px;89 background: #E0E0E0; border: 1px solid #BDBDBD;90 display: flex; align-items: center; justify-content: center;91 color: #757575; font-size: 28px;92 }93 .org-lines {94 text-align: center; color: #294766; font-size: 44px; line-height: 1.35; font-weight: 700;95 }96 .help-info {97 text-align: center; margin-top: 20px; color: #d72626; font-size: 32px; font-weight: 600;98 }99 .links-row {100 display: flex; justify-content: center; gap: 180px; margin-top: 20px; font-size: 30px;101 }102 .links-row .col { text-align: center; color: #d72626; }103 .page-num {104 position: absolute; right: 60px; top: 820px; color: #6f6f6f; font-size: 28px;105 }106 .divider {107 position: absolute; left: 0; right: 0; top: 900px; height: 22px; background: #efefef;108 border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;109 }110 111 /* Table of contents */112 .toc {113 position: absolute; left: 80px; right: 80px; top: 980px;114 color: #233c5e;115 }116 .toc .heading {117 text-align: center; font-size: 40px; font-weight: 700; margin-bottom: 36px;118 }119 .toc .item {120 display: flex; align-items: baseline; gap: 10px;121 color: #1f4fb8; font-size: 30px; margin: 12px 0;122 }123 .toc .dots {124 flex: 1; border-bottom: 2px dotted #888; margin: 0 8px; transform: translateY(-6px);125 }126 .toc .page-ref { color: #222; font-weight: 600; }127 128 /* Floating Edit pill */129 .edit-pill {130 position: absolute; left: 60px; bottom: 280px;131 background: rgba(32,32,32,0.95);132 color: #fff; padding: 22px 32px; border-radius: 40px;133 display: inline-flex; align-items: center; gap: 20px;134 box-shadow: 0 6px 20px rgba(0,0,0,0.4);135 font-size: 36px;136 }137 .edit-pill svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 4; fill: none; }138 139 /* Bottom toolbar */140 .bottom-bar {141 position: absolute; left: 0; bottom: 0;142 width: 100%; height: 220px;143 background: #2f2f2f;144 display: flex; align-items: center; justify-content: space-between;145 padding: 0 48px; box-sizing: border-box;146 }147 .bottom-actions {148 display: flex; align-items: center; gap: 60px;149 }150 .square-btn {151 width: 160px; height: 140px; background: #3b3b3b; border-radius: 18px;152 display: flex; align-items: center; justify-content: center;153 border: 1px solid #4a4a4a;154 }155 .square-btn svg { width: 80px; height: 80px; stroke: #fff; stroke-width: 4; fill: none; }156 .share-btn {157 width: 280px; height: 140px; background: #2E7CF6; border-radius: 18px;158 color: #fff; font-size: 44px; font-weight: 700;159 display: flex; align-items: center; justify-content: center;160 border: 1px solid #2a6fe0;161 }162 163 /* Gesture bar */164 .gesture {165 position: absolute; left: 50%; transform: translateX(-50%);166 bottom: 18px; width: 220px; height: 14px;167 background: #ffffff; border-radius: 8px;168 opacity: 0.9;169 box-shadow: 0 0 0 1px rgba(255,255,255,0.8) inset;170 }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Status bar -->177 <div class="status-bar">178 <div>1:02</div>179 <div class="status-right">180 <!-- Minimal app icons (placeholders) -->181 <svg class="status-icon" viewBox="0 0 24 24">182 <rect x="3" y="6" width="14" height="12" stroke="#fff" fill="none" stroke-width="2"></rect>183 <rect x="18" y="10" width="2" height="4" stroke="#fff" fill="none" stroke-width="2"></rect>184 </svg>185 <svg class="status-icon" viewBox="0 0 24 24">186 <path d="M3 14c4-4 14-4 18 0" stroke="#fff" fill="none" stroke-width="2"></path>187 <path d="M6 14c3-3 9-3 12 0" stroke="#fff" fill="none" stroke-width="2"></path>188 <circle cx="12" cy="16" r="1.5" fill="#fff"></circle>189 </svg>190 </div>191 </div>192 193 <!-- App bar -->194 <div class="app-bar">195 <div class="icon-btn">196 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>197 </div>198 <div class="app-title">EPFO file.pdf</div>199 <div class="app-actions">200 <div class="icon-btn">201 <!-- star outline -->202 <svg viewBox="0 0 24 24">203 <path d="M12 3 L14.7 9.2 L21.3 9.5 L16 13.7 L17.9 20 L12 16.6 L6.1 20 L8 13.7 L2.7 9.5 L9.3 9.2 Z" stroke="#fff" fill="none"/>204 </svg>205 </div>206 <div class="icon-btn">207 <!-- search -->208 <svg viewBox="0 0 24 24">209 <circle cx="10" cy="10" r="6" stroke="#fff" fill="none"></circle>210 <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="#fff"></line>211 </svg>212 </div>213 <div class="icon-btn">214 <!-- more vertical -->215 <svg viewBox="0 0 24 24">216 <circle cx="12" cy="5" r="2" fill="#fff"></circle>217 <circle cx="12" cy="12" r="2" fill="#fff"></circle>218 <circle cx="12" cy="19" r="2" fill="#fff"></circle>219 </svg>220 </div>221 </div>222 </div>223 224 <!-- Content area -->225 <div class="content">226 <div class="page">227 <div class="watermark">EPFO</div>228 229 <div class="center-title">230 <div class="title-big">UAN & KYC FUNCTIONS IN OTCP</div>231 <div class="sub-red" style="position:absolute; right:160px; top:60px; text-align:right;">232 Version 1.4<br>16-Oct-2014233 </div>234 <div class="logo">[IMG: EPFO Logo]</div>235 <div style="color:#d72626; font-size:32px; text-align:center; margin-top:10px;">IS Division</div>236 <div class="org-lines">237 EMPLOYEES’ PROVIDENT FUND ORGANIZATION<br>238 HEAD OFFICE, NEW DELHI239 </div>240 241 <div class="help-info">Helpdesk No. 18001-18005</div>242 <div class="links-row">243 <div class="col">244 EPFO Website:<br>245 http://www.epfindia.gov.in/246 </div>247 <div class="col">248 OTCP URL:<br>249 http://employerclaims.epfoservices.in/250 </div>251 </div>252 </div>253 254 <div class="page-num">Page 1 of 41</div>255 256 <div class="divider"></div>257 258 <div class="toc">259 <div class="heading">TABLE OF CONTENTS</div>260 261 <div class="item">262 <span>OBJECTIVES OF UAN</span><span class="dots"></span><span class="page-ref">4</span>263 </div>264 <div class="item">265 <span>SCOPE OF THE DOCUMENT</span><span class="dots"></span><span class="page-ref">4</span>266 </div>267 <div class="item" style="color:#1f4fb8;">268 <span>BACKGROUND WORK</span><span class="dots"></span><span class="page-ref">5–6</span>269 </div>270 <div style="margin-left:40px; color:#444; font-size:28px;">271 INITIAL GENERATION OF UAN<br>272 RECURRING/SUBSEQUENT UAN GENERATION/LINKING<br>273 REGISTERING DIGITAL SIGNATURE CERTIFICATE<br>274 SEEDING KYC DETAILS<br>275 ERROR LIST276 </div>277 278 <div class="item" style="margin-top:20px;">279 <span>PRE-CONDITIONS</span><span class="dots"></span><span class="page-ref">6</span>280 </div>281 <div class="item">282 <span>WORK FLOW FOLLOWED BY EMPLOYERS</span><span class="dots"></span><span class="page-ref">7</span>283 </div>284 <div class="item">285 <span>WORK FLOW</span><span class="dots"></span><span class="page-ref">7</span>286 </div>287 <div class="item">288 <span>HOME SCREEN OF OTCP</span><span class="dots"></span><span class="page-ref">8</span>289 </div>290 </div>291 </div>292 </div>293 294 <!-- Floating Edit pill -->295 <div class="edit-pill">296 <svg viewBox="0 0 24 24">297 <path d="M3 7 H21 V17 H3 Z" />298 <path d="M6 12 H18" />299 </svg>300 <div>Edit</div>301 </div>302 303 <!-- Bottom toolbar -->304 <div class="bottom-bar">305 <div class="bottom-actions">306 <div class="square-btn">307 <!-- comment bubble icon -->308 <svg viewBox="0 0 24 24">309 <path d="M3 4 H21 V16 H8 L5 20 V16 H3 Z" />310 </svg>311 </div>312 <div class="square-btn">313 <!-- open in new icon -->314 <svg viewBox="0 0 24 24">315 <rect x="4" y="7" width="12" height="12" rx="2" />316 <path d="M14 4 H20 V10" />317 <path d="M20 4 L10 14" />318 </svg>319 </div>320 <div class="square-btn">321 <!-- link icon -->322 <svg viewBox="0 0 24 24">323 <path d="M8 12 C8 9.5 10 8 12.5 8 H15" />324 <path d="M16 12 C16 14.5 14 16 11.5 16 H9" />325 <path d="M15 8 L9 16" />326 </svg>327 </div>328 </div>329 <div class="share-btn">Share</div>330 </div>331 332 <div class="gesture"></div>333</div>334</body>335</html>