|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>UMBR Vessel Exchange Platform</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> |
|
|
:root { |
|
|
--primary: #0072ff; |
|
|
--primary-light: #00c6ff; |
|
|
--secondary: #220353; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.vessel-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.vessel-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.token-input { |
|
|
border: 2px solid #e2e8f0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.token-input:focus { |
|
|
border-color: var(--primary); |
|
|
box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.2); |
|
|
} |
|
|
|
|
|
.token-btn { |
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.token-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(0, 198, 255, 0.3); |
|
|
} |
|
|
|
|
|
.token-chip { |
|
|
background: rgba(0, 194, 255, 0.1); |
|
|
border: 1px solid rgba(0, 194, 255, 0.5); |
|
|
} |
|
|
|
|
|
.wave-bg { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
overflow: hidden; |
|
|
line-height: 0; |
|
|
} |
|
|
|
|
|
.wave-bg svg { |
|
|
position: relative; |
|
|
display: block; |
|
|
width: calc(100% + 1.3px); |
|
|
height: 150px; |
|
|
} |
|
|
|
|
|
.wave-bg .shape-fill { |
|
|
fill: #FFFFFF; |
|
|
} |
|
|
|
|
|
.transaction-step { |
|
|
position: relative; |
|
|
padding-left: 2rem; |
|
|
} |
|
|
|
|
|
.transaction-step:before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
height: 100%; |
|
|
width: 2px; |
|
|
background: linear-gradient(to bottom, var(--primary-light), var(--primary)); |
|
|
} |
|
|
|
|
|
.transaction-step:after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
left: -6px; |
|
|
top: 0; |
|
|
width: 14px; |
|
|
height: 14px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary); |
|
|
} |
|
|
|
|
|
.swap-window { |
|
|
position: fixed; |
|
|
bottom: 2rem; |
|
|
right: 2rem; |
|
|
width: 380px; |
|
|
max-height: 80vh; |
|
|
background: white; |
|
|
border-radius: 1rem; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
overflow: hidden; |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.swap-window.collapsed { |
|
|
height: 60px; |
|
|
} |
|
|
|
|
|
.swap-window.expanded { |
|
|
height: 500px; |
|
|
} |
|
|
|
|
|
.swap-iframe { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
.swap-header { |
|
|
padding: 1rem; |
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); |
|
|
color: white; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.swap-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 1.2rem; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.swap-content { |
|
|
height: calc(100% - 60px); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.floating-button { |
|
|
position: fixed; |
|
|
bottom: 2rem; |
|
|
right: 2rem; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); |
|
|
cursor: pointer; |
|
|
z-index: 1000; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.floating-button:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.mobile-menu { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.mobile-menu.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: white; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 12px; |
|
|
background: white; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.stat-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.list-vessel-button { |
|
|
position: fixed; |
|
|
bottom: 8rem; |
|
|
right: 2rem; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); |
|
|
cursor: pointer; |
|
|
z-index: 1000; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.list-vessel-button:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.list-vessel-tooltip { |
|
|
position: absolute; |
|
|
right: 70px; |
|
|
background: white; |
|
|
color: var(--primary); |
|
|
padding: 8px 12px; |
|
|
border-radius: 8px; |
|
|
font-size: 14px; |
|
|
font-weight: 600; |
|
|
white-space: nowrap; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.list-vessel-button:hover .list-vessel-tooltip { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.verified-badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
background-color: #e6f7ee; |
|
|
color: #10b759; |
|
|
padding: 4px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 14px; |
|
|
font-weight: 600; |
|
|
margin-left: 8px; |
|
|
} |
|
|
|
|
|
.verified-badge i { |
|
|
margin-right: 4px; |
|
|
} |
|
|
|
|
|
.legal-section { |
|
|
background-color: #f8f9fa; |
|
|
border-left: 4px solid var(--primary); |
|
|
padding: 1.5rem; |
|
|
margin: 1.5rem 0; |
|
|
} |
|
|
|
|
|
.legal-title { |
|
|
font-weight: 700; |
|
|
color: var(--primary); |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.yield-card { |
|
|
background: linear-gradient(135deg, rgba(0,198,255,0.1) 0%, rgba(0,114,255,0.1) 100%); |
|
|
border: 1px solid rgba(0,114,255,0.2); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.yield-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.profit-badge { |
|
|
background-color: #e6f7ee; |
|
|
color: #10b759; |
|
|
padding: 4px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 14px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.token-purchase-card { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 10px 30px rgba(0, 114, 255, 0.1); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.token-purchase-header { |
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); |
|
|
color: white; |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.token-purchase-body { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.token-amount-input { |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
text-align: center; |
|
|
padding: 1rem; |
|
|
border: 2px solid #e2e8f0; |
|
|
border-radius: 8px; |
|
|
width: 100%; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.token-amount-input:focus { |
|
|
border-color: var(--primary); |
|
|
box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.2); |
|
|
} |
|
|
|
|
|
.token-amount-slider { |
|
|
width: 100%; |
|
|
height: 8px; |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
background: #e2e8f0; |
|
|
border-radius: 4px; |
|
|
outline: none; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
|
|
|
.token-amount-slider::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary); |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.token-amount-slider::-webkit-slider-thumb:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.token-amount-slider::-moz-range-thumb { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary); |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.token-amount-slider::-moz-range-thumb:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.token-amount-options { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 0.5rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.token-amount-option { |
|
|
padding: 0.5rem; |
|
|
text-align: center; |
|
|
border: 1px solid #e2e8f0; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.token-amount-option:hover, .token-amount-option.active { |
|
|
background: rgba(0, 198, 255, 0.1); |
|
|
border-color: var(--primary); |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.token-receive-address { |
|
|
font-family: monospace; |
|
|
background: #f8f9fa; |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
word-break: break-all; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.qr-code-container { |
|
|
background: white; |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
display: inline-block; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.token-purchase-steps { |
|
|
counter-reset: step-counter; |
|
|
margin: 1.5rem 0; |
|
|
} |
|
|
|
|
|
.token-purchase-step { |
|
|
position: relative; |
|
|
padding-left: 3rem; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.token-purchase-step:before { |
|
|
counter-increment: step-counter; |
|
|
content: counter(step-counter); |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 2rem; |
|
|
height: 2rem; |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.token-purchase-note { |
|
|
background: #f8f9fa; |
|
|
border-left: 4px solid var(--primary); |
|
|
padding: 1rem; |
|
|
margin: 1rem 0; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.token-purchase-success { |
|
|
text-align: center; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.token-purchase-success-icon { |
|
|
font-size: 4rem; |
|
|
color: #10b759; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.token-purchase-success-title { |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.token-purchase-success-details { |
|
|
background: #f8f9fa; |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
margin: 1rem 0; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
|
|
|
.fab-container { |
|
|
position: fixed; |
|
|
bottom: 2rem; |
|
|
right: 2rem; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: flex-end; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.fab-main { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1001; |
|
|
} |
|
|
|
|
|
.fab-main:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.fab-menu { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: flex-end; |
|
|
margin-bottom: 10px; |
|
|
transition: all 0.3s ease; |
|
|
transform-origin: bottom; |
|
|
transform: scaleY(0); |
|
|
opacity: 0; |
|
|
height: 0; |
|
|
} |
|
|
|
|
|
.fab-menu.open { |
|
|
transform: scaleY(1); |
|
|
opacity: 1; |
|
|
height: auto; |
|
|
} |
|
|
|
|
|
.fab-item { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
background: white; |
|
|
color: var(--primary); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
|
|
cursor: pointer; |
|
|
margin-top: 10px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.fab-item:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.fab-tooltip { |
|
|
position: absolute; |
|
|
right: 60px; |
|
|
background: white; |
|
|
color: var(--primary); |
|
|
padding: 6px 10px; |
|
|
border-radius: 6px; |
|
|
font-size: 12px; |
|
|
font-weight: 600; |
|
|
white-space: nowrap; |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.fab-item:hover .fab-tooltip { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.token-amount-options { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
|
|
|
.swap-window { |
|
|
width: calc(100% - 2rem); |
|
|
right: 1rem; |
|
|
bottom: 1rem; |
|
|
} |
|
|
|
|
|
.fab-container { |
|
|
bottom: 1rem; |
|
|
right: 1rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<section class="gradient-bg text-white relative pb-20"> |
|
|
<div class="container mx-auto px-4 pt-12"> |
|
|
<div class="text-center"> |
|
|
<div class="flex justify-center items-center mb-4"> |
|
|
<i class="fas fa-ship text-3xl mr-2"></i> |
|
|
<h1 class="text-3xl font-bold">UMBR Vessel Exchange</h1> |
|
|
</div> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4">Sell Vessels/</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Utilize Bitcoin Cash (CHIP Protocol) Spot Market - blockchain to sell your vessel</p> |
|
|
</div> |
|
|
<div class="wave-bg"> |
|
|
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> |
|
|
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21, 0,0,0,321.39,56.44Z" class="shape-fill"></path> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Why Choose UMBR Vessel Exchange</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="stat-card p-8 text-center"> |
|
|
<div class="text-5xl font-bold text-blue-600 mb-4">12+</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Vessel Types Accepted</h3> |
|
|
<p class="text-gray-600">We accept a wide variety of vessels including yachts, cargo ships, fishing vessels, and more specialized watercraft.</p> |
|
|
</div> |
|
|
<div class="stat-card p-8 text-center"> |
|
|
<div class="text-5xl font-bold text-blue-600 mb-4">$10K-$10M</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Typical Transaction Value</h3> |
|
|
<p class="text-gray-600">Our platform specializes in mid to high-value vessel transactions with UMBR tokens.</p> |
|
|
</div> |
|
|
<div class="stat-card p-8 text-center"> |
|
|
<div class="text-5xl font-bold text-blue-600 mb-4">95%+</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Success Rate</h3> |
|
|
<p class="text-gray-600">When sellers follow all steps correctly, we achieve over 95% successful deal closure rate.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how-it-works" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">How The UMBR Vessel Exchange Works</h2> |
|
|
<div class="max-w-3xl mx-auto space-y-8"> |
|
|
<div class="transaction-step"> |
|
|
<h3 class="text-xl font-semibold mb-2">1. List Your Vessel</h3> |
|
|
<p class="text-gray-600">Sellers provide vessel details and set terms for the UMBR token exchange.</p> |
|
|
</div> |
|
|
<div class="transaction-step"> |
|
|
<h3 class="text-xl font-semibold mb-2">2. Buyer Makes Offer</h3> |
|
|
<p class="text-gray-600">International Umbrella or the International Umbrella Endowment submit offers in UMBR tokens through our secure platform.</p> |
|
|
</div> |
|
|
<div class="transaction-step"> |
|
|
<h3 class="text-xl font-semibold mb-2">3. Secure Transaction</h3> |
|
|
<p class="text-gray-600">UMBR tokens are transferred directly using Cash Token protocol for secure, trustless transactions.</p> |
|
|
</div> |
|
|
<div class="transaction-step"> |
|
|
<h3 class="text-xl font-semibold mb-2">4. Vessel Transfer</h3> |
|
|
<p class="text-gray-600">Vessel ownership is transferred to the International Umbrella Trust or Endowment.</p> |
|
|
</div> |
|
|
<div class="transaction-step"> |
|
|
<h3 class="text-xl font-semibold mb-2">5. Token Confirmation</h3> |
|
|
<p class="text-gray-600">UMBR tokens are confirmed in the seller's wallet upon successful vessel transfer.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="buy-umbr" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Buy UMBR Tokens Directly</h2> |
|
|
<div class="max-w-2xl mx-auto"> |
|
|
<div class="token-purchase-card"> |
|
|
<div class="token-purchase-header"> |
|
|
<h3 class="text-xl font-bold">UMBR Token Purchase</h3> |
|
|
<p class="text-blue-100">Current Spot Market Price: 0.00008131 BCH (~$0.02716 USD) Subject to change</p> |
|
|
</div> |
|
|
|
|
|
<div class="token-purchase-body"> |
|
|
<div id="purchaseForm"> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">Amount of UMBR Tokens</label> |
|
|
<input type="number" id="tokenAmount" class="token-amount-input" placeholder="1000" min="100" step="1" value="1000"> |
|
|
<input type="range" id="tokenAmountSlider" class="token-amount-slider" min="100" max="1000000" step="100" value="1000"> |
|
|
<div class="token-amount-options"> |
|
|
<div class="token-amount-option" data-amount="1000">1,000</div> |
|
|
<div class="token-amount-option" data-amount="5000">5,000</div> |
|
|
<div class="token-amount-option" data-amount="10000">10,000</div> |
|
|
<div class="token-amount-option" data-amount="50000">50,000</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-600"> |
|
|
<span>Min: 100 UMBR</span> |
|
|
<span>Max: 1,000,000 UMBR</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">BCH Amount (At the time of this printing-Subject to change)</label> |
|
|
<div class="bg-gray-100 p-4 rounded-lg text-center"> |
|
|
<span id="bchAmount" class="text-2xl font-bold">0.04153 BCH</span> |
|
|
<span id="usdAmount" class="text-gray-600 ml-2">(~$13.94 USD)</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">Your BCH Cash Token Address</label> |
|
|
<input type="text" id="bchAddress" class="token-input w-full p-3" placeholder="bitcoincash:qpm2..." pattern="^(bitcoincash:)?[qp][a-z0-9]{41}$"> |
|
|
<p class="text-sm text-gray-500 mt-1">Enter a Bitcoin Cash address that supports Cash Tokens</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" id="termsCheck" class="mr-2"> |
|
|
<span>I agree to the <a href="#legal" class="text-blue-600 hover:underline">terms and conditions</a></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<button id="generatePaymentBtn" class="token-btn w-full py-3 text-white font-bold rounded-lg mb-4"> |
|
|
Generate Payment Request |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="paymentDetails" class="hidden"> |
|
|
<div class="token-purchase-success"> |
|
|
<div class="token-purchase-success-icon"> |
|
|
<i class="fas fa-qrcode"></i> |
|
|
</div> |
|
|
<div class="token-purchase-success-title"> |
|
|
Send Payment to Receive UMBR Tokens |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Scan the QR code or copy the payment link below</p> |
|
|
|
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="qr-code-container border border-gray-200"> |
|
|
<canvas id="qrCodeCanvas"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="token-purchase-success-details"> |
|
|
<div class="mb-2"> |
|
|
<span class="text-gray-600">Amount:</span> |
|
|
<span id="paymentBchAmount" class="font-bold ml-2">0.04153 BCH</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="text-gray-600">Tokens:</span> |
|
|
<span id="paymentTokenAmount" class="font-bold ml-2">1,000 UMBR</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="text-gray-600">Receiving Address:</span> |
|
|
<span id="paymentAddress" class="font-mono text-sm break-all ml-2">bitcoincash:qpm2...</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-center space-y-2 md:space-y-0 md:space-x-2"> |
|
|
<button id="copyPaymentLink" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg"> |
|
|
<i class="fas fa-copy mr-2"></i> Copy Payment Link |
|
|
</button> |
|
|
<button id="openWallet" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"> |
|
|
<i class="fas fa-wallet mr-2"></i> Open in Wallet |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="token-purchase-note mt-4"> |
|
|
<p><i class="fas fa-info-circle mr-2 text-blue-600"></i> Your UMBR tokens will be sent automatically to your provided address once payment is confirmed (usually within 2-3 minutes).</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="paymentSuccess" class="hidden"> |
|
|
<div class="token-purchase-success"> |
|
|
<div class="token-purchase-success-icon"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<div class="token-purchase-success-title"> |
|
|
Payment Received! |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Your UMBR tokens have been sent to your address</p> |
|
|
|
|
|
<div class="token-purchase-success-details"> |
|
|
<div class="mb-2"> |
|
|
<span class="text-gray-600">Transaction ID:</span> |
|
|
<span id="successTxId" class="font-mono text-sm break-all ml-2">220353f009ecb0526359315175aaeffc7c2988f601cd77738cde70b9528e1369</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="text-gray-600">Tokens Sent:</span> |
|
|
<span id="successTokenAmount" class="font-bold ml-2">1,000 UMBR</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="text-gray-600">To Address:</span> |
|
|
<span id="successAddress" class="font-mono text-sm break-all ml-2">bitcoincash:qpm2...</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="newPurchaseBtn" class="token-btn w-full py-3 text-white font-bold rounded-lg mt-4"> |
|
|
<i class="fas fa-plus-circle mr-2"></i> New Purchase |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="token-purchase-steps mt-8"> |
|
|
<h3 class="text-xl font-bold mb-4">How to Purchase UMBR Tokens</h3> |
|
|
|
|
|
<div class="token-purchase-step"> |
|
|
<h4 class="font-semibold">1. Enter Purchase Details</h4> |
|
|
<p class="text-gray-600">Specify the amount of UMBR tokens you want to purchase and provide your BCH Cash Token aware address.</p> |
|
|
</div> |
|
|
|
|
|
<div class="token-purchase-step"> |
|
|
<h4 class="font-semibold">2. Generate Payment Request</h4> |
|
|
<p class="text-gray-600">Our system will create a payment request with the exact BCH amount needed for your UMBR tokens.</p> |
|
|
</div> |
|
|
|
|
|
<div class="token-purchase-step"> |
|
|
<h4 class="font-semibold">3. Send Payment</h4> |
|
|
<p class="text-gray-600">Scan the QR code or use the payment link with your Bitcoin Cash wallet to send the exact amount.</p> |
|
|
</div> |
|
|
|
|
|
<div class="token-purchase-step"> |
|
|
<h4 class="font-semibold">4. Receive Tokens Automatically</h4> |
|
|
<p class="text-gray-600">Your UMBR tokens will be sent to your provided address as soon as the payment is confirmed on the blockchain.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="token-purchase-note mt-8"> |
|
|
<h4 class="font-bold mb-2">About Cash Token Protocol</h4> |
|
|
<p class="text-gray-600">UMBR tokens are issued on the Bitcoin Cash blockchain using the Cash Token protocol (CHIP-2023-02). This allows for secure, trustless token transfers without the need for escrow services. The protocol ensures that only token-aware wallets can receive UMBR tokens, preventing accidental loss.</p> |
|
|
<p class="text-gray-600 mt-2">Learn more: <a href="https://cashtokens.org/docs/spec/chip" target="_blank" class="text-blue-600 hover:underline">Cash Token Specification</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="yield-farming" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Yield Farming with UMBR Tokens</h2> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="yield-card rounded-xl p-8 mb-8"> |
|
|
<h3 class="text-2xl font-bold mb-4 text-blue-600">Earn Passive Income with UMBR on Cauldron DEX</h3> |
|
|
<p class="text-gray-700 mb-6">Yield farming allows you to earn rewards on your cryptocurrency holdings by providing liquidity to decentralized exchanges (DEXs) like Cauldron. By pairing your BCH tokens with the UMBR token, you create a pool of funds that enables trading between these assets.</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-coins text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-lg font-semibold">0.3% APY</h4> |
|
|
</div> |
|
|
<p class="text-gray-600">Earn a 0.3% annual percentage yield on your BCH tokens by providing liquidity through your micro-pool.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-percentage text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-lg font-semibold">100% LP Ownership</h4> |
|
|
</div> |
|
|
<p class="text-gray-600">You retain complete ownership of your liquidity and earn 100% of the trading fees generated by your pool.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h4 class="text-xl font-semibold mb-4">Profit Potential Through Compounding</h4> |
|
|
<div class="bg-gray-50 p-6 rounded-lg mb-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Month 1</p> |
|
|
<p class="font-bold">$1,000</p> |
|
|
<p class="text-green-500">~$3 profit</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Month 2</p> |
|
|
<p class="font-bold">$1,003</p> |
|
|
<p class="text-green-500">~$3.03 profit</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Month 3</p> |
|
|
<p class="font-bold">$1,006.03</p> |
|
|
<p class="text-green-500">~$3.06 profit</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mt-4 text-center">With a long-term approach, your earnings grow through compounding as profits are reinvested.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-50 border border-blue-100 rounded-lg p-6 mb-6"> |
|
|
<h4 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-info-circle text-blue-600 mr-2"></i> How It Works |
|
|
</h4> |
|
|
<ol class="list-decimal pl-5 space-y-2 text-gray-700"> |
|
|
<li>Buy UMBR tokens (initial investment from $1,000 with no upper limit)</li> |
|
|
<li>Pair your UMBR tokens with BCH on Cauldron DEX</li> |
|
|
<li>Provide liquidity to create your micro-pool</li> |
|
|
<li>Earn 0.3% APY on all transactions through your pool</li> |
|
|
<li>Withdraw or compound your earnings at any time</li> |
|
|
</ol> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<a href="https://app.cauldron.quest/swap/220353f009ecb0526359315175aaeffc7c2988f601cd77738cde70b9528e1369" target="_blank" class="inline-flex items-center bg-blue-600 text-white px-8 py-3 rounded-lg font-bold hover:bg-blue-700 transition duration-300 mr-4"> |
|
|
<i class="fas fa-exchange-alt mr-2"></i> Start Yield Farming |
|
|
</a> |
|
|
<a href="#faq" class="inline-flex items-center bg-white text-blue-600 border border-blue-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition duration-300"> |
|
|
<i class="fas fa-question-circle mr-2"></i> Learn More in FAQ |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6"> |
|
|
<h4 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-600 mr-2"></i> Important Note |
|
|
</h4> |
|
|
<p class="text-gray-700">This information is for information purposes only and should not be considered financial advice. Cryptocurrency investments are inherently risky. Please conduct your own research before participating in yield farming or making any investment decisions.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="list-vessel" class="py-16 gradient-bg text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center mb-8">List Your Vessel for UMBR Tokens</h2> |
|
|
<form class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block mb-2 font-medium">Vessel Name</label> |
|
|
<input type="text" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-2 font-medium">Vessel Type</label> |
|
|
<select class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"> |
|
|
<option>Select Type</option> |
|
|
<option>Yacht</option> |
|
|
<option>Cargo Ship</option> |
|
|
<option>Fishing Vessel</option> |
|
|
<option>Tugboat</option> |
|
|
<option>Passenger Ship</option> |
|
|
<option>Research Vessel</option> |
|
|
<option>Oil Tanker</option> |
|
|
<option>Container Ship</option> |
|
|
<option>Bulk Carrier</option> |
|
|
<option>LNG Carrier</option> |
|
|
<option>Ro-Ro Ship</option> |
|
|
<option>Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-2 font-medium">Year Built</label> |
|
|
<input type="number" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-2 font-medium">Length (ft/m)</label> |
|
|
<input type="text" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-2 font-medium">Current Location</label> |
|
|
<input type="text" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block mb-2 font-medium">Asking Price (UMBR)</label> |
|
|
<input type="number" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label class="block mb-2 font-medium">Description</label> |
|
|
<textarea rows="4" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"></textarea> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label class="block mb-2 font-medium">Upload Photos</label> |
|
|
<div class="border-2 border-dashed border-white border-opacity-30 rounded-lg p-8 text-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-3xl mb-2"></i> |
|
|
<p>Drag & drop photos here or click to browse</p> |
|
|
<input type="file" class="hidden" multiple> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-2 flex items-center"> |
|
|
<input type="checkbox" id="terms" class="mr-2"> |
|
|
<label for="terms">I agree to the <a href="#legal" class="underline">Terms of Service</a> and understand my vessel will be transferred to the International Umbrella Trust or Endowment</label> |
|
|
</div> |
|
|
<div class="md:col-span-2 text-center"> |
|
|
<button type="submit" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition duration-300"> |
|
|
Submit Vessel Listing |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center mb-8">About UMBR Cash Tokens</h2> |
|
|
<div class="bg-white rounded-xl p-8 shadow-lg"> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Token Details</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<p class="text-gray-600">Token ID:</p> |
|
|
<p class="font-mono break-all">220353f009ecb0526359315175aaeffc7c2988f601cd77738cde70b9528e1369</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Token Symbol:</p> |
|
|
<p class="font-semibold">UMBR</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Decimals:</p> |
|
|
<p>8</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Blockchain:</p> |
|
|
<p>Bitcoin Cash (BCH)</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Yield Farming Information</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<p class="text-gray-600">Current Price:</p> |
|
|
<p>0.00004153 BCH (~0.0098 USD)</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">APY Potential:</p> |
|
|
<p>0.3% with compounding</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Minimum Investment:</p> |
|
|
<p>$1,000 (no upper limit)</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Liquidity Ownership:</p> |
|
|
<p>100% LP ownership and fees</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Explorers</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<a href="https://blockchair.com/bitcoin-cash/transaction/220353f009ecb0526359315175aaeffc7c2988f601cd77738cde70b9528e1369" target="_blank" class="flex items-center bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300"> |
|
|
<i class="fas fa-link mr-2"></i> Blockchair Explorer |
|
|
</a> |
|
|
</div> |
|
|
<div> |
|
|
<a href="https://tokenexplorer.cash/?tokenId=220353f009ecb0526359315175aaeffc7c2988f601cd77738cde70b9528e1369" target="_blank" class="flex items-center bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300"> |
|
|
<i class="fas fa-search mr-2"></i> Token Explorer |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Current Status</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<p class="text-gray-600">Transaction Status:</p> |
|
|
<p>In block 831,532 <span class="verified-badge"><i class="fas fa-check-circle"></i> Verified</span></p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Confirmations:</p> |
|
|
<p>63,317</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Primary DEX:</p> |
|
|
<p>Cauldron DEX</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600">Micro-pools:</p> |
|
|
<p>Active and earning</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">International Umbrella Endowment</h3> |
|
|
<div class="space-y-2"> |
|
|
<p>2029 Century Park E</p> |
|
|
<p>Los Angeles, CA 90067</p> |
|
|
<p>By Appointment Only</p> |
|
|
<p>Newly Registered Trust</p> |
|
|
<p>Established 7/17/2024</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-2">Contact & Community</h3> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="https://t.me/IntlUmbrella_Bot" class="flex items-center bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300"> |
|
|
<i class="fab fa-telegram mr-2"></i> Telegram Bot |
|
|
</a> |
|
|
<a href="https://t.me/+uX2CGmas6lM0NzUx" class="flex items-center bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300"> |
|
|
<i class="fab fa-telegram mr-2"></i> Private Channel |
|
|
</a> |
|
|
<a href="https://t.me/+kGT0MCqFotQwMzIx" class="flex items-center bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300"> |
|
|
<i class="fab fa-telegram mr-2"></i> Private Group |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 text-center text-gray-600"> |
|
|
<p>Note: This summary does not contain any legal or financial advice. Please consult with a professional for advice regarding specific transactions or business trusts.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="faq" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2> |
|
|
<div class="max-w-3xl mx-auto space-y-6"> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-300"> |
|
|
<h3 class="text-lg font-semibold text-left">How does the vessel transfer process work?</h3> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-2"> |
|
|
<p class="text-gray-600">When you list your vessel for UMBR tokens, the ownership will be transferred to either the International Umbrella Trust or the International Umbrella Endowment, depending on your preference and the specific terms of the transaction. Our legal team ensures all documentation is properly handled for a smooth transfer.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-300"> |
|
|
<h3 class="text-lg font-semibold text-left">How are UMBR token prices determined?</h3> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-2"> |
|
|
<p class="text-gray-600">UMBR token prices are determined by market forces on the Cauldron DEX and other supporting exchanges. The current price is approximately 0.00004153 BCH per token (about $0.0098 USD). Sellers can set their asking price in UMBR tokens based on their vessel's value and current market conditions.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-300"> |
|
|
<h3 class="text-lg font-semibold text-left">What types of vessels can be listed?</h3> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-2"> |
|
|
<p class="text-gray-600">We accept a wide range of vessels including yachts, cargo ships, fishing vessels, tugboats, passenger ships, research vessels, oil tankers, container ships, bulk carriers, LNG carriers, Ro-Ro ships, and other commercial or recreational watercraft. Each listing is reviewed to ensure it meets our platform standards before being published.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-300"> |
|
|
<h3 class="text-lg font-semibold text-left">How secure is the transaction process?</h3> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-2"> |
|
|
<p class="text-gray-600">All transactions are secured on the Bitcoin Cash blockchain using Cash Token protocol (CHIP-2023-02). This ensures token-aware validation and prevents accidental loss of tokens. The protocol provides native security features that make escrow services unnecessary for token transfers.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-300"> |
|
|
<h3 class="text-lg font-semibold text-left">What are the legal requirements for vessel transfer?</h3> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-2"> |
|
|
<p class="text-gray-600">Vessel transfers must comply with California law (585.0220 for title transfer and 585.8000 for vessels delivered outside California). The International Umbrella Trust or Endowment handles all documentation, including proper title transfer forms, tax payments, and registration with maritime authorities. For international transactions, additional regulations may apply.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-300"> |
|
|
<h3 class="text-lg font-semibold text-left">How does yield farming with UMBR tokens work?</h3> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-2"> |
|
|
<p class="text-gray-600">Yield farming with UMBR tokens involves:</p> |
|
|
<ol class="list-decimal pl-6 mt-2 space-y-1"> |
|
|
<li>Purchasing UMBR tokens (minimum $1,000 investment)</li> |
|
|
<li>Pairing them with BCH on Cauldron DEX</li> |
|
|
<li>Creating a micro-pool to provide liquidity</li> |
|
|
<li>Earning 0.3% APY on all trades through your pool</li> |
|
|
<li>Compounding your earnings or withdrawing at any time</li> |
|
|
</ol> |
|
|
<p class="mt-2 text-gray-600">You maintain 100% ownership of your liquidity and earn all fees generated by your pool.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-300"> |
|
|
<h3 class="text-lg font-semibold text-left">What is the profit potential from yield farming?</h3> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-2"> |
|
|
<p class="text-gray-600">With a $1,000 initial investment:</p> |
|
|
<ul class="list-disc pl-6 mt-2 space-y-1"> |
|
|
<li>Month 1: ~$3 profit (0.3% APY)</li> |
|
|
<li>Month 2: ~$3.03 profit (compounding)</li> |
|
|
<li>Month 3: ~$3.06 profit (continued compounding)</li> |
|
|
</ul> |
|
|
<p class="mt-2 text-gray-600">The more trades your pool facilitates (minimum 100 trades), the higher your potential earnings. There's no upper limit to the number of trades or potential profits.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-300"> |
|
|
<h3 class="text-lg font-semibold text-left">Can I withdraw my funds from yield farming at any time?</h3> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-2"> |
|
|
<p class="text-gray-600">Yes, your UMBR tokens paired with BCH can be swapped back at any time, allowing you to cash out your investment. You maintain complete control over your liquidity pool and can withdraw your funds whenever you choose.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-300"> |
|
|
<h3 class="text-lg font-semibold text-left">How does the Cash Token protocol work for UMBR?</h3> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden px-6 pb-6 pt-2"> |
|
|
<p class="text-gray-600">UMBR tokens are issued on Bitcoin Cash using the Cash Token protocol (CHIP-2023-02). This provides:</p> |
|
|
<ul class="list-disc pl-6 mt-2 space-y-1"> |
|
|
<li>Native token support at the protocol level</li> |
|
|
<li>Token-aware validation to prevent accidental transfers</li> |
|
|
<li>Secure, trustless transactions without escrow</li> |
|
|
<li>Low transaction fees (typically less than $0.01)</li> |
|
|
<li>Fast settlement (2-3 minutes for confirmation)</li> |
|
|
</ul> |
|
|
<p class="mt-2 text-gray-600">Learn more: <a href="https://cashtokens.org/docs/spec/chip" target="_blank" class="text-blue-600 hover:underline">Cash Token Specification</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 gradient-bg text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Ready to Exchange Your Vessel or Start Yield Farming?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Join the future of vessel transactions and decentralized finance on the Bitcoin Cash blockchain</p> |
|
|
<div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> |
|
|
<a href="#list-vessel" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition duration-300"> |
|
|
List Your Vessel Now |
|
|
</a> |
|
|
<a href="#buy-umbr" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition duration-300"> |
|
|
Buy UMBR Tokens |
|
|
</a> |
|
|
<a href="#yield-farming" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition duration-300"> |
|
|
Start Yield Farming |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-ship mr-2"></i> UMBR Vessel Exchange |
|
|
</h3> |
|
|
<p class="text-gray-400">The secure platform for vessel transactions using UMBR tokens on the Bitcoin Cash blockchain.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> |
|
|
<li><a href="#how-it-works" class="text-gray-400 hover:text-white transition duration-300">How It Works</a></li> |
|
|
<li><a href="#list-vessel" class="text-gray-400 hover:text-white transition duration-300">List Your Vessel</a></li> |
|
|
<li><a href="#buy-umbr" class="text-gray-400 hover:text-white transition duration-300">Buy UMBR</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Resources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#faq" class="text-gray-400 hover:text-white transition duration-300">FAQ</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About UMBR</a></li> |
|
|
<li><a href="https://cashtokens.org/docs/spec/chip" target="_blank" class="text-gray-400 hover:text-white transition duration-300">Cash Token Spec</a></li> |
|
|
<li><a href="https://tokenexplorer.cash/?tokenId=220353f009ecb0526359315175aaeffc7c2988f601cd77738cde70b9528e1369" target="_blank" class="text-gray-400 hover:text-white transition duration-300">Token Explorer</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Contact</h4> |
|
|
<address class="not-italic text-gray-400"> |
|
|
International Umbrella Endowment<br> |
|
|
2029 Century Park E<br> |
|
|
Los Angeles, CA 90067<br> |
|
|
By Appointment Only |
|
|
</address> |
|
|
<div class="mt-4 flex space-x-4"> |
|
|
<a href="https://t.me/IntlUmbrella_Bot" class="text-gray-400 hover:text-white transition duration-300 text-xl"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2024 International Umbrella Endowment. Established 7/17/2024. All rights reserved.</p> |
|
|
<p class="mt-2 text-sm">This platform does not provide legal or financial advice. Consult with professionals for specific guidance.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fab-container"> |
|
|
<div class="fab-menu" id="fabMenu"> |
|
|
<div class="fab-item relative" onclick="window.location.href='#buy-umbr'"> |
|
|
<i class="fas fa-coins"></i> |
|
|
<span class="fab-tooltip">Buy UMBR</span> |
|
|
</div> |
|
|
<div class="fab-item relative" onclick="window.location.href='#list-vessel'"> |
|
|
<i class="fas fa-ship"></i> |
|
|
<span class="fab-tooltip">List Vessel</span> |
|
|
</div> |
|
|
<div class="fab-item relative" onclick="window.location.href='#yield-farming'"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
<span class="fab-tooltip">Yield Farming</span> |
|
|
</div> |
|
|
<div class="fab-item relative" onclick="window.location.href='#faq'"> |
|
|
<i class="fas fa-question"></i> |
|
|
<span class="fab-tooltip">FAQ</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="fab-main" id="fabMain"> |
|
|
<i class="fas fa-bars" id="fabIcon"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="swapWindow" class="swap-window collapsed"> |
|
|
<div class="swap-header" id="swapHeader"> |
|
|
<h3 class="font-bold">UMBR Token Swap</h3> |
|
|
<button class="swap-toggle" id="swapToggle"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="swap-content"> |
|
|
<iframe src="https://app.cauldron.quest/swap/220353f009ecb0526359315175aaeffc7c2988f601cd77738cde70b9528e1369" class="swap-iframe"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/qrious.min.js"></script> |
|
|
|
|
|
<script> |
|
|
|
|
|
const fabMain = document.getElementById('fabMain'); |
|
|
const fabMenu = document.getElementById('fabMenu'); |
|
|
const fabIcon = document.getElementById('fabIcon'); |
|
|
|
|
|
fabMain.addEventListener('click', () => { |
|
|
fabMenu.classList.toggle('open'); |
|
|
fabIcon.classList.toggle('fa-bars'); |
|
|
fabIcon.classList.toggle('fa-times'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!fabMain.contains(e.target) && !fabMenu.contains(e.target)) { |
|
|
fabMenu.classList.remove('open'); |
|
|
fabIcon.classList.remove('fa-times'); |
|
|
fabIcon.classList.add('fa-bars'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.faq-toggle').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const content = button.nextElementSibling; |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
|
|
|
content.classList.toggle('hidden'); |
|
|
|
|
|
|
|
|
icon.classList.toggle('rotate-180'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.faq-toggle').forEach(otherButton => { |
|
|
if (otherButton !== button) { |
|
|
otherButton.nextElementSibling.classList.add('hidden'); |
|
|
otherButton.querySelector('i').classList.remove('rotate-180'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const swapWindow = document.getElementById('swapWindow'); |
|
|
const swapToggle = document.getElementById('swapToggle'); |
|
|
const swapHeader = document.getElementById('swapHeader'); |
|
|
|
|
|
|
|
|
swapToggle.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
swapWindow.classList.toggle('collapsed'); |
|
|
swapWindow.classList.toggle('expanded'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!swapWindow.contains(e.target)) { |
|
|
swapWindow.classList.add('collapsed'); |
|
|
swapWindow.classList.remove('expanded'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
swapWindow.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
}); |
|
|
|
|
|
|
|
|
const tokenAmountInput = document.getElementById('tokenAmount'); |
|
|
const tokenAmountSlider = document.getElementById('tokenAmountSlider'); |
|
|
const bchAmountDisplay = document.getElementById('bchAmount'); |
|
|
const usdAmountDisplay = document.getElementById('usdAmount'); |
|
|
const tokenAmountOptions = document.querySelectorAll('.token-amount-option'); |
|
|
const bchAddressInput = document.getElementById('bchAddress'); |
|
|
const termsCheck = document.getElementById('termsCheck'); |
|
|
const generatePaymentBtn = document.getElementById('generatePaymentBtn'); |
|
|
const purchaseForm = document.getElementById('purchaseForm'); |
|
|
const paymentDetails = document.getElementById('paymentDetails'); |
|
|
const paymentSuccess = document.getElementById('paymentSuccess'); |
|
|
|
|
|
|
|
|
const tokenPriceBCH = 0.00004153; |
|
|
const tokenPriceUSD = 0.0098; |
|
|
|
|
|
function calculateAmounts() { |
|
|
const tokenAmount = parseFloat(tokenAmountInput.value) || 0; |
|
|
const bchAmount = tokenAmount * tokenPriceBCH; |
|
|
const usdAmount = tokenAmount * tokenPriceUSD; |
|
|
|
|
|
bchAmountDisplay.textContent = bchAmount.toFixed(8) + ' BCH'; |
|
|
usdAmountDisplay.textContent = `(~$${usdAmount.toFixed(2)} USD)`; |
|
|
} |
|
|
|
|
|
|
|
|
tokenAmountInput.addEventListener('input', () => { |
|
|
tokenAmountSlider.value = tokenAmountInput.value; |
|
|
calculateAmounts(); |
|
|
}); |
|
|
|
|
|
tokenAmountSlider.addEventListener('input', () => { |
|
|
|
|
|
</html> |
