Spaces:
Running
Running
| /* Mobile App Styles */ | |
| .mobile-app { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| max-width: 480px; | |
| height: 100vh; | |
| margin: 0 auto; | |
| background-color: #0B0B0F; | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* Loading Screen */ | |
| .mobile-app.loading { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .loading-logo { | |
| width: 120px; | |
| height: 120px; | |
| margin-bottom: 20px; | |
| position: relative; | |
| } | |
| .loading-logo img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .loading-pulse { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 50%; | |
| border: 2px solid #00E0FF; | |
| animation: pulse 1.5s infinite ease-in-out; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| opacity: 1; | |
| } | |
| 70% { | |
| transform: scale(1.2); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| opacity: 0; | |
| } | |
| } | |
| /* Header */ | |
| .app-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 16px; | |
| background-color: rgba(20, 20, 30, 0.8); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .app-header h1 { | |
| margin: 0; | |
| font-size: 24px; | |
| font-weight: 700; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: 1px; | |
| } | |
| .user-profile { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| overflow: hidden; | |
| border: 2px solid #00E0FF; | |
| } | |
| .user-profile img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| /* Main Content */ | |
| .app-content { | |
| padding: 16px; | |
| overflow-y: auto; | |
| height: calc(100vh - 130px); | |
| } | |
| /* Home Screen */ | |
| .welcome-card { | |
| background: linear-gradient(135deg, rgba(0, 224, 255, 0.1), rgba(53, 242, 219, 0.05)); | |
| border-radius: 16px; | |
| padding: 20px; | |
| margin-bottom: 24px; | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| } | |
| .welcome-card h2 { | |
| margin: 0 0 4px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .welcome-card p { | |
| margin: 0 0 16px 0; | |
| opacity: 0.8; | |
| font-size: 14px; | |
| } | |
| .credit-display { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .credit-amount { | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: #00E0FF; | |
| } | |
| .credit-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .quick-actions { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .action-button { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 12px; | |
| padding: 12px 8px; | |
| transition: all 0.2s ease; | |
| } | |
| .action-button:hover { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .action-button .icon { | |
| font-size: 24px; | |
| margin-bottom: 8px; | |
| } | |
| .action-button span { | |
| font-size: 12px; | |
| } | |
| .upcoming-reservations, .nearby-hubs { | |
| margin-bottom: 24px; | |
| } | |
| .upcoming-reservations h3, .nearby-hubs h3 { | |
| font-size: 18px; | |
| margin-bottom: 12px; | |
| font-weight: 600; | |
| } | |
| .reservation-card { | |
| display: flex; | |
| align-items: center; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 16px; | |
| margin-bottom: 12px; | |
| } | |
| .reservation-vehicle { | |
| font-weight: 600; | |
| margin-right: 12px; | |
| min-width: 100px; | |
| } | |
| .reservation-details { | |
| flex: 1; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| } | |
| .reservation-action { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border: none; | |
| border-radius: 8px; | |
| color: #00E0FF; | |
| padding: 8px 12px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .reservation-action:hover { | |
| background-color: rgba(0, 224, 255, 0.3); | |
| } | |
| .no-reservations { | |
| text-align: center; | |
| opacity: 0.6; | |
| padding: 20px; | |
| } | |
| .hub-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .hub-card { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 16px; | |
| } | |
| .hub-info h4 { | |
| margin: 0 0 4px 0; | |
| font-size: 16px; | |
| } | |
| .hub-info p { | |
| margin: 0 0 8px 0; | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .availability { | |
| font-size: 14px; | |
| } | |
| .available { | |
| color: #35F2DB; | |
| } | |
| .unavailable { | |
| color: #ff5555; | |
| } | |
| .hub-action { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border: none; | |
| border-radius: 8px; | |
| color: #00E0FF; | |
| padding: 8px 12px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .hub-action:hover { | |
| background-color: rgba(0, 224, 255, 0.3); | |
| } | |
| /* Vehicles Screen */ | |
| .vehicles-screen h2 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 24px; | |
| } | |
| .vehicle-filters { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 20px; | |
| overflow-x: auto; | |
| padding-bottom: 8px; | |
| } | |
| .filter-button { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 20px; | |
| color: white; | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| white-space: nowrap; | |
| transition: all 0.2s ease; | |
| } | |
| .filter-button.active { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border-color: #00E0FF; | |
| color: #00E0FF; | |
| } | |
| .vehicle-list { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 16px; | |
| } | |
| .vehicle-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| transition: transform 0.3s ease; | |
| } | |
| .vehicle-card:hover { | |
| transform: translateY(-4px); | |
| } | |
| .vehicle-card.unavailable { | |
| opacity: 0.7; | |
| } | |
| .vehicle-image { | |
| height: 160px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .vehicle-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .unavailable-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| font-weight: 600; | |
| } | |
| .vehicle-info { | |
| padding: 16px; | |
| } | |
| .vehicle-info h3 { | |
| margin: 0 0 4px 0; | |
| font-size: 18px; | |
| } | |
| .vehicle-type, .vehicle-range { | |
| margin: 0; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| } | |
| .vehicle-reserve { | |
| width: 100%; | |
| padding: 12px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| border: none; | |
| color: #0B0B0F; | |
| font-weight: 600; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .vehicle-reserve:hover:not(:disabled) { | |
| background: linear-gradient(90deg, #35F2DB, #00E0FF); | |
| } | |
| .vehicle-reserve:disabled { | |
| background: #333; | |
| color: #777; | |
| cursor: not-allowed; | |
| } | |
| /* Subscriptions Screen */ | |
| .subscriptions-screen h2 { | |
| margin-top: 0; | |
| margin-bottom: 8px; | |
| font-size: 24px; | |
| } | |
| .current-plan { | |
| margin-bottom: 24px; | |
| font-size: 16px; | |
| opacity: 0.8; | |
| } | |
| .subscription-list { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .subscription-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .subscription-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .subscription-card.current { | |
| border: 1px solid #00E0FF; | |
| background: linear-gradient(135deg, rgba(0, 224, 255, 0.1), rgba(53, 242, 219, 0.05)); | |
| } | |
| .subscription-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| } | |
| .subscription-header h3 { | |
| margin: 0; | |
| font-size: 20px; | |
| } | |
| .subscription-price { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: #00E0FF; | |
| } | |
| .subscription-price span { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| font-weight: 400; | |
| } | |
| .subscription-desc { | |
| margin-bottom: 16px; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| } | |
| .subscription-features { | |
| padding-left: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .subscription-features li { | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| } | |
| .subscription-action { | |
| width: 100%; | |
| padding: 12px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| border: none; | |
| border-radius: 8px; | |
| color: #0B0B0F; | |
| font-weight: 600; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .subscription-action:hover:not(.current) { | |
| background: linear-gradient(90deg, #35F2DB, #00E0FF); | |
| } | |
| .subscription-action.current { | |
| background: rgba(0, 224, 255, 0.2); | |
| color: #00E0FF; | |
| cursor: default; | |
| } | |
| /* Charging Screen */ | |
| .charging-screen h2 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 24px; | |
| } | |
| .map-container { | |
| height: 200px; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| position: relative; | |
| margin-bottom: 24px; | |
| } | |
| .charging-map { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .map-markers { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| .map-marker { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background-color: #00E0FF; | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .map-marker[data-available="0"] { | |
| background-color: #ff5555; | |
| } | |
| .marker-pulse { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 50%; | |
| background-color: rgba(0, 224, 255, 0.4); | |
| animation: markerPulse 1.5s infinite; | |
| } | |
| @keyframes markerPulse { | |
| 0% { | |
| transform: scale(1); | |
| opacity: 0.4; | |
| } | |
| 70% { | |
| transform: scale(2); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| .marker-label { | |
| position: absolute; | |
| bottom: -20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| white-space: nowrap; | |
| font-size: 10px; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| .charging-list h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| } | |
| .charging-location-card { | |
| display: flex; | |
| justify-content: space-between; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 16px; | |
| margin-bottom: 12px; | |
| } | |
| .location-info { | |
| flex: 1; | |
| } | |
| .location-info h4 { | |
| margin: 0 0 4px 0; | |
| font-size: 16px; | |
| } | |
| .location-info p { | |
| margin: 0 0 8px 0; | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .amenities { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .amenity-tag { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| border-radius: 4px; | |
| padding: 2px 6px; | |
| font-size: 12px; | |
| color: #00E0FF; | |
| } | |
| .location-status { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| } | |
| .availability-indicator { | |
| font-size: 14px; | |
| margin-bottom: 8px; | |
| } | |
| .availability-indicator.available { | |
| color: #35F2DB; | |
| } | |
| .availability-indicator.full { | |
| color: #ff5555; | |
| } | |
| .location-action { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border: none; | |
| border-radius: 8px; | |
| color: #00E0FF; | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .location-action:hover { | |
| background-color: rgba(0, 224, 255, 0.3); | |
| } | |
| /* ChainLink Screen */ | |
| .chainlink-screen h2 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 24px; | |
| } | |
| .token-balance { | |
| background: linear-gradient(135deg, rgba(0, 224, 255, 0.1), rgba(53, 242, 219, 0.05)); | |
| border-radius: 16px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-bottom: 16px; | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| } | |
| .token-icon { | |
| font-size: 32px; | |
| margin-bottom: 8px; | |
| color: #00E0FF; | |
| } | |
| .token-amount { | |
| font-size: 36px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .token-label { | |
| font-size: 14px; | |
| opacity: 0.8; | |
| } | |
| .token-value { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-bottom: 24px; | |
| } | |
| .value-label { | |
| font-size: 14px; | |
| opacity: 0.8; | |
| margin-bottom: 4px; | |
| } | |
| .value-amount { | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .value-change { | |
| font-size: 14px; | |
| } | |
| .value-change.positive { | |
| color: #35F2DB; | |
| } | |
| .value-change.negative { | |
| color: #ff5555; | |
| } | |
| .token-categories h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| } | |
| .category-cards { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .category-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 12px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .category-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| font-size: 20px; | |
| } | |
| .category-name { | |
| font-size: 12px; | |
| margin-bottom: 4px; | |
| line-height: 1.2; | |
| } | |
| .category-amount { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| } | |
| .token-actions { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .token-action-button { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 8px; | |
| color: #00E0FF; | |
| padding: 10px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .token-action-button:hover { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| } | |
| .token-history h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| } | |
| .transaction-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .transaction-item { | |
| display: flex; | |
| align-items: center; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 12px; | |
| } | |
| .transaction-icon { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-right: 12px; | |
| font-size: 16px; | |
| font-weight: 700; | |
| } | |
| .transaction-icon.purchase { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| color: #00E0FF; | |
| } | |
| .transaction-icon.reward { | |
| background-color: rgba(255, 215, 0, 0.2); | |
| color: gold; | |
| } | |
| .transaction-icon.dividend { | |
| background-color: rgba(50, 205, 50, 0.2); | |
| color: limegreen; | |
| } | |
| .transaction-details { | |
| flex: 1; | |
| } | |
| .transaction-title { | |
| font-size: 14px; | |
| margin-bottom: 2px; | |
| } | |
| .transaction-date { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .transaction-amount { | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| /* Navigation Footer */ | |
| .app-navigation { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| background-color: rgba(20, 20, 30, 0.8); | |
| backdrop-filter: blur(10px); | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 8px 0; | |
| max-width: 480px; | |
| margin: 0 auto; | |
| } | |
| .nav-button { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background: transparent; | |
| border: none; | |
| color: rgba(255, 255, 255, 0.6); | |
| padding: 8px 0; | |
| transition: all 0.2s ease; | |
| } | |
| .nav-button.active { | |
| color: #00E0FF; | |
| } | |
| .nav-icon { | |
| font-size: 20px; | |
| margin-bottom: 4px; | |
| } | |
| .nav-label { | |
| font-size: 10px; | |
| } | |
| /* Responsive Adjustments */ | |
| @media (min-width: 400px) { | |
| .vehicle-list { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 360px) { | |
| .category-cards { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .token-actions { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .quick-actions { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |