Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>FLEN Wallet - Unified Loyalty Ecosystem</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-purple: #4A148C; | |
| --primary-purple-light: #6A1B9A; | |
| --primary-purple-dark: #311B92; | |
| --accent-gold: #FFD700; | |
| --accent-gold-dark: #FFC107; | |
| --surface-dark: #1A1A2E; | |
| --surface-light: #16213E; | |
| --text-primary: #FFFFFF; | |
| --text-secondary: #B0B0B0; | |
| --success: #4CAF50; | |
| --warning: #FF9800; | |
| --error: #F44336; | |
| --card-bg: rgba(255, 255, 255, 0.05); | |
| --border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; | |
| background: linear-gradient(135deg, var(--surface-dark) 0%, var(--surface-light) 100%); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-x: hidden; | |
| } | |
| .app-container { | |
| max-width: 430px; | |
| margin: 0 auto; | |
| width: 100%; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| background: var(--surface-dark); | |
| } | |
| /* Header Styles */ | |
| .header { | |
| padding: 20px; | |
| background: linear-gradient(180deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-title { | |
| font-size: 20px; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .header-icons { | |
| display: flex; | |
| gap: 15px; | |
| align-items: center; | |
| } | |
| .icon-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 20px; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| .icon-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| flex: 1; | |
| padding-bottom: 80px; | |
| overflow-y: auto; | |
| } | |
| .screen { | |
| display: none; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| .screen.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Dashboard Styles */ | |
| .balance-card { | |
| background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple)); | |
| margin: 20px; | |
| padding: 30px; | |
| border-radius: 20px; | |
| text-align: center; | |
| box-shadow: 0 8px 32px rgba(74, 20, 140, 0.3); | |
| } | |
| .balance-label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin-bottom: 10px; | |
| } | |
| .balance-amount { | |
| font-size: 36px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 10px; | |
| } | |
| .balance-usd { | |
| font-size: 18px; | |
| color: var(--accent-gold); | |
| } | |
| /* Stats Cards */ | |
| .stats-container { | |
| padding: 0 20px; | |
| display: flex; | |
| gap: 10px; | |
| overflow-x: auto; | |
| margin-bottom: 20px; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .stat-card { | |
| min-width: 120px; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 15px; | |
| padding: 15px; | |
| text-align: center; | |
| backdrop-filter: blur(10px); | |
| } | |
| .stat-icon { | |
| font-size: 24px; | |
| margin-bottom: 8px; | |
| } | |
| .stat-value { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--accent-gold); | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-top: 4px; | |
| } | |
| /* Quick Actions */ | |
| .quick-actions { | |
| padding: 0 20px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .action-btn { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 15px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| backdrop-filter: blur(10px); | |
| } | |
| .action-btn:hover { | |
| background: rgba(255, 215, 0, 0.1); | |
| border-color: var(--accent-gold); | |
| transform: translateY(-2px); | |
| } | |
| .action-icon { | |
| font-size: 28px; | |
| } | |
| .action-label { | |
| font-size: 14px; | |
| color: var(--text-primary); | |
| } | |
| /* Transaction List */ | |
| .section-title { | |
| padding: 20px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .transaction-list { | |
| padding: 0 20px; | |
| } | |
| .transaction-item { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 15px; | |
| padding: 15px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| backdrop-filter: blur(10px); | |
| } | |
| .transaction-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .transaction-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--primary-purple); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| } | |
| .transaction-details { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .transaction-title { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .transaction-date { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .transaction-amount { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .transaction-amount.positive { | |
| color: var(--success); | |
| } | |
| .transaction-amount.negative { | |
| color: var(--error); | |
| } | |
| /* Tab Navigation */ | |
| .bottom-nav { | |
| position: fixed; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100%; | |
| max-width: 430px; | |
| background: var(--surface-light); | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-around; | |
| padding: 10px 0; | |
| backdrop-filter: blur(20px); | |
| z-index: 100; | |
| } | |
| .nav-item { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| color: var(--text-secondary); | |
| } | |
| .nav-item.active { | |
| color: var(--accent-gold); | |
| } | |
| .nav-icon { | |
| font-size: 24px; | |
| } | |
| .nav-label { | |
| font-size: 11px; | |
| } | |
| /* Earn Tab Styles */ | |
| .category-tabs { | |
| display: flex; | |
| gap: 10px; | |
| padding: 20px; | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .category-tab { | |
| padding: 10px 20px; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 25px; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-size: 14px; | |
| } | |
| .category-tab.active { | |
| background: var(--primary-purple); | |
| border-color: var(--primary-purple); | |
| color: var(--text-primary); | |
| } | |
| .partner-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 20px; | |
| padding: 20px; | |
| margin: 0 20px 15px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .partner-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .partner-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .partner-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 12px; | |
| background: var(--primary-purple); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| } | |
| .partner-name { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .partner-status { | |
| padding: 5px 12px; | |
| background: rgba(76, 175, 80, 0.2); | |
| color: var(--success); | |
| border-radius: 15px; | |
| font-size: 12px; | |
| } | |
| .reward-info { | |
| margin: 15px 0; | |
| } | |
| .reward-amount { | |
| font-size: 18px; | |
| color: var(--accent-gold); | |
| margin-bottom: 10px; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin-bottom: 5px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary-purple), var(--accent-gold)); | |
| border-radius: 10px; | |
| transition: width 0.3s; | |
| } | |
| .progress-text { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .convert-btn { | |
| width: 100%; | |
| padding: 15px; | |
| background: linear-gradient(135deg, var(--primary-purple), var(--primary-purple-light)); | |
| border: none; | |
| border-radius: 12px; | |
| color: var(--text-primary); | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .convert-btn:hover { | |
| background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple)); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 20px rgba(74, 20, 140, 0.4); | |
| } | |
| /* Wallet Tab Styles */ | |
| .wallet-balance { | |
| background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple)); | |
| margin: 20px; | |
| padding: 30px; | |
| border-radius: 20px; | |
| text-align: center; | |
| } | |
| .balance-breakdown { | |
| margin: 20px; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 20px; | |
| padding: 20px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .breakdown-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .breakdown-item:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .breakdown-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .breakdown-bar { | |
| width: 100px; | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .breakdown-fill { | |
| height: 100%; | |
| background: var(--accent-gold); | |
| border-radius: 3px; | |
| } | |
| .wallet-actions { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| margin: 20px; | |
| } | |
| /* Card Tab Styles */ | |
| .virtual-card { | |
| background: linear-gradient(135deg, #1e3c72, #2a5298); | |
| margin: 20px; | |
| padding: 30px; | |
| border-radius: 20px; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .virtual-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); | |
| animation: shimmer 3s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .card-brand { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 20px; | |
| } | |
| .card-number { | |
| font-size: 24px; | |
| letter-spacing: 3px; | |
| margin-bottom: 20px; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .card-details { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| } | |
| .card-expiry { | |
| font-size: 14px; | |
| } | |
| .card-cvv { | |
| font-size: 14px; | |
| letter-spacing: 2px; | |
| } | |
| .card-controls { | |
| margin: 20px; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 20px; | |
| padding: 20px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .control-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .control-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| width: 50px; | |
| height: 26px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 13px; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .toggle-switch.active { | |
| background: var(--accent-gold); | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: 20px; | |
| height: 20px; | |
| background: white; | |
| border-radius: 50%; | |
| transition: transform 0.3s; | |
| } | |
| .toggle-switch.active .toggle-slider { | |
| transform: translateX(24px); | |
| } | |
| /* Profile Tab Styles */ | |
| .profile-header { | |
| background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple)); | |
| padding: 30px 20px; | |
| text-align: center; | |
| } | |
| .profile-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: var(--accent-gold); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 15px; | |
| font-size: 36px; | |
| color: var(--primary-purple-dark); | |
| } | |
| .profile-name { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .profile-email { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .kyc-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 5px 12px; | |
| background: rgba(76, 175, 80, 0.2); | |
| color: var(--success); | |
| border-radius: 15px; | |
| font-size: 12px; | |
| margin-top: 10px; | |
| } | |
| .profile-section { | |
| margin: 20px; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 20px; | |
| padding: 20px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .section-header { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .add-btn { | |
| color: var(--accent-gold); | |
| font-size: 14px; | |
| cursor: pointer; | |
| } | |
| .profile-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 12px 0; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .profile-item:last-child { | |
| border-bottom: none; | |
| } | |
| .profile-item-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .profile-item-icon { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 8px; | |
| background: var(--primary-purple); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 18px; | |
| } | |
| .profile-item-right { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| /* Modal Styles */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: var(--surface-light); | |
| border-radius: 20px; | |
| padding: 30px; | |
| max-width: 400px; | |
| width: 90%; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| } | |
| .modal-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 12px; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| color: var(--text-primary); | |
| font-size: 16px; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--accent-gold); | |
| } | |
| .modal-buttons { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .btn { | |
| flex: 1; | |
| padding: 15px; | |
| border: none; | |
| border-radius: 10px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary-purple), var(--primary-purple-light)); | |
| color: white; | |
| } | |
| .btn-secondary { | |
| background: var(--card-bg); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-color); | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 480px) { | |
| .app-container { | |
| max-width: 100%; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid var(--border-color); | |
| border-radius: 50%; | |
| border-top-color: var(--accent-gold); | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: 100px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| background: var(--surface-light); | |
| color: var(--text-primary); | |
| padding: 15px 25px; | |
| border-radius: 25px; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); | |
| z-index: 2000; | |
| opacity: 0; | |
| transition: all 0.3s; | |
| } | |
| .toast.show { | |
| transform: translateX(-50%) translateY(0); | |
| opacity: 1; | |
| } | |
| .toast.success { | |
| background: var(--success); | |
| } | |
| .toast.error { | |
| background: var(--error); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-title"> | |
| <span>FLEN Wallet</span> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #FFD700; text-decoration: none; font-size: 12px; font-weight: normal;"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| <div class="header-icons"> | |
| <button class="icon-btn" onclick="showNotifications()">🔔</button> | |
| <button class="icon-btn" onclick="showProfile()">👤</button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Home Screen --> | |
| <div class="screen active" id="home-screen"> | |
| <div class="balance-card"> | |
| <div class="balance-label">Your FLEN Balance</div> | |
| <div class="balance-amount">12,450.00</div> | |
| <div class="balance-usd">≈ $1,245.00 USD</div> | |
| </div> | |
| <div class="stats-container"> | |
| <div class="stat-card"> | |
| <div class="stat-icon">🏨</div> | |
| <div class="stat-value">+2,300</div> | |
| <div class="stat-label">Hospitality</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon">🛡️</div> | |
| <div class="stat-value">+5,000</div> | |
| <div class="stat-label">Insurance</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon">🛍️</div> | |
| <div class="stat-value">+1,200</div> | |
| <div class="stat-label">Retail</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon">🔗</div> | |
| <div class="stat-value">+3,950</div> | |
| <div class="stat-label">Affiliates</div> | |
| </div> | |
| </div> | |
| <div class="quick-actions"> | |
| <button class="action-btn" onclick="showConvertModal()"> | |
| <span class="action-icon">💱</span> | |
| <span class="action-label">Convert to Fiat</span> | |
| </button> | |
| <button class="action-btn" onclick="showExchangeModal()"> | |
| <span class="action-icon">🔄</span> | |
| <span class="action-label">Exchange Crypto</span> | |
| </button> | |
| <button class="action-btn" onclick="showCardScreen()"> | |
| <span class="action-icon">💳</span> | |
| <span class="action-label">Top-up Card</span> | |
| </button> | |
| <button class="action-btn" onclick="showScanQR()"> | |
| <span class="action-icon">📱</span> | |
| <span class="action-label">Scan QR</span> | |
| </button> | |
| </div> | |
| <div class="section-title">Recent Activity</div> | |
| <div class="transaction-list"> | |
| <div class="transaction-item"> | |
| <div class="transaction-left"> | |
| <div class="transaction-icon">🛍️</div> | |
| <div class="transaction-details"> | |
| <div class="transaction-title">Retail voucher</div> | |
| <div class="transaction-date">Today</div> | |
| </div> | |
| </div> | |
| <div class="transaction-amount positive">+500 FLEN</div> | |
| </div> | |
| <div class="transaction-item"> | |
| <div class="transaction-left"> | |
| <div class="transaction-icon">🛡️</div> | |
| <div class="transaction-details"> | |
| <div class="transaction-title">Insurance claim</div> | |
| <div class="transaction-date">Yesterday</div> | |
| </div> | |
| </div> | |
| <div class="transaction-amount positive">+5,000 FLEN</div> | |
| </div> | |
| <div class="transaction-item"> | |
| <div class="transaction-left"> | |
| <div class="transaction-icon">☕</div> | |
| <div class="transaction-details"> | |
| <div class="transaction-title">Starbucks (Card)</div> | |
| <div class="transaction-date">Dec 20</div> | |
| </div> | |
| </div> | |
| <div class="transaction-amount negative">-200 FLEN</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Earn Screen --> | |
| <div class="screen" id="earn-screen"> | |
| <div class="category-tabs"> | |
| <div class="category-tab active" onclick="switchCategory(this, 'hospitality')">🏨 Hospitality</div> | |
| <div class="category-tab" onclick="switchCategory(this, 'insurance')">🛡️ Insurance</div> | |
| <div class="category-tab" onclick="switchCategory(this, 'retail')">🛍️ Retail</div> | |
| <div class="category-tab" onclick="switchCategory(this, 'affiliates')">🔗 Affiliates</div> | |
| </div> | |
| <div id="hospitality-content" class="category-content"> | |
| <button class="convert-btn" style="margin: 20px; background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));"> | |
| + Connect New Partner | |
| </button> | |
| <div class="partner-card"> | |
| <div class="partner-header"> | |
| <div class="partner-info"> | |
| <div class="partner-icon">🏨</div> | |
| <div> | |
| <div class="partner-name">Grand Hotel Chain</div> | |
| </div> | |
| </div> | |
| <span class="partner-status">Connected</span> | |
| </div> | |
| <div class="reward-info"> | |
| <div class="reward-amount">Available: 8,500 points (~850 FLEN)</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 80%;"></div> | |
| </div> | |
| <div class="progress-text">80% to next reward</div> | |
| </div> | |
| <button class="convert-btn" onclick="convertToFLen('Grand Hotel Chain', 850)">Convert to FLEN</button> | |
| </div> | |
| <div class="partner-card"> | |
| <div class="partner-header"> | |
| <div class="partner-info"> | |
| <div class="partner-icon">🏖️</div> | |
| <div> | |
| <div class="partner-name">Beach Resort</div> | |
| </div> | |
| </div> | |
| <span class="partner-status">Connected</span> | |
| </div> | |
| <div class="reward-info"> | |
| <div class="reward-amount">Pending: 2 vouchers</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 60%;"></div> | |
| </div> | |
| <div class="progress-text">Processing...</div> | |
| </div> | |
| <button class="convert-btn" onclick="convertToFLen('Beach Resort', 500)">Convert to FLEN</button> | |
| </div> | |
| </div> | |
| <div id="insurance-content" class="category-content" style="display: none;"> | |
| <div class="section-title">Pending Claims</div> | |
| <div class="partner-card"> | |
| <div class="partner-header"> | |
| <div class="partner-info"> | |
| <div class="partner-icon">🛡️</div> | |
| <div> | |
| <div class="partner-name">Claim #12345 - Auto Insurance</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="reward-info"> | |
| <div class="reward-amount">Amount: $500.00</div> | |
| <p style="margin-top: 10px; font-size: 14px;">Payout:</p> | |
| <label style="display: flex; align-items: center; gap: 10px; margin-top: 10px;"> | |
| <input type="radio" name="payout" checked> Fiat Transfer | |
| </label> | |
| <label style="display: flex; align-items: center; gap: 10px; margin-top: 10px;"> | |
| <input type="radio" name="payout"> Receive in FLEN (~5,000 FLEN) | |
| </label> | |
| </div> | |
| <button class="convert-btn" onclick="confirmClaim()">Confirm Payout</button> | |
| </div> | |
| <div class="partner-card"> | |
| <div class="partner-header"> | |
| <div class="partner-info"> | |
| <div class="partner-icon">🏥</div> | |
| <div> | |
| <div class="partner-name">Claim #67890 - Health</div> | |
| </div> | |
| </div> | |
| <span class="partner-status" style="background: rgba(255, 152, 0, 0.2); color: var(--warning);">Pending</span> | |
| </div> | |
| <div class="reward-info"> | |
| <div class="reward-amount">We'll notify when approved</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="retail-content" class="category-content" style="display: none;"> | |
| <button class="convert-btn" style="margin: 20px; background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));"> | |
| + Connect New Partner | |
| </button> | |
| <div class="partner-card"> | |
| <div class="partner-header"> | |
| <div class="partner-info"> | |
| <div class="partner-icon">🛍️</div> | |
| <div> | |
| <div class="partner-name">Fashion Retailer</div> | |
| </div> | |
| </div> | |
| <span class="partner-status">Connected</span> | |
| </div> | |
| <div class="reward-info"> | |
| <div class="reward-amount">Available: 3,200 points (~320 FLEN)</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 65%;"></div> | |
| </div> | |
| <div class="progress-text">65% to next reward</div> | |
| </div> | |
| <button class="convert-btn" onclick="convertToFLen('Fashion Retailer', 320)">Convert to FLEN</button> | |
| </div> | |
| </div> | |
| <div id="affiliates-content" class="category-content" style="display: none;"> | |
| <button class="convert-btn" style="margin: 20px; background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));"> | |
| + Connect New Partner | |
| </button> | |
| <div class="partner-card"> | |
| <div class="partner-header"> | |
| <div class="partner-info"> | |
| <div class="partner-icon">🔗</div> | |
| <div> | |
| <div class="partner-name">FLENCORP Direct</div> | |
| </div> | |
| </div> | |
| <span class="partner-status">Connected</span> | |
| </div> | |
| <div class="reward-info"> | |
| <div class="reward-amount">Available: 2,500 FLEN</div> | |
| </div> | |
| <button class="convert-btn" onclick="convertToFLen('FLENCORP Direct', 2500)">Claim FLEN</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wallet Screen --> | |
| <div class="screen" id="wallet-screen"> | |
| <div class="wallet-balance"> | |
| <div class="balance-amount">12,450.00 FLEN</div> | |
| <div class="balance-usd">≈ $1,245.00 USD</div> | |
| </div> | |
| <div class="balance-breakdown"> | |
| <div class="section-title">Balance Breakdown</div> | |
| <div class="breakdown-item"> | |
| <div class="breakdown-left"> | |
| <span>🏨 Hospitality</span> | |
| </div> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <div class="breakdown-bar"> | |
| <div class="breakdown-fill" style="width: 30%;"></div> | |
| </div> | |
| <span>30%</span> | |
| </div> | |
| </div> | |
| <div class="breakdown-item"> | |
| <div class="breakdown-left"> | |
| <span>🛡️ Insurance</span> | |
| </div> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <div class="breakdown-bar"> | |
| <div class="breakdown-fill" style="width: 40%;"></div> | |
| </div> | |
| <span>40%</span> | |
| </div> | |
| </div> | |
| <div class="breakdown-item"> | |
| <div class="breakdown-left"> | |
| <span>🛍️ Retail</ |