Fuel calculator, packing checklist and trip planner for caravan travellers.
// ==UserScript==
// @name Caravan Toolkit
// @namespace https://greasyfork.org/
// @version 1.0
// @description Fuel calculator, packing checklist and trip planner for caravan travellers.
// @author Ethan Cole
// @match *://*/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
if (document.getElementById('caravan-toolkit')) return;
const style = document.createElement('style');
style.textContent = `
#caravan-toolkit{
position:fixed;
right:20px;
bottom:20px;
width:340px;
background:#fff;
border-radius:12px;
box-shadow:0 0 20px rgba(0,0,0,.25);
font-family:Arial,sans-serif;
z-index:999999;
overflow:hidden;
}
#ct-header{
background:#2c3e50;
color:#fff;
padding:12px;
cursor:pointer;
font-weight:bold;
}
#ct-body{
padding:15px;
display:none;
}
#ct-body input{
width:100%;
margin-bottom:10px;
padding:8px;
box-sizing:border-box;
}
#ct-body button{
width:100%;
padding:10px;
background:#27ae60;
border:none;
color:#fff;
cursor:pointer;
margin-top:5px;
}
#ct-result{
margin-top:10px;
font-weight:bold;
}
.check{
display:block;
margin:5px 0;
}
`;
document.head.appendChild(style);
const box=document.createElement("div");
box.id="caravan-toolkit";
box.innerHTML=`
<div id="ct-header">🚐 Caravan Toolkit</div>
<div id="ct-body">
<h3>Fuel Calculator</h3>
<input id="distance" type="number" placeholder="Distance (km)">
<input id="consumption" type="number" placeholder="Fuel (L/100km)">
<input id="price" type="number" step="0.01" placeholder="Fuel Price">
<button id="calcFuel">Calculate</button>
<div id="ct-result"></div>
<hr>
<h3>Packing Checklist</h3>
<label class="check"><input type="checkbox" data-item="Water Hose"> Water Hose</label>
<label class="check"><input type="checkbox" data-item="Power Cable"> Power Cable</label>
<label class="check"><input type="checkbox" data-item="First Aid Kit"> First Aid Kit</label>
<label class="check"><input type="checkbox" data-item="Kitchen Items"> Kitchen Items</label>
<label class="check"><input type="checkbox" data-item="Camping Chairs"> Camping Chairs</label>
<label class="check"><input type="checkbox" data-item="Bedding"> Bedding</label>
<label class="check"><input type="checkbox" data-item="BBQ"> BBQ</label>
<hr>
<h3>Trip Notes</h3>
<textarea id="tripNotes" style="width:100%;height:90px;"></textarea>
<button id="saveNotes">Save Notes</button>
<p style="font-size:12px;color:#777;margin-top:15px;">
Need more caravan travel tips? Visit Caravan Hire SA for practical guides.
</p>
</div>
`;
document.body.appendChild(box);
const header=document.getElementById("ct-header");
const body=document.getElementById("ct-body");
header.onclick=()=>{
body.style.display=body.style.display==="block"?"none":"block";
};
document.getElementById("calcFuel").onclick=()=>{
const d=parseFloat(document.getElementById("distance").value)||0;
const c=parseFloat(document.getElementById("consumption").value)||0;
const p=parseFloat(document.getElementById("price").value)||0;
const litres=d*c/100;
const total=litres*p;
document.getElementById("ct-result").innerHTML=
`Fuel Needed: ${litres.toFixed(1)} L<br>Total Cost: $${total.toFixed(2)}`;
};
const checks=document.querySelectorAll("[data-item]");
checks.forEach(c=>{
const key="ct_"+c.dataset.item;
c.checked=localStorage.getItem(key)==="1";
c.onchange=()=>{
localStorage.setItem(key,c.checked?"1":"0");
};
});
const notes=document.getElementById("tripNotes");
notes.value=localStorage.getItem("ct_notes")||"";
document.getElementById("saveNotes").onclick=()=>{
localStorage.setItem("ct_notes",notes.value);
alert("Notes Saved");
};
})();