da266d5317
Deliverables (8/10 agents complete): - S3-H01: Pitch deck emphasizing sticky engagement (daily camera, maintenance, inventory) - S3-H02: 5-min demo script showing weekly app usage (not just resale-time) - S3-H03: ROI calculator (€28K-€48K inventory tracking value) - S3-H04: Objection handling playbook (5+ objections with data-backed responses) - S3-H05: 3-tier pricing strategy + Riviera Plaisance pilot program - S3-H06: Competitive differentiation vs 5 yacht doc competitors - S3-H07: Technical architecture diagram (Mermaid visualization) - S3-H09: Visual design system (nautical theme, typography, icons) Blocked waiting for Sessions 1+2 handoff files: - S3-H08: Case Study Writer (needs Session 1 pain points) - S3-H10: Sales Collateral Synthesis (needs all session data) IF.bus protocol: All agents sent inform/validate messages for coordination Token efficiency: 100% Haiku delegation (Agents 1-9)
585 lines
20 KiB
HTML
585 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>NaviDocs ROI Calculator - Inventory Tracking</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
text-align: center;
|
||
color: white;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 2.5em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
header p {
|
||
font-size: 1.1em;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.main-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.card h2 {
|
||
color: #667eea;
|
||
font-size: 1.5em;
|
||
margin-bottom: 20px;
|
||
border-bottom: 2px solid #667eea;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.input-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
input[type="number"],
|
||
input[type="range"] {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
font-size: 1em;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
input[type="number"]:focus,
|
||
input[type="range"]:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.slider-value {
|
||
display: inline-block;
|
||
background: #667eea;
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 0.85em;
|
||
font-weight: bold;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.inventory-list {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.inventory-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #ddd;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
.inventory-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.inventory-value {
|
||
font-weight: 600;
|
||
color: #667eea;
|
||
}
|
||
|
||
.inventory-total {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
color: #333;
|
||
border-top: 2px solid #667eea;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.results-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.result-box {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
|
||
.result-label {
|
||
color: #666;
|
||
font-size: 0.9em;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.result-value {
|
||
font-size: 2em;
|
||
font-weight: bold;
|
||
color: #667eea;
|
||
}
|
||
|
||
.result-value.positive {
|
||
color: #27ae60;
|
||
}
|
||
|
||
.result-value.negative {
|
||
color: #e74c3c;
|
||
}
|
||
|
||
.comparison-section {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.comparison-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.scenario {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
border: 2px solid #ddd;
|
||
}
|
||
|
||
.scenario.without {
|
||
border-color: #e74c3c;
|
||
}
|
||
|
||
.scenario.with {
|
||
border-color: #27ae60;
|
||
}
|
||
|
||
.scenario h3 {
|
||
margin-bottom: 15px;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.scenario.without h3 {
|
||
color: #e74c3c;
|
||
}
|
||
|
||
.scenario.with h3 {
|
||
color: #27ae60;
|
||
}
|
||
|
||
.scenario-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #ddd;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
.scenario-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.scenario-total {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
border-top: 2px solid #ddd;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.benefit-highlight {
|
||
background: #d4edda;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
border-left: 4px solid #27ae60;
|
||
}
|
||
|
||
.benefit-highlight h4 {
|
||
color: #155724;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.benefit-highlight p {
|
||
color: #155724;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.assumptions {
|
||
background: #fff3cd;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
border-left: 4px solid #ffc107;
|
||
}
|
||
|
||
.assumptions h4 {
|
||
color: #856404;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.assumption-item {
|
||
color: #856404;
|
||
font-size: 0.9em;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.main-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 1.8em;
|
||
}
|
||
|
||
.comparison-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.currency {
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>NaviDocs ROI Calculator</h1>
|
||
<p>Calculate your return on investment from inventory tracking over 10 years</p>
|
||
</header>
|
||
|
||
<div class="main-content">
|
||
<!-- Input Section -->
|
||
<div class="card">
|
||
<h2>Your Boat Details</h2>
|
||
|
||
<div class="input-group">
|
||
<label for="boatPrice">Boat Purchase Price (€)</label>
|
||
<input type="number" id="boatPrice" value="250000" min="0" step="1000">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="annualUpgrades">Annual Upgrades/Maintenance (€)</label>
|
||
<input type="number" id="annualUpgrades" value="12500" min="0" step="1000">
|
||
<small style="color: #666; margin-top: 5px; display: block;">Typical range: €5,000 - €20,000</small>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="ownershipYears">Years of Ownership</label>
|
||
<input type="range" id="ownershipYears" min="1" max="20" value="10">
|
||
<span class="slider-value" id="yearsValue">10 years</span>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="resaleRetention">Expected Resale Price Retention (%)</label>
|
||
<input type="number" id="resaleRetention" value="60" min="0" max="100" step="5">
|
||
<small style="color: #666; margin-top: 5px; display: block;">Typical: 50-70% of original price</small>
|
||
</div>
|
||
|
||
<div class="card assumptions" style="background: #fff3cd; margin: 0;">
|
||
<h4>Forgotten Inventory at Resale</h4>
|
||
<div class="inventory-list">
|
||
<div class="inventory-item">
|
||
<span>Tender</span>
|
||
<span class="inventory-value">€15,000</span>
|
||
</div>
|
||
<div class="inventory-item">
|
||
<span>Electronics</span>
|
||
<span class="inventory-value">€8,000</span>
|
||
</div>
|
||
<div class="inventory-item">
|
||
<span>Blinds/Soft Goods</span>
|
||
<span class="inventory-value">€3,000</span>
|
||
</div>
|
||
<div class="inventory-item">
|
||
<span>Other Equipment</span>
|
||
<span class="inventory-value" id="forgottenOther">€4,000</span>
|
||
</div>
|
||
<div class="inventory-total">
|
||
<span>Total Forgotten Value</span>
|
||
<span id="forgottenTotal">€30,000</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Calculations Section -->
|
||
<div class="card">
|
||
<h2>ROI Analysis</h2>
|
||
|
||
<div class="results-container">
|
||
<div class="result-box">
|
||
<div class="result-label">Forgotten Inventory at Resale</div>
|
||
<div class="result-value positive" id="resultForgotten">€30,000</div>
|
||
</div>
|
||
|
||
<div class="result-box">
|
||
<div class="result-label">NaviDocs Cost (10 years)</div>
|
||
<div class="result-value negative" id="resultCost">€1,800</div>
|
||
</div>
|
||
|
||
<div class="result-box">
|
||
<div class="result-label">Net Benefit with NaviDocs</div>
|
||
<div class="result-value positive" id="resultNetBenefit">€28,200</div>
|
||
</div>
|
||
|
||
<div class="result-box">
|
||
<div class="result-label">ROI (Return on Investment)</div>
|
||
<div class="result-value positive" id="resultROI">1,567%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="benefit-highlight">
|
||
<h4>Annual Benefit</h4>
|
||
<p id="annualBenefit">€2,820 per year</p>
|
||
</div>
|
||
|
||
<div class="assumptions" style="margin: 0; margin-top: 20px;">
|
||
<h4>Key Assumptions</h4>
|
||
<div class="assumption-item">• NaviDocs subscription: €15/month (€180/year)</div>
|
||
<div class="assumption-item">• Without inventory tracking, 80-100% of items are forgotten</div>
|
||
<div class="assumption-item">• With NaviDocs, forgotten items reduced by 90%</div>
|
||
<div class="assumption-item">• Conservative estimate: €30K-€50K value at risk</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Comparison Section -->
|
||
<div class="card comparison-section">
|
||
<h2>Financial Comparison: 10-Year Ownership Scenario</h2>
|
||
|
||
<div class="comparison-grid">
|
||
<div class="scenario without">
|
||
<h3>Without NaviDocs</h3>
|
||
<div class="scenario-item">
|
||
<span>Original Boat Price</span>
|
||
<span id="scenarioBoatWithout">€250,000</span>
|
||
</div>
|
||
<div class="scenario-item">
|
||
<span>10-Year Upgrades & Maintenance</span>
|
||
<span id="scenarioUpgradesWithout">€125,000</span>
|
||
</div>
|
||
<div class="scenario-item">
|
||
<span>Resale Value (60%)</span>
|
||
<span id="scenarioResaleWithout">€150,000</span>
|
||
</div>
|
||
<div class="scenario-item">
|
||
<span>Forgotten Inventory Loss</span>
|
||
<span id="scenarioForgottenWithout" style="color: #e74c3c; font-weight: bold;">-€30,000</span>
|
||
</div>
|
||
<div class="scenario-total">
|
||
<span>Net Proceeds at Resale</span>
|
||
<span id="scenarioTotalWithout" style="color: #e74c3c;">€120,000</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scenario with">
|
||
<h3>With NaviDocs</h3>
|
||
<div class="scenario-item">
|
||
<span>Original Boat Price</span>
|
||
<span id="scenarioBoatWith">€250,000</span>
|
||
</div>
|
||
<div class="scenario-item">
|
||
<span>10-Year Upgrades & Maintenance</span>
|
||
<span id="scenarioUpgradesWith">€125,000</span>
|
||
</div>
|
||
<div class="scenario-item">
|
||
<span>NaviDocs Subscription Cost</span>
|
||
<span id="scenarioCostWith" style="color: #e74c3c;">-€1,800</span>
|
||
</div>
|
||
<div class="scenario-item">
|
||
<span>Resale Value (60%)</span>
|
||
<span id="scenarioResaleWith">€150,000</span>
|
||
</div>
|
||
<div class="scenario-item">
|
||
<span>Forgotten Inventory Loss (10% with tracking)</span>
|
||
<span id="scenarioForgottenWith" style="color: #27ae60; font-weight: bold;">-€3,000</span>
|
||
</div>
|
||
<div class="scenario-total">
|
||
<span>Net Proceeds at Resale</span>
|
||
<span id="scenarioTotalWith" style="color: #27ae60;">€148,200</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="benefit-highlight" style="margin-top: 20px;">
|
||
<h4>The Value of Inventory Tracking</h4>
|
||
<p id="finalComparison">By using NaviDocs, you could recover an additional €28,200 in asset value over 10 years - a 1,567% return on your subscription investment.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Input elements
|
||
const boatPrice = document.getElementById('boatPrice');
|
||
const annualUpgrades = document.getElementById('annualUpgrades');
|
||
const ownershipYears = document.getElementById('ownershipYears');
|
||
const resaleRetention = document.getElementById('resaleRetention');
|
||
|
||
// Result elements
|
||
const resultForgotten = document.getElementById('resultForgotten');
|
||
const resultCost = document.getElementById('resultCost');
|
||
const resultNetBenefit = document.getElementById('resultNetBenefit');
|
||
const resultROI = document.getElementById('resultROI');
|
||
const annualBenefit = document.getElementById('annualBenefit');
|
||
|
||
// Comparison elements
|
||
const scenarioBoatWithout = document.getElementById('scenarioBoatWithout');
|
||
const scenarioUpgradesWithout = document.getElementById('scenarioUpgradesWithout');
|
||
const scenarioResaleWithout = document.getElementById('scenarioResaleWithout');
|
||
const scenarioForgottenWithout = document.getElementById('scenarioForgottenWithout');
|
||
const scenarioTotalWithout = document.getElementById('scenarioTotalWithout');
|
||
|
||
const scenarioBoatWith = document.getElementById('scenarioBoatWith');
|
||
const scenarioUpgradesWith = document.getElementById('scenarioUpgradesWith');
|
||
const scenarioCostWith = document.getElementById('scenarioCostWith');
|
||
const scenarioResaleWith = document.getElementById('scenarioResaleWith');
|
||
const scenarioForgottenWith = document.getElementById('scenarioForgottenWith');
|
||
const scenarioTotalWith = document.getElementById('scenarioTotalWith');
|
||
|
||
const finalComparison = document.getElementById('finalComparison');
|
||
const forgottenTotal = document.getElementById('forgottenTotal');
|
||
const yearsValue = document.getElementById('yearsValue');
|
||
|
||
// Format currency
|
||
function formatCurrency(value) {
|
||
return new Intl.NumberFormat('de-DE', {
|
||
style: 'currency',
|
||
currency: 'EUR',
|
||
minimumFractionDigits: 0,
|
||
maximumFractionDigits: 0
|
||
}).format(value);
|
||
}
|
||
|
||
// Update years display
|
||
ownershipYears.addEventListener('input', function() {
|
||
yearsValue.textContent = this.value + ' year' + (this.value != 1 ? 's' : '');
|
||
calculate();
|
||
});
|
||
|
||
// Add event listeners for all inputs
|
||
boatPrice.addEventListener('input', calculate);
|
||
annualUpgrades.addEventListener('input', calculate);
|
||
resaleRetention.addEventListener('input', calculate);
|
||
|
||
function calculate() {
|
||
// Get input values
|
||
const price = parseFloat(boatPrice.value) || 0;
|
||
const upgrades = parseFloat(annualUpgrades.value) || 0;
|
||
const years = parseFloat(ownershipYears.value) || 10;
|
||
const retention = parseFloat(resaleRetention.value) || 60;
|
||
|
||
// Calculate forgotten inventory
|
||
const forgottenBase = 30000; // Base forgotten value
|
||
const baseOther = 4000;
|
||
|
||
// NaviDocs subscription: €15/month × 120 months (10 years) = €1,800
|
||
// Adjust for actual years
|
||
const monthlySubscription = 15;
|
||
const totalMonths = years * 12;
|
||
const naviDocsCost = monthlySubscription * totalMonths;
|
||
|
||
// Without NaviDocs: assume 80-100% of forgotten items are lost (use 90% conservative)
|
||
const forgottenWithout = forgottenBase * 0.9;
|
||
|
||
// With NaviDocs: assume 90% recovery, so only 10% forgotten
|
||
const forgottenWith = forgottenBase * 0.1;
|
||
|
||
// Net benefit
|
||
const netBenefit = forgottenWithout - forgottenWith - naviDocsCost;
|
||
|
||
// ROI calculation
|
||
const roi = (netBenefit / naviDocsCost) * 100;
|
||
|
||
// Annual benefit
|
||
const annualNetBenefit = netBenefit / years;
|
||
|
||
// Update results
|
||
resultForgotten.textContent = formatCurrency(forgottenWithout);
|
||
resultCost.textContent = formatCurrency(naviDocsCost);
|
||
resultNetBenefit.textContent = formatCurrency(netBenefit);
|
||
resultROI.textContent = Math.round(roi) + '%';
|
||
annualBenefit.textContent = formatCurrency(annualNetBenefit) + ' per year';
|
||
forgottenTotal.textContent = formatCurrency(forgottenBase);
|
||
|
||
// Scenario calculations
|
||
const totalUpgrades = upgrades * years;
|
||
const resaleValue = (price * retention) / 100;
|
||
|
||
// Without NaviDocs
|
||
const proceedsWithout = resaleValue - forgottenWithout;
|
||
|
||
// With NaviDocs
|
||
const proceedsWith = resaleValue - forgottenWith - naviDocsCost;
|
||
|
||
// Update scenario values
|
||
scenarioBoatWithout.textContent = formatCurrency(price);
|
||
scenarioUpgradesWithout.textContent = formatCurrency(totalUpgrades);
|
||
scenarioResaleWithout.textContent = formatCurrency(resaleValue);
|
||
scenarioForgottenWithout.textContent = formatCurrency(-forgottenWithout);
|
||
scenarioTotalWithout.textContent = formatCurrency(proceedsWithout);
|
||
|
||
scenarioBoatWith.textContent = formatCurrency(price);
|
||
scenarioUpgradesWith.textContent = formatCurrency(totalUpgrades);
|
||
scenarioCostWith.textContent = formatCurrency(-naviDocsCost);
|
||
scenarioResaleWith.textContent = formatCurrency(resaleValue);
|
||
scenarioForgottenWith.textContent = formatCurrency(-forgottenWith);
|
||
scenarioTotalWith.textContent = formatCurrency(proceedsWith);
|
||
|
||
// Final comparison message
|
||
const advantage = proceedsWith - proceedsWithout;
|
||
finalComparison.textContent = `By using NaviDocs, you could recover an additional ${formatCurrency(advantage)} in asset value over ${years} years - a ${Math.round(roi)}% return on your subscription investment.`;
|
||
}
|
||
|
||
// Initial calculation
|
||
calculate();
|
||
</script>
|
||
</body>
|
||
</html>
|