Mobile Finance Shop Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MobileFin - Smart Mobile Device Financing Solutions</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body class="bg-gray-50"> <!-- Floating Finance Elements Background --> <div class="fixed inset-0 pointer-events-none z-0 overflow-hidden"> <div class="absolute top-20 left-10 text-6xl opacity-20 float">?</div> <div class="absolute top-40 right-20 text-4xl opacity-15 money-bounce">?</div> <div class="absolute bottom-40 left-20 text-5xl opacity-10 card-flip">?</div> <div class="absolute bottom-20 right-10 text-3xl opacity-20 float-delayed">?</div> <div class="absolute top-60 left-1/2 text-4xl opacity-15 coin-spin">?</div> <div class="absolute top-1/3 right-1/4 text-2xl opacity-10 payment-pulse">?</div> <div class="absolute bottom-1/3 left-1/4 text-3xl opacity-15 chart-grow">?</div> </div> <!-- Navigation --> <nav class="bg-white/95 backdrop-blur-sm shadow-lg fixed w-full z-50 fade-in"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-20"> <div class="flex items-center"> <div class="flex items-center space-x-3"> <div class="w-14 h-14 mobile-gradient rounded-xl flex items-center justify-center payment-pulse"> <span class="text-white text-2xl">?</span> </div> <div> <div class="text-2xl font-bold text-green-900">MobileFin</div> <div class="text-xs text-green-700">Smart Device Financing</div> </div> </div> </div> <div class="hidden lg:block"> <div class="ml-10 flex items-center space-x-8"> <a href="#home" class="text-green-800 hover:text-green-600 px-3 py-2 text-sm font-medium transition-all duration-300 hover:scale-110">Home</a> <a href="#financing" class="text-green-800 hover:text-green-600 px-3 py-2 text-sm font-medium transition-all duration-300 hover:scale-110">Financing</a> <a href="#calculator" class="text-green-800 hover:text-green-600 px-3 py-2 text-sm font-medium transition-all duration-300 hover:scale-110">Calculator</a> <a href="#devices" class="text-green-800 hover:text-green-600 px-3 py-2 text-sm font-medium transition-all duration-300 hover:scale-110">Devices</a> <a href="#about" class="text-green-800 hover:text-green-600 px-3 py-2 text-sm font-medium transition-all duration-300 hover:scale-110">About</a> <a href="#contact" class="text-green-800 hover:text-green-600 px-3 py-2 text-sm font-medium transition-all duration-300 hover:scale-110">Contact</a> <button class="mobile-gradient text-white px-6 py-3 rounded-full hover:shadow-lg btn-finance font-medium"> Apply Now ? </button> </div> </div> <div class="lg:hidden"> <button class="text-green-800 hover:text-green-600"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="relative min-h-screen flex items-center pt-20"> <div class="absolute inset-0"> <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80" alt="Modern smartphones and mobile devices" class="w-full h-full object-cover"> <div class="overlay-finance absolute inset-0"></div> </div> <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-white z-10"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <div class="mb-6"> <span class="bg-blue-500/80 text-white px-4 py-2 rounded-full text-sm font-medium finance-glow"> ✨ 0% APR Available • Instant Approval </span> </div> <h1 class="text-4xl md:text-7xl font-bold mb-6 text-shadow"> Finance Your <br> <span class="text-yellow-300 payment-pulse">Dream</span> <br> Device Today! ? </h1> <p class="text-xl mb-8 text-green-100 leading-relaxed"> Get the latest smartphones, tablets, and mobile devices with flexible financing options. No hidden fees, competitive rates, and instant approval for qualified customers! </p> <div class="flex flex-col sm:flex-row gap-4 mb-8"> <button class="bg-yellow-500 text-green-900 px-8 py-4 rounded-full text-lg font-semibold hover:bg-yellow-400 btn-finance money-bounce"> ? Apply for Financing </button> <button class="border-2 border-white text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-white hover:text-green-900 btn-finance"> ? Payment Calculator </button> </div> <div class="grid grid-cols-3 gap-6 text-center"> <div class="bounce-in"> <div class="text-3xl font-bold text-yellow-300 counter-finance">0%</div> <div class="text-sm text-green-200">APR Available</div> </div> <div class="bounce-in" style="animation-delay: 0.2s;"> <div class="text-3xl font-bold text-yellow-300 counter-finance">24</div> <div class="text-sm text-green-200">Month Terms</div> </div> <div class="bounce-in" style="animation-delay: 0.4s;"> <div class="text-3xl font-bold text-yellow-300 counter-finance">5min</div> <div class="text-sm text-green-200">Approval Time</div> </div> </div> </div> <div class="slide-in-right"> <div class="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 card-finance"> <h3 class="text-2xl font-semibold mb-6 text-center">? Quick Pre-Approval</h3> <form class="space-y-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <input type="text" placeholder="First Name" class="px-4 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder-green-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-all calculator-input"> <input type="text" placeholder="Last Name" class="px-4 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder-green-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-all calculator-input"> </div> <input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder-green-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-all calculator-input"> <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder-green-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-all calculator-input"> <select class="w-full px-4 py-3 rounded-xl bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-yellow-400"> <option value="">Annual Income</option> <option value="under30k">Under $30,000</option> <option value="30k-50k">$30,000 - $50,000</option> <option value="50k-75k">$50,000 - $75,000</option> <option value="75k-100k">$75,000 - $100,000</option> <option value="over100k">Over $100,000</option> </select> <select class="w-full px-4 py-3 rounded-xl bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-yellow-400"> <option value="">Device Interest</option> <option value="iphone">iPhone (Latest Models)</option> <option value="samsung">Samsung Galaxy</option> <option value="pixel">Google Pixel</option> <option value="ipad">iPad & Tablets</option> <option value="laptop">Laptops & MacBooks</option> </select> <div> <label class="block text-sm font-medium text-green-200 mb-2">Desired Loan Amount</label> <input type="range" min="500" max="5000" value="1500" class="w-full loan-slider" id="loanAmount"> <div class="flex justify-between text-sm text-green-200 mt-2"> <span>$500</span> <span id="loanValue" class="font-semibold text-yellow-300">$1,500</span> <span>$5,000</span> </div> </div> <button type="button" class="w-full bg-yellow-500 text-green-900 py-3 rounded-xl font-semibold hover:bg-yellow-400 btn-finance"> ? Get Pre-Approved </button> </form> <div class="mt-6 text-center"> <p class="text-green-200 text-sm">? Secure application • No impact on credit score for pre-approval</p> </div> </div> </div> </div> </div> </section> <!-- Financing Options Section --> <section id="financing" class="py-20 bg-white relative overflow-hidden"> <div class="absolute inset-0 opacity-5"> <div class="absolute top-10 left-10 text-9xl rotate-12">?</div> <div class="absolute bottom-10 right-10 text-9xl -rotate-12">?</div> </div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="text-center mb-16 slide-up"> <h2 class="text-5xl font-bold text-green-900 mb-4">? Financing Options</h2> <p class="text-xl text-green-700 max-w-3xl mx-auto"> Choose the perfect financing plan that fits your budget and lifestyle </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="bg-gradient-to-br from-green-100 to-green-200 rounded-3xl p-8 text-center card-finance bounce-in"> <div class="w-20 h-20 bg-green-500 rounded-2xl flex items-center justify-center mx-auto mb-6 money-bounce"> <span class="text-3xl text-white">?</span> </div> <h3 class="text-2xl font-semibold mb-4 text-green-800">Basic Plan</h3> <p class="text-green-700 mb-6">Perfect for essential devices and budget-conscious buyers</p> <ul class="text-sm text-green-600 mb-6 space-y-2"> <li>✓ Up to $1,500 credit</li> <li>✓ 12-month terms</li> <li>✓ 9.9% APR</li> <li>✓ No down payment</li> </ul> <div class="text-lg font-bold text-green-600 mb-4">From $50/month</div> <button class="w-full bg-green-500 text-white py-3 rounded-xl hover:bg-green-600 btn-finance"> Apply Basic ? </button> </div> <div class="bg-gradient-to-br from-blue-100 to-blue-200 rounded-3xl p-8 text-center card-finance bounce-in" style="animation-delay: 0.2s;"> <div class="w-20 h-20 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-6 float"> <span class="text-3xl text-white">?</span> </div> <h3 class="text-2xl font-semibold mb-4 text-blue-800">Premium Plan</h3> <p class="text-blue-700 mb-6">Great for flagship devices and extended warranties</p> <ul class="text-sm text-blue-600 mb-6 space-y-2"> <li>✓ Up to $3,000 credit</li> <li>✓ 18-month terms</li> <li>✓ 6.9% APR</li> <li>✓ Device protection</li> </ul> <div class="text-lg font-bold text-blue-600 mb-4">From $75/month</div> <button class="w-full bg-blue-500 text-white py-3 rounded-xl hover:bg-blue-600 btn-finance"> Apply Premium ? </button> </div> <div class="bg-gradient-to-br from-purple-100 to-purple-200 rounded-3xl p-8 text-center card-finance bounce-in" style="animation-delay: 0.4s;"> <div class="w-20 h-20 bg-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6 float-delayed"> <span class="text-3xl text-white">?</span> </div> <h3 class="text-2xl font-semibold mb-4 text-purple-800">Business Plan</h3> <p class="text-purple-700 mb-6">Designed for business owners and professionals</p> <ul class="text-sm text-purple-600 mb-6 space-y-2"> <li>✓ Up to $5,000 credit</li> <li>✓ 24-month terms</li> <li>✓ 4.9% APR</li> <li>✓ Business rewards</li> </ul> <div class="text-lg font-bold text-purple-600 mb-4">From $100/month</div> <button class="w-full bg-purple-500 text-white py-3 rounded-xl hover:bg-purple-600 btn-finance"> Apply Business ? </button> </div> <div class="bg-gradient-to-br from-yellow-100 to-yellow-200 rounded-3xl p-8 text-center card-finance bounce-in" style="animation-delay: 0.6s;"> <div class="w-20 h-20 bg-yellow-500 rounded-2xl flex items-center justify-center mx-auto mb-6 coin-spin"> <span class="text-3xl text-white">?</span> </div> <h3 class="text-2xl font-semibold mb-4 text-yellow-800">Enterprise Plan</h3> <p class="text-yellow-700 mb-6">Ultimate financing for high-end devices and bulk orders</p> <ul class="text-sm text-yellow-600 mb-6 space-y-2"> <li>✓ Up to $10,000 credit</li> <li>✓ 36-month terms</li> <li>✓ 0% APR available</li> <li>✓ Concierge service</li> </ul> <div class="text-lg font-bold text-yellow-600 mb-4">From $150/month</div> <button class="w-full bg-yellow-500 text-white py-3 rounded-xl hover:bg-yellow-600 btn-finance"> Apply Enterprise ? </button> </div> </div> </div> </section> <!-- Payment Calculator Section --> <section id="calculator" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 slide-up"> <h2 class="text-5xl font-bold text-green-900 mb-4">? Payment Calculator</h2> <p class="text-xl text-green-700 max-w-3xl mx-auto"> Calculate your monthly payments and see how much you can afford </p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div class="slide-in-left"> <div class="bg-white rounded-3xl p-8 shadow-lg"> <h3 class="text-2xl font-semibold mb-6 text-green-900">? Loan Calculator</h3> <div class="space-y-6"> <div> <label class="block text-sm font-medium text-green-900 mb-2">Device Price</label> <input type="range" min="200" max="3000" value="1200" class="w-full loan-slider" id="devicePrice"> <div class="flex justify-between text-sm text-green-600 mt-2"> <span>$200</span> <span id="priceValue" class="font-semibold text-green-800">$1,200</span> <span>$3,000</span> </div> </div> <div> <label class="block text-sm font-medium text-green-900 mb-2">Down Payment</label> <input type="range" min="0" max="500" value="100" class="w-full loan-slider" id="downPayment"> <div class="flex justify-between text-sm text-green-600 mt-2"> <span>$0</span> <span id="downValue" class="font-semibold text-green-800">$100</span> <span>$500</span> </div> </div> <div> <label class="block text-sm font-medium text-green-900 mb-2">Loan Term (Months)</label> <input type="range" min="6" max="36" value="18" class="w-full loan-slider" id="loanTerm"> <div class="flex justify-between text-sm text-green-600 mt-2"> <span>6</span> <span id="termValue" class="font-semibold text-green-800">18</span> <span>36</span> </div> </div> <div> <label class="block text-sm font-medium text-green-900 mb-2">Interest Rate (APR)</label> <select class="w-full px-4 py-3 border border-green-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all" id="interestRate"> <option value="0">0% APR (Qualified customers)</option> <option value="4.9">4.9% APR (Excellent credit)</option> <option value="6.9">6.9% APR (Good credit)</option> <option value="9.9">9.9% APR (Fair credit)</option> <option value="14.9">14.9% APR (Building credit)</option> </select> </div> </div> </div> </div> <div class="slide-in-right"> <div class="bg-white rounded-3xl p-8 shadow-lg"> <h3 class="text-2xl font-semibold mb-6 text-green-900">? Payment Breakdown</h3> <div class="space-y-6"> <div class="bg-green-50 rounded-2xl p-6 text-center card-finance"> <div class="text-sm text-green-600 mb-2">Monthly Payment</div> <div class="text-4xl font-bold text-green-800 mb-2" id="monthlyPayment">$67</div> <div class="text-xs text-green-500">Based on current selections</div> </div> <div class="grid grid-cols-2 gap-4"> <div class="bg-blue-50 rounded-2xl p-4 text-center"> <div class="text-sm text-blue-600 mb-1">Total Interest</div> <div class="text-2xl font-bold text-blue-800" id="totalInterest">$106</div> </div> <div class="bg-purple-50 rounded-2xl p-4 text-center"> <div class="text-sm text-purple-600 mb-1">Total Cost</div> <div class="text-2xl font-bold text-purple-800" id="totalCost">$1,306</div> </div> </div> <div class="space-y-3"> <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg"> <span class="text-gray-600">Device Price:</span> <span class="font-semibold text-gray-800" id="summaryPrice">$1,200</span> </div> <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg"> <span class="text-gray-600">Down Payment:</span> <span class="font-semibold text-gray-800" id="summaryDown">-$100</span> </div> <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg"> <span class="text-gray-600">Amount Financed:</span> <span class="font-semibold text-gray-800" id="amountFinanced">$1,100</span> </div> <div class="flex justify-between items-center p-3 bg-green-50 rounded-lg border-2 border-green-200"> <span class="text-green-600 font-medium">Monthly Payment:</span> <span class="font-bold text-green-800 text-lg" id="finalPayment">$67</span> </div> </div> <button class="w-full mobile-gradient text-white py-3 rounded-xl hover:shadow-lg btn-finance font-semibold"> ? Apply with These Terms </button> </div> </div> </div> </div> </div> </section> <!-- Featured Devices Section --> <section id="devices" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 slide-up"> <h2 class="text-5xl font-bold text-green-900 mb-4">? Featured Devices</h2> <p class="text-xl text-green-700 max-w-3xl mx-auto"> Popular devices available with our flexible financing options </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-white rounded-3xl p-6 card-finance bounce-in shadow-lg border border-gray-200"> <div class="relative mb-6"> <img src="https://images.unsplash.com/photo-1592750475338-74b7b21085ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="iPhone 15 Pro" class="w-full h-64 object-cover rounded-2xl"> <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold approval-badge"> 0% APR </div> </div> <h3 class="text-xl font-semibold mb-2 text-green-900">iPhone 15 Pro</h3> <p class="text-green-600 mb-4">Latest flagship with advanced camera system and titanium design</p> <div class="flex items-center justify-between mb-4"> <div class="text-2xl font-bold text-green-600">$999</div> <div class="text-sm text-gray-500">or $42/month</div> </div> <div class="flex gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">128GB</span> <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded text-xs">256GB</span> <span class="px-2 py-1 bg-orange-100 text-orange-600 rounded text-xs">512GB</span> </div> <button class="w-full bg-green-500 text-white py-3 rounded-xl hover:bg-green-600 btn-finance"> Finance iPhone ? </button> </div> <div class="bg-white rounded-3xl p-6 card-finance bounce-in shadow-lg border border-gray-200" style="animation-delay: 0.2s;"> <div class="relative mb-6"> <img src="https://images.unsplash.com/photo-1610945265064-0e34e5519bbf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Samsung Galaxy S24" class="w-full h-64 object-cover rounded-2xl"> <div class="absolute top-4 right-4 bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold approval-badge"> Popular </div> </div> <h3 class="text-xl font-semibold mb-2 text-green-900">Samsung Galaxy S24</h3> <p class="text-green-600 mb-4">Powerful Android flagship with AI features and stunning display</p> <div class="flex items-center justify-between mb-4"> <div class="text-2xl font-bold text-green-600">$799</div> <div class="text-sm text-gray-500">or $33/month</div> </div> <div class="flex gap-2 mb-4"> <span class="px-2 py-1 bg-green-100 text-green-600 rounded text-xs">128GB</span> <span class="px-2 py-1 bg-yellow-100 text-yellow-600 rounded text-xs">256GB</span> <span class="px-2 py-1 bg-red-100 text-red-600 rounded text-xs">512GB</span> </div> <button class="w-full bg-blue-500 text-white py-3 rounded-xl hover:bg-blue-600 btn-finance"> Finance Galaxy ? </button> </div> <div class="bg-white rounded-3xl p-6 card-finance bounce-in shadow-lg border border-gray-200" style="animation-delay: 0.4s;"> <div class="relative mb-6"> <img src="https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="iPad Pro" class="w-full h-64 object-cover rounded-2xl"> <div class="absolute top-4 right-4 bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-semibold approval-badge"> Pro </div> </div> <h3 class="text-xl font-semibold mb-2 text-green-900">iPad Pro 12.9"</h3> <p class="text-green-600 mb-4">Professional tablet with M2 chip and Liquid Retina display</p> <div class="flex items-center justify-between mb-4"> <div class="text-2xl font-bold text-green-600">$1,099</div> <div class="text-sm text-gray-500">or $46/month</div> </div> <div class="flex gap-2 mb-4"> <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">128GB</span> <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">256GB</span> <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded text-xs">512GB</span> </div> <button class="w-full bg-purple-500 text-white py-3 rounded-xl hover:bg-purple-600 btn-finance"> Finance iPad ? </button> </div> </div> <div class="text-center mt-12"> <button class="mobile-gradient text-white px-8 py-4 rounded-full text-lg font-semibold hover:shadow-lg btn-finance"> ? View All Devices </button> </div> </div> </section> <!-- Why Choose Us Section --> <section class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <img src="https://images.unsplash.com/photo-1697545806245-9795b6056141?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Mobile financing consultation" class="rounded-3xl shadow-2xl payment-pulse"> </div> <div class="slide-in-right"> <h3 class="text-4xl font-bold text-green-900 mb-8">? Why Choose MobileFin?</h3> <div class="space-y-6"> <div class="flex items-start"> <div class="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mr-4 flex-shrink-0 finance-glow"> <span class="text-2xl">⚡</span> </div> <div> <h4 class="text-xl font-semibold mb-2 text-green-900">Instant Approval</h4> <p class="text-green-700">Get approved in minutes with our advanced credit assessment technology.</p> </div> </div> <div class="flex items-start"> <div class="w-14 h-14 bg-blue-100 rounded-2xl flex items-center justify-center mr-4 flex-shrink-0 finance-glow"> <span class="text-2xl">?</span> </div> <div> <h4 class="text-xl font-semibold mb-2 text-green-900">Competitive Rates</h4> <p class="text-green-700">Industry-leading APR rates starting from 0% for qualified customers.</p> </div> </div> <div class="flex items-start"> <div class="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center mr-4 flex-shrink-0 finance-glow"> <span class="text-2xl">?️</span> </div> <div> <h4 class="text-xl font-semibold mb-2 text-green-900">Flexible Terms</h4> <p class="text-green-700">Choose from 6 to 36-month terms that fit your budget and lifestyle.</p> </div> </div> <div class="flex items-start"> <div class="w-14 h-14 bg-yellow-100 rounded-2xl flex items-center justify-center mr-4 flex-shrink-0 finance-glow"> <span class="text-2xl">?</span> </div> <div> <h4 class="text-xl font-semibold mb-2 text-green-900">Latest Devices</h4> <p class="text-green-700">Access to the newest smartphones, tablets, and mobile technology.</p> </div> </div> </div> </div> </div> </div> </section> <!-- Customer Reviews Section --> <section class="py-20 mobile-gradient text-white relative overflow-hidden"> <div class="absolute inset-0 opacity-10"> <div class="absolute top-20 left-20 text-8xl rotate-45 float">?</div> <div class="absolute bottom-20 right-20 text-8xl -rotate-45 float-delayed">?</div> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-9xl opacity-5 coin-spin">?</div> </div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="text-center mb-16 slide-up"> <h2 class="text-5xl font-bold mb-4 text-shadow">? Customer Success Stories</h2> <p class="text-xl text-green-100 max-w-3xl mx-auto"> See how MobileFin has helped customers get their dream devices </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 card-finance bounce-in"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Marcus Thompson" class="w-16 h-16 rounded-full mr-4 object-cover"> <div> <h4 class="text-lg font-semibold">Marcus Thompson</h4> <div class="flex text-yellow-400"> ⭐⭐⭐⭐⭐ </div> <div class="text-sm text-green-200">iPhone 15 Pro • 0% APR</div> </div> </div> <p class="text-green-100 mb-4">"Amazing experience! Got approved instantly for 0% APR and walked out with my dream iPhone. The payment calculator helped me budget perfectly."</p> <div class="text-sm text-green-300">Approved: $999 • 24 months</div> </div> <div class="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 card-finance bounce-in" style="animation-delay: 0.2s;"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1494790108755-2616c9c0e8e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Sarah Kim" class="w-16 h-16 rounded-full mr-4 object-cover"> <div> <h4 class="text-lg font-semibold">Sarah Kim</h4> <div class="flex text-yellow-400"> ⭐⭐⭐⭐⭐ </div> <div class="text-sm text-green-200">Galaxy S24 • Premium Plan</div> </div> </div> <p class="text-green-100 mb-4">"The process was so smooth! I needed a new phone for work and MobileFin made it affordable with great terms. Highly recommend!"</p> <div class="text-sm text-green-300">Approved: $799 • 18 months</div> </div> <div class="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 card-finance bounce-in" style="animation-delay: 0.4s;"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="David Rodriguez" class="w-16 h-16 rounded-full mr-4 object-cover"> <div> <h4 class="text-lg font-semibold">David Rodriguez</h4> <div class="flex text-yellow-400"> ⭐⭐⭐⭐⭐ </div> <div class="text-sm text-green-200">iPad Pro • Business Plan</div> </div> </div> <p class="text-green-100 mb-4">"Perfect for my business needs! The business plan gave me great rates and the iPad Pro has transformed my workflow. Excellent service!"</p> <div class="text-sm text-green-300">Approved: $1,099 • 24 months</div> </div> </div> <div class="text-center mt-12"> <button class="bg-white text-green-900 px-8 py-4 rounded-full text-lg font-semibold hover:bg-green-50 btn-finance"> ? Share Your Story </button> </div> </div> </section> <!-- About Section --> <section id="about" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <h2 class="text-5xl font-bold text-green-900 mb-6">? About MobileFin</h2> <p class="text-lg text-green-700 mb-6"> Founded in 2018, MobileFin has revolutionized mobile device financing by making the latest technology accessible to everyone. We believe that financial barriers shouldn't prevent you from staying connected in our digital world. </p> <p class="text-lg text-green-700 mb-8"> Our innovative approach combines cutting-edge fintech solutions with personalized customer service to provide instant approvals, competitive rates, and flexible terms that work for your lifestyle and budget. </p> <div class="grid grid-cols-2 gap-6 mb-8"> <div class="text-center p-6 bg-green-50 rounded-2xl card-finance"> <div class="text-3xl font-bold text-green-600 mb-2 counter-finance">50K+</div> <div class="text-sm text-green-700">Devices Financed</div> </div> <div class="text-center p-6 bg-blue-50 rounded-2xl card-finance"> <div class="text-3xl font-bold text-blue-600 mb-2 counter-finance">98%</div> <div class="text-sm text-blue-700">Approval Rate</div> </div> <div class="text-center p-6 bg-purple-50 rounded-2xl card-finance"> <div class="text-3xl font-bold text-purple-600 mb-2 counter-finance">4.9</div> <div class="text-sm text-purple-700">Customer Rating</div> </div> <div class="text-center p-6 bg-yellow-50 rounded-2xl card-finance"> <div class="text-3xl font-bold text-yellow-600 mb-2 counter-finance">24/7</div> <div class="text-sm text-yellow-700">Customer Support</div> </div> </div> <button class="mobile-gradient text-white px-8 py-4 rounded-full hover:shadow-lg btn-finance"> Learn More About Us ? </button> </div> <div class="slide-in-right"> <img src="https://plus.unsplash.com/premium_photo-1664201889922-66bc3c778c1e?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="MobileFin team and office" class="rounded-3xl shadow-2xl card-flip"> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 slide-up"> <h2 class="text-5xl font-bold text-green-900 mb-4">? Get in Touch</h2> <p class="text-xl text-green-700">Ready to finance your next device? We're here to help!</p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div class="slide-in-left"> <div class="bg-white rounded-3xl p-8 shadow-lg"> <h3 class="text-2xl font-semibold mb-6 text-green-900">? Contact Information</h3> <div class="space-y-6"> <div class="flex items-start"> <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0 finance-glow"> <span class="text-xl">?</span> </div> <div> <div class="font-semibold text-green-900">Headquarters</div> <div class="text-green-700">789 Finance Plaza<br>Tech City, State 98765</div> </div> </div> <div class="flex items-start"> <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0 finance-glow"> <span class="text-xl">?</span> </div> <div> <div class="font-semibold text-green-900">Phone</div> <div class="text-green-700">(555) MOBILE-FIN (662-4533)</div> <div class="text-green-700">24/7 Support: (555) 123-HELP</div> </div> </div> <div class="flex items-start"> <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0 finance-glow"> <span class="text-xl">✉️</span> </div> <div> <div class="font-semibold text-green-900">Email</div> <div class="text-green-700">info@mobilefin.com</div> <div class="text-green-700">support@mobilefin.com</div> </div> </div> <div class="flex items-start"> <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0 finance-glow"> <span class="text-xl">?</span> </div> <div> <div class="font-semibold text-green-900">Business Hours</div> <div class="text-green-700"> Mon-Fri: 8:00 AM - 8:00 PM<br> Sat-Sun: 10:00 AM - 6:00 PM<br> Online: 24/7 Applications </div> </div> </div> </div> <div class="mt-8 p-4 bg-green-50 rounded-xl"> <h4 class="font-semibold text-green-900 mb-2">? Quick Apply</h4> <p class="text-green-800 text-sm">Apply online 24/7 and get instant pre-approval decisions!</p> </div> </div> </div> <div class="slide-in-right"> <div class="bg-white rounded-3xl p-8 shadow-lg"> <h3 class="text-2xl font-semibold mb-6 text-green-900">? Send us a Message</h3> <p class="text-sm text-green-600 mb-6">Demo form - messages won't be sent</p> <form class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-green-900 mb-2">First Name</label> <input type="text" class="w-full px-4 py-3 border border-green-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all calculator-input"> </div> <div> <label class="block text-sm font-medium text-green-900 mb-2">Last Name</label> <input type="text" class="w-full px-4 py-3 border border-green-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all calculator-input"> </div> </div> <div> <label class="block text-sm font-medium text-green-900 mb-2">Email</label> <input type="email" class="w-full px-4 py-3 border border-green-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all calculator-input"> </div> <div> <label class="block text-sm font-medium text-green-900 mb-2">Phone</label> <input type="tel" class="w-full px-4 py-3 border border-green-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all calculator-input"> </div> <div> <label class="block text-sm font-medium text-green-900 mb-2">Inquiry Type</label> <select class="w-full px-4 py-3 border border-green-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all"> <option value="">Select inquiry type</option> <option value="application">Financing Application</option> <option value="rates">Interest Rates</option> <option value="devices">Available Devices</option> <option value="account">Account Support</option> <option value="business">Business Financing</option> <option value="other">Other</option> </select> </div> <div> <label class="block text-sm font-medium text-green-900 mb-2">Message</label> <textarea rows="4" placeholder="How can we help you with your mobile financing needs?" class="w-full px-4 py-3 border border-green-200 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all calculator-input"></textarea> </div> <button type="button" class="w-full mobile-gradient text-white py-3 rounded-xl hover:shadow-lg btn-finance font-semibold"> ? Send Message </button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="finance-gradient text-white py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <div class="flex items-center space-x-3 mb-4"> <div class="w-10 h-10 mobile-gradient rounded-xl flex items-center justify-center float"> <span class="text-white font-bold">?</span> </div> <div> <div class="text-xl font-bold">MobileFin</div> <div class="text-xs text-blue-200">Smart Device Financing</div> </div> </div> <p class="text-blue-100 text-sm mb-4">Making the latest mobile technology accessible through smart financing solutions and competitive rates.</p> <div class="flex space-x-3"> <span class="text-2xl cursor-pointer hover:scale-110 transition-transform">?</span> <span class="text-2xl cursor-pointer hover:scale-110 transition-transform">?</span> <span class="text-2xl cursor-pointer hover:scale-110 transition-transform">?</span> <span class="text-2xl cursor-pointer hover:scale-110 transition-transform">?</span> </div> </div> <div> <h3 class="text-lg font-semibold mb-4">? Financing</h3> <ul class="space-y-2 text-blue-100 text-sm"> <li><a href="#" class="hover:text-white transition-colors">Basic Plan</a></li> <li><a href="#" class="hover:text-white transition-colors">Premium Plan</a></li> <li><a href="#" class="hover:text-white transition-colors">Business Plan</a></li> <li><a href="#" class="hover:text-white transition-colors">Enterprise Plan</a></li> <li><a href="#" class="hover:text-white transition-colors">Payment Calculator</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4">? Devices</h3> <ul class="space-y-2 text-blue-100 text-sm"> <li><a href="#" class="hover:text-white transition-colors">iPhones</a></li> <li><a href="#" class="hover:text-white transition-colors">Samsung Galaxy</a></li> <li><a href="#" class="hover:text-white transition-colors">iPads & Tablets</a></li> <li><a href="#" class="hover:text-white transition-colors">Laptops</a></li> <li><a href="#" class="hover:text-white transition-colors">Accessories</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4">? Support</h3> <ul class="space-y-2 text-blue-100 text-sm"> <li>? (555) MOBILE-FIN</li> <li>✉️ support@mobilefin.com</li> <li>? 789 Finance Plaza</li> <li>? 24/7 Online Applications</li> <li>? Live Chat Support</li> </ul> </div> </div> <div class="border-t border-blue-400 mt-8 pt-8 text-center text-blue-100 text-sm"> <p>© 2024 MobileFin. All rights reserved. | Privacy Policy | Terms of Service | Responsible Lending</p> <p class="mt-2">? "Your dream device is just a click away!" ?</p> </div> </div> </footer> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96e84cb055cd8602',t:'MTc1NTA4OTAyMi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
* { font-family: 'Poppins', sans-serif; } .fade-in { animation: fadeIn 1.5s ease-in-out; } .slide-up { animation: slideUp 1s ease-out; } .slide-in-left { animation: slideInLeft 1.2s ease-out; } .slide-in-right { animation: slideInRight 1.2s ease-out; } .bounce-in { animation: bounceIn 1.5s ease-out; } .float { animation: float 4s ease-in-out infinite; } .float-delayed { animation: float 4s ease-in-out infinite; animation-delay: 2s; } .phone-slide { animation: phoneSlide 8s linear infinite; } .money-bounce { animation: moneyBounce 3s ease-in-out infinite; } .card-flip { animation: cardFlip 4s ease-in-out infinite; } .payment-pulse { animation: paymentPulse 2s ease-in-out infinite; } .chart-grow { animation: chartGrow 3s ease-in-out infinite; } .coin-spin { animation: coinSpin 2s linear infinite; } .finance-glow { animation: financeGlow 3s ease-in-out infinite; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideInLeft { from { transform: translateX(-80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.1); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-20px) rotate(5deg); } 50% { transform: translateY(-10px) rotate(0deg); } 75% { transform: translateY(-15px) rotate(-5deg); } } @keyframes phoneSlide { 0% { transform: translateX(-100px) rotate(0deg); } 25% { transform: translateX(25vw) rotate(10deg); } 50% { transform: translateX(50vw) rotate(0deg); } 75% { transform: translateX(75vw) rotate(-10deg); } 100% { transform: translateX(calc(100vw + 100px)) rotate(0deg); } } @keyframes moneyBounce { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-20px) scale(1.1); } } @keyframes cardFlip { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } } @keyframes paymentPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } @keyframes chartGrow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.2); } } @keyframes coinSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes financeGlow { 0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); } 50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.6); } } .mobile-gradient { background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%); } .finance-gradient { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%); } .gold-gradient { background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%); } .card-finance { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; } .card-finance:hover { transform: translateY(-15px) rotateX(10deg) rotateY(5deg) scale(1.05); box-shadow: 0 30px 60px rgba(0,0,0,0.2); } .btn-finance { transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-finance:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 15px 30px rgba(0,0,0,0.2); } .btn-finance::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; } .btn-finance:hover::before { left: 100%; } .text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .overlay-finance { background: linear-gradient(rgba(34, 197, 94, 0.8), rgba(21, 128, 61, 0.6)); } .calculator-input { transition: all 0.3s ease; } .calculator-input:focus { transform: scale(1.02); box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); } .loan-slider { appearance: none; height: 8px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; transition: opacity 0.2s; } .loan-slider:hover { opacity: 1; } .loan-slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #22c55e; cursor: pointer; box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); } .loan-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #22c55e; cursor: pointer; box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); } .counter-finance { animation: counterFinance 2s ease-out; } @keyframes counterFinance { 0% { transform: scale(0.5) rotateY(-180deg); opacity: 0; } 50% { transform: scale(1.2) rotateY(0deg); opacity: 0.8; } 100% { transform: scale(1) rotateY(0deg); opacity: 1; } } .approval-badge { animation: approvalBadge 2s ease-in-out infinite; } @keyframes approvalBadge { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(5deg); } }
JavaScript
// Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Enhanced scroll effects window.addEventListener('scroll', function() { const nav = document.querySelector('nav'); if (window.scrollY > 100) { nav.classList.add('shadow-2xl'); nav.style.backgroundColor = 'rgba(255, 255, 255, 0.98)'; } else { nav.classList.remove('shadow-2xl'); nav.style.backgroundColor = 'rgba(255, 255, 255, 0.95)'; } }); // Advanced intersection observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0) translateX(0) scale(1) rotateX(0) rotateY(0)'; // Add extra glow effect for special elements if (entry.target.classList.contains('finance-glow')) { entry.target.style.animation += ', financeGlow 3s ease-in-out infinite'; } } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.slide-up, .slide-in-left, .slide-in-right, .bounce-in').forEach(el => { el.style.opacity = '0'; if (el.classList.contains('slide-up')) { el.style.transform = 'translateY(60px)'; } else if (el.classList.contains('slide-in-left')) { el.style.transform = 'translateX(-80px)'; } else if (el.classList.contains('slide-in-right')) { el.style.transform = 'translateX(80px)'; } else if (el.classList.contains('bounce-in')) { el.style.transform = 'scale(0.3)'; } observer.observe(el); }); // Loan calculator functionality const devicePriceSlider = document.getElementById('devicePrice'); const downPaymentSlider = document.getElementById('downPayment'); const loanTermSlider = document.getElementById('loanTerm'); const interestRateSelect = document.getElementById('interestRate'); const loanAmountSlider = document.getElementById('loanAmount'); function updateCalculator() { const devicePrice = parseInt(devicePriceSlider.value); const downPayment = parseInt(downPaymentSlider.value); const loanTerm = parseInt(loanTermSlider.value); const interestRate = parseFloat(interestRateSelect.value); const amountFinanced = devicePrice - downPayment; const monthlyRate = interestRate / 100 / 12; let monthlyPayment; if (interestRate === 0) { monthlyPayment = amountFinanced / loanTerm; } else { monthlyPayment = amountFinanced * (monthlyRate * Math.pow(1 + monthlyRate, loanTerm)) / (Math.pow(1 + monthlyRate, loanTerm) - 1); } const totalCost = monthlyPayment * loanTerm + downPayment; const totalInterest = totalCost - devicePrice; // Update display values document.getElementById('priceValue').textContent = `$${devicePrice.toLocaleString()}`; document.getElementById('downValue').textContent = `$${downPayment}`; document.getElementById('termValue').textContent = `${loanTerm}`; document.getElementById('monthlyPayment').textContent = `$${Math.round(monthlyPayment)}`; document.getElementById('totalInterest').textContent = `$${Math.round(totalInterest)}`; document.getElementById('totalCost').textContent = `$${Math.round(totalCost)}`; document.getElementById('summaryPrice').textContent = `$${devicePrice.toLocaleString()}`; document.getElementById('summaryDown').textContent = `-$${downPayment}`; document.getElementById('amountFinanced').textContent = `$${amountFinanced.toLocaleString()}`; document.getElementById('finalPayment').textContent = `$${Math.round(monthlyPayment)}`; } // Update loan amount slider loanAmountSlider.addEventListener('input', function() { document.getElementById('loanValue').textContent = `$${parseInt(this.value).toLocaleString()}`; }); // Add event listeners for calculator [devicePriceSlider, downPaymentSlider, loanTermSlider, interestRateSelect].forEach(element => { element.addEventListener('input', updateCalculator); }); // Initialize calculator updateCalculator(); // Interactive button effects with payment ripples document.querySelectorAll('button').forEach(button => { button.addEventListener('click', function(e) { // Create payment ripple effect const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = size + 'px'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.background = 'rgba(34, 197, 94, 0.6)'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; ripple.style.pointerEvents = 'none'; this.style.position = 'relative'; this.style.overflow = 'hidden'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Handle different button actions if (this.textContent.includes('Apply') || this.textContent.includes('Finance')) { alert('? Great choice! In a real mobile finance system, this would start your application process with pre-filled information.'); } else if (this.textContent.includes('Send Message')) { alert('? Thanks for reaching out! This is a demo form - in a real mobile finance system, your message would be sent to our customer service team.'); } else if (this.textContent.includes('Calculator') || this.textContent.includes('Pre-Approved')) { alert('? Smart financing! In a real system, this would process your information and provide personalized financing options.'); } }); }); // Add CSS for ripple animation const style = document.createElement('style'); style.textContent = ` @keyframes ripple { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); // Money cursor trail effect let mouseX = 0, mouseY = 0; document.addEventListener('mousemove', function(e) { mouseX = e.clientX; mouseY = e.clientY; // Create money trail occasionally if (Math.random() < 0.02) { createMoneyTrail(mouseX, mouseY); } }); function createMoneyTrail(x, y) { const money = ['?', '?', '?', '?']; const coin = document.createElement('div'); coin.innerHTML = money[Math.floor(Math.random() * money.length)]; coin.style.position = 'fixed'; coin.style.left = x + 'px'; coin.style.top = y + 'px'; coin.style.pointerEvents = 'none'; coin.style.zIndex = '9999'; coin.style.fontSize = '12px'; coin.style.animation = 'moneyBounce 2s ease-out forwards'; document.body.appendChild(coin); setTimeout(() => { coin.remove(); }, 2000); } // Animated counter effect function animateCounters() { const counters = document.querySelectorAll('.counter-finance'); counters.forEach(counter => { const target = counter.textContent.includes('K') ? parseInt(counter.textContent) * 1000 : parseFloat(counter.textContent); const increment = target / 50; let current = 0; const updateCounter = () => { if (current < target) { current += increment; if (counter.textContent.includes('K')) { counter.textContent = Math.ceil(current / 1000) + 'K+'; } else if (counter.textContent.includes('.')) { counter.textContent = (current / 1000).toFixed(1); } else if (counter.textContent.includes('%')) { counter.textContent = Math.ceil(current) + '%'; } else if (counter.textContent.includes('/')) { counter.textContent = '24/7'; } else if (counter.textContent.includes('min')) { counter.textContent = Math.ceil(current) + 'min'; } else { counter.textContent = Math.ceil(current) + (counter.textContent.includes('+') ? '+' : ''); } requestAnimationFrame(updateCounter); } }; updateCounter(); }); } // Trigger counter animation when in view const counterObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounters(); counterObserver.unobserve(entry.target); } }); }); document.querySelectorAll('.counter-finance').forEach(counter => { counterObserver.observe(counter); }); // Page loading animation window.addEventListener('load', function() { document.body.style.opacity = '1'; // Add sliding phone animation occasionally setInterval(() => { if (Math.random() < 0.1) { createSlidingPhone(); } }, 15000); }); function createSlidingPhone() { const phone = document.createElement('div'); phone.innerHTML = '??'; phone.style.position = 'fixed'; phone.style.bottom = '30px'; phone.style.left = '-80px'; phone.style.fontSize = '30px'; phone.style.zIndex = '1'; phone.style.pointerEvents = 'none'; phone.style.animation = 'phoneSlide 8s linear forwards'; document.body.appendChild(phone); setTimeout(() => { phone.remove(); }, 8000); } // Add interactive hover effects to finance cards document.querySelectorAll('.card-finance').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-15px) rotateX(10deg) rotateY(5deg) scale(1.05)'; this.style.boxShadow = '0 30px 60px rgba(0,0,0,0.2)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) rotateX(0deg) rotateY(0deg) scale(1)'; this.style.boxShadow = ''; }); });
Output Preview
Desktop
Mobile
Fullscreen