Caravan Toolkit のソースコード

Greasy Fork is available in English.
Caravan Toolkit

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");
    };

})();