Spaces:

privateuserh
/

privvesexch-vbeta1-05

Running

App Files Files Community

privateuserh commited on Apr 20

Commit

1e51ae4

verified ·

1 Parent(s): bf5be37

Add 2 files

Browse files

Files changed (2) hide show

index.html +163 -111
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -482,6 +482,94 @@
             text-align: left;
         }
         @media (max-width: 768px) {
             .token-amount-options {
                 grid-template-columns: repeat(2, 1fr);
@@ -493,64 +581,24 @@
                 bottom: 1rem;
             }
-            .floating-button, .list-vessel-button {
-                right: 1rem;
                 bottom: 1rem;
-            }
-            .list-vessel-button {
-                bottom: 5rem;
             }
         }
     </style>
 </head>
 <body class="font-sans bg-gray-50">
-    <!-- Header -->
-    <header class="gradient-bg text-white sticky top-0 z-50">
-        <div class="container mx-auto px-4 py-4">
-            <div class="flex justify-between items-center">
-                <div class="flex items-center space-x-2">
-                    <i class="fas fa-ship text-2xl"></i>
-                    <h1 class="text-2xl font-bold">UMBR Vessel Exchange</h1>
                 </div>
-                <nav class="hidden md:flex space-x-6 items-center">
-                    <a href="#" class="nav-link hover:underline">Home</a>
-                    <a href="#how-it-works" class="nav-link hover:underline">How It Works</a>
-                    <a href="#list-vessel" class="nav-link hover:underline">List Vessel</a>
-                    <a href="#yield-farming" class="nav-link hover:underline">Yield Farming</a>
-                    <a href="#buy-umbr" class="nav-link hover:underline">Buy UMBR</a>
-                    <a href="#about" class="nav-link hover:underline">About</a>
-                    <a href="#faq" class="nav-link hover:underline">FAQ</a>
-                </nav>
-                <button id="mobileMenuButton" class="md:hidden text-2xl focus:outline-none">
-                    <i class="fas fa-bars"></i>
-                </button>
-            </div>
-            <!-- Mobile Menu -->
-            <div id="mobileMenu" class="mobile-menu md:hidden bg-blue-700 rounded-lg mt-2">
-                <div class="flex flex-col space-y-2 p-4">
-                    <a href="#" class="block py-2 px-4 rounded hover:bg-blue-600 transition" onclick="closeMobileMenu()">Home</a>
-                    <a href="#how-it-works" class="block py-2 px-4 rounded hover:bg-blue-600 transition" onclick="closeMobileMenu()">How It Works</a>
-                    <a href="#list-vessel" class="block py-2 px-4 rounded hover:bg-blue-600 transition" onclick="closeMobileMenu()">List Vessel</a>
-                    <a href="#yield-farming" class="block py-2 px-4 rounded hover:bg-blue-600 transition" onclick="closeMobileMenu()">Yield Farming</a>
-                    <a href="#buy-umbr" class="block py-2 px-4 rounded hover:bg-blue-600 transition" onclick="closeMobileMenu()">Buy UMBR</a>
-                    <a href="#about" class="block py-2 px-4 rounded hover:bg-blue-600 transition" onclick="closeMobileMenu()">About</a>
-                    <a href="#faq" class="block py-2 px-4 rounded hover:bg-blue-600 transition" onclick="closeMobileMenu()">FAQ</a>
-                </div>
-            </div>
-            <div class="mt-12 mb-20 text-center">
-                <h2 class="text-4xl md:text-5xl font-bold mb-4">Sell your Vessel(s)</h2>
                 <p class="text-xl mb-8 max-w-2xl mx-auto">The secure platform for vessel transactions 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-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">
-                        <i class="fas fa-plus-circle mr-2"></i> List Your Vessel
-                    </a>
-                    <a href="#buy-umbr" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition duration-300">
-                        <i class="fas fa-coins mr-2"></i> Buy UMBR Tokens
-                    </a>
-                </div>
             </div>
             <div class="wave-bg">
                 <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
@@ -558,7 +606,7 @@
                 </svg>
             </div>
         </div>
-    </header>
     <!-- Stats Section -->
     <section class="py-12 bg-white">
@@ -568,10 +616,10 @@
                 <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, sail boats, 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">$1M-$50M</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>
@@ -651,7 +699,7 @@
                             </div>
                             <div class="mb-6">
-                                <label class="block text-gray-700 mb-2">Your BCH Cash Token Aware 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>
@@ -1232,15 +1280,29 @@
         </div>
     </footer>
-    <!-- Floating List Vessel Button -->
-    <div id="listVesselButton" class="list-vessel-button">
-        <i class="fas fa-plus-circle text-2xl"></i>
-        <span class="list-vessel-tooltip">List Your Vessel</span>
-    </div>
-    <!-- Floating Swap Button -->
-    <div id="swapButton" class="floating-button">
-        <i class="fas fa-exchange-alt text-2xl"></i>
     </div>
     <!-- Swap Window -->
@@ -1260,36 +1322,23 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/qrious.min.js"></script>
     <script>
-        // Mobile menu functionality
-        const mobileMenuButton = document.getElementById('mobileMenuButton');
-        const mobileMenu = document.getElementById('mobileMenu');
-        function toggleMobileMenu() {
-            mobileMenu.classList.toggle('open');
-            // Change icon based on menu state
-            const icon = mobileMenuButton.querySelector('i');
-            if (mobileMenu.classList.contains('open')) {
-                icon.classList.remove('fa-bars');
-                icon.classList.add('fa-times');
-            } else {
-                icon.classList.remove('fa-times');
-                icon.classList.add('fa-bars');
-            }
-        }
-        function closeMobileMenu() {
-            mobileMenu.classList.remove('open');
-            const icon = mobileMenuButton.querySelector('i');
-            icon.classList.remove('fa-times');
-            icon.classList.add('fa-bars');
-        }
-        mobileMenuButton.addEventListener('click', toggleMobileMenu);
-        // Close mobile menu when clicking outside
         document.addEventListener('click', (e) => {
-            if (!mobileMenu.contains(e.target) && e.target !== mobileMenuButton) {
-                closeMobileMenu();
             }
         });
@@ -1325,9 +1374,6 @@
                 const targetElement = document.querySelector(targetId);
                 if (targetElement) {
-                    // Close mobile menu if open
-                    closeMobileMenu();
                     targetElement.scrollIntoView({
                         behavior: 'smooth'
                     });
@@ -1336,17 +1382,10 @@
         });
         // Swap window functionality
-        const swapButton = document.getElementById('swapButton');
         const swapWindow = document.getElementById('swapWindow');
         const swapToggle = document.getElementById('swapToggle');
         const swapHeader = document.getElementById('swapHeader');
-        // Toggle swap window
-        swapButton.addEventListener('click', () => {
-            swapWindow.classList.remove('collapsed');
-            swapWindow.classList.add('expanded');
-        });
         // Toggle swap window collapse
         swapToggle.addEventListener('click', (e) => {
             e.stopPropagation();
@@ -1356,7 +1395,7 @@
         // Close swap window when clicking outside
         document.addEventListener('click', (e) => {
-            if (!swapWindow.contains(e.target) && e.target !== swapButton) {
                 swapWindow.classList.add('collapsed');
                 swapWindow.classList.remove('expanded');
             }
@@ -1367,14 +1406,6 @@
             e.stopPropagation();
         });
-        // List Vessel Button functionality
-        const listVesselButton = document.getElementById('listVesselButton');
-        listVesselButton.addEventListener('click', () => {
-            document.getElementById('list-vessel').scrollIntoView({
-                behavior: 'smooth'
-            });
-        });
         // Token Purchase Functionality
         const tokenAmountInput = document.getElementById('tokenAmount');
         const tokenAmountSlider = document.getElementById('tokenAmountSlider');
@@ -1388,4 +1419,25 @@
         const paymentDetails = document.getElementById('paymentDetails');
         const paymentSuccess = document.getElementById('paymentSuccess');
 </html>

             text-align: left;
         }
+        /* Floating Action Buttons */
+        .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);
                 bottom: 1rem;
             }
+            .fab-container {
                 bottom: 1rem;
+                right: 1rem;
             }
         }
     </style>
 </head>
 <body class="font-sans bg-gray-50">
+    <!-- Hero Section -->
+    <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 or Buy Vessels with UMBR Tokens</h2>
                 <p class="text-xl mb-8 max-w-2xl mx-auto">The secure platform for vessel transactions on the Bitcoin Cash blockchain</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">
                 </svg>
             </div>
         </div>
+    </section>
     <!-- Stats Section -->
     <section class="py-12 bg-white">
                 <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>
                             <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>
     </footer>
+    <!-- Floating Action Buttons -->
+    <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>
     <!-- Swap Window -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/qrious.min.js"></script>
     <script>
+        // Floating Action Button functionality
+        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');
+        });
+        // Close FAB menu when clicking outside
         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');
             }
         });
                 const targetElement = document.querySelector(targetId);
                 if (targetElement) {
                     targetElement.scrollIntoView({
                         behavior: 'smooth'
                     });
         });
         // Swap window functionality
         const swapWindow = document.getElementById('swapWindow');
         const swapToggle = document.getElementById('swapToggle');
         const swapHeader = document.getElementById('swapHeader');
         // Toggle swap window collapse
         swapToggle.addEventListener('click', (e) => {
             e.stopPropagation();
         // Close swap window when clicking outside
         document.addEventListener('click', (e) => {
+            if (!swapWindow.contains(e.target)) {
                 swapWindow.classList.add('collapsed');
                 swapWindow.classList.remove('expanded');
             }
             e.stopPropagation();
         });
         // Token Purchase Functionality
         const tokenAmountInput = document.getElementById('tokenAmount');
         const tokenAmountSlider = document.getElementById('tokenAmountSlider');
         const paymentDetails = document.getElementById('paymentDetails');
         const paymentSuccess = document.getElementById('paymentSuccess');
+        // Token price calculation
+        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)`;
+        }
+        // Update amounts when inputs change
+        tokenAmountInput.addEventListener('input', () => {
+            tokenAmountSlider.value = tokenAmountInput.value;
+            calculateAmounts();
+        });
+        tokenAmountSlider.addEventListener('input', () => {
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- Make the layout more user friendly and fine tune the purchasing module to complete the purchase via the site without escrow add a BCH Cash token aware address the user can input to receive UMBR tokens reference https://cashtokens.org/docs/spec/chip https://cashtokens.org/docs/spec/chip/#token-aware-transaction-validation


1	+ Make the layout more user friendly and fine tune the purchasing module to complete the purchase via the site without escrow add a BCH Cash token aware address the user can input to receive UMBR tokens reference https://cashtokens.org/docs/spec/chip https://cashtokens.org/docs/spec/chip/#token-aware-transaction-validation
2	+ Use floating buttons to make the site more user friendly and remove the top panel in the layout