Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Unity Fleet - Subscription Portal</title> | |
| <link rel="stylesheet" href="../styles.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* MVP Component specific styles */ | |
| .component-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .component-header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .component-header h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .component-header p { | |
| font-size: 1.2rem; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| opacity: 0.8; | |
| } | |
| .component-content { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| margin-bottom: 3rem; | |
| backdrop-filter: blur(10px); | |
| } | |
| .back-to-home { | |
| display: inline-block; | |
| margin-top: 2rem; | |
| padding: 0.8rem 1.5rem; | |
| background: transparent; | |
| border: 1px solid var(--accent-color-1); | |
| color: var(--accent-color-1); | |
| border-radius: 4px; | |
| font-family: var(--font-primary); | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all var(--transition-medium); | |
| } | |
| .back-to-home:hover { | |
| background: rgba(0, 224, 255, 0.1); | |
| transform: translateY(-3px); | |
| } | |
| /* Subscription Portal specific styles */ | |
| .subscription-portal-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 1rem; | |
| } | |
| .portal-interface { | |
| width: 100%; | |
| max-width: 900px; | |
| background-color: #0B0B0F; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); | |
| border: 1px solid rgba(0, 224, 255, 0.3); | |
| margin-bottom: 2rem; | |
| } | |
| .portal-header { | |
| background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2)); | |
| padding: 1.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .portal-header h2 { | |
| margin: 0; | |
| font-size: 1.5rem; | |
| } | |
| .user-info { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--accent-color-1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 1rem; | |
| font-size: 1.2rem; | |
| } | |
| .user-name { | |
| font-weight: bold; | |
| } | |
| .user-plan { | |
| font-size: 0.8rem; | |
| opacity: 0.8; | |
| } | |
| .portal-nav { | |
| display: flex; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .nav-tab { | |
| padding: 1rem 1.5rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-tab:hover { | |
| background: rgba(0, 224, 255, 0.1); | |
| } | |
| .nav-tab.active { | |
| color: var(--accent-color-1); | |
| } | |
| .nav-tab.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: var(--accent-color-1); | |
| } | |
| .portal-body { | |
| padding: 2rem; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* Subscription Plans Tab */ | |
| .subscription-plans { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .plan-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .plan-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .plan-card.current { | |
| border: 2px solid var(--accent-color-1); | |
| background: rgba(0, 224, 255, 0.1); | |
| } | |
| .plan-header { | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .plan-name { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; | |
| color: var(--accent-color-1); | |
| } | |
| .plan-price { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; | |
| } | |
| .plan-billing { | |
| font-size: 0.8rem; | |
| opacity: 0.7; | |
| } | |
| .plan-features { | |
| margin-bottom: 1.5rem; | |
| flex-grow: 1; | |
| } | |
| .plan-feature { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 0.8rem; | |
| } | |
| .plan-feature i { | |
| color: var(--accent-color-1); | |
| margin-right: 0.5rem; | |
| } | |
| .plan-actions { | |
| margin-top: auto; | |
| } | |
| .plan-button { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border-radius: 8px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .select-plan { | |
| background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2)); | |
| color: #000; | |
| border: none; | |
| } | |
| .select-plan:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .current-plan { | |
| background: transparent; | |
| border: 1px solid var(--accent-color-1); | |
| color: var(--accent-color-1); | |
| } | |
| /* Usage Tab */ | |
| .usage-overview { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .usage-stat { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| text-align: center; | |
| } | |
| .stat-value { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; | |
| background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| } | |
| .usage-chart { | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| height: 300px; | |
| position: relative; | |
| } | |
| .chart-title { | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| font-size: 1.2rem; | |
| color: var(--accent-color-1); | |
| } | |
| .chart-container { | |
| height: 250px; | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-between; | |
| padding-top: 20px; | |
| } | |
| .chart-bar { | |
| width: 8%; | |
| background: linear-gradient(to top, rgba(0, 224, 255, 0.3), rgba(53, 242, 219, 0.7)); | |
| border-radius: 4px 4px 0 0; | |
| position: relative; | |
| transition: height 1s ease; | |
| } | |
| .chart-bar::before { | |
| content: attr(data-value); | |
| position: absolute; | |
| top: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.8rem; | |
| } | |
| .chart-bar::after { | |
| content: attr(data-label); | |
| position: absolute; | |
| bottom: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.8rem; | |
| opacity: 0.7; | |
| } | |
| .recent-activity { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .activity-title { | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| font-size: 1.2rem; | |
| color: var(--accent-color-1); | |
| } | |
| .activity-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .activity-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 1rem 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .activity-item:last-child { | |
| border-bottom: none; | |
| } | |
| .activity-details { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .activity-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: rgba(0, 224, 255, 0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 1rem; | |
| color: var(--accent-color-1); | |
| } | |
| .activity-info h4 { | |
| margin: 0; | |
| margin-bottom: 0.3rem; | |
| } | |
| .activity-info p { | |
| margin: 0; | |
| font-size: 0.8rem; | |
| opacity: 0.7; | |
| } | |
| .activity-date { | |
| font-size: 0.8rem; | |
| opacity: 0.7; | |
| align-self: center; | |
| } | |
| /* Account Tab */ | |
| .account-section { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| margin-bottom: 2rem; | |
| } | |
| .section-title { | |
| margin-top: 0; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.2rem; | |
| color: var(--accent-color-1); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .edit-button { | |
| font-size: 0.9rem; | |
| padding: 0.5rem 1rem; | |
| background: transparent; | |
| border: 1px solid var(--accent-color-1); | |
| color: var(--accent-color-1); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .edit-button:hover { | |
| background: rgba(0, 224, 255, 0.1); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 0.8rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| color: white; | |
| } | |
| .form-row { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .form-row .form-group { | |
| flex: 1; | |
| } | |
| .payment-method { | |
| display: flex; | |
| align-items: center; | |
| padding: 1rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| margin-bottom: 1rem; | |
| } | |
| .payment-icon { | |
| font-size: 1.5rem; | |
| margin-right: 1rem; | |
| color: var(--accent-color-1); | |
| } | |
| .payment-details { | |
| flex: 1; | |
| } | |
| .payment-details h4 { | |
| margin: 0; | |
| margin-bottom: 0.3rem; | |
| } | |
| .payment-details p { | |
| margin: 0; | |
| font-size: 0.8rem; | |
| opacity: 0.7; | |
| } | |
| .payment-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .payment-actions button { | |
| padding: 0.5rem; | |
| background: transparent; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .payment-actions button:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .add-payment { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px dashed rgba(255, 255, 255, 0.2); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .add-payment:hover { | |
| background: rgba(0, 224, 255, 0.1); | |
| border-color: var(--accent-color-1); | |
| } | |
| .add-payment i { | |
| margin-right: 0.5rem; | |
| color: var(--accent-color-1); | |
| } | |
| /* Billing Tab */ | |
| .billing-summary { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .billing-stat { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| text-align: center; | |
| } | |
| .invoices { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .invoice-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .invoice-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 1rem 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .invoice-item:last-child { | |
| border-bottom: none; | |
| } | |
| .invoice-details { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .invoice-id { | |
| font-size: 0.8rem; | |
| opacity: 0.7; | |
| margin-bottom: 0.3rem; | |
| } | |
| .invoice-date { | |
| font-size: 0.9rem; | |
| } | |
| .invoice-amount { | |
| font-weight: bold; | |
| } | |
| .invoice-status { | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| } | |
| .status-paid { | |
| background: rgba(76, 175, 80, 0.2); | |
| color: #4CAF50; | |
| } | |
| .status-pending { | |
| background: rgba(255, 193, 7, 0.2); | |
| color: #FFC107; | |
| } | |
| .invoice-actions { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .invoice-actions a { | |
| margin-left: 1rem; | |
| color: var(--accent-color-1); | |
| font-size: 0.9rem; | |
| } | |
| .portal-footer { | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .portal-actions { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .portal-actions button { | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| background: transparent; | |
| border: 1px solid var(--accent-color-1); | |
| color: var(--accent-color-1); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .portal-actions button:hover { | |
| background: rgba(0, 224, 255, 0.1); | |
| } | |
| .portal-actions button.primary { | |
| background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2)); | |
| color: #000; | |
| border: none; | |
| } | |
| .portal-actions button.primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .portal-info { | |
| font-size: 0.9rem; | |
| opacity: 0.7; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="noise-overlay"></div> | |
| <header> | |
| <nav> | |
| <div class="logo">UNITY FLEET</div> | |
| <div class="nav-links"> | |
| <a href="../index.html#what-is-the-link">What is The Link</a> | |
| <a href="../index.html#subscription-tiers">Subscription Tiers</a> | |
| <a href="../index.html#impact-equity">Impact & Equity</a> | |
| <a href="../index.html#tokenization">ChainLink Tokenization</a> | |
| <a href="../index.html#rural-plan">Rural Revitalization</a> | |
| <a href="../index.html#mvp-showcase">MVP Showcase</a> | |
| </div> | |
| <div class="mobile-nav-toggle"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </nav> | |
| </header> | |
| <main class="component-container"> | |
| <div class="component-header"> | |
| <h1>SUBSCRIPTION PORTAL</h1> | |
| <p>Manage your Unity Fleet subscription, track usage, and access billing information through our intuitive customer portal.</p> | |
| </div> | |
| <div class="component-content"> | |
| <div class="subscription-portal-container"> | |
| <div class="portal-interface"> | |
| <div class="portal-header"> | |
| <h2>Unity Fleet Customer Portal</h2> | |
| <div class="user-info"> | |
| <div class="user-avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <div class="user-name">John Doe</div> | |
| <div class="user-plan">Premium Plan</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portal-nav"> | |
| <div class="nav-tab active" data-tab="plans">Subscription Plans</div> | |
| <div class="nav-tab" data-tab="usage">Usage & Activity</div> | |
| <div class="nav-tab" data-tab="account">Account Settings</div> | |
| <div class="nav-tab" data-tab="billing">Billing & Invoices</div> | |
| </div> | |
| <div class="portal-body"> | |
| <!-- Subscription Plans Tab --> | |
| <div class="tab-content active" id="plans-tab"> | |
| <div class="subscription-plans"> | |
| <div class="plan-card"> | |
| <div class="plan-header"> | |
| <div class="plan-name">Basic</div> | |
| <div class="plan-price">$99</div> | |
| <div class="plan-billing">per month</div> | |
| </div> | |
| <div class="plan-features"> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>4 vehicle reservations per month</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Standard charging access</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Basic lounge access</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Standard vehicle selection</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-times"></i> | |
| <span>Priority booking</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-times"></i> | |
| <span>Premium vehicle access</span> | |
| </div> | |
| </div> | |
| <div class="plan-actions"> | |
| <div class="plan-button select-plan">Select Plan</div> | |
| </div> | |
| </div> | |
| <div class="plan-card current"> | |
| <div class="plan-header"> | |
| <div class="plan-name">Premium</div> | |
| <div class="plan-price">$199</div> | |
| <div class="plan-billing">per month</div> | |
| </div> | |
| <div class="plan-features"> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>8 vehicle reservations per month</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Priority charging access</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Premium lounge access</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Extended vehicle selection</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Priority booking</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-times"></i> | |
| <span>Luxury vehicle access</span> | |
| </div> | |
| </div> | |
| <div class="plan-actions"> | |
| <div class="plan-button current-plan">Current Plan</div> | |
| </div> | |
| </div> | |
| <div class="plan-card"> | |
| <div class="plan-header"> | |
| <div class="plan-name">Elite</div> | |
| <div class="plan-price">$349</div> | |
| <div class="plan-billing">per month</div> | |
| </div> | |
| <div class="plan-features"> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Unlimited vehicle reservations</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>VIP charging access</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Elite lounge access</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Full vehicle selection</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Priority booking</span> | |
| </div> | |
| <div class="plan-feature"> | |
| <i class="fas fa-check"></i> | |
| <span>Luxury vehicle access</span> | |
| </div> | |
| </div> | |
| <div class="plan-actions"> | |
| <div class="plan-button select-plan">Select Plan</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Usage & Activity Tab --> | |
| <div class="tab-content" id="usage-tab"> | |
| <div class="usage-overview"> | |
| <div class="usage-stat"> | |
| <div class="stat-value">6</div> | |
| <div class="stat-label">Reservations Used</div> | |
| </div> | |
| <div class="usage-stat"> | |
| <div class="stat-value">2</div> | |
| <div class="stat-label">Reservations Remaining</div> | |
| </div> | |
| <div class="usage-stat"> | |
| <div class="stat-value">14</div> | |
| <div class="stat-label">Charging Sessions</div> | |
| </div> | |
| <div class="usage-stat"> | |
| <div class="stat-value">342</div> | |
| <div class="stat-label">kWh Consumed</div> | |
| </div> | |
| </div> | |
| <div class="usage-chart"> | |
| <h3 class="chart-title">Monthly Usage History</h3> | |
| <div class="chart-container"> | |
| <div class="chart-bar" style="height: 30%;" data-value="2" data-label="Jan"></div> | |
| <div class="chart-bar" style="height: 45%;" data-value="3" data-label="Feb"></div> | |
| <div class="chart-bar" style="height: 60%;" data-value="4" data-label="Mar"></div> | |
| <div class="chart-bar" style="height: 75%;" data-value="5" data-label="Apr"></div> | |
| <div class="chart-bar" style="height: 90%;" data-value="6" data-label="May"></div> | |
| <div class="chart-bar" style="height: 60%;" data-value="4" data-label="Jun"></div> | |
| <div class="chart-bar" style="height: 45%;" data-value="3" data-label="Jul"></div> | |
| <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Aug"></div> | |
| <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Sep"></div> | |
| <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Oct"></div> | |
| <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Nov"></div> | |
| <div class="chart-bar" style="height: 0%;" data-value="0" data-label="Dec"></div> | |
| </div> | |
| </div> | |
| <div class="recent-activity"> | |
| <h3 class="activity-title">Recent Activity</h3> | |
| <ul class="activity-list"> | |
| <li class="activity-item"> | |
| <div class="activity-details"> | |
| <div class="activity-icon"> | |
| <i class="fas fa-car"></i> | |
| </div> | |
| <div class="activity-info"> | |
| <h4>Tesla Model 3 Reservation</h4> | |
| <p>Downtown Springfield Hub</p> | |
| </div> | |
| </div> | |
| <div class="activity-date">July 15, 2025</div> | |
| </li> | |
| <li class="activity-item"> | |
| <div class="activity-details"> | |
| <div class="activity-icon"> | |
| <i class="fas fa-charging-station"></i> | |
| </div> | |
| <div class="activity-info"> | |
| <h4>Charging Session</h4> | |
| <p>Champaign-Urbana Hub • 42 kWh</p> | |
| </div> | |
| </div> | |
| <div class="activity-date">July 10, 2025</div> | |
| </li> | |
| <li class="activity-item"> | |
| <div class="activity-details"> | |
| <div class="activity-icon"> | |
| <i class="fas fa-car"></i> | |
| </div> | |
| <div class="activity-info"> | |
| <h4>Rivian R1S Reservation</h4> | |
| <p>Bloomington-Normal Hub</p> | |
| </div> | |
| </div> | |
| <div class="activity-date">July 5, 2025</div> | |
| </li> | |
| <li class="activity-item"> | |
| <div class="activity-details"> | |
| <div class="activity-icon"> | |
| <i class="fas fa-credit-card"></i> | |
| </div> | |
| <div class="activity-info"> | |
| <h4>Monthly Subscription Payment</h4> | |
| <p>Premium Plan • $199.00</p> | |
| </div> | |
| </div> | |
| <div class="activity-date">July 1, 2025</div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Account Settings Tab --> | |
| <div class="tab-content" id="account-tab"> | |
| <div class="account-section"> | |
| <h3 class="section-title"> | |
| Personal Information | |
| <button class="edit-button">Edit</button> | |
| </h3> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="first-name">First Name</label> | |
| <input type="text" id="first-name" value="John" disabled> | |
| </div> | |
| <div class="form-group"> | |
| <label for="last-name">Last Name</label> | |
| <input type="text" id="last-name" value="Doe" disabled> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email Address</label> | |
| <input type="email" id="email" value="[email protected]" disabled> | |
| </div> | |
| <div class="form-group"> | |
| <label for="phone">Phone Number</label> | |
| <input type="tel" id="phone" value="(217) 555-1234" disabled> | |
| </div> | |
| </div> | |
| <div class="account-section"> | |
| <h3 class="section-title"> | |
| Payment Methods | |
| <button class="edit-button">Manage</button> | |
| </h3> | |
| <div class="payment-method"> | |
| <div class="payment-icon"> | |
| <i class="fab fa-cc-visa"></i> | |
| </div> | |
| <div class="payment-details"> | |
| <h4>Visa ending in 4242</h4> | |
| <p>Expires 05/2027</p> | |
| </div> | |
| <div class="payment-actions"> | |
| <button>Edit</button> | |
| <button>Remove</button> | |
| </div> | |
| </div> | |
| <div class="payment-method"> | |
| <div class="payment-icon"> | |
| <i class="fab fa-cc-mastercard"></i> | |
| </div> | |
| <div class="payment-details"> | |
| <h4>Mastercard ending in 8888</h4> | |
| <p>Expires 12/2026</p> | |
| </div> | |
| <div class="payment-actions"> | |
| <button>Edit</button> | |
| <button>Remove</button> | |
| </div> | |
| </div> | |
| <div class="add-payment"> | |
| <i class="fas fa-plus"></i> | |
| <span>Add Payment Method</span> | |
| </div> | |
| </div> | |
| <div class="account-section"> | |
| <h3 class="section-title"> | |
| Notification Preferences | |
| <button class="edit-button">Edit</button> | |
| </h3> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" checked disabled> | |
| Reservation Confirmations | |
| </label> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" checked disabled> | |
| Charging Completion Alerts | |
| </label> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" checked disabled> | |
| Billing Notifications | |
| </label> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" disabled> | |
| Marketing Communications | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Billing & Invoices Tab --> | |
| <div class="tab-content" id="billing-tab"> | |
| <div class="billing-summary"> | |
| <div class="billing-stat"> | |
| <div class="stat-value">$199</div> | |
| <div class="stat-label">Current Monthly Plan</div> | |
| </div> | |
| <div class="billing-stat"> | |
| <div class="stat-value">Aug 1</div> | |
| <div class="stat-label">Next Billing Date</div> | |
| </div> | |
| <div class="billing-stat"> | |
| <div class="stat-value">$0</div> | |
| <div class="stat-label">Additional Charges</div> | |
| </div> | |
| <div class="billing-stat"> | |
| <div class="stat-value">$199</div> | |
| <div class="stat-label">Next Payment</div> | |
| </div> | |
| </div> | |
| <div class="invoices"> | |
| <h3 class="section-title"> | |
| Recent Invoices | |
| <button class="edit-button">View All</button> | |
| </h3> | |
| <ul class="invoice-list"> | |
| <li class="invoice-item"> | |
| <div class="invoice-details"> | |
| <div class="invoice-id">INV-2025-07-01</div> | |
| <div class="invoice-date">July 1, 2025</div> | |
| </div> | |
| <div class="invoice-amount">$199.00</div> | |
| <div class="invoice-status status-paid">Paid</div> | |
| <div class="invoice-actions"> | |
| <a href="#"><i class="fas fa-download"></i> PDF</a> | |
| </div> | |
| </li> | |
| <li class="invoice-item"> | |
| <div class="invoice-details"> | |
| <div class="invoice-id">INV-2025-06-01</div> | |
| <div class="invoice-date">June 1, 2025</div> | |
| </div> | |
| <div class="invoice-amount">$199.00</div> | |
| <div class="invoice-status status-paid">Paid</div> | |
| <div class="invoice-actions"> | |
| <a href="#"><i class="fas fa-download"></i> PDF</a> | |
| </div> | |
| </li> | |
| <li class="invoice-item"> | |
| <div class="invoice-details"> | |
| <div class="invoice-id">INV-2025-05-01</div> | |
| <div class="invoice-date">May 1, 2025</div> | |
| </div> | |
| <div class="invoice-amount">$199.00</div> | |
| <div class="invoice-status status-paid">Paid</div> | |
| <div class="invoice-actions"> | |
| <a href="#"><i class="fas fa-download"></i> PDF</a> | |
| </div> | |
| </li> | |
| <li class="invoice-item"> | |
| <div class="invoice-details"> | |
| <div class="invoice-id">INV-2025-04-01</div> | |
| <div class="invoice-date">April 1, 2025</div> | |
| </div> | |
| <div class="invoice-amount">$199.00</div> | |
| <div class="invoice-status status-paid">Paid</div> | |
| <div class="invoice-actions"> | |
| <a href="#"><i class="fas fa-download"></i> PDF</a> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portal-footer"> | |
| <div class="portal-actions"> | |
| <button>Contact Support</button> | |
| <button class="primary">Make a Reservation</button> | |
| </div> | |
| <div class="portal-info"> | |
| Last Login: July 20, 2025 | 10:45 AM | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="component-features"> | |
| <h2>Key Features</h2> | |
| <ul class="features-list"> | |
| <li>Comprehensive subscription plan management with tier comparison and upgrade options</li> | |
| <li>Detailed usage tracking with visual charts and activity history</li> | |
| <li>Account settings management including personal information and notification preferences</li> | |
| <li>Billing dashboard with invoice history and payment method management</li> | |
| <li>Integrated reservation system with direct access to vehicle booking</li> | |
| <li>Real-time subscription status monitoring with remaining allocations</li> | |
| <li>Responsive design for seamless access across desktop and mobile devices</li> | |
| </ul> | |
| </div> | |
| <a href="../index.html#mvp-showcase" class="back-to-home"> | |
| <i class="fas fa-arrow-left"></i> Back to MVP Showcase | |
| </a> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-logo"> | |
| <div class="logo">UNITY FLEET</div> | |
| <p>Revolutionizing electric vehicle infrastructure across Illinois</p> | |
| </div> | |
| <div class="footer-links"> | |
| <div class="link-column"> | |
| <h4>Navigation</h4> | |
| <a href="../index.html#what-is-the-link">What is The Link</a> | |
| <a href="../index.html#subscription-tiers">Subscription Tiers</a> | |
| <a href="../index.html#impact-equity">Impact & Equity</a> | |
| <a href="../index.html#tokenization">ChainLink Tokenization</a> | |
| <a href="../index.html#rural-plan">Rural Revitalization</a> | |
| <a href="../index.html#mvp-showcase">MVP Showcase</a> | |
| </div> | |
| <div class="link-column"> | |
| <h4>Contact</h4> | |
| <a href="mailto:[email protected]">[email protected]</a> | |
| <a href="tel:+12175551234">+1 (217) 555-1234</a> | |
| <p>2457 E Eldorado St<br>Decatur, IL 62521</p> | |
| </div> | |
| <div class="link-column"> | |
| <h4>Legal</h4> | |
| <a href="#">Privacy Policy</a> | |
| <a href="#">Terms of Service</a> | |
| <a href="#">Accessibility</a> | |
| </div> | |
| </div> | |
| <div class="footer-social"> | |
| <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2025 Unity Fleet LLC. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile navigation toggle | |
| document.querySelector('.mobile-nav-toggle').addEventListener('click', function() { | |
| document.querySelector('.nav-links').classList.toggle('active'); | |
| this.innerHTML = document.querySelector('.nav-links').classList.contains('active') | |
| ? '<i class="fas fa-times"></i>' | |
| : '<i class="fas fa-bars"></i>'; | |
| }); | |
| // Subscription portal tab navigation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const navTabs = document.querySelectorAll('.nav-tab'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| navTabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Remove active class from all tabs | |
| navTabs.forEach(t => t.classList.remove('active')); | |
| // Add active class to clicked tab | |
| this.classList.add('active'); | |
| // Hide all tab contents | |
| tabContents.forEach(content => content.classList.remove('active')); | |
| // Show selected tab content | |
| const tabId = this.getAttribute('data-tab') + '-tab'; | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Animate chart bars on load | |
| const chartBars = document.querySelectorAll('.chart-bar'); | |
| chartBars.forEach(bar => { | |
| const height = bar.style.height; | |
| bar.style.height = '0%'; | |
| setTimeout(() => { | |
| bar.style.height = height; | |
| }, 300); | |
| }); | |
| // Plan card hover effects | |
| const planCards = document.querySelectorAll('.plan-card'); | |
| planCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| if (!this.classList.contains('current')) { | |
| this.style.transform = 'translateY(-10px)'; | |
| this.style.boxShadow = '0 15px 30px rgba(0, 224, 255, 0.2)'; | |
| } | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| if (!this.classList.contains('current')) { | |
| this.style.transform = ''; | |
| this.style.boxShadow = ''; | |
| } | |
| }); | |
| }); | |
| // Edit buttons functionality | |
| const editButtons = document.querySelectorAll('.edit-button'); | |
| editButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| alert('Edit functionality would be implemented in the production version.'); | |
| }); | |
| }); | |
| // Plan selection functionality | |
| const selectPlanButtons = document.querySelectorAll('.select-plan'); | |
| selectPlanButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| alert('Plan change functionality would be implemented in the production version.'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |