586cb57155
- Stage 8: replace 3x3 complexity x EAN grid with single syndicationType dropdown -- Salsify Prep Only (4d), Syndication PDP (5d), Syndication Non-PDP (3d). Advisor maps contentType to PDP/Non-PDP only; Salsify Prep Only is not surfaced in the Advisor (team decision). - Stage 6 (Advisor): derive complexity from staticWorkType / videoWorkType / needsHTML toggles via deriveProductionComplexity helper. Precedence bespoke > creation > complex > simple, max across enabled toggles. HTML-only falls back to complex (placeholder, may revisit). - Bump config.json cache-bust to 2026050801. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
781 lines
59 KiB
HTML
Executable file
781 lines
59 KiB
HTML
Executable file
<!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 Calculator</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/@azure/msal-browser@2.38.3/lib/msal-browser.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
|
<style>
|
|
[x-cloak] { display: none !important; }
|
|
.tooltip-trigger:hover .tooltip-content { display: block; }
|
|
@media print { .no-print { display: none !important; } }
|
|
.fade-in { animation: fadeIn 0.3s ease-in-out; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
|
.stage-card { transition: all 0.3s ease; }
|
|
.stage-card.inactive { opacity: 0.4; pointer-events: none; }
|
|
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #e11d48; cursor: pointer; }
|
|
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #e11d48; cursor: pointer; border: none; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-300">
|
|
|
|
<!-- Auth Overlay -->
|
|
<div id="authOverlay" class="fixed inset-0 z-[100] bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
|
|
<div class="w-full max-w-sm mx-auto px-4">
|
|
|
|
<!-- Card wrapper -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8">
|
|
|
|
<!-- Logo / branding -->
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<div class="w-10 h-10 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold text-lg shrink-0">SLA</div>
|
|
<div>
|
|
<p class="text-base font-bold leading-tight">SLA Calculator</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">eCom Content Factory</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel: loading -->
|
|
<div id="authView-loading" class="auth-view">
|
|
<div class="flex flex-col items-center py-6">
|
|
<div class="w-10 h-10 border-4 border-brand-600 border-t-transparent rounded-full animate-spin mb-4"></div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Signing you in…</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel: choice -->
|
|
<div id="authView-choice" class="auth-view hidden">
|
|
<h2 class="text-xl font-semibold mb-1">Welcome back</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Sign in to continue</p>
|
|
<button onclick="authSsoLogin()" class="w-full flex items-center justify-center gap-3 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors mb-3 font-medium text-sm">
|
|
<svg class="w-5 h-5" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
|
|
Continue with Microsoft
|
|
</button>
|
|
<div class="relative my-4">
|
|
<div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-200 dark:border-gray-700"></div></div>
|
|
<div class="relative flex justify-center text-xs text-gray-400 dark:text-gray-500"><span class="bg-white dark:bg-gray-800 px-2">or</span></div>
|
|
</div>
|
|
<button onclick="showAuthView('login')" class="w-full px-4 py-3 bg-brand-600 hover:bg-brand-700 text-white rounded-lg transition-colors font-medium text-sm">Sign in with email</button>
|
|
</div>
|
|
|
|
<!-- Panel: login -->
|
|
<div id="authView-login" class="auth-view hidden">
|
|
<h2 class="text-xl font-semibold mb-1">Sign in</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Use your @loreal.com account</p>
|
|
<div id="authLoginError" class="hidden mb-4 p-3 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-sm rounded-lg"></div>
|
|
<form id="loginForm" onsubmit="authEmailLogin(event)">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">Email</label>
|
|
<input id="loginEmail" type="email" autocomplete="email" required placeholder="you@loreal.com"
|
|
class="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="block text-sm font-medium mb-1">Password</label>
|
|
<input id="loginPassword" type="password" autocomplete="current-password" required placeholder="••••••••"
|
|
class="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
|
|
</div>
|
|
<div class="flex justify-end mb-5">
|
|
<button type="button" onclick="showAuthView('forgot')" class="text-xs text-brand-600 hover:underline">Forgot password?</button>
|
|
</div>
|
|
<button type="submit" id="loginSubmitBtn" class="w-full px-4 py-3 bg-brand-600 hover:bg-brand-700 text-white rounded-lg transition-colors font-medium text-sm">Sign in</button>
|
|
</form>
|
|
<p class="mt-5 text-center text-sm text-gray-500 dark:text-gray-400">
|
|
No account?
|
|
<button onclick="showAuthView('register')" class="text-brand-600 hover:underline font-medium">Register</button>
|
|
</p>
|
|
<p class="mt-3 text-center">
|
|
<button onclick="showAuthView('choice')" class="text-xs text-gray-400 hover:underline">← Back</button>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Panel: register -->
|
|
<div id="authView-register" class="auth-view hidden">
|
|
<h2 class="text-xl font-semibold mb-1">Create account</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">@loreal.com addresses only</p>
|
|
<div id="authRegisterError" class="hidden mb-4 p-3 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-sm rounded-lg"></div>
|
|
<form id="registerForm" onsubmit="authRegister(event)">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">Email</label>
|
|
<input id="registerEmail" type="email" autocomplete="email" required placeholder="you@loreal.com"
|
|
class="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">Password</label>
|
|
<input id="registerPassword" type="password" autocomplete="new-password" required placeholder="Min 8 chars, uppercase & number"
|
|
class="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
|
|
</div>
|
|
<div class="mb-5">
|
|
<label class="block text-sm font-medium mb-1">Confirm password</label>
|
|
<input id="registerConfirm" type="password" autocomplete="new-password" required placeholder="••••••••"
|
|
class="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
|
|
</div>
|
|
<button type="submit" id="registerSubmitBtn" class="w-full px-4 py-3 bg-brand-600 hover:bg-brand-700 text-white rounded-lg transition-colors font-medium text-sm">Create account</button>
|
|
</form>
|
|
<p class="mt-5 text-center text-sm text-gray-500 dark:text-gray-400">
|
|
Already have an account?
|
|
<button onclick="showAuthView('login')" class="text-brand-600 hover:underline font-medium">Sign in</button>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Panel: forgot password -->
|
|
<div id="authView-forgot" class="auth-view hidden">
|
|
<h2 class="text-xl font-semibold mb-1">Reset password</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">We'll send a reset link to your inbox</p>
|
|
<div id="authForgotMsg" class="hidden mb-4 p-3 text-sm rounded-lg"></div>
|
|
<form id="forgotForm" onsubmit="authForgotPassword(event)">
|
|
<div class="mb-5">
|
|
<label class="block text-sm font-medium mb-1">Email</label>
|
|
<input id="forgotEmail" type="email" autocomplete="email" required placeholder="you@loreal.com"
|
|
class="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
|
|
</div>
|
|
<button type="submit" id="forgotSubmitBtn" class="w-full px-4 py-3 bg-brand-600 hover:bg-brand-700 text-white rounded-lg transition-colors font-medium text-sm">Send reset link</button>
|
|
</form>
|
|
<p class="mt-4 text-center">
|
|
<button onclick="showAuthView('login')" class="text-xs text-gray-400 hover:underline">← Back to sign in</button>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Panel: reset password -->
|
|
<div id="authView-reset" class="auth-view hidden">
|
|
<h2 class="text-xl font-semibold mb-1">Set new password</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Choose a strong password</p>
|
|
<div id="authResetError" class="hidden mb-4 p-3 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-sm rounded-lg"></div>
|
|
<form id="resetForm" onsubmit="authResetPassword(event)">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">New password</label>
|
|
<input id="resetPassword" type="password" autocomplete="new-password" required placeholder="Min 8 chars, uppercase & number"
|
|
class="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
|
|
</div>
|
|
<div class="mb-5">
|
|
<label class="block text-sm font-medium mb-1">Confirm password</label>
|
|
<input id="resetConfirm" type="password" autocomplete="new-password" required placeholder="••••••••"
|
|
class="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
|
|
</div>
|
|
<button type="submit" id="resetSubmitBtn" class="w-full px-4 py-3 bg-brand-600 hover:bg-brand-700 text-white rounded-lg transition-colors font-medium text-sm">Set new password</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Panel: verify email notice -->
|
|
<div id="authView-verify" class="auth-view hidden">
|
|
<div class="text-center py-4">
|
|
<div class="w-14 h-14 bg-brand-100 dark:bg-brand-900/40 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-7 h-7 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
|
</div>
|
|
<h2 class="text-xl font-semibold mb-2">Check your inbox</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">We've sent a verification link to your email address. Click the link to activate your account.</p>
|
|
<button onclick="authResendVerification()" class="text-sm text-brand-600 hover:underline">Resend verification email</button>
|
|
<p class="mt-4">
|
|
<button onclick="showAuthView('login')" class="text-xs text-gray-400 hover:underline">← Back to sign in</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel: reset success -->
|
|
<div id="authView-resetSuccess" class="auth-view hidden">
|
|
<div class="text-center py-4">
|
|
<div class="w-14 h-14 bg-green-100 dark:bg-green-900/40 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
</div>
|
|
<h2 class="text-xl font-semibold mb-2">Password updated</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Your password has been set. You can now sign in.</p>
|
|
<button onclick="showAuthView('login')" class="w-full px-4 py-3 bg-brand-600 hover:bg-brand-700 text-white rounded-lg transition-colors font-medium text-sm">Sign in</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /card -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="appContainer" style="display:none">
|
|
|
|
<!-- Header -->
|
|
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">SLA</div>
|
|
<div>
|
|
<h1 class="text-lg font-bold leading-tight">SLA Calculator</h1>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">eCom Content Factory</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div id="userInfo" class="hidden flex items-center gap-2">
|
|
<span id="userDisplay" class="text-sm font-medium text-gray-700 dark:text-gray-300"></span>
|
|
<button onclick="signOut()" class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Sign out">
|
|
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
|
|
</button>
|
|
</div>
|
|
<button id="darkModeToggle" 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 dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-6xl mx-auto px-4 sm:px-6 py-6">
|
|
|
|
<!-- Disclaimer Banner -->
|
|
<div class="mb-6 rounded-lg border border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/30 px-4 py-3 flex items-start gap-3">
|
|
<svg class="w-5 h-5 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>
|
|
<p class="text-sm text-amber-800 dark:text-amber-200 font-medium">Please note: these dates are not contractual and may change. Final schedule to be confirmed and revised by the Project Manager.</p>
|
|
</div>
|
|
|
|
<!-- Progress Stepper -->
|
|
<nav class="mb-8 no-print">
|
|
<ol id="stepper" class="flex items-center w-full text-sm">
|
|
<li data-step="1" class="flex items-center flex-1 cursor-pointer step-item active">
|
|
<div class="flex items-center">
|
|
<span class="step-number flex items-center justify-center w-8 h-8 rounded-full bg-brand-600 text-white text-sm font-semibold shrink-0">1</span>
|
|
<span class="ml-2 font-medium hidden sm:inline">Brief Type</span>
|
|
</div>
|
|
<div class="flex-1 h-0.5 mx-3 bg-gray-300 dark:bg-gray-600 step-line"></div>
|
|
</li>
|
|
<li data-step="2" class="flex items-center flex-1 cursor-pointer step-item">
|
|
<div class="flex items-center">
|
|
<span class="step-number flex items-center justify-center w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 text-sm font-semibold shrink-0">2</span>
|
|
<span class="ml-2 font-medium hidden sm:inline">Stage Config</span>
|
|
</div>
|
|
<div class="flex-1 h-0.5 mx-3 bg-gray-300 dark:bg-gray-600 step-line"></div>
|
|
</li>
|
|
<li data-step="3" class="flex items-center flex-1 cursor-pointer step-item">
|
|
<div class="flex items-center">
|
|
<span class="step-number flex items-center justify-center w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 text-sm font-semibold shrink-0">3</span>
|
|
<span class="ml-2 font-medium hidden sm:inline">Dates</span>
|
|
</div>
|
|
<div class="flex-1 h-0.5 mx-3 bg-gray-300 dark:bg-gray-600 step-line"></div>
|
|
</li>
|
|
<li data-step="4" class="flex items-center cursor-pointer step-item">
|
|
<div class="flex items-center">
|
|
<span class="step-number flex items-center justify-center w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 text-sm font-semibold shrink-0">4</span>
|
|
<span class="ml-2 font-medium hidden sm:inline">Results</span>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Step 1: Brief Type -->
|
|
<section id="step1" class="step-content fade-in">
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
|
<h2 class="text-xl font-bold mb-1">Step 1 - Select Brief Type</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">PM should understand the type of Brief and select the Project Type accordingly.</p>
|
|
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Brief Type</label>
|
|
<select id="briefType" 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">
|
|
<option value="">-- Select a Brief Type --</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Project Type</label>
|
|
<div id="projectTypeDisplay" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50 px-3 py-2.5 text-sm text-gray-500 dark:text-gray-400">
|
|
Select a Brief Type first
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Brief description -->
|
|
<div id="briefDescription" class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-sm text-blue-800 dark:text-blue-300 hidden"></div>
|
|
|
|
<!-- Stage Matrix Preview -->
|
|
<div id="stageMatrixPreview" class="mt-6 hidden">
|
|
<h3 class="text-sm font-semibold mb-1">Project Stages for this Brief Type</h3>
|
|
<p class="text-xs text-gray-400 dark:text-gray-500 mb-3">Click a stage to toggle it on or off</p>
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2" id="stageMatrixBadges"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end mt-4">
|
|
<button onclick="goToStep(2)" id="btnStep1Next" class="px-6 py-2.5 bg-brand-600 hover:bg-brand-700 text-white rounded-lg font-medium text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
|
|
Next: Configure Stages →
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Step 2: Stage Configuration -->
|
|
<section id="step2" class="step-content hidden fade-in">
|
|
<div class="space-y-4">
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
|
<h2 class="text-xl font-bold mb-1">Step 2 - Configure Project Stages</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">PM should refer to stage definitions and update based on actual brief requirements. Toggle stages on/off as needed.</p>
|
|
</div>
|
|
|
|
<!-- Stage 1: DMI Asset Creation -->
|
|
<div id="stage1Card" class="stage-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hidden">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-sm font-bold">1</span>
|
|
<h3 class="font-semibold">Missing DMI Asset Creation</h3>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer stage-toggle" data-stage="0">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-brand-300 dark:peer-focus:ring-brand-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-600"></div>
|
|
</label>
|
|
</div>
|
|
<div class="stage-fields grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Complexity</label>
|
|
<select id="stage1Complexity" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none"></select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Rounds of Review
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-48 z-10">Maximum 2 rounds of review.</span>
|
|
</label>
|
|
<input type="number" id="stage1RevisionRounds" min="0" max="2" step="0.1" value="0" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Market Approval Days
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-48 z-10">Recommend 3 days, can be shorter.</span>
|
|
</label>
|
|
<input type="number" id="stage1MarketApproval" min="0" max="10" step="0.1" value="3" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Revision Days (per round)
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-48 z-10">Recommend 2 days per revision round.</span>
|
|
</label>
|
|
<input type="number" id="stage1RevisionDays" min="0" max="5" step="0.1" value="2" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 2: Mastering / Copy -->
|
|
<div id="stage2Card" class="stage-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hidden">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-sm font-bold">2</span>
|
|
<h3 class="font-semibold">Mastering, Copy Creation / Extraction</h3>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer stage-toggle" data-stage="1">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-brand-300 dark:peer-focus:ring-brand-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-600"></div>
|
|
</label>
|
|
</div>
|
|
<div class="stage-fields grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Mastering / Copy Extraction Complexity</label>
|
|
<select id="stage2MasteringComplexity" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none"></select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Copy Creation / Adaptation Complexity</label>
|
|
<select id="stage2CopyComplexity" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none"></select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Copy Approved by BCM?
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-56 z-10">If copy requires Amazon tweaking, it needs BCM approval.</span>
|
|
</label>
|
|
<select id="stage2BCM" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
<option value="yes">Yes</option>
|
|
<option value="no">No</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 3: Global Rollout -->
|
|
<div id="stage3Card" class="stage-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hidden">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-sm font-bold">3</span>
|
|
<h3 class="font-semibold">Global Rollout Invitation</h3>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer stage-toggle" data-stage="2">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-brand-300 dark:peer-focus:ring-brand-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-600"></div>
|
|
</label>
|
|
</div>
|
|
<div class="stage-fields">
|
|
<div class="sm:w-1/2">
|
|
<label class="block text-sm font-medium mb-1">Rollout Days</label>
|
|
<input type="number" id="stage3RolloutDays" min="1" max="10" value="3" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 4 & 5: Translation -->
|
|
<div id="stage45Card" class="stage-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hidden">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-sm font-bold">4/5</span>
|
|
<h3 class="font-semibold">Translation (Salsify PDP & Asset)</h3>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer stage-toggle" data-stage="3_4">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-brand-300 dark:peer-focus:ring-brand-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-600"></div>
|
|
</label>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-4 -mt-2">Stages 4 and 5 run in parallel - enter details once for both.</p>
|
|
<div class="stage-fields grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Estimated Word Count
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-56 z-10">Most translation projects are within 2,000 words. Check with TM if you are not certain.</span>
|
|
</label>
|
|
<select id="stage45WordCount" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none"></select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Rounds of Translation
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-48 z-10">Based on experience, it takes 1-2 rounds for copy review.</span>
|
|
</label>
|
|
<input type="number" id="stage45RevisionRounds" min="0" max="4" step="0.1" value="1" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Market Approval Days
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-56 z-10">Based on experience, it takes around 5 working days for Market to provide feedback.</span>
|
|
</label>
|
|
<input type="number" id="stage45MarketApproval" min="0" max="15" step="0.1" value="5" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Revision Days (per round)
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-48 z-10">Based on experience, it takes 2 days for revision.</span>
|
|
</label>
|
|
<input type="number" id="stage45RevisionDays" min="0" max="5" step="0.1" value="1" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 6: Production -->
|
|
<div id="stage6Card" class="stage-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hidden">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-sm font-bold">6</span>
|
|
<h3 class="font-semibold">Production</h3>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer stage-toggle" data-stage="5">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-brand-300 dark:peer-focus:ring-brand-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-600"></div>
|
|
</label>
|
|
</div>
|
|
<div class="stage-fields grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Asset Complexity
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-64 z-10">Defined based on Brief/Project Type. Update based on actual complexity.</span>
|
|
</label>
|
|
<select id="stage6Complexity" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none"></select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Estimated No. of Assets
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-64 z-10">Asset count is key for Production and Opera Upload timelines.</span>
|
|
</label>
|
|
<select id="stage6AssetVolume" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none"></select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Production Base Days</label>
|
|
<div id="stage6BaseDays" class="rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50 px-3 py-2 text-sm font-semibold text-brand-600 dark:text-brand-400">--</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Rounds of Revision
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-64 z-10">Simple=1, Complex=2, Creation=4. Reduce rounds if deadline is tight.</span>
|
|
</label>
|
|
<input type="number" id="stage6RevisionRounds" min="0" max="6" step="0.1" value="0" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Market Approval Days
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-56 z-10">Based on experience, 2-3 working days for market feedback.</span>
|
|
</label>
|
|
<input type="number" id="stage6MarketApproval" min="0" max="10" step="0.1" value="3" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Revision Days (per round)
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-48 z-10">Based on experience, 2 days per revision.</span>
|
|
</label>
|
|
<input type="number" id="stage6RevisionDays" min="0" max="5" step="0.1" value="2" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none">
|
|
</div>
|
|
<input type="hidden" id="stage6SpeedUp" value="0">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 7: Opera Upload (Always Active) -->
|
|
<div id="stage7Card" class="stage-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hidden">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-sm font-bold">7</span>
|
|
<h3 class="font-semibold">Opera Upload</h3>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300">Required</span>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-not-allowed opacity-50">
|
|
<input type="checkbox" class="sr-only peer stage-toggle" data-stage="6" checked disabled>
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-brand-300 dark:peer-focus:ring-brand-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-600"></div>
|
|
</label>
|
|
</div>
|
|
<div class="stage-fields">
|
|
<div class="sm:w-1/2">
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Opera Upload Days
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-56 z-10">Days depend on asset count. Auto-calculated from Production asset volume.</span>
|
|
</label>
|
|
<div id="stage7Days" class="rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50 px-3 py-2 text-sm font-semibold text-brand-600 dark:text-brand-400">--</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 8: Syndication -->
|
|
<div id="stage8Card" class="stage-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hidden">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 text-sm font-bold">8</span>
|
|
<h3 class="font-semibold">Syndication</h3>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer stage-toggle" data-stage="7">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-brand-300 dark:peer-focus:ring-brand-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-600"></div>
|
|
</label>
|
|
</div>
|
|
<div class="stage-fields grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Syndication Type
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-64 z-10">Salsify Prep Only = 4d, Syndication PDP = 5d, Syndication Non-PDP = 3d.</span>
|
|
</label>
|
|
<select id="stage8SyndicationType" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none"></select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Syndication Base Days</label>
|
|
<div id="stage8BaseDays" class="rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50 px-3 py-2 text-sm font-semibold text-brand-600 dark:text-brand-400">--</div>
|
|
</div>
|
|
</div>
|
|
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400 italic">Assumes 2-week lead time between syndication and Live Date.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between mt-4">
|
|
<button onclick="goToStep(1)" class="px-6 py-2.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg font-medium text-sm transition-colors">← Back</button>
|
|
<button onclick="goToStep(3)" class="px-6 py-2.5 bg-brand-600 hover:bg-brand-700 text-white rounded-lg font-medium text-sm transition-colors">Next: Enter Dates →</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Step 3: Dates -->
|
|
<section id="step3" class="step-content hidden fade-in">
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
|
<h2 class="text-xl font-bold mb-1">Step 3 - Enter Project Dates</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Enter the essential project information to calculate the SLA timeline.</p>
|
|
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div class="sm:col-span-2 lg:col-span-3">
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Brief Name
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-48 z-10">Enter the Brief name from OMG.</span>
|
|
</label>
|
|
<input type="text" id="briefName" placeholder="e.g. MULTI_franchise_Biotherm_Digitalvisibility_assets" 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 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Project Kick-Off Date
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-64 z-10">When the project can be kicked off from the 1st required stage. Consider project creation time and studio capacity.</span>
|
|
</label>
|
|
<input type="date" id="kickOffDate" 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 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
|
|
Required Go-Live Date
|
|
<span class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-xs cursor-help">i</span>
|
|
<span class="tooltip-content hidden absolute bottom-full left-0 mb-1 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg shadow-lg w-64 z-10">For Push projects: when content needs to be syndicated. For Pull projects: when content needs to be uploaded to Opera.</span>
|
|
</label>
|
|
<input type="date" id="goLiveDate" 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 outline-none">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between mt-4">
|
|
<button onclick="goToStep(2)" class="px-6 py-2.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg font-medium text-sm transition-colors">← Back</button>
|
|
<button onclick="goToStep(4)" id="btnStep3Next" class="px-6 py-2.5 bg-brand-600 hover:bg-brand-700 text-white rounded-lg font-medium text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>Calculate SLA →</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Step 4: Results -->
|
|
<section id="step4" class="step-content hidden fade-in">
|
|
<div id="resultsContainer">
|
|
<!-- Verdict Banner -->
|
|
<div id="verdictBanner" class="rounded-xl shadow-sm border p-6 mb-4">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<p class="text-sm font-medium opacity-75 mb-1">Your Brief</p>
|
|
<h2 id="verdictBriefName" class="text-xl font-bold mb-1">--</h2>
|
|
<p id="verdictMessage" class="text-sm font-medium"></p>
|
|
</div>
|
|
<div id="verdictBadge" class="text-5xl font-black"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Dates Summary -->
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-4">
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Kick-Off Date</p>
|
|
<p id="resultKickOff" class="text-lg font-bold">--</p>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Required Go-Live Date</p>
|
|
<p id="resultGoLive" class="text-lg font-bold">--</p>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Planned End Date (SLA)</p>
|
|
<p id="resultEndDate" class="text-lg font-bold">--</p>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Suggested Go-Live (SLA)</p>
|
|
<p id="resultSuggestedGoLive" class="text-lg font-bold">--</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PM Instruction -->
|
|
<div id="pmInstruction" class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-4 mb-4 text-sm text-blue-800 dark:text-blue-300"></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">Assumes 2-week lead time between syndication and Live Date.</p>
|
|
<p class="text-sm font-semibold text-amber-700 dark:text-amber-300 mt-1">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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Toggle -->
|
|
<div class="flex gap-1 mb-4 no-print bg-gray-100 dark:bg-gray-700/50 p-1 rounded-lg w-fit">
|
|
<button onclick="setView('list')" id="btnViewList" class="px-4 py-2 rounded-md font-medium text-sm transition-colors bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm">
|
|
<span class="flex items-center gap-1.5"><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="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg> List</span>
|
|
</button>
|
|
<button onclick="setView('gantt')" id="btnViewGantt" class="px-4 py-2 rounded-md font-medium text-sm transition-colors text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
|
|
<span class="flex items-center gap-1.5"><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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg> Gantt</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Gantt View -->
|
|
<div id="ganttView" class="hidden bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-4">
|
|
<div class="flex justify-end mb-3 no-print">
|
|
<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>
|
|
|
|
<!-- List View -->
|
|
<div id="listView">
|
|
<!-- Key Dates Table -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-4">
|
|
<h3 class="font-bold mb-4">Key Dates</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b border-gray-200 dark:border-gray-700">
|
|
<th class="text-left py-2 pr-3 font-semibold">Stage</th>
|
|
<th class="text-center py-2 px-2 font-semibold">Active</th>
|
|
<th class="text-center py-2 px-2 font-semibold">Stage Kick-Off</th>
|
|
<th class="text-center py-2 px-2 font-semibold">WIP 1 To Approval</th>
|
|
<th class="text-center py-2 px-2 font-semibold">Receive Feedback By</th>
|
|
<th class="text-center py-2 px-2 font-semibold">Rounds</th>
|
|
<th class="text-center py-2 pl-2 font-semibold">Stage Complete By</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="keyDatesTable"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calculation Breakdown Table -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-4">
|
|
<h3 class="font-bold mb-4">Calculation of Days</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b border-gray-200 dark:border-gray-700">
|
|
<th class="text-left py-2 pr-3 font-semibold">Stage</th>
|
|
<th class="text-center py-2 px-2 font-semibold">Active</th>
|
|
|
|
<th class="text-center py-2 px-2 font-semibold">WIP 1</th>
|
|
<th class="text-center py-2 px-2 font-semibold">Feedback</th>
|
|
<th class="text-center py-2 px-2 font-semibold">Revisions</th>
|
|
<th class="text-center py-2 pl-2 font-semibold">Complete By</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="calculationTable"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-wrap justify-between gap-2 mt-4 no-print">
|
|
<button onclick="goToStep(3)" class="px-6 py-2.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-lg font-medium text-sm transition-colors">← Adjust Dates</button>
|
|
<div class="flex flex-wrap gap-2">
|
|
<button onclick="copyForEmail()" id="btnCopyEmail" class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-medium text-sm transition-colors flex items-center gap-2">
|
|
<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 onclick="exportICal()" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-sm transition-colors flex items-center gap-2">
|
|
<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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
|
Add to Calendar
|
|
</button>
|
|
<button onclick="exportCSV()" class="px-5 py-2.5 bg-gray-900 dark:bg-white dark:text-gray-900 hover:bg-gray-800 dark:hover:bg-gray-100 text-white rounded-lg font-medium text-sm transition-colors flex items-center gap-2">
|
|
<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="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>
|
|
Export to CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="mt-12 py-4 border-t border-gray-200 dark:border-gray-700 text-center text-xs text-gray-400 dark:text-gray-500 no-print">
|
|
SLA Calculator v1.0 · eCom Content Factory
|
|
</footer>
|
|
|
|
</div><!-- /appContainer -->
|
|
|
|
<script src="auth.js"></script>
|
|
<script src="script.js?v=2026042402"></script>
|
|
</body>
|
|
</html>
|