Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sky AI - Choose Your Power</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> | |
| .chrome-gradient { | |
| background: linear-gradient(135deg, rgba(56,182,255,1) 0%, rgba(0,114,245,1) 50%, rgba(0,71,186,1) 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 114, 245, 0.1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px rgba(0, 114, 245, 0.2); | |
| } | |
| .feature-item { | |
| position: relative; | |
| padding-left: 2rem; | |
| transition: all 0.2s ease; | |
| } | |
| .feature-item:hover { | |
| transform: translateX(5px); | |
| } | |
| .feature-item:before { | |
| content: "✦"; | |
| position: absolute; | |
| left: 0; | |
| color: #38b6ff; | |
| font-weight: bold; | |
| } | |
| .glow { | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px rgba(56, 182, 255, 0.5); | |
| } | |
| to { | |
| box-shadow: 0 0 20px rgba(56, 182, 255, 0.8); | |
| } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .step-card { | |
| border-left: 4px solid #38b6ff; | |
| transition: all 0.3s ease; | |
| } | |
| .step-card:hover { | |
| border-left-width: 8px; | |
| background-color: rgba(56, 182, 255, 0.05); | |
| } | |
| .comparison-row:hover { | |
| background-color: rgba(56, 182, 255, 0.05); | |
| } | |
| .slider-thumb::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #0072f5; | |
| cursor: pointer; | |
| } | |
| .slider-thumb::-moz-range-thumb { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #0072f5; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Hero Section --> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-5xl font-extrabold text-gray-900 sm:text-6xl sm:tracking-tight lg:text-7xl mb-6"> | |
| <span class="bg-clip-text text-transparent chrome-gradient">Sky AI Power Tiers</span> | |
| </h1> | |
| <p class="mt-5 max-w-2xl mx-auto text-xl text-gray-600"> | |
| Choose your path to AI-powered business transformation | |
| </p> | |
| </div> | |
| <!-- Pricing Cards --> | |
| <div class="mt-16 grid gap-8 lg:grid-cols-2 lg:gap-8 max-w-6xl mx-auto"> | |
| <!-- Oracle Plan --> | |
| <div class="flex"> | |
| <div class="relative bg-white rounded-2xl overflow-hidden flex-1 card-hover border-2 border-blue-100 hover:border-blue-300"> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-2 rounded-lg"> | |
| <i class="fas fa-brain text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="ml-3 text-3xl font-bold text-gray-900">The Oracle</h3> | |
| </div> | |
| <p class="mt-2 text-lg text-blue-600 font-medium">AI Knowledge Engine for Your Business</p> | |
| <div class="mt-8"> | |
| <div class="inline-block px-4 py-2 rounded-full bg-blue-50"> | |
| <span class="text-xl font-extrabold text-gray-900">Knowledge Mastery</span> | |
| </div> | |
| </div> | |
| <ul class="mt-8 space-y-4"> | |
| <li class="feature-item">Instant answers from your documents, emails, and databases</li> | |
| <li class="feature-item">24/7 expert assistant trained on your company knowledge</li> | |
| <li class="feature-item">Automated workflow analysis and optimization suggestions</li> | |
| <li class="feature-item">Smart document organization and retrieval system</li> | |
| <li class="feature-item">Predictive insights based on your business data</li> | |
| </ul> | |
| <div class="mt-10 pt-6 border-t border-gray-200"> | |
| <button class="w-full chrome-gradient text-white font-bold py-3 px-4 rounded-lg hover:opacity-90 transition"> | |
| Deploy Your Knowledge AI | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Architect Plan --> | |
| <div class="flex"> | |
| <div class="relative bg-white rounded-2xl overflow-hidden flex-1 card-hover border-2 border-blue-200 hover:border-blue-400 glow"> | |
| <div class="absolute top-4 right-4"> | |
| <div class="bg-yellow-400 text-xs font-bold px-3 py-1 rounded-full transform rotate-12"> | |
| MOST POWERFUL | |
| </div> | |
| </div> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-200 p-2 rounded-lg pulse"> | |
| <i class="fas fa-magic text-blue-700 text-2xl"></i> | |
| </div> | |
| <h3 class="ml-3 text-3xl font-bold text-gray-900">The Architect</h3> | |
| </div> | |
| <p class="mt-2 text-lg text-blue-700 font-medium">Custom AI Tool Development Platform</p> | |
| <div class="mt-8"> | |
| <div class="inline-block px-4 py-2 rounded-full bg-blue-100"> | |
| <span class="text-xl font-extrabold text-gray-900">Creation Unleashed</span> | |
| </div> | |
| </div> | |
| <ul class="mt-8 space-y-4"> | |
| <li class="feature-item"><strong>Includes all Oracle features</strong></li> | |
| <li class="feature-item">Build custom AI tools with natural language prompts</li> | |
| <li class="feature-item">First production-ready tool built by our AI engineers</li> | |
| <li class="feature-item">Create revenue-generating AI applications</li> | |
| <li class="feature-item">Automate complex business processes end-to-end</li> | |
| <li class="feature-item">Early access to cutting-edge AI capabilities</li> | |
| </ul> | |
| <div class="mt-10 pt-6 border-t border-gray-200"> | |
| <button class="w-full chrome-gradient text-white font-bold py-3 px-4 rounded-lg hover:opacity-90 transition"> | |
| Start Building AI Tools | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature Comparison --> | |
| <div class="mt-24 max-w-5xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Plan Capabilities Comparison</h2> | |
| <div class="bg-white shadow-lg rounded-xl overflow-hidden"> | |
| <div class="grid grid-cols-4 divide-x divide-gray-200 bg-gray-50"> | |
| <div class="p-4 font-medium text-gray-500">Feature</div> | |
| <div class="p-4 font-medium text-center text-blue-600">The Oracle</div> | |
| <div class="p-4 font-medium text-center text-blue-700">The Architect</div> | |
| <div class="p-4 font-medium text-center text-gray-500">Business Impact</div> | |
| </div> | |
| <!-- Knowledge Base --> | |
| <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> | |
| <div class="p-4 flex items-center font-medium">Company Knowledge Base</div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-500 text-xl"></i></div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> | |
| <div class="p-4 text-gray-600">Centralized AI access to all company information and documents</div> | |
| </div> | |
| <!-- Instant Answers --> | |
| <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> | |
| <div class="p-4 flex items-center font-medium">Instant Answers</div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-500 text-xl"></i></div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> | |
| <div class="p-4 text-gray-600">Reduce employee time spent searching for information by 80%</div> | |
| </div> | |
| <!-- Process Optimization --> | |
| <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> | |
| <div class="p-4 flex items-center font-medium">Process Optimization</div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-500 text-xl"></i></div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> | |
| <div class="p-4 text-gray-600">AI identifies inefficiencies and suggests measurable improvements</div> | |
| </div> | |
| <!-- Tool Building --> | |
| <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> | |
| <div class="p-4 flex items-center font-medium">Custom AI Tool Creation</div> | |
| <div class="p-4 text-center"><i class="fas fa-times-circle text-gray-300 text-xl"></i></div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> | |
| <div class="p-4 text-gray-600">Transform business needs into functional AI applications with simple prompts</div> | |
| </div> | |
| <!-- First Tool --> | |
| <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> | |
| <div class="p-4 flex items-center font-medium">First Production Tool</div> | |
| <div class="p-4 text-center"><i class="fas fa-times-circle text-gray-300 text-xl"></i></div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> | |
| <div class="p-4 text-gray-600">Our engineers build and deploy your first custom tool within 48 hours</div> | |
| </div> | |
| <!-- Revenue Tools --> | |
| <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> | |
| <div class="p-4 flex items-center font-medium">Revenue-Generating AI</div> | |
| <div class="p-4 text-center"><i class="fas fa-times-circle text-gray-300 text-xl"></i></div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> | |
| <div class="p-4 text-gray-600">Develop AI applications that directly increase sales and customer engagement</div> | |
| </div> | |
| <!-- Priority Access --> | |
| <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> | |
| <div class="p-4 flex items-center font-medium">Advanced Feature Access</div> | |
| <div class="p-4 text-center"><i class="fas fa-times-circle text-gray-300 text-xl"></i></div> | |
| <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> | |
| <div class="p-4 text-gray-600">Get exclusive early access to cutting-edge AI capabilities</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3-Step Onboarding --> | |
| <div class="mt-24 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="chrome-gradient p-6 text-white text-center"> | |
| <h2 class="text-2xl font-bold">Implementation Process</h2> | |
| <p class="mt-2">Get your AI solution operational in 3 business days</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 p-8"> | |
| <div class="step-card p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-600 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-3">1</div> | |
| <h3 class="text-lg font-bold text-gray-800">Select Your AI Tier</h3> | |
| </div> | |
| <p class="text-gray-600">Choose between The Oracle for instant knowledge access or The Architect for custom AI tool development.</p> | |
| <ul class="mt-3 ml-5 list-disc text-gray-600 text-sm"> | |
| <li>Oracle: Immediate deployment</li> | |
| <li>Architect: 48-hour first tool delivery</li> | |
| </ul> | |
| </div> | |
| <div class="step-card p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-600 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-3">2</div> | |
| <h3 class="text-lg font-bold text-gray-800">Data Integration</h3> | |
| </div> | |
| <p class="text-gray-600">Connect your business data sources through our secure onboarding portal.</p> | |
| <ul class="mt-3 ml-5 list-disc text-gray-600 text-sm"> | |
| <li>Google Drive, Notion, Dropbox, databases</li> | |
| <li>256-bit encryption throughout</li> | |
| <li>Permission controls by department</li> | |
| </ul> | |
| </div> | |
| <div class="step-card p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-600 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-3">3</div> | |
| <h3 class="text-lg font-bold text-gray-800">AI Activation</h3> | |
| </div> | |
| <p class="text-gray-600">Your AI solution goes live with team training and ongoing support.</p> | |
| <ul class="mt-3 ml-5 list-disc text-gray-600 text-sm"> | |
| <li>Oracle: Instant access to knowledge</li> | |
| <li>Architect: First custom tool deployed</li> | |
| <li>Dedicated success manager</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ROI Calculator --> | |
| <div class="mt-24 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="chrome-gradient p-6 text-white text-center"> | |
| <h2 class="text-2xl font-bold">AI Impact Calculator</h2> | |
| <p class="mt-2">Estimate your potential revenue growth and cost savings</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 p-8"> | |
| <!-- Revenue Growth Calculator --> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-line text-blue-600 mr-2"></i> Revenue Growth Potential | |
| </h3> | |
| <div class="mb-6"> | |
| <label for="annualRevenue" class="block text-sm font-medium text-gray-700 mb-2"> | |
| Current Annual Revenue ($) | |
| </label> | |
| <input type="range" id="annualRevenue" min="100000" max="10000000" step="100000" value="1000000" | |
| class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">$100K</span> | |
| <span class="text-xs text-gray-500">$10M</span> | |
| </div> | |
| <div class="mt-2"> | |
| <input type="number" id="annualRevenueDisplay" value="1000000" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="revenueGrowth" class="block text-sm font-medium text-gray-700 mb-2"> | |
| Expected Revenue Growth (%) | |
| </label> | |
| <div class="flex items-center"> | |
| <span class="text-sm font-medium text-gray-500 mr-2">Oracle:</span> | |
| <span id="oracleGrowthValue" class="text-blue-600 font-bold">5%</span> | |
| <span class="text-sm font-medium text-gray-500 mx-2">vs</span> | |
| <span class="text-sm font-medium text-gray-500 mr-2">Architect:</span> | |
| <span id="architectGrowthValue" class="text-blue-700 font-bold">15%</span> | |
| </div> | |
| <input type="range" id="revenueGrowth" min="5" max="30" step="1" value="15" | |
| class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb mt-2"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">5%</span> | |
| <span class="text-xs text-gray-500">30%</span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-blue-100"> | |
| <h4 class="font-medium text-gray-700 mb-2">Projected Annual Revenue Increase</h4> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="text-center"> | |
| <div class="text-sm text-gray-500">Oracle</div> | |
| <div id="oracleRevenueImpact" class="text-xl font-bold text-blue-600">$50,000</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-sm text-gray-500">Architect</div> | |
| <div id="architectRevenueImpact" class="text-xl font-bold text-blue-700">$150,000</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cost Savings Calculator --> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-piggy-bank text-blue-600 mr-2"></i> Operational Cost Savings | |
| </h3> | |
| <div class="mb-6"> | |
| <label for="employeeCount" class="block text-sm font-medium text-gray-700 mb-2"> | |
| Number of Employees | |
| </label> | |
| <input type="range" id="employeeCount" min="5" max="500" step="5" value="50" | |
| class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">5</span> | |
| <span class="text-xs text-gray-500">500</span> | |
| </div> | |
| <div class="mt-2"> | |
| <input type="number" id="employeeCountDisplay" value="50" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="avgSalary" class="block text-sm font-medium text-gray-700 mb-2"> | |
| Average Employee Salary ($) | |
| </label> | |
| <input type="range" id="avgSalary" min="30000" max="150000" step="5000" value="60000" | |
| class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">$30K</span> | |
| <span class="text-xs text-gray-500">$150K</span> | |
| </div> | |
| <div class="mt-2"> | |
| <input type="number" id="avgSalaryDisplay" value="60000" | |
| class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-blue-100"> | |
| <h4 class="font-medium text-gray-700 mb-2">Projected Annual Savings</h4> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="text-center"> | |
| <div class="text-sm text-gray-500">Oracle</div> | |
| <div id="oracleSavingsImpact" class="text-xl font-bold text-blue-600">$120,000</div> | |
| <div class="text-xs text-gray-500">(8 hours/week saved)</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-sm text-gray-500">Architect</div> | |
| <div id="architectSavingsImpact" class="text-xl font-bold text-blue-700">$300,000</div> | |
| <div class="text-xs text-gray-500">(20 hours/week saved)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 bg-gray-50 border-t border-gray-200"> | |
| <div class="text-center"> | |
| <h3 class="text-lg font-bold text-gray-800 mb-2">Total Potential Impact</h3> | |
| <div class="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-blue-100"> | |
| <div class="text-sm text-gray-500">Oracle Plan</div> | |
| <div id="oracleTotalImpact" class="text-2xl font-bold text-blue-600">$170,000</div> | |
| <div class="text-xs text-gray-500">Annual revenue + savings</div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-blue-200"> | |
| <div class="text-sm text-gray-500">Architect Plan</div> | |
| <div id="architectTotalImpact" class="text-2xl font-bold text-blue-700">$450,000</div> | |
| <div class="text-xs text-gray-500">Annual revenue + savings</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple interactivity for comparison rows | |
| document.querySelectorAll('.comparison-row').forEach(row => { | |
| row.addEventListener('mouseenter', () => { | |
| row.querySelectorAll('div').forEach(cell => { | |
| cell.classList.add('bg-blue-50'); | |
| }); | |
| }); | |
| row.addEventListener('mouseleave', () => { | |
| row.querySelectorAll('div').forEach(cell => { | |
| cell.classList.remove('bg-blue-50'); | |
| }); | |
| }); | |
| }); | |
| // Button hover effects | |
| document.querySelectorAll('button').forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| button.style.transform = 'translateY(-2px)'; | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| // ROI Calculator Logic | |
| function formatCurrency(value) { | |
| return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value); | |
| } | |
| function calculateImpacts() { | |
| // Get input values | |
| const annualRevenue = parseFloat(document.getElementById('annualRevenue').value); | |
| const revenueGrowth = parseFloat(document.getElementById('revenueGrowth').value); | |
| const employeeCount = parseFloat(document.getElementById('employeeCount').value); | |
| const avgSalary = parseFloat(document.getElementById('avgSalary').value); | |
| // Oracle calculations (lower impact) | |
| const oracleGrowth = revenueGrowth * 0.5; // Oracle gets 50% of selected growth | |
| const oracleRevenueImpact = annualRevenue * (oracleGrowth / 100); | |
| // 8 hours/week savings = 416 hours/year (8 * 52) | |
| // Hourly rate = salary / 2080 (standard work hours per year) | |
| const oracleHoursSaved = 416; | |
| const hourlyRate = avgSalary / 2080; | |
| const oracleSavingsImpact = employeeCount * oracleHoursSaved * hourlyRate; | |
| // Architect calculations (full impact) | |
| const architectGrowth = revenueGrowth; // Architect gets full selected growth | |
| const architectRevenueImpact = annualRevenue * (architectGrowth / 100); | |
| // 20 hours/week savings = 1040 hours/year (20 * 52) | |
| const architectHoursSaved = 1040; | |
| const architectSavingsImpact = employeeCount * architectHoursSaved * hourlyRate; | |
| // Update displays | |
| document.getElementById('annualRevenueDisplay').value = annualRevenue; | |
| document.getElementById('employeeCountDisplay').value = employeeCount; | |
| document.getElementById('avgSalaryDisplay').value = avgSalary; | |
| document.getElementById('oracleGrowthValue').textContent = `${oracleGrowth.toFixed(1)}%`; | |
| document.getElementById('architectGrowthValue').textContent = `${architectGrowth.toFixed(1)}%`; | |
| document.getElementById('oracleRevenueImpact').textContent = formatCurrency(oracleRevenueImpact); | |
| document.getElementById('architectRevenueImpact').textContent = formatCurrency(architectRevenueImpact); | |
| document.getElementById('oracleSavingsImpact').textContent = formatCurrency(oracleSavingsImpact); | |
| document.getElementById('architectSavingsImpact').textContent = formatCurrency(architectSavingsImpact); | |
| document.getElementById('oracleTotalImpact').textContent = formatCurrency(oracleRevenueImpact + oracleSavingsImpact); | |
| document.getElementById('architectTotalImpact').textContent = formatCurrency(architectRevenueImpact + architectSavingsImpact); | |
| } | |
| // Initialize calculator | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Set up event listeners for all inputs | |
| document.getElementById('annualRevenue').addEventListener('input', function() { | |
| document.getElementById('annualRevenueDisplay').value = this.value; | |
| calculateImpacts(); | |
| }); | |
| document.getElementById('annualRevenueDisplay').addEventListener('change', function() { | |
| document.getElementById('annualRevenue').value = this.value; | |
| calculateImpacts(); | |
| }); | |
| document.getElementById('revenueGrowth').addEventListener('input', calculateImpacts); | |
| document.getElementById('employeeCount').addEventListener('input', function() { | |
| document.getElementById('employeeCountDisplay').value = this.value; | |
| calculateImpacts(); | |
| }); | |
| document.getElementById('employeeCountDisplay').addEventListener('change', function() { | |
| document.getElementById('employeeCount').value = this.value; | |
| calculateImpacts(); | |
| }); | |
| document.getElementById('avgSalary').addEventListener('input', function() { | |
| document.getElementById('avgSalaryDisplay').value = this.value; | |
| calculateImpacts(); | |
| }); | |
| document.getElementById('avgSalaryDisplay').addEventListener('change', function() { | |
| document.getElementById('avgSalary').value = this.value; | |
| calculateImpacts(); | |
| }); | |
| // Initial calculation | |
| calculateImpacts(); | |
| }); | |
| </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=JayStormX8/choose-a-plan" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |