Hugging Face's logo

Spaces:
nerala
/
ankaa
Running

App Files Community
ankaa / index.html
nerala's picture
nerala
When I click on continue on the first page nothing happens - Follow Up Deployment
bfc1e28 verified
Raw
History Blame Contribute Delete
32.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Ankaa Investment Fund Application</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>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Inter', sans-serif;
 background-color: #0a192f;
 color: white;
 }
.gradient-bg {
 background: linear-gradient(135deg, #112240 0%, #0a192f 100%);
 }
.input-field {
 transition: all 0.3s ease;
 }
.input-field:focus {
 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
 }
.border-red-500 {
 border-color: #ef4444;
 box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
 }
.file-upload:hover {
 background-color: #1e3a8a;
 }
.pulse {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% {
 box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
 }
 70% {
 box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
 }
 }
 </style>
</head>
<body>
 <div class="min-h-screen gradient-bg">
 <!-- Header -->
 <header class="py-6 px-4 sm:px-6 lg:px-8 border-b border-blue-900">
 <div class="flex items-center justify-between">
 <div class="flex items-center space-x-2">
 <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
 <i class="fas fa-rocket text-white text-xl"></i>
 </div>
 <h1 class="text-2xl font-bold text-white">Ankaa</h1>
 </div>
 <div class="hidden md:block">
 <span class="text-blue-300">Debt Investment Fund</span>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="container mx-auto px-4 py-8">
 <div class="max-w-3xl mx-auto">
 <!-- Application Form -->
 <div id="applicationForm" class="bg-blue-900/30 backdrop-blur-sm rounded-xl shadow-xl overflow-hidden border border-blue-800/50">
 <div class="p-6 sm:p-8">
 <div class="text-center mb-8">
 <h2 class="text-2xl sm:text-3xl font-bold text-white mb-2">Investment Application</h2>
 <p class="text-blue-200">Complete the form below to apply for funding</p>
 </div>
<!-- Progress Bar -->
 <div class="mb-8">
 <div class="flex justify-between mb-2">
 <span class="text-sm font-medium text-blue-200">Application Progress</span>
 <span class="text-sm font-medium text-blue-300" id="progressText">0%</span>
 </div>
 <div class="w-full bg-blue-900 rounded-full h-2.5">
 <div id="progressBar" class="bg-blue-500 h-2.5 rounded-full" style="width: 0%"></div>
 </div>
 </div>
<!-- Form Steps -->
 <form id="investmentForm" class="space-y-6">
 <!-- Step 1: Company Info -->
 <div id="step1" class="form-step">
 <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
 <span class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">1</span>
 Company Information
 </h3>
 <div class="space-y-4">
 <div>
 <label for="companyName" class="block text-sm font-medium text-blue-200 mb-1">Company Name</label>
 <input type="text" id="companyName" name="companyName" class="w-full px-4 py-3 bg-blue-900/50 border border-blue-800 rounded-lg input-field text-white focus:outline-none focus:border-blue-500" required>
 </div>
 <div>
 <label for="contactName" class="block text-sm font-medium text-blue-200 mb-1">Contact Person</label>
 <input type="text" id="contactName" name="contactName" class="w-full px-4 py-3 bg-blue-900/50 border border-blue-800 rounded-lg input-field text-white focus:outline-none focus:border-blue-500" required>
 </div>
 <div>
 <label for="email" class="block text-sm font-medium text-blue-200 mb-1">Email Address</label>
 <input type="email" id="email" name="email" class="w-full px-4 py-3 bg-blue-900/50 border border-blue-800 rounded-lg input-field text-white focus:outline-none focus:border-blue-500" required>
 </div>
 <div>
 <label for="phone" class="block text-sm font-medium text-blue-200 mb-1">Phone Number</label>
 <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 bg-blue-900/50 border border-blue-800 rounded-lg input-field text-white focus:outline-none focus:border-blue-500" required>
 </div>
 </div>
 </div>
<!-- Step 2: Pitch Deck Upload -->
 <div id="step2" class="form-step hidden">
 <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
 <span class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">2</span>
 Pitch Deck Upload
 </h3>
 <div class="space-y-4">
 <div class="text-center">
 <div class="mt-2 text-sm text-blue-300">
 <p>Upload your company's pitch deck (PDF, PPT, or PPTX)</p>
 </div>
 </div>
 <div class="mt-4">
 <div id="dropZone" class="file-upload flex justify-center px-6 pt-5 pb-6 border-2 border-blue-700 border-dashed rounded-lg bg-blue-900/30 hover:bg-blue-900/50 transition-colors duration-300">
 <div class="space-y-1 text-center">
 <div class="flex text-sm text-blue-300">
 <label for="pitchDeck" class="relative cursor-pointer rounded-md font-medium text-blue-400 hover:text-blue-300 focus-within:outline-none">
 <span>Upload a file</span>
 <input id="pitchDeck" name="pitchDeck" type="file" class="sr-only" accept=".pdf,.ppt,.pptx" required>
 </label>
 <p class="pl-1">or drag and drop</p>
 </div>
 <p class="text-xs text-blue-400">PDF, PPT, PPTX up to 10MB</p>
 </div>
 </div>
 <div id="fileName" class="mt-2 text-sm text-blue-300 hidden">
 <i class="fas fa-file-alt mr-2"></i><span id="uploadedFileName"></span>
 </div>
 </div>
 </div>
 </div>
<!-- Step 3: Financial Questions -->
 <div id="step3" class="form-step hidden">
 <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
 <span class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">3</span>
 Financial Information
 </h3>
 <div class="space-y-6">
 <div>
 <label for="revenue2024" class="block text-sm font-medium text-blue-200 mb-1">1. Current Revenue 2024 (USD)</label>
 <input type="number" id="revenue2024" name="revenue2024" class="w-full px-4 py-3 bg-blue-900/50 border border-blue-800 rounded-lg input-field text-white focus:outline-none focus:border-blue-500" placeholder="e.g. 500000" required>
 </div>
 <div>
 <label for="revenue2025" class="block text-sm font-medium text-blue-200 mb-1">2. Projected Revenue 2025 (USD)</label>
 <input type="number" id="revenue2025" name="revenue2025" class="w-full px-4 py-3 bg-blue-900/50 border border-blue-800 rounded-lg input-field text-white focus:outline-none focus:border-blue-500" placeholder="e.g. 1200000" required>
 </div>
 <div>
 <label for="monthlyBurn" class="block text-sm font-medium text-blue-200 mb-1">3. Monthly Burn Rate (USD)</label>
 <input type="number" id="monthlyBurn" name="monthlyBurn" class="w-full px-4 py-3 bg-blue-900/50 border border-blue-800 rounded-lg input-field text-white focus:outline-none focus:border-blue-500" placeholder="e.g. 75000" required>
 </div>
 <div>
 <label for="fundingAmount" class="block text-sm font-medium text-blue-200 mb-1">4. Funding Amount Requested (USD)</label>
 <input type="number" id="fundingAmount" name="fundingAmount" class="w-full px-4 py-3 bg-blue-900/50 border border-blue-800 rounded-lg input-field text-white focus:outline-none focus:border-blue-500" placeholder="e.g. 500000" required>
 </div>
 <div>
 <label for="useOfFunds" class="block text-sm font-medium text-blue-200 mb-1">5. Use of Funds (in 2 sentences)</label>
 <textarea id="useOfFunds" name="useOfFunds" rows="3" class="w-full px-4 py-3 bg-blue-900/50 border border-blue-800 rounded-lg input-field text-white focus:outline-none focus:border-blue-500" placeholder="Describe how you plan to use the funding..." required></textarea>
 </div>
 </div>
 </div>
<!-- Step 4: Review -->
 <div id="step4" class="form-step hidden">
 <h3 class="text-xl font-semibold text-white mb-6 flex items-center">
 <span class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">4</span>
 Review Your Application
 </h3>
 <div class="bg-blue-900/20 rounded-lg p-6 mb-6">
 <h4 class="text-lg font-medium text-white mb-4">Company Details</h4>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
 <div>
 <p class="text-sm text-blue-300">Company Name</p>
 <p id="reviewCompanyName" class="text-white font-medium">-</p>
 </div>
 <div>
 <p class="text-sm text-blue-300">Contact Person</p>
 <p id="reviewContactName" class="text-white font-medium">-</p>
 </div>
 <div>
 <p class="text-sm text-blue-300">Email</p>
 <p id="reviewEmail" class="text-white font-medium">-</p>
 </div>
 <div>
 <p class="text-sm text-blue-300">Phone</p>
 <p id="reviewPhone" class="text-white font-medium">-</p>
 </div>
 </div>
<h4 class="text-lg font-medium text-white mb-4 mt-6">Financial Information</h4>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div>
 <p class="text-sm text-blue-300">2024 Revenue</p>
 <p id="reviewRevenue2024" class="text-white font-medium">-</p>
 </div>
 <div>
 <p class="text-sm text-blue-300">2025 Revenue Projection</p>
 <p id="reviewRevenue2025" class="text-white font-medium">-</p>
 </div>
 <div>
 <p class="text-sm text-blue-300">Monthly Burn Rate</p>
 <p id="reviewMonthlyBurn" class="text-white font-medium">-</p>
 </div>
 <div>
 <p class="text-sm text-blue-300">Funding Amount</p>
 <p id="reviewFundingAmount" class="text-white font-medium">-</p>
 </div>
 <div class="md:col-span-2">
 <p class="text-sm text-blue-300">Use of Funds</p>
 <p id="reviewUseOfFunds" class="text-white font-medium">-</p>
 </div>
 </div>
 </div>
<div class="flex items-center mb-6">
 <input id="termsCheckbox" type="checkbox" class="w-4 h-4 text-blue-600 bg-blue-700 border-blue-800 rounded focus:ring-blue-500 focus:ring-2" required>
 <label for="termsCheckbox" class="ml-2 text-sm text-blue-200">
 I agree to the <a href="#" class="text-blue-400 hover:underline">terms and conditions</a> and confirm that all information provided is accurate.
 </label>
 </div>
 </div>
<!-- Navigation Buttons -->
 <div class="flex justify-between pt-6 border-t border-blue-800/50">
 <button type="button" id="prevBtn" class="hidden px-6 py-2.5 bg-blue-900 text-blue-300 rounded-lg hover:bg-blue-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <i class="fas fa-arrow-left mr-2"></i> Back
 </button>
 <button type="button" id="nextBtn" class="ml-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
 Continue <i class="fas fa-arrow-right ml-2"></i>
 </button>
 <button type="submit" id="submitBtn" class="hidden px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 pulse">
 Submit Application <i class="fas fa-paper-plane ml-2"></i>
 </button>
 </div>
 </form>
 </div>
 </div>
<!-- Processing Modal -->
 <div id="processingModal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
 <div class="bg-blue-900 rounded-xl p-8 max-w-md w-full mx-4 text-center">
 <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-400 mx-auto mb-6"></div>
 <h3 class="text-xl font-bold text-white mb-2">Processing Your Application</h3>
 <p class="text-blue-300">Our AI is reviewing your submission. This may take a moment...</p>
 </div>
 </div>
<!-- Approval Modal -->
 <div id="approvalModal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
 <div class="bg-blue-900 rounded-xl p-8 max-w-md w-full mx-4 text-center border-2 border-green-500">
 <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
 <i class="fas fa-check text-white text-2xl"></i>
 </div>
 <h3 class="text-2xl font-bold text-white mb-3">Application Approved!</h3>
 <p class="text-blue-200 mb-6">Congratulations! Your application meets our investment criteria. A team member will contact you within 24 hours to discuss next steps.</p>
 <button id="closeApprovalModal" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-300">
 Close
 </button>
 </div>
 </div>
<!-- Rejection Modal -->
 <div id="rejectionModal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
 <div class="bg-blue-900 rounded-xl p-8 max-w-md w-full mx-4 text-center border-2 border-red-500">
 <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
 <i class="fas fa-times text-white text-2xl"></i>
 </div>
 <h3 class="text-2xl font-bold text-white mb-3">Application Not Approved</h3>
 <p class="text-blue-200 mb-4">After careful review, we've determined that your company doesn't currently meet our investment criteria.</p>
 <p class="text-blue-300 text-sm mb-6">We encourage you to reapply in the future as your business grows and evolves.</p>
 <button id="closeRejectionModal" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-300">
 Close
 </button>
 </div>
 </div>
 </div>
 </main>
<!-- Footer -->
 <footer class="py-6 px-4 sm:px-6 lg:px-8 border-t border-blue-900 text-center">
 <p class="text-blue-400 text-sm">© 2024 Ankaa Investment Fund. All rights reserved.</p>
 </footer>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Form navigation
 const formSteps = document.querySelectorAll('.form-step');
 const prevBtn = document.getElementById('prevBtn');
 const nextBtn = document.getElementById('nextBtn');
 const submitBtn = document.getElementById('submitBtn');
 const progressBar = document.getElementById('progressBar');
 const progressText = document.getElementById('progressText');
 let currentStep = 0;
// File upload display
 const pitchDeckInput = document.getElementById('pitchDeck');
 const fileNameDisplay = document.getElementById('fileName');
 const uploadedFileName = document.getElementById('uploadedFileName');
// Review elements
 const reviewFields = {
 companyName: document.getElementById('reviewCompanyName'),
 contactName: document.getElementById('reviewContactName'),
 email: document.getElementById('reviewEmail'),
 phone: document.getElementById('reviewPhone'),
 revenue2024: document.getElementById('reviewRevenue2024'),
 revenue2025: document.getElementById('reviewRevenue2025'),
 monthlyBurn: document.getElementById('reviewMonthlyBurn'),
 fundingAmount: document.getElementById('reviewFundingAmount'),
 useOfFunds: document.getElementById('reviewUseOfFunds')
 };
// Modals
 const processingModal = document.getElementById('processingModal');
 const approvalModal = document.getElementById('approvalModal');
 const rejectionModal = document.getElementById('rejectionModal');
 const closeApprovalModal = document.getElementById('closeApprovalModal');
 const closeRejectionModal = document.getElementById('closeRejectionModal');
// Initialize form
 showStep(currentStep);
// File upload handlers
 const dropZone = document.getElementById('dropZone');
// Handle file selection
 pitchDeckInput.addEventListener('change', function(e) {
 handleFiles(e.target.files);
 });
// Handle drag and drop
 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
 dropZone.addEventListener(eventName, preventDefaults, false);
 });
function preventDefaults(e) {
 e.preventDefault();
 e.stopPropagation();
 }
['dragenter', 'dragover'].forEach(eventName => {
 dropZone.addEventListener(eventName, highlight, false);
 });
['dragleave', 'drop'].forEach(eventName => {
 dropZone.addEventListener(eventName, unhighlight, false);
 });
function highlight() {
 dropZone.classList.add('bg-blue-900/50');
 }
function unhighlight() {
 dropZone.classList.remove('bg-blue-900/50');
 }
dropZone.addEventListener('drop', function(e) {
 const dt = e.dataTransfer;
 const files = dt.files;
 pitchDeckInput.files = files;
 handleFiles(files);
 });
function handleFiles(files) {
 if (files.length > 0) {
 fileNameDisplay.classList.remove('hidden');
 uploadedFileName.textContent = files[0].name;
 } else {
 fileNameDisplay.classList.add('hidden');
 }
 }
// Next button click
 nextBtn.addEventListener('click', function() {
 if (validateStep(currentStep)) {
 // Update review fields before showing review step
 if (currentStep === formSteps.length - 2) {
 updateReviewFields();
 }
 currentStep++;
 showStep(currentStep);
 }
 });
// Previous button click
 prevBtn.addEventListener('click', function() {
 currentStep--;
 showStep(currentStep);
 });
// Form submission
 document.getElementById('investmentForm').addEventListener('submit', function(e) {
 e.preventDefault();
// Update review fields
 updateReviewFields();
// Show processing modal
 processingModal.classList.remove('hidden');
// Simulate AI processing (in a real app, this would be an API call)
 setTimeout(() => {
 processingModal.classList.add('hidden');
// Simulate approval/rejection (50% chance for demo purposes)
 const isApproved = Math.random() > 0.5;
if (isApproved) {
 approvalModal.classList.remove('hidden');
 } else {
 rejectionModal.classList.remove('hidden');
 }
 }, 3000);
 });
// Close modal handlers
 closeApprovalModal.addEventListener('click', function() {
 approvalModal.classList.add('hidden');
 resetForm();
 });
closeRejectionModal.addEventListener('click', function() {
 rejectionModal.classList.add('hidden');
 resetForm();
 });
// Show current step
 function showStep(stepIndex) {
 formSteps.forEach((step, index) => {
 if (index === stepIndex) {
 step.classList.remove('hidden');
 } else {
 step.classList.add('hidden');
 }
 });
// Update progress
 const progress = ((stepIndex + 1) / formSteps.length) * 100;
 progressBar.style.width = `${progress}%`;
 progressText.textContent = `${Math.round(progress)}%`;
// Update navigation buttons
 if (stepIndex === 0) {
 prevBtn.classList.add('hidden');
 } else {
 prevBtn.classList.remove('hidden');
 }
if (stepIndex === formSteps.length - 1) {
 nextBtn.classList.add('hidden');
 submitBtn.classList.remove('hidden');
 } else {
 nextBtn.classList.remove('hidden');
 submitBtn.classList.add('hidden');
 }
 }
// Validate current step
 function validateStep(stepIndex) {
 let isValid = true;
 const currentStep = formSteps[stepIndex];
// Check required fields in current step
 const inputs = currentStep.querySelectorAll('input[required], textarea[required]');
 inputs.forEach(input => {
 if (!input.value.trim()) {
 input.classList.add('border-red-500');
 isValid = false;
 } else {
 input.classList.remove('border-red-500');
 }
// Special email validation
 if (input.type === 'email' && input.value.trim()) {
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 if (!emailRegex.test(input.value)) {
 input.classList.add('border-red-500');
 isValid = false;
 }
 }
// Remove error class when user starts typing
 input.addEventListener('input', function() {
 if (this.value.trim()) {
 this.classList.remove('border-red-500');
 }
 });
 });
// Special validation for file upload
 if (stepIndex === 1 && !pitchDeckInput.files.length) {
 alert('Please upload your pitch deck');
 isValid = false;
 }
if (!isValid && stepIndex === 0) {
 alert('Please fill in all required fields with valid information');
 }
return isValid;
 }
// Update review fields with form data
 function updateReviewFields() {
 reviewFields.companyName.textContent = document.getElementById('companyName').value;
 reviewFields.contactName.textContent = document.getElementById('contactName').value;
 reviewFields.email.textContent = document.getElementById('email').value;
 reviewFields.phone.textContent = document.getElementById('phone').value;
 reviewFields.revenue2024.textContent = '$' + Number(document.getElementById('revenue2024').value).toLocaleString();
 reviewFields.revenue2025.textContent = '$' + Number(document.getElementById('revenue2025').value).toLocaleString();
 reviewFields.monthlyBurn.textContent = '$' + Number(document.getElementById('monthlyBurn').value).toLocaleString();
 reviewFields.fundingAmount.textContent = '$' + Number(document.getElementById('fundingAmount').value).toLocaleString();
 reviewFields.useOfFunds.textContent = document.getElementById('useOfFunds').value;
 }
// Reset form after submission
 function resetForm() {
 document.getElementById('investmentForm').reset();
 fileNameDisplay.classList.add('hidden');
 currentStep = 0;
 showStep(currentStep);
 }
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nerala/ankaa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>