<!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>