Hugging Face's logo

Spaces:
privateuserh
/
evsyndi-vbeta1-00
Paused

App Files Community
evsyndi-vbeta1-00 / index.html
privateuserh's picture
privateuserh
Add 3 files
46372e9 verified
raw
history blame contribute delete
77.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>EVLEND - EV Automobile Loan Syndication</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .floating-window {
 position: fixed;
 bottom: 20px;
 right: 20px;
 width: 350px;
 height: 500px;
 background: white;
 border-radius: 10px;
 box-shadow: 0 10px 25px rgba(0,0,0,0.2);
 z-index: 1000;
 display: none;
 flex-direction: column;
 overflow: hidden;
 transition: all 0.3s ease;
 }
.floating-header {
 background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 color: white;
 padding: 12px 15px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
.floating-content {
 flex: 1;
 overflow-y: auto;
 padding: 15px;
 }
.deal-card {
 border: 1px solid #e5e7eb;
 border-radius: 8px;
 padding: 12px;
 margin-bottom: 10px;
 transition: all 0.2s ease;
 }
.deal-card:hover {
 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 transform: translateY(-2px);
 }
.floating-btn {
 position: fixed;
 bottom: 20px;
 right: 20px;
 width: 60px;
 height: 60px;
 background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 color: white;
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
 cursor: pointer;
 z-index: 999;
 }
.tab-content {
 display: none;
 }
.tab-content.active {
 display: block;
 }
.tab-button.active {
 border-bottom: 3px solid #10b981;
 color: #10b981;
 font-weight: 600;
 }
.crypto-badge {
 display: inline-flex;
 align-items: center;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 500;
 margin-right: 5px;
 }
.progress-bar {
 height: 6px;
 border-radius: 3px;
 background-color: #e5e7eb;
 overflow: hidden;
 }
.progress-fill {
 height: 100%;
 background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
 }
.blink {
 animation: blink 2s infinite;
 }
@keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 0.5; }
 100% { opacity: 1; }
 }
 .telegram-btn {
 position: fixed;
 bottom: 90px;
 right: 20px;
 width: 60px;
 height: 60px;
 background: #0088cc;
 color: white;
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
 cursor: pointer;
 z-index: 999;
 transition: all 0.3s ease;
 }
 .telegram-btn:hover {
 transform: scale(1.1);
 }
 .legal-badge {
 display: inline-block;
 background-color: #f3f4f6;
 color: #4b5563;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 11px;
 margin-right: 5px;
 margin-bottom: 5px;
 }
.subscription-badge {
 display: inline-block;
 background-color: #e0f2fe;
 color: #0369a1;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 11px;
 margin-right: 5px;
 margin-bottom: 5px;
 }
.ev-icon {
 color: #10b981;
 }
.subscription-card {
 border: 1px solid #e5e7eb;
 border-radius: 8px;
 padding: 15px;
 transition: all 0.3s ease;
 }
.subscription-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(0,0,0,0.1);
 }
.subscription-card.popular {
 border: 2px solid #10b981;
 position: relative;
 overflow: hidden;
 }
.popular-tag {
 position: absolute;
 top: 0;
 right: 0;
 background: #10b981;
 color: white;
 padding: 3px 10px;
 font-size: 12px;
 border-bottom-left-radius: 8px;
 }
 </style>
</head>
<body class="bg-gray-50">
 <!-- Header -->
 <header class="bg-gradient-to-r from-green-600 to-emerald-600 text-white">
 <div class="container mx-auto px-4 py-6">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-bolt ev-icon text-2xl"></i>
 <h1 class="text-2xl font-bold">EVLEND</h1>
 </div>
 <nav class="hidden md:flex space-x-6">
 <a href="#about" class="hover:text-green-200 transition">About</a>
 <a href="#how-it-works" class="hover:text-green-200 transition">How It Works</a>
 <a href="#current-deals" class="hover:text-green-200 transition">Current Deals</a>
 <a href="#subscriptions" class="hover:text-green-200 transition">Subscriptions</a>
 <a href="#terms" class="hover:text-green-200 transition">Terms</a>
 </nav>
 <button class="md:hidden text-xl">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 <div class="mt-12 mb-16 text-center">
 <h2 class="text-4xl md:text-5xl font-bold mb-4">EV Automobile Loan Syndication</h2>
 <p class="text-xl md:text-2xl max-w-3xl mx-auto">Participate in EV loan syndications with flexible crypto payment options and subscription plans</p>
 <div class="mt-8 flex justify-center space-x-4">
 <button class="bg-white text-green-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Explore Deals</button>
 <button class="border border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-green-600 transition">Learn More</button>
 </div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="container mx-auto px-4 py-12">
 <!-- About Section -->
 <section id="about" class="mb-20">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Revolutionizing EV Loan Financing</h2>
 <p class="text-gray-600 max-w-3xl mx-auto">EVLEND combines EV automobile loan syndication with blockchain technology to create transparent, efficient, and accessible investment opportunities.</p>
 <div class="mt-6 flex flex-wrap justify-center">
 <span class="legal-badge">Syndicate by EVLEND 2023</span>
 <span class="legal-badge">Automobile loan origination</span>
 <span class="legal-badge">Consumer lending compliance</span>
 <span class="legal-badge">SAFE Act 12 U.S.C. §§ 5101 et seq.</span>
 <span class="legal-badge">Cal. Fin. Code § 22050.5</span>
 </div>
 </div>
<div class="grid md:grid-cols-3 gap-8">
 <div class="bg-white p-6 rounded-xl shadow-md">
 <div class="text-green-600 text-3xl mb-4">
 <i class="fas fa-users"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">Club Deal Syndication</h3>
 <p class="text-gray-600">Small group of lenders collectively providing funds for EV loans with pre-arranged commitments.</p>
 </div>
<div class="bg-white p-6 rounded-xl shadow-md">
 <div class="text-green-600 text-3xl mb-4">
 <i class="fas fa-handshake"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">Best-Efforts Syndication</h3>
 <p class="text-gray-600">Syndicate attempts to sell the EV loan to investors but isn't obligated to provide any unfunded amounts.</p>
 </div>
<div class="bg-white p-6 rounded-xl shadow-md">
 <div class="text-green-600 text-3xl mb-4">
 <i class="fas fa-calendar-alt"></i>
 </div>
 <h3 class="text-xl font-semibold mb-2">Flexible Subscriptions</h3>
 <p class="text-gray-600">Weekly, monthly, quarterly, semi-annual, or annual participation plans to match your investment strategy.</p>
 </div>
 </div>
 </section>
<!-- How It Works Section -->
 <section id="how-it-works" class="mb-20">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">The EV Loan Syndication Process</h2>
 <p class="text-gray-600 max-w-3xl mx-auto">Our streamlined process makes participating in EV loan syndication accessible to all.</p>
 </div>
<div class="relative">
 <div class="hidden md:block absolute left-1/2 top-0 h-full w-1 bg-green-200 transform -translate-x-1/2"></div>
<div class="grid md:grid-cols-2 gap-8 mb-8">
 <div class="md:text-right">
 <h3 class="text-xl font-semibold mb-2">1. Deal Origination</h3>
 <p class="text-gray-600">Our team sources high-quality EV loan opportunities with thorough due diligence on borrowers and vehicles.</p>
 </div>
 <div></div>
 </div>
<div class="grid md:grid-cols-2 gap-8 mb-8">
 <div></div>
 <div>
 <h3 class="text-xl font-semibold mb-2">2. Deal Structuring</h3>
 <p class="text-gray-600">We determine the optimal syndication structure (Club Deal or Best-Efforts) based on the loan characteristics.</p>
 </div>
 </div>
<div class="grid md:grid-cols-2 gap-8 mb-8">
 <div class="md:text-right">
 <h3 class="text-xl font-semibold mb-2">3. Investor Participation</h3>
 <p class="text-gray-600">Participants commit funds in BTC, ETH, USDC, or USDT through our secure platform or choose a subscription plan.</p>
 </div>
 <div></div>
 </div>
<div class="grid md:grid-cols-2 gap-8 mb-8">
 <div></div>
 <div>
 <h3 class="text-xl font-semibold mb-2">4. Closing & Funding</h3>
 <p class="text-gray-600">Once fully subscribed, the EV loan is funded and the vehicle is delivered to the borrower with GPS tracking.</p>
 </div>
 </div>
<div class="grid md:grid-cols-2 gap-8">
 <div class="md:text-right">
 <h3 class="text-xl font-semibold mb-2">5. Loan Servicing</h3>
 <p class="text-gray-600">We handle all loan servicing and distribute payments to participants in their chosen cryptocurrency or fiat.</p>
 </div>
 <div></div>
 </div>
 </div>
 </section>
<!-- Current Deals Section -->
 <section id="current-deals" class="mb-20">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Current EV Loan Syndication Opportunities</h2>
 <p class="text-gray-600 max-w-3xl mx-auto">Browse our available EV loan syndication deals and participate with cryptocurrency or subscription plans.</p>
 </div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="flex border-b">
 <button class="tab-button active px-6 py-4 font-medium" data-tab="club-deals">Club Deals</button>
 <button class="tab-button px-6 py-4 font-medium" data-tab="best-efforts">Best-Efforts</button>
 </div>
<div class="p-6">
 <!-- Club Deals Tab -->
 <div id="club-deals" class="tab-content active">
 <div class="grid md:grid-cols-2 gap-6">
 <!-- Deal 1 -->
 <div class="deal-card">
 <div class="flex justify-between items-start mb-3">
 <div>
 <h3 class="font-semibold text-lg">Tesla Model 3 Fleet Loan</h3>
 <p class="text-gray-500 text-sm">Ref #: CD-EV-2023-1001</p>
 </div>
 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Club Deal</span>
 </div>
<div class="mb-4">
 <div class="flex flex-wrap mb-2">
 <span class="crypto-badge bg-orange-100 text-orange-800"><i class="fab fa-bitcoin mr-1"></i> BTC</span>
 <span class="crypto-badge bg-blue-100 text-blue-800"><i class="fab fa-ethereum mr-1"></i> ETH</span>
 <span class="crypto-badge bg-purple-100 text-purple-800"><i class="fas fa-dollar-sign mr-1"></i> USDC</span>
 <span class="crypto-badge bg-teal-100 text-teal-800"><i class="fas fa-dollar-sign mr-1"></i> USDT</span>
 </div>
 <div class="flex justify-between text-sm mb-1">
 <span>Target: $2,500,000</span>
 <span>Raised: $2,000,000 (80%)</span>
 </div>
 <div class="progress-bar">
 <div class="progress-fill" style="width: 80%"></div>
 </div>
 </div>
<div class="grid grid-cols-2 gap-4 mb-4">
 <div>
 <p class="text-gray-500 text-sm">Term</p>
 <p class="font-medium">36 months</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Interest Rate</p>
 <p class="font-medium">9.25% fixed</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Vehicle Type</p>
 <p class="font-medium">15 Tesla Model 3</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">LTV Ratio</p>
 <p class="font-medium">75%</p>
 </div>
 </div>
<div class="flex justify-between">
 <button class="text-green-600 hover:text-green-800 text-sm font-medium">Details</button>
 <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium participate-btn" data-deal="CD-EV-2023-1001">Participate</button>
 </div>
 </div>
<!-- Deal 2 -->
 <div class="deal-card">
 <div class="flex justify-between items-start mb-3">
 <div>
 <h3 class="font-semibold text-lg">Rivian R1T Commercial Loan</h3>
 <p class="text-gray-500 text-sm">Ref #: CD-EV-2023-1002</p>
 </div>
 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Club Deal</span>
 </div>
<div class="mb-4">
 <div class="flex flex-wrap mb-2">
 <span class="crypto-badge bg-orange-100 text-orange-800"><i class="fab fa-bitcoin mr-1"></i> BTC</span>
 <span class="crypto-badge bg-purple-100 text-purple-800"><i class="fas fa-dollar-sign mr-1"></i> USDC</span>
 <span class="crypto-badge bg-teal-100 text-teal-800"><i class="fas fa-dollar-sign mr-1"></i> USDT</span>
 </div>
 <div class="flex justify-between text-sm mb-1">
 <span>Target: $1,800,000</span>
 <span>Raised: $1,530,000 (85%)</span>
 </div>
 <div class="progress-bar">
 <div class="progress-fill" style="width: 85%"></div>
 </div>
 </div>
<div class="grid grid-cols-2 gap-4 mb-4">
 <div>
 <p class="text-gray-500 text-sm">Term</p>
 <p class="font-medium">48 months</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Interest Rate</p>
 <p class="font-medium">8.75% fixed</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Vehicle Type</p>
 <p class="font-medium">12 Rivian R1T</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">LTV Ratio</p>
 <p class="font-medium">70%</p>
 </div>
 </div>
<div class="flex justify-between">
 <button class="text-green-600 hover:text-green-800 text-sm font-medium">Details</button>
 <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium participate-btn" data-deal="CD-EV-2023-1002">Participate</button>
 </div>
 </div>
 </div>
 </div>
<!-- Best-Efforts Tab -->
 <div id="best-efforts" class="tab-content">
 <div class="grid md:grid-cols-2 gap-6">
 <!-- Deal 1 -->
 <div class="deal-card">
 <div class="flex justify-between items-start mb-3">
 <div>
 <h3 class="font-semibold text-lg">Lucid Air Retail Loan Pool</h3>
 <p class="text-gray-500 text-sm">Ref #: BE-EV-2023-2001</p>
 </div>
 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Best-Efforts</span>
 </div>
<div class="mb-4">
 <div class="flex flex-wrap mb-2">
 <span class="crypto-badge bg-orange-100 text-orange-800"><i class="fab fa-bitcoin mr-1"></i> BTC</span>
 <span class="crypto-badge bg-blue-100 text-blue-800"><i class="fab fa-ethereum mr-1"></i> ETH</span>
 <span class="crypto-badge bg-purple-100 text-purple-800"><i class="fas fa-dollar-sign mr-1"></i> USDC</span>
 </div>
 <div class="flex justify-between text-sm mb-1">
 <span>Target: $3,200,000</span>
 <span>Raised: $2,240,000 (70%)</span>
 </div>
 <div class="progress-bar">
 <div class="progress-fill" style="width: 70%"></div>
 </div>
 </div>
<div class="grid grid-cols-2 gap-4 mb-4">
 <div>
 <p class="text-gray-500 text-sm">Term</p>
 <p class="font-medium">60 months</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Interest Rate</p>
 <p class="font-medium">10.5% fixed</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Vehicle Type</p>
 <p class="font-medium">20 Lucid Air</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">LTV Ratio</p>
 <p class="font-medium">80%</p>
 </div>
 </div>
<div class="flex justify-between">
 <button class="text-green-600 hover:text-green-800 text-sm font-medium">Details</button>
 <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium participate-btn" data-deal="BE-EV-2023-2001">Participate</button>
 </div>
 </div>
<!-- Deal 2 -->
 <div class="deal-card">
 <div class="flex justify-between items-start mb-3">
 <div>
 <h3 class="font-semibold text-lg">Ford F-150 Lightning Fleet</h3>
 <p class="text-gray-500 text-sm">Ref #: BE-EV-2023-2002</p>
 </div>
 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Best-Efforts</span>
 </div>
<div class="mb-4">
 <div class="flex flex-wrap mb-2">
 <span class="crypto-badge bg-orange-100 text-orange-800"><i class="fab fa-bitcoin mr-1"></i> BTC</span>
 <span class="crypto-badge bg-blue-100 text-blue-800"><i class="fab fa-ethereum mr-1"></i> ETH</span>
 <span class="crypto-badge bg-teal-100 text-teal-800"><i class="fas fa-dollar-sign mr-1"></i> USDT</span>
 </div>
 <div class="flex justify-between text-sm mb-1">
 <span>Target: $2,700,000</span>
 <span>Raised: $1,890,000 (70%)</span>
 </div>
 <div class="progress-bar">
 <div class="progress-fill" style="width: 70%"></div>
 </div>
 </div>
<div class="grid grid-cols-2 gap-4 mb-4">
 <div>
 <p class="text-gray-500 text-sm">Term</p>
 <p class="font-medium">48 months</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Interest Rate</p>
 <p class="font-medium">9.5% fixed</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">Vehicle Type</p>
 <p class="font-medium">18 Ford F-150 Lightning</p>
 </div>
 <div>
 <p class="text-gray-500 text-sm">LTV Ratio</p>
 <p class="font-medium">75%</p>
 </div>
 </div>
<div class="flex justify-between">
 <button class="text-green-600 hover:text-green-800 text-sm font-medium">Details</button>
 <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded text-sm font-medium participate-btn" data-deal="BE-EV-2023-2002">Participate</button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Subscription Plans Section -->
 <section id="subscriptions" class="mb-20">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Flexible Subscription Plans</h2>
 <p class="text-gray-600 max-w-3xl mx-auto">Choose the subscription plan that matches your investment strategy and cash flow needs.</p>
 </div>
<div class="grid md:grid-cols-5 gap-6">
 <!-- Weekly Plan -->
 <div class="subscription-card">
 <div class="text-center mb-4">
 <h3 class="font-semibold text-lg">Weekly</h3>
 <p class="text-green-600 font-medium">7-day cycles</p>
 </div>
 <div class="text-center mb-6">
 <span class="text-3xl font-bold">5.5%</span>
 <span class="text-gray-500">APY</span>
 </div>
 <ul class="space-y-2 text-sm text-gray-600 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Auto-renews every 7 days</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Early withdrawal penalty: 1%</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Minimum: $5,000</span>
 </li>
 </ul>
 <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg font-medium">Subscribe</button>
 </div>
<!-- Monthly Plan -->
 <div class="subscription-card">
 <div class="text-center mb-4">
 <h3 class="font-semibold text-lg">Monthly</h3>
 <p class="text-green-600 font-medium">30-day cycles</p>
 </div>
 <div class="text-center mb-6">
 <span class="text-3xl font-bold">6.25%</span>
 <span class="text-gray-500">APY</span>
 </div>
 <ul class="space-y-2 text-sm text-gray-600 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Auto-renews every 30 days</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Early withdrawal penalty: 0.75%</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Minimum: $5,000</span>
 </li>
 </ul>
 <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg font-medium">Subscribe</button>
 </div>
<!-- Quarterly Plan -->
 <div class="subscription-card popular">
 <div class="popular-tag">Most Popular</div>
 <div class="text-center mb-4">
 <h3 class="font-semibold text-lg">Quarterly</h3>
 <p class="text-green-600 font-medium">90-day cycles</p>
 </div>
 <div class="text-center mb-6">
 <span class="text-3xl font-bold">7.5%</span>
 <span class="text-gray-500">APY</span>
 </div>
 <ul class="space-y-2 text-sm text-gray-600 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Auto-renews every 90 days</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Early withdrawal penalty: 0.5%</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Minimum: $5,000</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Priority deal access</span>
 </li>
 </ul>
 <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg font-medium">Subscribe</button>
 </div>
<!-- Semi-Annual Plan -->
 <div class="subscription-card">
 <div class="text-center mb-4">
 <h3 class="font-semibold text-lg">Semi-Annual</h3>
 <p class="text-green-600 font-medium">180-day cycles</p>
 </div>
 <div class="text-center mb-6">
 <span class="text-3xl font-bold">8.25%</span>
 <span class="text-gray-500">APY</span>
 </div>
 <ul class="space-y-2 text-sm text-gray-600 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Auto-renews every 180 days</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Early withdrawal penalty: 0.25%</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Minimum: $5,000</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Priority deal access</span>
 </li>
 </ul>
 <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg font-medium">Subscribe</button>
 </div>
<!-- Annual Plan -->
 <div class="subscription-card">
 <div class="text-center mb-4">
 <h3 class="font-semibold text-lg">Annual</h3>
 <p class="text-green-600 font-medium">365-day cycles</p>
 </div>
 <div class="text-center mb-6">
 <span class="text-3xl font-bold">9.5%</span>
 <span class="text-gray-500">APY</span>
 </div>
 <ul class="space-y-2 text-sm text-gray-600 mb-6">
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Auto-renews every 365 days</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>No early withdrawal penalty</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Minimum: $5,000</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>VIP deal access</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
 <span>Personal account manager</span>
 </li>
 </ul>
 <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg font-medium">Subscribe</button>
 </div>
 </div>
<div class="mt-12 bg-white rounded-xl shadow-md p-6">
 <h3 class="text-xl font-semibold mb-4 text-center">Custom Subscription Request</h3>
 <form id="custom-subscription-form">
 <div class="grid md:grid-cols-2 gap-6 mb-6">
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-2" for="subscription-amount">Investment Amount</label>
 <div class="relative">
 <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">$</span>
 <input class="w-full pl-8 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" type="number" id="subscription-amount" placeholder="Enter amount">
 </div>
 </div>
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-2" for="subscription-term">Preferred Term</label>
 <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" id="subscription-term">
 <option value="">Select term</option>
 <option value="weekly">Weekly (7 days)</option>
 <option value="monthly">Monthly (30 days)</option>
 <option value="quarterly">Quarterly (90 days)</option>
 <option value="semi-annual">Semi-Annual (180 days)</option>
 <option value="annual">Annual (365 days)</option>
 <option value="custom">Custom Duration</option>
 </select>
 </div>
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-2" for="subscription-crypto">Settlement Currency</label>
 <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" id="subscription-crypto">
 <option value="">Select currency</option>
 <option value="btc">Bitcoin (BTC)</option>
 <option value="eth">Ethereum (ETH)</option>
 <option value="usdc">USD Coin (USDC)</option>
 <option value="usdt">Tether (USDT)</option>
 <option value="usd">USD</option>
 </select>
 </div>
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-2" for="subscription-auto">Auto-Renewal</label>
 <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" id="subscription-auto">
 <option value="yes">Yes, automatically renew</option>
 <option value="no">No, manual renewal</option>
 </select>
 </div>
 </div>
 <div class="text-center">
 <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium">Request Custom Plan</button>
 </div>
 </form>
 </div>
 </section>
<!-- Terms Section -->
 <section id="terms" class="mb-20">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Lending Terms & Conditions</h2>
 <p class="text-gray-600 max-w-3xl mx-auto">Understand the terms governing our EV loan syndication deals and subscription plans.</p>
 </div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="p-6">
 <div class="mb-8">
 <h3 class="text-xl font-semibold mb-4 text-green-600">General Terms</h3>
 <ul class="space-y-3 text-gray-700">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Minimum participation amount: $5,000 or crypto equivalent (BTC, ETH, USDC, USDT)</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Funds are locked for the duration of the loan term or subscription period</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Interest payments distributed according to schedule in cryptocurrency or fiat</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Principal returned at maturity or upon loan payoff in original contribution currency</span>
 </li>
 </ul>
 </div>
<div class="mb-8">
 <h3 class="text-xl font-semibold mb-4 text-green-600">Subscription Terms</h3>
 <ul class="space-y-3 text-gray-700">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Subscription plans auto-renew unless cancelled 7 days before renewal date</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Early withdrawals subject to penalty (except Annual plan)</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Subscription funds are pooled across multiple EV loans for diversification</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>APY rates are net of all fees and represent historical averages</span>
 </li>
 </ul>
 </div>
<div>
 <h3 class="text-xl font-semibold mb-4 text-green-600">Legal Compliance</h3>
 <ul class="space-y-3 text-gray-700">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Syndicate by EVLEND 2023</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Automobile loan origination compliance</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Consumer lending regulations</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Secure and Fair Enforcement for Mortgage Licensing Act of 2008, 12 U.S.C. §§ 5101 et seq.</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
 <span>Cal. Fin. Code § 22050.5</span>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </section>
<!-- Sub-participation Section -->
 <section class="mb-20">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Sub-participation Options</h2>
 <p class="text-gray-600 max-w-3xl mx-auto">Secondary market participation for existing syndicated EV loans.</p>
 </div>
<div class="bg-white rounded-xl shadow-md p-6">
 <div class="grid md:grid-cols-3 gap-6">
 <div class="border border-gray-200 rounded-lg p-5 hover:border-green-300 transition">
 <div class="text-green-600 text-2xl mb-3">
 <i class="fas fa-exchange-alt"></i>
 </div>
 <h3 class="text-lg font-semibold mb-2">Partial Assignment</h3>
 <p class="text-gray-600 text-sm">Transfer a portion of your participation to another investor while maintaining your position.</p>
 </div>
<div class="border border-gray-200 rounded-lg p-5 hover:border-green-300 transition">
 <div class="text-green-600 text-2xl mb-3">
 <i class="fas fa-share-square"></i>
 </div>
 <h3 class="text-lg font-semibold mb-2">Full Assignment</h3>
 <p class="text-gray-600 text-sm">Transfer your entire participation to another investor, exiting the syndicate.</p>
 </div>
<div class="border border-gray-200 rounded-lg p-5 hover:border-green-300 transition">
 <div class="text-green-600 text-2xl mb-3">
 <i class="fas fa-hand-holding-usd"></i>
 </div>
 <h3 class="text-lg font-semibold mb-2">Risk Participation</h3>
 <p class="text-gray-600 text-sm">Sell only the risk portion of your participation while maintaining the income stream.</p>
 </div>
 </div>
<div class="mt-8 p-6 bg-gray-50 rounded-lg">
 <h3 class="text-xl font-semibold mb-4 text-center">Request Sub-participation</h3>
 <form id="subparticipation-form">
 <div class="grid md:grid-cols-2 gap-6 mb-6">
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-2" for="user-ref">Your Reference Number</label>
 <input class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" type="text" id="user-ref" placeholder="Enter your reference number">
 </div>
 <div>
 <label class="block text-gray-700 text-sm font-medium mb-2" for="deal-ref">Deal Reference Number</label>
 <input class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" type="text" id="deal-ref", placeholder="Enter deal reference number">
 </div>
 </div>
 <div class="mb-6">
 <label class="block text-gray-700 text-sm font-medium mb-2" for="participation-type">Type of Sub-participation</label>
 <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" id="participation-type">
 <option value="">Select type</option>
 <option value="partial">Partial Assignment</option>
 <option value="full">Full Assignment</option>
 <option value="risk">Risk Participation</option>
 </select>
 </div>
 <div class="mb-6">
 <label class="block text-gray-700 text-sm font-medium mb-2", for="crypto-type">Preferred Settlement Currency</label>
 <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" id="crypto-type">
 <option value="">Select currency</option>
 <option value="btc">Bitcoin (BTC)</option>
 <option value="eth">Ethereum (ETH)</option>
 <option value="usdc">USD Coin (USDC)</option>
 <option value="usdt">Tether (USDT)</option>
 <option value="usd">USD</option>
 </select>
 </div>
 <div class="text-center">
 <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium">Submit Request</button>
 </div>
 </form>
 </div>
 </div>
 </section>
 </main>
<!-- Floating Button -->
 <div class="floating-btn" id="floating-btn">
 <i class="fas fa-briefcase text-xl"></i>
 </div>
<!-- Telegram Button -->
 <a href="https://t.me/EVLENDBot" target="_blank" class="telegram-btn" id="telegram-btn">
 <i class="fab fa-telegram-plane text-2xl"></i>
 </a>
<!-- Floating Window -->
 <div class="floating-window" id="floating-window">
 <div class="floating-header">
 <h3>My Deals & Subscriptions</h3>
 <div>
 <button id="close-window" class="text-white hover:text-gray-200">
 <i class="fas fa-times"></i>
 </button>
 </div>
 </div>
<div class="floating-content">
 <div class="flex justify-between items-center mb-4">
 <div class="relative flex-1 mr-2">
 <input type="text" id="search-ref" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-green-500" placeholder="Search by reference...">
 <button id="search-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-green-600">
 <i class="fas fa-search"></i>
 </button>
 </div>
 </div>
<div id="deals-container">
 <!-- Deals will be added here dynamically -->
 <div class="text-center py-8 text-gray-500" id="no-deals-message">
 <i class="fas fa-folder-open text-3xl mb-2"></i>
 <p>No deals or subscriptions yet</p>
 </div>
 </div>
<div class="mt-4 p-4 bg-gray-50 rounded-lg hidden" id="deal-details">
 <h4 class="font-semibold mb-2" id="detail-title">Deal Details</h4>
 <div class="text-sm space-y-1" id="detail-content">
 <!-- Details will be shown here -->
 </div>
 <div class="mt-3 flex justify-between">
 <button id="add-subparticipation" class="text-green-600 hover:text-green-800 text-xs font-medium">Add Sub-participation</button>
 <button id="remove-deal" class="text-red-600 hover:text-red-800 text-xs font-medium">Remove</button>
 </div>
 </div>
<div class="mt-4 p-4 bg-gray-50 rounded-lg hidden" id="subscription-details">
 <h4 class="font-semibold mb-2" id="subscription-title">Subscription Details</h4>
 <div class="text-sm space-y-1" id="subscription-content">
 <!-- Subscription details will be shown here -->
 </div>
 <div class="mt-3 flex justify-between">
 <button id="modify-subscription" class="text-green-600 hover:text-green-800 text-xs font-medium">Modify</button>
 <button id="cancel-subscription" class="text-red-600 hover:text-red-800 text-xs font-medium">Cancel</button>
 </div>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid md:grid-cols-4 gap-8 mb-8">
 <div>
 <h3 class="text-xl font-semibold mb-4">EVLEND</h3>
 <p class="text-gray-400">Innovative EV automobile loan syndication platform.</p>
 <div class="mt-4 flex space-x-4">
 <div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center">
 <i class="fab fa-bitcoin text-white"></i>
 </div>
 <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
 <i class="fab fa-ethereum text-white"></i>
 </div>
 <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center">
 <i class="fas fa-dollar-sign text-white"></i>
 </div>
 </div>
 </div>
 <div>
 <h4 class="font-semibold mb-4">Quick Links</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Current Deals</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Subscription Plans</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li>
 </ul>
 </div>
 <div>
 <h4 class="font-semibold mb-4">Legal</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Risk Disclosure</a></li>
 </ul>
 </div>
 <div>
 <h4 class="font-semibold mb-4">Contact</h4>
 <ul class="space-y-2">
 <li class="flex items-center">
 <i class="fab fa-telegram mr-2 text-gray-400"></i>
 <a href="https://t.me/EVLENDBot" target="_blank" class="text-gray-400 hover:text-white transition">Telegram Bot</a>
 </li>
 </ul>
 </div>
 </div>
 <div class="pt-8 border-t border-gray-700 text-center text-gray-400">
 <p>&copy; 2025 EVLEND (SaaS) All rights reserved.</p>
 <p class="mt-2 text-sm">Syndicate by EVLEND 2023 | Automobile loan origination compliance</p>
 <p class="mt-1 text-sm">Consumer lending regulations | Accepted cryptocurrencies: BTC, ETH, USDC, USDT</p>
 </div>
 </div>
 </footer>
<script>
 // Tab functionality
 document.querySelectorAll('.tab-button').forEach(button => {
 button.addEventListener('click', () => {
 const tabId = button.getAttribute('data-tab');
// Remove active class from all buttons and content
 document.querySelectorAll('.tab-button').forEach(btn => {
 btn.classList.remove('active');
 });
 document.querySelectorAll('.tab-content').forEach(content => {
 content.classList.remove('active');
 });
// Add active class to clicked button and corresponding content
 button.classList.add('active');
 document.getElementById(tabId).classList.add('active');
 });
 });
// Floating window functionality
 const floatingBtn = document.getElementById('floating-btn');
 const floatingWindow = document.getElementById('floating-window');
 const closeWindow = document.getElementById('close-window');
floatingBtn.addEventListener('click', () => {
 floatingWindow.style.display = 'flex';
 floatingBtn.style.display = 'none';
 });
closeWindow.addEventListener('click', () => {
 floatingWindow.style.display = 'none';
 floatingBtn.style.display = 'flex';
 });
// Deal participation functionality
 document.querySelectorAll('.participate-btn').forEach(button => {
 button.addEventListener('click', () => {
 const dealRef = button.getAttribute('data-deal');
 const dealCard = button.closest('.deal-card');
 const dealTitle = dealCard.querySelector('h3').textContent;
 const dealType = dealCard.querySelector('span').textContent;
 const dealProgress = dealCard.querySelector('.flex.justify-between.text-sm').textContent;
 const dealTerms = dealCard.querySelectorAll('.grid.grid-cols-2.gap-4.mb-4 div p.font-medium');
 const vehicleType = dealCard.querySelector('div:nth-child(3) p.font-medium').textContent;
// Generate a random user reference
 const userRef = 'UR-' + Math.floor(100000 + Math.random() * 900000);
// Add deal to floating window
 addDealToWindow(dealRef, userRef, dealTitle, dealType, dealProgress, dealTerms, vehicleType);
// Show floating window
 floatingWindow.style.display = 'flex';
 floatingBtn.style.display = 'none';
// Show success message
 alert(`Successfully participated in ${dealTitle} (${dealRef}). Your reference number is ${userRef}.`);
 });
 });
// Subscription button functionality
 document.querySelectorAll('.subscription-card button').forEach(button => {
 button.addEventListener('click', function() {
 const subscriptionCard = this.closest('.subscription-card');
 const planName = subscriptionCard.querySelector('h3').textContent;
 const planTerm = subscriptionCard.querySelector('p.text-green-600').textContent;
 const planAPY = subscriptionCard.querySelector('.text-3xl').textContent;
// Generate a random subscription reference
 const subRef = 'SUB-' + Math.floor(100000 + Math.random() * 900000);
// Add subscription to floating window
 addSubscriptionToWindow(subRef, planName, planTerm, planAPY);
// Show floating window
 floatingWindow.style.display = 'flex';
 floatingBtn.style.display = 'none';
// Show success message
 alert(`Successfully subscribed to ${planName} plan (${planTerm}). Your subscription reference is ${subRef}.`);
 });
 });
// Function to add deal to floating window
 function addDealToWindow(dealRef, userRef, title, type, progress, terms, vehicleType) {
 const dealsContainer = document.getElementById('deals-container');
 const noDealsMessage = document.getElementById('no-deals-message');
// Hide "no deals" message if it's shown
 if (noDealsMessage.style.display !== 'none') {
 noDealsMessage.style.display = 'none';
 }
// Create deal element
 const dealElement = document.createElement('div');
 dealElement.className = 'deal-card cursor-pointer mb-3';
 dealElement.setAttribute('data-deal-ref', dealRef);
 dealElement.setAttribute('data-user-ref', userRef);
 dealElement.setAttribute('data-type', 'deal');
dealElement.innerHTML = `
 <div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium">${title}</h4>
 <div class="flex items-center text-xs text-gray-500 mt-1">
 <span>${dealRef}</span>
 <span class="mx-2">•</span>
 <span>${userRef}</span>
 <span class="mx-2">•</span>
 <span class="text-green-600">EV Loan</span>
 </div>
 </div>
 <span class="text-xs px-2 py-1 rounded ${type === 'Club Deal' ? 'bg-green-100 text-green-800' : 'bg-purple-100 text-purple-800'}">${type}</span>
 </div>
 `;
// Add click event to show details
 dealElement.addEventListener('click', function() {
 showDealDetails(dealRef, userRef, title, type, progress, terms, vehicleType);
 document.getElementById('subscription-details').classList.add('hidden');
 });
// Add to container
 dealsContainer.appendChild(dealElement);
 }
// Function to add subscription to floating window
 function addSubscriptionToWindow(subRef, planName, planTerm, planAPY) {
 const dealsContainer = document.getElementById('deals-container');
 const noDealsMessage = document.getElementById('no-deals-message');
// Hide "no deals" message if it's shown
 if (noDealsMessage.style.display !== 'none') {
 noDealsMessage.style.display = 'none';
 }
// Create subscription element
 const subElement = document.createElement('div');
 subElement.className = 'deal-card cursor-pointer mb-3';
 subElement.setAttribute('data-sub-ref', subRef);
 subElement.setAttribute('data-type', 'subscription');
subElement.innerHTML = `
 <div class="flex justify-between items-center">
 <div>
 <h4 class="font-medium">${planName} Subscription</h4>
 <div class="flex items-center text-xs text-gray-500 mt-1">
 <span>${subRef}</span>
 <span class="mx-2">•</span>
 <span>${planTerm}</span>
 <span class="mx-2">•</span>
 <span class="text-green-600">${planAPY} APY</span>
 </div>
 </div>
 <span class="text-xs px-2 py-1 rounded bg-blue-100 text-blue-800">Subscription</span>
 </div>
 `;
// Add click event to show details
 subElement.addEventListener('click', function() {
 showSubscriptionDetails(subRef, planName, planTerm, planAPY);
 document.getElementById('deal-details').classList.add('hidden');
 });
// Add to container
 dealsContainer.appendChild(subElement);
 }
// Function to show deal details
 function showDealDetails(dealRef, userRef, title, type, progress, terms, vehicleType) {
 const detailSection = document.getElementById('deal-details');
 const detailTitle = document.getElementById('detail-title');
 const detailContent = document.getElementById('detail-content');
// Set details
 detailTitle.textContent = title;
 detailContent.innerHTML = `
 <p><strong>Deal Ref:</strong> ${dealRef}</p>
 <p><strong>Your Ref:</strong> ${userRef}</p>
 <p><strong>Type:</strong> ${type}</p>
 <p><strong>Progress:</strong> ${progress}</p>
 <p><strong>Term:</strong> ${terms[0].textContent}</p>
 <p><strong>Interest Rate:</strong> ${terms[1].textContent}</p>
 <p><strong>Vehicle Type:</strong> ${vehicleType}</p>
 <p><strong>LTV Ratio:</strong> ${terms[3].textContent}</p>
 `;
// Set data attributes on buttons
 document.getElementById('add-subparticipation').setAttribute('data-deal-ref', dealRef);
 document.getElementById('add-subparticipation').setAttribute('data-user-ref', userRef);
 document.getElementById('remove-deal').setAttribute('data-deal-ref', dealRef);
// Show details section
 detailSection.classList.remove('hidden');
 }
// Function to show subscription details
 function showSubscriptionDetails(subRef, planName, planTerm, planAPY) {
 const subSection = document.getElementById('subscription-details');
 const subTitle = document.getElementById('subscription-title');
 const subContent = document.getElementById('subscription-content');
// Set details
 subTitle.textContent = `${planName} Subscription`;
 subContent.innerHTML = `
 <p><strong>Subscription Ref:</strong> ${subRef}</p>
 <p><strong>Plan:</strong> ${planName}</p>
 <p><strong>Term:</strong> ${planTerm}</p>
 <p><strong>APY:</strong> ${planAPY}</p>
 <p><strong>Status:</strong> Active</p>
 <p><strong>Next Payment:</strong> ${getNextPaymentDate(planTerm)}</p>
 <p><strong>Auto-Renew:</strong> Enabled</p>
 `;
// Set data attributes on buttons
 document.getElementById('modify-subscription').setAttribute('data-sub-ref', subRef);
 document.getElementById('cancel-subscription').setAttribute('data-sub-ref', subRef);
// Show subscription section
 subSection.classList.remove('hidden');
 }
// Helper function to calculate next payment date
 function getNextPaymentDate(planTerm) {
 const today = new Date();
 let nextDate = new Date();
if (planTerm.includes('Weekly')) {
 nextDate.setDate(today.getDate() + 7);
 } else if (planTerm.includes('Monthly')) {
 nextDate.setMonth(today.getMonth() + 1);
 } else if (planTerm.includes('Quarterly')) {
 nextDate.setMonth(today.getMonth() + 3);
 } else if (planTerm.includes('Semi-Annual')) {
 nextDate.setMonth(today.getMonth() + 6);
 } else if (planTerm.includes('Annual')) {
 nextDate.setFullYear(today.getFullYear() + 1);
 }
return nextDate.toLocaleDateString();
 }
// Remove deal functionality
 document.getElementById('remove-deal').addEventListener('click', function() {
 const dealRef = this.getAttribute('data-deal-ref');
 const dealElement = document.querySelector(`.deal-card[data-deal-ref="${dealRef}"]`);
if (dealElement) {
 dealElement.remove();
 document.getElementById('deal-details').classList.add('hidden');
// Show "no deals" message if no deals left
 if (document.querySelectorAll('.deal-card').length === 0) {
 document.getElementById('no-deals-message').style.display = 'block';
 }
 }
 });
// Cancel subscription functionality
 document.getElementById('cancel-subscription').addEventListener('click', function() {
 const subRef = this.getAttribute('data-sub-ref');
 const subElement = document.querySelector(`.deal-card[data-sub-ref="${subRef}"]`);
if (subElement) {
 subElement.remove();
 document.getElementById('subscription-details').classList.add('hidden');
// Show "no deals" message if no deals left
 if (document.querySelectorAll('.deal-card').length === 0) {
 document.getElementById('no-deals-message').style.display = 'block';
 }
alert(`Subscription ${subRef} has been cancelled.`);
 }
 });
// Add sub-participation from floating window
 document.getElementById('add-subparticipation').addEventListener('click', function() {
 const dealRef = this.getAttribute('data-deal-ref');
 const userRef = this.getAttribute('data-user-ref');
// Scroll to sub-participation section
 document.querySelector('#subparticipation-form').scrollIntoView({
 behavior: 'smooth'
 });
// Fill in the form
 document.getElementById('user-ref').value = userRef;
 document.getElementById('deal-ref').value = dealRef;
// Close floating window
 floatingWindow.style.display = 'none';
 floatingBtn.style.display = 'flex';
 });
// Modify subscription from floating window
 document.getElementById('modify-subscription').addEventListener('click', function() {
 const subRef = this.getAttribute('data-sub-ref');
// Scroll to subscription section
 document.querySelector('#subscriptions').scrollIntoView({
 behavior: 'smooth'
 });
// Close floating window
 floatingWindow.style.display = 'none';
 floatingBtn.style.display = 'flex';
alert(`You can modify your subscription ${subRef} by choosing a new plan below.`);
 });
// Search functionality
 document.getElementById('search-btn').addEventListener('click', searchDeals);
 document.getElementById('search-ref').addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
 searchDeals();
 }
 });
function searchDeals() {
 const searchTerm = document.getElementById('search-ref').value.toLowerCase();
 const deals = document.querySelectorAll('.deal-card');
 let found = false;
deals.forEach(deal => {
 const dealRef = deal.getAttribute('data-deal-ref') ? deal.getAttribute('data-deal-ref').toLowerCase() : '';
 const userRef = deal.getAttribute('data-user-ref') ? deal.getAttribute('data-user-ref').toLowerCase() : '';
 const subRef = deal.getAttribute('data-sub-ref') ? deal.getAttribute('data-sub-ref').toLowerCase() : '';
 const title = deal.querySelector('h4').textContent.toLowerCase();
if (dealRef.includes(searchTerm) || userRef.includes(searchTerm) || subRef.includes(searchTerm) || title.includes(searchTerm)) {
 deal.style.display = 'block';
 found = true;
 } else {
 deal.style.display = 'none';
 }
 });
// Show message if no results
 if (!found) {
 document.getElementById('no-deals-message').style.display = 'block';
 document.getElementById('no-deals-message').innerHTML = `
 <i class="fas fa-search text-3xl mb-2"></i>
 <p>No deals or subscriptions found matching "${searchTerm}"</p>
 `;
 } else {
 document.getElementById('no-deals-message').style.display = 'none';
 }
// Hide details if shown
 document.getElementById('deal-details').classList.add('hidden');
 document.getElementById('subscription-details').classList.add('hidden');
 }
// Sub-participation form submission
 document.getElementById('subparticipation-form').addEventListener('submit', function(e) {
 e.preventDefault();
const userRef = document.getElementById('user-ref').value;
 const dealRef = document.getElementById('deal-ref').value;
 const type = document.getElementById('participation-type').value;
 const cryptoType = document.getElementById('crypto-type').value;
if (!userRef || !dealRef || !type || !cryptoType) {
 alert('Please fill in all fields');
 return;
 }
alert(`Sub-participation request submitted for deal ${dealRef} (${userRef}). Type: ${type}. Settlement in ${cryptoType}.`);
 this.reset();
 });
// Custom subscription form submission
 document.getElementById('custom-subscription-form').addEventListener('submit', function(e) {
 e.preventDefault();
const amount = document.getElementById('subscription-amount').value;
 const term = document.getElementById('subscription-term').value;
 const crypto = document.getElementById('subscription-crypto').value;
 const autoRenew = document.getElementById('subscription-auto').value;
if (!amount || !term || !crypto) {
 alert('Please fill in all required fields');
 return;
 }
alert(`Custom subscription request submitted for $${amount} with ${term} term. Settlement in ${crypto}. Auto-renew: ${autoRenew}.`);
 this.reset();
 });
// Sample data for demo purposes
 window.addEventListener('DOMContentLoaded', () => {
 // Add some sample deals to floating window for demo
 setTimeout(() => {
 addDealToWindow(
 'CD-EV-2023-1001',
'UR-456789',
'Tesla Model 3 Fleet Loan',
'Club Deal',
'Target: $2,500,000 | Raised: $2,000,000 (80%)',
[
 { textContent: '36 months' },
 { textContent: '9.25% fixed' },
 { textContent: '15 Tesla Model 3' },
 { textContent: '75%' }
 ],
 '15 Tesla Model 3'
 );
addSubscriptionToWindow(
 'SUB-789123',
 'Quarterly',
 '90-day cycles',
 '7.5%'
 );
 }, 1000);
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/evsyndi-vbeta1-00" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>