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>Table of Contents - PDF Viewer 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: #F1F2F4;15 }16 17 /* Status bar (top) */18 .status-bar {19 position: absolute;20 top: 0; left: 0;21 width: 100%;22 height: 120px;23 background: #1E1E1E;24 color: #FFFFFF;25 display: flex;26 align-items: center;27 padding: 0 40px;28 box-sizing: border-box;29 font-family: "Roboto", Arial, sans-serif;30 }31 .sb-time {32 font-size: 44px;33 font-weight: 500;34 letter-spacing: 1px;35 }36 .sb-icons {37 display: flex;38 gap: 24px;39 margin-left: 40px;40 }41 .sb-right {42 margin-left: auto;43 display: flex;44 align-items: center;45 gap: 28px;46 }47 .icon {48 width: 44px; height: 44px;49 }50 .icon-dot {51 width: 14px; height: 14px; background: #CFCFCF; border-radius: 50%;52 }53 54 /* PDF viewer area */55 .viewer {56 position: absolute;57 top: 120px;58 left: 0; right: 0;59 bottom: 120px;60 overflow: auto;61 padding: 36px 0;62 }63 .page {64 width: 920px;65 margin: 24px auto;66 background: #FFFFFF;67 border: 1px solid #D6D6D6;68 box-shadow: 0 2px 6px rgba(0,0,0,0.08);69 position: relative;70 padding: 60px 70px 80px 70px;71 box-sizing: border-box;72 font-family: "Times New Roman", Georgia, serif;73 }74 .watermark {75 position: absolute;76 left: 140px;77 top: 380px;78 width: 640px;79 height: 640px;80 transform: rotate(-32deg);81 opacity: 0.08;82 display: flex;83 justify-content: center;84 align-items: center;85 font-size: 86px;86 color: #666;87 z-index: 0;88 background: #E0E0E0;89 border: 1px solid #BDBDBD;90 }91 .toc {92 position: relative;93 z-index: 1;94 }95 .toc-title {96 text-align: center;97 font-weight: 700;98 font-size: 36px;99 color: #1f4e86;100 text-transform: uppercase;101 letter-spacing: 1px;102 margin-bottom: 36px;103 }104 105 /* TOC items */106 .toc-item {107 display: flex;108 align-items: baseline;109 gap: 12px;110 margin: 10px 0;111 font-size: 28px;112 line-height: 1.6;113 }114 .toc-item a {115 color: #1f4e86;116 text-decoration: underline;117 white-space: nowrap;118 }119 .dots {120 flex: 1;121 border-bottom: 2px dotted #414141;122 transform: translateY(-6px);123 min-width: 100px;124 }125 .page-no {126 color: #333;127 font-size: 26px;128 white-space: nowrap;129 }130 .indent1 { padding-left: 40px; }131 .indent2 { padding-left: 80px; }132 133 .page-footer {134 position: absolute;135 bottom: 24px;136 right: 30px;137 font-size: 24px;138 color: #333;139 }140 141 .section-divider {142 width: 100%;143 height: 18px;144 background: #DADDE0;145 }146 147 /* Bottom gesture bar */148 .bottom-bar {149 position: absolute;150 bottom: 0; left: 0; width: 100%;151 height: 120px;152 background: #111111;153 display: flex;154 justify-content: center;155 align-items: center;156 }157 .gesture-pill {158 width: 300px;159 height: 14px;160 border-radius: 10px;161 background: #FFFFFF;162 opacity: 0.9;163 }164</style>165</head>166<body>167<div id="render-target">168 <div class="status-bar">169 <div class="sb-time">1:03</div>170 <div class="sb-icons">171 <!-- Simple inline SVG icons (outlined rectangles/lines) -->172 <svg class="icon" viewBox="0 0 24 24">173 <rect x="4" y="4" width="16" height="16" fill="none" stroke="#EDEDED" stroke-width="2"></rect>174 <line x1="7" y1="9" x2="17" y2="9" stroke="#EDEDED" stroke-width="2"></line>175 <line x1="7" y1="13" x2="17" y2="13" stroke="#EDEDED" stroke-width="2"></line>176 </svg>177 <svg class="icon" viewBox="0 0 24 24">178 <rect x="4" y="6" width="16" height="12" fill="none" stroke="#EDEDED" stroke-width="2"></rect>179 <line x1="4" y1="6" x2="20" y2="18" stroke="#EDEDED" stroke-width="2"></line>180 <line x1="20" y1="6" x2="4" y2="18" stroke="#EDEDED" stroke-width="2"></line>181 </svg>182 <svg class="icon" viewBox="0 0 24 24">183 <rect x="5" y="4" width="14" height="16" fill="none" stroke="#EDEDED" stroke-width="2"></rect>184 <circle cx="12" cy="12" r="3" fill="none" stroke="#EDEDED" stroke-width="2"></circle>185 </svg>186 <svg class="icon" viewBox="0 0 24 24">187 <path d="M6 5h12v2H6zM6 9h12v2H6zM6 13h12v2H6z" fill="#EDEDED"></path>188 </svg>189 <svg class="icon" viewBox="0 0 24 24">190 <path d="M4 6h16v12H4z" fill="none" stroke="#EDEDED" stroke-width="2"></path>191 <path d="M8 9h8v6H8z" fill="none" stroke="#EDEDED" stroke-width="2"></path>192 </svg>193 <div class="icon-dot"></div>194 </div>195 <div class="sb-right">196 <!-- Wi-Fi icon -->197 <svg class="icon" viewBox="0 0 24 24">198 <path d="M2 9c5-5 15-5 20 0" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></path>199 <path d="M5 12c4-4 10-4 14 0" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></path>200 <path d="M8 15c2-2 6-2 8 0" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></path>201 <circle cx="12" cy="18" r="1.8" fill="#EDEDED"></circle>202 </svg>203 <!-- Battery icon -->204 <svg class="icon" viewBox="0 0 24 24">205 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#EDEDED" stroke-width="2"></rect>206 <rect x="5" y="8" width="12" height="8" fill="#EDEDED"></rect>207 <rect x="21" y="10" width="2" height="4" fill="#EDEDED"></rect>208 </svg>209 </div>210 </div>211 212 <div class="viewer">213 <!-- Page 1 -->214 <div class="page">215 <div class="watermark">[IMG: EPFO Watermark]</div>216 <div class="toc">217 <div class="toc-title">Table of Contents</div>218 219 <div class="toc-item">220 <a href="#">OBJECTIVES OF UAN</a><span class="dots"></span><span class="page-no">4</span>221 </div>222 <div class="toc-item">223 <a href="#">SCOPE OF THE DOCUMENT</a><span class="dots"></span><span class="page-no">4</span>224 </div>225 <div class="toc-item">226 <a href="#">BACKGROUND WORK</a><span class="dots"></span><span class="page-no">5–6</span>227 </div>228 229 <div class="toc-item indent1">230 <a href="#">INITIAL GENERATION OF UAN</a><span class="dots"></span><span class="page-no">5</span>231 </div>232 <div class="toc-item indent1">233 <a href="#">RECURRING/SUBSEQUENT UAN GENERATION/LINKING</a><span class="dots"></span><span class="page-no">5</span>234 </div>235 <div class="toc-item indent1">236 <a href="#">REGISTERING DIGITAL SIGNATURE CERTIFICATE</a><span class="dots"></span><span class="page-no">5</span>237 </div>238 <div class="toc-item indent1">239 <a href="#">SEEDING KYC DETAILS</a><span class="dots"></span><span class="page-no">6</span>240 </div>241 <div class="toc-item indent1">242 <a href="#">ERROR LIST</a><span class="dots"></span><span class="page-no">6</span>243 </div>244 245 <div class="toc-item">246 <a href="#">PRE-CONDITIONS</a><span class="dots"></span><span class="page-no">6</span>247 </div>248 <div class="toc-item">249 <a href="#">STEPS TO BE FOLLOWED BY EMPLOYERS</a><span class="dots"></span><span class="page-no">7</span>250 </div>251 <div class="toc-item">252 <a href="#">SCREEN FLOW</a><span class="dots"></span><span class="page-no">7</span>253 </div>254 <div class="toc-item">255 <a href="#">HOME SCREEN OF OTCP</a><span class="dots"></span><span class="page-no">8</span>256 </div>257 <div class="toc-item">258 <a href="#">DIGITAL SIGNATURE CERTIFICATE</a><span class="dots"></span><span class="page-no">8–11</span>259 </div>260 <div class="toc-item">261 <a href="#">EXPLANATION OF UAN FUNCTIONS IN OTCP THROUGH SCREENSHOTS</a><span class="dots"></span><span class="page-no">12–23</span>262 </div>263 264 <div class="toc-item indent1">265 <a href="#">VIEW/DOWNLOAD THE ALLOTTED UANs</a><span class="dots"></span><span class="page-no">12–15</span>266 </div>267 <div class="toc-item indent2">268 <a href="#">OPTIONS TO VIEW/DOWNLOAD THE ALLOTTED UANs</a><span class="dots"></span><span class="page-no">13</span>269 </div>270 <div class="toc-item indent2">271 <a href="#">PDF OF UAN LIST (ASCENDING ORDER)</a><span class="dots"></span><span class="page-no">14</span>272 </div>273 <div class="toc-item indent2">274 <a href="#">PDF OF UAN LIST (DESCENDING ORDER)</a><span class="dots"></span><span class="page-no">14</span>275 </div>276 <div class="toc-item indent2">277 <a href="#">PDF OF UAN LIST (BY UAN CREATION DATE)</a><span class="dots"></span><span class="page-no">15</span>278 </div>279 <div class="toc-item indent2">280 <a href="#">PDF OF UAN LIST (FOR DISTRIBUTION TO MEMBERS)</a><span class="dots"></span><span class="page-no">15</span>281 </div>282 283 <div class="toc-item indent1">284 <a href="#">SEARCH UAN NUMBER</a><span class="dots"></span><span class="page-no">15–17</span>285 </div>286 <div class="toc-item indent2">287 <a href="#">SEARCH UAN OF OWN MEMBERS</a><span class="dots"></span><span class="page-no">16</span>288 </div>289 <div class="toc-item indent2">290 <a href="#">SEARCH UAN OF MEMBERS OF OTHER ESTABLISHMENTS</a><span class="dots"></span><span class="page-no">16</span>291 </div>292 <div class="toc-item indent2">293 <a href="#">SEARCH MEMBER ID UAN-WISE</a><span class="dots"></span><span class="page-no">17</span>294 </div>295 296 <div class="toc-item indent1">297 <a href="#">CONFIRM PREVIOUS EMPLOYMENT</a><span class="dots"></span><span class="page-no">18–21</span>298 </div>299 <div class="toc-item indent2">300 <a href="#">LINKING PREVIOUS MEMBER ID/UAN/FIRST TIME EMPLOYMENT</a><span class="dots"></span><span class="page-no">18–19</span>301 </div>302 <div class="toc-item indent2">303 <a href="#">SUBMIT/CHANGE</a><span class="dots"></span><span class="page-no">19</span>304 </div>305 <div class="toc-item indent2">306 <a href="#">GENERATE PDF</a><span class="dots"></span><span class="page-no">20</span>307 </div>308 <div class="toc-item indent2">309 <a href="#">VIEW PDF</a><span class="dots"></span><span class="page-no">20</span>310 </div>311 <div class="toc-item indent2">312 <a href="#">APPROVE/REJECT PDF</a><span class="dots"></span><span class="page-no">21</span>313 </div>314 </div>315 <div class="page-footer">Page 2 of 41</div>316 </div>317 318 <div class="section-divider"></div>319 320 <!-- Page 2 -->321 <div class="page">322 <div class="watermark" style="top: 420px; left: 160px;">[IMG: EPFO Watermark]</div>323 <div class="toc">324 <div class="toc-item">325 <a href="#">HISTORY PDF</a><span class="dots"></span><span class="page-no">22</span>326 </div>327 <div class="toc-item indent1">328 <a href="#">VIEW/DOWNLOAD APPROVED PDF</a><span class="dots"></span><span class="page-no">22</span>329 </div>330 <div class="toc-item indent1">331 <a href="#">VIEW/DOWNLOAD REJECTED PDF</a><span class="dots"></span><span class="page-no">23</span>332 </div>333 334 <div class="toc-item">335 <a href="#">EXPLANATION OF KYC FUNCTIONS IN OTCP THROUGH SCREENSHOTS</a><span class="dots"></span><span class="page-no">24–40</span>336 </div>337 338 <div class="toc-item indent1">339 <a href="#">UPLOAD BULK KYC TEXT FILE</a><span class="dots"></span><span class="page-no">24–30</span>340 </div>341 <div class="toc-item indent2">342 <a href="#">POINTS TO BE ADHERED WHILE CREATING BULK KYC TEXT FILE</a><span class="dots"></span><span class="page-no">24</span>343 </div>344 <div class="toc-item indent2">345 <a href="#">STEPS TO CREATE BULK KYC TEXT FILE</a><span class="dots"></span><span class="page-no">26</span>346 </div>347 <div class="toc-item indent2">348 <a href="#">SAMPLE EXCEL FILE</a><span class="dots"></span><span class="page-no">26</span>349 </div>350 <div class="toc-item indent2">351 <a href="#">SAMPLE CSV FILE</a><span class="dots"></span><span class="page-no">27</span>352 </div>353 <div class="toc-item indent2">354 <a href="#">SAMPLE TEXT FILE</a><span class="dots"></span><span class="page-no">28</span>355 </div>356 <div class="toc-item indent2">357 <a href="#">UPLOAD BULK KYC TEXT FILE</a><span class="dots"></span><span class="page-no">28</span>358 </div>359 <div class="toc-item indent2">360 <a href="#">VIEW/BULK KYC PDF</a><span class="dots"></span><span class="page-no">30</span>361 </div>362 <div class="toc-item indent2">363 <a href="#">APPROVE BULK KYC PDF</a><span class="dots"></span><span class="page-no">30</span>364 </div>365 366 <div class="toc-item indent1">367 <a href="#">BULK KYC PDF AFTER APPROVED/REJECTED</a><span class="dots"></span><span class="page-no">32</span>368 </div>369 <div class="toc-item indent1">370 <a href="#">VIEW APPROVED KYC</a><span class="dots"></span><span class="page-no">33</span>371 </div>372 <div class="toc-item indent1">373 <a href="#">RECORDS INCOMPLETE IN TERMS OF DOB/DOI/FATHER’S/HUSBAND’S NAME</a><span class="dots"></span><span class="page-no">34</span>374 </div>375 376 <div class="toc-item indent1">377 <a href="#">UPDATE INCOMPLETE MEMBER’S DETAILS</a><span class="dots"></span><span class="page-no">34</span>378 </div>379 <div class="toc-item indent2">380 <a href="#">ADD MISSING DETAILS</a><span class="dots"></span><span class="page-no">35</span>381 </div>382 <div class="toc-item indent2">383 <a href="#">GENERATE PDF AFTER COMPLETING RECORDS</a><span class="dots"></span><span class="page-no">37</span>384 </div>385 <div class="toc-item indent2">386 <a href="#">VIEW PDF AFTER COMPLETING RECORDS</a><span class="dots"></span><span class="page-no">37</span>387 </div>388 <div class="toc-item indent2">389 <a href="#">APPROVE PDF AFTER COMPLETING RECORDS</a><span class="dots"></span><span class="page-no">38</span>390 </div>391 392 <div class="toc-item">393 <a href="#">ERROR LIST</a><span class="dots"></span><span class="page-no">40</span>394 </div>395 <div class="toc-item">396 <a href="#">IMPORTANT LINKS</a><span class="dots"></span><span class="page-no">41</span>397 </div>398 </div>399 </div>400 </div>401 402 <div class="bottom-bar">403 <div class="gesture-pill"></div>404 </div>405</div>406</body>407</html>