{"id":850,"date":"2026-03-11T03:29:39","date_gmt":"2026-03-11T03:29:39","guid":{"rendered":"https:\/\/hithotprodcut.com\/?page_id=850"},"modified":"2026-03-17T08:25:20","modified_gmt":"2026-03-17T08:25:20","slug":"top-job","status":"publish","type":"page","link":"https:\/\/hithotprodcut.com\/index.php\/top-job\/","title":{"rendered":"top job"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Topjob \u00b7 next\u2011gen portal + advanced animations<\/title>\r\n <!-- Google Fonts + Font Awesome 6 -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\r\n body {\r\n background: #f7f9fc;\r\n color: #1e293b;\r\n overflow-x: hidden;\r\n line-height: 1.5;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n \/* ---------- NAVBAR (glass) ---------- *\/\r\n header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 18px 70px;\r\n background: rgba(255,255,255,0.8);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.02);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n .logo {\r\n font-size: 26px;\r\n font-weight: 700;\r\n background: linear-gradient(145deg, #5b5bf0, #8a6cff);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n nav { display: flex; gap: 28px; }\r\n nav a {\r\n text-decoration: none;\r\n color: #2d3a5e;\r\n font-weight: 500;\r\n transition: 0.2s;\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n nav a:after {\r\n content: '';\r\n position: absolute;\r\n bottom: -5px;\r\n left: 0;\r\n width: 0%;\r\n height: 2.5px;\r\n background: #5b5bf0;\r\n border-radius: 4px;\r\n transition: 0.25s;\r\n }\r\n nav a:hover { color: #5b5bf0; }\r\n nav a:hover:after { width: 100%; }\r\n\r\n \/* Notification bell *\/\r\n .notification-icon {\r\n position: relative;\r\n margin: 0 10px;\r\n cursor: pointer;\r\n font-size: 1.4rem;\r\n color: #2d3a5e;\r\n transition: 0.2s;\r\n }\r\n .notification-icon:hover { color: #5b5bf0; }\r\n .badge {\r\n position: absolute;\r\n top: -5px;\r\n right: -8px;\r\n background: #ff4d6d;\r\n color: white;\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n padding: 2px 6px;\r\n border-radius: 20px;\r\n box-shadow: 0 2px 6px rgba(255,77,109,0.4);\r\n }\r\n\r\n .post-btn {\r\n background: #5b5bf0;\r\n color: white;\r\n padding: 12px 28px;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n box-shadow: 0 10px 18px -8px #5b5bf0;\r\n transition: all 0.25s ease;\r\n cursor: default;\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n .post-btn:hover {\r\n transform: scale(1.02) translateY(-3px);\r\n box-shadow: 0 18px 25px -10px #5b5bf0;\r\n background: #4a4ad0;\r\n }\r\n\r\n \/* ---------- NOTIFICATION DRAWER ---------- *\/\r\n .drawer-overlay {\r\n position: fixed;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(0,0,0,0.3);\r\n backdrop-filter: blur(4px);\r\n z-index: 1000;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: 0.3s;\r\n }\r\n .drawer-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n .notification-drawer {\r\n position: fixed;\r\n top: 0; right: -400px;\r\n width: 380px;\r\n height: 100vh;\r\n background: white;\r\n box-shadow: -10px 0 40px rgba(0,0,0,0.1);\r\n z-index: 1001;\r\n transition: right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: flex;\r\n flex-direction: column;\r\n border-left: 1px solid rgba(255,255,255,0.3);\r\n }\r\n .notification-drawer.open { right: 0; }\r\n .drawer-header {\r\n padding: 25px 25px 15px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-bottom: 1px solid #edf2f9;\r\n }\r\n .drawer-header h3 {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n background: linear-gradient(145deg, #1e293b, #5b5bf0);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .drawer-close {\r\n font-size: 1.8rem;\r\n color: #8f9bb3;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .drawer-close:hover { color: #5b5bf0; }\r\n .drawer-content {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: 15px 0;\r\n }\r\n .notification-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 15px;\r\n padding: 15px 25px;\r\n border-bottom: 1px solid #f1f4fa;\r\n transition: 0.2s;\r\n cursor: default;\r\n }\r\n .notification-item:hover {\r\n background: #f8faff;\r\n }\r\n .notification-avatar {\r\n width: 45px; height: 45px;\r\n border-radius: 50%;\r\n background: #e9ecff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #5b5bf0;\r\n font-size: 1.4rem;\r\n flex-shrink: 0;\r\n }\r\n .notification-details {\r\n flex: 1;\r\n }\r\n .notification-title {\r\n font-weight: 600;\r\n color: #1e293b;\r\n margin-bottom: 4px;\r\n }\r\n .notification-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 0.8rem;\r\n color: #6b7a99;\r\n }\r\n .notification-meta i { font-size: 0.7rem; color: #5b5bf0; }\r\n .notification-badge {\r\n background: #ff4d6d;\r\n color: white;\r\n font-size: 0.7rem;\r\n padding: 2px 8px;\r\n border-radius: 30px;\r\n }\r\n .drawer-footer {\r\n padding: 20px 25px;\r\n border-top: 1px solid #edf2f9;\r\n text-align: center;\r\n }\r\n .drawer-footer a {\r\n color: #5b5bf0;\r\n text-decoration: none;\r\n font-weight: 600;\r\n }\r\n\r\n \/* ---------- HERO with particle overlay ---------- *\/\r\n .hero {\r\n display: grid;\r\n grid-template-columns: 1.2fr 0.9fr;\r\n align-items: center;\r\n padding: 60px 70px 50px;\r\n gap: 40px;\r\n position: relative;\r\n isolation: isolate;\r\n }\r\n #particles-canvas {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n .shape-blob {\r\n position: absolute;\r\n left: -100px;\r\n top: -50px;\r\n width: 550px;\r\n height: 550px;\r\n background: radial-gradient(circle at 30% 30%, #9a6bff, #5b5bf0);\r\n border-radius: 42% 58% 70% 30% \/ 40% 50% 50% 60%;\r\n filter: blur(65px);\r\n opacity: 0.3;\r\n z-index: -1;\r\n animation: morph 14s infinite alternate ease-in-out;\r\n }\r\n @keyframes morph {\r\n 0% { border-radius: 42% 58% 70% 30% \/ 40% 50% 50% 60%; transform: rotate(0deg) scale(1); }\r\n 50% { border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%; transform: rotate(5deg) scale(1.05); }\r\n 100% { border-radius: 30% 70% 50% 50% \/ 30% 50% 50% 70%; transform: rotate(-5deg) scale(1); }\r\n }\r\n\r\n \/* left side *\/\r\n .hero-text h1 {\r\n font-size: 52px;\r\n font-weight: 700;\r\n line-height: 1.2;\r\n background: linear-gradient(145deg, #1e293b, #2d3a5e);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .hero-text span {\r\n background: linear-gradient(145deg, #5b5bf0, #a46bff);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n .hero-text p {\r\n margin-top: 16px;\r\n color: #5f6c86;\r\n font-size: 1.2rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .hero-text p i {\r\n color: #5b5bf0;\r\n background: #e6e9ff;\r\n padding: 6px 10px;\r\n border-radius: 40px;\r\n font-size: 0.9rem;\r\n }\r\n .search-bar {\r\n display: flex;\r\n margin-top: 35px;\r\n background: white;\r\n border-radius: 60px;\r\n box-shadow: 0 20px 35px -8px rgba(91,91,240,0.2);\r\n padding: 5px 5px 5px 20px;\r\n align-items: center;\r\n transition: box-shadow 0.3s;\r\n }\r\n .search-bar:focus-within { box-shadow: 0 25px 40px -8px #5b5bf0; }\r\n .search-item {\r\n display: flex;\r\n align-items: center;\r\n flex: 1;\r\n padding: 0 10px;\r\n border-right: 1px solid #e0e5f0;\r\n }\r\n .search-item:last-of-type { border-right: none; }\r\n .search-item i {\r\n color: #8f9bb3;\r\n margin-right: 12px;\r\n font-size: 1.1rem;\r\n }\r\n .search-item input {\r\n border: none;\r\n padding: 16px 0;\r\n font-size: 1rem;\r\n width: 100%;\r\n outline: none;\r\n background: transparent;\r\n }\r\n .search-item input::placeholder { color: #b8c1d4; font-weight: 300; }\r\n .search-btn {\r\n background: #5b5bf0;\r\n border: none;\r\n color: white;\r\n font-weight: 600;\r\n padding: 14px 32px;\r\n border-radius: 60px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: 0.2s;\r\n white-space: nowrap;\r\n margin-left: 5px;\r\n font-size: 1rem;\r\n }\r\n .search-btn:hover {\r\n background: #4242d0;\r\n transform: scale(1.02);\r\n }\r\n .hero-image {\r\n margin-top: 20px;\r\n border-radius: 30px;\r\n overflow: hidden;\r\n box-shadow: 0 30px 40px -20px rgba(0,0,0,0.3);\r\n animation: float 5s infinite alternate;\r\n }\r\n .hero-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n transition: transform 6s;\r\n }\r\n .hero-image img:hover { transform: scale(1.02); }\r\n @keyframes float {\r\n 0% { transform: translateY(0); }\r\n 100% { transform: translateY(-10px); }\r\n }\r\n\r\n \/* stats card with counter *\/\r\n .stats-card {\r\n background: rgba(255,255,255,0.8);\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n border-radius: 35px;\r\n padding: 35px 28px;\r\n box-shadow: 0 35px 60px -15px rgba(91,91,240,0.3);\r\n border: 1px solid rgba(255,255,255,0.5);\r\n transition: transform 0.4s, box-shadow 0.4s;\r\n }\r\n .stats-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 45px 70px -15px #5b5bf0;\r\n }\r\n .stats-card h3 {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin-bottom: 20px;\r\n }\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n margin: 25px 0;\r\n }\r\n .stat-item {\r\n background: white;\r\n border-radius: 24px;\r\n padding: 18px 10px;\r\n text-align: center;\r\n box-shadow: 0 6px 16px rgba(0,0,0,0.02);\r\n transition: 0.2s;\r\n }\r\n .stat-item:hover {\r\n background: #f4f6ff;\r\n transform: scale(0.98);\r\n }\r\n .stat-item .number {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n color: #5b5bf0;\r\n line-height: 1.2;\r\n }\r\n .stat-item .label { color: #5f6c86; font-size: 0.9rem; }\r\n .resume-btn {\r\n background: white;\r\n border: 1.5px solid #e0e5f0;\r\n padding: 16px;\r\n border-radius: 50px;\r\n width: 100%;\r\n font-weight: 600;\r\n color: #2d3a5e;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n transition: 0.2s;\r\n margin-top: 15px;\r\n cursor: pointer;\r\n }\r\n .resume-btn i { color: #5b5bf0; font-size: 1.2rem; }\r\n .resume-btn:hover {\r\n background: #f0f2ff;\r\n border-color: #5b5bf0;\r\n }\r\n .google-btn {\r\n margin: 20px 0 12px;\r\n }\r\n\r\n \/* ---------- FEATURED JOBS (stagger animation) ---------- *\/\r\n .jobs-section {\r\n padding: 70px;\r\n background: white;\r\n }\r\n .section-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n margin-bottom: 40px;\r\n }\r\n .section-header h2 {\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n background: linear-gradient(145deg, #1e293b, #3b4a6b);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .filter-tabs {\r\n display: flex;\r\n gap: 12px;\r\n }\r\n .filter-tab {\r\n background: #f0f3fa;\r\n padding: 10px 24px;\r\n border-radius: 40px;\r\n font-weight: 500;\r\n color: #2d3a5e;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: 1px solid transparent;\r\n }\r\n .filter-tab.active {\r\n background: #5b5bf0;\r\n color: white;\r\n box-shadow: 0 12px 18px -10px #5b5bf0;\r\n }\r\n .filter-tab:hover {\r\n background: #e0e6ff;\r\n border-color: #5b5bf0;\r\n }\r\n\r\n .job-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n gap: 30px;\r\n margin-top: 20px;\r\n }\r\n .job-card {\r\n background: #fbfcff;\r\n border-radius: 30px;\r\n padding: 28px;\r\n box-shadow: 0 15px 30px -12px rgba(0,0,0,0.05);\r\n border: 1px solid #edf2f9;\r\n transition: 0.3s cubic-bezier(0.2, 0, 0, 1);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeUp 0.5s forwards;\r\n }\r\n .job-card:nth-child(1) { animation-delay: 0.1s; }\r\n .job-card:nth-child(2) { animation-delay: 0.2s; }\r\n .job-card:nth-child(3) { animation-delay: 0.3s; }\r\n .job-card:nth-child(4) { animation-delay: 0.4s; }\r\n .job-card:nth-child(5) { animation-delay: 0.5s; }\r\n .job-card:nth-child(6) { animation-delay: 0.6s; }\r\n .job-card:nth-child(7) { animation-delay: 0.7s; }\r\n .job-card:nth-child(8) { animation-delay: 0.8s; }\r\n @keyframes fadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .job-card:hover {\r\n transform: scale(1.02) translateY(-8px);\r\n box-shadow: 0 30px 40px -15px #b1b9f0;\r\n border-color: #c7d0ff;\r\n }\r\n .job-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n .job-icon {\r\n width: 55px; height: 55px;\r\n background: #e9ecff;\r\n border-radius: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #5b5bf0;\r\n font-size: 1.8rem;\r\n }\r\n .job-title h4 { font-size: 1.3rem; font-weight: 700; }\r\n .job-title span {\r\n color: #6b7a99;\r\n font-size: 0.9rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n margin-top: 4px;\r\n }\r\n .job-tags {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n margin: 6px 0;\r\n }\r\n .tag {\r\n background: #eff2fc;\r\n padding: 6px 18px;\r\n border-radius: 50px;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n color: #2d3a5e;\r\n }\r\n .job-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-top: 10px;\r\n }\r\n .salary { font-weight: 700; color: #1e293b; font-size: 1.15rem; }\r\n .apply-btn {\r\n background: transparent;\r\n border: 1.5px solid #dbe1f0;\r\n padding: 8px 22px;\r\n border-radius: 40px;\r\n font-weight: 600;\r\n color: #5b5bf0;\r\n transition: 0.2s;\r\n cursor: pointer;\r\n }\r\n .apply-btn:hover {\r\n background: #5b5bf0;\r\n color: white;\r\n border-color: #5b5bf0;\r\n }\r\n\r\n \/* loading spinner *\/\r\n .spinner {\r\n width: 40px; height: 40px;\r\n border: 4px solid #e0e5f0;\r\n border-top-color: #5b5bf0;\r\n border-radius: 50%;\r\n animation: spin 0.8s infinite linear;\r\n margin: 40px auto;\r\n }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n \/* companies *\/\r\n .companies {\r\n padding: 60px 70px 70px;\r\n background: #f7f9fc;\r\n }\r\n .companies h2 {\r\n text-align: center;\r\n font-size: 2rem;\r\n font-weight: 600;\r\n color: #1e293b;\r\n }\r\n .company-grid {\r\n display: grid;\r\n grid-template-columns: repeat(6, 1fr);\r\n gap: 25px;\r\n margin-top: 45px;\r\n }\r\n .company-card {\r\n background: white;\r\n padding: 30px 10px;\r\n border-radius: 30px;\r\n text-align: center;\r\n box-shadow: 0 12px 28px -10px rgba(0,0,0,0.04);\r\n transition: all 0.25s;\r\n font-weight: 600;\r\n font-size: 1.2rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n color: #314067;\r\n border: 1px solid rgba(255,255,255,0.6);\r\n }\r\n .company-card i { font-size: 2.8rem; color: #5b5bf0; opacity: 0.8; }\r\n .company-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 30px 40px -12px #a0aaf0;\r\n border-color: #c1c9ff;\r\n }\r\n\r\n \/* ---------- CUSTOMER REVIEWS (with circular images) ---------- *\/\r\n .reviews-section {\r\n padding: 70px;\r\n background: white;\r\n border-top: 1px solid #edf2f9;\r\n border-bottom: 1px solid #edf2f9;\r\n }\r\n .reviews-section h2 {\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n text-align: center;\r\n background: linear-gradient(145deg, #1e293b, #3b4a6b);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 50px;\r\n }\r\n .review-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n gap: 30px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n .review-card {\r\n background: #fbfcff;\r\n border-radius: 30px;\r\n padding: 30px 25px;\r\n box-shadow: 0 15px 30px -12px rgba(0,0,0,0.05);\r\n border: 1px solid #edf2f9;\r\n transition: 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n .review-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 30px 40px -15px #b1b9f0;\r\n border-color: #c7d0ff;\r\n }\r\n .review-avatar-img {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n border: 3px solid #5b5bf0;\r\n margin-bottom: 10px;\r\n background: #e9ecff; \/* fallback while loading *\/\r\n }\r\n .review-rating {\r\n margin: 12px 0 10px;\r\n color: #f5b342;\r\n font-size: 1.1rem;\r\n letter-spacing: 2px;\r\n }\r\n .review-rating i {\r\n margin: 0 2px;\r\n }\r\n .review-text {\r\n color: #2d3a5e;\r\n font-size: 1rem;\r\n line-height: 1.6;\r\n margin: 15px 0;\r\n font-style: italic;\r\n }\r\n .reviewer-name {\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin-top: 10px;\r\n }\r\n .reviewer-role {\r\n font-size: 0.85rem;\r\n color: #6b7a99;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* back to top button *\/\r\n .back-to-top {\r\n position: fixed;\r\n bottom: 30px; right: 30px;\r\n background: #5b5bf0;\r\n color: white;\r\n width: 50px; height: 50px;\r\n border-radius: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n box-shadow: 0 10px 25px -5px #5b5bf0;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n opacity: 0; visibility: hidden;\r\n z-index: 99;\r\n border: none;\r\n }\r\n .back-to-top.show { opacity: 1; visibility: visible; }\r\n .back-to-top:hover {\r\n background: #4242d0;\r\n transform: scale(1.1) translateY(-5px);\r\n }\r\n\r\n \/* ---------- ADVANCED FOOTER ---------- *\/\r\n footer {\r\n background: #0b1120;\r\n color: #94a3b8;\r\n padding: 60px 70px 30px;\r\n }\r\n .footer-container {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;\r\n gap: 40px;\r\n margin-bottom: 40px;\r\n }\r\n .footer-column h4 {\r\n color: #e2e8f0;\r\n margin-bottom: 20px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n }\r\n .footer-column ul {\r\n list-style: none;\r\n padding: 0;\r\n }\r\n .footer-column ul li {\r\n margin-bottom: 12px;\r\n }\r\n .footer-column ul li a {\r\n color: #94a3b8;\r\n text-decoration: none;\r\n transition: 0.2s;\r\n }\r\n .footer-column ul li a:hover {\r\n color: #5b5bf0;\r\n padding-left: 5px;\r\n }\r\n .footer-logo {\r\n font-size: 28px;\r\n font-weight: 700;\r\n background: linear-gradient(145deg, #a5b4fc, #5b5bf0);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 15px;\r\n }\r\n .footer-social {\r\n display: flex;\r\n gap: 15px;\r\n margin-top: 20px;\r\n }\r\n .footer-social a {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n background: #1e293b;\r\n border-radius: 50%;\r\n color: #94a3b8;\r\n transition: 0.2s;\r\n }\r\n .footer-social a:hover {\r\n background: #5b5bf0;\r\n color: white;\r\n transform: translateY(-3px);\r\n }\r\n .newsletter-form {\r\n display: flex;\r\n margin-top: 15px;\r\n }\r\n .newsletter-form input {\r\n flex: 1;\r\n padding: 12px 16px;\r\n border: 1px solid #334155;\r\n background: #1e293b;\r\n border-radius: 50px 0 0 50px;\r\n color: white;\r\n outline: none;\r\n }\r\n .newsletter-form input:focus {\r\n border-color: #5b5bf0;\r\n }\r\n .newsletter-form button {\r\n background: #5b5bf0;\r\n border: none;\r\n padding: 0 20px;\r\n border-radius: 0 50px 50px 0;\r\n color: white;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .newsletter-form button:hover {\r\n background: #4242d0;\r\n }\r\n .footer-bottom {\r\n border-top: 1px solid #1e293b;\r\n padding-top: 30px;\r\n text-align: center;\r\n font-size: 0.9rem;\r\n }\r\n .footer-bottom i.fa-heart {\r\n color: #ff4d6d;\r\n }\r\n @media (max-width: 1000px) {\r\n .footer-container {\r\n grid-template-columns: repeat(3, 1fr);\r\n }\r\n }\r\n @media (max-width: 700px) {\r\n .footer-container {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n footer { padding: 40px 30px; }\r\n }\r\n\r\n \/* ---------- LOGIN MODAL ---------- *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(0,0,0,0.3);\r\n backdrop-filter: blur(6px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.25s ease, visibility 0.25s;\r\n }\r\n .modal-overlay.active {\r\n visibility: visible;\r\n opacity: 1;\r\n }\r\n .modal-card {\r\n background: white;\r\n max-width: 440px;\r\n width: 90%;\r\n border-radius: 40px;\r\n padding: 35px;\r\n box-shadow: 0 40px 70px -20px #1e1e5a;\r\n transform: scale(0.95) translateY(20px);\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n .modal-overlay.active .modal-card {\r\n transform: scale(1) translateY(0);\r\n }\r\n .close-modal {\r\n display: flex;\r\n justify-content: flex-end;\r\n margin-bottom: 10px;\r\n }\r\n .close-modal i {\r\n font-size: 1.8rem;\r\n color: #8f9bb3;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .close-modal i:hover { color: #5b5bf0; }\r\n .modal-card h2 {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n margin-bottom: 15px;\r\n color: #1e293b;\r\n }\r\n .auth-toggle {\r\n display: flex;\r\n gap: 15px;\r\n margin-bottom: 25px;\r\n }\r\n .auth-toggle span {\r\n font-weight: 600;\r\n color: #8f9bb3;\r\n cursor: pointer;\r\n padding-bottom: 5px;\r\n border-bottom: 2px solid transparent;\r\n transition: 0.2s;\r\n }\r\n .auth-toggle span.active {\r\n color: #5b5bf0;\r\n border-bottom-color: #5b5bf0;\r\n }\r\n .input-group {\r\n margin-bottom: 18px;\r\n position: relative;\r\n }\r\n .input-group label {\r\n font-weight: 500;\r\n color: #3a4a6b;\r\n display: block;\r\n margin-bottom: 6px;\r\n font-size: 0.9rem;\r\n }\r\n .input-group input {\r\n width: 100%;\r\n padding: 16px 22px;\r\n border: 1.5px solid #e2e8f0;\r\n border-radius: 50px;\r\n font-size: 1rem;\r\n outline: none;\r\n transition: 0.2s;\r\n }\r\n .input-group input:focus {\r\n border-color: #5b5bf0;\r\n box-shadow: 0 0 0 3px rgba(91,91,240,0.2);\r\n }\r\n .password-strength {\r\n height: 5px;\r\n background: #e2e8f0;\r\n border-radius: 10px;\r\n margin: 8px 0 5px;\r\n overflow: hidden;\r\n }\r\n .strength-bar {\r\n height: 100%;\r\n width: 0%;\r\n background: #ef4444;\r\n transition: width 0.3s, background 0.3s;\r\n }\r\n .strength-text {\r\n font-size: 0.75rem;\r\n color: #6b7a99;\r\n text-align: right;\r\n }\r\n .login-btn {\r\n background: #5b5bf0;\r\n color: white;\r\n border: none;\r\n padding: 16px;\r\n width: 100%;\r\n border-radius: 50px;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n margin: 12px 0 18px;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .login-btn:hover {\r\n background: #4242d0;\r\n transform: scale(1.01);\r\n }\r\n .google-btn-modal {\r\n margin: 8px 0 10px;\r\n }\r\n .modal-footer-text {\r\n text-align: center;\r\n margin-top: 20px;\r\n color: #617394;\r\n font-size: 0.9rem;\r\n }\r\n .modal-footer-text a {\r\n color: #5b5bf0;\r\n text-decoration: none;\r\n font-weight: 500;\r\n }\r\n .forgot-password {\r\n float: right;\r\n font-size: 0.85rem;\r\n color: #5b5bf0;\r\n cursor: pointer;\r\n }\r\n\r\n \/* ---------- PAYMENT MODAL ---------- *\/\r\n .payment-modal-overlay {\r\n position: fixed;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(0,0,0,0.4);\r\n backdrop-filter: blur(8px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1100;\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.3s ease, visibility 0.3s;\r\n }\r\n .payment-modal-overlay.active {\r\n visibility: visible;\r\n opacity: 1;\r\n }\r\n .payment-modal-card {\r\n background: white;\r\n max-width: 520px;\r\n width: 90%;\r\n border-radius: 40px;\r\n padding: 35px;\r\n box-shadow: 0 50px 80px -20px #0a0a2a;\r\n transform: scale(0.95) translateY(30px);\r\n transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n border: 1px solid rgba(255,255,255,0.5);\r\n }\r\n .payment-modal-overlay.active .payment-modal-card {\r\n transform: scale(1) translateY(0);\r\n }\r\n .payment-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 25px;\r\n }\r\n .payment-header h3 {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n background: linear-gradient(145deg, #1e293b, #5b5bf0);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .payment-close {\r\n font-size: 2rem;\r\n color: #8f9bb3;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n line-height: 1;\r\n }\r\n .payment-close:hover { color: #5b5bf0; }\r\n .job-highlight {\r\n background: #f0f4ff;\r\n border-radius: 30px;\r\n padding: 12px 20px;\r\n margin-bottom: 30px;\r\n font-weight: 600;\r\n color: #1e293b;\r\n border-left: 5px solid #5b5bf0;\r\n }\r\n .payment-tabs {\r\n display: flex;\r\n gap: 15px;\r\n margin-bottom: 25px;\r\n border-bottom: 2px solid #edf2f9;\r\n padding-bottom: 10px;\r\n }\r\n .payment-tab {\r\n font-weight: 600;\r\n color: #8f9bb3;\r\n cursor: pointer;\r\n padding: 5px 0;\r\n position: relative;\r\n transition: 0.2s;\r\n }\r\n .payment-tab.active {\r\n color: #5b5bf0;\r\n }\r\n .payment-tab.active::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: #5b5bf0;\r\n border-radius: 3px 3px 0 0;\r\n }\r\n .price-tag {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin-bottom: 20px;\r\n }\r\n .price-tag small {\r\n font-size: 1rem;\r\n font-weight: 400;\r\n color: #6b7a99;\r\n }\r\n .card-field {\r\n margin-bottom: 20px;\r\n position: relative;\r\n }\r\n .card-field label {\r\n font-weight: 500;\r\n color: #3a4a6b;\r\n display: block;\r\n margin-bottom: 6px;\r\n font-size: 0.9rem;\r\n }\r\n .card-field input {\r\n width: 100%;\r\n padding: 16px 22px;\r\n border: 1.5px solid #e2e8f0;\r\n border-radius: 50px;\r\n font-size: 1rem;\r\n outline: none;\r\n transition: 0.2s;\r\n background: white;\r\n }\r\n .card-field input:focus {\r\n border-color: #5b5bf0;\r\n box-shadow: 0 0 0 3px rgba(91,91,240,0.15);\r\n }\r\n .card-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 15px;\r\n }\r\n .pay-btn {\r\n background: #5b5bf0;\r\n color: white;\r\n border: none;\r\n padding: 18px;\r\n width: 100%;\r\n border-radius: 60px;\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n margin: 20px 0 15px;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n box-shadow: 0 15px 25px -8px #5b5bf0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n .pay-btn:hover:not(:disabled) {\r\n background: #4242d0;\r\n transform: scale(1.02);\r\n box-shadow: 0 20px 30px -8px #5b5bf0;\r\n }\r\n .pay-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n .wallet-options {\r\n display: flex;\r\n gap: 15px;\r\n justify-content: center;\r\n margin: 20px 0;\r\n }\r\n .wallet-btn {\r\n background: #f0f3fa;\r\n border: 1px solid #dbe1f0;\r\n border-radius: 50px;\r\n padding: 12px 25px;\r\n font-weight: 600;\r\n color: #2d3a5e;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .wallet-btn i { color: #5b5bf0; font-size: 1.2rem; }\r\n .wallet-btn:hover {\r\n background: #e4e9ff;\r\n border-color: #5b5bf0;\r\n }\r\n .secure-badge {\r\n text-align: center;\r\n color: #6b7a99;\r\n font-size: 0.85rem;\r\n margin-top: 20px;\r\n }\r\n .secure-badge i { color: #10b981; margin-right: 5px; }\r\n\r\n @media (max-width: 1100px) {\r\n header, .hero, .jobs-section, .companies, .reviews-section, footer { padding-left: 40px; padding-right: 40px; }\r\n .hero { grid-template-columns: 1fr; }\r\n .stats-card { max-width: 500px; margin: 0 auto; }\r\n .company-grid { grid-template-columns: repeat(3,1fr); }\r\n .notification-drawer { width: 320px; }\r\n }\r\n @media (max-width: 700px) {\r\n .search-bar { flex-direction: column; border-radius: 40px; padding: 10px; }\r\n .search-item { width: 100%; border-right: none; border-bottom: 1px solid #eee; }\r\n .filter-tabs { flex-wrap: wrap; }\r\n .company-grid { grid-template-columns: repeat(2,1fr); }\r\n .review-grid { grid-template-columns: 1fr; }\r\n .notification-drawer { width: 280px; }\r\n }\r\n <\/style>\r\n <script src=\"https:\/\/accounts.google.com\/gsi\/client\" async defer><\/script>\r\n<\/head>\r\n<body>\r\n <!-- Hidden file input for resume upload -->\r\n <input type=\"file\" id=\"resumeUpload\" accept=\".pdf\" style=\"display: none;\">\r\n\r\n <header>\r\n <div class=\"logo\">Topjob<\/div>\r\n <nav>\r\n <a href=\"#\">Home<\/a>\r\n <a href=\"#\">Jobs<\/a>\r\n <a href=\"#\">Blog<\/a>\r\n <a href=\"#\">Pages<\/a>\r\n <a href=\"#\" id=\"loginTrigger\">Log In<\/a>\r\n <\/nav>\r\n <div style=\"display: flex; align-items: center;\">\r\n <!-- Notification Bell -->\r\n <div class=\"notification-icon\" id=\"notificationBell\">\r\n <i class=\"far fa-bell\"><\/i>\r\n <span class=\"badge\">3<\/span>\r\n <\/div>\r\n <div class=\"post-btn\"><i class=\"fas fa-pen\" style=\"margin-right:8px;\"><\/i>Post a Job<\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- Hero with particles canvas -->\r\n <section class=\"hero\">\r\n <canvas id=\"particles-canvas\"><\/canvas>\r\n <div class=\"shape-blob\"><\/div>\r\n <div class=\"hero-text\">\r\n <h1>Get your new <span>dream job<\/span> today<\/h1>\r\n <p><i class=\"fas fa-briefcase\"><\/i> <span id=\"liveJobCount\">25,478<\/span> offers worldwide \u00b7 updated hourly<\/p>\r\n <div class=\"search-bar\">\r\n <div class=\"search-item\"><i class=\"fas fa-search\"><\/i><input type=\"text\" id=\"jobKeyword\" placeholder=\"Job title or keyword\"><\/div>\r\n <div class=\"search-item\"><i class=\"fas fa-map-marker-alt\"><\/i><input type=\"text\" id=\"jobLocation\" placeholder=\"Location\"><\/div>\r\n <button class=\"search-btn\" onclick=\"filterJobs()\"><i class=\"fas fa-sliders-h\"><\/i> Search<\/button>\r\n <\/div>\r\n <div class=\"hero-image\"><img decoding=\"async\" src=\"https:\/\/primostats.com\/wp-content\/uploads\/2022\/06\/banner-image.jpg\" alt=\"career banner\"><\/div>\r\n <\/div>\r\n <div class=\"stats-card\">\r\n <h3>\ud83d\ude80 Your next move<\/h3>\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\"><span class=\"number\" id=\"stat1\" data-target=\"25478\">0<\/span> <span class=\"label\">open jobs<\/span><\/div>\r\n <div class=\"stat-item\"><span class=\"number\" id=\"stat2\" data-target=\"1500\">0<\/span> <span class=\"label\">companies<\/span><\/div>\r\n <div class=\"stat-item\"><span class=\"number\" id=\"stat3\" data-target=\"500\">0<\/span> <span class=\"label\">new today<\/span><\/div>\r\n <div class=\"stat-item\"><span class=\"number\" id=\"stat4\" data-target=\"86\">0<\/span> <span class=\"label\">apply rate %<\/span><\/div>\r\n <\/div>\r\n <!-- Upload your resume button (clickable) -->\r\n <div class=\"resume-btn\" id=\"uploadResumeBtn\"><i class=\"fas fa-cloud-upload-alt\"><\/i> Upload your resume<\/div>\r\n <!-- Google login button (hero) -->\r\n <div id=\"googleLogin\" class=\"google-btn\"><\/div>\r\n <p style=\"margin-top:20px; font-size:0.9rem; display:flex; gap:12px; justify-content:center; color:#2f416b;\">\r\n <i class=\"fab fa-linkedin\"><\/i> <i class=\"fab fa-github\"><\/i> or continue with\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Featured jobs -->\r\n <section class=\"jobs-section\">\r\n <div class=\"section-header\">\r\n <h2><i class=\"fas fa-bolt\" style=\"color:#5b5bf0; margin-right:8px;\"><\/i> Featured jobs<\/h2>\r\n <div class=\"filter-tabs\">\r\n <div class=\"filter-tab active\" onclick=\"setFilter('all')\">All<\/div>\r\n <div class=\"filter-tab\" onclick=\"setFilter('fulltime')\">Full-time<\/div>\r\n <div class=\"filter-tab\" onclick=\"setFilter('parttime')\">Part-time<\/div>\r\n <div class=\"filter-tab\" onclick=\"setFilter('remote')\">Remote<\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"jobGrid\" class=\"job-grid\"><\/div>\r\n <div id=\"loadingSpinner\" class=\"spinner\" style=\"display: none;\"><\/div>\r\n <\/section>\r\n\r\n <!-- Companies -->\r\n <section class=\"companies\">\r\n <h2>Top hiring companies<\/h2>\r\n <div class=\"company-grid\">\r\n <div class=\"company-card\"><i class=\"fab fa-google\"><\/i> Google<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-amazon\"><\/i> Amazon<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-microsoft\"><\/i> Microsoft<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-facebook\"><\/i> Meta<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-apple\"><\/i> Apple<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-netflix\"><\/i> Netflix<\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Customer reviews (with circular images) -->\r\n <section class=\"reviews-section\">\r\n <h2>Trusted by job seekers<\/h2>\r\n <div class=\"review-grid\">\r\n <div class=\"review-card\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/150?u=emily\" alt=\"Emily Chen\" class=\"review-avatar-img\">\r\n <div class=\"review-rating\">\r\n <i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"review-text\">\"Land a role at Google within 3 weeks. The filters and alerts are incredibly accurate.\"<\/p>\r\n <div class=\"reviewer-name\">\u2014 Emily Chen<\/div>\r\n <div class=\"reviewer-role\">Frontend Lead<\/div>\r\n <\/div>\r\n <div class=\"review-card\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/150?u=marcus\" alt=\"Marcus Rivera\" class=\"review-avatar-img\">\r\n <div class=\"review-rating\">\r\n <i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"review-text\">\"Remote opportunities are clearly marked, and the UI makes job hunting actually enjoyable.\"<\/p>\r\n <div class=\"reviewer-name\">\u2014 Marcus Rivera<\/div>\r\n <div class=\"reviewer-role\">DevOps Engineer<\/div>\r\n <\/div>\r\n <div class=\"review-card\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/150?u=priya\" alt=\"Priya Kapoor\" class=\"review-avatar-img\">\r\n <div class=\"review-rating\">\r\n <i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"review-text\">\"Best job portal I've used. The resume upload feature got me three interviews in a week.\"<\/p>\r\n <div class=\"reviewer-name\">\u2014 Priya Kapoor<\/div>\r\n <div class=\"reviewer-role\">Product Manager<\/div>\r\n <\/div>\r\n <div class=\"review-card\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/150?u=carlos\" alt=\"Carlos Mendez\" class=\"review-avatar-img\">\r\n <div class=\"review-rating\">\r\n <i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star-half-alt\"><\/i>\r\n <\/div>\r\n <p class=\"review-text\">\"Clean design, fast search, and genuine listings. Highly recommend to fellow designers.\"<\/p>\r\n <div class=\"reviewer-name\">\u2014 Carlos Mendez<\/div>\r\n <div class=\"reviewer-role\">UX Designer<\/div>\r\n <\/div>\r\n <div class=\"review-card\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/150?u=sarah\" alt=\"Sarah Jenkins\" class=\"review-avatar-img\">\r\n <div class=\"review-rating\">\r\n <i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"review-text\">\"From application to offer, Topjob made everything seamless. Even the salary estimates were spot on.\"<\/p>\r\n <div class=\"reviewer-name\">\u2014 Sarah Jenkins<\/div>\r\n <div class=\"reviewer-role\">Data Scientist<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ADVANCED FOOTER -->\r\n <footer>\r\n <div class=\"footer-container\">\r\n <div class=\"footer-column\">\r\n <div class=\"footer-logo\">Topjob<\/div>\r\n <p>Next\u2011gen job portal connecting talent with opportunity.<\/p>\r\n <div class=\"footer-social\">\r\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-github\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-column\">\r\n <h4>Company<\/h4>\r\n <ul>\r\n <li><a href=\"#\">About Us<\/a><\/li>\r\n <li><a href=\"#\">Careers<\/a><\/li>\r\n <li><a href=\"#\">Blog<\/a><\/li>\r\n <li><a href=\"#\">Press<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-column\">\r\n <h4>Resources<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Help Center<\/a><\/li>\r\n <li><a href=\"#\">Guides<\/a><\/li>\r\n <li><a href=\"#\">Webinars<\/a><\/li>\r\n <li><a href=\"#\">Community<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-column\">\r\n <h4>Legal<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Privacy Policy<\/a><\/li>\r\n <li><a href=\"#\">Terms of Service<\/a><\/li>\r\n <li><a href=\"#\">Cookie Policy<\/a><\/li>\r\n <li><a href=\"#\">Accessibility<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-column newsletter\">\r\n <h4>Stay updated<\/h4>\r\n <p>Get the latest jobs and news<\/p>\r\n <div class=\"newsletter-form\">\r\n <input type=\"email\" placeholder=\"Your email\">\r\n <button><i class=\"fas fa-paper-plane\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 Topjob. All rights reserved. Made with <i class=\"fas fa-heart\"><\/i> for job seekers<\/p>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- Back to top -->\r\n <div class=\"back-to-top\" id=\"backToTop\"><i class=\"fas fa-arrow-up\"><\/i><\/div>\r\n\r\n <!-- LOGIN\/SIGNUP MODAL -->\r\n <div class=\"modal-overlay\" id=\"loginModal\">\r\n <div class=\"modal-card\">\r\n <div class=\"close-modal\"><i class=\"fas fa-times\" id=\"closeModalBtn\"><\/i><\/div>\r\n <h2 id=\"modalTitle\">Welcome back<\/h2>\r\n <div class=\"auth-toggle\">\r\n <span id=\"toggleLogin\" class=\"active\">Log In<\/span>\r\n <span id=\"toggleSignup\">Sign Up<\/span>\r\n <\/div>\r\n <form id=\"authForm\" onsubmit=\"return false;\">\r\n <div id=\"signupFields\" style=\"display: none;\">\r\n <div class=\"input-group\"><label>Full name<\/label><input type=\"text\" id=\"signupName\" placeholder=\"John Doe\"><\/div>\r\n <\/div>\r\n <div class=\"input-group\"><label>Email<\/label><input type=\"email\" id=\"authEmail\" placeholder=\"mila@example.com\"><\/div>\r\n <div class=\"input-group\">\r\n <label>Password <span class=\"forgot-password\" id=\"forgotPwd\" style=\"display:none;\">Forgot?<\/span><\/label>\r\n <input type=\"password\" id=\"authPassword\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\r\n <\/div>\r\n <div id=\"pwdStrength\" style=\"display: none;\">\r\n <div class=\"password-strength\"><div class=\"strength-bar\" id=\"strengthBar\"><\/div><\/div>\r\n <div class=\"strength-text\" id=\"strengthText\"><\/div>\r\n <\/div>\r\n <button class=\"login-btn\" id=\"authActionBtn\">Log in<\/button>\r\n <\/form>\r\n <div style=\"text-align:center; color:#8a9bb5;\">or<\/div>\r\n <div id=\"googleLoginModal\" class=\"google-btn-modal\"><\/div>\r\n <div class=\"modal-footer-text\" id=\"modalFooterText\">\r\n Don't have an account? <a href=\"#\" id=\"switchToSignup\">Sign up<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PAYMENT MODAL -->\r\n <div class=\"payment-modal-overlay\" id=\"paymentModal\">\r\n <div class=\"payment-modal-card\">\r\n <div class=\"payment-header\">\r\n <h3>\u26a1 Complete Application<\/h3>\r\n <div class=\"payment-close\" id=\"closePaymentModal\"><i class=\"fas fa-times\"><\/i><\/div>\r\n <\/div>\r\n <div class=\"job-highlight\" id=\"paymentJobInfo\">Senior Frontend Developer at Google<\/div>\r\n <div class=\"price-tag\">$9.99 <small>USD<\/small><\/div>\r\n <div class=\"payment-tabs\">\r\n <span class=\"payment-tab active\" id=\"tabCard\">\ud83d\udcb3 Card<\/span>\r\n <span class=\"payment-tab\" id=\"tabPaypal\">\ud83d\udcf1 PayPal<\/span>\r\n <\/div>\r\n <!-- Card payment form -->\r\n <div id=\"cardPaymentForm\">\r\n <div class=\"card-field\">\r\n <label>Card number<\/label>\r\n <input type=\"text\" placeholder=\"1234 5678 9012 3456\" id=\"cardNumber\" maxlength=\"19\">\r\n <\/div>\r\n <div class=\"card-row\">\r\n <div class=\"card-field\">\r\n <label>Expiry<\/label>\r\n <input type=\"text\" placeholder=\"MM\/YY\" id=\"cardExpiry\" maxlength=\"5\">\r\n <\/div>\r\n <div class=\"card-field\">\r\n <label>CVV<\/label>\r\n <input type=\"text\" placeholder=\"123\" id=\"cardCvv\" maxlength=\"3\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-field\">\r\n <label>Name on card<\/label>\r\n <input type=\"text\" placeholder=\"John Doe\" id=\"cardName\">\r\n <\/div>\r\n <\/div>\r\n <!-- PayPal placeholder -->\r\n <div id=\"paypalSection\" style=\"display: none; text-align: center; padding: 30px 0;\">\r\n <i class=\"fab fa-paypal\" style=\"font-size: 4rem; color: #003087;\"><\/i>\r\n <p style=\"margin: 15px 0;\">You'll be redirected to PayPal.<\/p>\r\n <\/div>\r\n <button class=\"pay-btn\" id=\"payNowBtn\"><i class=\"fas fa-lock\"><\/i> Pay Now<\/button>\r\n <div class=\"wallet-options\">\r\n <div class=\"wallet-btn\"><i class=\"fab fa-apple-pay\"><\/i> Apple Pay<\/div>\r\n <div class=\"wallet-btn\"><i class=\"fab fa-google-pay\"><\/i> Google Pay<\/div>\r\n <\/div>\r\n <div class=\"secure-badge\">\r\n <i class=\"fas fa-shield-alt\"><\/i> Secure payment \u00b7 SSL encrypted\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- NOTIFICATION DRAWER & OVERLAY -->\r\n <div class=\"drawer-overlay\" id=\"drawerOverlay\"><\/div>\r\n <div class=\"notification-drawer\" id=\"notificationDrawer\">\r\n <div class=\"drawer-header\">\r\n <h3>Notifications<\/h3>\r\n <div class=\"drawer-close\" id=\"closeDrawer\"><i class=\"fas fa-times\"><\/i><\/div>\r\n <\/div>\r\n <div class=\"drawer-content\">\r\n <div class=\"notification-item\">\r\n <div class=\"notification-avatar\"><i class=\"fas fa-user\"><\/i><\/div>\r\n <div class=\"notification-details\">\r\n <div class=\"notification-title\">Your application was viewed<\/div>\r\n <div class=\"notification-meta\"><i class=\"fas fa-clock\"><\/i> 2 hours ago<\/div>\r\n <\/div>\r\n <span class=\"notification-badge\">New<\/span>\r\n <\/div>\r\n <div class=\"notification-item\">\r\n <div class=\"notification-avatar\"><i class=\"fas fa-building\"><\/i><\/div>\r\n <div class=\"notification-details\">\r\n <div class=\"notification-title\">Google posted a new job: \"UX Designer\"<\/div>\r\n <div class=\"notification-meta\"><i class=\"fas fa-clock\"><\/i> 5 hours ago<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"notification-item\">\r\n <div class=\"notification-avatar\"><i class=\"fas fa-calendar\"><\/i><\/div>\r\n <div class=\"notification-details\">\r\n <div class=\"notification-title\">Interview scheduled with Microsoft<\/div>\r\n <div class=\"notification-meta\"><i class=\"fas fa-clock\"><\/i> Yesterday<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"notification-item\">\r\n <div class=\"notification-avatar\"><i class=\"fas fa-check-circle\"><\/i><\/div>\r\n <div class=\"notification-details\">\r\n <div class=\"notification-title\">Your profile is 90% complete<\/div>\r\n <div class=\"notification-meta\"><i class=\"fas fa-clock\"><\/i> 2 days ago<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"notification-item\">\r\n <div class=\"notification-avatar\"><i class=\"fas fa-users\"><\/i><\/div>\r\n <div class=\"notification-details\">\r\n <div class=\"notification-title\">New networking event in your area<\/div>\r\n <div class=\"notification-meta\"><i class=\"fas fa-clock\"><\/i> 3 days ago<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"drawer-footer\">\r\n <a href=\"#\">View all notifications <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ -------------------- 1. Particles animation --------------------\r\n const canvas = document.getElementById('particles-canvas');\r\n if (canvas) {\r\n const ctx = canvas.getContext('2d');\r\n let width, height;\r\n let particles = [];\r\n function initParticles() {\r\n width = canvas.clientWidth; height = canvas.clientHeight;\r\n canvas.width = width; canvas.height = height;\r\n particles = [];\r\n for (let i = 0; i < 40; i++) {\r\n particles.push({\r\n x: Math.random() * width,\r\n y: Math.random() * height,\r\n vx: (Math.random() - 0.5) * 0.8,\r\n vy: (Math.random() - 0.5) * 0.8,\r\n radius: Math.random() * 2 + 1,\r\n });\r\n }\r\n }\r\n function drawParticles() {\r\n if (!ctx) return;\r\n ctx.clearRect(0, 0, width, height);\r\n ctx.fillStyle = '#5b5bf0';\r\n particles.forEach(p => {\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\r\n ctx.fillStyle = 'rgba(91, 91, 240, 0.2)';\r\n ctx.fill();\r\n p.x += p.vx; p.y += p.vy;\r\n if (p.x < 0 || p.x > width) p.vx *= -1;\r\n if (p.y < 0 || p.y > height) p.vy *= -1;\r\n });\r\n requestAnimationFrame(drawParticles);\r\n }\r\n window.addEventListener('resize', () => { initParticles(); });\r\n initParticles();\r\n drawParticles();\r\n }\r\n\r\n \/\/ -------------------- 2. Animated counters --------------------\r\n function animateCounter(el, target) {\r\n let current = 0;\r\n const increment = target \/ 60;\r\n const timer = setInterval(() => {\r\n current += increment;\r\n if (current >= target) {\r\n el.innerText = target.toLocaleString();\r\n clearInterval(timer);\r\n } else {\r\n el.innerText = Math.floor(current).toLocaleString();\r\n }\r\n }, 16);\r\n }\r\n document.querySelectorAll('.stat-item .number').forEach(stat => {\r\n const target = parseInt(stat.getAttribute('data-target'));\r\n animateCounter(stat, target);\r\n });\r\n\r\n \/\/ -------------------- 3. Job data & filtering with loading simulation --------------------\r\n const jobs = [\r\n { title: \"Senior Frontend Developer\", company: \"Google\", location: \"New York, NY\", type: \"fulltime\", salary: \"$120k-150k\", icon: \"fab fa-google\", tags: [\"React\", \"TypeScript\"] },\r\n { title: \"Product Designer\", company: \"Apple\", location: \"Cupertino, CA\", type: \"fulltime\", salary: \"$110k-140k\", icon: \"fab fa-apple\", tags: [\"Figma\", \"UI\/UX\"] },\r\n { title: \"DevOps Engineer\", company: \"Microsoft\", location: \"Remote\", type: \"remote\", salary: \"$130k-165k\", icon: \"fab fa-microsoft\", tags: [\"AWS\", \"Kubernetes\"] },\r\n { title: \"Content Writer\", company: \"Netflix\", location: \"Los Angeles, CA\", type: \"parttime\", salary: \"$50k-70k\", icon: \"fab fa-netflix\", tags: [\"SEO\", \"Creative\"] },\r\n { title: \"Data Analyst\", company: \"Meta\", location: \"Austin, TX\", type: \"fulltime\", salary: \"$95k-120k\", icon: \"fab fa-facebook\", tags: [\"SQL\", \"Python\"] },\r\n { title: \"Customer Support\", company: \"Amazon\", location: \"Remote\", type: \"remote\", salary: \"$45k-60k\", icon: \"fab fa-amazon\", tags: [\"Communication\"] },\r\n { title: \"Backend Engineer\", company: \"Stripe\", location: \"San Francisco\", type: \"fulltime\", salary: \"$140k-180k\", icon: \"fas fa-building\", tags: [\"Go\", \"Microservices\"] },\r\n { title: \"HR Coordinator\", company: \"Slack\", location: \"Denver, CO\", type: \"parttime\", salary: \"$55k-70k\", icon: \"fas fa-users\", tags: [\"Recruiting\"] },\r\n ];\r\n\r\n const jobGrid = document.getElementById('jobGrid');\r\n const spinner = document.getElementById('loadingSpinner');\r\n let currentFilter = 'all';\r\n\r\n function renderJobs(filterType = 'all', keyword = '', location = '') {\r\n spinner.style.display = 'block';\r\n jobGrid.style.opacity = '0.5';\r\n setTimeout(() => {\r\n const filtered = jobs.filter(job => {\r\n if (filterType !== 'all' && job.type !== filterType) return false;\r\n if (keyword && !job.title.toLowerCase().includes(keyword) && !job.company.toLowerCase().includes(keyword)) return false;\r\n if (location && !job.location.toLowerCase().includes(location)) return false;\r\n return true;\r\n });\r\n if (filtered.length === 0) {\r\n jobGrid.innerHTML = `<div style=\"grid-column:1\/-1; text-align:center; padding:50px; background:#f0f3fa; border-radius:60px;\">\u2728 No matching jobs found. Try another search \u2728<\/div>`;\r\n } else {\r\n jobGrid.innerHTML = filtered.map(job => `\r\n <div class=\"job-card\">\r\n <div class=\"job-header\">\r\n <div class=\"job-icon\"><i class=\"${job.icon}\"><\/i><\/div>\r\n <div class=\"job-title\"><h4>${job.title}<\/h4><span><i class=\"fas fa-building\"><\/i> ${job.company} \u00b7 <i class=\"fas fa-map-pin\"><\/i> ${job.location}<\/span><\/div>\r\n <\/div>\r\n <div class=\"job-tags\">${job.tags.map(t => `<span class=\"tag\">${t}<\/span>`).join('')}<span class=\"tag\">${job.type === 'fulltime' ? '\u23f0 Full\u2011time' : (job.type==='parttime'? '\ud83d\udd52 Part\u2011time' : '\ud83c\udf0d Remote')}<\/span><\/div>\r\n <div class=\"job-footer\"><span class=\"salary\">${job.salary}<\/span><span class=\"apply-btn\">Apply now<\/span><\/div>\r\n <\/div>`).join('');\r\n }\r\n spinner.style.display = 'none';\r\n jobGrid.style.opacity = '1';\r\n }, 300);\r\n }\r\n\r\n function setFilter(type) {\r\n currentFilter = type;\r\n document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));\r\n event.target.classList.add('active');\r\n filterJobs();\r\n }\r\n function filterJobs() {\r\n const keyword = document.getElementById('jobKeyword').value.toLowerCase().trim();\r\n const loc = document.getElementById('jobLocation').value.toLowerCase().trim();\r\n renderJobs(currentFilter, keyword, loc);\r\n }\r\n document.getElementById('jobKeyword').addEventListener('input', filterJobs);\r\n document.getElementById('jobLocation').addEventListener('input', filterJobs);\r\n\r\n \/\/ -------------------- 4. Google Sign-In & login state --------------------\r\n let loggedIn = false; \/\/ track login status\r\n let pendingUpload = false; \/\/ whether to trigger file picker after login\r\n\r\n window.onload = function () {\r\n google.accounts.id.initialize({\r\n client_id: \"510530185990-ncmj3dqkmi42d0mparm1lmpc30qc1vkk.apps.googleusercontent.com\",\r\n callback: handleCredentialResponse\r\n });\r\n google.accounts.id.renderButton(document.getElementById(\"googleLogin\"), { theme: \"outline\", size: \"large\", width: \"300\" });\r\n google.accounts.id.renderButton(document.getElementById(\"googleLoginModal\"), { theme: \"outline\", size: \"large\", width: \"300\" });\r\n };\r\n function handleCredentialResponse(response) {\r\n const user = parseJwt(response.credential);\r\n alert(\"Welcome \" + user.name + \" (\" + user.email + \")\");\r\n document.getElementById(\"loginModal\").classList.remove(\"active\");\r\n loggedIn = true; \/\/ user is now logged in\r\n if (pendingUpload) {\r\n pendingUpload = false;\r\n triggerResumeUpload();\r\n }\r\n }\r\n function parseJwt(token) {\r\n const base64Url = token.split('.')[1];\r\n const base64 = base64Url.replace(\/-\/g, '+').replace(\/_\/g, '\/');\r\n const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));\r\n return JSON.parse(jsonPayload);\r\n }\r\n\r\n \/\/ -------------------- 5. Modal with toggle & password strength --------------------\r\n const modal = document.getElementById('loginModal');\r\n const loginTrigger = document.getElementById('loginTrigger');\r\n const closeBtn = document.getElementById('closeModalBtn');\r\n const toggleLogin = document.getElementById('toggleLogin');\r\n const toggleSignup = document.getElementById('toggleSignup');\r\n const signupFields = document.getElementById('signupFields');\r\n const pwdStrengthDiv = document.getElementById('pwdStrength');\r\n const authPassword = document.getElementById('authPassword');\r\n const strengthBar = document.getElementById('strengthBar');\r\n const strengthText = document.getElementById('strengthText');\r\n const authActionBtn = document.getElementById('authActionBtn');\r\n const modalTitle = document.getElementById('modalTitle');\r\n const forgotPwd = document.getElementById('forgotPwd');\r\n const switchToSignup = document.getElementById('switchToSignup');\r\n const modalFooterText = document.getElementById('modalFooterText');\r\n\r\n let isLogin = true;\r\n function setAuthMode(loginMode) {\r\n isLogin = loginMode;\r\n signupFields.style.display = loginMode ? 'none' : 'block';\r\n pwdStrengthDiv.style.display = loginMode ? 'none' : 'block';\r\n forgotPwd.style.display = loginMode ? 'inline' : 'none';\r\n modalTitle.innerText = loginMode ? 'Welcome back' : 'Create account';\r\n authActionBtn.innerText = loginMode ? 'Log in' : 'Sign up';\r\n toggleLogin.classList.toggle('active', loginMode);\r\n toggleSignup.classList.toggle('active', !loginMode);\r\n modalFooterText.innerHTML = loginMode ? \"Don't have an account? <a href='#' id='switchToSignup'>Sign up<\/a>\" : \"Already have an account? <a href='#' id='switchToLogin'>Log in<\/a>\";\r\n document.getElementById('switchToSignup')?.addEventListener('click', (e) => { e.preventDefault(); setAuthMode(false); });\r\n document.getElementById('switchToLogin')?.addEventListener('click', (e) => { e.preventDefault(); setAuthMode(true); });\r\n }\r\n\r\n toggleLogin.addEventListener('click', () => setAuthMode(true));\r\n toggleSignup.addEventListener('click', () => setAuthMode(false));\r\n switchToSignup.addEventListener('click', (e) => { e.preventDefault(); setAuthMode(false); });\r\n\r\n authPassword.addEventListener('input', function() {\r\n if (isLogin) return;\r\n const val = this.value;\r\n let strength = 0;\r\n if (val.length >= 6) strength++;\r\n if (val.length >= 8) strength++;\r\n if (\/[A-Z]\/.test(val)) strength++;\r\n if (\/[0-9]\/.test(val)) strength++;\r\n if (\/[^A-Za-z0-9]\/.test(val)) strength++;\r\n const width = Math.min(strength * 20, 100);\r\n strengthBar.style.width = width + '%';\r\n if (width < 40) { strengthBar.style.background = '#ef4444'; strengthText.innerText = 'Weak'; }\r\n else if (width < 70) { strengthBar.style.background = '#f59e0b'; strengthText.innerText = 'Medium'; }\r\n else { strengthBar.style.background = '#10b981'; strengthText.innerText = 'Strong'; }\r\n });\r\n\r\n loginTrigger.addEventListener('click', (e) => { e.preventDefault(); modal.classList.add('active'); setAuthMode(true); });\r\n closeBtn.addEventListener('click', () => modal.classList.remove('active'));\r\n modal.addEventListener('click', (e) => { if (e.target === modal) modal.classList.remove('active'); });\r\n\r\n \/\/ -------------------- 6. Back to top --------------------\r\n const backBtn = document.getElementById('backToTop');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 600) backBtn.classList.add('show');\r\n else backBtn.classList.remove('show');\r\n });\r\n backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\r\n\r\n \/\/ -------------------- 7. PAYMENT MODAL --------------------\r\n const paymentModal = document.getElementById('paymentModal');\r\n const closePayment = document.getElementById('closePaymentModal');\r\n const payNowBtn = document.getElementById('payNowBtn');\r\n const tabCard = document.getElementById('tabCard');\r\n const tabPaypal = document.getElementById('tabPaypal');\r\n const cardForm = document.getElementById('cardPaymentForm');\r\n const paypalSection = document.getElementById('paypalSection');\r\n\r\n \/\/ Open payment modal when apply button clicked (event delegation)\r\n document.body.addEventListener('click', function(e) {\r\n if (e.target.classList.contains('apply-btn')) {\r\n const jobCard = e.target.closest('.job-card');\r\n if (jobCard) {\r\n const title = jobCard.querySelector('.job-title h4').innerText;\r\n const company = jobCard.querySelector('.job-title span').innerText.split('\u00b7')[0].trim();\r\n document.getElementById('paymentJobInfo').innerText = `${title} at ${company}`;\r\n paymentModal.classList.add('active');\r\n }\r\n }\r\n });\r\n\r\n closePayment.addEventListener('click', () => paymentModal.classList.remove('active'));\r\n paymentModal.addEventListener('click', (e) => { if (e.target === paymentModal) paymentModal.classList.remove('active'); });\r\n\r\n \/\/ Tab switching\r\n tabCard.addEventListener('click', () => {\r\n tabCard.classList.add('active');\r\n tabPaypal.classList.remove('active');\r\n cardForm.style.display = 'block';\r\n paypalSection.style.display = 'none';\r\n });\r\n tabPaypal.addEventListener('click', () => {\r\n tabPaypal.classList.add('active');\r\n tabCard.classList.remove('active');\r\n cardForm.style.display = 'none';\r\n paypalSection.style.display = 'block';\r\n });\r\n\r\n \/\/ Simple card input formatting (demo)\r\n document.getElementById('cardNumber').addEventListener('input', function(e) {\r\n this.value = this.value.replace(\/\\D\/g, '').replace(\/(.{4})\/g, '$1 ').trim().substring(0,19);\r\n });\r\n document.getElementById('cardExpiry').addEventListener('input', function(e) {\r\n this.value = this.value.replace(\/\\D\/g, '').replace(\/^(\\d{2})(\\d)\/, '$1\/$2').substring(0,5);\r\n });\r\n document.getElementById('cardCvv').addEventListener('input', function(e) {\r\n this.value = this.value.replace(\/\\D\/g, '').substring(0,3);\r\n });\r\n\r\n \/\/ Payment simulation\r\n payNowBtn.addEventListener('click', function() {\r\n if (tabCard.classList.contains('active')) {\r\n \/\/ simple validation (just check fields not empty)\r\n const cardNum = document.getElementById('cardNumber').value.trim();\r\n const expiry = document.getElementById('cardExpiry').value.trim();\r\n const cvv = document.getElementById('cardCvv').value.trim();\r\n const name = document.getElementById('cardName').value.trim();\r\n if (!cardNum || !expiry || !cvv || !name) {\r\n alert('Please fill all card details');\r\n return;\r\n }\r\n }\r\n \/\/ simulate payment\r\n const btn = this;\r\n btn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Processing...';\r\n btn.disabled = true;\r\n setTimeout(() => {\r\n btn.innerHTML = '<i class=\"fas fa-lock\"><\/i> Pay Now';\r\n btn.disabled = false;\r\n paymentModal.classList.remove('active');\r\n alert('Payment successful! Your application has been submitted.');\r\n }, 2000);\r\n });\r\n\r\n \/\/ -------------------- 8. NOTIFICATION DRAWER --------------------\r\n const bell = document.getElementById('notificationBell');\r\n const drawer = document.getElementById('notificationDrawer');\r\n const overlay = document.getElementById('drawerOverlay');\r\n const closeDrawer = document.getElementById('closeDrawer');\r\n\r\n function openDrawer() {\r\n drawer.classList.add('open');\r\n overlay.classList.add('active');\r\n }\r\n function closeDrawerFunc() {\r\n drawer.classList.remove('open');\r\n overlay.classList.remove('active');\r\n }\r\n\r\n bell.addEventListener('click', openDrawer);\r\n closeDrawer.addEventListener('click', closeDrawerFunc);\r\n overlay.addEventListener('click', closeDrawerFunc);\r\n\r\n \/\/ -------------------- 9. RESUME UPLOAD (with login check) --------------------\r\n const uploadBtn = document.getElementById('uploadResumeBtn');\r\n const fileInput = document.getElementById('resumeUpload');\r\n\r\n function triggerResumeUpload() {\r\n fileInput.click(); \/\/ open file picker\r\n }\r\n\r\n uploadBtn.addEventListener('click', function() {\r\n if (loggedIn) {\r\n triggerResumeUpload();\r\n } else {\r\n pendingUpload = true; \/\/ set flag\r\n modal.classList.add('active'); \/\/ show login modal\r\n setAuthMode(true); \/\/ ensure login tab is active\r\n }\r\n });\r\n\r\n \/\/ When user selects a file, show a success message (simulate upload)\r\n fileInput.addEventListener('change', function(e) {\r\n if (this.files.length > 0) {\r\n const fileName = this.files[0].name;\r\n alert(`Resume \"${fileName}\" selected. (Simulated upload \u2013 implement actual upload here.)`);\r\n \/\/ You can now upload the file using FormData \/ fetch\r\n }\r\n \/\/ Reset input so same file can be chosen again if needed\r\n this.value = '';\r\n });\r\n\r\n \/\/ initial render\r\n renderJobs('all');\r\n window.addEventListener('load', () => modal.classList.add('active')); \/\/ auto-show modal\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Topjob \u00b7 next\u2011gen portal + advanced animations Topjob Home Jobs Blog Pages Log In 3 Post a Job Get your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-850","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/comments?post=850"}],"version-history":[{"count":217,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/850\/revisions"}],"predecessor-version":[{"id":1075,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/850\/revisions\/1075"}],"wp:attachment":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/media?parent=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}