|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ContainerX Arbitrage FFFUND - AI-Powered Global Container Arbitrage SaaS</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%); |
|
|
} |
|
|
.container-card: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); |
|
|
} |
|
|
.animated-underline { |
|
|
position: relative; |
|
|
} |
|
|
.animated-underline:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #3b82f6; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.animated-underline:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
.marquee { |
|
|
animation: marquee 20s linear infinite; |
|
|
white-space: nowrap; |
|
|
} |
|
|
@keyframes marquee { |
|
|
0% { transform: translateX(0); } |
|
|
100% { transform: translateX(-50%); } |
|
|
} |
|
|
.ai-assistant { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
z-index: 1000; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.ai-assistant:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.fffund-payment { |
|
|
position: fixed; |
|
|
bottom: 110px; |
|
|
right: 30px; |
|
|
z-index: 1000; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.fffund-payment:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.ai-panel { |
|
|
position: fixed; |
|
|
bottom: 100px; |
|
|
right: 30px; |
|
|
width: 350px; |
|
|
max-height: 500px; |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
z-index: 999; |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.ai-panel.open { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
} |
|
|
.payment-panel { |
|
|
position: fixed; |
|
|
bottom: 190px; |
|
|
right: 30px; |
|
|
width: 350px; |
|
|
max-height: 400px; |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
z-index: 999; |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.payment-panel.open { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
} |
|
|
.ai-message { |
|
|
max-width: 80%; |
|
|
padding: 10px 15px; |
|
|
border-radius: 18px; |
|
|
margin-bottom: 10px; |
|
|
font-size: 14px; |
|
|
} |
|
|
.ai-message.user { |
|
|
background: #2563eb; |
|
|
color: white; |
|
|
margin-left: auto; |
|
|
border-bottom-right-radius: 5px; |
|
|
} |
|
|
.ai-message.bot { |
|
|
background: #f3f4f6; |
|
|
color: #111827; |
|
|
margin-right: auto; |
|
|
border-bottom-left-radius: 5px; |
|
|
} |
|
|
.typing-indicator { |
|
|
display: flex; |
|
|
padding: 10px 15px; |
|
|
} |
|
|
.typing-indicator span { |
|
|
height: 8px; |
|
|
width: 8px; |
|
|
background: #9ca3af; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
margin: 0 2px; |
|
|
animation: bounce 1.5s infinite ease-in-out; |
|
|
} |
|
|
.typing-indicator span:nth-child(2) { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
.typing-indicator span:nth-child(3) { |
|
|
animation-delay: 0.4s; |
|
|
} |
|
|
@keyframes bounce { |
|
|
0%, 60%, 100% { transform: translateY(0); } |
|
|
30% { transform: translateY(-5px); } |
|
|
} |
|
|
.process-step { |
|
|
position: relative; |
|
|
padding-left: 40px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
.process-step:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 15px; |
|
|
top: 0; |
|
|
height: 100%; |
|
|
width: 2px; |
|
|
background: #e5e7eb; |
|
|
} |
|
|
.process-step:last-child:before { |
|
|
display: none; |
|
|
} |
|
|
.process-step .step-number { |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
border-radius: 50%; |
|
|
background: #2563eb; |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
} |
|
|
.token-badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
background: rgba(245, 158, 11, 0.1); |
|
|
color: #f59e0b; |
|
|
padding: 2px 8px; |
|
|
border-radius: 9999px; |
|
|
font-size: 12px; |
|
|
font-weight: 500; |
|
|
} |
|
|
.token-badge i { |
|
|
margin-right: 4px; |
|
|
font-size: 10px; |
|
|
} |
|
|
.qr-code { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
margin: 0 auto; |
|
|
background: #f3f4f6; |
|
|
padding: 10px; |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
.qr-code img { |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
} |
|
|
.product-icon { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 48px; |
|
|
color: #3b82f6; |
|
|
} |
|
|
.electronics-icon { |
|
|
background-color: #e0f2fe; |
|
|
color: #1d4ed8; |
|
|
} |
|
|
.apparel-icon { |
|
|
background-color: #fce7f3; |
|
|
color: #be185d; |
|
|
} |
|
|
.industrial-icon { |
|
|
background-color: #ecfccb; |
|
|
color: #3f6212; |
|
|
} |
|
|
.api-mask { |
|
|
background-color: #f3f4f6; |
|
|
color: transparent; |
|
|
text-shadow: 0 0 8px rgba(0,0,0,0.5); |
|
|
user-select: none; |
|
|
} |
|
|
.api-mask:hover { |
|
|
color: inherit; |
|
|
text-shadow: none; |
|
|
} |
|
|
.fee-notice { |
|
|
font-size: 11px; |
|
|
color: #6b7280; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.fee-amount { |
|
|
color: #ef4444; |
|
|
font-weight: 600; |
|
|
} |
|
|
.market-recovery-badge { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
background: rgba(22, 163, 74, 0.9); |
|
|
color: white; |
|
|
padding: 4px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
.loading-spinner { |
|
|
border: 4px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 50%; |
|
|
border-top: 4px solid #3b82f6; |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
animation: spin 1s linear infinite; |
|
|
margin: 20px auto; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
.unisat-connected { |
|
|
background-color: #10b981 !important; |
|
|
} |
|
|
.unisat-not-connected { |
|
|
background-color: #ef4444 !important; |
|
|
} |
|
|
.fta-badge { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background: rgba(59, 130, 246, 0.9); |
|
|
color: white; |
|
|
padding: 4px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800"> |
|
|
|
|
|
<div class="ai-assistant"> |
|
|
<button id="aiAssistantBtn" class="w-16 h-16 rounded-full bg-blue-600 text-white shadow-xl flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fffund-payment"> |
|
|
<button id="fffundPaymentBtn" class="w-16 h-16 rounded-full bg-orange-500 text-white shadow-xl flex items-center justify-center"> |
|
|
<i class="fab fa-bitcoin text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="aiPanel" class="ai-panel"> |
|
|
<div class="bg-blue-600 text-white p-4 rounded-t-lg flex justify-between items-center"> |
|
|
<h3 class="font-bold">ContainerX Arbitrage FFFUND AI Assistant</h3> |
|
|
<button id="closeAiPanel" class="text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div id="aiChat" class="p-4 overflow-y-auto" style="max-height: 350px;"> |
|
|
<div class="ai-message bot"> |
|
|
Hello! I'm your ContainerX Arbitrage FFFUND AI assistant. How can I help with your arbitrage today? |
|
|
</div> |
|
|
<div class="ai-message bot"> |
|
|
I can help with: <br> |
|
|
• Finding best arbitrage opportunities<br> |
|
|
• Negotiating purchases<br> |
|
|
• Arranging logistics<br> |
|
|
• Connecting to distribution networks<br> |
|
|
• Market analysis |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200"> |
|
|
<div class="flex"> |
|
|
<input id="aiInput" type="text" placeholder="Ask me anything..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<button id="aiSendBtn" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-3 grid grid-cols-2 gap-2"> |
|
|
<button class="quick-action-btn bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs py-1 px-2 rounded" data-section="marketplace"> |
|
|
Find best deals |
|
|
</button> |
|
|
<button class="quick-action-btn bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs py-1 px-2 rounded" data-section="how-it-works"> |
|
|
How it works |
|
|
</button> |
|
|
<button class="quick-action-btn bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs py-1 px-2 rounded" data-section="token-integration"> |
|
|
Token payments |
|
|
</button> |
|
|
<button class="quick-action-btn bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs py-1 px-2 rounded" data-section="ai-benefits"> |
|
|
AI benefits |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="paymentPanel" class="payment-panel"> |
|
|
<div class="bg-orange-500 text-white p-4 rounded-t-lg flex justify-between items-center"> |
|
|
<h3 class="font-bold">FFFUND Token Payment</h3> |
|
|
<button id="closePaymentPanel" class="text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4 overflow-y-auto" style="max-height: 300px;"> |
|
|
<div class="text-center mb-4"> |
|
|
<div class="qr-code mb-3"> |
|
|
<img src="FFFUNDQRcode.png" alt="FFFUND Payment QR Code"> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-2">Scan to pay with FFFUND tokens or Fractal Bitcoin</p> |
|
|
<div class="token-badge inline-flex mb-3"> |
|
|
<i class="fas fa-coins"></i> |
|
|
<span>BRC-20: FFFUND</span> |
|
|
</div> |
|
|
<p class="text-sm font-medium text-gray-900 mb-1">Fractal Bitcoin Address:</p> |
|
|
<p class="text-xs text-gray-500 break-all mb-3">bc1qeycp5ucgz5se75hm557kp7v5ldv4sslmxvlcrm</p> |
|
|
<p class="text-sm font-medium text-gray-900 mb-1">Annuity Payment Address:</p> |
|
|
<p class="text-xs text-gray-500 break-all mb-3">bitcoincash:p0s64xlle0k46qswrdd63ekq3s030lgqrw9akx3f0nk48t38wl9fxgk9skjs3</p> |
|
|
<p class="fee-notice">* All payments include a <span class="fee-amount">0.5%</span> fee that goes to the Annuity payment address</p> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<h4 class="text-sm font-medium text-gray-900 mb-2">Payment Options:</h4> |
|
|
<div class="space-y-2"> |
|
|
<button id="reserveWithFffund" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 rounded-md text-sm font-medium"> |
|
|
Reserve Container with FFFUND |
|
|
</button> |
|
|
<button id="payFees" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-sm font-medium"> |
|
|
Pay Service Fees to Annuity |
|
|
</button> |
|
|
<button id="connectUnisat" class="w-full bg-gray-800 hover:bg-gray-900 text-white py-2 px-4 rounded-md text-sm font-medium"> |
|
|
<span id="unisatStatusText">Connect UNISAT Wallet</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-boxes text-blue-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-blue-600">ContainerX Arbitrage</span> |
|
|
<span class="token-badge ml-2">FFFUND</span> |
|
|
</div> |
|
|
<div class="hidden md:ml-10 md:flex md:space-x-8"> |
|
|
<a href="#marketplace" class="animated-underline inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium text-gray-500 hover:text-gray-700">Marketplace</a> |
|
|
<a href="#how-it-works" class="animated-underline inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium text-gray-500 hover:text-gray-700">How It Works</a> |
|
|
<a href="#token-integration" class="animated-underline inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium text-gray-500 hover:text-gray-700">Token</a> |
|
|
<a href="#ai-benefits" class="animated-underline inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium text-gray-500 hover:text-gray-700">AI Benefits</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium mr-4">Sign In</button> |
|
|
<button class="bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 px-4 py-2 rounded-md text-sm font-medium">Register</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center md:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> |
|
|
AI-Powered Container Arbitrage |
|
|
</h1> |
|
|
<p class="mt-6 max-w-2xl mx-auto text-xl"> |
|
|
Our AI assistant handles everything from purchase negotiation to distribution, maximizing your profits with minimal effort. |
|
|
</p> |
|
|
<div class="mt-10 flex justify-center space-x-4"> |
|
|
<a href="#marketplace" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-gray-50"> |
|
|
Browse Containers |
|
|
</a> |
|
|
<a href="#ai-benefits" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-800 bg-opacity-80 hover:bg-opacity-100"> |
|
|
Try AI Assistant |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<span class="token-badge inline-flex"> |
|
|
<i class="fas fa-coins"></i> |
|
|
<span>Pay with FFFUND BRC-20 tokens</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="how-it-works" class="bg-gray-50 py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">AI Features</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
End-to-End Arbitrage Automation |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Our AI handles the entire process while you focus on growing your business |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-3"> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> |
|
|
<i class="fas fa-handshake"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Smart Negotiation</h3> |
|
|
<p class="text-gray-600"> |
|
|
AI negotiates optimal purchase prices with suppliers using historical data and market conditions. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> |
|
|
<i class="fas fa-ship"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Logistics Automation</h3> |
|
|
<p class="text-gray-600"> |
|
|
Automatically books optimal shipping routes and handles all customs documentation. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> |
|
|
<i class="fas fa-network-wired"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Dynamic Marketshare Recovery</h3> |
|
|
<p class="text-gray-600"> |
|
|
Specializes in recovering lost marketshare from tariff-affected imports by identifying alternative sourcing strategies and distribution channels. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">How It Works</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
The AI-Assisted Arbitrage Process |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<div class="process-step"> |
|
|
<div class="step-number">1</div> |
|
|
<h3 class="text-lg font-bold text-gray-900">Opportunity Identification</h3> |
|
|
<p class="text-gray-600 mt-2"> |
|
|
AI analyzes global trade flows, tariff differentials, and demand patterns to identify the most profitable container arbitrage opportunities. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="process-step"> |
|
|
<div class="step-number">2</div> |
|
|
<h3 class="text-lg font-bold text-gray-900">Automated Negotiation</h3> |
|
|
<p class="text-gray-600 mt-2"> |
|
|
Our AI negotiates with suppliers using historical pricing data, current market conditions, and your specific requirements to secure the best deal. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="process-step"> |
|
|
<div class="step-number">3</div> |
|
|
<h3 class="text-lg font-bold text-gray-900">Logistics Coordination</h3> |
|
|
<p class="text-gray-600 mt-2"> |
|
|
AI books optimal shipping routes, handles all customs documentation, and provides real-time tracking throughout the journey. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="process-step"> |
|
|
<div class="step-number">4</div> |
|
|
<h3 class="text-lg font-bold text-gray-900">Distribution Management</h3> |
|
|
<p class="text-gray-600 mt-2"> |
|
|
Upon arrival, AI connects you with pre-vetted buyers or manages distribution through your interoperable partner network to maximize your returns. All payments are settled automatically through our tokenized system. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="process-step"> |
|
|
<div class="step-number">5</div> |
|
|
<h3 class="text-lg font-bold text-gray-900">Profit Optimization</h3> |
|
|
<p class="text-gray-600 mt-2"> |
|
|
Continuous learning from each transaction improves future arbitrage opportunities and profit margins. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="marketplace" class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">AI-Selected Deals</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Recent Arbitrage Opportunities |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Real-time container arbitrage opportunities from our global network |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="containerListings" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="loading-spinner"></div> |
|
|
<p class="text-center col-span-full">Loading recent arbitrage opportunities...</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<button id="refreshListings" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> |
|
|
<i class="fas fa-sync-alt mr-2"></i>Refresh Listings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="token-integration" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-orange-500 font-semibold tracking-wide uppercase">Token Integration</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
FFFUND BRC-20 Token Payments |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Secure, fast transactions using the Fabric Flow Fund token ecosystem |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-3"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mb-4"> |
|
|
<i class="fab fa-bitcoin"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">BRC-20 Standard</h3> |
|
|
<p class="text-gray-600"> |
|
|
FFFUND tokens operate on the Bitcoin blockchain using the BRC-20 standard for secure, transparent transactions. |
|
|
</p> |
|
|
<div class="mt-4"> |
|
|
<p class="text-xs text-gray-500 break-all">Token payments using FFFUND or Fractal Bitcoin are sent to Fractal Bitcoin address bc1qeycp5ucgz5se75hm557kp7v5ldv4sslmxvlcrm</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mb-4"> |
|
|
<i class="fas fa-wallet"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">UNISAT Integration</h3> |
|
|
<p class="text-gray-600"> |
|
|
Seamless integration with UNISAT wallet for easy token management and payments. |
|
|
</p> |
|
|
<div class="mt-4"> |
|
|
<p class="text-xs text-gray-500 break-all api-mask">f5e47d96f8af50a0388d814f6d0187663eab8924c35c8a4f2941ed39c6493959</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white mb-4"> |
|
|
<i class="fas fa-money-bill-wave"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Annuity Payments</h3> |
|
|
<p class="text-gray-600"> |
|
|
Service fees are automatically routed to the Fabric Flow Fund annuity for sustainable operations. |
|
|
</p> |
|
|
<div class="mt-4"> |
|
|
<p class="text-xs text-gray-500 break-all">The Annuity payment address is bitcoincash:p0s64xlle0k46qswrdd63ekq3s030lgqrw9akx3f0nk48t38wl9fxgk9skjs3</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-500 hover:bg-orange-600"> |
|
|
Learn More About FFFUND |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="ai-benefits" class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">AI Advantages</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Why Use AI for Container Arbitrage? |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4"> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Market Intelligence</h3> |
|
|
<p class="text-gray-600"> |
|
|
Processes millions of data points to identify the most profitable routes and products. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> |
|
|
<i class="fas fa-comments-dollar"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">24/7 Negotiation</h3> |
|
|
<p class="text-gray-600"> |
|
|
Negotiates with suppliers across time zones without fatigue or emotion. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> |
|
|
<i class="fas fa-file-contract"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Document Automation</h3> |
|
|
<p class="text-gray-600"> |
|
|
Generates and files all required shipping and customs documents instantly. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> |
|
|
<i class="fas fa-chart-network"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Network Effects</h3> |
|
|
<p class="text-gray-600"> |
|
|
Learns from all transactions to continuously improve deals for all users. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl"> |
|
|
<span class="block">Ready to automate your arbitrage business?</span> |
|
|
<span class="block">Get started with our AI assistant today.</span> |
|
|
</h2> |
|
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50"> |
|
|
Start Free Trial |
|
|
</a> |
|
|
</div> |
|
|
<div class="ml-3 inline-flex rounded-md shadow"> |
|
|
<a href="#ai-benefits" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 bg-opacity-60 hover:bg-opacity-70"> |
|
|
AI Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 text-white py-3 overflow-hidden"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center"> |
|
|
<span class="font-bold mr-4">Compliant Opportunities:</span> |
|
|
<div class="flex-1 overflow-hidden"> |
|
|
<div class="marquee"> |
|
|
<span class="mx-4">🇸🇬 Singapore → USA: Electronics 0% tariff (USSFTA)</span> |
|
|
<span class="mx-4">🇹🇼 Taiwan → USA: Semiconductors 0% tariff (US-Taiwan FTA)</span> |
|
|
<span class="mx-4">🇨🇳 China → USA: Select goods 0% tariff (Phase One Agreement)</span> |
|
|
<span class="mx-4">🇲🇾 Malaysia → USA: Rubber products 0% tariff (US-Malaysia FTA)</span> |
|
|
<span class="mx-4">🇻🇳 Vietnam → USA: Footwear 0% tariff (US-Vietnam FTA)</span> |
|
|
<span class="mx-4">FFFUND Price: $0.42 | Market Cap: $4.2M | 24h Vol: $120K</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Marketplace</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#marketplace" class="text-base text-gray-300 hover:text-white">Compliant Deals</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Tariff-Low-Free Products</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">New Arrivals</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Verified Suppliers</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">AI Services</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#how-it-works" class="text-base text-gray-300 hover:text-white">Automated Negotiation</a></li> |
|
|
<li><a href="#how-it-works" class="text-base text-gray-300 hover:text-white">Logistics Automation</a></li> |
|
|
<li><a href="#how-it-works" class="text-base text-gray-300 hover:text-white">Distribution Network</a></li> |
|
|
<li><a href="#ai-benefits" class="text-base text-gray-300 hover:text-white">Market Analysis</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Token</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#token-integration" class="text-base text-gray-300 hover:text-white">FFFUND BRC-20</a></li> |
|
|
<li><a href="#token-integration" class="text-base text-gray-300 hover:text-white">UNISAT Integration</a></li> |
|
|
<li><a href="#token-integration" class="text-base text-gray-300 hover:text-white">Annuity Payments</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Tokenomics</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Community</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Partnerships</a></li> |
|
|
<li class="flex space-x-6 mt-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> |
|
|
<p class="text-base text-gray-400"> |
|
|
© 2025 ContainerX Arbitrage FFFUND. SaaS. All rights reserved. |
|
|
</p> |
|
|
<div class="mt-4 md:mt-0 flex space-x-6"> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">Privacy Policy</a> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">Terms of Service</a> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">Token Agreement</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="paymentModal" class="fixed inset-0 z-50 overflow-y-auto hidden"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="sm:flex sm:items-start"> |
|
|
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-orange-100 sm:mx-0 sm:h-10 sm:w-10"> |
|
|
<i class="fas fa-coins text-orange-600"></i> |
|
|
</div> |
|
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modalTitle">Complete Payment with FFFUND</h3> |
|
|
<div class="mt-2"> |
|
|
<div id="paymentDetails" class="text-sm text-gray-500"> |
|
|
|
|
|
</div> |
|
|
<div id="paymentStatus" class="mt-4 hidden"> |
|
|
<div class="flex items-center"> |
|
|
<div class="loading-spinner mr-3"></div> |
|
|
<span id="statusText">Processing payment...</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button id="confirmPayment" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-orange-600 text-base font-medium text-white hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Confirm Payment |
|
|
</button> |
|
|
<button id="cancelPayment" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Cancel |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const UNISAT_API_KEY = '887328e7183cd88b6a4719a5b369819647ebda767fee072d18cde0c373dbf9cd'; |
|
|
const UNISAT_TESTNET_API_URL = 'https://open-api-testnet.unisat.io'; |
|
|
const FFFUND_TICKER = 'FFFUND'; |
|
|
const ARBITRAGE_API_URL = 'https://huggingface.co/spaces/privateuserh/fffund-containerarbitrage-db1'; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
let isUniSatConnected = false; |
|
|
let currentPayment = { |
|
|
type: '', |
|
|
amount: 0, |
|
|
containerId: null, |
|
|
containerName: '' |
|
|
}; |
|
|
|
|
|
|
|
|
const aiAssistantBtn = document.getElementById('aiAssistantBtn'); |
|
|
const aiPanel = document.getElementById('aiPanel'); |
|
|
const closeAiPanel = document.getElementById('closeAiPanel'); |
|
|
|
|
|
aiAssistantBtn.addEventListener('click', function() { |
|
|
aiPanel.classList.toggle('open'); |
|
|
paymentPanel.classList.remove('open'); |
|
|
}); |
|
|
|
|
|
closeAiPanel.addEventListener('click', function() { |
|
|
aiPanel.classList.remove('open'); |
|
|
}); |
|
|
|
|
|
|
|
|
const fffundPaymentBtn = document.getElementById('fffundPaymentBtn'); |
|
|
const paymentPanel = document.getElementById('paymentPanel'); |
|
|
const closePaymentPanel = document.getElementById('closePaymentPanel'); |
|
|
|
|
|
fffundPaymentBtn.addEventListener('click', function() { |
|
|
paymentPanel.classList.toggle('open'); |
|
|
aiPanel.classList.remove('open'); |
|
|
}); |
|
|
|
|
|
closePaymentPanel.addEventListener('click', function() { |
|
|
paymentPanel.classList.remove('open'); |
|
|
}); |
|
|
|
|
|
|
|
|
const reserveWithFffund = document.getElementById('reserveWithFffund'); |
|
|
const payFees = document.getElementById('payFees'); |
|
|
const connectUnisat = document.getElementById('connectUnisat'); |
|
|
const unisatStatusText = document.getElementById('unisatStatusText'); |
|
|
|
|
|
|
|
|
const paymentModal = document.getElementById('paymentModal'); |
|
|
const paymentDetails = document.getElementById('paymentDetails'); |
|
|
const paymentStatus = document.getElementById('paymentStatus'); |
|
|
const statusText = document.getElementById('statusText'); |
|
|
const confirmPayment = document.getElementById('confirmPayment'); |
|
|
const cancelPayment = document.getElementById('cancelPayment'); |
|
|
|
|
|
|
|
|
const refreshListings = document.getElementById('refreshListings'); |
|
|
refreshListings.addEventListener('click', fetchContainerListings); |
|
|
|
|
|
|
|
|
connectUnisat.addEventListener('click', async function() { |
|
|
if (typeof window.unisat === 'undefined') { |
|
|
alert('UniSat Wallet is not installed. Please install it first.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
try { |
|
|
|
|
|
connectUnisat.disabled = true; |
|
|
unisatStatusText.textContent = 'Connecting...'; |
|
|
|
|
|
|
|
|
const accounts = await window.unisat.requestAccounts(); |
|
|
if (accounts && accounts.length > 0) { |
|
|
isUniSatConnected = true; |
|
|
connectUnisat.classList.remove('bg-gray-800'); |
|
|
connectUnisat.classList.add('unisat-connected'); |
|
|
unisatStatusText.textContent = 'Connected: ' + accounts[0].substring(0, 6) + '...' + accounts[0].substring(accounts[0].length - 4); |
|
|
|
|
|
|
|
|
const balance = await getFffundBalance(accounts[0]); |
|
|
console.log('FFFUND Balance:', balance); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Error connecting to UniSat:', error); |
|
|
connectUnisat.classList.remove('bg-gray-800'); |
|
|
connectUnisat.classList.add('unisat-not-connected'); |
|
|
unisatStatusText.textContent = 'Connection Failed'; |
|
|
alert('Failed to connect to UniSat Wallet: ' + error.message); |
|
|
} finally { |
|
|
|
|
|
setTimeout(() => { |
|
|
connectUnisat.disabled = false; |
|
|
}, 1000); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
reserveWithFffund.addEventListener('click', function() { |
|
|
if (!isUniSatConnected) { |
|
|
alert('Please connect your UniSat Wallet first.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
currentPayment = { |
|
|
type: 'reserve', |
|
|
amount: 1000, |
|
|
containerId: 123, |
|
|
containerName: 'Electronics Mix (40HQ)' |
|
|
}; |
|
|
|
|
|
|
|
|
paymentDetails.innerHTML = ` |
|
|
<p>You are about to reserve <strong>${currentPayment.containerName}</strong> using FFFUND tokens.</p> |
|
|
<div class="mt-4 p-4 bg-gray-100 rounded-md"> |
|
|
<div class="flex justify-between"> |
|
|
<span>Container Price:</span> |
|
|
<strong>${currentPayment.amount} FFFUND</strong> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2"> |
|
|
<span>Service Fee (0.5%):</span> |
|
|
<strong>${(currentPayment.amount * 0.005).toFixed(2)} FFFUND</strong> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2 font-bold text-lg"> |
|
|
<span>Total:</span> |
|
|
<strong>${(currentPayment.amount * 1.005).toFixed(2)} FFFUND</strong> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 text-sm text-gray-500">This will create a BRC-20 transfer inscription for your payment.</p> |
|
|
`; |
|
|
|
|
|
paymentModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
payFees.addEventListener('click', function() { |
|
|
if (!isUniSatConnected) { |
|
|
alert('Please connect your UniSat Wallet first.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
currentPayment = { |
|
|
type: 'fee', |
|
|
amount: 50, |
|
|
containerId: null, |
|
|
containerName: 'Service Fee Payment' |
|
|
}; |
|
|
|
|
|
|
|
|
paymentDetails.innerHTML = ` |
|
|
<p>You are about to pay service fees to the Fabric Flow Fund annuity.</p> |
|
|
<div class="mt-4 p-4 bg-gray-100 rounded-md"> |
|
|
<div class="flex justify-between font-bold text-lg"> |
|
|
<span>Amount:</span> |
|
|
<strong>${currentPayment.amount} FFFUND</strong> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 text-sm text-gray-500">This will create a BRC-20 transfer inscription for your payment.</p> |
|
|
`; |
|
|
|
|
|
paymentModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
confirmPayment.addEventListener('click', async function() { |
|
|
if (!isUniSatConnected) { |
|
|
alert('Wallet connection lost. Please reconnect your UniSat Wallet.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
paymentStatus.classList.remove('hidden'); |
|
|
confirmPayment.disabled = true; |
|
|
cancelPayment.disabled = true; |
|
|
statusText.textContent = 'Creating payment inscription...'; |
|
|
|
|
|
try { |
|
|
|
|
|
const accounts = await window.unisat.getAccounts(); |
|
|
const address = accounts[0]; |
|
|
|
|
|
|
|
|
statusText.textContent = 'Preparing FFFUND transfer...'; |
|
|
const transferResult = await createFffundTransfer( |
|
|
address, |
|
|
currentPayment.type === 'reserve' ? |
|
|
'bc1qeycp5ucgz5se75hm557kp7v5ldv4sslmxvlcrm' : |
|
|
'bitcoincash:p0s64xlle0k46qswrdd63ekq3s030lgqrw9akx3f0nk48t38wl9fxgk9skjs3', |
|
|
currentPayment.amount |
|
|
); |
|
|
|
|
|
statusText.textContent = 'Payment successful!'; |
|
|
setTimeout(() => { |
|
|
paymentModal.classList.add('hidden'); |
|
|
paymentStatus.classList.add('hidden'); |
|
|
confirmPayment.disabled = false; |
|
|
cancelPayment.disabled = false; |
|
|
|
|
|
|
|
|
alert(`Payment of ${currentPayment.amount} FFFUND completed successfully!`); |
|
|
}, 2000); |
|
|
|
|
|
console.log('Payment result:', transferResult); |
|
|
} catch (error) { |
|
|
console.error('Payment error:', error); |
|
|
statusText.textContent = 'Payment failed: ' + error.message; |
|
|
confirmPayment.disabled = false; |
|
|
cancelPayment.disabled = false; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
cancelPayment.addEventListener('click', function() { |
|
|
paymentModal.classList.add('hidden'); |
|
|
paymentStatus.classList.add('hidden'); |
|
|
confirmPayment.disabled = false; |
|
|
cancelPayment.disabled = false; |
|
|
}); |
|
|
|
|
|
|
|
|
const aiChat = document.getElementById('aiChat'); |
|
|
const aiInput = document.getElementById('aiInput'); |
|
|
const aiSendBtn = document.getElementById('aiSendBtn'); |
|
|
const quickActionBtns = document.querySelectorAll('.quick-action-btn'); |
|
|
|
|
|
function addBotMessage(message) { |
|
|
|
|
|
const typingIndicator = document.createElement('div'); |
|
|
typingIndicator.className = 'typing-indicator'; |
|
|
typingIndicator.innerHTML = '<span></span><span></span><span></span>'; |
|
|
aiChat.appendChild(typingIndicator); |
|
|
|
|
|
|
|
|
aiChat.scrollTop = aiChat.scrollHeight; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
aiChat.removeChild(typingIndicator); |
|
|
|
|
|
|
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'ai-message bot'; |
|
|
messageDiv.textContent = message; |
|
|
aiChat.appendChild(messageDiv); |
|
|
|
|
|
|
|
|
aiChat.scrollTop = aiChat.scrollHeight; |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
function addUserMessage(message) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'ai-message user'; |
|
|
messageDiv.textContent = message; |
|
|
aiChat.appendChild(messageDiv); |
|
|
|
|
|
|
|
|
aiChat.scrollTop = aiChat.scrollHeight; |
|
|
} |
|
|
|
|
|
aiSendBtn.addEventListener('click', function() { |
|
|
const message = aiInput.value.trim(); |
|
|
if (message) { |
|
|
addUserMessage(message); |
|
|
aiInput.value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const responses = [ |
|
|
"I can help you find the best container arbitrage opportunities based on your criteria.", |
|
|
"Based on current market conditions, I recommend focusing on electronics from China to the US market with estimated 42% margins.", |
|
|
"I can negotiate with suppliers to get you better prices. Would you like me to proceed?", |
|
|
"I've identified 3 potential buyers in your target market who are interested in similar containers.", |
|
|
"The shipping logistics can be arranged automatically. Just confirm your purchase and I'll handle the rest." |
|
|
]; |
|
|
|
|
|
const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
|
|
addBotMessage(randomResponse); |
|
|
}, 1000); |
|
|
} |
|
|
}); |
|
|
|
|
|
aiInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
aiSendBtn.click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
quickActionBtns.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const section = this.getAttribute('data-section'); |
|
|
if (section) { |
|
|
|
|
|
aiPanel.classList.remove('open'); |
|
|
|
|
|
|
|
|
document.getElementById(section).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const containerCards = document.querySelectorAll('.container-card'); |
|
|
containerCards.forEach(card => { |
|
|
card.addEventListener('mouseenter', function() { |
|
|
this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const marquee = document.querySelector('.marquee'); |
|
|
if (marquee) { |
|
|
const contentWidth = marquee.scrollWidth; |
|
|
const viewportWidth = marquee.parentElement.offsetWidth; |
|
|
const duration = (contentWidth / viewportWidth) * 15; |
|
|
marquee.style.animationDuration = `${duration}s`; |
|
|
} |
|
|
|
|
|
|
|
|
async function fetchContainerListings() { |
|
|
const containerListings = document.getElementById('containerListings'); |
|
|
|
|
|
try { |
|
|
|
|
|
containerListings.innerHTML = ` |
|
|
<div class="loading-spinner"></div> |
|
|
<p class="text-center col-span-full">Loading recent arbitrage opportunities...</p> |
|
|
`; |
|
|
|
|
|
|
|
|
const response = await fetch(ARBITRAGE_API_URL); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`API request failed with status ${response.status}`); |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
|
|
|
containerListings.innerHTML = ''; |
|
|
|
|
|
|
|
|
if (!data || !data.length) { |
|
|
containerListings.innerHTML = ` |
|
|
<div class="col-span-full text-center py-8"> |
|
|
<i class="fas fa-info-circle text-blue-500 text-4xl mb-4"></i> |
|
|
<p class="text-gray-600">No recent arbitrage opportunities found. Please check back later.</p> |
|
|
</div> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
data.forEach(listing => { |
|
|
const category = listing.category || 'industrial'; |
|
|
const categoryClass = category === 'electronics' ? 'electronics-icon' : |
|
|
category === 'apparel' ? 'apparel-icon' : 'industrial-icon'; |
|
|
const icon = category === 'electronics' ? 'fas fa-laptop' : |
|
|
category === 'apparel' ? 'fas fa-tshirt' : 'fas fa-tools'; |
|
|
|
|
|
const statusBadge = listing.status === 'verified' ? |
|
|
'<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Verified</span>' : |
|
|
listing.status === 'new' ? |
|
|
'<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">New Listing</span>' : ''; |
|
|
|
|
|
const marketRecoveryBadge = listing.market_recovery ? |
|
|
'<div class="market-recovery-badge">Tariff Recovery</div>' : ''; |
|
|
|
|
|
const ftaBadge = listing.fta ? |
|
|
`<div class="fta-badge">${listing.fta}</div>` : ''; |
|
|
|
|
|
containerListings.innerHTML += ` |
|
|
<div class="container-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out"> |
|
|
<div class="relative pb-48 overflow-hidden"> |
|
|
<div class="absolute inset-0 h-full w-full ${categoryClass}"> |
|
|
<i class="${icon} product-icon"></i> |
|
|
</div> |
|
|
${marketRecoveryBadge} |
|
|
${ftaBadge} |
|
|
<div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full"> |
|
|
AI Recommended |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h3 class="text-lg font-medium text-gray-900">${listing.title || 'Container Load'}</h3> |
|
|
${statusBadge} |
|
|
</div> |
|
|
<div class="mt-2 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-map-marker-alt mr-1"></i> |
|
|
<span>${listing.origin || 'Unknown'} → ${listing.destination || 'Unknown'}</span> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<span class="text-sm text-gray-500">US Tariff Rate:</span> |
|
|
<p class="text-sm font-medium text-green-600">${listing.tariff || '0%'} ${listing.fta ? '('+listing.fta+')' : ''}</p> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<span class="text-sm text-gray-500">AI Profit Estimate:</span> |
|
|
<p class="text-sm font-medium text-green-600">${listing.roi || '40-60%'} ROI potential</p> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="text-sm text-gray-500">Purchase Price:</span> |
|
|
<p class="text-lg font-bold text-gray-900">$${(listing.price || 0).toLocaleString()}</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="text-sm text-gray-500">Est. Resale Value:</span> |
|
|
<p class="text-lg font-bold text-blue-600">$${(listing.est_value || 0).toLocaleString()}+</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex space-x-2"> |
|
|
<button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-sm font-medium"> |
|
|
Buy Now |
|
|
</button> |
|
|
<button class="flex-1 bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 py-2 px-4 rounded-md text-sm font-medium"> |
|
|
AI Negotiate |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-3 text-center"> |
|
|
<button class="text-xs text-orange-500 hover:text-orange-600 font-medium" onclick="showFffundPayment('${listing.title || 'Container'}', ${listing.price || 0})"> |
|
|
<i class="fas fa-coins mr-1"></i>Reserve with FFFUND |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
} catch (error) { |
|
|
console.error('Error fetching container listings:', error); |
|
|
containerListings.innerHTML = ` |
|
|
<div class="col-span-full text-center py-8"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 text-4xl mb-4"></i> |
|
|
<p class="text-gray-600">Failed to load container listings. Please try again later.</p> |
|
|
<button onclick="fetchContainerListings()" class="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-sm font-medium"> |
|
|
Retry |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
fetchContainerListings(); |
|
|
}); |
|
|
|
|
|
|
|
|
function showFffundPayment(containerName, price) { |
|
|
const paymentPanel = document.getElementById('paymentPanel'); |
|
|
const aiPanel = document.getElementById('aiPanel'); |
|
|
|
|
|
paymentPanel.classList.add('open'); |
|
|
aiPanel.classList.remove('open'); |
|
|
|
|
|
|
|
|
const fee = price * 0.005; |
|
|
const totalAmount = price + fee; |
|
|
|
|
|
|
|
|
console.log(`Preparing FFFUND payment for: ${containerName}`); |
|
|
console.log(`Container price: $${price.toFixed(2)}`); |
|
|
console.log(`Annuity fee (0.5%): $${fee.toFixed(2)}`); |
|
|
console.log(`Total amount to pay: $${totalAmount.toFixed(2)}`); |
|
|
|
|
|
|
|
|
const feeNotice = document.querySelector('.fee-notice'); |
|
|
if (feeNotice) { |
|
|
feeNotice.innerHTML = `* Includes <span class="fee-amount">0.5%</span> annuity fee of $${fee.toFixed(2)} (Total: $${totalAmount.toFixed(2)})`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function getFffundBalance(address) { |
|
|
try { |
|
|
const response = await fetch(`${UNISAT_TESTNET_API_URL}/v1/indexer/address/${address}/brc20/summary`, { |
|
|
method: 'GET', |
|
|
headers: { |
|
|
'accept': 'application/json', |
|
|
'Authorization': `Bearer ${UNISAT_API_KEY}` |
|
|
} |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`API request failed with status ${response.status}`); |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
const fffundData = data.detail.find(token => token.ticker === FFFUND_TICKER); |
|
|
|
|
|
return fffundData ? { |
|
|
available: fffundData.availableBalance, |
|
|
transferable: fffundData.transferableBalance |
|
|
} : { |
|
|
available: '0', |
|
|
transferable: '0' |
|
|
}; |
|
|
} catch (error) { |
|
|
console.error('Error fetching FFFUND balance:', error); |
|
|
throw error; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function createFffundTransfer(fromAddress, toAddress, amount) { |
|
|
try { |
|
|
|
|
|
const orderResponse = await fetch(`${UNISAT_TESTNET_API_URL}/v1/indexer/brc20/transfer-inscribe`, { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'accept': 'application/json', |
|
|
'Authorization': `Bearer ${UNISAT_API_KEY}`, |
|
|
'Content-Type': 'application/json' |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
"ticker": FFFUND_TICKER, |
|
|
"amount": amount.toString(), |
|
|
"feeRate": 1, |
|
|
"toAddress": toAddress |
|
|
}) |
|
|
}); |
|
|
|
|
|
if (!orderResponse.ok) { |
|
|
throw new Error(`Order creation failed with status ${orderResponse.status}`); |
|
|
} |
|
|
|
|
|
const orderData = await orderResponse.json(); |
|
|
console.log('Order created:', orderData); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
success: true, |
|
|
orderId: orderData.data.orderId, |
|
|
payAddress: orderData.data.payAddress, |
|
|
amount: orderData.data.amount, |
|
|
inscriptionId: 'simulated-inscription-id' |
|
|
}; |
|
|
} catch (error) { |
|
|
console.error('Error creating FFFUND transfer:', error); |
|
|
throw error; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function checkUniSatInstalled() { |
|
|
if (typeof window.unisat === 'undefined') { |
|
|
console.log('UniSat Wallet is not installed'); |
|
|
return false; |
|
|
} |
|
|
return true; |
|
|
} |
|
|
</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/fffund-containerarbitrage-1-00" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
