美国尾程运费计算器设计方案
根据需求，我设计了一个专业的美国尾程运费计算器，采用蓝色作为主色调以传达信任和专业感，配合现代化的UI设计和流畅的交互体验，计算器允许用户输入邮编、包裹信息并实时获取多家物流商的运费比较结果。
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">US Shipping Rate Calculator | Real-time Comparison</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<!-- Tailwind Configuration -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1e40af', // Deep blue for trust and professionalism
secondary: '#3b82f6', // Medium blue for accents
accent: '#60a5fa', // Light blue for highlights
neutral: '#f3f4f6', // Light gray for backgrounds
dark: '#1f2937', // Dark gray for text
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.input-focus {
@apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
}
.btn-hover {
@apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
}
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
.animate-slide-up {
animation: slideUp 0.5s ease-out;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="header">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-truck text-primary text-2xl"></i>
<h1 class="text-xl md:text-2xl font-bold text-primary">ShipRate <span class="text-secondary">Pro</span></h1>
</div>
<nav class="hidden md:flex items-center space-x-6">
<a href="#" class="font-medium text-primary hover:text-secondary transition-colors">Home</a>
<a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors">How It Works</a>
<a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors">Services</a>
<a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors">Contact</a>
</nav>
<div class="flex items-center space-x-3">
<button class="hidden md:block px-4 py-2 rounded-lg border border-primary text-primary font-medium hover:bg-primary/5 transition-colors">
Sign In
</button>
<button class="px-4 py-2 rounded-lg bg-primary text-white font-medium btn-hover">
Get Started
</button>
<button class="md:hidden text-gray-600 text-xl">
<i class="fa fa-bars"></i>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow container mx-auto px-4 py-8 md:py-12">
<!-- Hero Section -->
<section class="mb-12 animate-fade-in">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-dark mb-4 leading-tight">
US Shipping Rate Calculator
</h2>
<p class="text-lg text-gray-600 mb-8">
Compare real-time shipping rates from top carriers by entering your zip code and package details
</p>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<div class="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow-sm">
<i class="fa fa-check-circle text-green-500"></i>
<span>Instant Quotes</span>
</div>
<div class="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow-sm">
<i class="fa fa-check-circle text-green-500"></i>
<span>Multiple Carriers</span>
</div>
<div class="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow-sm">
<i class="fa fa-check-circle text-green-500"></i>
<span>No Signup Required</span>
</div>
</div>
</div>
</section>
<!-- Calculator Form -->
<section class="max-w-4xl mx-auto mb-12 animate-slide-up">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="bg-gradient-to-r from-primary to-secondary text-white p-6 md:p-8">
<h3 class="text-xl md:text-2xl font-bold mb-2">Shipping Information</h3>
<p class="opacity-90">Enter your details to get instant shipping quotes</p>
</div>
<form id="shippingForm" class="p-6 md:p-8 space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Origin ZIP -->
<div class="space-y-2">
<label for="originZip" class="block text-sm font-medium text-gray-700">Origin ZIP Code</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-map-marker"></i>
</span>
<input
type="text"
id="originZip"
name="originZip"
placeholder="e.g. 90210"
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus"
required
>
</div>
</div>
<!-- Destination ZIP -->
<div class="space-y-2">
<label for="destZip" class="block text-sm font-medium text-gray-700">Destination ZIP Code</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-flag"></i>
</span>
<input
type="text"
id="destZip"
name="destZip"
placeholder="e.g. 10001"
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus"
required
>
</div>
</div>
<!-- Weight -->
<div class="space-y-2">
<label for="weight" class="block text-sm font-medium text-gray-700">Package Weight (lbs)</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-balance-scale"></i>
</span>
<input
type="number"
id="weight"
name="weight"
min="0.1"
step="0.1"
placeholder="e.g. 5.5"
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus"
required
>
</div>
</div>
<!-- Package Type -->
<div class="space-y-2">
<label for="packageType" class="block text-sm font-medium text-gray-700">Package Type</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-box"></i>
</span>
<select
id="packageType"
name="packageType"
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus appearance-none bg-white"
>
<option value="small">Small Package</option>
<option value="medium">Medium Box</option>
<option value="large">Large Box</option>
<option value="envelope">Envelope</option>
<option value="irregular">Irregular Shape</option>
</select>
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 pointer-events-none">
<i class="fa fa-chevron-down"></i>
</span>
</div>
</div>
</div>
<!-- Dimensions (Conditional) -->
<div id="dimensionsGroup" class="space-y-2 animate-fade-in">
<label class="block text-sm font-medium text-gray-700">Package Dimensions (inches)</label>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-arrows-h"></i>
</span>
<input
type="number"
id="length"
name="length"
min="1"
placeholder="Length"
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus"
required
>
</div>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-arrows-v"></i>
</span>
<input
type="number"
id="width"
name="width"
min="1"
placeholder="Width"
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus"
required
>
</div>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-arrows-alt"></i>
</span>
<input
type="number"
id="height"
name="height"
min="1"
placeholder="Height"
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus"
required
>
</div>
</div>
</div>
<!-- Additional Options -->
<div class="pt-2">
<label class="block text-sm font-medium text-gray-700 mb-3">Additional Services</label>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
<label class="flex items-center space-x-2 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-neutral transition-colors">
<input type="checkbox" name="insurance" class="w-4 h-4 text-primary rounded">
<span>Insurance</span>
</label>
<label class="flex items-center space-x-2 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-neutral transition-colors">
<input type="checkbox" name="signature" class="w-4 h-4 text-primary rounded">
<span>Signature Required</span>
</label>
<label class="flex items-center space-x-2 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-neutral transition-colors">
<input type="checkbox" name="saturday" class="w-4 h-4 text-primary rounded">
<span>Saturday Delivery</span>
</label>
</div>
</div>
<!-- Submit Button -->
<div class="pt-4">
<button
type="submit"
id="calculateBtn"
class="w-full md:w-auto md:ml-auto bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg flex items-center justify-center space-x-2 btn-hover"
>
<i class="fa fa-calculator"></i>
<span>Calculate Shipping Rates</span>
</button>
</div>
</form>
</div>
</section>
<!-- Results Section (Initially Hidden) -->
<section id="resultsSection" class="hidden max-w-5xl mx-auto animate-fade-in">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="bg-gradient-to-r from-primary to-secondary text-white p-6 md:p-8">
<h3 class="text-xl md:text-2xl font-bold mb-2">Shipping Rate Comparison</h3>
<p class="opacity-90">Based on your entered information</p>
</div>
<div class="p-6 md:p-8">
<!-- Results Summary -->
<div class="mb-8 bg-neutral rounded-xl p-4 md:p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
<div class="flex items-start space-x-3">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-exchange text-primary text-xl"></i>
</div>
<div>
<h4 class="text-sm font-medium text-gray-500">Route</h4>
<p class="font-semibold" id="routeDisplay">90210 → 10001</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-box text-primary text-xl"></i>
</div>
<div>
<h4 class="text-sm font-medium text-gray-500">Package</h4>
<p class="font-semibold" id="packageDisplay">Medium Box, 5.5 lbs</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-clock-o text-primary text-xl"></i>
</div>
<div>
<h4 class="text-sm font-medium text-gray-500">Estimated Delivery</h4>
<p class="font-semibold" id="deliveryDisplay">2-5 Business Days</p>
</div>
</div>
</div>
</div>
<!-- Chart Comparison -->
<div class="mb-10">
<h4 class="text-lg font-semibold mb-4">Rate Comparison by Carrier</h4>
<div class="h-64 md:h-8
网友评论