95451fc86c
Adds "Assumes 2-week lead time between syndication and Live Date" to the Syndication card and results section in both the full SLA Calculator (index.html) and the Brief Advisor (client.html). Includes a reference-only disclaimer with BCM confirmation guidance. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
218 lines
13 KiB
HTML
218 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="scroll-smooth">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SLA Brief Advisor — eCom Content Factory</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
darkMode: 'class',
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
brand: { 50: '#fef3f2', 100: '#fee4e2', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337' }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||
<style>
|
||
.fade-in { animation: fadeIn 0.3s ease-in-out; }
|
||
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
||
@media print { .no-print { display: none !important; } }
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 min-h-screen transition-colors">
|
||
|
||
<!-- Header -->
|
||
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 no-print">
|
||
<div class="max-w-3xl mx-auto px-4 py-4 flex items-center justify-between">
|
||
<div>
|
||
<h1 class="text-xl font-bold text-brand-700 dark:text-brand-400">SLA Brief Advisor</h1>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">eCom Content Factory</p>
|
||
</div>
|
||
<button id="darkToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Toggle dark mode">
|
||
<svg id="sunIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||
<svg id="moonIcon" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Disclaimer -->
|
||
<div class="max-w-3xl mx-auto px-4 mt-4 no-print">
|
||
<div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg px-4 py-2.5 flex items-start gap-2">
|
||
<svg class="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
<p class="text-xs text-amber-700 dark:text-amber-300">These dates are <strong>non-contractual estimates</strong> based on standard SLAs. Actual timelines may vary depending on project complexity and team availability.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<main class="max-w-3xl mx-auto px-4 py-6">
|
||
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||
|
||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Tell us what you need and when — we'll tell you the right brief type and when to submit it.</p>
|
||
|
||
<!-- Form -->
|
||
<form id="clientForm" class="space-y-5" autocomplete="off">
|
||
|
||
<!-- Content Type -->
|
||
<div>
|
||
<label for="contentType" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">What is this for?</label>
|
||
<select id="contentType" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2.5 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition-colors">
|
||
<option value="">— Select —</option>
|
||
<option value="pdp">Product (PDP)</option>
|
||
<option value="eventing">Eventing</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Asset Volume -->
|
||
<div>
|
||
<label for="assetVolume" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">How many assets do you need?</label>
|
||
<select id="assetVolume" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2.5 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition-colors">
|
||
<option value="0_30">0 – 30</option>
|
||
<option value="30_50">30 – 50</option>
|
||
<option value="50_100">50 – 100</option>
|
||
<option value="100_200">100 – 200</option>
|
||
<option value="200_300">200 – 300</option>
|
||
<option value="300_400">300 – 400</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Yes/No Toggles -->
|
||
<div class="space-y-3">
|
||
<p class="text-sm font-semibold text-gray-700 dark:text-gray-300">What do you need?</p>
|
||
|
||
<!-- Video -->
|
||
<label class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/40 cursor-pointer transition-colors">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-lg">🎬</span>
|
||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Video / Motion content</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input type="checkbox" id="needsVideo" class="sr-only peer">
|
||
<div class="w-10 h-5 bg-gray-300 dark:bg-gray-600 rounded-full peer-checked:bg-brand-500 transition-colors"></div>
|
||
<div class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow peer-checked:translate-x-5 transition-transform"></div>
|
||
</div>
|
||
</label>
|
||
|
||
<!-- HTML -->
|
||
<label class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/40 cursor-pointer transition-colors">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-lg">🖥️</span>
|
||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">HTML / Rich media</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input type="checkbox" id="needsHTML" class="sr-only peer">
|
||
<div class="w-10 h-5 bg-gray-300 dark:bg-gray-600 rounded-full peer-checked:bg-brand-500 transition-colors"></div>
|
||
<div class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow peer-checked:translate-x-5 transition-transform"></div>
|
||
</div>
|
||
</label>
|
||
|
||
<!-- Translation -->
|
||
<label class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/40 cursor-pointer transition-colors">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-lg">🌐</span>
|
||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Translation</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input type="checkbox" id="needsTranslation" class="sr-only peer">
|
||
<div class="w-10 h-5 bg-gray-300 dark:bg-gray-600 rounded-full peer-checked:bg-brand-500 transition-colors"></div>
|
||
<div class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow peer-checked:translate-x-5 transition-transform"></div>
|
||
</div>
|
||
</label>
|
||
|
||
<!-- Syndication -->
|
||
<label class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/40 cursor-pointer transition-colors">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-lg">📤</span>
|
||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Syndication</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input type="checkbox" id="needsSyndication" class="sr-only peer">
|
||
<div class="w-10 h-5 bg-gray-300 dark:bg-gray-600 rounded-full peer-checked:bg-brand-500 transition-colors"></div>
|
||
<div class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow peer-checked:translate-x-5 transition-transform"></div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Go-Live Date -->
|
||
<div>
|
||
<label for="golive" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">When do you need this live?</label>
|
||
<input id="golive" type="text" placeholder="Select your go-live date…" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2.5 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition-colors" readonly>
|
||
</div>
|
||
|
||
<!-- Calculate Button -->
|
||
<button type="submit" id="calcBtn" disabled class="w-full bg-brand-600 hover:bg-brand-700 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded-lg transition-colors text-sm">
|
||
Show me the result
|
||
</button>
|
||
</form>
|
||
|
||
<!-- Results -->
|
||
<div id="results" class="hidden mt-8 fade-in">
|
||
<hr class="border-gray-200 dark:border-gray-700 mb-6">
|
||
|
||
<!-- Brief Type Result -->
|
||
<div class="rounded-xl p-5 mb-4 bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800">
|
||
<div class="flex items-start gap-3">
|
||
<div class="w-10 h-10 rounded-full bg-brand-500 flex items-center justify-center flex-shrink-0 shadow">
|
||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs font-medium text-brand-600 dark:text-brand-400 uppercase tracking-wide">Brief type to submit</p>
|
||
<p id="resultBriefType" class="text-lg font-bold text-brand-800 dark:text-brand-200 mt-0.5"></p>
|
||
<p id="resultBriefDesc" class="text-xs text-brand-600 dark:text-brand-400 mt-1"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Submission Deadline -->
|
||
<div id="deadlineBanner" class="rounded-xl p-5 mb-4"></div>
|
||
|
||
<!-- Timeline Summary -->
|
||
<div id="timelineSummary" class="space-y-3"></div>
|
||
|
||
<!-- Summary Row -->
|
||
<div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 text-center">
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Submit Brief By</p>
|
||
<p id="summarySubmitBy" class="text-sm font-bold text-brand-600 dark:text-brand-400"></p>
|
||
</div>
|
||
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 text-center">
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Estimated Completion</p>
|
||
<p id="summaryCompletion" class="text-sm font-bold"></p>
|
||
</div>
|
||
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 text-center">
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Total Business Days</p>
|
||
<p id="summaryDays" class="text-sm font-bold"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lead-time & Disclaimer Notes -->
|
||
<div class="mt-4 space-y-2">
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 italic">Assumes 2-week lead time between syndication and Live Date.</p>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 italic">These timings are for reference only. Please confirm final deadlines with your BCM after studio evaluation. Creative requests follow ad-hoc production timelines.</p>
|
||
</div>
|
||
|
||
<!-- Start Over -->
|
||
<div class="mt-6 text-center no-print">
|
||
<button id="resetBtn" type="button" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||
Start Over
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-6 no-print">
|
||
For detailed stage-by-stage configuration, use the <a href="index.html" class="underline hover:text-brand-500">full SLA Calculator</a>.
|
||
</p>
|
||
</main>
|
||
|
||
<script src="client-script.js?v=2026031303"></script>
|
||
</body>
|
||
</html>
|