<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hook'D on Fish – Luxury Service Builder</title>
<style>
body{
font-family:Arial, sans-serif;
background:#000;
color:#fff;
margin:0;
}
.container{max-width:1200px;margin:auto;padding:30px;}
h1,h2,h3{color:#d4af37;}
.card{
background:#111;
border:1px solid #8b0000;
border-radius:12px;
padding:25px;
margin-bottom:25px;
box-shadow:0 0 20px rgba(212,175,55,0.15);
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
}
.plan{
border:2px solid #8b0000;
border-radius:10px;
padding:18px;
cursor:pointer;
transition:0.3s;
background:#0a0a0a;
}
.plan:hover{border-color:#d4af37;}
.plan.active{
border-color:#d4af37;
background:#1a1a1a;
}
.plan ul{
padding-left:18px;
font-size:0.9em;
line-height:1.4em;
}
.plan.coming{
pointer-events:none;
opacity:0.85;
}
.plan.coming h3 { opacity: 0.85; }
.plan.coming p { opacity: 0.5; }
.marine-art{
background:linear-gradient(135deg,#001f3f,#004466);
border:2px solid #00bfff;
}
.amano-art{
background:linear-gradient(135deg,#0f2a0f,#1f3f1f);
border:2px solid #3cb371;
}
/* ADDONS */
.addon-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #222;
}
.addon-left{
display:flex;
align-items:center;
gap:12px;
}
.addon-row input[type="checkbox"]{
width:18px;
height:18px;
}
/* PRO CARE */
.procare-box{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px;
border:2px solid #d4af37;
border-radius:10px;
background:#1a1a1a;
}
.procare-left{
display:flex;
align-items:center;
gap:15px;
}
.procare-box input[type="checkbox"]{
width:28px;
height:28px;
}
.procare-title{
font-weight:bold;
font-size:1.2em;
color:#d4af37;
}
.total{
font-size:2em;
font-weight:bold;
color:#d4af37;
}
button{
background:#8b0000;
color:#fff;
border:none;
padding:12px 18px;
border-radius:6px;
cursor:pointer;
}
button:hover{
background:#d4af37;
color:#000;
}
input, textarea{
padding:8px;
width:100%;
margin-bottom:10px;
background:#000;
color:#fff;
border:1px solid #8b0000;
}
.contact{
text-align:center;
margin-top:40px;
font-size:1.1em;
}
.small-note{
font-size:0.85em;
opacity:0.8;
}
</style>
</head>
<body>
<div class="container">
<h1>Hook'D on Fish – Luxury Aquarium Service Packages</h1>
<div class="card">
<h2>Select Your Service Plan</h2>
<div class="grid" id="plans"></div>
</div>
<div class="card">
<h2>Add-ons</h2>
<div id="addons"></div>
</div>
<div class="card">
<h2>Upgrade Options</h2>
<div id="procareSection"></div>
<p class="small-note">
MTS Therapy Pack is already weekly. Large systems may require custom pricing (T&C Apply).
</p>
</div>
<div class="card">
<h2>Total Investment</h2>
<div class="total" id="total">$0.00</div>
</div>
<div class="card">
<h2>Submit Service Request</h2>
<form id="serviceForm" action="mailto:hookdonfish@outlook.com" method="POST" enctype="text/plain">
<input type="text" name="Client Name" placeholder="Full Name" required>
<input type="email" name="Email" placeholder="Email Address" required>
<input type="text" name="Phone" placeholder="Phone Number">
<textarea name="Selected Package Details" id="summary" hidden></textarea>
<button type="submit">Submit for Processing</button>
</form>
</div>
<div class="contact">
📞 Contact: 0417 443 546
</div>
</div>
<script>
const plansData=[
{
id:'basic',
name:'Base Beginner',
price:95,
details:[
'Tank Size: Up to 255L (~3×2×1.5 ft)',
'Service Frequency: 1× Monthly + substrate clean',
'Dry Goods Discount: 0%',
'Livestock Discount: 0%',
'Medication Discount: 5%',
'Bonus Points: 0'
]
},
{
id:'clean',
name:'Clean & Keen',
price:155,
details:[
'Tank Size: Up to 566L (~5×2×2 ft)',
'Service Frequency: 1× Monthly + substrate clean',
'Dry Goods Discount: 5%',
'Livestock Discount: 5%',
'Medication Discount: 10%',
'Bonus Points: 500'
]
},
{
id:'premium',
name:'Premium Keeper',
price:300,
details:[
'Tank Size: Up to 680L (~6×2×2 ft)',
'Service Frequency: 1× Bi-Monthly + 1 substrate clean',
'Dry Goods Discount: 10%',
'Livestock Discount: 10%',
'Medication Discount: 15%',
'Bonus Points: 1000'
]
},
{
id:'ocean',
name:'Ocean Master',
price:420,
details:[
'Tank Size: Up to 906L (~8×2×2 ft)',
'Service Frequency: 1× Bi-Monthly + 1 substrate clean',
'Dry Goods Discount: 15%',
'Livestock Discount: 15%',
'Medication Discount: 20%',
'Bonus Points: 2000'
]
},
{
id:'mts',
name:'M.T.S Therapy Pack',
price:550,
details:[
'Tank Size: Unlimited / Custom',
'Service Frequency: Weekly + Full Care',
'Dry Goods Discount: 20%',
'Livestock Discount: 20%',
'Medication Discount: 25%',
'Bonus Points: 3000'
],
displayPrice:"Starting From $550"
},
{
id:'marine',
name:'Marine Cuisine – Coming Soon 🐠🌊',
coming:true,
class:'marine-art'
},
{
id:'amano',
name:'Amano-Inspired Plant Care – Coming Soon 🌿',
coming:true,
class:'amano-art'
}
];
const addonsData=[
{ id:'water', name:'Additional Water Change', price:65 },
{ id:'deep', name:'Additional Deep Substrate Clean', price:65 },
{ id:'emergency', name:'Emergency Call-Out Fund (T&C Apply)', price:45 },
{ id:'video', name:'Aquarium Video Monitoring', price:60 },
{ id:'failsafe', name:'Fail-Safe Equipment Hire Cover', price:20 },
{ id:'moving', name:'Aquarium Tank Moving Service Cover', price:45 }
];
const weeklyRules={basic:4,clean:4,premium:2,ocean:2,mts:1};
let selectedPlan=null;
let selectedAddons=new Set();
let proCareEnabled=false;
function renderPlans(){
const container=document.getElementById('plans');
plansData.forEach(plan=>{
const div=document.createElement('div');
div.className='plan';
if(plan.coming){
div.classList.add('coming');
if(plan.class) div.classList.add(plan.class);
}
let html=`<h3>${plan.name}</h3>`;
if(!plan.coming){
html+=`<p><strong>${plan.displayPrice || `$${plan.price}`} / month</strong></p>
<ul>${plan.details.map(d=>`<li>${d}</li>`).join('')}</ul>`;
}
div.innerHTML=html;
if(!plan.coming){
div.addEventListener('click',()=>{
document.querySelectorAll('.plan').forEach(p=>p.classList.remove('active'));
div.classList.add('active');
selectedPlan=plan;
renderProCare();
updateTotal();
});
}
container.appendChild(div);
});
}
function renderAddons(){
const container=document.getElementById('addons');
addonsData.forEach(addon=>{
const row=document.createElement('div');
row.className='addon-row';
row.innerHTML=`
<div class="addon-left">
<input type="checkbox" data-id="${addon.id}">
<span>${addon.name}</span>
</div>
<span>$${addon.price}/month</span>
`;
row.querySelector('input').addEventListener('change',e=>{
if(e.target.checked) selectedAddons.add(addon.id);
else selectedAddons.delete(addon.id);
updateTotal();
});
container.appendChild(row);
});
}
function renderProCare(){
const container=document.getElementById('procareSection');
container.innerHTML='';
proCareEnabled=false;
if(!selectedPlan) return;
if(selectedPlan.id==='mts'){
container.innerHTML='<strong>Weekly PRO-CARE Included</strong>';
proCareEnabled=true;
return;
}
container.innerHTML=`
<div class="procare-box">
<div class="procare-left">
<input type="checkbox" id="procareToggle">
<div>
<div class="procare-title">Weekly PRO-CARE Upgrade Package</div>
<div>Enhanced weekly servicing for maximum stability & priority care</div>
</div>
</div>
</div>
`;
document.getElementById('procareToggle').addEventListener('change',e=>{
proCareEnabled=e.target.checked;
updateTotal();
});
}
function updateTotal(){
let total=0;
if(selectedPlan){
let base=selectedPlan.price;
if(proCareEnabled) base*=weeklyRules[selectedPlan.id];
total+=base;
}
selectedAddons.forEach(id=>{
const addon=addonsData.find(a=>a.id===id);
if(addon) total+=addon.price;
});
document.getElementById('total').textContent=`$${total.toFixed(2)}`;
document.getElementById('summary').value=
`Plan: ${selectedPlan?selectedPlan.name:'None'}
Weekly PRO-CARE: ${proCareEnabled?'Yes':'No'}
Add-ons: ${[...selectedAddons].join(', ')||'None'}
Total: $${total.toFixed(2)}`;
}
// Form validation
document.getElementById('serviceForm').addEventListener('submit', e=>{
if(!selectedPlan){
e.preventDefault();
alert('Please select a service plan before submitting.');
}
});
renderPlans();
renderAddons();
</script>
</body>
</html>
Cart