Hugging Face's logo

Spaces:
privateuserh
/
ccremic-vbeta1-05
Running

App Files Community
ccremic-vbeta1-05 / index.html
privateuserh's picture
privateuserh
Update index.html
70b3c3c verified
raw
history blame contribute delete
59 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>REMIC | Blockchain Mortgage Solutions</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>
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}
.hero-pattern {
background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.process-step::before {
content: '';
position: absolute;
top: 0;
left: 24px;
height: 100%;
width: 2px;
background: #3b82f6;
}
.process-step:last-child::before {
display: none;
}
.crypto-bg {
background-image: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop');
background-size: cover;
background-position: center;
}
.floating-button {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 50;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.token-calculator {
position: fixed;
bottom: 6rem;
right: 2rem;
z-index: 50;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transform-origin: bottom right;
transition: all 0.3s ease;
max-height: 80vh;
overflow-y: auto;
}
.token-calculator.hidden {
transform: scale(0);
opacity: 0;
pointer-events: none;
}
.remic-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 1.5rem;
}
.readonly-input {
background-color: #f3f4f6;
cursor: not-allowed;
}
.seller-input {
background-color: #eff6ff;
border-color: #3b82f6;
}
.tranche-a-bg {
background-color: rgba(59, 130, 246, 0.1);
border-left: 4px solid #3b82f6;
}
.tranche-b-bg {
background-color: rgba(16, 185, 129, 0.1);
border-left: 4px solid #10b981;
}
.tranche-c-bg {
background-color: rgba(239, 68, 68, 0.1);
border-left: 4px solid #ef4444;
}
.tranche-tab {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.2s;
}
.tranche-tab.active {
background-color: rgba(59, 130, 246, 0.1);
color: #3b82f6;
font-weight: 600;
}
.tranche-content {
display: none;
}
.tranche-content.active {
display: block;
}
.tranche-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.badge-a {
background-color: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.badge-b {
background-color: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.badge-c {
background-color: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.submit-success {
animation: fadeInOut 3s ease-in-out;
opacity: 0;
}
@keyframes fadeInOut {
0% { opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Header Section -->
<header class="gradient-bg 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-4">
<div class="remic-icon">REMIC</div>
<div>
<h1 class="text-2xl font-bold">Century City REMIC</h1>
<p class="text-blue-200">Blockchain Mortgage Solutions</p>
</div>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="hover:text-blue-300 transition">Home</a>
<a href="#" class="hover:text-blue-300 transition">Invest</a>
<a href="#" class="hover:text-blue-300 transition">About</a>
<a href="#" class="hover:text-blue-300 transition">Contact</a>
</nav>
<button class="md:hidden text-white">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="gradient-bg hero-pattern text-white py-20">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Revolutionizing Real Estate Investment</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Mortgage solutions powered by blockchain technology and REMIC compliance.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition">Invest Now</button>
<button class="border border-white text-white hover:bg-blue-700 px-6 py-3 rounded-lg font-medium transition">Learn More</button>
</div>
</div>
</section>
<!-- Trust Details Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Century City REMIC Trust</h2>
<div class="w-24 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-md card-hover transition">
<div class="text-blue-600 mb-4">
<i class="fas fa-chart-pie text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Trust & REMIC Structure</h3>
<p class="text-gray-600">200 authorized shares at $1.00 par value each. California Code, Corporations Code - CORP § 205</p><br>
<p class="text-gray-600">Regular Interest: Investors receive fixed, predictable cash flow from the interest payments on the underlying mortgages held by the REMIC.</p><br>
<p class="text-gray-600">No Residual Interest: There is no secondary class of ownership with claims on leftover cash flow after paying out regular interest obligations.</p>
<p class="text-gray-600"></p><br>
<p class="text-gray-600"><b>Tranche Breakdown:</b></p><br>
<p class="text-gray-600">Tranche A (Senior) Risk Profile: Lowest risk tranche.</p><br>
<p class="text-gray-600">Tranche B (Mezzanine) Risk Profile: Mod. risk tranche.</p><br>
<p class="text-gray-600">Tranche C (B-Piece) Risk Profile: Highest risk tranche.</p><br>
</div>
<div class="bg-white p-6 rounded-lg shadow-md card-hover transition">
<div class="text-blue-600 mb-4">
<i class="fas fa-hand-holding-usd text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Annuity Payments</h3>
<p class="text-gray-600">Tokens 3% of designated annuity income.</p>
<p class="text-gray-600">Annuity paying 69458022 (sat), every 1011 blocks, after a 1200 (sat) executor allowance. LP trading pools support.</p><br>
<p class="text-gray-600">LAMREIT</p>
<p class="text-gray-600">https://bit.ly/WeeklyAnnuity</p><br>
<p class="text-gray-600">Tranche A 100% of designated annuity income.</p>
<p class="text-gray-600">Tranche A</p>
<p class="text-gray-600">Link</p><br>
<p class="text-gray-600">Tranche B 100% of designated annuity income.</p>
<p class="text-gray-600">Tranche B</p>
<p class="text-gray-600">Link</p><br>
<p class="text-gray-600">Tranche C 100% of designated annuity income.</p>
<p class="text-gray-600">Tranche C</p>
<p class="text-gray-600">Link</p><br>
<p class="text-gray-600"><b>Divide Contract</b></p><br>
<p class="text-gray-600">Requirement: The divide contract splits inputs across a predefined set of output destinations, ensuring automatic and timely payouts.</p><br>
</div>
<div class="bg-white p-6 rounded-lg shadow-md card-hover transition">
<div class="text-blue-600 mb-4">
<i class="fas fa-exchange-alt text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">LP Trading Pools</h3>
<p class="text-gray-600">LAMREIT 1.000.000 Tokens outstanding.</p><br>
<p class="text-gray-600">Tranche A Supply 0.3</p>
<p class="text-gray-600">Tranche B Supply 20.000.000</p>
<p class="text-gray-600">Tranche C Supply 10.000.000</p>
</div>
</div>
</div>
</section>
<!-- Tranche Pools Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Tranche Pool Information</h2>
<div class="w-24 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="grid md:grid-cols-3 gap-6">
<!-- Tranche A -->
<div class="tranche-a-bg p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-shield-alt text-blue-600"></i>
</div>
<h3 class="text-xl font-semibold">Tranche A (Senior)</h3>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600">Risk Level:</span>
<span class="font-medium">Low</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Current Supply:</span>
<span id="tranche-a-supply" class="font-medium">0.3 Tokens</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Yield:</span>
<span class="font-medium text-blue-600">4.5% APY</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Liquidity:</span>
<span id="tranche-a-liquidity" class="font-medium">$1.2M</span>
</div>
<div class="pt-3 mt-3 border-t border-gray-200">
<button class="tranche-calculator-btn text-blue-600 hover:underline flex items-center" data-tranche="a">
<i class="fas fa-calculator mr-2"></i>
Calculate Investment
</button>
</div>
</div>
</div>
<!-- Tranche B -->
<div class="tranche-b-bg p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
<i class="fas fa-balance-scale text-green-600"></i>
</div>
<h3 class="text-xl font-semibold">Tranche B (Mezzanine)</h3>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600">Risk Level:</span>
<span class="font-medium">Medium</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Current Supply:</span>
<span id="tranche-b-supply" class="font-medium">20M Tokens</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Yield:</span>
<span class="font-medium text-green-600">7.2% APY</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Liquidity:</span>
<span id="tranche-b-liquidity" class="font-medium">$8.5M</span>
</div>
<div class="pt-3 mt-3 border-t border-gray-200">
<button class="tranche-calculator-btn text-green-600 hover:underline flex items-center" data-tranche="b">
<i class="fas fa-calculator mr-2"></i>
Calculate Investment
</button>
</div>
</div>
</div>
<!-- Tranche C -->
<div class="tranche-c-bg p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
<i class="fas fa-arrow-up text-red-600"></i>
</div>
<h3 class="text-xl font-semibold">Tranche C (B-Piece)</h3>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600">Risk Level:</span>
<span class="font-medium">High</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Current Supply:</span>
<span id="tranche-c-supply" class="font-medium">10M Tokens</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Yield:</span>
<span class="font-medium text-red-600">11.0% APY</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Liquidity:</span>
<span id="tranche-c-liquidity" class="font-medium">$3.8M</span>
</div>
<div class="pt-3 mt-3 border-t border-gray-200">
<button class="tranche-calculator-btn text-red-600 hover:underline flex items-center" data-tranche="c">
<i class="fas fa-calculator mr-2"></i>
Calculate Investment
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Token Details Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Token Information</h2>
<div class="w-24 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="max-w-4xl mx-auto bg-white rounded-lg p-6 shadow-md">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4 text-blue-600">Token Distribution</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-gray-600">Tranche A</span>
<span id="dist-a" class="font-medium">0.3 (<1%)</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 1%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-gray-600">Tranche B</span>
<span id="dist-b" class="font-medium">20M (66.67%)</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-green-500 h-2.5 rounded-full" style="width: 66.67%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-gray-600">Tranche C</span>
<span id="dist-c" class="font-medium">10M (33.33%)</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-red-500 h-2.5 rounded-full" style="width: 33.33%"></div>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4 text-blue-600">Blockchain Details</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-link text-blue-500 mt-1 mr-2"></i>
<span>Network: <strong>Bitcoin Cash</strong></span>
</li>
<li class="flex items-start">
<i class="fas fa-search text-blue-500 mt-1 mr-2"></i>
<span>Explorer: <a href="https://blockchair.com/bitcoin-cash/transaction/8874186362dd0510af5e26c4321c2a335f7089cfc1a70fcd9e4efb63a49d2a76" class="text-blue-600 hover:underline" target="_blank">View Transaction</a></span>
</li>
<li class="flex items-start">
<i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
<span>Token Explorer: <a href="https://tokenexplorer.cash/?tokenId=841a9e7522200b5fdd7023c7c71d17b93579283e28a362718cbcb551aea36635" class="text-blue-600 hover:underline" target="_blank">View Token</a></span>
</li>
</ul>
</div>
</div>
<div class="mt-8 pt-6 border-t border-gray-200">
<h3 class="text-xl font-semibold mb-4 text-blue-600">LP Trading Pool Agreement</h3>
<div class="bg-gray-50 p-4 rounded border border-gray-200">
<p class="text-gray-700 mb-4">This Agreement establishes LP trading pools on Cauldron DEX to provide liquidity for LAMREIT tokens, supported by 3% of Century City REMIC's designated annuity income.</p>
<div class="text-sm text-gray-500">
<p><strong>Effective Date:</strong> June 11, 2024</p>
<p><strong>Term:</strong> 2 years</p>
<p><strong>Parties:</strong> Century City REMIC & Los Angeles Mortgage REIT</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Floating Token Calculator Button -->
<button id="token-calculator-btn" class="floating-button flex items-center justify-center h-14 w-14 rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="fas fa-coins text-xl"></i>
</button>
<!-- Token Calculator Panel -->
<div id="token-calculator" class="token-calculator hidden w-80 bg-white rounded-lg overflow-hidden border border-gray-200">
<div class="bg-blue-700 px-4 py-3">
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium text-white">REMIC Token Offer</h3>
<button id="close-calculator" class="text-blue-100 hover:text-white focus:outline-none">
<i class="fas fa-times"></i>
</button>
</div>
<p class="text-xs text-blue-200 mt-1">For Mortgage Seller</p>
</div>
<div class="p-4">
<!-- Tab Navigation -->
<div class="flex space-x-2 mb-4 border-b border-gray-200 pb-2">
<button class="tranche-tab active" data-tranche="a">Tranche A</button>
<button class="tranche-tab" data-tranche="b">Tranche B</button>
<button class="tranche-tab" data-tranche="c">Tranche C</button>
</div>
<!-- Success Message -->
<div id="success-message" class="submit-success hidden mb-4 p-3 bg-green-100 text-green-700 rounded text-sm">
<i class="fas fa-check-circle mr-2"></i>
<span>Your investment has been submitted successfully!</span>
</div>
<!-- Tranche A Calculator -->
<div id="tranche-a-calc" class="tranche-content active">
<div class="mb-4">
<label for="assets-a" class="block text-sm font-medium text-gray-700 mb-1">Pool Assets ($)</label>
<input type="number" id="assets-a" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border readonly-input" value="1200000" readonly>
</div>
<div class="mb-4">
<label for="tokens-a" class="block text-sm font-medium text-gray-700 mb-1">Tokens Outstanding</label>
<input type="number" id="tokens-a" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border readonly-input" value="0.3" readonly>
</div>
<div class="mb-4">
<label for="liabilities-a" class="block text-sm font-medium text-gray-700 mb-1">Your Liabilities ($)</label>
<input type="number" id="liabilities-a" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border seller-input" placeholder="200,000" value="200000">
</div>
<div class="mb-4">
<label for="contribution-a" class="block text-sm font-medium text-gray-700 mb-1">Your Contribution ($)</label>
<input type="number" id="contribution-a" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border seller-input" placeholder="50,000" value="50000">
</div>
<div class="mt-6 p-4 bg-blue-50 rounded-md">
<h4 class="text-sm font-medium text-blue-700 mb-3 flex items-center">
<span class="tranche-badge badge-a mr-2">Tranche A</span>
Offer Summary
</h4>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-600">Token NAV:</span>
<span id="token-price-a" class="text-sm font-semibold text-blue-600">$3.33</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-600">Your Allocation:</span>
<span id="token-allocation-a" class="text-sm font-semibold text-blue-600">15,015</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-600">% of Pool:</span>
<span id="pool-percentage-a" class="text-sm font-semibold text-blue-600">5.00%</span>
</div>
<div class="flex justify-between">
<span class="text-sm font-medium text-gray-600">% of REMIC:</span>
<span id="remic-percentage-a" class="text-sm font-semibold text-blue-600">0.25%</span>
</div>
</div>
<div class="mt-4 flex space-x-2">
<button class="calculate-btn flex-1 justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-tranche="a">
Calculate
</button>
<button class="submit-offer flex-1 justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-tranche="a">
Submit
</button>
</div>
</div>
<!-- Tranche B Calculator -->
<div id="tranche-b-calc" class="tranche-content">
<div class="mb-4">
<label for="assets-b" class="block text-sm font-medium text-gray-700 mb-1">Pool Assets ($)</label>
<input type="number" id="assets-b" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm p-2 border readonly-input" value="8500000" readonly>
</div>
<div class="mb-4">
<label for="tokens-b" class="block text-sm font-medium text-gray-700 mb-1">Tokens Outstanding</label>
<input type="number" id="tokens-b" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm p-2 border readonly-input" value="20000000" readonly>
</div>
<div class="mb-4">
<label for="liabilities-b" class="block text-sm font-medium text-gray-700 mb-1">Your Liabilities ($)</label>
<input type="number" id="liabilities-b" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm p-2 border seller-input" placeholder="200,000" value="200000">
</div>
<div class="mb-4">
<label for="contribution-b" class="block text-sm font-medium text-gray-700 mb-1">Your Contribution ($)</label>
<input type="number" id="contribution-b" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 sm:text-sm p-2 border seller-input" placeholder="50,000" value="50000">
</div>
<div class="mt-6 p-4 bg-green-50 rounded-md">
<h4 class="text-sm font-medium text-green-700 mb-3 flex items-center">
<span class="tranche-badge badge-b mr-2">Tranche B</span>
Offer Summary
</h4>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-600">Token NAV:</span>
<span id="token-price-b" class="text-sm font-semibold text-green-600">$0.42</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-600">Your Allocation:</span>
<span id="token-allocation-b" class="text-sm font-semibold text-green-600">119,048</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-600">% of Pool:</span>
<span id="pool-percentage-b" class="text-sm font-semibold text-green-600">0.60%</span>
</div>
<div class="flex justify-between">
<span class="text-sm font-medium text-gray-600">% of REMIC:</span>
<span id="remic-percentage-b" class="text-sm font-semibold text-green-600">0.25%</span>
</div>
</div>
<div class="mt-4 flex space-x-2">
<button class="calculate-btn flex-1 justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" data-tranche="b">
Calculate
</button>
<button class="submit-offer flex-1 justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" data-tranche="b">
Submit
</button>
</div>
</div>
<!-- Tranche C Calculator -->
<div id="tranche-c-calc" class="tranche-content">
<div class="mb-4">
<label for="assets-c" class="block text-sm font-medium text-gray-700 mb-1">Pool Assets ($)</label>
<input type="number" id="assets-c" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm p-2 border readonly-input" value="3800000" readonly>
</div>
<div class="mb-4">
<label for="tokens-c" class="block text-sm font-medium text-gray-700 mb-1">Tokens Outstanding</label>
<input type="number" id="tokens-c" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm p-2 border readonly-input" value="10000000" readonly>
</div>
<div class="mb-4">
<label for="liabilities-c" class="block text-sm font-medium text-gray-700 mb-1">Your Liabilities ($)</label>
<input type="number" id="liabilities-c" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm p-2 border seller-input" placeholder="200,000" value="200000">
</div>
<div class="mb-4">
<label for="contribution-c" class="block text-sm font-medium text-gray-700 mb-1">Your Contribution ($)</label>
<input type="number" id="contribution-c" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm p-2 border seller-input" placeholder="50,000" value="50000">
</div>
<div class="mt-6 p-4 bg-red-50 rounded-md">
<h4 class="text-sm font-medium text-red-700 mb-3 flex items-center">
<span class="tranche-badge badge-c mr-2">Tranche C</span>
Offer Summary
</h4>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-600">Token NAV:</span>
<span id="token-price-c" class="text-sm font-semibold text-red-600">$0.38</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-600">Your Allocation:</span>
<span id="token-allocation-c" class="text-sm font-semibold text-red-600">131,579</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-600">% of Pool:</span>
<span id="pool-percentage-c" class="text-sm font-semibold text-red-600">1.32%</span>
</div>
<div class="flex justify-between">
<span class="text-sm font-medium text-gray-600">% of REMIC:</span>
<span id="remic-percentage-c" class="text-sm font-semibold text-red-600">0.25%</span>
</div>
</div>
<div class="mt-4 flex space-x-2">
<button class="calculate-btn flex-1 justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" data-tranche="c">
Calculate
</button>
<button class="submit-offer flex-1 justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" data-tranche="c">
Submit
</button>
</div>
</div>
</div>
</div>
<script>
poolPercentage = (tokenAllocation / tokens) * 100;
remicPercentage = (contribution / (assets * 1.2)) * 100;
break;
case 'c':
// B-Piece tranche - higher risk, lower price
tokenPrice = (assets * 0.7 - liabilities * 0.9) / tokens;
tokenAllocation = contribution / tokenPrice;
poolPercentage = (tokenAllocation / tokens) * 100;
remicPercentage = (contribution / assets) * 100;
break;
}
// Update display
document.getElementById(`token-price-${tranche}`).textContent = `$${tokenPrice.toFixed(2)}`;
document.getElementById(`token-allocation-${tranche}`).textContent = Math.round(tokenAllocation).toLocaleString();
document.getElementById(`pool-percentage-${tranche}`).textContent = `${poolPercentage.toFixed(2)}%`;
document.getElementById(`remic-percentage-${tranche}`).textContent = `${remicPercentage.toFixed(2)}%`;
}
// Set up calculate buttons
const calculateBtns = document.querySelectorAll('.calculate-btn');
calculateBtns.forEach(btn => {
btn.addEventListener('click', function() {
const tranche = this.dataset.tranche;
calculateTrancheOffer(tranche);
});
});
// Also calculate when seller inputs change
const sellerInputs = ['a', 'b', 'c'].map(t => [
`liabilities-${t}`,
`contribution-${t}`
]).flat();
sellerInputs.forEach(id => {
document.getElementById(id).addEventListener('input', function() {
const tranche = id.split('-')[1];
calculateTrancheOffer(tranche);
});
});
// Submit offer buttons
const submitOfferBtns = document.querySelectorAll('.submit-offer');
submitOfferBtns.forEach(btn => {
btn.addEventListener('click', function() {
const tranche = this.dataset.tranche;
const trancheName = {
'a': 'Tranche A (Senior)',
'b': 'Tranche B (Mezzanine)',
'c': 'Tranche C (B-Piece)'
}[tranche];
const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
if (liabilities <= 0 || contribution <= 0) {
alert('Please enter valid values for liabilities and contribution');
return;
}
// Update tranche data with new investment
trancheData[tranche].assets += contribution;
trancheData[tranche].liquidity += contribution * 0.9; // Assuming 90% goes to liquidity
// Update the pool information display
updateTranchePoolInfo();
// Show success message
successMessage.classList.remove('hidden');
setTimeout(() => {
successMessage.classList.add('hidden');
}, 3000);
// Reset form
document.getElementById(`liabilities-${tranche}`).value = '';
document.getElementById(`contribution-${tranche}`).value = '';
// Recalculate
calculateTrancheOffer(tranche);
});
});
// Submit offer buttons
const submitOfferBtns = document.querySelectorAll('.submit-offer');
submitOfferBtns.forEach(btn => {
btn.addEventListener('click', function() {
const tranche = this.dataset.tranche;
const trancheName = {
'a': 'Tranche A (Senior)',
'b': 'Tranche B (Mezzanine)',
'c': 'Tranche C (B-Piece)'
}[tranche];
const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
if (liabilities <= 0 || contribution <= 0) {
alert('Please enter valid values for liabilities and contribution');
return;
}
// Update tranche data with new investment
trancheData[tranche].assets += contribution;
trancheData[tranche].liquidity += contribution * 0.9; // Assuming 90% goes to liquidity
// Update the pool information display
updateTranchePoolInfo();
// Show success message
successMessage.classList.remove('hidden');
setTimeout(() => {
successMessage.classList.add('hidden');
}, 3000);
// Reset form
document.getElementById(`liabilities-${tranche}`).value = '';
document.getElementById(`contribution-${tranche}`).value = '';
// Recalculate
calculateTrancheOffer(tranche);
});
});
// Submit offer buttons
const submitOfferBtns = document.querySelectorAll('.submit-offer');
submitOfferBtns.forEach(btn => {
// CHANGE THIS LINE: Make the function async
btn.addEventListener('click', async function() {
const tranche = this.dataset.tranche;
const trancheName = {
'a': 'Tranche A (Senior)',
'b': 'Tranche B (Mezzanine)',
'c': 'Tranche C (B-Piece)'
}[tranche];
const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
if (liabilities <= 0 || contribution <= 0) {
alert('Please enter valid values for liabilities and contribution');
return;
}
// *** ADD THESE LINES FOR THE WORKER URL AND DATA PREPARATION ***
// Replace 'YOUR_CLOUDFLARE_WORKER_URL' with the actual URL of your deployed Cloudflare Worker
// e.g., 'https://century-city-remic-api.your-subdomain.workers.dev/submit-offer'
const workerUrl = 'https://century-city-remic-api.aiagents.workers.dev/';
const workerUrl = 'https://century-city-remic-api.your-subdomain.workers.dev/submit-offer';
const offerData = {
tranche: tranche,
trancheName: trancheName,
liabilities: liabilities,
contribution: contribution,
// Include other calculated values if needed, for example:
tokenPrice: parseFloat(document.getElementById(`token-price-${tranche}`).textContent.replace('$', '')),
tokenAllocation: parseInt(document.getElementById(`token-allocation-${tranche}`).textContent.replace(/,/g, '')),
poolPercentage: parseFloat(document.getElementById(`pool-percentage-${tranche}`).textContent.replace('%', '')),
remicPercentage: parseFloat(document.getElementById(`remic-percentage-${tranche}`).textContent.replace('%', '')),
};
try {
const response = await fetch(workerUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(offerData),
});
if (response.ok) {
const result = await response.json();
console.log('Backend response:', result);
// The client-side updates (like updating trancheData and UI)
// should ideally only happen AFTER a successful backend submission.
// So, move them here:
// Update tranche data with new investment (if successful)
trancheData[tranche].assets += contribution;
trancheData[tranche].liquidity += contribution * 0.9;
updateTranchePoolInfo(); // Update frontend display
// Show success message
successMessage.classList.remove('hidden');
setTimeout(() => {
successMessage.classList.add('hidden');
</Script>
<Script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize tranche data
const trancheData = {
a: {
assets: 1200000,
tokens: 0.3,
liquidity: 1.2,
distribution: 0.3
},
b: {
assets: 8500000,
tokens: 20000000,
liquidity: 8.5,
distribution: 20
},
c: {
assets: 3800000,
tokens: 10000000,
liquidity: 3.8,
distribution: 10
}
};
// Calculator toggle functionality
const calculatorBtn = document.getElementById('token-calculator-btn');
const calculator = document.getElementById('token-calculator');
const closeCalculator = document.getElementById('close-calculator');
const successMessage = document.getElementById('success-message');
calculatorBtn.addEventListener('click', function() {
calculator.classList.toggle('hidden');
});
closeCalculator.addEventListener('click', function() {
calculator.classList.add('hidden');
});
// Tab switching functionality
const tabs = document.querySelectorAll('.tranche-tab');
const contents = document.querySelectorAll('.tranche-content');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const tranche = this.dataset.tranche;
// Update active tab
tabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
// Update active content
contents.forEach(c => c.classList.remove('active'));
document.getElementById(`tranche-${tranche}-calc`).classList.add('active');
});
});
// Calculator buttons from tranche cards
const trancheCalculatorBtns = document.querySelectorAll('.tranche-calculator-btn');
trancheCalculatorBtns.forEach(btn => {
btn.addEventListener('click', function() {
const tranche = this.dataset.tranche;
// Show calculator if hidden
if (calculator.classList.contains('hidden')) {
calculator.classList.remove('hidden');
}
// Switch to the correct tab
tabs.forEach(t => t.classList.remove('active'));
document.querySelector(`.tranche-tab[data-tranche="${tranche}"]`).classList.add('active');
contents.forEach(c => c.classList.remove('active'));
document.getElementById(`tranche-${tranche}-calc`).classList.add('active');
});
});
// Calculate functions for each tranche
function calculateTrancheOffer(tranche) {
const assets = parseFloat(document.getElementById(`assets-${tranche}`).value) || 0;
const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
const tokens = parseFloat(document.getElementById(`tokens-${tranche}`).value) || 1;
const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
// Different calculation formulas based on tranche
let tokenPrice, tokenAllocation, poolPercentage, remicPercentage;
switch(tranche) {
case 'a':
// Senior tranche - lower risk, higher price
tokenPrice = (assets * 0.9 - liabilities * 0.5) / tokens;
tokenAllocation = contribution / tokenPrice;
poolPercentage = (tokenAllocation / tokens) * 100;
remicPercentage = (contribution / (assets * 1.5)) * 100;
break;
case 'b':
// Mezzanine tranche - balanced approach
tokenPrice = (assets * 0.8 - liabilities * 0.7) / tokens;
tokenAllocation = contribution / tokenPrice;
poolPercentage = (tokenAllocation / tokens) * 100;
remicPercentage = (contribution / (assets * 1.2)) * 100;
break;
case 'c':
// B-Piece tranche - higher risk, lower price
tokenPrice = (assets * 0.7 - liabilities * 0.9) / tokens;
tokenAllocation = contribution / tokenPrice;
poolPercentage = (tokenAllocation / tokens) * 100;
remicPercentage = (contribution / assets) * 100;
break;
}
// Update display
document.getElementById(`token-price-${tranche}`).textContent = `$${tokenPrice.toFixed(2)}`;
document.getElementById(`token-allocation-${tranche}`).textContent = Math.round(tokenAllocation).toLocaleString();
document.getElementById(`pool-percentage-${tranche}`).textContent = `${poolPercentage.toFixed(2)}%`;
document.getElementById(`remic-percentage-${tranche}`).textContent = `${remicPercentage.toFixed(2)}%`;
}
// Set up calculate buttons
const calculateBtns = document.querySelectorAll('.calculate-btn');
calculateBtns.forEach(btn => {
btn.addEventListener('click', function() {
const tranche = this.dataset.tranche;
calculateTrancheOffer(tranche);
});
});
// Also calculate when seller inputs change
const sellerInputs = ['a', 'b', 'c'].map(t => [
`liabilities-${t}`,
`contribution-${t}`
]).flat();
sellerInputs.forEach(id => {
document.getElementById(id).addEventListener('input', function() {
const tranche = id.split('-')[1];
calculateTrancheOffer(tranche);
});
});
// Submit offer buttons (this is the ONLY one you should have)
const submitOfferBtns = document.querySelectorAll('.submit-offer');
submitOfferBtns.forEach(btn => {
btn.addEventListener('click', async function() { // Made async for fetch
const tranche = this.dataset.tranche;
const trancheName = {
'a': 'Tranche A (Senior)',
'b': 'Tranche B (Mezzanine)',
'c': 'Tranche C (B-Piece)'
}[tranche];
const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
if (liabilities <= 0 || contribution <= 0) {
alert('Please enter valid values for liabilities and contribution');
return;
}
// IMPORTANT: Replace this with YOUR ACTUAL Cloudflare Worker URL
// Example: 'https://your-worker-name.your-username.workers.dev/submit-offer'
const workerUrl = 'https://century-city-remic-api.aiagents.workers.dev/submit-offer'; // Ensure this is your final, correct URL
const offerData = {
tranche: tranche,
trancheName: trancheName,
liabilities: liabilities,
contribution: contribution,
// Include other calculated values if needed, for example:
tokenPrice: parseFloat(document.getElementById(`token-price-${tranche}`).textContent.replace('$', '')),
tokenAllocation: parseInt(document.getElementById(`token-allocation-${tranche}`).textContent.replace(/,/g, '')),
poolPercentage: parseFloat(document.getElementById(`pool-percentage-${tranche}`).textContent.replace('%', '')),
remicPercentage: parseFloat(document.getElementById(`remic-percentage-${tranche}`).textContent.replace('%', '')),
};
try {
const response = await fetch(workerUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(offerData),
});
if (response.ok) {
const result = await response.json();
console.log('Backend response:', result);
// Update tranche data with new investment (if successful)
trancheData[tranche].assets += contribution;
trancheData[tranche].liquidity += contribution * 0.9;
updateTranchePoolInfo(); // Update frontend display
// Show success message
successMessage.classList.remove('hidden');
setTimeout(() => {
successMessage.classList.add('hidden');
}, 3000);
// Reset form
document.getElementById(`liabilities-${tranche}`).value = '';
document.getElementById(`contribution-${tranche}`).value = '';
// Recalculate (this will use the updated trancheData for display)
calculateTrancheOffer(tranche);
} else {
const errorData = await response.json();
console.error('Backend submission failed:', errorData);
alert(`Submission failed: ${errorData.message || 'Unknown error'}`);
}
} catch (error) {
console.error('Network or unexpected error:', error);
alert('An error occurred while submitting your offer. Please try again.');
}
});
});
// Function to update tranche pool information
function updateTranchePoolInfo() {
// Update supply and liquidity displays
document.getElementById('tranche-a-supply').textContent = `${trancheData.a.tokens.toLocaleString()} Tokens`;
document.getElementById('tranche-a-liquidity').textContent = `$${(trancheData.a.liquidity / 1000000).toFixed(1)}M`;
document.getElementById('tranche-b-supply').textContent = `${(trancheData.b.tokens / 1000000).toFixed(1)}M Tokens`;
document.getElementById('tranche-b-liquidity').textContent = `$${(trancheData.b.liquidity / 1000000).toFixed(1)}M`;
document.getElementById('tranche-c-supply').textContent = `${(trancheData.c.tokens / 1000000).toFixed(1)}M Tokens`;
document.getElementById('tranche-c-liquidity').textContent = `$${(trancheData.c.liquidity / 1000000).toFixed(1)}M`;
// Update token distribution
const total = trancheData.a.distribution + trancheData.b.distribution + trancheData.c.distribution;
const aPercent = (trancheData.a.distribution / total * 100).toFixed(2);
const bPercent = (trancheData.b.distribution / total * 100).toFixed(2);
const cPercent = (trancheData.c.distribution / total * 100).toFixed(2);
document.getElementById('dist-a').textContent = `${trancheData.a.distribution}M (${aPercent}%)`;
document.getElementById('dist-b').textContent = `${trancheData.b.distribution}M (${bPercent}%)`;
document.getElementById('dist-c').textContent = `${trancheData.c.distribution}M (${cPercent}%)`;
// Update distribution bars
document.querySelector('#tranche-a-calc .bg-blue-600').style.width = `${aPercent}%`;
document.querySelector('#tranche-b-calc .bg-green-500').style.width = `${bPercent}%`;
document.querySelector('#tranche-c-calc .bg-red-500').style.width = `${cPercent}%`;
}
// Initial calculations
['a', 'b', 'c'].forEach(tranche => calculateTrancheOffer(tranche));
});
</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/ccremic-vbeta1-06" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>