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> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #4A148C; | |
| --primary-light: #7B1FA2; | |
| --primary-dark: #311B92; | |
| --gold-color: #FFD700; | |
| --gold-light: #FFECB3; | |
| --bg-primary: #121212; | |
| --bg-secondary: #1E1E1E; | |
| --bg-card: #2A2A2A; | |
| --text-primary: #FFFFFF; | |
| --text-secondary: #B0B0B0; | |
| --text-dim: #666666; | |
| --success: #4CAF50; | |
| --error: #F44336; | |
| --warning: #FF9800; | |
| --border-color: #333333; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.3); | |
| --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; | |
| background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .app-container { | |
| max-width: 428px; | |
| margin: 0 auto; | |
| min-height: 100vh; | |
| position: relative; | |
| background: var(--bg-primary); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| /* Header */ | |
| .app-header { | |
| background: var(--primary-color); | |
| padding: 15px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: var(--shadow); | |
| } | |
| .header-title { | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .header-title .logo { | |
| width: 32px; | |
| height: 32px; | |
| background: var(--gold-color); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .header-actions button { | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| color: white; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .header-actions button:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: scale(1.1); | |
| } | |
| /* Main Content Area */ | |
| .main-content { | |
| padding-bottom: 80px; | |
| min-height: calc(100vh - 140px); | |
| } | |
| .screen { | |
| display: none; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .screen.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Home Dashboard */ | |
| .balance-section { | |
| background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); | |
| padding: 30px 20px; | |
| text-align: center; | |
| } | |
| .balance-label { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-bottom: 8px; | |
| } | |
| .balance-amount { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| color: var(--text-primary); | |
| margin-bottom: 5px; | |
| } | |
| .balance-fiat { | |
| color: var(--gold-color); | |
| font-size: 1.1rem; | |
| } | |
| /* Quick Stats Cards - Horizontal Scrollable */ | |
| .stats-container { | |
| padding: 20px; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .stats-container::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .quick-stats { | |
| display: flex; | |
| gap: 15px; | |
| min-width: max-content; | |
| } | |
| .stat-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 15px; | |
| padding: 20px; | |
| min-width: 140px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow); | |
| } | |
| .stat-icon { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| margin-bottom: 5px; | |
| } | |
| .stat-value { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: var(--gold-color); | |
| } | |
| .affiliates-card { | |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); | |
| border: none; | |
| } | |
| .affiliates-card .stat-label, | |
| .affiliates-card .stat-value { | |
| color: white; | |
| } | |
| /* Quick Actions Grid */ | |
| .quick-actions { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 15px; | |
| margin: 0 20px 20px; | |
| } | |
| .quick-action-btn { | |
| background: var(--bg-card); | |
| 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 ease; | |
| } | |
| .quick-action-btn:hover { | |
| background: var(--primary-color); | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow); | |
| } | |
| .quick-action-btn i { | |
| font-size: 1.8rem; | |
| color: var(--gold-color); | |
| } | |
| .quick-action-btn span { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Recent Activity */ | |
| .activity-section { | |
| margin: 0 20px 20px; | |
| } | |
| .section-title { | |
| font-size: 1.1rem; | |
| margin-bottom: 15px; | |
| color: var(--text-primary); | |
| } | |
| .activity-list { | |
| background: var(--bg-card); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| } | |
| .activity-item { | |
| padding: 15px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| transition: background 0.3s ease; | |
| } | |
| .activity-item:hover { | |
| background: var(--bg-secondary); | |
| } | |
| .activity-item:last-child { | |
| border-bottom: none; | |
| } | |
| .activity-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .activity-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| } | |
| .activity-icon.positive { | |
| background: rgba(76, 175, 80, 0.2); | |
| color: var(--success); | |
| } | |
| .activity-icon.negative { | |
| background: rgba(244, 67, 54, 0.2); | |
| color: var(--error); | |
| } | |
| .activity-details { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .activity-title { | |
| font-size: 0.95rem; | |
| color: var(--text-primary); | |
| } | |
| .activity-time { | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| } | |
| .activity-amount { | |
| font-weight: bold; | |
| font-size: 0.95rem; | |
| } | |
| .activity-amount.positive { | |
| color: var(--success); | |
| } | |
| .activity-amount.negative { | |
| color: var(--error); | |
| } | |
| /* Banner */ | |
| .promo-banner { | |
| background: linear-gradient(135deg, var(--gold-color), #FFA500); | |
| margin: 0 20px; | |
| padding: 15px; | |
| border-radius: 15px; | |
| text-align: center; | |
| color: var(--primary-dark); | |
| font-weight: 600; | |
| box-shadow: var(--shadow); | |
| } | |
| /* Earn Tab */ | |
| .partner-categories { | |
| display: flex; | |
| gap: 8px; | |
| padding: 20px; | |
| margin-bottom: 10px; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .partner-categories::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .category-tab { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 25px; | |
| padding: 8px 16px; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.85rem; | |
| } | |
| .category-tab.active { | |
| background: var(--primary-color); | |
| border-color: var(--primary-color); | |
| } | |
| /* Partner Cards */ | |
| .partner-list { | |
| padding: 0 20px; | |
| } | |
| .partner-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin-bottom: 15px; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .partner-card:hover { | |
| transform: translateX(5px); | |
| box-shadow: var(--shadow); | |
| } | |
| .partner-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 15px; | |
| } | |
| .partner-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .partner-logo { | |
| width: 45px; | |
| height: 45px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| background: var(--bg-secondary); | |
| } | |
| .partner-details h3 { | |
| font-size: 1rem; | |
| margin-bottom: 3px; | |
| } | |
| .partner-details p { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| .partner-status { | |
| background: var(--success); | |
| color: white; | |
| padding: 4px 10px; | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .partner-status.pending { | |
| background: var(--warning); | |
| } | |
| .progress-bar { | |
| background: var(--bg-secondary); | |
| height: 8px; | |
| border-radius: 4px; | |
| margin-bottom: 15px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--gold-color), var(--primary-color)); | |
| border-radius: 4px; | |
| transition: width 0.3s ease; | |
| } | |
| .convert-btn { | |
| width: 100%; | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 12px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-weight: 600; | |
| } | |
| .convert-btn:hover { | |
| background: var(--primary-light); | |
| transform: scale(1.02); | |
| } | |
| /* Insurance Claims */ | |
| .claim-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin-bottom: 15px; | |
| } | |
| .claim-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .claim-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--warning); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| } | |
| .claim-details { | |
| flex: 1; | |
| } | |
| .claim-number { | |
| font-weight: 600; | |
| margin-bottom: 3px; | |
| } | |
| .claim-type { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| .claim-amount { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: var(--gold-color); | |
| margin-bottom: 15px; | |
| } | |
| .payout-options { | |
| margin-bottom: 15px; | |
| } | |
| .payout-option { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| } | |
| .payout-option input[type="radio"] { | |
| width: 18px; | |
| height: 18px; | |
| accent-color: var(--primary-color); | |
| } | |
| /* Wallet Tab */ | |
| .wallet-header { | |
| background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); | |
| padding: 30px 20px; | |
| text-align: center; | |
| } | |
| .wallet-balance { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .wallet-fiat { | |
| color: var(--gold-color); | |
| font-size: 1rem; | |
| } | |
| /* Pie Chart */ | |
| .pie-chart-container { | |
| margin: 20px; | |
| background: var(--bg-card); | |
| border-radius: 15px; | |
| padding: 20px; | |
| } | |
| .chart-title { | |
| font-size: 1rem; | |
| margin-bottom: 15px; | |
| } | |
| .chart-legend { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .legend-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .legend-color { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 2px; | |
| } | |
| .legend-bar { | |
| flex: 1; | |
| height: 8px; | |
| background: var(--bg-secondary); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-left: 10px; | |
| } | |
| .legend-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| } | |
| /* Transaction Filter */ | |
| .transaction-filter { | |
| margin: 0 20px 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .filter-btn { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| /* Card Tab */ | |
| .card-section { | |
| margin: 20px; | |
| } | |
| .virtual-card { | |
| background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%); | |
| border-radius: 20px; | |
| padding: 30px; | |
| position: relative; | |
| min-height: 200px; | |
| box-shadow: var(--shadow-lg); | |
| margin-bottom: 20px; | |
| } | |
| .card-brand { | |
| color: white; | |
| font-size: 0.9rem; | |
| opacity: 0.9; | |
| margin-bottom: 20px; | |
| } | |
| .card-number { | |
| color: white; | |
| font-size: 1.4rem; | |
| letter-spacing: 3px; | |
| margin-bottom: 30px; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .card-info { | |
| display: flex; | |
| justify-content: space-between; | |
| color: white; | |
| } | |
| .card-info div { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .card-info-label { | |
| font-size: 0.75rem; | |
| opacity: 0.7; | |
| margin-bottom: 3px; | |
| } | |
| .card-info-value { | |
| font-size: 0.9rem; | |
| } | |
| .card-status { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .status-badge { | |
| background: var(--success); | |
| color: white; | |
| padding: 4px 10px; | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .tier-info { | |
| color: var(--gold-color); | |
| font-size: 0.85rem; | |
| } | |
| /* Card Controls */ | |
| .card-controls { | |
| margin-bottom: 20px; | |
| } | |
| .control-item { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .control-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .control-label i { | |
| color: var(--gold-color); | |
| } | |
| /* Toggle Switch */ | |
| .toggle-switch { | |
| position: relative; | |
| width: 50px; | |
| height: 26px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: var(--bg-secondary); | |
| transition: .4s; | |
| border-radius: 34px; | |
| } | |
| .toggle-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 18px; | |
| width: 18px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .toggle-slider { | |
| background-color: var(--primary-color); | |
| } | |
| input:checked + .toggle-slider:before { | |
| transform: translateX(24px); | |
| } | |
| /* Order Physical Card Button */ | |
| .order-card-btn { | |
| width: 100%; | |
| background: linear-gradient(135deg, var(--gold-color), #FFA500); | |
| color: var(--primary-dark); | |
| border: none; | |
| border-radius: 10px; | |
| padding: 15px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .order-card-btn:hover { | |
| transform: scale(1.02); | |
| box-shadow: var(--shadow); | |
| } | |
| /* Profile Tab */ | |
| .profile-section { | |
| padding: 20px; | |
| } | |
| .profile-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| background: var(--bg-card); | |
| border-radius: 15px; | |
| padding: 20px; | |
| } | |
| .profile-avatar { | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary-color), var(--gold-color)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| } | |
| .profile-info h2 { | |
| margin-bottom: 5px; | |
| } | |
| .profile-info p { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-bottom: 5px; | |
| } | |
| .kyc-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| color: var(--success); | |
| font-size: 0.85rem; | |
| } | |
| .linked-partners { | |
| margin-bottom: 20px; | |
| } | |
| .partner-item { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| padding: 12px 15px; | |
| margin-bottom: 10px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .partner-item-icon { | |
| margin-right: 10px; | |
| } | |
| .partner-item-status { | |
| color: var(--success); | |
| font-size: 0.85rem; | |
| } | |
| .add-partner-btn { | |
| width: 100%; | |
| background: var(--bg-card); | |
| border: 2px dashed var(--border-color); | |
| border-radius: 10px; | |
| padding: 12px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .add-partner-btn:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| .settings-section { | |
| background: var(--bg-card); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| margin-bottom: 20px; | |
| } | |
| .settings-group { | |
| padding: 15px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .settings-group:last-child { | |
| border-bottom: none; | |
| } | |
| .settings-title { | |
| font-size: 0.9rem; | |
| color: var(--gold-color); | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| } | |
| .setting-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 0; | |
| } | |
| .setting-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .setting-label i { | |
| width: 20px; | |
| color: var(--text-secondary); | |
| } | |
| .setting-value { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| } | |
| /* Bottom Navigation */ | |
| .bottom-nav { | |
| position: fixed; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100%; | |
| max-width: 428px; | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-around; | |
| padding: 8px 0; | |
| z-index: 100; | |
| } | |
| .nav-item { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: var(--text-dim); | |
| } | |
| .nav-item.active { | |
| color: var(--gold-color); | |
| } | |
| .nav-item i { | |
| font-size: 1.2rem; | |
| } | |
| .nav-item span { | |
| font-size: 0.7rem; | |
| } | |
| .nav-item:hover { | |
| transform: translateY(-2px); | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| z-index: 1000; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .modal.active { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-content { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 30px; | |
| max-width: 400px; | |
| width: 90%; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| animation: slideUp 0.3s ease; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translateY(50px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .form-group input, | |
| .form-group select { | |
| width: 100%; | |
| padding: 12px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| .submit-btn { | |
| width: 100%; | |
| padding: 15px; | |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| top: 80px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-100px); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| padding: 15px 20px; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow-lg); | |
| z-index: 2000; | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .toast.show { | |
| transform: translateX(-50%) translateY(0); | |
| opacity: 1; | |
| } | |
| .toast.success { | |
| border-color: var(--success); | |
| background: rgba(76, 175, 80, 0.1); | |
| } | |
| .toast.error { | |
| border-color: var(--error); | |
| background: rgba(244, 67, 54, 0.1); | |
| } | |
| /* Built with anycoder link */ | |
| .built-with { | |
| text-align: center; | |
| padding: 10px; | |
| color: var(--text-dim); | |
| font-size: 0.75rem; | |
| background: var(--bg-secondary); | |
| } | |
| .built-with a { | |
| color: var(--gold-color); | |
| text-decoration: none; | |
| } | |
| .built-with a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Responsive Design */ | |
| @media (min-width: 429px) { | |
| .app-container { | |
| margin: 20px auto; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| } | |
| .bottom-nav { | |
| border-radius: 0 0 20px 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <div class="app-header"> | |
| <div class="header-title"> | |
| <div class="logo">F</div> | |
| <span>FLEN Wallet</span> | |
| </div> | |
| <div class="header-actions"> | |
| <button onclick="showNotifications()"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button onclick="showQRScanner()"> | |
| <i class="fas fa-qrcode"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content"> | |
| <!-- Home Screen --> | |
| <div class="screen active" id="home-screen"> | |
| <!-- Balance Section --> | |
| <div class="balance-section"> | |
| <div class="balance-label">Your FLEN Balance</div> | |
| <div class="balance-amount">12,450.00 FLEN</div> | |
| <div class="balance-fiat">≈ $1,245.00 USD</div> | |
| </div> | |
| <!-- Quick Stats - Horizontal Scrollable --> | |
| <div class="stats-container"> | |
| <div class="quick-stats"> | |
| <div class="stat-card"> | |
| <div class="stat-icon">🏨</div> | |
| <div class="stat-label">Hospitality</div> | |
| <div class="stat-value">+2,300</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon">🛡️</div> | |
| <div class="stat-label">Insurance</div> | |
| <div class="stat-value">+5,000</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon">🛍️</div> | |
| <div class="stat-label">Retail</div> | |
| <div class="stat-value">+1,200</div> | |
| </div> | |
| <div class="stat-card affiliates-card"> | |
| <div class="stat-icon">🔗</div> | |
| <div class="stat-label">Affiliates</div> | |
| <div class="stat-value">+3,950</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions Grid --> | |
| <div class="quick-actions"> | |
| <div class="quick-action-btn" onclick="convertToFiat()"> | |
| <i class="fas fa-exchange-alt"></i> | |
| <span>Convert to Fiat</span> | |
| </div> | |
| <div class="quick-action-btn" onclick="swapCrypto()"> | |
| <i class="fas fa-sync"></i> | |
| <span>Exchange Crypto</span> | |
| </div> | |
| <div class="quick-action-btn" onclick="showCard()"> | |
| <i class="fas fa-credit-card"></i> | |
| <span>Top-up Card</span> | |
| </div> | |
| <div class="quick-action-btn" onclick="showQRScanner()"> | |
| <i class="fas fa-qrcode"></i> | |
| <span>Scan QR (Redeem)</span> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="activity-section"> | |
| <h2 class="section-title">Recent Activity</h2> | |
| <div class="activity-list"> | |
| <div class="activity-item"> | |
| <div class="activity-left"> | |
| <div class="activity-icon positive"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <div class="activity-details"> | |
| <div class="activity-title">Retail voucher</div> | |
| <div class="activity-time">Today</div> | |
| </div> | |
| </div> | |
| <div class="activity-amount positive">+500 FLEN</div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-left"> | |
| <div class="activity-icon positive"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <div class="activity-details"> | |
| <div class="activity-title">Insurance claim</div> | |
| <div class="activity-time">Yesterday</div> | |
| </div> | |
| </div> | |
| <div class="activity-amount positive">+5,000 FLEN</div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-left"> | |
| <div class="activity-icon negative"> | |
| <i class="fas fa-minus"></i> | |
| </div> | |
| <div class="activity-details"> | |
| <div class="activity-title">Starbucks (Card)</div> | |
| <div class="activity-time">Dec 20</div> | |
| </div> | |
| </div> | |
| <div class="activity-amount negative">-200 FLEN</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Promo Banner --> | |
| <div class="promo-banner"> | |
| Earn 15% extra FLEN at Lux Hotels! | |
| </div> | |
| </div> | |
| <!-- Earn Screen --> | |
| <div class="screen" id="earn-screen"> | |
| <div class="partner-categories"> | |
| <div class="category-tab active" onclick="filterPartners('all')"> | |
| <span>🏨 Hospitality</span> | |
| </div> | |
| <div class="category-tab" onclick="filterPartners('insurance')"> | |
| <span>🛡️ Insurance</span> | |
| </div> | |
| <div class="category-tab" onclick="filterPartners('retail')"> | |
| <span>🛍️ Retail</span> | |
| </div> | |
| <div class="category-tab" onclick="filterPartners('affiliates')"> | |
| <span>🔗 Affiliates</span> | |
| </div> | |
| </div> | |
| <div class="partner-list" id="partner-list"> | |
| <button class="add-partner-btn" onclick="connectNewPartner()"> | |
| <i class="fas fa-plus"></i> Connect New Partner | |
| </button> | |
| <!-- Hospitality Partner --> | |
| <div class="partner-card" data-category="hospitality"> | |
| <div class="partner-header"> | |
| <div class="partner-info"> | |
| <div class="partner-logo">🏨</div> | |
| <div class="partner-details"> | |
| <h3>Grand Hotel Chain</h3> | |
| <p>Available: 8,500 points (~850 FLEN)</p> | |
| </div> | |
| </div> | |
| <span class="partner-status">Connected</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 80%"></div> | |
| </div> | |
| <button class="convert-btn" onclick="convertPartner('Grand Hotel')"> | |
| CONVERT TO FLEN | |
| </button> | |
| </div> | |
| <div class="partner-card" |