Created
April 17, 2026 17:24
-
-
Save chadwtaylor/0ca0edcb5457a8ad642bf3821d5627ae to your computer and use it in GitHub Desktop.
Terp Tools — Referral System Playground (5 screens: Referral Hub, Landing Page, Payment Celebration, Onboarding Step, Admin Config)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Terp Tools — Referral System Playground</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --bg: #121212; | |
| --bg-card: #1F1F1F; | |
| --bg-muted: #242424; | |
| --bg-sidebar: #171717; | |
| --border: #2E2E2E; | |
| --text: #FAFAFA; | |
| --text-muted: #898989; | |
| --text-faint: #666; | |
| --brand: #6366F1; | |
| --brand-hover: #818CF8; | |
| --brand-muted: #1e1b4b; | |
| --success: #22C55E; | |
| --warning: #F59E0B; | |
| --destructive: #EF4444; | |
| --radius: 6px; | |
| --radius-lg: 8px; | |
| --radius-xl: 12px; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| } | |
| /* === NAV === */ | |
| .top-nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 24px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--bg-sidebar); | |
| } | |
| .top-nav .logo { | |
| font-weight: 700; | |
| font-size: 15px; | |
| color: var(--brand); | |
| margin-right: 16px; | |
| } | |
| .nav-tab { | |
| padding: 6px 14px; | |
| border-radius: var(--radius-lg); | |
| cursor: pointer; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| transition: all 0.15s; | |
| border: none; | |
| background: none; | |
| } | |
| .nav-tab:hover { color: var(--text); background: var(--bg-muted); } | |
| .nav-tab.active { color: var(--text); background: var(--bg-muted); } | |
| /* === LAYOUT === */ | |
| .app-layout { | |
| display: flex; | |
| min-height: calc(100vh - 49px); | |
| } | |
| .sidebar { | |
| width: 224px; | |
| border-right: 1px solid var(--border); | |
| padding: 24px 16px; | |
| flex-shrink: 0; | |
| background: var(--bg-sidebar); | |
| } | |
| .sidebar-group-label { | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: rgba(137,137,137,0.5); | |
| margin-bottom: 6px; | |
| margin-top: 16px; | |
| } | |
| .sidebar-group-label:first-child { margin-top: 0; } | |
| .sidebar-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 10px; | |
| border-radius: var(--radius); | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| margin-bottom: 1px; | |
| } | |
| .sidebar-item:hover { color: var(--text); background: rgba(36,36,36,0.5); } | |
| .sidebar-item.active { color: var(--text); background: var(--bg-muted); font-weight: 500; } | |
| .sidebar-item .icon { width: 16px; text-align: center; font-size: 12px; } | |
| .sidebar-item.referral-highlight { | |
| color: var(--brand); | |
| position: relative; | |
| } | |
| .sidebar-item.referral-highlight::after { | |
| content: ''; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--brand); | |
| margin-left: auto; | |
| } | |
| /* === MAIN CONTENT === */ | |
| .main-content { | |
| flex: 1; | |
| padding: 32px; | |
| min-width: 0; | |
| overflow-y: auto; | |
| max-height: calc(100vh - 49px); | |
| } | |
| .page-header { | |
| margin-bottom: 24px; | |
| } | |
| .page-header h1 { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .page-header p { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| /* === STAT CARDS === */ | |
| .stats-row { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .stat-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-xl); | |
| background: var(--bg-card); | |
| padding: 16px; | |
| } | |
| .stat-card .value { | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 2px; | |
| line-height: 1.2; | |
| } | |
| .stat-card .label { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| .stat-card .value.brand { color: var(--brand); } | |
| .stat-card .value.success { color: var(--success); } | |
| .stat-card .value.warning { color: var(--warning); } | |
| /* === EVANGELIST PROGRESS === */ | |
| .progress-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-xl); | |
| background: var(--bg-card); | |
| padding: 20px; | |
| margin-bottom: 24px; | |
| } | |
| .progress-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| } | |
| .progress-header .title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .progress-header .count { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| .progress-header .count span { color: var(--brand); font-weight: 600; } | |
| .progress-track { | |
| height: 6px; | |
| background: var(--bg-muted); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| margin-bottom: 8px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--brand); | |
| border-radius: 3px; | |
| transition: width 0.5s ease; | |
| } | |
| .progress-milestones { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 11px; | |
| color: var(--text-faint); | |
| } | |
| .progress-milestones .reached { color: var(--brand); font-weight: 500; } | |
| /* === SHARE SECTION === */ | |
| .share-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-xl); | |
| background: var(--bg-card); | |
| padding: 20px; | |
| margin-bottom: 24px; | |
| } | |
| .share-card .title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 12px; | |
| } | |
| .referral-link-row { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .referral-link-input { | |
| flex: 1; | |
| height: 36px; | |
| padding: 0 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| background: rgba(255,255,255,0.05); | |
| color: var(--text); | |
| font-size: 13px; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .btn { | |
| height: 36px; | |
| padding: 0 16px; | |
| border: none; | |
| border-radius: var(--radius-lg); | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.15s; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .btn-brand { | |
| background: var(--brand); | |
| color: white; | |
| } | |
| .btn-brand:hover { background: var(--brand-hover); } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-outline:hover { background: var(--bg-muted); } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-muted); | |
| } | |
| .btn-ghost:hover { background: var(--bg-muted); color: var(--text); } | |
| .btn-sm { | |
| height: 30px; | |
| padding: 0 12px; | |
| font-size: 12px; | |
| } | |
| .share-buttons { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| /* === TABLE === */ | |
| .table-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-xl); | |
| background: var(--bg-card); | |
| overflow: hidden; | |
| } | |
| .table-header-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .table-header-bar .title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| } | |
| thead th { | |
| text-align: left; | |
| padding: 10px 16px; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| background: rgba(36,36,36,0.5); | |
| white-space: nowrap; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| tbody tr { | |
| border-bottom: 1px solid var(--border); | |
| transition: background 0.15s; | |
| } | |
| tbody tr:last-child { border-bottom: none; } | |
| tbody tr:hover { background: rgba(36,36,36,0.5); } | |
| tbody td { | |
| padding: 10px 16px; | |
| white-space: nowrap; | |
| } | |
| /* === BADGES === */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| height: 22px; | |
| padding: 0 8px; | |
| border-radius: 100px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| gap: 4px; | |
| } | |
| .badge-success { background: rgba(34,197,94,0.15); color: var(--success); } | |
| .badge-warning { background: rgba(245,158,11,0.15); color: var(--warning); } | |
| .badge-brand { background: rgba(99,102,241,0.15); color: var(--brand); } | |
| .badge-muted { background: var(--bg-muted); color: var(--text-muted); } | |
| .badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: currentColor; | |
| } | |
| /* === REFERRAL LANDING PAGE === */ | |
| .landing-page { | |
| max-width: 520px; | |
| margin: 0 auto; | |
| padding: 60px 24px; | |
| text-align: center; | |
| } | |
| .landing-page .logo-big { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--brand); | |
| margin-bottom: 32px; | |
| } | |
| .landing-page .avatar-circle { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 50%; | |
| background: var(--brand-muted); | |
| border: 2px solid var(--brand); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 16px; | |
| font-size: 24px; | |
| font-weight: 600; | |
| color: var(--brand); | |
| } | |
| .landing-page .invite-text { | |
| font-size: 15px; | |
| color: var(--text-muted); | |
| margin-bottom: 8px; | |
| } | |
| .landing-page .invite-name { | |
| color: var(--text); | |
| font-weight: 500; | |
| } | |
| .landing-page h2 { | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 12px; | |
| line-height: 1.3; | |
| } | |
| .landing-page .subtitle { | |
| font-size: 15px; | |
| color: var(--text-muted); | |
| margin-bottom: 32px; | |
| line-height: 1.6; | |
| } | |
| .landing-page .cta-btn { | |
| height: 44px; | |
| padding: 0 28px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| border-radius: var(--radius-lg); | |
| background: var(--brand); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| margin-bottom: 12px; | |
| } | |
| .landing-page .cta-btn:hover { background: var(--brand-hover); } | |
| .landing-page .trial-note { | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| } | |
| .landing-page .trial-note strong { color: var(--success); } | |
| .landing-benefits { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| margin: 32px 0; | |
| text-align: left; | |
| } | |
| .benefit-item { | |
| padding: 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| background: var(--bg-card); | |
| } | |
| .benefit-item .icon { font-size: 18px; margin-bottom: 6px; } | |
| .benefit-item .name { font-size: 13px; font-weight: 500; margin-bottom: 2px; } | |
| .benefit-item .desc { font-size: 11px; color: var(--text-muted); } | |
| /* === POST-PAYMENT PROMPT === */ | |
| .celebration-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.6); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 100; | |
| backdrop-filter: blur(4px); | |
| } | |
| .celebration-modal { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 32px; | |
| max-width: 420px; | |
| width: 100%; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .celebration-modal .close-btn { | |
| position: absolute; | |
| top: 12px; | |
| right: 12px; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 6px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .celebration-modal .close-btn:hover { background: var(--bg-muted); } | |
| .celebration-modal .amount { | |
| font-size: 36px; | |
| font-weight: 700; | |
| color: var(--success); | |
| margin-bottom: 4px; | |
| } | |
| .celebration-modal h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .celebration-modal p { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| margin-bottom: 20px; | |
| line-height: 1.5; | |
| } | |
| .celebration-modal .share-row { | |
| display: flex; | |
| gap: 8px; | |
| justify-content: center; | |
| } | |
| /* === ONBOARDING STEP === */ | |
| .onboarding-card { | |
| max-width: 560px; | |
| margin: 0 auto; | |
| padding: 48px 24px; | |
| text-align: center; | |
| } | |
| .onboarding-card .step-indicator { | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| margin-bottom: 24px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .onboarding-card h2 { | |
| font-size: 22px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .onboarding-card .desc { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| margin-bottom: 24px; | |
| line-height: 1.6; | |
| } | |
| .onboarding-share-box { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-xl); | |
| background: var(--bg-card); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .onboarding-share-box .link-display { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .onboarding-share-box .share-btns { | |
| display: flex; | |
| gap: 8px; | |
| justify-content: center; | |
| } | |
| .onboarding-card .skip-link { | |
| font-size: 13px; | |
| color: var(--text-faint); | |
| cursor: pointer; | |
| border: none; | |
| background: none; | |
| text-decoration: underline; | |
| text-underline-offset: 2px; | |
| } | |
| .onboarding-card .skip-link:hover { color: var(--text-muted); } | |
| /* === SCREEN SELECTOR === */ | |
| .screen-selector { | |
| position: fixed; | |
| bottom: 24px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 4px; | |
| padding: 4px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-xl); | |
| z-index: 200; | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.4); | |
| } | |
| .screen-btn { | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: var(--radius-lg); | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| } | |
| .screen-btn:hover { color: var(--text); background: var(--bg-muted); } | |
| .screen-btn.active { color: white; background: var(--brand); } | |
| /* === VIEWS === */ | |
| .view { display: none; } | |
| .view.active { display: block; } | |
| .view-full { min-height: 100vh; } | |
| /* === ADMIN CONFIG === */ | |
| .admin-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| } | |
| .config-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-xl); | |
| background: var(--bg-card); | |
| padding: 20px; | |
| } | |
| .config-card .card-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .config-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .config-row:last-child { border-bottom: none; } | |
| .config-row .config-label { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| .config-row .config-value { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .config-input { | |
| width: 80px; | |
| height: 30px; | |
| padding: 0 8px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: rgba(255,255,255,0.05); | |
| color: var(--text); | |
| font-size: 13px; | |
| text-align: right; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .toggle { | |
| width: 36px; | |
| height: 20px; | |
| border-radius: 10px; | |
| background: var(--border); | |
| position: relative; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| border: none; | |
| } | |
| .toggle.on { background: var(--brand); } | |
| .toggle::after { | |
| content: ''; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: white; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| transition: transform 0.2s; | |
| } | |
| .toggle.on::after { transform: translateX(16px); } | |
| .touchpoint-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-xl); | |
| background: var(--bg-card); | |
| overflow: hidden; | |
| margin-bottom: 16px; | |
| } | |
| .touchpoint-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 14px 20px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .touchpoint-header .name { font-size: 13px; font-weight: 500; } | |
| .touchpoint-body { | |
| padding: 14px 20px; | |
| } | |
| .touchpoint-body textarea { | |
| width: 100%; | |
| min-height: 60px; | |
| padding: 8px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: rgba(255,255,255,0.05); | |
| color: var(--text); | |
| font-size: 12px; | |
| font-family: 'Inter', sans-serif; | |
| resize: vertical; | |
| line-height: 1.5; | |
| } | |
| /* Notification toast */ | |
| .toast { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| padding: 12px 20px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| font-size: 13px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| z-index: 300; | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.3); | |
| transform: translateX(120%); | |
| transition: transform 0.3s ease; | |
| } | |
| .toast.show { transform: translateX(0); } | |
| .toast .dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--success); | |
| flex-shrink: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Toast notification --> | |
| <div class="toast" id="toast"> | |
| <div class="dot"></div> | |
| <span id="toast-msg">Copied to clipboard!</span> | |
| </div> | |
| <!-- Screen selector --> | |
| <div class="screen-selector"> | |
| <button class="screen-btn active" onclick="showView('dashboard')">Referral Hub</button> | |
| <button class="screen-btn" onclick="showView('landing')">Landing Page</button> | |
| <button class="screen-btn" onclick="showView('celebration')">Payment Celebration</button> | |
| <button class="screen-btn" onclick="showView('onboarding')">Onboarding Step</button> | |
| <button class="screen-btn" onclick="showView('admin')">Admin Config</button> | |
| </div> | |
| <!-- ======================== --> | |
| <!-- VIEW 1: REFERRAL HUB --> | |
| <!-- ======================== --> | |
| <div class="view active" id="view-dashboard"> | |
| <div class="top-nav"> | |
| <span class="logo">Terp Tools</span> | |
| <button class="nav-tab">Dashboard</button> | |
| <button class="nav-tab">Bookings</button> | |
| <button class="nav-tab">Invoices</button> | |
| <button class="nav-tab">Calendar</button> | |
| <button class="nav-tab active">Settings</button> | |
| </div> | |
| <div class="app-layout"> | |
| <div class="sidebar"> | |
| <div class="sidebar-group-label">Account</div> | |
| <div class="sidebar-item"> | |
| <span class="icon">⚙</span> Account | |
| </div> | |
| <div class="sidebar-item"> | |
| <span class="icon">☆</span> Public Profile | |
| </div> | |
| <div class="sidebar-group-label">Billing</div> | |
| <div class="sidebar-item"> | |
| <span class="icon">★</span> Subscription | |
| </div> | |
| <div class="sidebar-item"> | |
| <span class="icon">💳</span> Payments | |
| </div> | |
| <div class="sidebar-item"> | |
| <span class="icon">📄</span> Invoicing | |
| </div> | |
| <div class="sidebar-item active referral-highlight"> | |
| <span class="icon">🔗</span> Refer & Earn | |
| </div> | |
| <div class="sidebar-group-label">Business</div> | |
| <div class="sidebar-item"> | |
| <span class="icon">🏢</span> Business | |
| </div> | |
| <div class="sidebar-item"> | |
| <span class="icon">🌐</span> Language Services | |
| </div> | |
| <div class="sidebar-group-label">Notifications</div> | |
| <div class="sidebar-item"> | |
| <span class="icon">🔔</span> Notifications | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="page-header"> | |
| <h1>Refer & Earn</h1> | |
| <p>Share Terp Tools with fellow interpreters. When they subscribe, you both benefit.</p> | |
| </div> | |
| <!-- Stats --> | |
| <div class="stats-row"> | |
| <div class="stat-card"> | |
| <div class="value">14</div> | |
| <div class="label">Links Shared</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="value brand">8</div> | |
| <div class="label">Signed Up</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="value success">5</div> | |
| <div class="label">Converted</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="value warning">5 mo</div> | |
| <div class="label">Free Months Earned</div> | |
| </div> | |
| </div> | |
| <!-- Evangelist Progress --> | |
| <div class="progress-card"> | |
| <div class="progress-header"> | |
| <div class="title">Evangelist Progress</div> | |
| <div class="count"><span>5</span> of 10 conversions</div> | |
| </div> | |
| <div class="progress-track"> | |
| <div class="progress-fill" style="width: 50%"></div> | |
| </div> | |
| <div class="progress-milestones"> | |
| <span class="reached">Start</span> | |
| <span>Evangelist (10) — unlock cash payouts</span> | |
| <span>Legendary (25) — free for life</span> | |
| </div> | |
| </div> | |
| <!-- Share Section --> | |
| <div class="share-card"> | |
| <div class="title">Your Referral Link</div> | |
| <div class="referral-link-row"> | |
| <input class="referral-link-input" value="terptools.com/ref/RF8DNPL" readonly onclick="this.select()"> | |
| <button class="btn btn-brand" onclick="copyLink()">Copy Link</button> | |
| </div> | |
| <div class="share-buttons"> | |
| <button class="btn btn-outline btn-sm" onclick="showToast('Text message opened')">💬 Share via Text</button> | |
| <button class="btn btn-outline btn-sm" onclick="showToast('Email client opened')">✉ Share via Email</button> | |
| <button class="btn btn-ghost btn-sm" onclick="copyLink()">📋 Copy Message</button> | |
| </div> | |
| </div> | |
| <!-- Activity Table --> | |
| <div class="table-card"> | |
| <div class="table-header-bar"> | |
| <div class="title">Referral Activity</div> | |
| <button class="btn btn-ghost btn-sm">Export CSV</button> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Referred</th> | |
| <th>Status</th> | |
| <th>Shared Via</th> | |
| <th>Date</th> | |
| <th>Trial Ends</th> | |
| <th>Reward</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Maria L.</td> | |
| <td><span class="badge badge-success"><span class="badge-dot"></span>Converted</span></td> | |
| <td>Text</td> | |
| <td>Mar 2, 2026</td> | |
| <td>—</td> | |
| <td><span class="badge badge-success">1 month applied</span></td> | |
| </tr> | |
| <tr> | |
| <td>James K.</td> | |
| <td><span class="badge badge-success"><span class="badge-dot"></span>Converted</span></td> | |
| <td>Email</td> | |
| <td>Mar 8, 2026</td> | |
| <td>—</td> | |
| <td><span class="badge badge-success">1 month applied</span></td> | |
| </tr> | |
| <tr> | |
| <td>Sarah T.</td> | |
| <td><span class="badge badge-success"><span class="badge-dot"></span>Converted</span></td> | |
| <td>Copy Link</td> | |
| <td>Mar 12, 2026</td> | |
| <td>—</td> | |
| <td><span class="badge badge-success">1 month applied</span></td> | |
| </tr> | |
| <tr> | |
| <td>David R.</td> | |
| <td><span class="badge badge-success"><span class="badge-dot"></span>Converted</span></td> | |
| <td>Text</td> | |
| <td>Mar 15, 2026</td> | |
| <td>—</td> | |
| <td><span class="badge badge-success">1 month applied</span></td> | |
| </tr> | |
| <tr> | |
| <td>Lisa M.</td> | |
| <td><span class="badge badge-success"><span class="badge-dot"></span>Converted</span></td> | |
| <td>Email</td> | |
| <td>Mar 18, 2026</td> | |
| <td>—</td> | |
| <td><span class="badge badge-success">1 month applied</span></td> | |
| </tr> | |
| <tr> | |
| <td>Anonymous</td> | |
| <td><span class="badge badge-brand"><span class="badge-dot"></span>Signed Up</span></td> | |
| <td>Text</td> | |
| <td>Mar 28, 2026</td> | |
| <td>Jun 26, 2026</td> | |
| <td><span class="badge badge-warning">Pending</span></td> | |
| </tr> | |
| <tr> | |
| <td>Anonymous</td> | |
| <td><span class="badge badge-brand"><span class="badge-dot"></span>Signed Up</span></td> | |
| <td>Copy Link</td> | |
| <td>Apr 2, 2026</td> | |
| <td>Jul 1, 2026</td> | |
| <td><span class="badge badge-warning">Pending</span></td> | |
| </tr> | |
| <tr> | |
| <td>Anonymous</td> | |
| <td><span class="badge badge-brand"><span class="badge-dot"></span>Signed Up</span></td> | |
| <td>Email</td> | |
| <td>Apr 5, 2026</td> | |
| <td>Jul 4, 2026</td> | |
| <td><span class="badge badge-warning">Pending</span></td> | |
| </tr> | |
| <tr> | |
| <td>—</td> | |
| <td><span class="badge badge-muted"><span class="badge-dot"></span>Link Clicked</span></td> | |
| <td>Text</td> | |
| <td>Apr 8, 2026</td> | |
| <td>—</td> | |
| <td><span class="badge badge-muted">Awaiting signup</span></td> | |
| </tr> | |
| <tr> | |
| <td>—</td> | |
| <td><span class="badge badge-muted"><span class="badge-dot"></span>Link Clicked</span></td> | |
| <td>Copy Link</td> | |
| <td>Apr 10, 2026</td> | |
| <td>—</td> | |
| <td><span class="badge badge-muted">Awaiting signup</span></td> | |
| </tr> | |
| <tr> | |
| <td>—</td> | |
| <td><span class="badge badge-muted"><span class="badge-dot"></span>Link Clicked</span></td> | |
| <td>Facebook</td> | |
| <td>Apr 12, 2026</td> | |
| <td>—</td> | |
| <td><span class="badge badge-muted">Awaiting signup</span></td> | |
| </tr> | |
| <tr> | |
| <td>—</td> | |
| <td><span class="badge badge-muted"><span class="badge-dot"></span>Shared</span></td> | |
| <td>Email</td> | |
| <td>Apr 14, 2026</td> | |
| <td>—</td> | |
| <td>—</td> | |
| </tr> | |
| <tr> | |
| <td>—</td> | |
| <td><span class="badge badge-muted"><span class="badge-dot"></span>Shared</span></td> | |
| <td>Text</td> | |
| <td>Apr 15, 2026</td> | |
| <td>—</td> | |
| <td>—</td> | |
| </tr> | |
| <tr> | |
| <td>—</td> | |
| <td><span class="badge badge-muted"><span class="badge-dot"></span>Shared</span></td> | |
| <td>Copy Link</td> | |
| <td>Apr 16, 2026</td> | |
| <td>—</td> | |
| <td>—</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ======================== --> | |
| <!-- VIEW 2: LANDING PAGE --> | |
| <!-- ======================== --> | |
| <div class="view" id="view-landing"> | |
| <div class="landing-page"> | |
| <div class="logo-big">Terp Tools</div> | |
| <div class="avatar-circle">CT</div> | |
| <p class="invite-text"> | |
| <span class="invite-name">Chad T.</span> invited you to try Terp Tools | |
| </p> | |
| <h2>The business platform built for interpreters</h2> | |
| <p class="subtitle"> | |
| Manage bookings, send professional invoices, track agreements, and get paid — all in one place designed specifically for language professionals. | |
| </p> | |
| <div class="landing-benefits"> | |
| <div class="benefit-item"> | |
| <div class="icon">📅</div> | |
| <div class="name">Booking Management</div> | |
| <div class="desc">Track every session with clients, schedules, and status</div> | |
| </div> | |
| <div class="benefit-item"> | |
| <div class="icon">💰</div> | |
| <div class="name">Professional Invoicing</div> | |
| <div class="desc">Send branded invoices, track payments, auto-reminders</div> | |
| </div> | |
| <div class="benefit-item"> | |
| <div class="icon">📝</div> | |
| <div class="name">Agreements & Rates</div> | |
| <div class="desc">Define rate schedules, cancellation terms, expenses</div> | |
| </div> | |
| <div class="benefit-item"> | |
| <div class="icon">🚀</div> | |
| <div class="name">Auto-Pilot (Pro)</div> | |
| <div class="desc">Automate invoicing, reminders, scheduling, and more</div> | |
| </div> | |
| </div> | |
| <button class="cta-btn" onclick="showToast('Redirecting to signup...')">Start Your Free 90-Day Trial</button> | |
| <p class="trial-note"> | |
| <strong>90 days free</strong> — 30 extra days because a colleague referred you.<br> | |
| No credit card required. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- ======================== --> | |
| <!-- VIEW 3: PAYMENT CELEBRATION --> | |
| <!-- ======================== --> | |
| <div class="view" id="view-celebration"> | |
| <div class="top-nav"> | |
| <span class="logo">Terp Tools</span> | |
| <button class="nav-tab active">Dashboard</button> | |
| <button class="nav-tab">Bookings</button> | |
| <button class="nav-tab">Invoices</button> | |
| <button class="nav-tab">Calendar</button> | |
| <button class="nav-tab">Settings</button> | |
| </div> | |
| <div class="app-layout" style="filter: blur(2px); opacity: 0.4;"> | |
| <div class="sidebar"> | |
| <div style="padding: 40px 16px; color: var(--text-faint); font-size: 12px;">[Dashboard content behind modal]</div> | |
| </div> | |
| <div class="main-content"> | |
| <div style="padding: 40px; color: var(--text-faint); font-size: 13px;">Dashboard content is blurred behind the celebration modal...</div> | |
| </div> | |
| </div> | |
| <div class="celebration-overlay" onclick="event.target === this && showToast('Modal dismissed')"> | |
| <div class="celebration-modal"> | |
| <button class="close-btn" onclick="showToast('Modal dismissed')">×</button> | |
| <div class="amount">$450.00</div> | |
| <h3>Payment Received!</h3> | |
| <p>Denver Health just paid invoice IV7K3NR.<br>Know a fellow interpreter who could use this?</p> | |
| <div style="margin-bottom: 16px;"> | |
| <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 8px;">They'll get 90 days free (30 extra, on you)</div> | |
| </div> | |
| <div class="share-row"> | |
| <button class="btn btn-brand" onclick="showToast('Text message opened')">💬 Share via Text</button> | |
| <button class="btn btn-outline" onclick="showToast('Email client opened')">✉ Share via Email</button> | |
| <button class="btn btn-ghost" onclick="copyLink()">📋 Copy Link</button> | |
| </div> | |
| <div style="margin-top: 16px;"> | |
| <button style="background: none; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;">Maybe later</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ======================== --> | |
| <!-- VIEW 4: ONBOARDING STEP --> | |
| <!-- ======================== --> | |
| <div class="view" id="view-onboarding"> | |
| <div class="top-nav"> | |
| <span class="logo">Terp Tools</span> | |
| </div> | |
| <div class="onboarding-card"> | |
| <div class="step-indicator">Step 5 of 5 — Final Step</div> | |
| <h2>One more thing — spread the word</h2> | |
| <p class="desc">Know an interpreter who's still juggling spreadsheets and Word docs? Give them a head start with 90 days free.</p> | |
| <div class="onboarding-share-box"> | |
| <div class="link-display"> | |
| <input class="referral-link-input" value="terptools.com/ref/RF8DNPL" readonly onclick="this.select()" style="flex:1"> | |
| <button class="btn btn-brand btn-sm" onclick="copyLink()">Copy</button> | |
| </div> | |
| <div class="share-btns"> | |
| <button class="btn btn-outline btn-sm" onclick="showToast('Text message opened')">💬 Text</button> | |
| <button class="btn btn-outline btn-sm" onclick="showToast('Email client opened')">✉ Email</button> | |
| </div> | |
| </div> | |
| <div style="margin-bottom: 12px;"> | |
| <span style="font-size: 12px; color: var(--text-muted);">When they subscribe, you earn a free month. Refer 25, get free for life.</span> | |
| </div> | |
| <button class="skip-link" onclick="showToast('Onboarding complete — redirecting to dashboard')">Skip for now</button> | |
| </div> | |
| </div> | |
| <!-- ======================== --> | |
| <!-- VIEW 5: ADMIN CONFIG --> | |
| <!-- ======================== --> | |
| <div class="view" id="view-admin"> | |
| <div class="top-nav"> | |
| <span class="logo">Terp Tools</span> | |
| <button class="nav-tab">Users</button> | |
| <button class="nav-tab">Templates</button> | |
| <button class="nav-tab active">Config</button> | |
| <button class="nav-tab">Logs</button> | |
| <span style="margin-left: auto; font-size: 11px; padding: 4px 10px; border-radius: 100px; background: rgba(239,68,68,0.15); color: #EF4444; font-weight: 500;">ADMIN</span> | |
| </div> | |
| <div style="padding: 32px; max-width: 900px; margin: 0 auto;"> | |
| <div class="page-header"> | |
| <h1>Referral Program Config</h1> | |
| <p>Configure thresholds, rewards, and touchpoints. Changes apply immediately.</p> | |
| </div> | |
| <div class="admin-grid"> | |
| <!-- Thresholds --> | |
| <div class="config-card"> | |
| <div class="card-title">🎯 Thresholds & Milestones</div> | |
| <div class="config-row"> | |
| <div class="config-label">Evangelist threshold</div> | |
| <div class="config-value"><input class="config-input" value="10" type="number"> conversions</div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">Legendary threshold</div> | |
| <div class="config-value"><input class="config-input" value="25" type="number"> conversions</div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">Program enabled</div> | |
| <div class="config-value"><button class="toggle on" onclick="this.classList.toggle('on')"></button></div> | |
| </div> | |
| </div> | |
| <!-- Rewards --> | |
| <div class="config-card"> | |
| <div class="card-title">🎁 Rewards</div> | |
| <div class="config-row"> | |
| <div class="config-label">Referrer reward</div> | |
| <div class="config-value"><input class="config-input" value="1" type="number"> month(s)</div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">Referee bonus days</div> | |
| <div class="config-value"><input class="config-input" value="30" type="number"> days</div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">Evangelist cash payout</div> | |
| <div class="config-value">$<input class="config-input" value="25" type="number"></div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">Legendary reward</div> | |
| <div class="config-value" style="color: var(--success);">Free for life</div> | |
| </div> | |
| </div> | |
| <!-- Trial Settings --> | |
| <div class="config-card"> | |
| <div class="card-title">⏰ Trial & Subscription</div> | |
| <div class="config-row"> | |
| <div class="config-label">Trial duration</div> | |
| <div class="config-value"><input class="config-input" value="60" type="number"> days</div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">Grace period</div> | |
| <div class="config-value"><input class="config-input" value="7" type="number"> days</div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">Trial tier access</div> | |
| <div class="config-value">Pro (full)</div> | |
| </div> | |
| </div> | |
| <!-- Pricing --> | |
| <div class="config-card"> | |
| <div class="card-title">💰 Pricing</div> | |
| <div class="config-row"> | |
| <div class="config-label">Starter</div> | |
| <div class="config-value">$<input class="config-input" value="19" type="number">/mo</div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">Pro</div> | |
| <div class="config-value">$<input class="config-input" value="39" type="number">/mo</div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">Team</div> | |
| <div class="config-value">$<input class="config-input" value="79" type="number">/mo</div> | |
| </div> | |
| <div class="config-row"> | |
| <div class="config-label">AI Add-on</div> | |
| <div class="config-value">$<input class="config-input" value="15" type="number">/mo</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Touchpoints --> | |
| <div class="page-header" style="margin-top: 8px;"> | |
| <h1 style="font-size: 16px;">Touchpoints</h1> | |
| <p>Toggle and customize each referral prompt.</p> | |
| </div> | |
| <div class="touchpoint-card"> | |
| <div class="touchpoint-header"> | |
| <div class="name">🔗 Sidebar — "Refer & Earn" link</div> | |
| <button class="toggle on" onclick="this.classList.toggle('on')"></button> | |
| </div> | |
| </div> | |
| <div class="touchpoint-card"> | |
| <div class="touchpoint-header"> | |
| <div class="name">🎉 Post-Payment Celebration</div> | |
| <button class="toggle on" onclick="this.classList.toggle('on')"></button> | |
| </div> | |
| <div class="touchpoint-body"> | |
| <textarea>Know a fellow interpreter who could use this? They'll get 90 days free (30 extra, on you).</textarea> | |
| </div> | |
| </div> | |
| <div class="touchpoint-card"> | |
| <div class="touchpoint-header"> | |
| <div class="name">🚀 Onboarding Final Step</div> | |
| <button class="toggle on" onclick="this.classList.toggle('on')"></button> | |
| </div> | |
| <div class="touchpoint-body"> | |
| <textarea>Know an interpreter who's still juggling spreadsheets and Word docs? Give them a head start with 90 days free.</textarea> | |
| </div> | |
| </div> | |
| <div class="touchpoint-card"> | |
| <div class="touchpoint-header"> | |
| <div class="name">🏆 Milestone Celebrations</div> | |
| <button class="toggle" onclick="this.classList.toggle('on')"></button> | |
| </div> | |
| <div class="touchpoint-body"> | |
| <textarea>You've invoiced $10,000 through Terp Tools! Share the love with a fellow interpreter.</textarea> | |
| </div> | |
| </div> | |
| <!-- Manual Grants --> | |
| <div class="page-header" style="margin-top: 24px;"> | |
| <h1 style="font-size: 16px;">Manual Access Grants</h1> | |
| <p>Grant lifetime or time-limited access to any user.</p> | |
| </div> | |
| <div class="config-card" style="max-width: 100%;"> | |
| <div style="display: flex; gap: 8px; align-items: end; flex-wrap: wrap;"> | |
| <div> | |
| <div style="font-size: 11px; color: var(--text-muted); margin-bottom: 4px;">User email</div> | |
| <input class="config-input" style="width: 240px;" placeholder="interpreter@email.com"> | |
| </div> | |
| <div> | |
| <div style="font-size: 11px; color: var(--text-muted); margin-bottom: 4px;">Grant type</div> | |
| <select class="config-input" style="width: 140px; text-align: left;"> | |
| <option>Lifetime</option> | |
| <option>Beta access</option> | |
| </select> | |
| </div> | |
| <div> | |
| <div style="font-size: 11px; color: var(--text-muted); margin-bottom: 4px;">Duration (beta only)</div> | |
| <input class="config-input" style="width: 100px;" placeholder="90 days"> | |
| </div> | |
| <div> | |
| <div style="font-size: 11px; color: var(--text-muted); margin-bottom: 4px;">Note</div> | |
| <input class="config-input" style="width: 200px; text-align: left;" placeholder="RID Conference 2026"> | |
| </div> | |
| <button class="btn btn-brand btn-sm" onclick="showToast('Access granted!')">Grant Access</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function showView(name) { | |
| document.querySelectorAll('.view').forEach(v => v.classList.remove('active')); | |
| document.querySelectorAll('.screen-btn').forEach(b => b.classList.remove('active')); | |
| document.getElementById('view-' + name).classList.add('active'); | |
| event.target.classList.add('active'); | |
| } | |
| function copyLink() { | |
| navigator.clipboard.writeText('terptools.com/ref/RF8DNPL').catch(() => {}); | |
| showToast('Referral link copied!'); | |
| } | |
| function showToast(msg) { | |
| const toast = document.getElementById('toast'); | |
| document.getElementById('toast-msg').textContent = msg; | |
| toast.classList.add('show'); | |
| setTimeout(() => toast.classList.remove('show'), 2500); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment