<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MY-BusinessMOBILE Pricing Calculator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}
.gradient-bg {
background: linear-gradient(135deg, #00a0df 0%, #007cff 100%);
}
.card {
box-shadow: 0 10px 25px -5px rgba(0, 160, 223, 0.1), 0 8px 10px -6px rgba(0, 160, 223, 0.1);
transition: all 0.3s ease;
border-radius: 16px;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 160, 223, 0.2), 0 10px 10px -5px rgba(0, 160, 223, 0.2);
}
input[type="range"] {
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
background: #e2e8f0;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: #00a0df;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 0 0 2px rgba(0, 160, 223, 0.3);
}
.network-tab.active {
background-color: #00a0df;
color: white;
}
.discount-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.tariff-option:hover, .device-option:hover {
border-color: #00a0df;
}
.tariff-option.selected, .device-option.selected {
border-color: #00a0df;
background-color: rgba(0, 160, 223, 0.1);
}
.summary-item {
border-bottom: 1px dashed #e2e8f0;
}
.package-type-option input[type="radio"] {
display: none;
}
.package-type-option input[type="radio"] + label {
cursor: pointer;
padding: 0.5rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
transition: all 0.2s ease;
}
.package-type-option input[type="radio"]:checked + label {
background-color: #00a0df;
color: white;
border-color: #00a0df;
}
.greyed-out {
opacity: 0.5;
pointer-events: none;
}
.toggle-container {
position: relative;
display: inline-block;
width: 200px;
height: 40px;
border-radius: 20px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.toggle-option {
position: absolute;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.toggle-option.left {
left: 0;
}
.toggle-option.right {
right: 0;
}
.toggle-option.active {
background-color: #00a0df;
color: white;
}
.logo-text {
font-weight: 700;
letter-spacing: -0.5px;
}
.logo-text span {
color: #00a0df;
}
.header-bar {
background-color: #00a0df;
}
.footer-bar {
background-color: #1d1d1b;
}
.btn-primary {
background: linear-gradient(135deg, #00a0df 0%, #007cff 100%);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 160, 223, 0.3);
}
.feature-icon {
background-color: rgba(0, 160, 223, 0.1);
color: #00a0df;
}
.nav-link {
position: relative;
transition: all 0.3s ease;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #00a0df;
transition: width 0.3s ease;
}
.nav-link:hover:after {
width: 100%;
}
.contact-info {
display: flex;
align-items: center;
}
.contact-info svg {
margin-right: 6px;
}
.highlight-text {
color: #00a0df;
font-weight: 600;
}
.section-title {
position: relative;
display: inline-block;
margin-bottom: 1.5rem;
}
.section-title:after {
content: '';
position: absolute;
width: 60%;
height: 3px;
bottom: -8px;
left: 0;
background: linear-gradient(90deg, #00a0df 0%, rgba(0, 160, 223, 0.2) 100%);
border-radius: 2px;
}
</style>
</head>
<body class="min-h-screen">
<!-- Header Bar -->
<div class="header-bar text-white py-2 px-4">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-2 md:mb-0">
<div class="contact-info">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg>
<span class="text-sm">0113 205 8120</span>
</div>
</div>
<div class="flex items-center">
<div class="contact-info mr-4">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<span class="text-sm">support@mybusinessmobile.co.uk</span>
</div>
<div class="contact-info">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm">Mon-Fri: 9am-5:30pm</span>
</div>
</div>
</div>
</div>
<!-- Logo Bar -->
<div class="bg-white py-4 px-4 shadow-md">
<div class="max-w-6xl mx-auto flex justify-between items-center">
<div class="flex items-center">
<div class="logo-container">
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" rx="12" fill="#00a0df"/>
<path d="M10 25C10 17.268 16.268 11 24 11H40V25C40 32.732 33.732 39 26 39H10V25Z" fill="white"/>
<path d="M15 20L35 20" stroke="#00a0df" stroke-width="3" stroke-linecap="round"/>
<path d="M15 25L30 25" stroke="#00a0df" stroke-width="3" stroke-linecap="round"/>
<path d="M15 30L25 30" stroke="#00a0df" stroke-width="3" stroke-linecap="round"/>
</svg>
</div>
<div class="ml-3">
<h1 class="logo-text text-2xl md:text-3xl">MY-<span>BusinessMOBILE</span></h1>
<p class="text-xs text-gray-500">Business Mobile Solutions</p>
</div>
</div>
<div class="hidden md:flex space-x-6 text-sm font-medium">
<a href="#" class="nav-link text-gray-700 hover:text-blue-500">Home</a>
<a href="#" class="nav-link text-gray-700 hover:text-blue-500">Solutions</a>
<a href="#" class="nav-link text-gray-700 hover:text-blue-500">Pricing</a>
<a href="#" class="nav-link text-gray-700 hover:text-blue-500">Support</a>
<a href="#" class="nav-link text-gray-700 hover:text-blue-500">Contact</a>
</div>
</div>
</div>
<div class="p-4 md:p-8">
<div class="max-w-6xl mx-auto">
<header class="text-center mb-8">
<h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Business Mobile Pricing Calculator</h1>
<p class="text-gray-600">Configure your perfect mobile solution for your business</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Configuration Panel -->
<div class="lg:col-span-2">
<div class="bg-white rounded-xl p-6 card">
<!-- Package Type Selection -->
<div class="mb-8">
<h2 class="section-title text-xl font-semibold text-gray-800">1. Select Package Type</h2>
<div class="flex flex-wrap gap-4">
<div class="package-type-option">
<input type="radio" id="sim-only" name="package-type" value="sim-only" checked>
<label for="sim-only" class="flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
SIM Only
</label>
</div>
<div class="package-type-option">
<input type="radio" id="device-only" name="package-type" value="device-only">
<label for="device-only" class="flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
Device Only
</label>
</div>
<div class="package-type-option">
<input type="radio" id="total-package" name="package-type" value="total-package">
<label for="total-package" class="flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Total Package
</label>
</div>
</div>
</div>
<!-- Network Selection -->
<div id="network-section" class="mb-8">
<h2 class="section-title text-xl font-semibold text-gray-800">2. Select Network Provider</h2>
<div class="flex rounded-lg overflow-hidden border border-gray-200">
<button class="network-tab active flex-1 py-3 px-4 text-center font-medium transition-all" data-network="O2">
<span class="text-lg">O2</span>
</button>
<button class="network-tab flex-1 py-3 px-4 text-center font-medium transition-all" data-network="Vodafone">
<span class="text-lg">Vodafone</span>
</button>
</div>
</div>
<!-- Quantity Configuration -->
<div class="mb-8">
<h2 class="section-title text-xl font-semibold text-gray-800">3. Configure Quantities</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-gray-700 mb-2">Number of SIMs or Devices</label>
<div class="flex items-center">
<button id="decrease-users" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-l">
-
</button>
<input type="number" id="users" min="1" value="1" class="w-full text-center py-2 border-t border-b border-gray-300">
<button id="increase-users" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-r">
+
</button>
</div>
</div>
<div>
<label class="block text-gray-700 mb-2">Contract Length: <span id="tenure-value" class="highlight-text">24</span> months</label>
<input type="range" id="tenure" min="1" max="60" value="24" class="w-full">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>1 month</span>
<span>30 months</span>
<span>60 months</span>
</div>
</div>
</div>
<div id="device-payment-section" class="mt-6">
<label class="block text-gray-700 mb-2">Device Payment Method</label>
<div class="toggle-container">
<div class="toggle-option left active" data-payment="monthly">Monthly</div>
<div class="toggle-option right" data-payment="one-off">One-off</div>
</div>
<p class="text-xs text-gray-500 mt-1">Monthly payments include a 15% finance charge</p>
</div>
<div id="discount-notification" class="hidden mt-4 p-3 bg-green-100 border border-green-200 rounded-lg">
<div class="flex items-center">
<div class="discount-badge bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full mr-2">DISCOUNT</div>
<p class="text-green-800 text-sm">Online Discount of <span id="discount-percentage">5</span>% applied!</p>
</div>
</div>
</div>
<!-- Tariff Selection -->
<div id="tariff-section" class="mb-8">
<h2 class="section-title text-xl font-semibold text-gray-800">4. Select Tariff</h2>
<div id="tariff-options" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Tariff options will be populated here -->
</div>
</div>
<!-- Device Selection -->
<div id="device-section">
<h2 class="section-title text-xl font-semibold text-gray-800">5. Select Device</h2>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Filter by Type</label>
<select id="device-filter" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-300 outline-none">
<option value="all">All Devices</option>
<option value="Apple">Apple iPhones</option>
<option value="Samsung">Samsung Devices</option>
<option value="iPhone 14">iPhone 14 Series</option>
<option value="iPhone 15">iPhone 15 Series</option>
<option value="iPhone 16">iPhone 16 Series</option>
<option value="iPhone 16 Pro">iPhone 16 Pro Series</option>
<option value="Samsung A">Samsung A Series</option>
<option value="Samsung S">Samsung S Series</option>
<option value="Samsung Z">Samsung Z Series</option>
</select>
</div>
<div id="device-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-96 overflow-y-auto">
<!-- Device options will be populated here -->
</div>
</div>
</div>
</div>
<!-- Summary Panel -->
<div class="lg:col-span-1">
<div class="bg-white rounded-xl p-6 card sticky top-4">
<h2 class="section-title text-xl font-semibold text-gray-800">Your Package Summary</h2>
<div class="space-y-4 mb-6">
<div class="summary-item pb-3">
<p class="text-gray-600">Package Type</p>
<p id="summary-package-type" class="font-medium text-gray-800">SIM Only</p>
</div>
<div id="summary-network-item" class="summary-item pb-3">
<p class="text-gray-600">Network</p>
<p id="summary-network" class="font-medium text-gray-800">O2</p>
</div>
<div class="summary-item pb-3">
<p class="text-gray-600">Quantity</p>
<p id="summary-users" class="font-medium text-gray-800">1</p>
</div>
<div class="summary-item pb-3">
<p class="text-gray-600">Contract Length</p>
<p id="summary-tenure" class="font-medium text-gray-800">24 months</p>
</div>
<div id="summary-payment-item" class="summary-item pb-3">
<p class="text-gray-600">Device Payment</p>
<p id="summary-payment" class="font-medium text-gray-800">Monthly</p>
</div>
<div id="summary-tariff-item" class="summary-item pb-3">
<p class="text-gray-600">Selected Tariff</p>
<p id="summary-tariff" class="font-medium text-gray-800">Not selected</p>
</div>
<div id="summary-device-item" class="summary-item pb-3">
<p class="text-gray-600">Selected Device</p>
<p id="summary-device" class="font-medium text-gray-800">Not selected</p>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg mb-6">
<div id="monthly-tariff-line" class="flex justify-between mb-2">
<span class="text-gray-600">Monthly Tariff</span>
<span id="summary-tariff-cost" class="font-medium">£0.00</span>
</div>
<div id="device-total-line" class="flex justify-between mb-2">
<span class="text-gray-600">Device Cost (Total)</span>
<span id="summary-device-cost" class="font-medium">£0.00</span>
</div>
<div id="device-monthly-line" class="flex justify-between mb-2">
<span class="text-gray-600">Device Cost (Monthly)</span>
<span id="summary-device-monthly" class="font-medium">£0.00</span>
</div>
<div id="finance-charge-line" class="flex justify-between mb-2 text-gray-500 text-sm hidden">
<span>Finance Charge (15%)</span>
<span id="summary-finance-charge">£0.00</span>
</div>
<div id="discount-line" class="flex justify-between mb-2 text-green-600 hidden">
<span>Online Discount</span>
<span id="summary-discount">-£0.00</span>
</div>
</div>
<div class="gradient-bg text-white p-4 rounded-lg">
<div class="flex justify-between items-center">
<span id="total-label" class="text-lg">Total Monthly</span>
<span id="summary-total" class="text-2xl font-bold">£0.00</span>
</div>
<div class="text-xs opacity-80 mt-1">All prices exclude VAT</div>
</div>
<button id="get-quote" class="w-full mt-6 btn-primary text-white font-medium py-3 px-4 rounded-lg transition-colors">
Get Detailed Quote
</button>
<div class="mt-4 text-center">
<p class="text-sm text-gray-500">Need help? Call our team</p>
<p class="text-lg font-semibold text-blue-500">0113 205 8120</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="bg-white py-12 mt-12">
<div class="max-w-6xl mx-auto px-4">
<h2 class="text-2xl md:text-3xl font-bold text-center mb-12">Why Choose MY-BusinessMOBILE?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="feature-icon w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Competitive Pricing</h3>
<p class="text-gray-600">Get the best value for your business with our competitive tariffs and device options.</p>
</div>
<div class="text-center">
<div class="feature-icon w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Tailored Solutions</h3>
<p class="text-gray-600">Customized packages designed specifically for your business requirements.</p>
</div>
<div class="text-center">
<div class="feature-icon w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Dedicated Support</h3>
<p class="text-gray-600">Our expert team is always ready to assist you with any queries or issues.</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-12">
<div class="bg-gray-100 py-8">
<div class="max-w-6xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="font-semibold text-gray-800 mb-3">About Us</h3>
<p class="text-sm text-gray-600">MY-BusinessMOBILE provides tailored mobile solutions for businesses of all sizes. We offer competitive pricing and exceptional customer service.</p>
</div>
<div>
<h3 class="font-semibold text-gray-800 mb-3">Quick Links</h3>
<ul class="text-sm text-gray-600 space-y-2">
<li><a href="#" class="hover:text-blue-500">Business Solutions</a></li>
<li><a href="#" class="hover:text-blue-500">Network Coverage</a></li>
<li><a href="#" class="hover:text-blue-500">Device Catalog</a></li>
<li><a href="#" class="hover:text-blue-500">Support Center</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold text-gray-800 mb-3">Contact</h3>
<ul class="text-sm text-gray-600 space-y-2">
<li>JDNetworks Ltd T/A MY-BusinessMOBILE</li>
<li>10A Town Street, Leeds, LS28 5LD</li>
<li>0113 205 8120</li>
<li>support@mybusinessmobile.co.uk</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-gray-800 mb-3">Newsletter</h3>
<p class="text-sm text-gray-600 mb-2">Subscribe for the latest offers and updates</p>
<div class="flex">
<input type="email" placeholder="Your email" class="text-sm p-2 border border-gray-300 rounded-l-lg w-full">
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 rounded-r-lg text-sm transition-colors">Subscribe</button>
</div>
</div>
</div>
</div>
<div class="footer-bar text-white py-4">
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
<div class="text-sm mb-2 md:mb-0">© 2023 MY-BusinessMOBILE. All rights reserved.</div>
<div class="flex space-x-4 text-sm">
<a href="#" class="hover:underline">Privacy Policy</a>
<a href="#" class="hover:underline">Terms of Service</a>
<a href="#" class="hover:underline">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script>
// Data
const tariffs = {
O2: [
{ ref: "O2", service: "O2 Single", description: "All In One 5GB V24Q2", rrp: 15.00, code: "AIO5GB" },
{ ref: "O2", service: "O2 Single", description: "All In One 25GB V24Q2", rrp: 18.00, code: "AIO25GB" },
{ ref: "O2", service: "O2 Single", description: "All In One 50GB V24Q2", rrp: 20.00, code: "AIO50GB" },
{ ref: "O2", service: "O2 Single", description: "All In One Unlimited V24Q2", rrp: 25.00, code: "AIOUTD" }
],
Vodafone: [
{ ref: "Vodafone", service: "VF Single", description: "VodaShare 5GB V24Q2", rrp: 18.50, code: "VSJV5G" },
{ ref: "Vodafone", service: "VF Single", description: "VodaShare 10GB V24Q2", rrp: 22.50, code: "VSJV10G" },
{ ref: "Vodafone", service: "VF Single", description: "VodaShare 20GB V24Q2", rrp: 32.50, code: "VSJV20G" },
{ ref: "Vodafone", service: "VF Single", description: "VodaShare Unlimited Promo", rrp: 35.00, code: "VSJVUNLNP" }
]
};
const devices = [
// Apple iPhones
{ ref: "Apple", service: "iPhone 14", description: "APPLE IPHONE 14 128GB MIDNIGHT MPUF3ZD/A", rrp: 407.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 14", description: "APPLE IPHONE 14 128GB PURPLE MPV03ZD/A", rrp: 407.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 14", description: "APPLE IPHONE 14 128GB STARLIGHT MPUR3ZD/A", rrp: 407.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 14", description: "APPLE IPHONE 14 PLUS 128GB RED REFURB", rrp: 495.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 15", description: "APPLE IPHONE 15 128GB BLACK MTP03ZD/A", rrp: 487.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 15", description: "APPLE IPHONE 15 128GB BLUE MTP43ZD/A", rrp: 487.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 15", description: "APPLE IPHONE 15 128GB GREEN MTP53ZD/A", rrp: 487.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 15", description: "APPLE IPHONE 15 128GB PINK MTP13ZD/A", rrp: 487.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 15", description: "APPLE IPHONE 15 256GB BLUE MTP93ZD/A", rrp: 566.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 15", description: "APPLE IPHONE 15 PRO MAX 256GB BLUE TITANIUM MU7A3ZD/A", rrp: 900.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 128GB BLACK MYE73QN/A", rrp: 560.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 128GB PINK MYEA3QN/A", rrp: 560.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 128GB TEAL MYED3QN/A", rrp: 560.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 256GB PINK MYEG3QN/A", rrp: 645.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 256GB TEAL MYEJ3QN/A", rrp: 645.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 256GB ULTRAMARINE MYEH3QN/A", rrp: 645.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 256GB WHITE MYEF3QN/A", rrp: 645.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 512GB TEAL MYEU3QN/A", rrp: 801.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 512GB ULTRAMARINE MYER3QN/A", rrp: 801.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 PLUS 128GB BLACK MXVU3QN/A", rrp: 645.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 PLUS 128GB PINK MXVW3QN/A", rrp: 645.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 PLUS 128GB TEAL MXVY3QN/A", rrp: 645.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 PLUS 128GB ULTRAMARINE MXVX3QN/A", rrp: 645.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 PLUS 256GB PINK MXY13QN/A", rrp: 723.55, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 PLUS 256GB TEAL MXY53QN/A", rrp: 723.55, code: "APPL" },
{ ref: "Apple", service: "iPhone 16", description: "APPLE IPHONE 16 PLUS 256GB ULTRAMARINE MXY23QN/A", rrp: 723.55, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 128GB BLACK MYND3QN/A", rrp: 722.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 128GB DESERT MYNF3QN/A", rrp: 722.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 128GB NATURAL MYNG3QN/A", rrp: 722.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 128GB WHITE MYNE3QN/A", rrp: 722.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 1TB NATURAL MYNX3QN/A", rrp: 1119.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 1TB WHITE MYNT3QN/A", rrp: 1119.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 256GB BLACK MYNH3QN/A", rrp: 805.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 256GB DESERT MYNK3QN/A", rrp: 805.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 256GB NATURAL MYNL3QN/A", rrp: 805.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 256GB WHITE MYNJ3QN/A", rrp: 805.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 512GB BLACK MYNM3QN/A", rrp: 962.55, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO 512GB WHITE MYNN3QN/A", rrp: 962.55, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO MAX 1TB BLACK MYX43QN/A", rrp: 1197.55, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO MAX 1TB WHITE MYX53QN/A", rrp: 1197.55, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO MAX 256GB BLACK MYWV3QN/A", rrp: 884.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO MAX 256GB WHITE MYWW3QN/A", rrp: 884.22, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO MAX 512GB BLACK MYX03QN/A", rrp: 1040.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO MAX 512GB DESERT MYX23QN/A", rrp: 1040.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO MAX 512GB NATURAL MYX33QN/A", rrp: 1040.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16 Pro", description: "APPLE IPHONE 16 PRO MAX 512GB WHITE MYX13QN/A", rrp: 1040.88, code: "APPL" },
{ ref: "Apple", service: "iPhone 16E", description: "APPLE IPHONE 16E 128GB BLACK MD1Q4QN/A", rrp: 485.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16E", description: "APPLE IPHONE 16E 128GB WHITE MD1R4QN/A", rrp: 485.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16E", description: "APPLE IPHONE 16E 256GB BLACK MD1T4QN/A", rrp: 568.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16E", description: "APPLE IPHONE 16E 256GB WHITE MD1W4QN/A", rrp: 568.00, code: "APPL" },
{ ref: "Apple", service: "iPhone 16E", description: "APPLE IPHONE 16E 512GB BLACK MD1X4QN/A", rrp: 725.00, code: "APPL" },
{ ref: "Apple", service: "iPhone SE", description: "APPLE IPHONE SE3 64GB MIDNIGHT MMXF3B/A", rrp: 330.00, code: "APPL" },
// Samsung Devices
{ ref: "Samsung", service: "Samsung A", description: "Samsung A05s 64GB", rrp: 119.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A14 64GB Black", rrp: 134.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A14 128GB", rrp: 139.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A14 5G 64GB", rrp: 147.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A15 4G 128GB", rrp: 150.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A15 5G 128GB", rrp: 164.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A16 4G 128GB", rrp: 144.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A16 5G 128Gb", rrp: 160.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A23 5G 64GB", rrp: 179.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A25 5G 128GB", rrp: 189.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A26 128GB", rrp: 204.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A26 256Gb", rrp: 234.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A34 5G 128GB", rrp: 204.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A35 5G 128GB", rrp: 224.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A35 5G 256GB", rrp: 259.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A36 128Gb", rrp: 219.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A36 256Gb", rrp: 249.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A55 5G 128GB", rrp: 284.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A55 5G 256GB", rrp: 324.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A56 128GB", rrp: 284.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung A", description: "Samsung A56 256GB", rrp: 314.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung X", description: "Samsung XCover 7 5G 128GB", rrp: 234.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung X", description: "Samsung XCover 6 Pro 5G 128GB", rrp: 314.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S24 FE 5G 128GB", rrp: 404.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S24 FE 256GB", rrp: 474.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S24 5G 128GB", rrp: 424.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S24 5G 256GB", rrp: 464.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S24+ 5G 256GB", rrp: 574.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S24+ 5G 512GB", rrp: 624.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S24 Ultra 5G 256GB", rrp: 704.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S24 Ultra 5G 512GB", rrp: 794.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S25 128GB", rrp: 504.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S25 256GB", rrp: 554.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S25+ 256GB", rrp: 634.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S25+ 512GB", rrp: 674.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S25 Ultra 256GB", rrp: 854.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S25 Ultra 512GB", rrp: 904.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung S", description: "Samsung S25 Ultra 1TB", rrp: 1084.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung Z", description: "Samsung Z Flip 6 5G 256GB", rrp: 634.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung Z", description: "Samsung Z Flip 6 5G 512GB", rrp: 684.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung Z", description: "Samsung Z Fold 6 5G 256GB", rrp: 994.00, code: "SAMS" },
{ ref: "Samsung", service: "Samsung Z", description: "Samsung Z Fold 6 5G 512Gb", rrp: 1084.00, code: "SAMS" }
];
// State
let state = {
packageType: "sim-only",
network: "O2",
users: 1,
tenure: 24,
paymentMethod: "monthly",
selectedTariff: null,
selectedDevice: null,
discount: 0
};
// DOM Elements
const packageTypeOptions = document.querySelectorAll('input[name="package-type"]');
const networkSection = document.getElementById('network-section');
const tariffSection = document.getElementById('tariff-section');
const deviceSection = document.getElementById('device-section');
const devicePaymentSection = document.getElementById('device-payment-section');
const networkTabs = document.querySelectorAll('.network-tab');
const usersInput = document.getElementById('users');
const decreaseUsersBtn = document.getElementById('decrease-users');
const increaseUsersBtn = document.getElementById('increase-users');
const tenureSlider = document.getElementById('tenure');
const tenureValue = document.getElementById('tenure-value');
const paymentOptions = document.querySelectorAll('.toggle-option');
const tariffOptions = document.getElementById('tariff-options');
const deviceOptions = document.getElementById('device-options');
const deviceFilter = document.getElementById('device-filter');
const discountNotification = document.getElementById('discount-notification');
const discountPercentage = document.getElementById('discount-percentage');
const summaryPackageType = document.getElementById('summary-package-type');
const summaryNetworkItem = document.getElementById('summary-network-item');
const summaryNetwork = document.getElementById('summary-network');
const summaryUsers = document.getElementById('summary-users');
const summaryTenure = document.getElementById('summary-tenure');
const summaryPaymentItem = document.getElementById('summary-payment-item');
const summaryPayment = document.getElementById('summary-payment');
const summaryTariffItem = document.getElementById('summary-tariff-item');
const summaryTariff = document.getElementById('summary-tariff');
const summaryDeviceItem = document.getElementById('summary-device-item');
const summaryDevice = document.getElementById('summary-device');
const monthlyTariffLine = document.getElementById('monthly-tariff-line');
const summaryTariffCost = document.getElementById('summary-tariff-cost');
const deviceTotalLine = document.getElementById('device-total-line');
const summaryDeviceCost = document.getElementById('summary-device-cost');
const deviceMonthlyLine = document.getElementById('device-monthly-line');
const summaryDeviceMonthly = document.getElementById('summary-device-monthly');
const financeChargeLine = document.getElementById('finance-charge-line');
const summaryFinanceCharge = document.getElementById('summary-finance-charge');
const discountLine = document.getElementById('discount-line');
const summaryDiscount = document.getElementById('summary-discount');
const totalLabel = document.getElementById('total-label');
const summaryTotal = document.getElementById('summary-total');
const getQuoteBtn = document.getElementById('get-quote');
// Functions
function formatPrice(price) {
return `£${price.toFixed(2)}`;
}
function updatePackageTypeVisibility() {
// Update UI based on package type
switch(state.packageType) {
case "sim-only":
networkSection.classList.remove('hidden');
tariffSection.classList.remove('hidden');
deviceSection.classList.add('hidden');
devicePaymentSection.classList.add('hidden');
summaryNetworkItem.classList.remove('hidden');
summaryTariffItem.classList.remove('hidden');
summaryDeviceItem.classList.add('hidden');
summaryPaymentItem.classList.add('hidden');
monthlyTariffLine.classList.remove('hidden');
deviceTotalLine.classList.add('hidden');
deviceMonthlyLine.classList.add('hidden');
financeChargeLine.classList.add('hidden');
summaryPackageType.textContent = "SIM Only";
break;
case "device-only":
networkSection.classList.add('hidden');
tariffSection.classList.add('hidden');
deviceSection.classList.remove('hidden');
devicePaymentSection.classList.remove('hidden');
summaryNetworkItem.classList.add('hidden');
summaryTariffItem.classList.add('hidden');
summaryDeviceItem.classList.remove('hidden');
summaryPaymentItem.classList.remove('hidden');
monthlyTariffLine.classList.add('hidden');
deviceTotalLine.classList.remove('hidden');
if (state.paymentMethod === "monthly") {
deviceMonthlyLine.classList.remove('hidden');
financeChargeLine.classList.remove('hidden');
} else {
deviceMonthlyLine.classList.add('hidden');
financeChargeLine.classList.add('hidden');
}
summaryPackageType.textContent = "Device Only";
break;
case "total-package":
networkSection.classList.remove('hidden');
tariffSection.classList.remove('hidden');
deviceSection.classList.remove('hidden');
devicePaymentSection.classList.remove('hidden');
summaryNetworkItem.classList.remove('hidden');
summaryTariffItem.classList.remove('hidden');
summaryDeviceItem.classList.remove('hidden');
summaryPaymentItem.classList.remove('hidden');
monthlyTariffLine.classList.remove('hidden');
deviceTotalLine.classList.remove('hidden');
if (state.paymentMethod === "monthly") {
deviceMonthlyLine.classList.remove('hidden');
financeChargeLine.classList.remove('hidden');
deviceTotalLine.classList.add('greyed-out');
} else {
deviceMonthlyLine.classList.add('hidden');
financeChargeLine.classList.add('hidden');
deviceTotalLine.classList.remove('greyed-out');
}
summaryPackageType.textContent = "Total Package";
break;
}
// Reset selections based on package type
if (state.packageType === "sim-only") {
state.selectedDevice = null;
} else if (state.packageType === "device-only") {
state.selectedTariff = null;
state.network = null;
}
updateSummary();
}
function calculateDiscount() {
// Apply discount if users > 5 and tenure > 24
if (state.users > 5 && state.tenure > 24) {
// Calculate discount percentage (5-10% based on users and tenure)
const baseDiscount = 5;
const extraDiscount = Math.min(5, Math.floor((state.users - 5) / 5) + Math.floor((state.tenure - 24) / 12));
state.discount = baseDiscount + extraDiscount;
state.discount = Math.min(10, state.discount); // Cap at 10%
discountPercentage.textContent = state.discount;
discountNotification.classList.remove('hidden');
discountLine.classList.remove('hidden');
} else {
state.discount = 0;
discountNotification.classList.add('hidden');
discountLine.classList.add('hidden');
}
}
function updateSummary() {
summaryUsers.textContent = state.users;
summaryTenure.textContent = `${state.tenure} months`;
if (state.packageType !== "sim-only") {
summaryPayment.textContent = state.paymentMethod === "monthly" ? "Monthly" : "One-off";
}
if (state.network) {
summaryNetwork.textContent = state.network;
}
let tariffCost = 0;
let deviceCost = 0;
let deviceMonthlyCost = 0;
let financeCharge = 0;
let discountAmount = 0;
let total = 0;
// Update tariff info if applicable
if (state.packageType !== "device-only" && state.selectedTariff) {
summaryTariff.textContent = state.selectedTariff.description;
tariffCost = state.selectedTariff.rrp * state.users;
summaryTariffCost.textContent = formatPrice(tariffCost);
} else if (state.packageType !== "device-only") {
summaryTariff.textContent = "Not selected";
summaryTariffCost.textContent = "£0.00";
}
// Update device info if applicable
if (state.packageType !== "sim-only" && state.selectedDevice) {
summaryDevice.textContent = state.selectedDevice.description;
deviceCost = state.selectedDevice.rrp * state.users;
if (state.paymentMethod === "monthly") {
// Apply 15% finance charge for monthly payments
financeCharge = deviceCost * 0.15;
const totalWithFinance = deviceCost + financeCharge;
deviceMonthlyCost = totalWithFinance / state.tenure;
summaryDeviceCost.textContent = formatPrice(deviceCost);
summaryFinanceCharge.textContent = formatPrice(financeCharge);
summaryDeviceMonthly.textContent = formatPrice(deviceMonthlyCost);
financeChargeLine.classList.remove('hidden');
} else {
// One-off payment, no finance charge
deviceMonthlyCost = 0;
financeCharge = 0;
summaryDeviceCost.textContent = formatPrice(deviceCost);
summaryDeviceMonthly.textContent = "£0.00";
financeChargeLine.classList.add('hidden');
}
} else if (state.packageType !== "sim-only") {
summaryDevice.textContent = "Not selected";
summaryDeviceCost.textContent = "£0.00";
summaryDeviceMonthly.textContent = "£0.00";
financeChargeLine.classList.add('hidden');
}
// Calculate total based on package type and payment method
switch(state.packageType) {
case "sim-only":
total = tariffCost;
totalLabel.textContent = "Total Monthly";
break;
case "device-only":
if (state.paymentMethod === "monthly") {
total = deviceMonthlyCost;
totalLabel.textContent = "Total Monthly";
} else {
total = deviceCost;
totalLabel.textContent = "Total One-off";
}
break;
case "total-package":
if (state.paymentMethod === "monthly") {
total = tariffCost + deviceMonthlyCost;
totalLabel.textContent = "Total Monthly";
} else {
// For one-off device payment, tariff is still monthly
total = tariffCost;
totalLabel.textContent = "Total Monthly";
// Note: Device cost is shown separately as a one-off payment
}
break;
}
// Apply discount if applicable
if (state.discount > 0) {
discountAmount = (total * state.discount) / 100;
summaryDiscount.textContent = `-${formatPrice(discountAmount)}`;
total -= discountAmount;
}
summaryTotal.textContent = formatPrice(total);
}
function renderTariffOptions() {
tariffOptions.innerHTML = '';
if (!state.network) return;
tariffs[state.network].forEach(tariff => {
const isSelected = state.selectedTariff && state.selectedTariff.code === tariff.code;
const tariffElement = document.createElement('div');
tariffElement.className = `tariff-option border rounded-lg p-4 cursor-pointer transition-all hover:shadow-md ${isSelected ? 'selected' : ''}`;
tariffElement.innerHTML = `
<div class="flex justify-between items-start mb-2">
<h3 class="font-medium">${tariff.description}</h3>
<span class="text-lg font-bold text-blue-500">${formatPrice(tariff.rrp)}</span>
</div>
<p class="text-sm text-gray-600">${tariff.service}</p>
<div class="mt-3 text-xs text-gray-500">Code: ${tariff.code}</div>
`;
tariffElement.addEventListener('click', () => {
document.querySelectorAll('.tariff-option').forEach(el => el.classList.remove('selected'));
tariffElement.classList.add('selected');
state.selectedTariff = tariff;
updateSummary();
});
tariffOptions.appendChild(tariffElement);
});
}
function renderDeviceOptions(filter = 'all') {
deviceOptions.innerHTML = '';
let filteredDevices = devices;
if (filter !== 'all') {
filteredDevices = devices.filter(device => {
if (filter === 'Apple' || filter === 'Samsung') {
return device.ref === filter;
} else {
return device.service === filter;
}
});
}
filteredDevices.forEach(device => {
const isSelected = state.selectedDevice && state.selectedDevice.description === device.description;
const deviceElement = document.createElement('div');
deviceElement.className = `device-option border rounded-lg p-4 cursor-pointer transition-all hover:shadow-md ${isSelected ? 'selected' : ''}`;
deviceElement.innerHTML = `
<div class="flex justify-between items-start mb-2">
<h3 class="font-medium">${device.description}</h3>
<span class="text-lg font-bold text-blue-500">${formatPrice(device.rrp)}</span>
</div>
<p class="text-sm text-gray-600">${device.service}</p>
<div class="mt-3 text-xs text-gray-500">Type: ${device.ref}</div>
`;
deviceElement.addEventListener('click', () => {
document.querySelectorAll('.device-option').forEach(el => el.classList.remove('selected'));
deviceElement.classList.add('selected');
state.selectedDevice = device;
updateSummary();
});
deviceOptions.appendChild(deviceElement);
});
}
// Event Listeners
packageTypeOptions.forEach(option => {
option.addEventListener('change', () => {
if (option.checked) {
state.packageType = option.value;
updatePackageTypeVisibility();
}
});
});
networkTabs.forEach(tab => {
tab.addEventListener('click', () => {
networkTabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
state.network = tab.dataset.network;
renderTariffOptions();
updateSummary();
});
});
decreaseUsersBtn.addEventListener('click', () => {
if (state.users > 1) {
state.users--;
usersInput.value = state.users;
calculateDiscount();
updateSummary();
}
});
increaseUsersBtn.addEventListener('click', () => {
state.users++;
usersInput.value = state.users;
calculateDiscount();
updateSummary();
});
usersInput.addEventListener('change', () => {
state.users = parseInt(usersInput.value) || 1;
if (state.users < 1) {
state.users = 1;
usersInput.value = 1;
}
calculateDiscount();
updateSummary();
});
tenureSlider.addEventListener('input', () => {
state.tenure = parseInt(tenureSlider.value);
tenureValue.textContent = state.tenure;
calculateDiscount();
updateSummary();
});
paymentOptions.forEach(option => {
option.addEventListener('click', () => {
paymentOptions.forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
state.paymentMethod = option.dataset.payment;
updatePackageTypeVisibility();
});
});
deviceFilter.addEventListener('change', () => {
renderDeviceOptions(deviceFilter.value);
});
getQuoteBtn.addEventListener('click', () => {
let missingItems = [];
if (state.packageType === "sim-only" || state.packageType === "total-package") {
if (!state.selectedTariff) missingItems.push("tariff");
}
if (state.packageType === "device-only" || state.packageType === "total-package") {
if (!state.selectedDevice) missingItems.push("device");
}
if (missingItems.length > 0) {
alert(`Please select a ${missingItems.join(" and ")} to get a detailed quote.`);
return;
}
alert('Your quote has been generated! A sales representative will contact you shortly with more details.');
});
// Initialize
updatePackageTypeVisibility();
renderTariffOptions();
renderDeviceOptions();
updateSummary();
</script>
</body>
</html>
