Hugging Face's logo

Spaces:
privateuserh
/
ccremic-vbeta1-06
Running

App Files Community
privateuserh commited on
Commit
bd47ae5
·
verified ·
1 Parent(s): d1a62ae

Keep all content and links modify REMIC Token Offer Window to show all content and submit buttons add scroll option if needed or simple make panel height larger - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1069 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ccremic Vbeta1 07
3
- emoji: 💻
4
  colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ccremic-vbeta1-07
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1069 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>REMIC | Blockchain Mortgage Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
12
+ }
13
+ .hero-pattern {
14
+ background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
15
+ background-size: 20px 20px;
16
+ }
17
+ .card-hover:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .process-step::before {
22
+ content: '';
23
+ position: absolute;
24
+ top: 0;
25
+ left: 24px;
26
+ height: 100%;
27
+ width: 2px;
28
+ background: #3b82f6;
29
+ }
30
+ .process-step:last-child::before {
31
+ display: none;
32
+ }
33
+ .crypto-bg {
34
+ background-image: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop');
35
+ background-size: cover;
36
+ background-position: center;
37
+ }
38
+ .floating-button {
39
+ position: fixed;
40
+ bottom: 2rem;
41
+ right: 2rem;
42
+ z-index: 50;
43
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
44
+ }
45
+ .token-calculator {
46
+ position: fixed;
47
+ bottom: 6rem;
48
+ right: 2rem;
49
+ z-index: 50;
50
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
51
+ transform-origin: bottom right;
52
+ transition: all 0.3s ease;
53
+ max-height: 80vh;
54
+ overflow-y: auto;
55
+ }
56
+ .token-calculator.hidden {
57
+ transform: scale(0);
58
+ opacity: 0;
59
+ pointer-events: none;
60
+ }
61
+ .remic-icon {
62
+ width: 80px;
63
+ height: 80px;
64
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
65
+ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ color: white;
70
+ font-weight: bold;
71
+ font-size: 1.5rem;
72
+ }
73
+ .readonly-input {
74
+ background-color: #f3f4f6;
75
+ cursor: not-allowed;
76
+ }
77
+ .seller-input {
78
+ background-color: #eff6ff;
79
+ border-color: #3b82f6;
80
+ }
81
+ .tranche-a-bg {
82
+ background-color: rgba(59, 130, 246, 0.1);
83
+ border-left: 4px solid #3b82f6;
84
+ }
85
+ .tranche-b-bg {
86
+ background-color: rgba(16, 185, 129, 0.1);
87
+ border-left: 4px solid #10b981;
88
+ }
89
+ .tranche-c-bg {
90
+ background-color: rgba(239, 68, 68, 0.1);
91
+ border-left: 4px solid #ef4444;
92
+ }
93
+ .tranche-tab {
94
+ padding: 0.5rem 1rem;
95
+ border-radius: 0.375rem;
96
+ cursor: pointer;
97
+ transition: all 0.2s;
98
+ }
99
+ .tranche-tab.active {
100
+ background-color: rgba(59, 130, 246, 0.1);
101
+ color: #3b82f6;
102
+ font-weight: 600;
103
+ }
104
+ .tranche-content {
105
+ display: none;
106
+ }
107
+ .tranche-content.active {
108
+ display: block;
109
+ }
110
+ .tranche-badge {
111
+ display: inline-block;
112
+ padding: 0.25rem 0.5rem;
113
+ border-radius: 9999px;
114
+ font-size: 0.75rem;
115
+ font-weight: 600;
116
+ }
117
+ .badge-a {
118
+ background-color: rgba(59, 130, 246, 0.1);
119
+ color: #3b82f6;
120
+ }
121
+ .badge-b {
122
+ background-color: rgba(16, 185, 129, 0.1);
123
+ color: #10b981;
124
+ }
125
+ .badge-c {
126
+ background-color: rgba(239, 68, 68, 0.1);
127
+ color: #ef4444;
128
+ }
129
+ .submit-success {
130
+ animation: fadeInOut 3s ease-in-out;
131
+ opacity: 0;
132
+ }
133
+ @keyframes fadeInOut {
134
+ 0% { opacity: 0; }
135
+ 20% { opacity: 1; }
136
+ 80% { opacity: 1; }
137
+ 100% { opacity: 0; }
138
+ }
139
+ </style>
140
+ </head>
141
+ <body class="font-sans antialiased text-gray-800">
142
+ <!-- Header Section -->
143
+ <header class="gradient-bg text-white">
144
+ <div class="container mx-auto px-4 py-6">
145
+ <div class="flex justify-between items-center">
146
+ <div class="flex items-center space-x-4">
147
+ <div class="remic-icon">REMIC</div>
148
+ <div>
149
+ <h1 class="text-2xl font-bold">Century City REMIC</h1>
150
+ <p class="text-blue-200">Blockchain Mortgage Solutions</p>
151
+ </div>
152
+ </div>
153
+ <nav class="hidden md:flex space-x-8">
154
+ <a href="#" class="hover:text-blue-300 transition">Home</a>
155
+ <a href="#" class="hover:text-blue-300 transition">Invest</a>
156
+ <a href="#" class="hover:text-blue-300 transition">About</a>
157
+ <a href="#" class="hover:text-blue-300 transition">Contact</a>
158
+ </nav>
159
+ <button class="md:hidden text-white">
160
+ <i class="fas fa-bars text-2xl"></i>
161
+ </button>
162
+ </div>
163
+ </div>
164
+ </header>
165
+
166
+ <!-- Hero Section -->
167
+ <section class="gradient-bg hero-pattern text-white py-20">
168
+ <div class="container mx-auto px-4 text-center">
169
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Revolutionizing Real Estate Investment</h1>
170
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Mortgage solutions powered by blockchain technology and REMIC compliance.</p>
171
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
172
+ <button class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition">Invest Now</button>
173
+ <button class="border border-white text-white hover:bg-blue-700 px-6 py-3 rounded-lg font-medium transition">Learn More</button>
174
+ </div>
175
+ </div>
176
+ </section>
177
+
178
+ <!-- Trust Details Section -->
179
+ <section class="py-16 bg-gray-50">
180
+ <div class="container mx-auto px-4">
181
+ <div class="text-center mb-12">
182
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Century City REMIC Trust</h2>
183
+ <div class="w-24 h-1 bg-blue-600 mx-auto"></div>
184
+ </div>
185
+
186
+ <div class="grid md:grid-cols-3 gap-8">
187
+ <div class="bg-white p-6 rounded-lg shadow-md card-hover transition">
188
+ <div class="text-blue-600 mb-4">
189
+ <i class="fas fa-chart-pie text-3xl"></i>
190
+ </div>
191
+ <h3 class="text-xl font-semibold mb-3">Trust & REMIC Structure</h3>
192
+ <p class="text-gray-600">200 authorized shares at $1.00 par value each. California Code, Corporations Code - CORP § 205</p><br>
193
+ <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>
194
+ <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>
195
+ <p class="text-gray-600"></p><br>
196
+ <p class="text-gray-600"><b>Tranche Breakdown:</b></p><br>
197
+ <p class="text-gray-600">Tranche A (Senior) Risk Profile: Lowest risk tranche.</p><br>
198
+ <p class="text-gray-600">Tranche B (Mezzanine) Risk Profile: Mod. risk tranche.</p><br>
199
+ <p class="text-gray-600">Tranche C (B-Piece) Risk Profile: Highest risk tranche.</p><br>
200
+ </div>
201
+
202
+ <div class="bg-white p-6 rounded-lg shadow-md card-hover transition">
203
+ <div class="text-blue-600 mb-4">
204
+ <i class="fas fa-hand-holding-usd text-3xl"></i>
205
+ </div>
206
+ <h3 class="text-xl font-semibold mb-3">Annuity Payments</h3>
207
+ <p class="text-gray-600">Tokens 3% of designated annuity income.</p>
208
+ <p class="text-gray-600">Annuity paying 69458022 (sat), every 1011 blocks, after a 1200 (sat) executor allowance. LP trading pools support.</p><br>
209
+ <p class="text-gray-600">LAMREIT</p>
210
+ <p class="text-gray-600">https://bit.ly/WeeklyAnnuity</p><br>
211
+ <p class="text-gray-600">Tranche A 100% of designated annuity income.</p>
212
+ <p class="text-gray-600">Tranche A</p>
213
+ <p class="text-gray-600">Link</p><br>
214
+ <p class="text-gray-600">Tranche B 100% of designated annuity income.</p>
215
+ <p class="text-gray-600">Tranche B</p>
216
+ <p class="text-gray-600">Link</p><br>
217
+ <p class="text-gray-600">Tranche C 100% of designated annuity income.</p>
218
+ <p class="text-gray-600">Tranche C</p>
219
+ <p class="text-gray-600">Link</p><br>
220
+ <p class="text-gray-600"><b>Divide Contract</b></p><br>
221
+ <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>
222
+ </div>
223
+
224
+ <div class="bg-white p-6 rounded-lg shadow-md card-hover transition">
225
+ <div class="text-blue-600 mb-4">
226
+ <i class="fas fa-exchange-alt text-3xl"></i>
227
+ </div>
228
+ <h3 class="text-xl font-semibold mb-3">LP Trading Pools</h3>
229
+ <p class="text-gray-600">LAMREIT 1.000.000 Tokens outstanding.</p><br>
230
+ <p class="text-gray-600">Tranche A Supply 0.3</p>
231
+ <p class="text-gray-600">Tranche B Supply 20.000.000</p>
232
+ <p class="text-gray-600">Tranche C Supply 10.000.000</p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </section>
237
+
238
+ <!-- Tranche Pools Section -->
239
+ <section class="py-16 bg-white">
240
+ <div class="container mx-auto px-4">
241
+ <div class="text-center mb-12">
242
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Tranche Pool Information</h2>
243
+ <div class="w-24 h-1 bg-blue-600 mx-auto"></div>
244
+ </div>
245
+
246
+ <div class="grid md:grid-cols-3 gap-6">
247
+ <!-- Tranche A -->
248
+ <div class="tranche-a-bg p-6 rounded-lg">
249
+ <div class="flex items-center mb-4">
250
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
251
+ <i class="fas fa-shield-alt text-blue-600"></i>
252
+ </div>
253
+ <h3 class="text-xl font-semibold">Tranche A (Senior)</h3>
254
+ </div>
255
+ <div class="space-y-3">
256
+ <div class="flex justify-between">
257
+ <span class="text-gray-600">Risk Level:</span>
258
+ <span class="font-medium">Low</span>
259
+ </div>
260
+ <div class="flex justify-between">
261
+ <span class="text-gray-600">Current Supply:</span>
262
+ <span id="tranche-a-supply" class="font-medium">0.3 Tokens</span>
263
+ </div>
264
+ <div class="flex justify-between">
265
+ <span class="text-gray-600">Yield:</span>
266
+ <span class="font-medium text-blue-600">4.5% APY</span>
267
+ </div>
268
+ <div class="flex justify-between">
269
+ <span class="text-gray-600">Liquidity:</span>
270
+ <span id="tranche-a-liquidity" class="font-medium">$1.2M</span>
271
+ </div>
272
+ <div class="pt-3 mt-3 border-t border-gray-200">
273
+ <button class="tranche-calculator-btn text-blue-600 hover:underline flex items-center" data-tranche="a">
274
+ <i class="fas fa-calculator mr-2"></i>
275
+ Calculate Investment
276
+ </button>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Tranche B -->
282
+ <div class="tranche-b-bg p-6 rounded-lg">
283
+ <div class="flex items-center mb-4">
284
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
285
+ <i class="fas fa-balance-scale text-green-600"></i>
286
+ </div>
287
+ <h3 class="text-xl font-semibold">Tranche B (Mezzanine)</h3>
288
+ </div>
289
+ <div class="space-y-3">
290
+ <div class="flex justify-between">
291
+ <span class="text-gray-600">Risk Level:</span>
292
+ <span class="font-medium">Medium</span>
293
+ </div>
294
+ <div class="flex justify-between">
295
+ <span class="text-gray-600">Current Supply:</span>
296
+ <span id="tranche-b-supply" class="font-medium">20M Tokens</span>
297
+ </div>
298
+ <div class="flex justify-between">
299
+ <span class="text-gray-600">Yield:</span>
300
+ <span class="font-medium text-green-600">7.2% APY</span>
301
+ </div>
302
+ <div class="flex justify-between">
303
+ <span class="text-gray-600">Liquidity:</span>
304
+ <span id="tranche-b-liquidity" class="font-medium">$8.5M</span>
305
+ </div>
306
+ <div class="pt-3 mt-3 border-t border-gray-200">
307
+ <button class="tranche-calculator-btn text-green-600 hover:underline flex items-center" data-tranche="b">
308
+ <i class="fas fa-calculator mr-2"></i>
309
+ Calculate Investment
310
+ </button>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Tranche C -->
316
+ <div class="tranche-c-bg p-6 rounded-lg">
317
+ <div class="flex items-center mb-4">
318
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
319
+ <i class="fas fa-arrow-up text-red-600"></i>
320
+ </div>
321
+ <h3 class="text-xl font-semibold">Tranche C (B-Piece)</h3>
322
+ </div>
323
+ <div class="space-y-3">
324
+ <div class="flex justify-between">
325
+ <span class="text-gray-600">Risk Level:</span>
326
+ <span class="font-medium">High</span>
327
+ </div>
328
+ <div class="flex justify-between">
329
+ <span class="text-gray-600">Current Supply:</span>
330
+ <span id="tranche-c-supply" class="font-medium">10M Tokens</span>
331
+ </div>
332
+ <div class="flex justify-between">
333
+ <span class="text-gray-600">Yield:</span>
334
+ <span class="font-medium text-red-600">11.0% APY</span>
335
+ </div>
336
+ <div class="flex justify-between">
337
+ <span class="text-gray-600">Liquidity:</span>
338
+ <span id="tranche-c-liquidity" class="font-medium">$3.8M</span>
339
+ </div>
340
+ <div class="pt-3 mt-3 border-t border-gray-200">
341
+ <button class="tranche-calculator-btn text-red-600 hover:underline flex items-center" data-tranche="c">
342
+ <i class="fas fa-calculator mr-2"></i>
343
+ Calculate Investment
344
+ </button>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </section>
351
+
352
+ <!-- Token Details Section -->
353
+ <section class="py-16 bg-gray-50">
354
+ <div class="container mx-auto px-4">
355
+ <div class="text-center mb-12">
356
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Token Information</h2>
357
+ <div class="w-24 h-1 bg-blue-600 mx-auto"></div>
358
+ </div>
359
+
360
+ <div class="max-w-4xl mx-auto bg-white rounded-lg p-6 shadow-md">
361
+ <div class="grid md:grid-cols-2 gap-8">
362
+ <div>
363
+ <h3 class="text-xl font-semibold mb-4 text-blue-600">Token Distribution</h3>
364
+ <div class="space-y-4">
365
+ <div>
366
+ <div class="flex justify-between mb-1">
367
+ <span class="text-gray-600">Tranche A</span>
368
+ <span id="dist-a" class="font-medium">0.3 (<1%)</span>
369
+ </div>
370
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
371
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 1%"></div>
372
+ </div>
373
+ </div>
374
+ <div>
375
+ <div class="flex justify-between mb-1">
376
+ <span class="text-gray-600">Tranche B</span>
377
+ <span id="dist-b" class="font-medium">20M (66.67%)</span>
378
+ </div>
379
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
380
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 66.67%"></div>
381
+ </div>
382
+ </div>
383
+ <div>
384
+ <div class="flex justify-between mb-1">
385
+ <span class="text-gray-600">Tranche C</span>
386
+ <span id="dist-c" class="font-medium">10M (33.33%)</span>
387
+ </div>
388
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
389
+ <div class="bg-red-500 h-2.5 rounded-full" style="width: 33.33%"></div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ <div>
395
+ <h3 class="text-xl font-semibold mb-4 text-blue-600">Blockchain Details</h3>
396
+ <ul class="space-y-3">
397
+ <li class="flex items-start">
398
+ <i class="fas fa-link text-blue-500 mt-1 mr-2"></i>
399
+ <span>Network: <strong>Bitcoin Cash</strong></span>
400
+ </li>
401
+ <li class="flex items-start">
402
+ <i class="fas fa-search text-blue-500 mt-1 mr-2"></i>
403
+ <span>Explorer: <a href="https://blockchair.com/bitcoin-cash/transaction/8874186362dd0510af5e26c4321c2a335f7089cfc1a70fcd9e4efb63a49d2a76" class="text-blue-600 hover:underline" target="_blank">View Transaction</a></span>
404
+ </li>
405
+ <li class="flex items-start">
406
+ <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
407
+ <span>Token Explorer: <a href="https://tokenexplorer.cash/?tokenId=841a9e7522200b5fdd7023c7c71d17b93579283e28a362718cbcb551aea36635" class="text-blue-600 hover:underline" target="_blank">View Token</a></span>
408
+ </li>
409
+ </ul>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="mt-8 pt-6 border-t border-gray-200">
414
+ <h3 class="text-xl font-semibold mb-4 text-blue-600">LP Trading Pool Agreement</h3>
415
+ <div class="bg-gray-50 p-4 rounded border border-gray-200">
416
+ <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>
417
+ <div class="text-sm text-gray-500">
418
+ <p><strong>Effective Date:</strong> June 11, 2024</p>
419
+ <p><strong>Term:</strong> 2 years</p>
420
+ <p><strong>Parties:</strong> Century City REMIC & Los Angeles Mortgage REIT</p>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </section>
427
+
428
+ <!-- Floating Token Calculator Button -->
429
+ <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">
430
+ <i class="fas fa-coins text-xl"></i>
431
+ </button>
432
+
433
+ <!-- Token Calculator Panel -->
434
+ <div id="token-calculator" class="token-calculator hidden w-80 bg-white rounded-lg overflow-hidden border border-gray-200" style="max-height: 85vh;">
435
+ <div class="bg-blue-700 px-4 py-3">
436
+ <div class="flex items-center justify-between">
437
+ <h3 class="text-lg font-medium text-white">REMIC Token Offer</h3>
438
+ <button id="close-calculator" class="text-blue-100 hover:text-white focus:outline-none">
439
+ <i class="fas fa-times"></i>
440
+ </button>
441
+ </div>
442
+ <p class="text-xs text-blue-200 mt-1">For Mortgage Seller</p>
443
+ </div>
444
+
445
+ <div class="p-4 overflow-y-auto" style="max-height: calc(85vh - 56px);">
446
+ <!-- Tab Navigation -->
447
+ <div class="flex space-x-2 mb-4 border-b border-gray-200 pb-2">
448
+ <button class="tranche-tab active" data-tranche="a">Tranche A</button>
449
+ <button class="tranche-tab" data-tranche="b">Tranche B</button>
450
+ <button class="tranche-tab" data-tranche="c">Tranche C</button>
451
+ </div>
452
+
453
+ <!-- Success Message -->
454
+ <div id="success-message" class="submit-success hidden mb-4 p-3 bg-green-100 text-green-700 rounded text-sm">
455
+ <i class="fas fa-check-circle mr-2"></i>
456
+ <span>Your investment has been submitted successfully!</span>
457
+ </div>
458
+
459
+ <!-- Tranche A Calculator -->
460
+ <div id="tranche-a-calc" class="tranche-content active">
461
+ <div class="mb-4">
462
+ <label for="assets-a" class="block text-sm font-medium text-gray-700 mb-1">Pool Assets ($)</label>
463
+ <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>
464
+ </div>
465
+
466
+ <div class="mb-4">
467
+ <label for="tokens-a" class="block text-sm font-medium text-gray-700 mb-1">Tokens Outstanding</label>
468
+ <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>
469
+ </div>
470
+
471
+ <div class="mb-4">
472
+ <label for="liabilities-a" class="block text-sm font-medium text-gray-700 mb-1">Your Liabilities ($)</label>
473
+ <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">
474
+ </div>
475
+
476
+ <div class="mb-4">
477
+ <label for="contribution-a" class="block text-sm font-medium text-gray-700 mb-1">Your Contribution ($)</label>
478
+ <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">
479
+ </div>
480
+
481
+ <div class="mt-6 p-4 bg-blue-50 rounded-md">
482
+ <h4 class="text-sm font-medium text-blue-700 mb-3 flex items-center">
483
+ <span class="tranche-badge badge-a mr-2">Tranche A</span>
484
+ Offer Summary
485
+ </h4>
486
+ <div class="flex justify-between mb-2">
487
+ <span class="text-sm font-medium text-gray-600">Token NAV:</span>
488
+ <span id="token-price-a" class="text-sm font-semibold text-blue-600">$3.33</span>
489
+ </div>
490
+ <div class="flex justify-between mb-2">
491
+ <span class="text-sm font-medium text-gray-600">Your Allocation:</span>
492
+ <span id="token-allocation-a" class="text-sm font-semibold text-blue-600">15,015</span>
493
+ </div>
494
+ <div class="flex justify-between mb-2">
495
+ <span class="text-sm font-medium text-gray-600">% of Pool:</span>
496
+ <span id="pool-percentage-a" class="text-sm font-semibold text-blue-600">5.00%</span>
497
+ </div>
498
+ <div class="flex justify-between">
499
+ <span class="text-sm font-medium text-gray-600">% of REMIC:</span>
500
+ <span id="remic-percentage-a" class="text-sm font-semibold text-blue-600">0.25%</span>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="mt-4 flex space-x-2">
505
+ <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">
506
+ Calculate
507
+ </button>
508
+ <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">
509
+ Submit
510
+ </button>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Tranche B Calculator -->
515
+ <div id="tranche-b-calc" class="tranche-content">
516
+ <div class="mb-4">
517
+ <label for="assets-b" class="block text-sm font-medium text-gray-700 mb-1">Pool Assets ($)</label>
518
+ <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>
519
+ </div>
520
+
521
+ <div class="mb-4">
522
+ <label for="tokens-b" class="block text-sm font-medium text-gray-700 mb-1">Tokens Outstanding</label>
523
+ <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>
524
+ </div>
525
+
526
+ <div class="mb-4">
527
+ <label for="liabilities-b" class="block text-sm font-medium text-gray-700 mb-1">Your Liabilities ($)</label>
528
+ <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">
529
+ </div>
530
+
531
+ <div class="mb-4">
532
+ <label for="contribution-b" class="block text-sm font-medium text-gray-700 mb-1">Your Contribution ($)</label>
533
+ <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">
534
+ </div>
535
+
536
+ <div class="mt-6 p-4 bg-green-50 rounded-md">
537
+ <h4 class="text-sm font-medium text-green-700 mb-3 flex items-center">
538
+ <span class="tranche-badge badge-b mr-2">Tranche B</span>
539
+ Offer Summary
540
+ </h4>
541
+ <div class="flex justify-between mb-2">
542
+ <span class="text-sm font-medium text-gray-600">Token NAV:</span>
543
+ <span id="token-price-b" class="text-sm font-semibold text-green-600">$0.42</span>
544
+ </div>
545
+ <div class="flex justify-between mb-2">
546
+ <span class="text-sm font-medium text-gray-600">Your Allocation:</span>
547
+ <span id="token-allocation-b" class="text-sm font-semibold text-green-600">119,048</span>
548
+ </div>
549
+ <div class="flex justify-between mb-2">
550
+ <span class="text-sm font-medium text-gray-600">% of Pool:</span>
551
+ <span id="pool-percentage-b" class="text-sm font-semibold text-green-600">0.60%</span>
552
+ </div>
553
+ <div class="flex justify-between">
554
+ <span class="text-sm font-medium text-gray-600">% of REMIC:</span>
555
+ <span id="remic-percentage-b" class="text-sm font-semibold text-green-600">0.25%</span>
556
+ </div>
557
+ </div>
558
+
559
+ <div class="mt-4 flex space-x-2">
560
+ <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">
561
+ Calculate
562
+ </button>
563
+ <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">
564
+ Submit
565
+ </button>
566
+ </div>
567
+ </div>
568
+
569
+ <!-- Tranche C Calculator -->
570
+ <div id="tranche-c-calc" class="tranche-content">
571
+ <div class="mb-4">
572
+ <label for="assets-c" class="block text-sm font-medium text-gray-700 mb-1">Pool Assets ($)</label>
573
+ <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>
574
+ </div>
575
+
576
+ <div class="mb-4">
577
+ <label for="tokens-c" class="block text-sm font-medium text-gray-700 mb-1">Tokens Outstanding</label>
578
+ <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>
579
+ </div>
580
+
581
+ <div class="mb-4">
582
+ <label for="liabilities-c" class="block text-sm font-medium text-gray-700 mb-1">Your Liabilities ($)</label>
583
+ <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">
584
+ </div>
585
+
586
+ <div class="mb-4">
587
+ <label for="contribution-c" class="block text-sm font-medium text-gray-700 mb-1">Your Contribution ($)</label>
588
+ <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">
589
+ </div>
590
+
591
+ <div class="mt-6 p-4 bg-red-50 rounded-md">
592
+ <h4 class="text-sm font-medium text-red-700 mb-3 flex items-center">
593
+ <span class="tranche-badge badge-c mr-2">Tranche C</span>
594
+ Offer Summary
595
+ </h4>
596
+ <div class="flex justify-between mb-2">
597
+ <span class="text-sm font-medium text-gray-600">Token NAV:</span>
598
+ <span id="token-price-c" class="text-sm font-semibold text-red-600">$0.38</span>
599
+ </div>
600
+ <div class="flex justify-between mb-2">
601
+ <span class="text-sm font-medium text-gray-600">Your Allocation:</span>
602
+ <span id="token-allocation-c" class="text-sm font-semibold text-red-600">131,579</span>
603
+ </div>
604
+ <div class="flex justify-between mb-2">
605
+ <span class="text-sm font-medium text-gray-600">% of Pool:</span>
606
+ <span id="pool-percentage-c" class="text-sm font-semibold text-red-600">1.32%</span>
607
+ </div>
608
+ <div class="flex justify-between">
609
+ <span class="text-sm font-medium text-gray-600">% of REMIC:</span>
610
+ <span id="remic-percentage-c" class="text-sm font-semibold text-red-600">0.25%</span>
611
+ </div>
612
+ </div>
613
+
614
+ <div class="mt-4 flex space-x-2">
615
+ <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">
616
+ Calculate
617
+ </button>
618
+ <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">
619
+ Submit
620
+ </button>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ </div>
625
+
626
+ <script>
627
+ poolPercentage = (tokenAllocation / tokens) * 100;
628
+ remicPercentage = (contribution / (assets * 1.2)) * 100;
629
+ break;
630
+ case 'c':
631
+ // B-Piece tranche - higher risk, lower price
632
+ tokenPrice = (assets * 0.7 - liabilities * 0.9) / tokens;
633
+ tokenAllocation = contribution / tokenPrice;
634
+ poolPercentage = (tokenAllocation / tokens) * 100;
635
+ remicPercentage = (contribution / assets) * 100;
636
+ break;
637
+ }
638
+
639
+ // Update display
640
+ document.getElementById(`token-price-${tranche}`).textContent = `$${tokenPrice.toFixed(2)}`;
641
+ document.getElementById(`token-allocation-${tranche}`).textContent = Math.round(tokenAllocation).toLocaleString();
642
+ document.getElementById(`pool-percentage-${tranche}`).textContent = `${poolPercentage.toFixed(2)}%`;
643
+ document.getElementById(`remic-percentage-${tranche}`).textContent = `${remicPercentage.toFixed(2)}%`;
644
+ }
645
+
646
+ // Set up calculate buttons
647
+ const calculateBtns = document.querySelectorAll('.calculate-btn');
648
+
649
+ calculateBtns.forEach(btn => {
650
+ btn.addEventListener('click', function() {
651
+ const tranche = this.dataset.tranche;
652
+ calculateTrancheOffer(tranche);
653
+ });
654
+ });
655
+
656
+ // Also calculate when seller inputs change
657
+ const sellerInputs = ['a', 'b', 'c'].map(t => [
658
+ `liabilities-${t}`,
659
+ `contribution-${t}`
660
+ ]).flat();
661
+
662
+ sellerInputs.forEach(id => {
663
+ document.getElementById(id).addEventListener('input', function() {
664
+ const tranche = id.split('-')[1];
665
+ calculateTrancheOffer(tranche);
666
+ });
667
+ });
668
+
669
+ // Submit offer buttons
670
+ const submitOfferBtns = document.querySelectorAll('.submit-offer');
671
+
672
+ submitOfferBtns.forEach(btn => {
673
+ btn.addEventListener('click', function() {
674
+ const tranche = this.dataset.tranche;
675
+ const trancheName = {
676
+ 'a': 'Tranche A (Senior)',
677
+ 'b': 'Tranche B (Mezzanine)',
678
+ 'c': 'Tranche C (B-Piece)'
679
+ }[tranche];
680
+
681
+ const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
682
+ const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
683
+
684
+ if (liabilities <= 0 || contribution <= 0) {
685
+ alert('Please enter valid values for liabilities and contribution');
686
+ return;
687
+ }
688
+
689
+ // Update tranche data with new investment
690
+ trancheData[tranche].assets += contribution;
691
+ trancheData[tranche].liquidity += contribution * 0.9; // Assuming 90% goes to liquidity
692
+
693
+ // Update the pool information display
694
+ updateTranchePoolInfo();
695
+
696
+ // Show success message
697
+ successMessage.classList.remove('hidden');
698
+ setTimeout(() => {
699
+ successMessage.classList.add('hidden');
700
+ }, 3000);
701
+
702
+ // Reset form
703
+ document.getElementById(`liabilities-${tranche}`).value = '';
704
+ document.getElementById(`contribution-${tranche}`).value = '';
705
+
706
+ // Recalculate
707
+ calculateTrancheOffer(tranche);
708
+ });
709
+ });
710
+ // Submit offer buttons
711
+ const submitOfferBtns = document.querySelectorAll('.submit-offer');
712
+
713
+ submitOfferBtns.forEach(btn => {
714
+ btn.addEventListener('click', function() {
715
+ const tranche = this.dataset.tranche;
716
+ const trancheName = {
717
+ 'a': 'Tranche A (Senior)',
718
+ 'b': 'Tranche B (Mezzanine)',
719
+ 'c': 'Tranche C (B-Piece)'
720
+ }[tranche];
721
+
722
+ const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
723
+ const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
724
+
725
+ if (liabilities <= 0 || contribution <= 0) {
726
+ alert('Please enter valid values for liabilities and contribution');
727
+ return;
728
+ }
729
+
730
+ // Update tranche data with new investment
731
+ trancheData[tranche].assets += contribution;
732
+ trancheData[tranche].liquidity += contribution * 0.9; // Assuming 90% goes to liquidity
733
+
734
+ // Update the pool information display
735
+ updateTranchePoolInfo();
736
+
737
+ // Show success message
738
+ successMessage.classList.remove('hidden');
739
+ setTimeout(() => {
740
+ successMessage.classList.add('hidden');
741
+ }, 3000);
742
+
743
+ // Reset form
744
+ document.getElementById(`liabilities-${tranche}`).value = '';
745
+ document.getElementById(`contribution-${tranche}`).value = '';
746
+
747
+ // Recalculate
748
+ calculateTrancheOffer(tranche);
749
+ });
750
+ });
751
+ // Submit offer buttons
752
+ const submitOfferBtns = document.querySelectorAll('.submit-offer');
753
+
754
+ submitOfferBtns.forEach(btn => {
755
+ // CHANGE THIS LINE: Make the function async
756
+ btn.addEventListener('click', async function() {
757
+ const tranche = this.dataset.tranche;
758
+ const trancheName = {
759
+ 'a': 'Tranche A (Senior)',
760
+ 'b': 'Tranche B (Mezzanine)',
761
+ 'c': 'Tranche C (B-Piece)'
762
+ }[tranche];
763
+
764
+ const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
765
+ const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
766
+
767
+ if (liabilities <= 0 || contribution <= 0) {
768
+ alert('Please enter valid values for liabilities and contribution');
769
+ return;
770
+ }
771
+
772
+ // *** ADD THESE LINES FOR THE WORKER URL AND DATA PREPARATION ***
773
+ // Replace 'YOUR_CLOUDFLARE_WORKER_URL' with the actual URL of your deployed Cloudflare Worker
774
+ // e.g., 'https://century-city-remic-api.your-subdomain.workers.dev/submit-offer'
775
+ const workerUrl = 'https://century-city-remic-api.aiagents.workers.dev/';
776
+ const workerUrl = 'https://century-city-remic-api.your-subdomain.workers.dev/submit-offer';
777
+
778
+ const offerData = {
779
+ tranche: tranche,
780
+ trancheName: trancheName,
781
+ liabilities: liabilities,
782
+ contribution: contribution,
783
+ // Include other calculated values if needed, for example:
784
+ tokenPrice: parseFloat(document.getElementById(`token-price-${tranche}`).textContent.replace('$', '')),
785
+ tokenAllocation: parseInt(document.getElementById(`token-allocation-${tranche}`).textContent.replace(/,/g, '')),
786
+ poolPercentage: parseFloat(document.getElementById(`pool-percentage-${tranche}`).textContent.replace('%', '')),
787
+ remicPercentage: parseFloat(document.getElementById(`remic-percentage-${tranche}`).textContent.replace('%', '')),
788
+ };
789
+
790
+ try {
791
+ const response = await fetch(workerUrl, {
792
+ method: 'POST',
793
+ headers: {
794
+ 'Content-Type': 'application/json',
795
+ },
796
+ body: JSON.stringify(offerData),
797
+ });
798
+
799
+ if (response.ok) {
800
+ const result = await response.json();
801
+ console.log('Backend response:', result);
802
+
803
+ // The client-side updates (like updating trancheData and UI)
804
+ // should ideally only happen AFTER a successful backend submission.
805
+ // So, move them here:
806
+ // Update tranche data with new investment (if successful)
807
+ trancheData[tranche].assets += contribution;
808
+ trancheData[tranche].liquidity += contribution * 0.9;
809
+ updateTranchePoolInfo(); // Update frontend display
810
+
811
+ // Show success message
812
+ successMessage.classList.remove('hidden');
813
+ setTimeout(() => {
814
+ successMessage.classList.add('hidden');
815
+ </Script>
816
+ <Script>
817
+ document.addEventListener('DOMContentLoaded', function() {
818
+ // Initialize tranche data
819
+ const trancheData = {
820
+ a: {
821
+ assets: 1200000,
822
+ tokens: 0.3,
823
+ liquidity: 1.2,
824
+ distribution: 0.3
825
+ },
826
+ b: {
827
+ assets: 8500000,
828
+ tokens: 20000000,
829
+ liquidity: 8.5,
830
+ distribution: 20
831
+ },
832
+ c: {
833
+ assets: 3800000,
834
+ tokens: 10000000,
835
+ liquidity: 3.8,
836
+ distribution: 10
837
+ }
838
+ };
839
+
840
+ // Calculator toggle functionality
841
+ const calculatorBtn = document.getElementById('token-calculator-btn');
842
+ const calculator = document.getElementById('token-calculator');
843
+ const closeCalculator = document.getElementById('close-calculator');
844
+ const successMessage = document.getElementById('success-message');
845
+
846
+ calculatorBtn.addEventListener('click', function() {
847
+ calculator.classList.toggle('hidden');
848
+ });
849
+
850
+ closeCalculator.addEventListener('click', function() {
851
+ calculator.classList.add('hidden');
852
+ });
853
+
854
+ // Tab switching functionality
855
+ const tabs = document.querySelectorAll('.tranche-tab');
856
+ const contents = document.querySelectorAll('.tranche-content');
857
+
858
+ tabs.forEach(tab => {
859
+ tab.addEventListener('click', function() {
860
+ const tranche = this.dataset.tranche;
861
+
862
+ // Update active tab
863
+ tabs.forEach(t => t.classList.remove('active'));
864
+ this.classList.add('active');
865
+
866
+ // Update active content
867
+ contents.forEach(c => c.classList.remove('active'));
868
+ document.getElementById(`tranche-${tranche}-calc`).classList.add('active');
869
+ });
870
+ });
871
+
872
+ // Calculator buttons from tranche cards
873
+ const trancheCalculatorBtns = document.querySelectorAll('.tranche-calculator-btn');
874
+
875
+ trancheCalculatorBtns.forEach(btn => {
876
+ btn.addEventListener('click', function() {
877
+ const tranche = this.dataset.tranche;
878
+
879
+ // Show calculator if hidden
880
+ if (calculator.classList.contains('hidden')) {
881
+ calculator.classList.remove('hidden');
882
+ }
883
+
884
+ // Switch to the correct tab
885
+ tabs.forEach(t => t.classList.remove('active'));
886
+ document.querySelector(`.tranche-tab[data-tranche="${tranche}"]`).classList.add('active');
887
+
888
+ contents.forEach(c => c.classList.remove('active'));
889
+ document.getElementById(`tranche-${tranche}-calc`).classList.add('active');
890
+ });
891
+ });
892
+
893
+ // Calculate functions for each tranche
894
+ function calculateTrancheOffer(tranche) {
895
+ const assets = parseFloat(document.getElementById(`assets-${tranche}`).value) || 0;
896
+ const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
897
+ const tokens = parseFloat(document.getElementById(`tokens-${tranche}`).value) || 1;
898
+ const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
899
+
900
+ // Different calculation formulas based on tranche
901
+ let tokenPrice, tokenAllocation, poolPercentage, remicPercentage;
902
+
903
+ switch(tranche) {
904
+ case 'a':
905
+ // Senior tranche - lower risk, higher price
906
+ tokenPrice = (assets * 0.9 - liabilities * 0.5) / tokens;
907
+ tokenAllocation = contribution / tokenPrice;
908
+ poolPercentage = (tokenAllocation / tokens) * 100;
909
+ remicPercentage = (contribution / (assets * 1.5)) * 100;
910
+ break;
911
+ case 'b':
912
+ // Mezzanine tranche - balanced approach
913
+ tokenPrice = (assets * 0.8 - liabilities * 0.7) / tokens;
914
+ tokenAllocation = contribution / tokenPrice;
915
+ poolPercentage = (tokenAllocation / tokens) * 100;
916
+ remicPercentage = (contribution / (assets * 1.2)) * 100;
917
+ break;
918
+ case 'c':
919
+ // B-Piece tranche - higher risk, lower price
920
+ tokenPrice = (assets * 0.7 - liabilities * 0.9) / tokens;
921
+ tokenAllocation = contribution / tokenPrice;
922
+ poolPercentage = (tokenAllocation / tokens) * 100;
923
+ remicPercentage = (contribution / assets) * 100;
924
+ break;
925
+ }
926
+
927
+ // Update display
928
+ document.getElementById(`token-price-${tranche}`).textContent = `$${tokenPrice.toFixed(2)}`;
929
+ document.getElementById(`token-allocation-${tranche}`).textContent = Math.round(tokenAllocation).toLocaleString();
930
+ document.getElementById(`pool-percentage-${tranche}`).textContent = `${poolPercentage.toFixed(2)}%`;
931
+ document.getElementById(`remic-percentage-${tranche}`).textContent = `${remicPercentage.toFixed(2)}%`;
932
+ }
933
+
934
+ // Set up calculate buttons
935
+ const calculateBtns = document.querySelectorAll('.calculate-btn');
936
+
937
+ calculateBtns.forEach(btn => {
938
+ btn.addEventListener('click', function() {
939
+ const tranche = this.dataset.tranche;
940
+ calculateTrancheOffer(tranche);
941
+ });
942
+ });
943
+
944
+ // Also calculate when seller inputs change
945
+ const sellerInputs = ['a', 'b', 'c'].map(t => [
946
+ `liabilities-${t}`,
947
+ `contribution-${t}`
948
+ ]).flat();
949
+
950
+ sellerInputs.forEach(id => {
951
+ document.getElementById(id).addEventListener('input', function() {
952
+ const tranche = id.split('-')[1];
953
+ calculateTrancheOffer(tranche);
954
+ });
955
+ });
956
+
957
+ // Submit offer buttons (this is the ONLY one you should have)
958
+ const submitOfferBtns = document.querySelectorAll('.submit-offer');
959
+
960
+ submitOfferBtns.forEach(btn => {
961
+ btn.addEventListener('click', async function() { // Made async for fetch
962
+ const tranche = this.dataset.tranche;
963
+ const trancheName = {
964
+ 'a': 'Tranche A (Senior)',
965
+ 'b': 'Tranche B (Mezzanine)',
966
+ 'c': 'Tranche C (B-Piece)'
967
+ }[tranche];
968
+
969
+ const liabilities = parseFloat(document.getElementById(`liabilities-${tranche}`).value) || 0;
970
+ const contribution = parseFloat(document.getElementById(`contribution-${tranche}`).value) || 0;
971
+
972
+ if (liabilities <= 0 || contribution <= 0) {
973
+ alert('Please enter valid values for liabilities and contribution');
974
+ return;
975
+ }
976
+
977
+ // IMPORTANT: Replace this with YOUR ACTUAL Cloudflare Worker URL
978
+ // Example: 'https://your-worker-name.your-username.workers.dev/submit-offer'
979
+ const workerUrl = 'https://century-city-remic-api.aiagents.workers.dev/submit-offer'; // Ensure this is your final, correct URL
980
+
981
+ const offerData = {
982
+ tranche: tranche,
983
+ trancheName: trancheName,
984
+ liabilities: liabilities,
985
+ contribution: contribution,
986
+ // Include other calculated values if needed, for example:
987
+ tokenPrice: parseFloat(document.getElementById(`token-price-${tranche}`).textContent.replace('$', '')),
988
+ tokenAllocation: parseInt(document.getElementById(`token-allocation-${tranche}`).textContent.replace(/,/g, '')),
989
+ poolPercentage: parseFloat(document.getElementById(`pool-percentage-${tranche}`).textContent.replace('%', '')),
990
+ remicPercentage: parseFloat(document.getElementById(`remic-percentage-${tranche}`).textContent.replace('%', '')),
991
+ };
992
+
993
+ try {
994
+ const response = await fetch(workerUrl, {
995
+ method: 'POST',
996
+ headers: {
997
+ 'Content-Type': 'application/json',
998
+ },
999
+ body: JSON.stringify(offerData),
1000
+ });
1001
+
1002
+ if (response.ok) {
1003
+ const result = await response.json();
1004
+ console.log('Backend response:', result);
1005
+
1006
+ // Update tranche data with new investment (if successful)
1007
+ trancheData[tranche].assets += contribution;
1008
+ trancheData[tranche].liquidity += contribution * 0.9;
1009
+ updateTranchePoolInfo(); // Update frontend display
1010
+
1011
+ // Show success message
1012
+ successMessage.classList.remove('hidden');
1013
+ setTimeout(() => {
1014
+ successMessage.classList.add('hidden');
1015
+ }, 3000);
1016
+
1017
+ // Reset form
1018
+ document.getElementById(`liabilities-${tranche}`).value = '';
1019
+ document.getElementById(`contribution-${tranche}`).value = '';
1020
+
1021
+ // Recalculate (this will use the updated trancheData for display)
1022
+ calculateTrancheOffer(tranche);
1023
+
1024
+ } else {
1025
+ const errorData = await response.json();
1026
+ console.error('Backend submission failed:', errorData);
1027
+ alert(`Submission failed: ${errorData.message || 'Unknown error'}`);
1028
+ }
1029
+ } catch (error) {
1030
+ console.error('Network or unexpected error:', error);
1031
+ alert('An error occurred while submitting your offer. Please try again.');
1032
+ }
1033
+ });
1034
+ });
1035
+
1036
+ // Function to update tranche pool information
1037
+ function updateTranchePoolInfo() {
1038
+ // Update supply and liquidity displays
1039
+ document.getElementById('tranche-a-supply').textContent = `${trancheData.a.tokens.toLocaleString()} Tokens`;
1040
+ document.getElementById('tranche-a-liquidity').textContent = `$${(trancheData.a.liquidity / 1000000).toFixed(1)}M`;
1041
+
1042
+ document.getElementById('tranche-b-supply').textContent = `${(trancheData.b.tokens / 1000000).toFixed(1)}M Tokens`;
1043
+ document.getElementById('tranche-b-liquidity').textContent = `$${(trancheData.b.liquidity / 1000000).toFixed(1)}M`;
1044
+
1045
+ document.getElementById('tranche-c-supply').textContent = `${(trancheData.c.tokens / 1000000).toFixed(1)}M Tokens`;
1046
+ document.getElementById('tranche-c-liquidity').textContent = `$${(trancheData.c.liquidity / 1000000).toFixed(1)}M`;
1047
+
1048
+ // Update token distribution
1049
+ const total = trancheData.a.distribution + trancheData.b.distribution + trancheData.c.distribution;
1050
+ const aPercent = (trancheData.a.distribution / total * 100).toFixed(2);
1051
+ const bPercent = (trancheData.b.distribution / total * 100).toFixed(2);
1052
+ const cPercent = (trancheData.c.distribution / total * 100).toFixed(2);
1053
+
1054
+ document.getElementById('dist-a').textContent = `${trancheData.a.distribution}M (${aPercent}%)`;
1055
+ document.getElementById('dist-b').textContent = `${trancheData.b.distribution}M (${bPercent}%)`;
1056
+ document.getElementById('dist-c').textContent = `${trancheData.c.distribution}M (${cPercent}%)`;
1057
+
1058
+ // Update distribution bars
1059
+ document.querySelector('#tranche-a-calc .bg-blue-600').style.width = `${aPercent}%`;
1060
+ document.querySelector('#tranche-b-calc .bg-green-500').style.width = `${bPercent}%`;
1061
+ document.querySelector('#tranche-c-calc .bg-red-500').style.width = `${cPercent}%`;
1062
+ }
1063
+
1064
+ // Initial calculations
1065
+ ['a', 'b', 'c'].forEach(tranche => calculateTrancheOffer(tranche));
1066
+ });
1067
+ </script>
1068
+ <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-07" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1069
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Keep all content and links modify REMIC Token Offer Window to show all content and submit buttons add scroll option if needed or simple make panel height larger