Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3100s™ California Films Project</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> | |
| body { | |
| background-color: #f8f9fa; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #10b981); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| <style> | |
| /* General page styling */ | |
| body { | |
| background-color: #000000; | |
| color: #00FF41; /* Classic green terminal color */ | |
| font-family: 'Courier New', Courier, monospace; | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| /* The container for our "terminal" window */ | |
| .terminal-window { | |
| width: 80%; | |
| max-width: 600px; | |
| background-color: #0A0A0A; | |
| border: 1px solid #00FF41; | |
| border-radius: 5px; | |
| padding: 25px; | |
| box-shadow: 0 0 15px rgba(0, 255, 65, 0.4); | |
| } | |
| /* The element where the text will be typed */ | |
| #computer-text { | |
| font-size: 1.2rem; | |
| white-space: pre-wrap; /* Allows text to wrap but preserves whitespace */ | |
| } | |
| /* The blinking cursor effect */ | |
| #computer-text::after { | |
| content: '█'; /* You can also use an underscore: '_' */ | |
| display: inline-block; | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { color: transparent; } | |
| 50% { color: #00FF41; } | |
| } | |
| </style> | |
| <style> | |
| /* CSS for Floating Button and Ledger Modal */ | |
| .fab { | |
| position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; | |
| background-color: #007bff; color: white; border-radius: 50%; border: none; | |
| box-shadow: 0 6px 15px rgba(0,0,0,0.2); font-size: 28px; | |
| display: none; /* Hidden by default until user logs in */ | |
| align-items: center; justify-content: center; cursor: pointer; | |
| z-index: 999; | |
| } | |
| .modal-overlay { | |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; | |
| background: rgba(0, 0, 0, 0.6); display: none; | |
| align-items: center; justify-content: center; z-index: 1000; | |
| } | |
| .modal-content { | |
| background: white; padding: 30px; border-radius: 12px; | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.15); width: 90%; max-width: 450px; | |
| } | |
| .modal-content h3 { margin-top: 0; color: #333; text-align: center; } | |
| .input-group { margin-bottom: 18px; } | |
| .input-group label { display: block; margin-bottom: 6px; font-weight: 500; } | |
| .input-group input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } | |
| .form-actions { display: none; justify-content: space-between; margin-top: 25px; } | |
| .form-actions button { padding: 12px 20px; border-radius: 6px; border: none; font-size: 16px; cursor: pointer; } | |
| .btn-submit { background-color: #28a745; color: white; } | |
| .btn-cancel { background-color: #f1f1f1; color: #333; } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="forceLogoutBtn" style="padding: 10px; font-weight: bold; margin: 20px;">Force Logout / Reset Session</button> | |
| <div class="terminal-window"> | |
| <div id="computer-text"></div> | |
| </div> | |
| <script> | |
| // --- Configuration --- | |
| const textToType = `INITIALIZING JOINT VENTURE 3.100_s...\n` + | |
| `ACCESSING CORE MODULES...\n` + | |
| `[OK] Points Matrix Loaded.\n` + | |
| `[OK] S.100_s Verified.\n` + | |
| `[OK] Ascendant dev in progress.\n\n` + | |
| `STATUS: ALL SYSTEMS NOMINAL.\n` + | |
| `EXECUTING PRIMARY DIRECTIVE...`; | |
| const typingSpeed = 50; // Milliseconds between each character | |
| // --- Logic --- | |
| const textElement = document.getElementById('computer-text'); | |
| let charIndex = 0; | |
| function type() { | |
| if (charIndex < textToType.length) { | |
| textElement.textContent += textToType.charAt(charIndex); | |
| charIndex++; | |
| setTimeout(type, typingSpeed); | |
| } | |
| } | |
| // Start the typing effect when the page loads | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| type(); | |
| }); | |
| </script> | |
| </head> | |
| <body class="min-h-screen bg-gray-50 flex flex-col"> | |
| <main class="flex-grow flex flex-col items-center justify-center p-4 text-center"> | |
| <h1 class="text-lg md:text-6xl font-bold mb-4 gradient-text"><b>3.100_s</b> Joint Venture/</h1> | |
| <p class="text-xs md:text-0.1xl text-gray-600">Film Tax Incentives & Transferable Tax Credits {B/On Eligibility}</p> | |
| <p class="text-xs md:text-x0.10 text-gray-600 mt-2">Benefits: Annuitized Earnings • Blockchain Tokens w/ Yield% Farming</p> | |
| <br> | |
| <p class="text-xs md:text-x0.10 text-gray-600 mt-2">3100s 1901 Avenue of the Stars / Silicon Beach / By Appointment Only</p> | |
| <p class="text-xs md:text-x0.10 text-gray-600 mt-2">3100s a registered California Joint Venture (California Films Project) a private SaaS Dev/. Inception date: 6.10.2025. 3100s™ - 2025. All Rights Reserved. § 1.482-4 (b) (4)(5) §1.482-4(f)(3) § 6132 (h)(1) Section 798.3 Notice 2014-21</p> | |
| </main> | |
| <div class="fixed bottom-6 left-6 z-50"> | |
| <button id="togglePrivacy" class="bg-gray-700 hover:bg-gray-800 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-110"> | |
| <i class="fas fa-shield-alt text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="fixed bottom-6 right-6 z-50"> | |
| <button id="togglePanel" class="bg-blue-600 hover:bg-blue-700 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-110"> | |
| <i class="fas fa-id-card text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="fixed bottom-6 right-24 z-50"> | |
| <button id="toggleCalculator" class="bg-green-600 hover:bg-green-700 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-110"> | |
| <i class="fas fa-percent text-2xl"></i> | |
| </button> | |
| </div> | |
| <div id="floatingPanel" class="fixed bottom-24 right-6 w-80 bg-white rounded-xl shadow-xl p-6 hidden opacity-0 transition-all duration-300 transform translate-y-4 z-40"> | |
| <div id="formContainer"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-gray-800">Indicate Your Interest</h3> | |
| <button id="closePanel" class="text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button> | |
| </div> | |
| <p class="text-gray-600 mb-4 text-sm">Complete this form to participate. Your unique ID will serve as your placeholder.</p> | |
| <form id="interestForm" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> | |
| <input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <button type="submit" id="submitButton" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300 flex items-center justify-center"> | |
| <span id="buttonText">Generate Unique ID</span><i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="successMessage" class="hidden text-center"> | |
| <div class="text-green-500"><i class="fas fa-check-circle fa-3x"></i></div> | |
| <h4 class="text-lg font-semibold text-gray-800 mt-3">Success!</h4> | |
| <p class="text-gray-600 mt-1">Your unique ID is:</p> | |
| <p id="uniqueIDDisplay" class="font-bold text-lg text-gray-800 bg-gray-100 rounded-md py-2 mt-2"></p> | |
| <p class="mt-3 text-sm text-gray-500">We'll be in touch soon!</p> | |
| <button id="closeSuccess" class="mt-4 w-full text-sm text-gray-600 hover:text-gray-800">Close</button> | |
| </div> | |
| </div> | |
| <div id="pointsCalculatorPanel" class="fixed bottom-24 right-6 w-80 md:w-96 bg-white rounded-xl shadow-xl p-6 hidden opacity-0 transition-all duration-300 transform translate-y-4 z-40"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-gray-800">Financing Points Calculator</h3> | |
| <button id="closeCalculator" class="text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button> | |
| </div> | |
| <p class="text-gray-600 mb-4 text-sm">Select a role to see a typical points allocation for a ~$1M film project.</p> | |
| <div class="space-y-2 mb-4"> | |
| <label class="block w-full text-left p-3 border rounded-md cursor-pointer has-[:checked]:bg-blue-50 has-[:checked]:border-blue-400"> | |
| <input type="radio" name="filmRole" value="Financier" class="sr-only" checked> | |
| <span class="font-semibold text-gray-800">Financier</span><span class="block text-xs text-gray-500">Provides the primary funding.</span> | |
| </label> | |
| <label class="block w-full text-left p-3 border rounded-md cursor-pointer has-[:checked]:bg-blue-50 has-[:checked]:border-blue-400"> | |
| <input type="radio" name="filmRole" value="Producer" class="sr-only"> | |
| <span class="font-semibold text-gray-800">Producer</span><span class="block text-xs text-gray-500">Manages the production.</span> | |
| </label> | |
| <label class="block w-full text-left p-3 border rounded-md cursor-pointer has-[:checked]:bg-blue-50 has-[:checked]:border-blue-400"> | |
| <input type="radio" name="filmRole" value="Director" class="sr-only"> | |
| <span class="font-semibold text-gray-800">Director</span><span class="block text-xs text-gray-500">Oversees creative aspects.</span> | |
| </label> | |
| </div> | |
| <div id="pointsResult" class="bg-gray-50 p-4 rounded-lg text-center mb-4"></div> | |
| <p class="text-xs text-gray-500 italic mb-4">Points represented by our project's BRC-20 - SRC20 Tokens encompassing blockchain protocol - {FB, CHIP}. 1:1 Ratio {Modern ROI Module} § 1.482-4 (b) (4)(5) §1.482-4(f)(3) § 6132 (h)(1) Section 798.3 Notice 2014-21. Howey Test Compliant.</p> | |
| <br> | |
| <p class="text-xs text-gray-500 italic mb-4"><b>Tokenomics</b> Ascendant Fund. 3100s Registered California Joint Venture</p> | |
| <div class="border-t pt-3"> | |
| <div class="flex justify-between items-center text-xs text-gray-700"><span><i class="fab fa-bitcoin text-orange-500"></i> BTC</span><span class="font-mono"></span></div> | |
| <div class="flex justify-between items-center text-xs text-gray-700 mt-1"><span><i class="fa-brands fa-btc text-green-500"></i> BCH</span><span class="font-mono"></span></div> | |
| <div class="flex justify-between items-center text-xs text-gray-700 mt-1"><span><i class="fas fa-atom text-blue-500"></i> CUSTOM</span><span class="font-mono"></span></div> | |
| </div> | |
| </div> | |
| <div id="privacyPanel" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden opacity-0 z-50 transition-opacity duration-300"> | |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col"> | |
| <div class="flex justify-between items-center p-4 border-b"> | |
| <h3 class="text-xl font-semibold text-gray-800 flex items-center"><i class="fas fa-shield-alt text-blue-600 mr-3"></i>Privacy Policy for California Residents</h3> | |
| <button id="closePrivacy" class="text-gray-500 hover:text-gray-700 text-2xl">×</button> | |
| </div> | |
| <div class="p-6 overflow-y-auto text-gray-700 text-sm space-y-4"> | |
| <p><strong class="text-gray-800">Last Updated:</strong> June 10, 2025</p> | |
| <p>This Privacy Policy applies solely to residents of the State of California ("consumers" or "you"). We adopt this notice to comply with the California Consumer Privacy Act (CCPA) and the California Privacy Rights Act (CPRA).</p> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">1. Information We Collect</h4> | |
| <p>We collect "personal information" such as your name, email address, and the unique ID our system generates when you voluntarily provide it through our site's forms.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">2. Use of Personal Information</h4> | |
| <p>We use your information to fulfill the reason you provided it (e.g., to record your interest in the 3100s Joint Venture (California Films Project), provide updates, and respond to law enforcement requests.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">3. Sharing and Selling of Personal Information</h4> | |
| <p>We do not sell or share your personal information with third parties for cross-context behavioral advertising.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">4. Your Rights and Choices (CCPA/CPRA)</h4> | |
| <p>You have the right to request access to, deletion of, or correction of your personal information. We will not discriminate against you for exercising these rights.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">5. How to Exercise Your Rights</h4> | |
| <p>To exercise your rights, please message a verifiable consumer request to us. <a href="" class="text-blue-600 hover:underline">Telegram</a>.</p> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 border-t text-right"> | |
| <button id="acceptPrivacy" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-md transition duration-300">Acknowledge</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // ################################################################# | |
| // ## PANEL 1: "INDICATE YOUR INTEREST" | |
| // ################################################################# | |
| const interestFormPanel = document.getElementById('floatingPanel'); | |
| if (interestFormPanel) { | |
| const WORKER_URL = 'https://contact-form-api.aiagents.workers.dev/'; | |
| let isSubmitting = false; | |
| const toggleInterestBtn = document.getElementById('togglePanel'); | |
| const closeInterestBtn = document.getElementById('closePanel'); | |
| const interestForm = document.getElementById('interestForm'); | |
| const formContainer = document.getElementById('formContainer'); | |
| const successMessage = document.getElementById('successMessage'); | |
| const uniqueIDDisplay = document.getElementById('uniqueIDDisplay'); | |
| const closeSuccessBtn = document.getElementById('closeSuccess'); | |
| const submitButton = document.getElementById('submitButton'); | |
| const buttonText = document.getElementById('buttonText'); | |
| const showInterestPanel = () => interestFormPanel.classList.remove('hidden', 'opacity-0', 'translate-y-4'); | |
| const hideInterestPanel = () => interestFormPanel.classList.add('hidden', 'opacity-0', 'translate-y-4'); | |
| const generateUniqueId = () => 'CFP-' + Date.now().toString(36) + Math.random().toString(36).substring(2, 8).toUpperCase(); | |
| toggleInterestBtn.addEventListener('click', showInterestPanel); | |
| if(closeInterestBtn) closeInterestBtn.addEventListener('click', hideInterestPanel); | |
| if(closeSuccessBtn) closeSuccessBtn.addEventListener('click', () => { | |
| hideInterestPanel(); | |
| setTimeout(() => { | |
| if(formContainer) formContainer.classList.remove('hidden'); | |
| if(successMessage) successMessage.classList.add('hidden'); | |
| if(interestForm) interestForm.reset(); | |
| }, 300); | |
| }); | |
| if (interestForm) { | |
| interestForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| if (isSubmitting) return; | |
| isSubmitting = true; | |
| if(submitButton) submitButton.disabled = true; | |
| if(buttonText) buttonText.textContent = 'Submitting...'; | |
| const uniqueId = generateUniqueId(); | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| try { | |
| const response = await fetch(WORKER_URL, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ name, email, uniqueId }), | |
| }); | |
| if (!response.ok) { | |
| const errorData = await response.json(); | |
| throw new Error(errorData.error || 'Submission failed'); | |
| } | |
| if(uniqueIDDisplay) uniqueIDDisplay.textContent = uniqueId; | |
| if(formContainer) formContainer.classList.add('hidden'); | |
| if(successMessage) successMessage.classList.remove('hidden'); | |
| } catch (error) { | |
| alert(`There was an error: ${error.message}`); | |
| } finally { | |
| isSubmitting = false; | |
| if(submitButton) submitButton.disabled = false; | |
| if(buttonText) buttonText.textContent = 'Generate Unique ID'; | |
| } | |
| }); | |
| } | |
| } | |
| // ################################################################# | |
| // ## PANEL 2: "POINTS CALCULATOR" | |
| // ################################################################# | |
| const pointsCalculatorPanel = document.getElementById('pointsCalculatorPanel'); | |
| if (pointsCalculatorPanel) { | |
| const toggleCalculatorBtn = document.getElementById('toggleCalculator'); | |
| const closeCalculatorBtn = document.getElementById('closeCalculator'); | |
| const pointsResultDiv = document.getElementById('pointsResult'); | |
| const roleInputs = document.querySelectorAll('input[name="filmRole"]'); | |
| const pointsData = { | |
| Financier: { points: "50 Points", description: "Financing 100% of the budget typically equals 50% of the net profits, the foundational 50/50 split." }, | |
| Producer: { points: "10 Points", description: "A lead producer often receives points from the 'Producer's Pool' for managing the project." }, | |
| Director: { points: "5 Points", description: "An established director's creative leadership is often rewarded with points from the 'Talent Pool'." } | |
| }; | |
| const updatePointsDisplay = () => { | |
| const selectedRole = document.querySelector('input[name="filmRole"]:checked').value; | |
| const data = pointsData[selectedRole]; | |
| if(pointsResultDiv) pointsResultDiv.innerHTML = `<h4 class="text-2xl font-bold text-blue-600">${data.points}</h4><p class="text-xs text-gray-600 mt-1">${data.description}</p>`; | |
| }; | |
| toggleCalculatorBtn.addEventListener('click', () => { | |
| pointsCalculatorPanel.classList.toggle('hidden'); | |
| pointsCalculatorPanel.classList.toggle('opacity-0'); | |
| pointsCalculatorPanel.classList.toggle('translate-y-4'); | |
| updatePointsDisplay(); | |
| }); | |
| if(closeCalculatorBtn) closeCalculatorBtn.addEventListener('click', () => { | |
| pointsCalculatorPanel.classList.add('hidden', 'opacity-0', 'translate-y-4'); | |
| }); | |
| roleInputs.forEach(input => input.addEventListener('change', updatePointsDisplay)); | |
| } | |
| // ################################################################# | |
| // ## PANEL 3: PRIVACY POLICY | |
| // ################################################################# | |
| const privacyPanel = document.getElementById('privacyPanel'); | |
| if (privacyPanel) { | |
| const togglePrivacyBtn = document.getElementById('togglePrivacy'); | |
| const closePrivacyBtn = document.getElementById('closePrivacy'); | |
| const acceptPrivacyBtn = document.getElementById('acceptPrivacy'); | |
| const openPrivacyPanel = () => { | |
| privacyPanel.classList.remove('hidden'); | |
| setTimeout(() => { privacyPanel.classList.add('opacity-100'); }, 10); | |
| }; | |
| const closePrivacyPanel = () => { | |
| privacyPanel.classList.remove('opacity-100'); | |
| setTimeout(() => { privacyPanel.classList.add('hidden'); }, 300); | |
| }; | |
| togglePrivacyBtn.addEventListener('click', openPrivacyPanel); | |
| closePrivacyBtn.addEventListener('click', closePrivacyPanel); | |
| acceptPrivacyBtn.addEventListener('click', closePrivacyPanel); | |
| privacyPanel.addEventListener('click', (event) => { | |
| if (event.target === privacyPanel) closePrivacyPanel(); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <button class="fab" id="addEntryBtn">+</button> | |
| <div class="modal-overlay" id="entryModal"> | |
| <div class="modal-content"> | |
| <h3>New Capital Account Entry</h3> | |
| <form id="ledgerForm"> | |
| <div class="input-group"><label for="date">Date</label><input type="date" id="date" required></div> | |
| <div class="input-group"><label for="description">Description</label><input type="text" id="description" required></div> | |
| <div class="input-group"><label for="ref">Reference</label><input type="text" id="ref"></div> | |
| <div class="input-group"><label for="debit">Debit (-)</label><input type="number" id="debit" placeholder="0.00" step="0.01"></div> | |
| <div class="input-group"><label for="credit">Credit (+)</label><input type="number" id="credit" placeholder="0.00" step="0.01"></div> | |
| <div class="form-actions"> | |
| <button type="button" class="btn-cancel" id="cancelBtn">Cancel</button> | |
| <button type="submit" class="btn-submit">Add Entry</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // The entire script is wrapped in a DOMContentLoaded listener. | |
| // This ensures the script only runs AFTER the entire HTML page is loaded, | |
| // which guarantees that all buttons and forms can be found. | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // ▼▼▼▼▼ CRITICAL: CONFIGURE YOUR WORKER URL ▼▼▼▼▼ | |
| const WORKER_URL="https://partnership-ledger-api.aiagents.workers.dev"; | |
| // ▲▲▲▲▲ CRITICAL: CONFIGURE YOUR WORKER URL ▲▲▲▲▲ | |
| // Add the Turnstile script to the page dynamically | |
| const turnstileScript = document.createElement('script'); | |
| turnstileScript.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'; | |
| turnstileScript.async = true; | |
| turnstileScript.defer = true; | |
| document.head.appendChild(turnstileScript); | |
| // Get all the elements we need to control | |
| const loginModal = document.getElementById('loginModal'); | |
| const entryModal = document.getElementById('entryModal'); | |
| const addEntryBtn = document.getElementById('addEntryBtn'); | |
| const cancelBtn = document.getElementById('cancelBtn'); | |
| const loginForm = document.getElementById('loginForm'); | |
| const ledgerForm = document.getElementById('ledgerForm'); | |
| const welcomeDiv = document.getElementById('welcome'); | |
| const partnerNameSpan = document.getElementById('partnerName'); | |
| const logoutBtn = document.getElementById('logoutBtn'); | |
| const forceLogoutBtn = document.getElementById('forceLogoutBtn'); // Get the new button | |
| let sessionToken = localStorage.getItem('accessToken'); | |
| // This function checks if a user is already logged in on page load | |
| const checkLoginState = () => { | |
| if (sessionToken) { | |
| if (loginModal) loginModal.style.display = 'none'; | |
| if (addEntryBtn) addEntryBtn.style.display = 'flex'; | |
| if (welcomeDiv) welcomeDiv.style.display = 'block'; | |
| if (partnerNameSpan) partnerNameSpan.textContent = localStorage.getItem('partnerName'); | |
| } else { | |
| if (loginModal) loginModal.style.display = 'flex'; | |
| if (addEntryBtn) addEntryBtn.style.display = 'none'; | |
| if (welcomeDiv) welcomeDiv.style.display = 'none'; | |
| } | |
| }; | |
| // Event listener for the LOGIN form | |
| if (loginForm) { | |
| loginForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(loginForm); | |
| const data = Object.fromEntries(formData.entries()); | |
| try { | |
| const response = await fetch(`${WORKER_URL}/api/login`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(data) | |
| }); | |
| if (!response.ok) throw new Error('Login failed. Check your ID and try again.'); | |
| const result = await response.json(); | |
| localStorage.setItem('accessToken', result.accessToken); | |
| localStorage.setItem('partnerName', result.partnerName); | |
| sessionToken = result.accessToken; | |
| checkLoginState(); | |
| } catch (error) { | |
| alert(error.message); | |
| try { turnstile.reset(); } catch (e) {} | |
| } | |
| }); | |
| } | |
| // Event listener for the LEDGER form | |
| if(ledgerForm) { | |
| ledgerForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const entryData = { date: document.getElementById('date').value, description: document.getElementById('description').value, ref: document.getElementById('ref').value, debit: document.getElementById('debit').value || 0, credit: document.getElementById('credit').value || 0 }; | |
| try { | |
| const response = await fetch(`${WORKER_URL}/api/ledger`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${sessionToken}`}, | |
| body: JSON.stringify(entryData), | |
| }); | |
| if (!response.ok) throw new Error('Authorization failed. Please log in again.'); | |
| const result = await response.json(); | |
| alert(`${result.message}\nNew Balance: ${result.newBalance.toFixed(2)}`); | |
| entryModal.style.display = 'none'; | |
| ledgerForm.reset(); | |
| } catch (error) { | |
| alert(error.message); | |
| } | |
| }); | |
| } | |
| // Event listeners for logout and modal buttons | |
| if (logoutBtn) { | |
| logoutBtn.addEventListener('click', () => { | |
| localStorage.removeItem('accessToken'); | |
| localStorage.removeItem('partnerName'); | |
| sessionToken = null; | |
| checkLoginState(); | |
| }); | |
| } | |
| if (addEntryBtn) addEntryBtn.addEventListener('click', () => entryModal.style.display = 'flex'); | |
| if (cancelBtn) cancelBtn.addEventListener('click', () => { entryModal.style.display = 'none'; ledgerForm.reset(); }); | |
| // Event listener for our temporary Force Logout button | |
| if(forceLogoutBtn) { | |
| forceLogoutBtn.addEventListener('click', () => { | |
| localStorage.removeItem('accessToken'); | |
| localStorage.removeItem('partnerName'); | |
| alert('Session data has been cleared. The page will now reload.'); | |
| window.location.reload(); | |
| }); | |
| } | |
| // Run the initial check to see if we should show the login modal or the app | |
| checkLoginState(); | |
| }); | |
| </script> | |
| <div class="modal-overlay" id="loginModal"> | |
| <div class="modal-content"> | |
| <h3>Partner Access</h3> | |
| <form id="loginForm"> | |
| <div class="input-group"> | |
| <label for="uniqueId">Unique Partner ID</label> | |
| <input type="text" id="uniqueId" name="uniqueId" required> | |
| </div> | |
| <div class="cf-turnstile" data-sitekey="0x4AAAAAABgryhmZanggp2RA"></div> | |
| <div class="form-actions"> | |
| <button type="submit" class="btn-submit">Login</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <div id="welcome" class="welcome-message" style="display: none;"> | |
| Welcome, <span id="partnerName"></span>! | |
| <button id="logoutBtn" class="logout-btn">Log Out</button> | |
| </div> | |
| </body> | |
| </html> |