Hugging Face's logo

Spaces:
sj68
/
sellphone
Running

App Files Community
sellphone / index.html
sj68's picture
sj68
You are building a complete website for SellPhoneInstant.club – a second-hand phone selling platform. The business is Maria Mobile Wireless, located at 109 E Santa Clara St, San Jose, CA 95113.
32b8909 verified
raw
history blame contribute delete
25.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SellPhoneInstant.club - Get Instant Cash for Your Phone</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <style>
 .gradient-bg {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 .phone-shadow {
 box-shadow: 0 20px 50px rgba(0,0,0,0.15);
 }
 .offer-card {
 transition: all 0.3s ease;
 }
 .offer-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(0,0,0,0.1);
 }
 </style>
</head>
<body class="font-sans antialiased text-gray-800">
 <!-- Navigation -->
 <nav class="bg-white shadow-sm">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0 flex items-center">
 <i data-feather="smartphone" class="text-purple-600 h-8 w-8"></i>
 <span class="ml-2 text-xl font-bold text-gray-900">SellPhoneInstant.club</span>
 </div>
 </div>
 <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8">
 <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-purple-500 text-sm font-medium">Home</a>
 <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">About</a>
 <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">FAQ</a>
 <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a>
 </div>
 <div class="-mr-2 flex items-center sm:hidden">
 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500">
 <i data-feather="menu" class="block h-6 w-6"></i>
 </button>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <div class="gradient-bg text-white">
 <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
 <div class="text-center">
 <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl" data-aos="fade-down">
 Sell Your Phone Instantly
 </h1>
 <p class="mt-6 max-w-lg mx-auto text-xl" data-aos="fade-up" data-aos-delay="100">
 Get the best cash offer in San Jose. No waiting, no hassle.
 </p>
 <div class="mt-10" data-aos="fade-up" data-aos-delay="200">
 <a href="#phone-form" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-purple-700 bg-white hover:bg-gray-50">
 Check Your Phone Value Now
 <i data-feather="arrow-right" class="ml-2"></i>
 </a>
 </div>
 </div>
 </div>
 </div>
<!-- Phone Form Section -->
 <div id="phone-form" class="bg-white py-16 px-4 sm:px-6 lg:px-8">
 <div class="max-w-3xl mx-auto bg-gray-50 rounded-xl shadow-md overflow-hidden p-8 phone-shadow">
 <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Tell Us About Your Phone</h2>
 <form id="phoneValueForm" class="space-y-6">
 <div>
 <label for="brand" class="block text-sm font-medium text-gray-700">Brand</label>
 <select id="brand" name="brand" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md">
 <option value="">Select Brand</option>
 <option value="apple">Apple iPhone</option>
 <option value="samsung">Samsung Galaxy</option>
 <option value="google">Google Pixel</option>
 <option value="lg">LG</option>
 <option value="oneplus">OnePlus</option>
 </select>
 </div>
<div>
 <label for="model" class="block text-sm font-medium text-gray-700">Model</label>
 <select id="model" name="model" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md" disabled>
 <option value="">Select Model</option>
 </select>
 </div>
<div>
 <label for="storage" class="block text-sm font-medium text-gray-700">Storage</label>
 <select id="storage" name="storage" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md" disabled>
 <option value="">Select Storage</option>
 </select>
 </div>
<div>
 <label for="condition" class="block text-sm font-medium text-gray-700">Condition</label>
 <select id="condition" name="condition" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md">
 <option value="">Select Condition</option>
 <option value="like-new">Like New</option>
 <option value="good">Good</option>
 <option value="fair">Fair</option>
 <option value="broken">Broken but functional</option>
 </select>
 </div>
<div>
 <label for="carrier" class="block text-sm font-medium text-gray-700">Carrier</label>
 <select id="carrier" name="carrier" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md">
 <option value="">Select Carrier</option>
 <option value="verizon">Verizon</option>
 <option value="att">AT&T</option>
 <option value="tmobile">T-Mobile</option>
 <option value="unlocked">Unlocked</option>
 </select>
 </div>
<div class="pt-4">
 <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
 Get Instant Offer
 </button>
 </div>
 </form>
 </div>
 </div>
<!-- How It Works Section -->
 <div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-12">How It Works</h2>
 <div class="grid md:grid-cols-3 gap-8">
 <div class="bg-white p-6 rounded-lg shadow-md offer-card" data-aos="fade-up">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
 <i data-feather="smartphone" class="h-6 w-6"></i>
 </div>
 <h3 class="text-lg font-medium text-gray-900 mb-2">1. Tell Us About Your Phone</h3>
 <p class="text-gray-500">Select your phone's brand, model, storage, condition and carrier.</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-md offer-card" data-aos="fade-up" data-aos-delay="100">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
 <i data-feather="dollar-sign" class="h-6 w-6"></i>
 </div>
 <h3 class="text-lg font-medium text-gray-900 mb-2">2. Get Instant Cash Offer</h3>
 <p class="text-gray-500">We'll calculate your phone's value based on current market prices.</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-md offer-card" data-aos="fade-up" data-aos-delay="200">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-4">
 <i data-feather="map-pin" class="h-6 w-6"></i>
 </div>
 <h3 class="text-lg font-medium text-gray-900 mb-2">3. Visit Our Store</h3>
 <p class="text-gray-500">Bring your phone to our San Jose location and get paid instantly.</p>
 </div>
 </div>
 </div>
 </div>
<!-- Testimonials -->
 <div class="bg-white py-16 px-4 sm:px-6 lg:px-8">
 <div class="max-w-3xl mx-auto">
 <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-12">What Our Customers Say</h2>
 <div class="space-y-8">
 <div class="bg-gray-50 p-6 rounded-lg shadow-sm" data-aos="fade-right">
 <div class="flex">
 <div class="flex-shrink-0">
 <i data-feather="user" class="h-10 w-10 text-gray-400"></i>
 </div>
 <div class="ml-4">
 <div class="text-lg font-medium text-gray-900">Sarah J.</div>
 <div class="mt-1 text-purple-600 flex">
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 </div>
 <div class="mt-2 text-gray-600">
 <p>"I was amazed at how easy it was to sell my old iPhone. The offer was fair and I got cash in hand immediately!"</p>
 </div>
 </div>
 </div>
 </div>
 <div class="bg-gray-50 p-6 rounded-lg shadow-sm" data-aos="fade-right" data-aos-delay="100">
 <div class="flex">
 <div class="flex-shrink-0">
 <i data-feather="user" class="h-10 w-10 text-gray-400"></i>
 </div>
 <div class="ml-4">
 <div class="text-lg font-medium text-gray-900">Michael T.</div>
 <div class="mt-1 text-purple-600 flex">
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 <i data-feather="star" class="w-4 h-4 fill-current"></i>
 </div>
 <div class="mt-2 text-gray-600">
 <p>"Best place to sell phones in San Jose. No hidden fees and the staff was super friendly. Will definitely come back!"</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- CTA Section -->
 <div class="gradient-bg text-white py-16 px-4 sm:px-6 lg:px-8">
 <div class="max-w-3xl mx-auto text-center">
 <h2 class="text-3xl font-extrabold mb-6">Ready to Sell Your Phone?</h2>
 <p class="text-xl mb-8">Get the best cash offer in San Jose today. No waiting, no hassle.</p>
 <a href="#phone-form" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-purple-700 bg-white hover:bg-gray-50">
 Check Your Phone Value Now
 <i data-feather="arrow-right" class="ml-2"></i>
 </a>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-800 text-white">
 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Maria Mobile Wireless</h3>
 <p class="mt-4 text-base text-gray-300">109 E Santa Clara St<br>San Jose, CA 95113</p>
 </div>
 <div>
 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Quick Links</h3>
 <ul class="mt-4 space-y-2">
 <li><a href="#" class="text-base text-gray-300 hover:text-white">Home</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">About Us</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
 <ul class="mt-4 space-y-2">
 <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy Policy</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms of Service</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Contact</h3>
 <ul class="mt-4 space-y-2">
 <li class="flex items-center">
 <i data-feather="phone" class="h-5 w-5 text-gray-300 mr-2"></i>
 <span class="text-base text-gray-300">(408) 555-1234</span>
 </li>
 <li class="flex items-center">
 <i data-feather="mail" class="h-5 w-5 text-gray-300 mr-2"></i>
 <span class="text-base text-gray-300">info@sellphoneinstant.club</span>
 </li>
 </ul>
 </div>
 </div>
 <div class="mt-12 border-t border-gray-700 pt-8">
 <p class="text-base text-gray-400 text-center">&copy; 2023 SellPhoneInstant.club. All rights reserved.</p>
 </div>
 </div>
 </footer>
<script>
 AOS.init();
 feather.replace();
// Phone model and storage options
 const phoneModels = {
 'apple': [
 {name: 'iPhone 14 Pro Max', storage: [128, 256, 512, 1024]},
 {name: 'iPhone 14 Pro', storage: [128, 256, 512, 1024]},
 {name: 'iPhone 14', storage: [128, 256, 512]},
 {name: 'iPhone 13 Pro Max', storage: [128, 256, 512, 1024]},
 {name: 'iPhone 13 Pro', storage: [128, 256, 512, 1024]},
 {name: 'iPhone 13', storage: [128, 256, 512]},
 {name: 'iPhone 12 Pro Max', storage: [128, 256, 512]},
 {name: 'iPhone 12 Pro', storage: [128, 256, 512]},
 {name: 'iPhone 12', storage: [64, 128, 256]},
 {name: 'iPhone 11 Pro Max', storage: [64, 256, 512]},
 {name: 'iPhone 11 Pro', storage: [64, 256, 512]},
 {name: 'iPhone 11', storage: [64, 128, 256]},
 {name: 'iPhone XS Max', storage: [64, 256, 512]},
 {name: 'iPhone XS', storage: [64, 256, 512]},
 {name: 'iPhone XR', storage: [64, 128, 256]},
 {name: 'iPhone X', storage: [64, 256]},
 {name: 'iPhone 8 Plus', storage: [64, 256]},
 {name: 'iPhone 8', storage: [64, 256]},
 {name: 'iPhone 7 Plus', storage: [32, 128, 256]},
 {name: 'iPhone 7', storage: [32, 128, 256]},
 {name: 'iPhone 6s Plus', storage: [16, 32, 64, 128]},
 {name: 'iPhone 6s', storage: [16, 32, 64, 128]},
 {name: 'iPhone SE (2020)', storage: [64, 128, 256]},
 {name: 'iPhone SE (2016)', storage: [16, 32, 64, 128]}
 ],
 'samsung': [
 {name: 'Galaxy S23 Ultra', storage: [256, 512, 1024]},
 {name: 'Galaxy S23+', storage: [256, 512]},
 {name: 'Galaxy S23', storage: [128, 256]},
 {name: 'Galaxy S22 Ultra', storage: [128, 256, 512, 1024]},
 {name: 'Galaxy S22+', storage: [128, 256]},
 {name: 'Galaxy S22', storage: [128, 256]},
 {name: 'Galaxy S21 Ultra', storage: [128, 256, 512]},
 {name: 'Galaxy S21+', storage: [128, 256]},
 {name: 'Galaxy S21', storage: [128, 256]},
 {name: 'Galaxy S20 Ultra', storage: [128, 256, 512]},
 {name: 'Galaxy S20+', storage: [128, 256, 512]},
 {name: 'Galaxy S20', storage: [128]},
 {name: 'Galaxy Note 20 Ultra', storage: [128, 256, 512]},
 {name: 'Galaxy Note 20', storage: [128, 256]},
 {name: 'Galaxy Note 10+', storage: [256, 512]},
 {name: 'Galaxy Note 10', storage: [256]},
 {name: 'Galaxy Z Fold 4', storage: [256, 512, 1024]},
 {name: 'Galaxy Z Flip 4', storage: [128, 256, 512]},
 {name: 'Galaxy A53 5G', storage: [128, 256]},
 {name: 'Galaxy A33 5G', storage: [64, 128]},
 {name: 'Galaxy A13 5G', storage: [64]},
 {name: 'Galaxy A03s', storage: [32, 64]}
 ],
 'google': [
 {name: 'Pixel 7 Pro', storage: [128, 256, 512]},
 {name: 'Pixel 7', storage: [128, 256]},
 {name: 'Pixel 6 Pro', storage: [128, 256, 512]},
 {name: 'Pixel 6', storage: [128, 256]},
 {name: 'Pixel 5', storage: [128]},
 {name: 'Pixel 4a 5G', storage: [128]},
 {name: 'Pixel 4a', storage: [128]},
 {name: 'Pixel 4 XL', storage: [64, 128]},
 {name: 'Pixel 4', storage: [64, 128]}
 ],
 'lg': [
 {name: 'Wing 5G', storage: [128, 256]},
 {name: 'Velvet 5G', storage: [128]},
 {name: 'G8X ThinQ', storage: [128]},
 {name: 'V60 ThinQ 5G', storage: [128]},
 {name: 'Stylo 6', storage: [64]},
 {name: 'K92 5G', storage: [128]}
 ],
 'oneplus': [
 {name: '10 Pro 5G', storage: [128, 256, 512]},
 {name: '10T 5G', storage: [128, 256]},
 {name: '9 Pro 5G', storage: [128, 256]},
 {name: '9 5G', storage: [128]},
 {name: '8T', storage: [128, 256]},
 {name: '8 Pro', storage: [128, 256]},
 {name: '8', storage: [128]},
 {name: 'Nord N20 5G', storage: [128]},
 {name: 'Nord N10 5G', storage: [128]}
 ]
 };
 // Form handling
 document.getElementById('brand').addEventListener('change', function() {
 const brand = this.value;
 const modelSelect = document.getElementById('model');
 const storageSelect = document.getElementById('storage');
// Clear previous options
 modelSelect.innerHTML = '<option value="">Select Model</option>';
 storageSelect.innerHTML = '<option value="">Select Storage</option>';
 storageSelect.disabled = true;
if (brand && phoneModels[brand]) {
 modelSelect.disabled = false;
// Add models for selected brand
 phoneModels[brand].forEach(model => {
 const option = document.createElement('option');
 option.value = model.name.toLowerCase().replace(/\s+/g, '-');
 option.textContent = model.name;
 modelSelect.appendChild(option);
 });
 } else {
 modelSelect.disabled = true;
 }
 });
 document.getElementById('model').addEventListener('change', function() {
 const brand = document.getElementById('brand').value;
 const modelName = this.value;
 const storageSelect = document.getElementById('storage');
// Clear previous options
 storageSelect.innerHTML = '<option value="">Select Storage</option>';
if (brand && modelName && phoneModels[brand]) {
 // Find the selected model
 const selectedModel = phoneModels[brand].find(model =>
model.name.toLowerCase().replace(/\s+/g, '-') === modelName
 );
if (selectedModel) {
 storageSelect.disabled = false;
// Add storage options for selected model
 selectedModel.storage.forEach(storage => {
 const option = document.createElement('option');
 option.value = storage;
 option.textContent = `${storage} GB`;
 storageSelect.appendChild(option);
 });
 }
 } else {
 storageSelect.disabled = true;
 }
 });
 // Form submission
 document.getElementById('phoneValueForm').addEventListener('submit', function(e) {
 e.preventDefault();
const brand = document.getElementById('brand').value;
 const model = document.getElementById('model').value;
 const storage = document.getElementById('storage').value;
 const condition = document.getElementById('condition').value;
 const carrier = document.getElementById('carrier').value;
if (!brand || !model || !storage || !condition || !carrier) {
 alert('Please fill out all fields to get an offer.');
 return;
 }
// Simple pricing calculation (placeholder logic)
 let basePrice = 0;
// Base price based on brand
 if (brand === 'apple') basePrice = 300;
 else if (brand === 'samsung') basePrice = 250;
 else if (brand === 'google') basePrice = 200;
 else if (brand === 'lg') basePrice = 150;
 else if (brand === 'oneplus') basePrice = 180;
// Adjust for storage
 if (storage >= 256) basePrice += 50;
 if (storage >= 512) basePrice += 100;
 if (storage >= 1024) basePrice += 150;
// Adjust for condition
 if (condition === 'like-new') basePrice *= 0.9;
 else if (condition === 'good') basePrice *= 0.75;
 else if (condition === 'fair') basePrice *= 0.6;
 else if (condition === 'broken') basePrice *= 0.4;
// Adjust for carrier (unlocked is most valuable)
 if (carrier !== 'unlocked') basePrice *= 0.95;
// Round to nearest 5
 const offerPrice = Math.round(basePrice / 5) * 5;
// Store offer in localStorage and redirect
 localStorage.setItem('phoneOffer', JSON.stringify({
 brand: document.getElementById('brand').options[document.getElementById('brand').selectedIndex].text,
 model: document.getElementById('model').options[document.getElementById('model').selectedIndex].text,
 storage: storage + 'GB',
 condition: document.getElementById('condition').options[document.getElementById('condition').selectedIndex].text,
 carrier: document.getElementById('carrier').options[document.getElementById('carrier').selectedIndex].text,
 price: offerPrice
 }));
window.location.href = 'offer.html';
 });
 </script>
</body>
</html>