mortgsyndi-vbeta1-03 / index.html
privateuserh's picture
Update index.html
a82c8ab verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MORTG - Cryptocurrency Mortgage 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, #4f46e5 0%, #7c3aed 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, #4f46e5 0%, #7c3aed 100%);
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
cursor: pointer;
z-index: 999;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.tab-button.active {
border-bottom: 3px solid #4f46e5;
color: #4f46e5;
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, #10b981 0%, #34d399 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);
}
/* Fractal Bitcoin symbol styling */
.fb-symbol {
font-family: Arial, sans-serif;
font-weight: bold;
position: relative;
}
.fb-symbol::before {
content: "F";
color: #f7931a;
}
.fb-symbol::after {
content: "B";
color: #f7931a;
position: absolute;
left: 0.5em;
transform: scaleX(-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;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="bg-gradient-to-r from-indigo-600 to-purple-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-home-alt text-2xl"></i>
<h1 class="text-2xl font-bold">Mortgage S.I. (MORTG)</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#about" class="hover:text-indigo-200 transition">About</a>
<a href="#how-it-works" class="hover:text-indigo-200 transition">How It Works</a>
<a href="#current-deals" class="hover:text-indigo-200 transition">Current Deals</a>
<a href="#terms" class="hover:text-indigo-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">Cryptocurrency Mortgage Syndication</h2>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Participate in Club Deal and Best-Efforts mortgage syndications using digital assets</p>
<div class="mt-8 flex justify-center space-x-4">
<button class="bg-white text-indigo-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-indigo-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 Mortgage Syndication</h2>
<p class="text-gray-600 max-w-3xl mx-auto">Mortgage S.I. combines traditional mortgage 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 Mortgage S.I. 2023</span>
<span class="legal-badge">Mortgage loan origination NRS 645B.0104</span>
<span class="legal-badge">Residential mortgage loans NRS 645B.016</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-indigo-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 a mortgage with pre-arranged commitments.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md">
<div class="text-indigo-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 mortgage 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-indigo-600 text-3xl mb-4">
<i class="fab fa-bitcoin"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Crypto Integration</h3>
<p class="text-gray-600">Participate using BTC, BCH, XLM, and Fractal Bitcoin (FB) with instant settlement and transparent tracking.</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 Syndication Process</h2>
<p class="text-gray-600 max-w-3xl mx-auto">Our streamlined process makes participating in mortgage 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-indigo-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 mortgage opportunities with thorough due diligence.</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 mortgage 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, BCH, XLM, or FB through our secure platform.</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, divide contracts are issued to ensure timely, payments. The mortgage is funded and the loan is originated. For divide contract info visit unspent.app</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.</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 California Syndication Opportunities</h2>
<p class="text-gray-600 max-w-3xl mx-auto">Browse our available California mortgage syndication deals and participate with cryptocurrency. Status: Data not live and for educational purposes only.</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">Commercial Property - Los Angeles</h3>
<p class="text-gray-500 text-sm">Ref #: CD-CA-2023-0452</p>
</div>
<span class="bg-indigo-100 text-indigo-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-green-100 text-green-800"><i class="fas fa-dollar-sign mr-1"></i> BCH</span>
<span class="crypto-badge bg-blue-100 text-blue-800"><i class="fas fa-star mr-1"></i> XLM</span>
<span class="crypto-badge bg-purple-100 text-purple-800"><span class="fb-symbol mr-1"></span> FB</span>
</div>
<div class="flex justify-between text-sm mb-1">
<span>Target: $5,000,000</span>
<span>Raised: $3,750,000 (75%)</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 75%"></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">5 years</p>
</div>
<div>
<p class="text-gray-500 text-sm">Interest Rate</p>
<p class="font-medium">7.25% fixed</p>
</div>
<div>
<p class="text-gray-500 text-sm">Location</p>
<p class="font-medium">Los Angeles, CA</p>
</div>
<div>
<p class="text-gray-500 text-sm">Property Type</p>
<p class="font-medium">Office Building</p>
</div>
</div>
<div class="flex justify-between">
<button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Details</button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded text-sm font-medium participate-btn" data-deal="CD-CA-2023-0452">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">Multifamily - San Francisco</h3>
<p class="text-gray-500 text-sm">Ref #: CD-CA-2023-0453</p>
</div>
<span class="bg-indigo-100 text-indigo-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-green-100 text-green-800"><i class="fas fa-dollar-sign mr-1"></i> BCH</span>
<span class="crypto-badge bg-purple-100 text-purple-800"><span class="fb-symbol mr-1"></span> FB</span>
</div>
<div class="flex justify-between text-sm mb-1">
<span>Target: $3,200,000</span>
<span>Raised: $2,880,000 (90%)</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 90%"></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">3 years</p>
</div>
<div>
<p class="text-gray-500 text-sm">Interest Rate</p>
<p class="font-medium">6.75% fixed</p>
</div>
<div>
<p class="text-gray-500 text-sm">Location</p>
<p class="font-medium">San Francisco, CA</p>
</div>
<div>
<p class="text-gray-500 text-sm">Property Type</p>
<p class="font-medium">Apartment Complex</p>
</div>
</div>
<div class="flex justify-between">
<button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Details</button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded text-sm font-medium participate-btn" data-deal="CD-CA-2023-0453">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">Retail Center - San Diego</h3>
<p class="text-gray-500 text-sm">Ref #: BE-CA-2023-0789</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="fas fa-star mr-1"></i> XLM</span>
<span class="crypto-badge bg-purple-100 text-purple-800"><span class="fb-symbol mr-1"></span> FB</span>
</div>
<div class="flex justify-between text-sm mb-1">
<span>Target: $8,500,000</span>
<span>Raised: $5,950,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">7 years</p>
</div>
<div>
<p class="text-gray-500 text-sm">Interest Rate</p>
<p class="font-medium">8.25% fixed</p>
</div>
<div>
<p class="text-gray-500 text-sm">Location</p>
<p class="font-medium">San Diego, CA</p>
</div>
<div>
<p class="text-gray-500 text-sm">Property Type</p>
<p class="font-medium">Shopping Center</p>
</div>
</div>
<div class="flex justify-between">
<button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Details</button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded text-sm font-medium participate-btn" data-deal="BE-CA-2023-0789">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">Industrial Warehouse - Sacramento</h3>
<p class="text-gray-500 text-sm">Ref #: BE-CA-2023-0790</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-green-100 text-green-800"><i class="fas fa-dollar-sign mr-1"></i> BCH</span>
<span class="crypto-badge bg-blue-100 text-blue-800"><i class="fas fa-star mr-1"></i> XLM</span>
</div>
<div class="flex justify-between text-sm mb-1">
<span>Target: $6,000,000</span>
<span>Raised: $3,600,000 (60%)</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 60%"></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">5 years</p>
</div>
<div>
<p class="text-gray-500 text-sm">Interest Rate</p>
<p class="font-medium">7.5% fixed</p>
</div>
<div>
<p class="text-gray-500 text-sm">Location</p>
<p class="font-medium">Sacramento, CA</p>
</div>
<div>
<p class="text-gray-500 text-sm">Property Type</p>
<p class="font-medium">Distribution Center</p>
</div>
</div>
<div class="flex justify-between">
<button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Details</button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded text-sm font-medium participate-btn" data-deal="BE-CA-2023-0790">Participate</button>
</div>
</div>
</div>
</div>
</div>
</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 mortgage syndication deals.</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-indigo-600">General Terms</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>Minimum participation amount: $25,000 or crypto equivalent (BTC, BCH, XLM, FB)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>Funds are locked for the duration of the loan term</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>Interest payments distributed monthly in cryptocurrency (BTC, BCH, XLM, FB) or fiat</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-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-indigo-600">Crypto-Specific Terms</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>Accepted cryptocurrencies: Bitcoin (BTC), Bitcoin Cash (BCH), Stellar (XLM), and Fractal Bitcoin (FB)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>Real-time conversion rates applied at time of participation</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>FB holders receive 0.25% lower interest rates on participation</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>XLM transactions settle within 3-5 seconds with minimal fees</span>
</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-indigo-600">Legal Compliance</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>Syndicate by Mortgage S.I. 2023</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>Mortgage loan origination NRS 645B.0104</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
<span>Residential mortgage loans NRS 645B.016</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-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-indigo-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 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-indigo-300 transition">
<div class="text-indigo-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-indigo-300 transition">
<div class="text-indigo-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-indigo-300 transition">
<div class="text-indigo-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-indigo-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-indigo-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-indigo-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-indigo-500" id="crypto-type">
<option value="">Select currency</option>
<option value="btc">Bitcoin (BTC)</option>
<option value="bch">Bitcoin Cash (BCH)</option>
<option value="xlm">Stellar (XLM)</option>
<option value="fb">Fractal Bitcoin (FB)</option>
<option value="usd">USD</option>
</select>
</div>
<div class="text-center">
<button type="submit" class="bg-indigo-600 hover:bg-indigo-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/MortgageSIBot" 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</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-indigo-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-indigo-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 saved 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-indigo-600 hover:text-indigo-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>
</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">MORTG</h3>
<p class="text-gray-400">Innovative cryptocurrency mortgage 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-green-500 flex items-center justify-center">
<span class="text-white font-bold">BCH</span>
</div>
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
<span class="text-white font-bold">XLM</span>
</div>
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center">
<span class="fb-symbol text-white"></span>
</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">How It Works</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/MortgageSIBot" 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 Mortgage S.I. (SaaS) All rights reserved.</p>
<p class="mt-2 text-sm">Syndicate by Mortgage S.I. 2023 | Mortgage loan origination NRS 645B.0104</p>
<p class="mt-1 text-sm">Residential mortgage loans NRS 645B.016 | SAFE Act 12 U.S.C. §§ 5101 et seq.</p>
<p class="mt-1 text-sm">Cal. Fin. Code § 22050.5 | Accepted cryptocurrencies: BTC, BCH, XLM, FB</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 dealLocation = 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, dealLocation);
// 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}.`);
});
});
// Function to add deal to floating window
function addDealToWindow(dealRef, userRef, title, type, progress, terms, location) {
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.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>
</div>
</div>
<span class="text-xs px-2 py-1 rounded ${type === 'Club Deal' ? 'bg-indigo-100 text-indigo-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, location);
});
// Add to container
dealsContainer.appendChild(dealElement);
}
// Function to show deal details
function showDealDetails(dealRef, userRef, title, type, progress, terms, location) {
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>Location:</strong> ${location}</p>
<p><strong>Property Type:</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');
}
// 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';
}
}
});
// 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';
});
// 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').toLowerCase();
const userRef = deal.getAttribute('data-user-ref').toLowerCase();
if (dealRef.includes(searchTerm) || userRef.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 found matching "${searchTerm}"</p>
`;
} else {
document.getElementById('no-deals-message').style.display = 'none';
}
// Hide details if shown
document.getElementById('deal-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();
});
// Sample data for demo purposes
window.addEventListener('DOMContentLoaded', () => {
// Add some sample deals to floating window for demo
setTimeout(() => {
addDealToWindow(
'CD-CA-2023-0452',
'UR-456789',
'Commercial Property - Los Angeles',
'Club Deal',
'Target: $5,000,000 | Raised: $3,750,000 (75%)',
[
{ textContent: '5 years' },
{ textContent: '7.25% fixed' },
{ textContent: 'Los Angeles, CA' },
{ textContent: 'Office Building' }
],
'Los Angeles, CA'
);
addDealToWindow(
'BE-CA-2023-0789',
'UR-123456',
'Retail Center - San Diego',
'Best-Efforts',
'Target: $8,500,000 | Raised: $5,950,000 (70%)',
[
{ textContent: '7 years' },
{ textContent: '8.25% fixed' },
{ textContent: 'San Diego, CA' },
{ textContent: 'Shopping Center' }
],
'San Diego, CA'
);
}, 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/mortgsyndi-vbeta1-03" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>