Spaces:

Maeso
/

libyapay-platform

Running

App Files Files Community

Maeso commited on Oct 29, 2025

Commit

ade45cd

verified ·

1 Parent(s): 834ed9b

---

Browse files

## **🧠 The Executive & Technical Specification Prompt for LibyaPay (Final Hybrid Version)**

**"To build a leading hybrid payment platform in Libya, combining visual elegance, technical power, and absolute security. The platform supports all digital and telecom-based payment methods, including online cloud wallets, SIM-based wallets, NFC, QR, and offline USSD/SMS transactions, to ensure universal accessibility."**

---

### **1. Vision and Core Philosophy**

**Vision:** To empower every individual and merchant in Libya with seamless, secure, and inclusive access to the digital economy, regardless of their internet connectivity quality.

**Core Philosophy:**
1. **Security First:** Every technical decision must pass through a security filter. There is no compromise on the protection of user funds and data.
2. **Offline-First:** Core functionalities (SIM Wallet) must work completely without an internet connection.
3. **User-Centric:** The design and experience must be intuitive and easy, with a focus on simplicity and clarity.
4. **Scalability by Design:** The infrastructure must support growth from 1,000 to 10 million users without fundamental changes.
5. **Full Compliance:** Strict adherence to local regulations (Central Bank of Libya) and Sharia compliance.

---

### **2. Design System**

**Objective:** To build a modern, attractive, and trustworthy visual identity inspired by "Libyana Al-Beidha" with a futuristic touch.

#### **2.1. Color Palette**
* **Primary Color:** Vibrant purple (inspired by Libyana).
* `Primary-50`: `#F3E5F5`
* `Primary-100`: `#E1BEE7`
* `Primary-500`: `#9C27B0` (Main color for buttons and interactive elements)
* `Primary-700`: `#7B1FA2`
* `Primary-900`: `#4A148C`
* **Primary Gradient:** Linear gradient from `Primary-500` to `Primary-700`.
* **Neutral Colors:**
* `Background`: `#FAFAFA` (Light) / `#121212` (Dark)
* `Surface`: `#FFFFFF` (Light) / `#1E1E1E` (Dark)
* `On-Surface`: `#1C1B1F` (Light) / `#E6E1E5` (Dark)
* **Semantic Colors:**
* `Success`: `#4CAF50`
* `Warning`: `#FF9800`
* `Error`: `#F44336`
* `Info`: `#2196F3`

#### **2.2. Typography**
* **Arabic:** **Cairo** (Weights: 300, 400, 600, 700).
* **English:** **Inter** (Weights: 300, 400, 600, 700).
* **Rules:** Use `sp` (Scalable Pixels) to ensure readability.

#### **2.3. Iconography & Imagery**
* **Icons:** Consistent line icons with a uniform stroke width and a modern, minimalist design.
* **Illustrations:** Soft, abstract illustrations with pastel colors to support the visual experience.

#### **2.4. Components & Interactions**
* **Buttons:** Rounded corners (8px) with a ripple effect on press.
* **Text Fields:** Bottom border only with floating labels.
* **Cards:** Light shadows and generous internal padding.
* **Animations:** Smooth transitions (300ms ease-out) between screens, and micro-interactions on element interaction.

---

### **3. Frontend (Mobile App) Technical Specifications**

* **Framework:** **Flutter 3.x**
* **Language:** **Dart**
* **Architecture:** **Clean Architecture** with **Riverpod** for state management.
* **Routing:** **GoRouter** for secure and declarative navigation.
* **Localization:** Full support for Arabic (RTL) and English (LTR) using the `intl` package.

#### **3.1. Key Modules**
1. **Authentication Module:**
* Welcome screen, Login with Phone/Email.
* OTP verification.
* PIN creation (6 digits) and confirmation.
* Biometric login (Face ID/Fingerprint).
2. **SIM Onboarding Module:**
* Dual-SIM detection.
* USSD probe to verify the carrier.
* Parse the incoming reply message and store an encrypted SIM profile.
3. **Wallet Module:**
* The Wallet Module integrates both cloud-based and SIM-based wallets into a unified interface, allowing instant switching or transferring between online and offline balances.
* The hybrid model ensures users can make payments even when disconnected from the internet using **SIM USSD commands**, which are parsed, signed, and verified securely within the app.
* Floating Action Button (FAB) for quick transfer between wallets.
4. **Payments Module:**
* **P2P:** Enter phone number, scan QR.
* **P2M:** Scan merchant QR, Pay via NFC.
* **Bill Payments:** Bill list, select bill, pay.
* **Top-up:** Select carrier, enter number, pay.
* **Virtual Cards:** Display cards, hide/show details, freeze card.
* **SIM/USSD Payments:** Execute payments via USSD menus and SIM commands directly from within the app (no manual dialing). Supports automatic session parsing, encrypted command construction, and real-time reconciliation when online.
5. **Offline Module:**
* **USSD/SMS Handler:** The USSD Handler acts as a bridge between the app and the SIM operator network, allowing encrypted transaction signing and automated session management without user intervention. It ensures all SIM Wallet activities are queued, signed, and later synced to the central system.
* **Sync Queue:** A local database (Isar/Hive) to store signed transactions and receipts in offline mode.
* **Sync Mechanism:** A background service to upload transactions when internet is available.
6. **AI Assistant Module:**
* Text-based chat interface and voice interface.
* Supports voice-activated transactions (e.g., “Send 20 dinars to Ali via USSD”) and provides smart fallback suggestions when the internet is unavailable.
* Display financial insights (Budget Analyzer) and alerts.

---

### **4. Backend Technical Specifications**

* **Framework:** **NestJS (Node.js)**
* **Language:** **TypeScript**
* **Architecture:** **Microservices**
* `API Gateway`: Unified entry point.
* `Auth Service`: Authentication and authorization (JWT).
* `User & KYC Service`: User management and identity verification.
* `Wallet Service`: Wallet and balance management.
* `Transaction Service`: Processing and logging all transactions.
* `Payment Gateway Service`: Integration with banks and telecom operators. Includes connectors for telecom-based payment flows (Libyana, Almadar, etc.) that can process and reconcile SIM/USSD transactions with the central ledger.
* `Notification Service`: Sending real-time notifications (Push, SMS, Email).
* `Fraud Engine Service`: AI-powered anti-fraud service.
* `Admin Service`: Backend for the Admin Dashboard.
* **Database:**
* **PostgreSQL 15+:** Primary database (ACID compliant).
* **Redis 7+:** For caching, user sessions, and queues.
* **API Design:**
* **RESTful API** with **OpenAPI 3.0 (Swagger)** documentation.
* Full support for `Idempotency-Key` on all POST requests.
* **Webhooks** for external system integration (secured with HMAC-SHA256).

#### **4.1. Critical Business Logic**
* **SIM Transaction Reconciliation:**
* Endpoint: `POST /api/v1/sim/sync`.
* Accepts an array of locally signed receipts.
* Compares them with data from operator webhooks.
* On match, update the ledger and change transaction status to "settled".
* On mismatch, send an alert to the Admin Dashboard for manual reconciliation.
* **Risk Engine:**
* Every transaction passes through the `Fraud Engine Service`.
* The engine collects features (amount, time, geo-location, device, user behavior).
* Uses an ML model (LightGBM) to predict fraud probability.
* Returns a decision: `{ "decision": "allow", "reason": null, "shap_values": [...] }`.
* `shap_values` are saved for decision explainability.

---

### **5. AI/ML Module**

* **Framework:** **Python 3.10+**
* **Libraries:** `scikit-learn`, `LightGBM`, `pandas`, `numpy`, `SHAP`.
* **Models:**
1. **Fraud Detection Model:**
* **Data:** Transaction history, user data, device data.
* **Training:** Trained periodically (weekly/monthly) on new data.
* **Deployment:** Packaged as a microservice and exposed via a REST API.
2. **Financial Assistant (RAG):**
* **Technology:** **Retrieval-Augmented Generation (RAG)**.
* **Components:**
* **Vector Database:** (e.g., Pinecone, Weaviate) to store regulatory docs and FAQs.
* **LLM:** (e.g., GPT-4 via API or open-source like Llama 3) to generate answers.
* **Function:** Answer user questions, provide saving tips, bill reminders.

---

### **6. Infrastructure & DevOps**

* **Cloud:** **AWS**
* **Containers:** **Docker**
* **Orchestration:** **Kubernetes (EKS)**
* **CI/CD:** **GitHub Actions** for automated build, test, and deployment.
* **Monitoring:**
* **Metrics:** **Prometheus** + **Grafana**
* **Logging:** **ELK Stack** (Elasticsearch, Logstash, Kibana)
* **Tracing:** **Jaeger**
* **Key Management:** **AWS KMS** or an HSM.
* **Hybrid Transaction Gateway:** Deployed to handle both IP-based (HTTPs) and telecom-based (USSD/SMS) transaction routing.

---

### **7. Admin Dashboard**

* **Framework:** **Next.js 14** with **TypeScript**
* **UI Library:** **Tailwind CSS** or **Ant Design**
* **Modules:**
* **Main Dashboard:** Live stats (user count, transaction volume, alerts).
* **User Management:** View users, KYC status, ability to suspend accounts.
* **Fraud Review:** View transactions flagged as "review," with SHAP reasoning.
* **Merchant Management:** Onboard merchants, manage their settings, view reports.
* **Reconciliation:** Interface for reconciling unmatched SIM transactions.
* **Reporting:** Generate financial and operational reports (PDF, Excel).

---

### **8. Final Deliverables Required**

1. **Code Repositories:**
* `libyapay-mobile-app` (Flutter)
* `libyapay-backend` (NestJS Microservices)
* `libyapay-ml-engine` (Python)
* `libyapay-admin-dashboard` (Next.js)
* `libyapay-infrastructure` (Terraform/Helm)
2. **Documentation:**
* API documentation (OpenAPI/Swagger).
* Developer Guide.
* Deployment Guide.
* Architecture Diagrams.
3. **Prototypes:

Files changed (7) hide show

README.md +8 -5
components/feature-card.js +144 -0
components/footer.js +251 -0
components/header.js +216 -0
index.html +220 -19
script.js +182 -0
style.css +142 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Libyapay Platform
-emoji: 📉
-colorFrom: gray
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: LibyaPay Platform 🚀
+colorFrom: purple
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/feature-card.js ADDED Viewed

	@@ -0,0 +1,144 @@

+class FeatureCard extends HTMLElement {
+    connectedCallback() {
+        const icon = this.getAttribute('icon') || 'star';
+        const title = this.getAttribute('title') || 'Feature Title';
+        const description = this.getAttribute('description') || 'Feature description goes here';
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Inter:wght@300;400;600;700&display=swap');
+                :host {
+                    display: block;
+                }
+                .feature-card {
+                    background: white;
+                    padding: 2rem;
+                    border-radius: 16px;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    cursor: pointer;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    font-family: 'Inter', sans-serif;
+                }
+                .feature-card:hover {
+                    transform: translateY(-8px);
+                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+                }
+                .feature-icon {
+                    width: 60px;
+                    height: 60px;
+                    background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
+                    border-radius: 16px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-bottom: 1.5rem;
+                    transition: all 0.3s ease;
+                }
+                .feature-icon svg {
+                    color: #9C27B0;
+                    width: 28px;
+                    height: 28px;
+                    stroke-width: 2;
+                }
+                .feature-card:hover .feature-icon {
+                    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
+                }
+                .feature-card:hover .feature-icon svg {
+                    color: white;
+                }
+                .feature-title {
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    color: #1C1B1F;
+                    margin-bottom: 0.75rem;
+                }
+                .feature-description {
+                    color: #616161;
+                    line-height: 1.6;
+                    flex-grow: 1;
+                }
+                .feature-link {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    color: #9C27B0;
+                    text-decoration: none;
+                    font-weight: 500;
+                    margin-top: 1rem;
+                    transition: gap 0.2s ease;
+                }
+                .feature-link:hover {
+                    gap: 0.75rem;
+                }
+                .feature-link svg {
+                    width: 16px;
+                    height: 16px;
+                }
+                @media (max-width: 640px) {
+                    .feature-card {
+                        padding: 1.5rem;
+                    }
+                    .feature-icon {
+                        width: 50px;
+                        height: 50px;
+                    }
+                    .feature-title {
+                        font-size: 1.125rem;
+                    }
+                }
+            </style>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+                        ${this.getIconPath(icon)}
+                    </svg>
+                </div>
+                <h3 class="feature-title">${title}</h3>
+                <p class="feature-description">${description}</p>
+                <a href="#" class="feature-link">
+                    Learn more
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                        <polyline points="12 5 19 12 12 19"></polyline>
+                    </svg>
+                </a>
+            </div>
+        `;
+    }
+    getIconPath(iconName) {
+        const icons = {
+            'wifi-off': '<path d="M1 1l22 22"></path><path d="M5 12.85a11 11 0 0 1 5.95-5.95"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line>',
+            'shield': '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>',
+            'smartphone': '<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line>',
+            'star': '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>',
+            'credit-card': '<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line>',
+            'grid': '<rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect>',
+            'activity': '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>',
+            'message-circle': '<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>'
+        };
+        return icons[iconName] || icons['star'];
+    }
+}
+customElements.define('feature-card', FeatureCard);

components/footer.js ADDED Viewed

	@@ -0,0 +1,251 @@

+class AppFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Inter:wght@300;400;600;700&display=swap');
+                :host {
+                    display: block;
+                    font-family: 'Inter', sans-serif;
+                    background: linear-gradient(135deg, #4A148C, #7B1FA2);
+                    color: white;
+                    margin-top: 0;
+                }
+                footer {
+                    padding: 4rem 1.5rem 2rem;
+                }
+                .footer-content {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    display: grid;
+                    grid-template-columns: 2fr 1fr 1fr 1fr;
+                    gap: 3rem;
+                    margin-bottom: 3rem;
+                }
+                .footer-brand {
+                    max-width: 350px;
+                }
+                .footer-logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    margin-bottom: 1rem;
+                }
+                .footer-logo-icon {
+                    width: 40px;
+                    height: 40px;
+                    background: white;
+                    border-radius: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #9C27B0;
+                }
+                .footer-description {
+                    color: rgba(255, 255, 255, 0.9);
+                    line-height: 1.6;
+                    margin-bottom: 1.5rem;
+                }
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                }
+                .social-link {
+                    width: 40px;
+                    height: 40px;
+                    background: rgba(255, 255, 255, 0.1);
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    text-decoration: none;
+                    transition: all 0.3s ease;
+                }
+                .social-link:hover {
+                    background: white;
+                    color: #9C27B0;
+                    transform: scale(1.1);
+                }
+                .footer-section h3 {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    margin-bottom: 1rem;
+                    color: white;
+                }
+                .footer-links {
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+                }
+                .footer-links li {
+                    margin-bottom: 0.75rem;
+                }
+                .footer-links a {
+                    color: rgba(255, 255, 255, 0.8);
+                    text-decoration: none;
+                    transition: color 0.2s ease;
+                }
+                .footer-links a:hover {
+                    color: white;
+                }
+                .footer-bottom {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding-top: 2rem;
+                    border-top: 1px solid rgba(255, 255, 255, 0.2);
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    gap: 1rem;
+                }
+                .footer-bottom p {
+                    color: rgba(255, 255, 255, 0.8);
+                    margin: 0;
+                }
+                .footer-legal {
+                    display: flex;
+                    gap: 2rem;
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+                }
+                .footer-legal a {
+                    color: rgba(255, 255, 255, 0.8);
+                    text-decoration: none;
+                    transition: color 0.2s ease;
+                }
+                .footer-legal a:hover {
+                    color: white;
+                }
+                @media (max-width: 768px) {
+                    .footer-content {
+                        grid-template-columns: 1fr;
+                        gap: 2rem;
+                    }
+                    .footer-brand {
+                        max-width: 100%;
+                    }
+                    .footer-bottom {
+                        flex-direction: column;
+                        text-align: center;
+                    }
+                    .footer-legal {
+                        flex-direction: column;
+                        gap: 1rem;
+                        text-align: center;
+                    }
+                }
+            </style>
+            <footer>
+                <div class="footer-content">
+                    <div class="footer-brand">
+                        <div class="footer-logo">
+                            <div class="footer-logo-icon">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
+                                    <line x1="1" y1="10" x2="23" y2="10"></line>
+                                </svg>
+                            </div>
+                            LibyaPay
+                        </div>
+                        <p class="footer-description">
+                            Empowering Libya with secure, fast, and inclusive digital payment solutions. Available online and offline for everyone.
+                        </p>
+                        <div class="social-links">
+                            <a href="#" class="social-link">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+                                </svg>
+                            </a>
+                            <a href="#" class="social-link">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+                                </svg>
+                            </a>
+                            <a href="#" class="social-link">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                                </svg>
+                            </a>
+                            <a href="#" class="social-link">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1112.324 0 6.162 6.162 0 01-12.324 0zM12 16a4 4 0 110-8 4 4 0 010 8zm4.965-10.405a1.44 1.44 0 112.881.001 1.44 1.44 0 01-2.881-.001z"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="footer-section">
+                        <h3>Product</h3>
+                        <ul class="footer-links">
+                            <li><a href="#">Features</a></li>
+                            <li><a href="#">Security</a></li>
+                            <li><a href="#">Pricing</a></li>
+                            <li><a href="#">API Docs</a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-section">
+                        <h3>Company</h3>
+                        <ul class="footer-links">
+                            <li><a href="#">About Us</a></li>
+                            <li><a href="#">Careers</a></li>
+                            <li><a href="#">Blog</a></li>
+                            <li><a href="#">Press</a></li>
+                        </ul>
+                    </div>
+                    <div class="footer-section">
+                        <h3>Support</h3>
+                        <ul class="footer-links">
+                            <li><a href="#">Help Center</a></li>
+                            <li><a href="#">Contact Us</a></li>
+                            <li><a href="#">FAQ</a></li>
+                            <li><a href="#">Status</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="footer-bottom">
+                    <p>&copy; 2024 LibyaPay. All rights reserved.</p>
+                    <ul class="footer-legal">
+                        <li><a href="#">Privacy Policy</a></li>
+                        <li><a href="#">Terms of Service</a></li>
+                        <li><a href="#">Compliance</a></li>
+                    </ul>
+                </div>
+            </footer>
+        `;
+    }
+}
+customElements.define('app-footer', AppFooter);

components/header.js ADDED Viewed

	@@ -0,0 +1,216 @@

+class AppHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Inter:wght@300;400;600;700&display=swap');
+                :host {
+                    display: block;
+                    font-family: 'Inter', sans-serif;
+                }
+                header {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 50;
+                    background: rgba(255, 255, 255, 0.95);
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+                    transition: all 0.3s ease;
+                }
+                .scrolled {
+                    background: white;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                }
+                nav {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 1rem 1.5rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: #9C27B0;
+                    text-decoration: none;
+                    transition: transform 0.2s ease;
+                }
+                .logo:hover {
+                    transform: scale(1.05);
+                }
+                .logo-icon {
+                    width: 40px;
+                    height: 40px;
+                    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
+                    border-radius: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                }
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                    list-style: none;
+                    margin: 0;
+                    padding: 0;
+                }
+                .nav-link {
+                    color: #424242;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: color 0.2s ease;
+                    position: relative;
+                }
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -4px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background: #9C27B0;
+                    transition: width 0.3s ease;
+                }
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                .nav-link:hover {
+                    color: #9C27B0;
+                }
+                .nav-cta {
+                    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
+                    color: white;
+                    padding: 0.75rem 1.5rem;
+                    border-radius: 2rem;
+                    text-decoration: none;
+                    font-weight: 600;
+                    transition: all 0.3s ease;
+                    box-shadow: 0 4px 6px -1px rgba(156, 39, 176, 0.3);
+                }
+                .nav-cta:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 15px -3px rgba(156, 39, 176, 0.3);
+                }
+                .mobile-menu-toggle {
+                    display: none;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 0.5rem;
+                }
+                @media (max-width: 768px) {
+                    .nav-links {
+                        position: fixed;
+                        top: 0;
+                        right: -100%;
+                        width: 80%;
+                        max-width: 300px;
+                        height: 100vh;
+                        background: white;
+                        flex-direction: column;
+                        padding: 5rem 2rem 2rem;
+                        gap: 1.5rem;
+                        box-shadow: -4px 0 6px -1px rgba(0, 0, 0, 0.1);
+                        transition: right 0.3s ease;
+                    }
+                    .nav-links.active {
+                        right: 0;
+                    }
+                    .mobile-menu-toggle {
+                        display: block;
+                    }
+                    .nav-cta {
+                        width: 100%;
+                        text-align: center;
+                    }
+                }
+            </style>
+            <header id="header">
+                <nav>
+                    <a href="#" class="logo">
+                        <div class="logo-icon">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
+                                <line x1="1" y1="10" x2="23" y2="10"></line>
+                            </svg>
+                        </div>
+                        LibyaPay
+                    </a>
+                    <ul class="nav-links" id="navLinks">
+                        <li><a href="#features" class="nav-link">Features</a></li>
+                        <li><a href="#payments" class="nav-link">Payments</a></li>
+                        <li><a href="#security" class="nav-link">Security</a></li>
+                        <li><a href="#about" class="nav-link">About</a></li>
+                        <li><a href="#contact" class="nav-link">Contact</a></li>
+                        <li><a href="#" class="nav-cta">Get Started</a></li>
+                    </ul>
+                    <button class="mobile-menu-toggle" id="mobileMenuToggle">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="3" y1="12" x2="21" y2="12"></line>
+                            <line x1="3" y1="6" x2="21" y2="6"></line>
+                            <line x1="3" y1="18" x2="21" y2="18"></line>
+                        </svg>
+                    </button>
+                </nav>
+            </header>
+        `;
+        // Add scroll effect
+        window.addEventListener('scroll', () => {
+            const header = this.shadowRoot.getElementById('header');
+            if (window.scrollY > 50) {
+                header.classList.add('scrolled');
+            } else {
+                header.classList.remove('scrolled');
+            }
+        });
+        // Mobile menu toggle
+        const mobileMenuToggle = this.shadowRoot.getElementById('mobileMenuToggle');
+        const navLinks = this.shadowRoot.getElementById('navLinks');
+        mobileMenuToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+        });
+        // Close mobile menu when clicking a link
+        const links = navLinks.querySelectorAll('.nav-link');
+        links.forEach(link => {
+            link.addEventListener('click', () => {
+                navLinks.classList.remove('active');
+            });
+        });
+    }
+}
+customElements.define('app-header', AppHeader);

index.html CHANGED Viewed

@@ -1,19 +1,220 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LibyaPay - Digital Payment Platform</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'libyana': {
+                            50: '#F3E5F5',
+                            100: '#E1BEE7',
+                            200: '#CE93D8',
+                            300: '#BA68C8',
+                            400: '#AB47BC',
+                            500: '#9C27B0',
+                            600: '#8E24AA',
+                            700: '#7B1FA2',
+                            800: '#6A1B9A',
+                            900: '#4A148C',
+                        },
+                        'neutral': {
+                            50: '#FAFAFA',
+                            100: '#F5F5F5',
+                            200: '#EEEEEE',
+                            300: '#E0E0E0',
+                            400: '#BDBDBD',
+                            500: '#9E9E9E',
+                            600: '#757575',
+                            700: '#616161',
+                            800: '#424242',
+                            900: '#212121',
+                        }
+                    },
+                    fontFamily: {
+                        'cairo': ['Cairo', 'sans-serif'],
+                        'inter': ['Inter', 'sans-serif'],
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.5s ease-out',
+                        'slide-up': 'slideUp 0.5s ease-out',
+                        'pulse-slow': 'pulse 3s infinite',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-neutral-50 font-inter text-neutral-900">
+    <app-header></app-header>
+    <main>
+        <!-- Hero Section -->
+        <section class="relative overflow-hidden bg-gradient-to-br from-libyana-500 to-libyana-700 text-white">
+            <div class="absolute inset-0 bg-black opacity-20"></div>
+            <div class="relative container mx-auto px-6 py-24 md:py-32">
+                <div class="grid md:grid-cols-2 gap-12 items-center">
+                    <div class="space-y-6 animate-fade-in">
+                        <h1 class="text-4xl md:text-6xl font-bold leading-tight">
+                            LibyaPay - أليباي<br>
+                            <span class="text-libyana-100">Digital Payments for Libya</span>
+                        </h1>
+                        <p class="text-xl text-libyana-100">
+                            Secure, fast, and inclusive payment platform supporting online and offline transactions for everyone in Libya.
+                        </p>
+                        <div class="flex flex-wrap gap-4">
+                            <button class="bg-white text-libyana-600 px-8 py-3 rounded-full font-semibold hover:bg-libyana-50 transition-all transform hover:scale-105 shadow-lg">
+                                Get Started
+                            </button>
+                            <button class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-libyana-600 transition-all">
+                                Learn More
+                            </button>
+                        </div>
+                    </div>
+                    <div class="relative animate-slide-up">
+                        <img src="http://static.photos/technology/640x360/123" alt="Mobile App" class="rounded-2xl shadow-2xl">
+                        <div class="absolute -bottom-6 -left-6 bg-white text-neutral-900 p-4 rounded-xl shadow-xl">
+                            <div class="flex items-center gap-3">
+                                <div class="w-12 h-12 bg-libyana-100 rounded-full flex items-center justify-center">
+                                    <i data-feather="smartphone" class="text-libyana-600"></i>
+                                </div>
+                                <div>
+                                    <p class="font-semibold">2M+ Users</p>
+                                    <p class="text-sm text-neutral-600">Trusted Nationwide</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="absolute bottom-0 left-0 right-0">
+                <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H0Z" fill="#FAFAFA"/>
+                </svg>
+            </div>
+        </section>
+        <!-- Features Section -->
+        <section class="py-20 bg-white">
+            <div class="container mx-auto px-6">
+                <div class="text-center mb-16">
+                    <h2 class="text-4xl font-bold text-neutral-900 mb-4">Why Choose LibyaPay؟</h2>
+                    <p class="text-xl text-neutral-600">Revolutionary features designed for Libya's unique needs</p>
+                </div>
+                <div class="grid md:grid-cols-3 gap-8">
+                    <feature-card
+                        icon="wifi-off"
+                        title="Offline Payments"
+                        description="Make payments even without internet using SIM-based USSD transactions"
+                    ></feature-card>
+                    <feature-card
+                        icon="shield"
+                        title="Bank-Level Security"
+                        description="Advanced encryption and fraud detection keep your money safe"
+                    ></feature-card>
+                    <feature-card
+                        icon="smartphone"
+                        title="Multi-Platform Support"
+                        description="Works on all devices with cloud and SIM wallet integration"
+                    ></feature-card>
+                </div>
+            </div>
+        </section>
+        <!-- Payment Methods Section -->
+        <section class="py-20 bg-neutral-50">
+            <div class="container mx-auto px-6">
+                <div class="text-center mb-16">
+                    <h2 class="text-4xl font-bold text-neutral-900 mb-4">Multiple Payment Methods</h2>
+                    <p class="text-xl text-neutral-600">Choose the payment method that works for you</p>
+                </div>
+                <div class="grid md:grid-cols-4 gap-6">
+                    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all hover:scale-105">
+                        <div class="w-16 h-16 bg-libyana-100 rounded-full flex items-center justify-center mb-4">
+                            <i data-feather="credit-card" class="text-libyana-600 text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold text-lg mb-2">Virtual Cards</h3>
+                        <p class="text-neutral-600">Instant virtual cards for online shopping</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all hover:scale-105">
+                        <div class="w-16 h-16 bg-libyana-100 rounded-full flex items-center justify-center mb-4">
+                            <i data-feather="grid" class="text-libyana-600 text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold text-lg mb-2">QR Payments</h3>
+                        <p class="text-neutral-600">Scan and pay in seconds</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all hover:scale-105">
+                        <div class="w-16 h-16 bg-libyana-100 rounded-full flex items-center justify-center mb-4">
+                            <i data-feather="activity" class="text-libyana-600 text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold text-lg mb-2">NFC Payments</h3>
+                        <p class="text-neutral-600">Tap to pay at supported terminals</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all hover:scale-105">
+                        <div class="w-16 h-16 bg-libyana-100 rounded-full flex items-center justify-center mb-4">
+                            <i data-feather="message-circle" class="text-libyana-600 text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold text-lg mb-2">USSD/SMS</h3>
+                        <p class="text-neutral-600">Payments without internet connection</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Stats Section -->
+        <section class="py-20 bg-gradient-to-r from-libyana-600 to-libyana-700 text-white">
+            <div class="container mx-auto px-6">
+                <div class="grid md:grid-cols-4 gap-8 text-center">
+                    <div>
+                        <div class="text-4xl font-bold mb-2">2M+</div>
+                        <div class="text-libyana-200">Active Users</div>
+                    </div>
+                    <div>
+                        <div class="text-4xl font-bold mb-2">10K+</div>
+                        <div class="text-libyana-200">Merchants</div>
+                    </div>
+                    <div>
+                        <div class="text-4xl font-bold mb-2">$50M+</div>
+                        <div class="text-libyana-200">Transactions</div>
+                    </div>
+                    <div>
+                        <div class="text-4xl font-bold mb-2">99.9%</div>
+                        <div class="text-libyana-200">Uptime</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- CTA Section -->
+        <section class="py-20 bg-white">
+            <div class="container mx-auto px-6 text-center">
+                <h2 class="text-4xl font-bold text-neutral-900 mb-4">Ready to Get Started?</h2>
+                <p class="text-xl text-neutral-600 mb-8">Join millions of Libyans using digital payments</p>
+                <div class="flex justify-center gap-4">
+                    <button class="bg-libyana-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-libyana-700 transition-all transform hover:scale-105 shadow-lg">
+                        Download App
+                    </button>
+                    <button class="border-2 border-libyana-600 text-libyana-600 px-8 py-3 rounded-full font-semibold hover:bg-libyana-600 hover:text-white transition-all">
+                        Become Merchant
+                    </button>
+                </div>
+            </div>
+        </section>
+    </main>
+    <app-footer></app-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/feature-card.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,182 @@

+// Initialize app when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize all tooltips
+    initializeTooltips();
+    // Smooth scrolling for anchor links
+    initializeSmoothScroll();
+    // Add ripple effect to buttons
+    addRippleEffect();
+    // Initialize animation observer
+    initializeAnimationObserver();
+    // Parallax effect for hero section
+    initializeParallax();
+});
+// Initialize tooltips
+function initializeTooltips() {
+    const tooltipElements = document.querySelectorAll('[data-tooltip]');
+    tooltipElements.forEach(element => {
+        element.addEventListener('mouseenter', showTooltip);
+        element.addEventListener('mouseleave', hideTooltip);
+    });
+}
+// Show tooltip
+function showTooltip(e) {
+    const tooltip = document.createElement('div');
+    tooltip.className = 'absolute bg-neutral-800 text-white text-sm px-3 py-2 rounded-lg z-50 pointer-events-none';
+    tooltip.textContent = e.target.dataset.tooltip;
+    tooltip.style.bottom = '100%';
+    tooltip.style.left = '50%';
+    tooltip.style.transform = 'translateX(-50%) translateY(-8px)';
+    tooltip.style.whiteSpace = 'nowrap';
+    e.target.style.position = 'relative';
+    e.target.appendChild(tooltip);
+    // Add arrow
+    const arrow = document.createElement('div');
+    arrow.className = 'absolute w-2 h-2 bg-neutral-800 rotate-45';
+    arrow.style.bottom = '-4px';
+    arrow.style.left = '50%';
+    arrow.style.transform = 'translateX(-50%)';
+    tooltip.appendChild(arrow);
+}
+// Hide tooltip
+function hideTooltip(e) {
+    const tooltip = e.target.querySelector('.absolute');
+    if (tooltip) {
+        tooltip.remove();
+    }
+}
+// Smooth scrolling
+function initializeSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+}
+// Add ripple effect
+function addRippleEffect() {
+    document.querySelectorAll('button, .ripple').forEach(element => {
+        element.addEventListener('click', function(e) {
+            const ripple = document.createElement('span');
+            const rect = this.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+            ripple.style.width = ripple.style.height = size + 'px';
+            ripple.style.left = x + 'px';
+            ripple.style.top = y + 'px';
+            ripple.classList.add('ripple');
+            this.appendChild(ripple);
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        });
+    });
+}
+// Animation observer for scroll animations
+function initializeAnimationObserver() {
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fade-in');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    document.querySelectorAll('.card-hover, .feature-card').forEach(el => {
+        observer.observe(el);
+    });
+}
+// Parallax effect for hero section
+function initializeParallax() {
+    window.addEventListener('scroll', () => {
+        const scrolled = window.pageYOffset;
+        const parallax = document.querySelector('.hero-parallax');
+        if (parallax) {
+            parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
+        }
+    });
+}
+// Number counter animation
+function animateCounter(element, target, duration = 2000) {
+    let start = 0;
+    const increment = target / (duration / 16);
+    const timer = setInterval(() => {
+        start += increment;
+        if (start >= target) {
+            element.textContent = target + (element.dataset.suffix || '');
+            clearInterval(timer);
+        } else {
+            element.textContent = Math.floor(start) + (element.dataset.suffix || '');
+        }
+    }, 16);
+}
+// Initialize counters when they come into view
+const counterObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting && !entry.target.classList.contains('counted')) {
+            const target = parseInt(entry.target.dataset.target);
+            animateCounter(entry.target, target);
+            entry.target.classList.add('counted');
+        }
+    });
+}, { threshold: 0.5 });
+// Apply counter observer to stat elements
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-counter]').forEach(el => {
+        counterObserver.observe(el);
+    });
+});
+// Mobile menu toggle
+function toggleMobileMenu() {
+    const menu = document.querySelector('.mobile-menu');
+    menu.classList.toggle('hidden');
+}
+// Handle theme toggle
+function toggleTheme() {
+    document.documentElement.classList.toggle('dark');
+    localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+}
+// Load saved theme
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+        document.documentElement.classList.add('dark');
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,151 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Inter:wght@300;400;600;700&display=swap');
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.animate-fade-in {
+    animation: fadeIn 0.8s ease-out forwards;
+}
+.animate-slide-up {
+    animation: slideUp 0.8s ease-out 0.2s forwards;
+    opacity: 0;
+}
+/* RTL Support */
+[dir="rtl"] {
+    font-family: 'Cairo', sans-serif;
+}
+[dir="ltr"] {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #9C27B0;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #7B1FA2;
 }
+/* Ripple effect */
+.ripple {
+    position: relative;
+    overflow: hidden;
 }
+.ripple:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
 }
+.ripple:active:before {
+    width: 300px;
+    height: 300px;
 }
+/* Glass morphism effect */
+.glass {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+/* Card hover effects */
+.card-hover {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.card-hover:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+/* Floating animation */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+}
+.float-animation {
+    animation: float 3s ease-in-out infinite;
+}
+/* Pulse animation for notifications */
+@keyframes pulse-ring {
+    0% {
+        transform: scale(0.33);
+    }
+    40%, 50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+.pulse-dot {
+    position: relative;
+    display: inline-block;
+}
+.pulse-dot:before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: currentColor;
+    animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+}