Motorcycle evaluator









<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USA Motorcycle Evaluator Widget</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .motorcycle-widget {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            max-width: 100%;
            margin: 20px auto;
        }

        .widget-header {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            padding: 25px;
            text-align: center;
        }

        .widget-header h1 {
            font-size: 1.8rem;
            margin-bottom: 8px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .widget-header p {
            font-size: 0.95rem;
            opacity: 0.9;
        }

        .widget-content {
            background: white;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            padding: 25px;
        }

        .form-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .results-section {
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border: 2px solid #e9ecef;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #333;
            font-size: 0.9rem;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        .evaluate-btn {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .evaluate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(52, 152, 219, 0.3);
        }

        .price-display {
            background: linear-gradient(135deg, #27ae60, #229954);
            color: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            margin-bottom: 20px;
        }

        .price-range {
            font-size: 1.6rem;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .avg-price {
            font-size: 1rem;
            opacity: 0.9;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 20px;
        }

        .metric-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #e9ecef;
        }

        .metric-value {
            font-size: 1.2rem;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 4px;
        }

        .metric-label {
            color: #7f8c8d;
            font-size: 0.8rem;
        }

        .popularity-container {
            margin-top: 8px;
        }

        .popularity-bar {
            width: 100%;
            height: 12px;
            background: #ecf0f1;
            border-radius: 6px;
            overflow: hidden;
        }

        .popularity-fill {
            height: 100%;
            background: linear-gradient(90deg, #e74c3c, #c0392b);
            transition: width 0.6s ease;
            border-radius: 6px;
        }

        .details-section {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .details-section h4 {
            margin-bottom: 12px;
            color: #2c3e50;
            font-size: 1rem;
        }

        .detail-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e9ecef;
            font-size: 0.9rem;
        }

        .detail-item:last-child {
            border-bottom: none;
        }

        .detail-label {
            color: #7f8c8d;
        }

        .detail-value {
            font-weight: 600;
            color: #2c3e50;
        }

        .initial-message {
            text-align: center;
            color: #7f8c8d;
            padding: 40px 20px;
        }

        .initial-message h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .hidden {
            display: none;
        }

        .usa-flag {
            display: inline-block;
            margin-right: 8px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .widget-content {
                grid-template-columns: 1fr;
                padding: 20px;
                gap: 20px;
            }
            
            .metrics-grid {
                grid-template-columns: 1fr;
            }
            
            .widget-header h1 {
                font-size: 1.5rem;
            }
            
            .price-range {
                font-size: 1.4rem;
            }
        }

        /* Widget Container for Easy Integration */
        .widget-container {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="widget-container">
        <div class="motorcycle-widget">
            <div class="widget-header">
                <h1><span class="usa-flag">πŸ‡ΊπŸ‡Έ</span>USA Motorcycle Evaluator</h1>
                <p>Get instant market value, range analysis & popularity scores</p>
            </div>

            <div class="widget-content">
                <div class="form-section">
                    <form id="motorcycleForm">
                        <div class="form-group">
                            <label for="make">Make</label>
                            <select id="make" required>
                                <option value="">Select Make</option>
                                <option value="Honda">Honda</option>
                                <option value="Yamaha">Yamaha</option>
                                <option value="Kawasaki">Kawasaki</option>
                                <option value="Suzuki">Suzuki</option>
                                <option value="Ducati">Ducati</option>
                                <option value="BMW">BMW</option>
                                <option value="Harley-Davidson">Harley-Davidson</option>
                                <option value="KTM">KTM</option>
                                <option value="Triumph">Triumph</option>
                                <option value="Aprilia">Aprilia</option>
                                <option value="Indian">Indian Motorcycle</option>
                                <option value="Can-Am">Can-Am</option>
                                <option value="Zero">Zero (Electric)</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="model">Model</label>
                            <input type="text" id="model" placeholder="e.g., CBR600RR, Street Glide, Ninja 650" required>
                        </div>

                        <div class="form-group">
                            <label for="year">Year</label>
                            <input type="number" id="year" min="1980" max="2025" placeholder="e.g., 2020" required>
                        </div>

                        <div class="form-group">
                            <label for="engine">Engine Size (cc)</label>
                            <input type="number" id="engine" min="50" max="2500" placeholder="e.g., 600" required>
                        </div>

                        <div class="form-group">
                            <label for="mileage">Mileage (miles)</label>
                            <input type="number" id="mileage" min="0" placeholder="e.g., 15000" required>
                        </div>

                        <div class="form-group">
                            <label for="condition">Condition</label>
                            <select id="condition" required>
                                <option value="">Select Condition</option>
                                <option value="Excellent">Excellent</option>
                                <option value="Good">Good</option>
                                <option value="Fair">Fair</option>
                                <option value="Poor">Poor</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="type">Motorcycle Type</label>
                            <select id="type" required>
                                <option value="">Select Type</option>
                                <option value="Sport">Sport</option>
                                <option value="Cruiser">Cruiser</option>
                                <option value="Touring">Touring</option>
                                <option value="Adventure">Adventure/Dual Sport</option>
                                <option value="Naked">Naked/Standard</option>
                                <option value="Dirt">Dirt/Off-road</option>
                                <option value="Scooter">Scooter</option>
                                <option value="Electric">Electric</option>
                            </select>
                        </div>

                        <button type="submit" class="evaluate-btn">Get Evaluation</button>
                    </form>
                </div>

                <div class="results-section">
                    <div id="initialMessage" class="initial-message">
                        <h3>πŸ“Š Evaluation Results</h3>
                        <p>Complete the form to get your motorcycle's estimated market value and detailed analysis.</p>
                    </div>

                    <div id="resultsContent" class="hidden">
                        <div class="price-display">
                            <div class="price-range" id="priceRange">$0 - $0</div>
                            <div class="avg-price" id="averagePrice">Market Average: $0</div>
                        </div>

                        <div class="metrics-grid">
                            <div class="metric-item">
                                <div class="metric-value" id="popularityScore">0%</div>
                                <div class="metric-label">Popularity</div>
                                <div class="popularity-container">
                                    <div class="popularity-bar">
                                        <div class="popularity-fill" id="popularityBar" style="width: 0%"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="metric-item">
                                <div class="metric-value" id="marketDemand">Medium</div>
                                <div class="metric-label">Market Demand</div>
                            </div>

                            <div class="metric-item">
                                <div class="metric-value" id="depreciationRate">0%</div>
                                <div class="metric-label">Annual Depreciation</div>
                            </div>

                            <div class="metric-item">
                                <div class="metric-value" id="valueScore">0/10</div>
                                <div class="metric-label">Value Score</div>
                            </div>
                        </div>

                        <div class="details-section">
                            <h4>Detailed Analysis</h4>
                            <div class="detail-item">
                                <span class="detail-label">Estimated Range:</span>
                                <span class="detail-value" id="fuelRange">0 miles</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">Fuel Economy:</span>
                                <span class="detail-value" id="fuelEconomy">0 MPG</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">Age Category:</span>
                                <span class="detail-value" id="ageFactor">N/A</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">Mileage Impact:</span>
                                <span class="detail-value" id="mileageImpact">N/A</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">Insurance Category:</span>
                                <span class="detail-value" id="insuranceGroup">N/A</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // USA Market Motorcycle Data (USD pricing)
        const usaMotorcycleData = {
            'Honda': {
                basePrice: 8500,
                popularity: 88,
                reliability: 9.2,
                depreciation: 11,
                fuelEconomy: 45
            },
            'Yamaha': {
                basePrice: 8200,
                popularity: 85,
                reliability: 9.0,
                depreciation: 12,
                fuelEconomy: 42
            },
            'Kawasaki': {
                basePrice: 7800,
                popularity: 82,
                reliability: 8.5,
                depreciation: 13,
                fuelEconomy: 40
            },
            'Suzuki': {
                basePrice: 7500,
                popularity: 78,
                reliability: 8.5,
                depreciation: 14,
                fuelEconomy: 43
            },
            'Ducati': {
                basePrice: 15000,
                popularity: 72,
                reliability: 7.5,
                depreciation: 18,
                fuelEconomy: 35
            },
            'BMW': {
                basePrice: 14500,
                popularity: 70,
                reliability: 8.8,
                depreciation: 15,
                fuelEconomy: 38
            },
            'Harley-Davidson': {
                basePrice: 18000,
                popularity: 92,
                reliability: 8.0,
                depreciation: 12,
                fuelEconomy: 32
            },
            'KTM': {
                basePrice: 9500,
                popularity: 75,
                reliability: 8.0,
                depreciation: 16,
                fuelEconomy: 40
            },
            'Triumph': {
                basePrice: 12000,
                popularity: 68,
                reliability: 8.2,
                depreciation: 16,
                fuelEconomy: 38
            },
            'Aprilia': {
                basePrice: 11500,
                popularity: 65,
                reliability: 7.8,
                depreciation: 17,
                fuelEconomy: 36
            },
            'Indian': {
                basePrice: 16000,
                popularity: 78,
                reliability: 8.5,
                depreciation: 13,
                fuelEconomy: 34
            },
            'Can-Am': {
                basePrice: 22000,
                popularity: 60,
                reliability: 8.0,
                depreciation: 18,
                fuelEconomy: 30
            },
            'Zero': {
                basePrice: 15000,
                popularity: 55,
                reliability: 8.5,
                depreciation: 20,
                fuelEconomy: 100 // Electric equivalent
            }
        };

        const typeMultipliers = {
            'Sport': 1.25,
            'Cruiser': 1.15,
            'Touring': 1.35,
            'Adventure': 1.30,
            'Naked': 1.05,
            'Dirt': 0.85,
            'Scooter': 0.65,
            'Electric': 1.40
        };

        const conditionMultipliers = {
            'Excellent': 1.0,
            'Good': 0.88,
            'Fair': 0.72,
            'Poor': 0.55
        };

        document.getElementById('motorcycleForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const make = document.getElementById('make').value;
            const model = document.getElementById('model').value;
            const year = parseInt(document.getElementById('year').value);
            const engine = parseInt(document.getElementById('engine').value);
            const mileage = parseInt(document.getElementById('mileage').value);
            const condition = document.getElementById('condition').value;
            const type = document.getElementById('type').value;
            
            const currentYear = new Date().getFullYear();
            const age = currentYear - year;
            
            // Get brand data
            const brandData = usaMotorcycleData[make] || usaMotorcycleData.Honda;
            let basePrice = brandData.basePrice;
            
            // Apply engine size multiplier
            const engineMultiplier = Math.max(0.6, Math.min(2.5, engine / 600));
            basePrice *= engineMultiplier;
            
            // Apply type multiplier
            basePrice *= typeMultipliers[type] || 1.0;
            
            // Apply age depreciation (more aggressive for first few years)
            let ageDepreciation = 1.0;
            if (age <= 1) ageDepreciation = 0.92;
            else if (age <= 3) ageDepreciation = Math.pow(0.88, age);
            else ageDepreciation = Math.pow(0.91, age);
            basePrice *= ageDepreciation;
            
            // Apply mileage depreciation (USA uses miles)
            const mileageDepreciation = Math.max(0.65, 1 - (mileage / 80000) * 0.25);
            basePrice *= mileageDepreciation;
            
            // Apply condition multiplier
            basePrice *= conditionMultipliers[condition];
            
            // Calculate price range
            const lowPrice = Math.round(basePrice * 0.87);
            const highPrice = Math.round(basePrice * 1.13);
            const avgPrice = Math.round(basePrice);
            
            // Calculate metrics
            const popularity = Math.min(100, brandData.popularity + 
                (engine > 1000 ? 6 : 0) + 
                (age < 2 ? 8 : 0) + 
                (type === 'Cruiser' ? 5 : 0));
            
            const depreciationRate = Math.max(8, brandData.depreciation + (age > 8 ? 4 : 0));
            const valueScore = Math.round(brandData.reliability - (age * 0.15) - (mileage / 15000));
            
            // Calculate fuel range (USA gallons and miles)
            let tankSize = 4.5; // Default gallons
            if (type === 'Sport') tankSize = 4.2;
            else if (type === 'Cruiser') tankSize = 5.0;
            else if (type === 'Adventure') tankSize = 6.0;
            else if (type === 'Touring') tankSize = 6.5;
            else if (type === 'Electric') tankSize = 0; // No fuel tank
            
            const fuelRange = type === 'Electric' ? 
                Math.round(engine * 0.8) : // Electric range based on battery size
                Math.round(tankSize * brandData.fuelEconomy);
            
            // Market demand calculation
            let marketDemand = 'Medium';
            if (popularity > 85) marketDemand = 'High';
            else if (popularity < 65) marketDemand = 'Low';
            
            // Update UI
            document.getElementById('priceRange').textContent = 
                `$${lowPrice.toLocaleString()} - $${highPrice.toLocaleString()}`;
            document.getElementById('averagePrice').textContent = 
                `Market Average: $${avgPrice.toLocaleString()}`;
            document.getElementById('popularityScore').textContent = `${popularity}%`;
            document.getElementById('popularityBar').style.width = `${popularity}%`;
            document.getElementById('marketDemand').textContent = marketDemand;
            document.getElementById('depreciationRate').textContent = `${depreciationRate}%`;
            document.getElementById('valueScore').textContent = `${Math.max(1, valueScore)}/10`;
            
            document.getElementById('fuelRange').textContent = 
                type === 'Electric' ? `${fuelRange} miles` : `${fuelRange} miles`;
            document.getElementById('fuelEconomy').textContent = 
                type === 'Electric' ? 'N/A (Electric)' : `${brandData.fuelEconomy} MPG`;
            
            // Age factor
            let ageFactor = 'Classic';
            if (age < 2) ageFactor = 'New';
            else if (age < 5) ageFactor = 'Modern';
            else if (age < 10) ageFactor = 'Mature';
            document.getElementById('ageFactor').textContent = ageFactor;
            
            // Mileage impact
            let mileageImpact = 'High';
            if (mileage < 12000) mileageImpact = 'Low';
            else if (mileage < 30000) mileageImpact = 'Medium';
            document.getElementById('mileageImpact').textContent = mileageImpact;
            
            // Insurance category
            let insuranceCategory = 'Standard';
            if (engine > 1000 || type === 'Sport') insuranceCategory = 'High Risk';
            else if (engine > 600) insuranceCategory = 'Moderate';
            else if (engine < 300) insuranceCategory = 'Low Risk';
            document.getElementById('insuranceGroup').textContent = insuranceCategory;
            
            // Show results
            document.getElementById('initialMessage').classList.add('hidden');
            document.getElementById('resultsContent').classList.remove('hidden');
        });
    </script>
</body>
</html>