{"id":20,"date":"2026-07-30T23:19:49","date_gmt":"2026-07-30T23:19:49","guid":{"rendered":"https:\/\/teleipay.site\/?p=20"},"modified":"2026-07-30T23:19:49","modified_gmt":"2026-07-30T23:19:49","slug":"20","status":"publish","type":"post","link":"https:\/\/teleipay.site\/?p=20","title":{"rendered":""},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ===== RESET & BASE ===== *\/\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    background: #f4f8ff;\n    color: #1a1a2e;\n    line-height: 1.6;\n}\n\n:root {\n    --sky-blue: #4facfe;\n    --sky-blue-dark: #3d8bca;\n    --sky-blue-light: #d4e8ff;\n    --black: #0b0b1a;\n    --dark-gray: #1e1e30;\n    --white: #ffffff;\n    --off-white: #f0f6ff;\n    --shadow: 0 20px 40px rgba(79, 172, 254, 0.15);\n    --radius: 20px;\n    --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* ===== UTILITY ===== *\/\n.highlight {\n    color: var(--sky-blue);\n    font-weight: 700;\n}\n\n.page {\n    display: none;\n    animation: fadeIn 0.5s ease;\n}\n\n.page.active {\n    display: block;\n}\n\n@keyframes fadeIn {\n    0% { opacity: 0; transform: translateY(20px); }\n    100% { opacity: 1; transform: translateY(0); }\n}\n\n\/* ===== BUTTONS ===== *\/\n.btn-primary {\n    background: linear-gradient(135deg, var(--sky-blue), var(--sky-blue-dark));\n    color: var(--white);\n    border: none;\n    padding: 14px 32px;\n    border-radius: 50px;\n    font-weight: 600;\n    font-size: 1rem;\n    cursor: pointer;\n    transition: var(--transition);\n    box-shadow: 0 8px 24px rgba(79, 172, 254, 0.35);\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.btn-primary:hover {\n    transform: translateY(-3px) scale(1.02);\n    box-shadow: 0 14px 36px rgba(79, 172, 254, 0.5);\n}\n\n.btn-primary:active {\n    transform: scale(0.97);\n}\n\n\/* ===== SIGNUP PAGE ===== *\/\n#signupPage {\n    min-height: 100vh;\n    background: linear-gradient(145deg, var(--white) 0%, var(--off-white) 100%);\n    padding: 40px 20px;\n}\n\n.container {\n    max-width: 1100px;\n    margin: 0 auto;\n}\n\n\/* Logo *\/\n.logo-container {\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n.logo {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 2.8rem;\n    font-weight: 900;\n    color: var(--black);\n    letter-spacing: -1px;\n}\n\n.logo-icon {\n    background: linear-gradient(135deg, var(--sky-blue), #2b7ecf);\n    color: var(--white);\n    width: 60px;\n    height: 60px;\n    border-radius: 18px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 2rem;\n    box-shadow: 0 8px 28px rgba(79, 172, 254, 0.4);\n    transition: var(--transition);\n}\n\n.logo:hover .logo-icon {\n    transform: rotate(-10deg) scale(1.05);\n}\n\n.logo-text {\n    background: linear-gradient(135deg, var(--black), #2a2a4a);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n}\n\n.tagline {\n    color: var(--sky-blue);\n    font-weight: 500;\n    letter-spacing: 3px;\n    font-size: 0.9rem;\n    margin-top: 4px;\n    text-transform: uppercase;\n}\n\n\/* Hero *\/\n.hero-section {\n    text-align: center;\n    max-width: 740px;\n    margin: 0 auto 50px;\n}\n\n.hero-title {\n    font-size: 3rem;\n    font-weight: 900;\n    line-height: 1.15;\n    margin-bottom: 16px;\n    color: var(--black);\n}\n\n.hero-desc {\n    font-size: 1.15rem;\n    color: #3a3a5a;\n    max-width: 600px;\n    margin: 0 auto 24px;\n}\n\n.hero-features {\n    display: flex;\n    justify-content: center;\n    gap: 32px;\n    flex-wrap: wrap;\n}\n\n.hero-features span {\n    background: var(--white);\n    padding: 8px 20px;\n    border-radius: 50px;\n    font-weight: 500;\n    font-size: 0.9rem;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.04);\n    color: var(--dark-gray);\n}\n\n.hero-features i {\n    color: var(--sky-blue);\n    margin-right: 8px;\n}\n\n\/* Form Card *\/\n.form-card {\n    background: var(--white);\n    max-width: 520px;\n    margin: 0 auto 50px;\n    padding: 40px 44px;\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    border: 1px solid rgba(79, 172, 254, 0.08);\n    transition: var(--transition);\n}\n\n.form-card:hover {\n    box-shadow: 0 30px 60px rgba(79, 172, 254, 0.18);\n}\n\n.form-card h2 {\n    font-size: 1.8rem;\n    font-weight: 800;\n    color: var(--black);\n}\n\n.form-sub {\n    color: #6a6a8a;\n    margin-bottom: 28px;\n    font-size: 0.95rem;\n}\n\n.form-group {\n    margin-bottom: 18px;\n}\n\n.form-group label {\n    display: block;\n    font-weight: 600;\n    font-size: 0.85rem;\n    color: var(--dark-gray);\n    margin-bottom: 5px;\n}\n\n.form-group label i {\n    color: var(--sky-blue);\n    margin-right: 6px;\n}\n\n.form-group input,\n.form-group textarea {\n    width: 100%;\n    padding: 14px 16px;\n    border: 2px solid #e8edf5;\n    border-radius: 14px;\n    font-size: 1rem;\n    transition: var(--transition);\n    background: var(--off-white);\n    font-family: inherit;\n}\n\n.form-group input:focus,\n.form-group textarea:focus {\n    border-color: var(--sky-blue);\n    outline: none;\n    background: var(--white);\n    box-shadow: 0 0 0 5px rgba(79, 172, 254, 0.12);\n}\n\n.form-group textarea {\n    resize: vertical;\n    min-height: 100px;\n}\n\n.terms {\n    text-align: center;\n    margin-top: 20px;\n    font-size: 0.8rem;\n    color: #8a8aaa;\n}\n\n\/* About Section *\/\n.about-section {\n    background: var(--white);\n    padding: 50px 44px;\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    margin-top: 30px;\n    border: 1px solid rgba(79, 172, 254, 0.06);\n}\n\n.about-section h2 {\n    font-size: 2.2rem;\n    font-weight: 800;\n    text-align: center;\n    margin-bottom: 16px;\n}\n\n.about-section > p {\n    text-align: center;\n    max-width: 700px;\n    margin: 0 auto 36px;\n    font-size: 1.05rem;\n    color: #3a3a5a;\n}\n\n.about-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 30px;\n    margin-bottom: 36px;\n}\n\n.about-item {\n    text-align: center;\n    padding: 20px 12px;\n    background: var(--off-white);\n    border-radius: 16px;\n    transition: var(--transition);\n}\n\n.about-item:hover {\n    transform: translateY(-6px);\n    background: var(--white);\n    box-shadow: 0 12px 32px rgba(79, 172, 254, 0.1);\n}\n\n.about-item i {\n    font-size: 2.4rem;\n    color: var(--sky-blue);\n    margin-bottom: 10px;\n}\n\n.about-item h4 {\n    font-weight: 700;\n    font-size: 1.1rem;\n}\n\n.about-item p {\n    font-size: 0.9rem;\n    color: #5a5a7a;\n}\n\n.coming-soon-banner {\n    background: linear-gradient(135deg, #f0f6ff, #dce8ff);\n    padding: 16px 24px;\n    border-radius: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    font-weight: 600;\n    color: var(--sky-blue-dark);\n    border: 2px dashed var(--sky-blue);\n    flex-wrap: wrap;\n}\n\n.coming-soon-banner i {\n    font-size: 1.4rem;\n}\n\n\/* ===== DASHBOARD ===== *\/\n#dashboardPage {\n    display: none;\n    min-height: 100vh;\n    background: var(--off-white);\n}\n\n#dashboardPage.active {\n    display: flex;\n}\n\n\/* Sidebar *\/\n.sidebar {\n    width: 260px;\n    background: var(--black);\n    color: var(--white);\n    padding: 28px 20px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    min-height: 100vh;\n    position: sticky;\n    top: 0;\n    height: 100vh;\n    box-shadow: 4px 0 30px rgba(0,0,0,0.1);\n}\n\n.sidebar-logo {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 1.6rem;\n    font-weight: 800;\n    margin-bottom: 40px;\n}\n\n.sidebar-logo .logo-icon {\n    width: 44px;\n    height: 44px;\n    font-size: 1.4rem;\n    border-radius: 14px;\n}\n\n.sidebar-menu {\n    list-style: none;\n    flex: 1;\n}\n\n.sidebar-menu li {\n    padding: 14px 18px;\n    margin-bottom: 6px;\n    border-radius: 14px;\n    cursor: pointer;\n    transition: var(--transition);\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    color: rgba(255,255,255,0.7);\n}\n\n.sidebar-menu li i {\n    width: 24px;\n    font-size: 1.1rem;\n}\n\n.sidebar-menu li:hover {\n    background: rgba(79, 172, 254, 0.12);\n    color: var(--white);\n}\n\n.sidebar-menu li.active {\n    background: linear-gradient(135deg, var(--sky-blue), var(--sky-blue-dark));\n    color: var(--white);\n    box-shadow: 0 8px 24px rgba(79, 172, 254, 0.3);\n}\n\n.sidebar-footer button {\n    background: transparent;\n    border: 2px solid rgba(255,255,255,0.15);\n    color: rgba(255,255,255,0.7);\n    padding: 12px 18px;\n    border-radius: 14px;\n    width: 100%;\n    font-weight: 600;\n    cursor: pointer;\n    transition: var(--transition);\n    font-size: 0.95rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n}\n\n.sidebar-footer button:hover {\n    background: rgba(255,50,50,0.15);\n    border-color: #ff5555;\n    color: #ff5555;\n}\n\n\/* Main Content *\/\n.main-content {\n    flex: 1;\n    padding: 32px 40px 60px;\n    overflow-y: auto;\n    max-height: 100vh;\n}\n\n.dashboard-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-bottom: 32px;\n}\n\n.dashboard-header h1 {\n    font-size: 2rem;\n    font-weight: 800;\n}\n\n.user-greeting {\n    font-weight: 500;\n    color: #4a4a6a;\n    background: var(--white);\n    padding: 8px 20px;\n    border-radius: 50px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.04);\n}\n\n.tab-content {\n    display: none;\n    animation: fadeIn 0.35s ease;\n}\n\n.tab-content.active {\n    display: block;\n}\n\n\/* Balance Cards *\/\n.balance-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 20px;\n    margin-bottom: 30px;\n}\n\n.balance-card {\n    background: var(--white);\n    padding: 24px 28px;\n    border-radius: var(--radius);\n    box-shadow: 0 6px 20px rgba(0,0,0,0.04);\n    display: flex;\n    align-items: center;\n    gap: 18px;\n    transition: var(--transition);\n    border: 1px solid rgba(79, 172, 254, 0.06);\n}\n\n.balance-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 16px 40px rgba(79, 172, 254, 0.1);\n}\n\n.balance-card i {\n    font-size: 2.2rem;\n    color: var(--sky-blue);\n    width: 50px;\n    height: 50px;\n    background: var(--off-white);\n    border-radius: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.balance-card .label {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #6a6a8a;\n    display: block;\n}\n\n.balance-card .amount {\n    font-size: 1.6rem;\n    font-weight: 800;\n    color: var(--black);\n}\n\n.balance-card.total .amount {\n    color: var(--sky-blue);\n}\n\n.balance-card.bonus .amount {\n    color: #00b894;\n}\n\n.balance-card.referral .amount {\n    color: #fdcb6e;\n}\n\n\/* ===== REFERRAL SECTION ===== *\/\n.referral-section {\n    background: var(--white);\n    padding: 28px 32px;\n    border-radius: var(--radius);\n    margin-bottom: 30px;\n    box-shadow: 0 6px 20px rgba(0,0,0,0.04);\n    border: 2px solid rgba(79, 172, 254, 0.12);\n    transition: var(--transition);\n}\n\n.referral-section:hover {\n    border-color: var(--sky-blue);\n    box-shadow: 0 12px 36px rgba(79, 172, 254, 0.1);\n}\n\n.referral-header {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.referral-header i {\n    font-size: 2rem;\n    color: var(--sky-blue);\n    background: var(--off-white);\n    padding: 12px;\n    border-radius: 14px;\n}\n\n.referral-header h3 {\n    font-weight: 700;\n    font-size: 1.3rem;\n    color: var(--black);\n}\n\n.referral-header p {\n    color: #5a5a7a;\n    font-size: 0.95rem;\n    margin-left: auto;\n    width: 100%;\n}\n\n.referral-link-container {\n    display: flex;\n    gap: 12px;\n    margin: 12px 0 16px;\n    flex-wrap: wrap;\n}\n\n.referral-link-container input {\n    flex: 1;\n    padding: 14px 18px;\n    border: 2px solid #e8edf5;\n    border-radius: 14px;\n    font-size: 0.95rem;\n    background: var(--off-white);\n    font-family: inherit;\n    min-width: 200px;\n    transition: var(--transition);\n    color: var(--black);\n}\n\n.referral-link-container input:focus {\n    border-color: var(--sky-blue);\n    outline: none;\n    background: var(--white);\n    box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.08);\n}\n\n.btn-copy {\n    background: linear-gradient(135deg, var(--sky-blue), var(--sky-blue-dark));\n    color: var(--white);\n    border: none;\n    padding: 14px 28px;\n    border-radius: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: var(--transition);\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 0.95rem;\n    white-space: nowrap;\n}\n\n.btn-copy:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 24px rgba(79, 172, 254, 0.35);\n}\n\n.btn-copy:active {\n    transform: scale(0.96);\n}\n\n.btn-copy.copied {\n    background: linear-gradient(135deg, #00b894, #00a381);\n}\n\n.referral-stats {\n    display: flex;\n    gap: 32px;\n    flex-wrap: wrap;\n    padding-top: 14px;\n    border-top: 2px solid #f0f4ff;\n}\n\n.referral-stats span {\n    font-size: 0.95rem;\n    color: #4a4a6a;\n}\n\n.referral-stats i {\n    color: var(--sky-blue);\n    margin-right: 8px;\n}\n\n.referral-stats strong {\n    color: var(--black);\n    font-weight: 700;\n}\n\n\/* Daily Bonus *\/\n.daily-bonus-card {\n    background: linear-gradient(135deg, var(--white), var(--off-white));\n    padding: 24px 32px;\n    border-radius: var(--radius);\n    border: 2px solid var(--sky-blue);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 20px;\n    margin-bottom: 30px;\n    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.08);\n}\n\n.bonus-info {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.bonus-info i {\n    font-size: 2.2rem;\n    color: var(--sky-blue);\n}\n\n.bonus-info h3 {\n    font-weight: 700;\n    font-size: 1.1rem;\n}\n\n.bonus-info p {\n    color: #5a5a7a;\n    font-size: 0.9rem;\n}\n\n.countdown-container {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n#countdownTimer {\n    font-size: 1.8rem;\n    font-weight: 800;\n    font-variant-numeric: tabular-nums;\n    color: var(--sky-blue);\n    min-width: 120px;\n    text-align: center;\n}\n\n.btn-claim {\n    background: linear-gradient(135deg, #00b894, #00a381);\n    color: var(--white);\n    border: none;\n    padding: 12px 28px;\n    border-radius: 50px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: var(--transition);\n    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.35);\n}\n\n.btn-claim:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 12px 32px rgba(0, 184, 148, 0.45);\n}\n\n.btn-claim:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none !important;\n}\n\n\/* Coming Soon P2P *\/\n.coming-soon-card {\n    background: var(--white);\n    padding: 24px 32px;\n    border-radius: var(--radius);\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    border-left: 6px solid var(--sky-blue);\n    box-shadow: 0 6px 20px rgba(0,0,0,0.04);\n}\n\n.coming-soon-card i {\n    font-size: 2.6rem;\n    color: var(--sky-blue);\n}\n\n.coming-soon-card h3 {\n    font-weight: 700;\n}\n\n.coming-soon-card p {\n    color: #5a5a7a;\n    font-size: 0.95rem;\n}\n\n.badge-coming {\n    background: var(--sky-blue-light);\n    color: var(--sky-blue-dark);\n    padding: 4px 16px;\n    border-radius: 50px;\n    font-weight: 600;\n    font-size: 0.8rem;\n    display: inline-block;\n    margin-top: 4px;\n}\n\n\/* Marketplace Grid *\/\n.marketplace-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n    gap: 24px;\n    margin-top: 20px;\n}\n\n.marketplace-item {\n    background: var(--white);\n    border-radius: var(--radius);\n    overflow: hidden;\n    box-shadow: 0 6px 20px rgba(0,0,0,0.05);\n    transition: var(--transition);\n    border: 1px solid rgba(79, 172, 254, 0.06);\n}\n\n.marketplace-item:hover {\n    transform: translateY(-6px);\n    box-shadow: 0 20px 48px rgba(79, 172, 254, 0.12);\n}\n\n.marketplace-item img {\n    width: 100%;\n    height: 160px;\n    object-fit: cover;\n}\n\n.marketplace-item .content {\n    padding: 20px 22px;\n}\n\n.marketplace-item h3 {\n    font-weight: 700;\n    font-size: 1.1rem;\n    margin-bottom: 6px;\n}\n\n.marketplace-item p {\n    color: #5a5a7a;\n    font-size: 0.9rem;\n    margin-bottom: 12px;\n}\n\n.marketplace-item .readmore-btn {\n    background: transparent;\n    border: 2px solid var(--sky-blue);\n    color: var(--sky-blue);\n    padding: 8px 20px;\n    border-radius: 50px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: var(--transition);\n    font-size: 0.85rem;\n}\n\n.marketplace-item .readmore-btn:hover {\n    background: var(--sky-blue);\n    color: var(--white);\n}\n\n\/* Profile Card *\/\n.profile-card {\n    background: var(--white);\n    padding: 32px 36px;\n    border-radius: var(--radius);\n    max-width: 500px;\n    box-shadow: var(--shadow);\n}\n\n.profile-card p {\n    padding: 10px 0;\n    border-bottom: 1px solid #eee;\n    font-size: 1rem;\n}\n\n.profile-card p:last-child {\n    border-bottom: none;\n}\n\n\/* ===== MODALS ===== *\/\n.modal {\n    display: none;\n    position: fixed;\n    top: 0; left: 0; width: 100%; height: 100%;\n    background: rgba(0,0,0,0.5);\n    backdrop-filter: blur(6px);\n    z-index: 999;\n    align-items: center;\n    justify-content: center;\n    animation: fadeIn 0.3s ease;\n}\n\n.modal.show {\n    display: flex;\n}\n\n.modal-content {\n    background: var(--white);\n    max-width: 480px;\n    width: 90%;\n    padding: 40px 36px;\n    border-radius: var(--radius);\n    text-align: center;\n    box-shadow: 0 40px 80px rgba(0,0,0,0.3);\n    position: relative;\n    animation: slideUp 0.4s ease;\n}\n\n@keyframes slideUp {\n    0% { transform: translateY(40px); opacity: 0; }\n    100% { transform: translateY(0); opacity: 1; }\n}\n\n.modal-icon {\n    font-size: 3.6rem;\n    color: var(--sky-blue);\n    margin-bottom: 12px;\n}\n\n.modal-content h2 {\n    font-weight: 800;\n    margin-bottom: 8px;\n}\n\n.modal-sub {\n    color: #4a4a6a;\n    margin: 12px 0 24px;\n}\n\n.close-modal {\n    position: absolute;\n    top: 16px;\n    right: 22px;\n    font-size: 2rem;\n    cursor: pointer;\n    color: #aaa;\n    transition: var(--transition);\n}\n\n.close-modal:hover {\n    color: var(--black);\n}\n\n#payToReadBtn {\n    margin-top: 16px;\n}\n\n\/* ===== RESPONSIVE ===== *\/\n@media (max-width: 900px) {\n    #dashboardPage.active {\n        flex-direction: column;\n    }\n    .sidebar {\n        width: 100%;\n        min-height: auto;\n        height: auto;\n        flex-direction: row;\n        flex-wrap: wrap;\n        padding: 16px 20px;\n        position: relative;\n    }\n    .sidebar-logo {\n        margin-bottom: 0;\n    }\n    .sidebar-menu {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n        flex: 1;\n    }\n    .sidebar-menu li {\n        padding: 10px 14px;\n        font-size: 0.85rem;\n    }\n    .sidebar-footer {\n        display: none;\n    }\n    .main-content {\n        max-height: none;\n        padding: 24px 20px;\n    }\n    .balance-grid {\n        grid-template-columns: 1fr 1fr;\n    }\n    .hero-title {\n        font-size: 2.2rem;\n    }\n    .form-card {\n        padding: 28px 20px;\n    }\n}\n\n@media (max-width: 600px) {\n    .balance-grid {\n        grid-template-columns: 1fr;\n    }\n    .daily-bonus-card {\n        flex-direction: column;\n        align-items: stretch;\n        text-align: center;\n    }\n    .countdown-container {\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n    .hero-features {\n        gap: 12px;\n    }\n    .about-grid {\n        grid-template-columns: 1fr;\n    }\n    .logo {\n        font-size: 2rem;\n    }\n    .logo-icon {\n        width: 48px;\n        height: 48px;\n        font-size: 1.6rem;\n    }\n    .referral-link-container {\n        flex-direction: column;\n    }\n    .referral-link-container input {\n        width: 100%;\n    }\n    .btn-copy {\n        width: 100%;\n        justify-content: center;\n    }\n    .referral-stats {\n        flex-direction: column;\n        gap: 8px;\n    }\n    .referral-header h3 {\n        font-size: 1.1rem;\n    }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/\/ ============================================================\n\/\/ TELEIST - Full Application Logic (with Referral System)\n\/\/ ============================================================\n\n\/\/ ---------- DATA STORE ----------\nlet state = {\n    users: [],\n    currentUser: null,\n    lessons: [],\n    balance: 0,\n    lastLoginDate: null,\n    dailyBonusClaimed: false,\n    countdown: 0,\n    referrals: [], \/\/ stores { referrerId, referredUserId, bonusClaimed }\n    marketplacePosts: [\n        {\n            id: 1,\n            title: \"How to Start Freelancing\",\n            description: \"Learn the basics of freelancing and land your first client.\",\n            image: \"https:\/\/images.unsplash.com\/photo-1523240795612-9a054b0db644?w=400&h=300&fit=crop\",\n            content: \"Freelancing is one of the fastest ways to earn money online. In this lesson, you'll learn how to identify your skills, create a compelling portfolio, find clients on platforms like Upwork and Fiverr, and negotiate rates like a pro. We'll also cover invoicing, contracts, and how to build long-term client relationships. By the end, you'll have a clear roadmap to launch your freelancing career and start earning within weeks.\",\n            publisher: \"Teleist Team\",\n            price: 1\n        },\n        {\n            id: 2,\n            title: \"Cryptocurrency for Beginners\",\n            description: \"Understand the basics of crypto and how to invest wisely.\",\n            image: \"https:\/\/images.unsplash.com\/photo-1518546305927-5a555bb7020d?w=400&h=300&fit=crop\",\n            content: \"Cryptocurrency is revolutionizing the financial world. This lesson covers blockchain technology, Bitcoin, Ethereum, altcoins, and how to buy and store crypto safely. You'll learn about wallets, exchanges, and strategies for long-term investing vs. trading. We'll also discuss risks, scams, and how to do your own research (DYOR). Start your crypto journey with confidence!\",\n            publisher: \"Teleist Team\",\n            price: 1\n        },\n        {\n            id: 3,\n            title: \"Digital Marketing Mastery\",\n            description: \"Master SEO, social media, and email marketing to grow your brand.\",\n            image: \"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop\",\n            content: \"Digital marketing is essential for any online business. This comprehensive lesson teaches you SEO fundamentals, content marketing, social media strategies (Instagram, TikTok, LinkedIn), email marketing automation, and paid advertising (Google Ads, Facebook Ads). You'll get actionable templates and checklists to implement immediately and start driving traffic and sales.\",\n            publisher: \"Teleist Team\",\n            price: 1\n        }\n    ]\n};\n\n\/\/ ---------- INIT ----------\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ Load saved data\n    const saved = localStorage.getItem('teleist_data');\n    if (saved) {\n        const parsed = JSON.parse(saved);\n        state.users = parsed.users || [];\n        state.lessons = parsed.lessons || [];\n        state.marketplacePosts = parsed.marketplacePosts || state.marketplacePosts;\n        state.balance = parsed.balance || 0;\n        state.lastLoginDate = parsed.lastLoginDate || null;\n        state.dailyBonusClaimed = parsed.dailyBonusClaimed || false;\n        state.currentUser = parsed.currentUser || null;\n        state.referrals = parsed.referrals || [];\n    }\n\n    \/\/ If user is logged in, show dashboard\n    if (state.currentUser) {\n        showDashboard();\n        updateDashboardUI();\n    } else {\n        showSignup();\n        checkReferralParam();\n    }\n\n    \/\/ Event listeners\n    document.getElementById('signupForm').addEventListener('submit', handleSignup);\n    document.getElementById('goToDashboardBtn').addEventListener('click', goToDashboard);\n    document.getElementById('logoutBtn').addEventListener('click', handleLogout);\n    document.getElementById('claimBonusBtn').addEventListener('click', claimDailyBonus);\n    document.getElementById('createLessonForm').addEventListener('submit', handleCreateLesson);\n    document.getElementById('closeReadMore').addEventListener('click', closeReadMoreModal);\n    document.getElementById('payToReadBtn').addEventListener('click', handlePayToRead);\n    document.getElementById('copyReferralBtn').addEventListener('click', copyReferralLink);\n\n    \/\/ Sidebar navigation\n    document.querySelectorAll('.sidebar-menu li').forEach(item => {\n        item.addEventListener('click', () => {\n            document.querySelectorAll('.sidebar-menu li').forEach(li => li.classList.remove('active'));\n            item.classList.add('active');\n            const tab = item.dataset.tab;\n            document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));\n            document.getElementById(`tab-${tab}`).classList.add('active');\n            if (tab === 'marketplace') renderMarketplace();\n        });\n    });\n\n    \/\/ Countdown timer\n    setInterval(updateCountdown, 1000);\n    updateCountdown();\n});\n\n\/\/ ---------- CHECK REFERRAL PARAM ----------\nfunction checkReferralParam() {\n    const params = new URLSearchParams(window.location.search);\n    const ref = params.get('ref');\n    if (ref) {\n        \/\/ Store referral in session to apply on signup\n        sessionStorage.setItem('teleist_referral', ref);\n    }\n}\n\n\/\/ ---------- PAGE SWITCHING ----------\nfunction showSignup() {\n    document.getElementById('signupPage').classList.add('active');\n    document.getElementById('dashboardPage').classList.remove('active');\n}\n\nfunction showDashboard() {\n    document.getElementById('signupPage').classList.remove('active');\n    document.getElementById('dashboardPage').classList.add('active');\n    \/\/ Default tab: dashboard\n    document.querySelectorAll('.sidebar-menu li').forEach(li => li.classList.remove('active'));\n    document.querySelector('.sidebar-menu li[data-tab=\"dashboard\"]').classList.add('active');\n    document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));\n    document.getElementById('tab-dashboard').classList.add('active');\n}\n\n\/\/ ---------- SIGNUP ----------\nfunction handleSignup(e) {\n    e.preventDefault();\n    const firstName = document.getElementById('firstName').value.trim();\n    const lastName = document.getElementById('lastName').value.trim();\n    const phone = document.getElementById('phone').value.trim();\n    const email = document.getElementById('email').value.trim();\n\n    if (!firstName || !lastName || !phone || !email) {\n        alert('Please fill in all fields.');\n        return;\n    }\n\n    \/\/ Check if email already exists\n    if (state.users.some(u => u.email === email)) {\n        alert('An account with this email already exists. Please log in.');\n        return;\n    }\n\n    \/\/ Check for referral\n    let referralId = null;\n    let referrer = null;\n    const refCode = sessionStorage.getItem('teleist_referral');\n    if (refCode) {\n        \/\/ Find the referrer by email (using ref code as email for simplicity)\n        referrer = state.users.find(u => u.email === refCode);\n        if (referrer) {\n            referralId = referrer.id;\n        }\n        sessionStorage.removeItem('teleist_referral');\n    }\n\n    \/\/ Create user\n    const user = {\n        id: Date.now(),\n        firstName,\n        lastName,\n        phone,\n        email,\n        balance: 30, \/\/ signup bonus\n        lessonsPublished: [],\n        referralCode: email, \/\/ use email as referral code\n        totalReferrals: 0,\n        referralEarnings: 0\n    };\n\n    state.users.push(user);\n    state.currentUser = user;\n    state.balance = 30;\n    state.lastLoginDate = new Date().toDateString();\n    state.dailyBonusClaimed = false;\n\n    \/\/ If referred, give bonus to both\n    if (referralId && referrer) {\n        \/\/ Give $10 to referrer\n        const referrerUser = state.users.find(u => u.id === referralId);\n        if (referrerUser) {\n            referrerUser.balance = (referrerUser.balance || 0) + 10;\n            referrerUser.totalReferrals = (referrerUser.totalReferrals || 0) + 1;\n            referrerUser.referralEarnings = (referrerUser.referralEarnings || 0) + 10;\n            \/\/ Update state balance if referrer is current user (shouldn't be, but just in case)\n            if (state.currentUser.id === referrerUser.id) {\n                state.balance = referrerUser.balance;\n            }\n        }\n        \/\/ Give $10 to new user\n        user.balance += 10;\n        state.balance = user.balance;\n\n        \/\/ Track referral\n        state.referrals.push({\n            referrerId: referralId,\n            referredUserId: user.id,\n            bonusClaimed: true,\n            date: new Date().toISOString()\n        });\n\n        alert(`\ud83c\udf89 You were referred! You and your referrer both got $10 bonus!`);\n    }\n\n    saveState();\n\n    \/\/ Show congratulations modal\n    document.getElementById('congratsModal').classList.add('show');\n}\n\n\/\/ ---------- GO TO DASHBOARD ----------\nfunction goToDashboard() {\n    document.getElementById('congratsModal').classList.remove('show');\n    showDashboard();\n    updateDashboardUI();\n}\n\n\/\/ ---------- LOGOUT ----------\nfunction handleLogout() {\n    state.currentUser = null;\n    saveState();\n    showSignup();\n    \/\/ Reset form\n    document.getElementById('signupForm').reset();\n}\n\n\/\/ ---------- UPDATE DASHBOARD UI ----------\nfunction updateDashboardUI() {\n    const user = state.currentUser;\n    if (!user) return;\n\n    const fullName = `${user.firstName} ${user.lastName}`;\n    document.getElementById('userNameDisplay').textContent = fullName;\n    document.getElementById('totalBalance').textContent = `$${state.balance.toFixed(2)}`;\n    document.getElementById('profileName').textContent = fullName;\n    document.getElementById('profileEmail').textContent = user.email;\n    document.getElementById('profilePhone').textContent = user.phone;\n    document.getElementById('profileBalance').textContent = state.balance.toFixed(2);\n    document.getElementById('profileReferrals').textContent = user.totalReferrals || 0;\n    document.getElementById('profileRefEarnings').textContent = (user.referralEarnings || 0).toFixed(2);\n\n    \/\/ Referral link\n    const baseUrl = window.location.origin + window.location.pathname;\n    const refLink = `${baseUrl}?ref=${encodeURIComponent(user.email)}`;\n    document.getElementById('referralLink').value = refLink;\n\n    \/\/ Referral stats\n    const totalRefs = user.totalReferrals || 0;\n    const refEarnings = user.referralEarnings || 0;\n    document.getElementById('totalReferrals').textContent = totalRefs;\n    document.getElementById('referralEarnings').textContent = `$${refEarnings.toFixed(2)}`;\n\n    \/\/ Check daily bonus\n    const today = new Date().toDateString();\n    if (state.lastLoginDate === today && state.dailyBonusClaimed) {\n        document.getElementById('claimBonusBtn').disabled = true;\n        document.getElementById('claimBonusBtn').textContent = 'Claimed \u2705';\n    } else {\n        document.getElementById('claimBonusBtn').disabled = false;\n        document.getElementById('claimBonusBtn').textContent = 'Claim Bonus';\n    }\n\n    updateCountdown();\n}\n\n\/\/ ---------- COPY REFERRAL LINK ----------\nfunction copyReferralLink() {\n    const input = document.getElementById('referralLink');\n    input.select();\n    input.setSelectionRange(0, 99999);\n    \n    try {\n        navigator.clipboard.writeText(input.value).then(() => {\n            const btn = document.getElementById('copyReferralBtn');\n            btn.innerHTML = '<i class=\"fas fa-check\"><\/i> Copied!';\n            btn.classList.add('copied');\n            setTimeout(() => {\n                btn.innerHTML = '<i class=\"fas fa-copy\"><\/i> Copy Link';\n                btn.classList.remove('copied');\n            }, 2000);\n        });\n    } catch (err) {\n        \/\/ Fallback\n        document.execCommand('copy');\n        alert('Referral link copied to clipboard!');\n    }\n}\n\n\/\/ ---------- DAILY BONUS ----------\nfunction claimDailyBonus() {\n    const today = new Date().toDateString();\n    if (state.lastLoginDate === today && state.dailyBonusClaimed) {\n        alert('You have already claimed your daily bonus today!');\n        return;\n    }\n\n    state.balance += 20;\n    state.lastLoginDate = today;\n    state.dailyBonusClaimed = true;\n    \/\/ Update user balance\n    if (state.currentUser) {\n        state.currentUser.balance = state.balance;\n    }\n    saveState();\n    updateDashboardUI();\n    document.getElementById('claimBonusBtn').disabled = true;\n    document.getElementById('claimBonusBtn').textContent = 'Claimed \u2705';\n    alert('\ud83c\udf89 You earned $20 daily login bonus!');\n}\n\n\/\/ ---------- COUNTDOWN (next daily reset) ----------\nfunction updateCountdown() {\n    const now = new Date();\n    const tomorrow = new Date(now);\n    tomorrow.setDate(tomorrow.getDate() + 1);\n    tomorrow.setHours(0, 0, 0, 0);\n    const diff = tomorrow - now;\n\n    if (diff <= 0) {\n        document.getElementById('countdownTimer').textContent = '00:00:00';\n        return;\n    }\n\n    const hours = Math.floor(diff \/ (1000 * 60 * 60));\n    const mins = Math.floor((diff % (1000 * 60 * 60)) \/ (1000 * 60));\n    const secs = Math.floor((diff % (1000 * 60)) \/ 1000);\n    document.getElementById('countdownTimer').textContent =\n        `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;\n}\n\n\/\/ ---------- CREATE LESSON ----------\nfunction handleCreateLesson(e) {\n    e.preventDefault();\n    const title = document.getElementById('lessonTitle').value.trim();\n    const desc = document.getElementById('lessonDesc').value.trim();\n    const image = document.getElementById('lessonImage').value.trim() || 'https:\/\/images.unsplash.com\/photo-1516321318423-f06f85e504b3?w=400&#038;h=300&#038;fit=crop';\n    const content = document.getElementById('lessonContent').value.trim();\n\n    if (!title || !desc || !content) {\n        alert('Please fill in all required fields (Title, Description, Content).');\n        return;\n    }\n\n    if (state.balance < 5) {\n        alert('Insufficient balance! You need $5 to publish a lesson.');\n        return;\n    }\n\n    \/\/ Deduct $5\n    state.balance -= 5;\n    const user = state.currentUser;\n    if (user) {\n        user.balance = state.balance;\n    }\n    const lesson = {\n        id: Date.now(),\n        title,\n        description: desc,\n        image,\n        content,\n        publisher: `${user.firstName} ${user.lastName}`,\n        price: 1,\n        publishedAt: new Date().toISOString()\n    };\n\n    state.lessons.push(lesson);\n    \/\/ Add to marketplace\n    state.marketplacePosts.push({\n        id: lesson.id,\n        title: lesson.title,\n        description: lesson.description,\n        image: lesson.image,\n        content: lesson.content,\n        publisher: lesson.publisher,\n        price: 1\n    });\n\n    saveState();\n    updateDashboardUI();\n    alert('\u2705 Lesson published successfully! It will appear in the marketplace.');\n    document.getElementById('createLessonForm').reset();\n\n    \/\/ Switch to marketplace tab\n    document.querySelectorAll('.sidebar-menu li').forEach(li => li.classList.remove('active'));\n    document.querySelector('.sidebar-menu li[data-tab=\"marketplace\"]').classList.add('active');\n    document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));\n    document.getElementById('tab-marketplace').classList.add('active');\n    renderMarketplace();\n}\n\n\/\/ ---------- RENDER MARKETPLACE ----------\nfunction renderMarketplace() {\n    const container = document.getElementById('marketplaceList');\n    container.innerHTML = '';\n\n    if (state.marketplacePosts.length === 0) {\n        container.innerHTML = '<p style=\"text-align:center;color:#6a6a8a;padding:40px 0;\">No lessons available yet. Be the first to create one!<\/p>';\n        return;\n    }\n\n    state.marketplacePosts.forEach(post => {\n        const div = document.createElement('div');\n        div.className = 'marketplace-item';\n        div.innerHTML = `\n            <img decoding=\"async\" src=\"${post.image}\" alt=\"${post.title}\" onerror=\"this.src='https:\/\/images.unsplash.com\/photo-1516321318423-f06f85e504b3?w=400&#038;h=300&#038;fit=crop'\" \/>\n            <div class=\"content\">\n                <h3>${post.title}<\/h3>\n                <p>${post.description.substring(0, 80)}...<\/p>\n                <p style=\"font-size:0.8rem;color:#8a8aaa;\"><i class=\"fas fa-user\"><\/i> ${post.publisher}<\/p>\n                <button class=\"readmore-btn\" data-id=\"${post.id}\">Read More ($${post.price})<\/button>\n            <\/div>\n        `;\n        container.appendChild(div);\n    });\n\n    \/\/ Attach readmore events\n    document.querySelectorAll('.readmore-btn').forEach(btn => {\n        btn.addEventListener('click', () => {\n            const id = parseInt(btn.dataset.id);\n            openReadMore(id);\n        });\n    });\n}\n\n\/\/ ---------- READ MORE MODAL ----------\nlet currentReadMoreId = null;\n\nfunction openReadMore(id) {\n    const post = state.marketplacePosts.find(p => p.id === id);\n    if (!post) return;\n\n    currentReadMoreId = id;\n    document.getElementById('rmTitle').textContent = post.title;\n    document.getElementById('rmContent').textContent = post.content.substring(0, 300) + '...';\n    document.getElementById('readMoreModal').classList.add('show');\n    \/\/ Reset pay button\n    const payBtn = document.getElementById('payToReadBtn');\n    payBtn.style.display = 'inline-flex';\n    payBtn.textContent = 'Pay $1 to Read Full Lesson';\n}\n\nfunction closeReadMoreModal() {\n    document.getElementById('readMoreModal').classList.remove('show');\n    currentReadMoreId = null;\n}\n\n\/\/ ---------- PAY TO READ FULL LESSON ----------\nfunction handlePayToRead() {\n    if (currentReadMoreId === null) return;\n\n    const post = state.marketplacePosts.find(p => p.id === currentReadMoreId);\n    if (!post) return;\n\n    if (state.balance < 1) {\n        alert('Insufficient balance! You need $1 to read this full lesson.');\n        return;\n    }\n\n    \/\/ Deduct $1 from reader\n    state.balance -= 1;\n    if (state.currentUser) {\n        state.currentUser.balance = state.balance;\n    }\n\n    \/\/ Add $1 to publisher (find the user who published it)\n    const publisher = state.users.find(u => `${u.firstName} ${u.lastName}` === post.publisher);\n    if (publisher) {\n        const userInState = state.users.find(u => u.id === publisher.id);\n        if (userInState) {\n            userInState.balance = (userInState.balance || 0) + 1;\n        }\n    }\n\n    saveState();\n    updateDashboardUI();\n\n    \/\/ Show full content\n    document.getElementById('rmContent').textContent = post.content;\n    const payBtn = document.getElementById('payToReadBtn');\n    payBtn.style.display = 'none';\n    payBtn.textContent = '\u2705 Unlocked!';\n\n    alert('\ud83d\udcd6 Full lesson unlocked! You\\'ve paid $1, and the publisher has been credited.');\n}\n\n\/\/ ---------- SAVE STATE ----------\nfunction saveState() {\n    localStorage.setItem('teleist_data', JSON.stringify({\n        users: state.users,\n        currentUser: state.currentUser,\n        balance: state.balance,\n        lastLoginDate: state.lastLoginDate,\n        dailyBonusClaimed: state.dailyBonusClaimed,\n        lessons: state.lessons,\n        marketplacePosts: state.marketplacePosts,\n        referrals: state.referrals\n    }));\n}\n\n\/\/ ---------- CLOSE MODALS ON OVERLAY CLICK ----------\ndocument.querySelectorAll('.modal').forEach(modal => {\n    modal.addEventListener('click', (e) => {\n        if (e.target === modal) {\n            modal.classList.remove('show');\n        }\n    });\n});\n\n\/\/ ---------- KEYBOARD SHORTCUT: ESC to close modals ----------\ndocument.addEventListener('keydown', (e) => {\n    if (e.key === 'Escape') {\n        document.querySelectorAll('.modal.show').forEach(m => m.classList.remove('show'));\n    }\n});\n<\/script>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Teleist &#8211; Empower Your Future<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\" \/>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&#038;display=swap\" rel=\"stylesheet\"\/>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"\/>\n<\/head>\n<body>\n\n    <!-- ========== SIGN UP PAGE ========== -->\n    <section id=\"signupPage\" class=\"page active\">\n        <div class=\"container\">\n            <!-- Logo -->\n            <div class=\"logo-container\">\n                <div class=\"logo\">\n                    <span class=\"logo-icon\"><i class=\"fas fa-bolt\"><\/i><\/span>\n                    <span class=\"logo-text\">Teleist<\/span>\n                <\/div>\n                <p class=\"tagline\">Empower. Educate. Elevate.<\/p>\n            <\/div>\n\n            <!-- Hero Section -->\n            <div class=\"hero-section\">\n                <h1 class=\"hero-title\">Welcome to <span class=\"highlight\">Teleist<\/span><\/h1>\n                <p class=\"hero-desc\">\n                    Your gateway to <strong>self-empowerment<\/strong> and <strong>financial freedom<\/strong>.\n                    Learn how to make money online, share your knowledge, and grow with a\n                    community of go-getters.\n                <\/p>\n                <div class=\"hero-features\">\n                    <span><i class=\"fas fa-graduation-cap\"><\/i> Learn &#038; Earn<\/span>\n                    <span><i class=\"fas fa-users\"><\/i> Community<\/span>\n                    <span><i class=\"fas fa-rocket\"><\/i> Grow Together<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Sign Up Form -->\n            <div class=\"form-card\">\n                <h2>Create Your Account<\/h2>\n                <p class=\"form-sub\">Join Teleist and start your journey today<\/p>\n                <form id=\"signupForm\">\n                    <div class=\"form-group\">\n                        <label><i class=\"fas fa-user\"><\/i> First Name<\/label>\n                        <input type=\"text\" id=\"firstName\" placeholder=\"Enter your first name\" required \/>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label><i class=\"fas fa-user\"><\/i> Last Name<\/label>\n                        <input type=\"text\" id=\"lastName\" placeholder=\"Enter your last name\" required \/>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label><i class=\"fas fa-phone\"><\/i> Phone Number<\/label>\n                        <input type=\"tel\" id=\"phone\" placeholder=\"Enter your phone number\" required \/>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label><i class=\"fas fa-envelope\"><\/i> Email Address<\/label>\n                        <input type=\"email\" id=\"email\" placeholder=\"Enter your email\" required \/>\n                    <\/div>\n                    <button type=\"submit\" class=\"btn-primary\">\n                        <i class=\"fas fa-arrow-right\"><\/i> Sign Up\n                    <\/button>\n                <\/form>\n                <p class=\"terms\">By signing up, you agree to our Terms &#038; Conditions<\/p>\n            <\/div>\n\n            <!-- About Us Section -->\n            <div class=\"about-section\">\n                <h2>About <span class=\"highlight\">Teleist<\/span><\/h2>\n                <p>\n                    Teleist is a revolutionary platform built for <strong>self-empowerment<\/strong> and\n                    <strong>financial education<\/strong>. We believe that everyone deserves the\n                    opportunity to learn, grow, and earn online. Whether you&#8217;re a beginner or a\n                    pro, Teleist provides the tools, lessons, and community to help you succeed.\n                <\/p>\n                <div class=\"about-grid\">\n                    <div class=\"about-item\">\n                        <i class=\"fas fa-lightbulb\"><\/i>\n                        <h4>Learn<\/h4>\n                        <p>Access high-quality lessons created by experts<\/p>\n                    <\/div>\n                    <div class=\"about-item\">\n                        <i class=\"fas fa-hand-holding-usd\"><\/i>\n                        <h4>Earn<\/h4>\n                        <p>Monetize your knowledge and skills<\/p>\n                    <\/div>\n                    <div class=\"about-item\">\n                        <i class=\"fas fa-sync-alt\"><\/i>\n                        <h4>Grow<\/h4>\n                        <p>Connect with like-minded individuals<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"coming-soon-banner\">\n                    <i class=\"fas fa-clock\"><\/i>\n                    <span>Coming Soon: Peer-to-Peer Transfers &#038; More Features!<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- ========== DASHBOARD PAGE ========== -->\n    <section id=\"dashboardPage\" class=\"page\">\n        <!-- Sidebar -->\n        <nav class=\"sidebar\">\n            <div class=\"sidebar-logo\">\n                <span class=\"logo-icon\"><i class=\"fas fa-bolt\"><\/i><\/span>\n                <span>Teleist<\/span>\n            <\/div>\n            <ul class=\"sidebar-menu\">\n                <li class=\"active\" data-tab=\"dashboard\"><i class=\"fas fa-chart-pie\"><\/i> Dashboard<\/li>\n                <li data-tab=\"marketplace\"><i class=\"fas fa-store\"><\/i> Marketplace<\/li>\n                <li data-tab=\"create-lesson\"><i class=\"fas fa-pen-fancy\"><\/i> Create a Lesson<\/li>\n                <li data-tab=\"profile\"><i class=\"fas fa-user-circle\"><\/i> Profile<\/li>\n            <\/ul>\n            <div class=\"sidebar-footer\">\n                <button id=\"logoutBtn\"><i class=\"fas fa-sign-out-alt\"><\/i> Logout<\/button>\n            <\/div>\n        <\/nav>\n\n        <!-- Main Content -->\n        <main class=\"main-content\">\n            <!-- Dashboard Tab -->\n            <div id=\"tab-dashboard\" class=\"tab-content active\">\n                <header class=\"dashboard-header\">\n                    <h1>Dashboard<\/h1>\n                    <div class=\"user-greeting\">Welcome back, <span id=\"userNameDisplay\">User<\/span> \ud83d\udc4b<\/div>\n                <\/header>\n\n                <!-- Balance Cards -->\n                <div class=\"balance-grid\">\n                    <div class=\"balance-card total\">\n                        <i class=\"fas fa-wallet\"><\/i>\n                        <div>\n                            <span class=\"label\">Total Balance<\/span>\n                            <span class=\"amount\" id=\"totalBalance\">$0.00<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"balance-card bonus\">\n                        <i class=\"fas fa-gift\"><\/i>\n                        <div>\n                            <span class=\"label\">Signup Bonus<\/span>\n                            <span class=\"amount\">$30.00<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"balance-card referral\">\n                        <i class=\"fas fa-users\"><\/i>\n                        <div>\n                            <span class=\"label\">Referral Bonus<\/span>\n                            <span class=\"amount\">$10.00<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Referral Section -->\n                <div class=\"referral-section\">\n                    <div class=\"referral-header\">\n                        <i class=\"fas fa-link\"><\/i>\n                        <h3>Refer &#038; Earn $10<\/h3>\n                        <p>Share your referral link with friends. When they sign up, you both get <strong>$10<\/strong>!<\/p>\n                    <\/div>\n                    <div class=\"referral-link-container\">\n                        <input type=\"text\" id=\"referralLink\" readonly value=\"https:\/\/teleist.com\/ref\/\" \/>\n                        <button id=\"copyReferralBtn\" class=\"btn-copy\">\n                            <i class=\"fas fa-copy\"><\/i> Copy Link\n                        <\/button>\n                    <\/div>\n                    <div class=\"referral-stats\">\n                        <span><i class=\"fas fa-user-plus\"><\/i> Total Referrals: <strong id=\"totalReferrals\">0<\/strong><\/span>\n                        <span><i class=\"fas fa-dollar-sign\"><\/i> Referral Earnings: <strong id=\"referralEarnings\">$0.00<\/strong><\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Daily Login Bonus -->\n                <div class=\"daily-bonus-card\">\n                    <div class=\"bonus-info\">\n                        <i class=\"fas fa-calendar-check\"><\/i>\n                        <div>\n                            <h3>Daily Login Bonus<\/h3>\n                            <p>Claim your $20 bonus every day!<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"countdown-container\">\n                        <span id=\"countdownTimer\">&#8211;:&#8211;:&#8211;<\/span>\n                        <button id=\"claimBonusBtn\" class=\"btn-claim\">Claim Bonus<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Coming Soon P2P -->\n                <div class=\"coming-soon-card\">\n                    <i class=\"fas fa-exchange-alt\"><\/i>\n                    <div>\n                        <h3>Peer-to-Peer Transfer<\/h3>\n                        <p>Send and receive money instantly with other Teleist members.<\/p>\n                        <span class=\"badge-coming\">Coming Soon \ud83d\ude80<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Marketplace Tab -->\n            <div id=\"tab-marketplace\" class=\"tab-content\">\n                <h2>\ud83d\udcda Marketplace<\/h2>\n                <p class=\"tab-sub\">Discover lessons from creators around the world<\/p>\n                <div id=\"marketplaceList\" class=\"marketplace-grid\">\n                    <!-- Dynamic content -->\n                <\/div>\n            <\/div>\n\n            <!-- Create Lesson Tab -->\n            <div id=\"tab-create-lesson\" class=\"tab-content\">\n                <h2>\u270f\ufe0f Create a Lesson<\/h2>\n                <p class=\"tab-sub\">Share your knowledge. <strong>$5<\/strong> publishing fee will be deducted from your balance.<\/p>\n                <form id=\"createLessonForm\">\n                    <div class=\"form-group\">\n                        <label>Title<\/label>\n                        <input type=\"text\" id=\"lessonTitle\" placeholder=\"Enter lesson title\" required \/>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label>Description<\/label>\n                        <textarea id=\"lessonDesc\" rows=\"4\" placeholder=\"Describe what students will learn...\" required><\/textarea>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label>Image URL<\/label>\n                        <input type=\"text\" id=\"lessonImage\" placeholder=\"https:\/\/example.com\/image.jpg\" \/>\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label>Full Lesson Content<\/label>\n                        <textarea id=\"lessonContent\" rows=\"6\" placeholder=\"Write the full lesson here...\" required><\/textarea>\n                    <\/div>\n                    <button type=\"submit\" class=\"btn-primary\"><i class=\"fas fa-upload\"><\/i> Publish Lesson ($5)<\/button>\n                <\/form>\n            <\/div>\n\n            <!-- Profile Tab -->\n            <div id=\"tab-profile\" class=\"tab-content\">\n                <h2>\ud83d\udc64 Profile<\/h2>\n                <div class=\"profile-card\">\n                    <p><strong>Name:<\/strong> <span id=\"profileName\">\u2014<\/span><\/p>\n                    <p><strong>Email:<\/strong> <span id=\"profileEmail\">\u2014<\/span><\/p>\n                    <p><strong>Phone:<\/strong> <span id=\"profilePhone\">\u2014<\/span><\/p>\n                    <p><strong>Balance:<\/strong> $<span id=\"profileBalance\">0.00<\/span><\/p>\n                    <p><strong>Total Referrals:<\/strong> <span id=\"profileReferrals\">0<\/span><\/p>\n                    <p><strong>Referral Earnings:<\/strong> $<span id=\"profileRefEarnings\">0.00<\/span><\/p>\n                <\/div>\n            <\/div>\n        <\/main>\n    <\/section>\n\n    <!-- ========== CONGRATULATIONS MODAL ========== -->\n    <div id=\"congratsModal\" class=\"modal\">\n        <div class=\"modal-content\">\n            <div class=\"modal-icon\"><i class=\"fas fa-trophy\"><\/i><\/div>\n            <h2>\ud83c\udf89 Congratulations!<\/h2>\n            <p>Your account has been created successfully.<\/p>\n            <p class=\"modal-sub\">You&#8217;ve received a <strong>$30<\/strong> signup bonus!<\/p>\n            <button id=\"goToDashboardBtn\" class=\"btn-primary\">Go to Dashboard<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- ========== READ MORE MODAL (for marketplace) ========== -->\n    <div id=\"readMoreModal\" class=\"modal\">\n        <div class=\"modal-content\">\n            <span class=\"close-modal\" id=\"closeReadMore\">&times;<\/span>\n            <h2 id=\"rmTitle\">Lesson Title<\/h2>\n            <p id=\"rmContent\">Full lesson content goes here&#8230;<\/p>\n            <button id=\"payToReadBtn\" class=\"btn-primary\">Pay $1 to Read Full Lesson<\/button>\n        <\/div>\n    <\/div>\n\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Teleist &#8211; Empower Your Future Teleist Empower. Educate. Elevate. Welcome to Teleist Your gateway to self-empowerment and financial freedom. Learn how to make money online, share your knowledge, and grow with a community of go-getters. Learn &#038; Earn Community Grow Together Create Your Account Join Teleist and start your journey today First Name Last Name [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/teleipay.site\/index.php?rest_route=\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teleipay.site\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teleipay.site\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teleipay.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teleipay.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":1,"href":"https:\/\/teleipay.site\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/teleipay.site\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/teleipay.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teleipay.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teleipay.site\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}