1f7153d105
Forces browsers to fetch updated market-script.js and script.js with the Gantt red line position fix. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
379 lines
27 KiB
HTML
379 lines
27 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>
|
||
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></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="rounded-xl border-2 border-amber-400 dark:border-amber-500 bg-amber-50 dark:bg-amber-900/30 p-4">
|
||
<div class="flex items-start gap-3">
|
||
<svg class="w-6 h-6 text-amber-500 dark:text-amber-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/>
|
||
</svg>
|
||
<div>
|
||
<p class="text-sm font-bold text-amber-800 dark:text-amber-200">These timings are for reference only and assume suitable working files have been provided.</p>
|
||
<p class="text-sm font-semibold text-amber-700 dark:text-amber-300 mt-1">Please confirm final deadlines with your BCM after studio evaluation. Creative requests follow ad-hoc production timelines.</p>
|
||
</div>
|
||
</div>
|
||
</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_50">0 – 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>
|
||
|
||
<!-- Static -->
|
||
<div class="rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
|
||
<label class="flex items-center justify-between p-3 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">Static imagery</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input type="checkbox" id="needsStatic" class="sr-only peer toggle-with-feedback" data-feedback="feedbackStatic">
|
||
<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 id="feedbackStatic" class="hidden border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/30 px-3 py-2.5 space-y-3">
|
||
<!-- Static work type sub-selector -->
|
||
<div>
|
||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">What type of static work?</p>
|
||
<div class="flex flex-col gap-1.5">
|
||
<label class="flex items-center gap-2 cursor-pointer">
|
||
<input type="radio" name="staticWorkType" value="creation" checked class="w-3.5 h-3.5 text-brand-500 focus:ring-brand-500 border-gray-300 dark:border-gray-600">
|
||
<span class="text-xs text-gray-700 dark:text-gray-300">New Asset <span class="text-gray-400 dark:text-gray-500">(new KV & Visual ID)</span></span>
|
||
</label>
|
||
<label class="flex items-center gap-2 cursor-pointer">
|
||
<input type="radio" name="staticWorkType" value="adaptation" class="w-3.5 h-3.5 text-brand-500 focus:ring-brand-500 border-gray-300 dark:border-gray-600">
|
||
<span class="text-xs text-gray-700 dark:text-gray-300">Adapting existing <span class="text-gray-400 dark:text-gray-500">(local customisation)</span></span>
|
||
</label>
|
||
<label class="flex items-center gap-2 cursor-pointer">
|
||
<input type="radio" name="staticWorkType" value="simple" class="w-3.5 h-3.5 text-brand-500 focus:ring-brand-500 border-gray-300 dark:border-gray-600">
|
||
<span class="text-xs text-gray-700 dark:text-gray-300">Resizing / Cropping only</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- Feedback days -->
|
||
<label class="flex items-center justify-between">
|
||
<span class="text-xs font-medium text-gray-600 dark:text-gray-400">Days needed for feedback <span class="font-normal text-gray-400 dark:text-gray-500">(30 min* 0.3 response time for urgent brief)</span></span>
|
||
<input type="number" id="feedbackDaysStatic" min="0" max="30" step="0.1" value="3" class="w-16 text-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
||
</label>
|
||
<!-- Rounds of amends -->
|
||
<label class="flex items-center justify-between">
|
||
<span class="text-xs font-medium text-gray-600 dark:text-gray-400">Rounds of amends</span>
|
||
<input type="number" id="amendRoundsStatic" min="1" max="10" step="1" value="1" class="w-16 text-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Video -->
|
||
<div class="rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
|
||
<label class="flex items-center justify-between p-3 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 toggle-with-feedback" data-feedback="feedbackVideo">
|
||
<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 id="feedbackVideo" class="hidden border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/30 px-3 py-2.5 space-y-3">
|
||
<!-- Video work type sub-selector -->
|
||
<div>
|
||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">What type of video work?</p>
|
||
<div class="flex flex-col gap-1.5">
|
||
<label class="flex items-center gap-2 cursor-pointer">
|
||
<input type="radio" name="videoWorkType" value="new_asset" checked class="w-3.5 h-3.5 text-brand-500 focus:ring-brand-500 border-gray-300 dark:border-gray-600">
|
||
<span class="text-xs text-gray-700 dark:text-gray-300">New asset</span>
|
||
</label>
|
||
<label class="flex items-center gap-2 cursor-pointer">
|
||
<input type="radio" name="videoWorkType" value="adapting" class="w-3.5 h-3.5 text-brand-500 focus:ring-brand-500 border-gray-300 dark:border-gray-600">
|
||
<span class="text-xs text-gray-700 dark:text-gray-300">Adapting existing <span class="text-gray-400 dark:text-gray-500">(local customisation)</span></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- Feedback days -->
|
||
<label class="flex items-center justify-between">
|
||
<span class="text-xs font-medium text-gray-600 dark:text-gray-400">Days needed for feedback</span>
|
||
<input type="number" id="feedbackDaysVideo" min="0" max="30" step="0.1" value="3" class="w-16 text-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
||
</label>
|
||
<!-- Rounds of amends -->
|
||
<label class="flex items-center justify-between">
|
||
<span class="text-xs font-medium text-gray-600 dark:text-gray-400">Rounds of amends</span>
|
||
<input type="number" id="amendRoundsVideo" min="1" max="10" step="1" value="1" class="w-16 text-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HTML -->
|
||
<div class="rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
|
||
<label class="flex items-center justify-between p-3 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 toggle-with-feedback" data-feedback="feedbackHTML">
|
||
<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 id="feedbackHTML" class="hidden border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/30 px-3 py-2.5 space-y-3">
|
||
<label class="flex items-center justify-between">
|
||
<span class="text-xs font-medium text-gray-600 dark:text-gray-400">Days needed for feedback</span>
|
||
<input type="number" id="feedbackDaysHTML" min="0" max="30" step="0.1" value="3" class="w-16 text-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
||
</label>
|
||
<label class="flex items-center justify-between">
|
||
<span class="text-xs font-medium text-gray-600 dark:text-gray-400">Rounds of amends</span>
|
||
<input type="number" id="amendRoundsHTML" min="1" max="10" step="1" value="1" class="w-16 text-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Translation -->
|
||
<div class="rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
|
||
<label class="flex items-center justify-between p-3 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 toggle-with-feedback" data-feedback="feedbackTranslation">
|
||
<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 id="feedbackTranslation" class="hidden border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/30 px-3 py-2.5 space-y-3">
|
||
<label class="flex items-center justify-between">
|
||
<span class="text-xs font-medium text-gray-600 dark:text-gray-400">Days needed for feedback</span>
|
||
<input type="number" id="feedbackDaysTranslation" min="0" max="30" step="0.1" value="5" class="w-16 text-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
||
</label>
|
||
<label class="flex items-center justify-between">
|
||
<span class="text-xs font-medium text-gray-600 dark:text-gray-400">Rounds of amends</span>
|
||
<input type="number" id="amendRoundsTranslation" min="1" max="10" step="1" value="1" class="w-16 text-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Syndication -->
|
||
<div class="rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
|
||
<label class="flex items-center justify-between p-3 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">Delivery to Retailer (Syndication)</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input type="checkbox" id="needsSyndication" class="sr-only peer" checked>
|
||
<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>
|
||
</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 Oliver tasks completed by?</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 class="flex-1">
|
||
<p class="text-xs font-medium text-brand-600 dark:text-brand-400 uppercase tracking-wide mb-1.5">Brief type to submit</p>
|
||
<select id="briefTypeOverride" class="w-full rounded-lg border border-brand-300 dark:border-brand-700 bg-white dark:bg-gray-700 px-3 py-2 text-sm font-bold text-brand-800 dark:text-brand-200 focus:ring-2 focus:ring-brand-500 outline-none">
|
||
</select>
|
||
<div id="resultBriefDesc" class="mt-2 p-2.5 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-xs text-blue-800 dark:text-blue-300 hidden"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Submission Deadline -->
|
||
<div id="deadlineBanner" class="rounded-xl p-5 mb-4"></div>
|
||
|
||
<!-- Urgent Brief Note (shown conditionally by JS) -->
|
||
<div id="urgentNote" class="hidden"></div>
|
||
|
||
<!-- Disclaimer Banner -->
|
||
<div class="rounded-xl border-2 border-amber-400 dark:border-amber-500 bg-amber-50 dark:bg-amber-900/30 p-4 mb-4">
|
||
<div class="flex items-start gap-3">
|
||
<svg class="w-6 h-6 text-amber-500 dark:text-amber-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/>
|
||
</svg>
|
||
<div>
|
||
<p class="text-sm font-bold text-amber-800 dark:text-amber-200">These timings are for reference only and assume suitable working files have been provided.</p>
|
||
<p class="text-sm font-semibold text-amber-700 dark:text-amber-300 mt-1">Please confirm final deadlines with your BCM after studio evaluation. Creative requests follow ad-hoc production timelines.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Timeline Summary -->
|
||
<div id="timelineSummary" class="space-y-3"></div>
|
||
|
||
<!-- Summary Row -->
|
||
<div id="summaryCards" class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 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-gray-700 dark:text-gray-200"></p>
|
||
<p class="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">2 days before acceptance</p>
|
||
</div>
|
||
<div class="bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-lg p-3 text-center">
|
||
<p class="text-xs text-brand-600 dark:text-brand-400 mb-1">Brief Accepted By</p>
|
||
<p id="summaryBriefAcceptedBy" class="text-sm font-bold text-brand-700 dark:text-brand-300"></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 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">Earliest Completion</p>
|
||
<p id="summaryEarliest" class="text-sm font-bold"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gantt Toggle -->
|
||
<div class="mt-4 no-print">
|
||
<button type="button" id="toggleGanttBtn" onclick="toggleGantt()" 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" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/></svg>
|
||
Show Gantt
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Gantt Panel -->
|
||
<div id="ganttView" class="hidden mt-4 bg-gray-50 dark:bg-gray-700/30 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
|
||
<div class="flex justify-between items-center mb-3 no-print">
|
||
<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Timeline Gantt</h3>
|
||
<button onclick="downloadGanttPNG()" class="px-3 py-1.5 bg-gray-900 dark:bg-white dark:text-gray-900 hover:bg-gray-700 dark:hover:bg-gray-100 text-white rounded-lg font-medium text-xs transition-colors flex items-center gap-1.5">
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
|
||
Download PNG
|
||
</button>
|
||
</div>
|
||
<div id="ganttChart"></div>
|
||
</div>
|
||
|
||
<!-- SLA one-pager link (hidden until URL is available) -->
|
||
<div id="slaPagerLink" class="hidden mt-4 text-center">
|
||
<a href="#" class="inline-flex items-center gap-1.5 text-sm text-brand-600 dark:text-brand-400 hover:underline font-medium">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||
Download our SLA guide →
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Toggle for urgent brief detail view -->
|
||
<div id="toggleDetails" class="hidden mt-4 text-center"></div>
|
||
|
||
<!-- Actions -->
|
||
<div class="mt-6 flex flex-wrap justify-center gap-3 no-print">
|
||
<button type="button" id="btnCopyEmail" onclick="copyForEmail()" class="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-medium text-sm transition-colors">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
|
||
Copy for Email
|
||
</button>
|
||
<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="market-script.js?v=2026042401"></script>
|
||
</body>
|
||
</html>
|