Oliver/loreal-sla-calculator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update brief type descriptions, add disclaimer, decimal inputs, extend asset brackets

Browse source 
- Add non-contractual dates disclaimer banner at top of page
- Allow decimal values (0.1 step) in revision and approval fields
- Make Opera Upload mandatory for all brief types
- Remove Speed Up by % slider from Production stage
- Extend asset volume brackets: 100-200, 200-300, 300-400
- Update all 9 brief type descriptions with client scope definitions
- Render brief descriptions as bullet lists for clarity

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Alessandro Benedetti Admin 2026-03-12 17:43:48 +00:00
parent e8c708f6eb
commit 0c85cb4319
3 changed files with 91 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
config.json
View file

@ -14,55 +14,92 @@
"id": "country_pull_adaptation",
"label": "Country Pull - Adaptation",
"projectType": "Country Pull - Adaptation",
"description": "Global Pull projects refer to assets requested by countries for creation or adaptation. It will go through Production and Opera Upload. It sometimes goes through Copy Creation, Translation, or Syndication."
"description": [
"Entails moderate tasks like integrating new elements or local customisation",
"Applies to motion content",
"Master Content Exists"
]
},
{
"id": "country_pull_creation",
"label": "Country Pull - Creation",
"projectType": "Country Pull - Creation",
"description": "Global Pull projects for asset creation from scratch, requiring full production pipeline."
"description": [
"Creation of a new KV & Visual ID",
"Applies to motion content"
]
},
{
"id": "country_pull_simple",
"label": "Country Pull - Simple",
"projectType": "Country Pull - Simple",
"description": "Simple Pull projects with minimal stages - typically Translation, Production, and Opera Upload."
"description": [
"Resizing / Cropping & Translation Only",
"Involves straightforward tasks such as adjusting sizes or making language translations",
"Does not apply to motion content"
]
},
{
"id": "country_retailer_request",
"label": "Country Retailer Request",
"projectType": "Country Retailer Request",
"description": "Retailer request is for Syndication only. It sometimes may request simple production (e.g., resize before syndication)."
"description": [
"Syndication requests ONLY that do not need production"
]
},
{
"id": "global_push_eventing",
"label": "Global Push - Eventing",
"projectType": "Global Push - Eventing",
"description": "Global Push projects refer to taking DMI assets, cleaning up the master, extracting copy for Amazon tweaking, and rolling out to countries. Runs through Mastering, Global Rollout, and Opera Upload."
"description": [
"ECF ONLY",
"This brief type is for Brand Content Managers (ECF/DEC)",
"Refers to a Global Eventing request to be rolled out to the markets"
]
},
{
"id": "global_push_pdp",
"label": "Global Push - PDP",
"projectType": "Global Push - PDP",
"description": "Global Push PDP projects for product detail page content rollout to markets."
"description": [
"ECF ONLY",
"This brief type is for Brand Content Managers (ECF/DEC)",
"Refers to a Global Push PDP request to be rolled out to the markets"
]
},
{
"id": "local_push_eventing",
"label": "Local Push - Eventing",
"projectType": "Local Push - Eventing",
"description": "Local Push projects from the moment a local market accepts the Global Push campaign and submits a Brief. Goes through Translation, Production, Opera Upload, and Syndication."
"description": [
"Market ONLY",
"This brief type is for markets",
"Refers to a Global Eventing request to be rolled out to the market"
]
},
{
"id": "local_push_pdp",
"label": "Local Push - PDP",
"projectType": "Local Push - PDP",
"description": "Local Push PDP projects for localised product detail page content."
"description": [
"Market ONLY",
"This brief type is for markets",
"Refers to a Global Push PDP request to be rolled out to the market"
]
},
{
"id": "urgent_brief",
"label": "Urgent Brief",
"projectType": "Urgent Brief",
"description": "24hr/48hr turnaround job for Simple Adaptation - Eventing Pull request only, up to 10 simple visual adaptations with changes to existing assets."
"description": [
"Please only submit as URGENT if conditions apply:",
"1 urgent brief at a time per brand and market",
"Eventing PULL requests only",
"Up to 10 simple visuals",
"Only for changing existing assets (e.g. price, promo updates, resizing)",
"Excludes: Complex Adaptations & Creations, & any other formats",
"The DEC team will be responsible for reviewing and determining whether a request qualifies as urgent"
]
}
],
@ -81,7 +118,7 @@
"country_pull_adaptation": [false, true, false, true, true, true, true, false],
"country_pull_creation": [false, true, false, true, true, true, true, false],
"country_pull_simple": [false, false, false, true, true, true, true, false],
"country_retailer_request": [false, false, false, false, false, false, false, true],
"country_retailer_request": [false, false, false, false, false, false, true, true],
"global_push_eventing": [false, true, true, false, false, false, true, false],
"global_push_pdp": [false, true, true, false, false, false, true, false],
"local_push_eventing": [false, false, false, false, true, true, true, true],
@ -238,7 +275,10 @@
"options": [
{ "value": "0_30", "label": "0 - 30 Assets", "impactPercent": 0 },
{ "value": "30_50", "label": "30 - 50 Assets", "impactPercent": 75 },
{ "value": "50_100", "label": "50 - 100 Assets", "impactPercent": 150 }
{ "value": "50_100", "label": "50 - 100 Assets", "impactPercent": 150 },
{ "value": "100_200", "label": "100 - 200 Assets", "impactPercent": 250 },
{ "value": "200_300", "label": "200 - 300 Assets", "impactPercent": 350 },
{ "value": "300_400", "label": "300 - 400 Assets", "impactPercent": 450 }
],
"default": "0_30"
},
@ -247,15 +287,27 @@
"simple_0_30": 4,
"simple_30_50": 7,
"simple_50_100": 10,
"simple_100_200": 14,
"simple_200_300": 18,
"simple_300_400": 22,
"complex_0_30": 5,
"complex_30_50": 9,
"complex_50_100": 13,
"complex_100_200": 18,
"complex_200_300": 23,
"complex_300_400": 28,
"creation_0_30": 6,
"creation_30_50": 11,
"creation_50_100": 15,
"creation_100_200": 21,
"creation_200_300": 27,
"creation_300_400": 33,
"bespoke_0_30": 10,
"bespoke_30_50": 18,
"bespoke_50_100": 25
"bespoke_50_100": 25,
"bespoke_100_200": 35,
"bespoke_200_300": 45,
"bespoke_300_400": 55
},
"defaultRevisionRounds": {
"_comment": "Suggested revision rounds by complexity level",
@ -302,7 +354,10 @@
"daysByAssetVolume": {
"0_30": 1,
"30_50": 1,
"50_100": 2
"50_100": 2,
"100_200": 3,
"200_300": 4,
"300_400": 5
},
"defaultDays": 1
},

36
index.html
View file

@ -231,6 +231,12 @@
<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">
@ -334,7 +340,7 @@
<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" 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">
<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">
@ -342,7 +348,7 @@
<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" 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">
<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">
@ -350,7 +356,7 @@
<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" 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">
<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>
@ -438,7 +444,7 @@
<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" 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">
<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">
@ -446,7 +452,7 @@
<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" 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">
<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">
@ -454,7 +460,7 @@
<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" 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">
<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>
@ -498,7 +504,7 @@
<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" 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">
<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">
@ -506,7 +512,7 @@
<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" 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">
<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">
@ -514,19 +520,9 @@
<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" 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 class="sm:col-span-2">
<label class="block text-sm font-medium mb-1 tooltip-trigger relative">
Speed Up by %
<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">Reduce production WIP days by this percentage. 0 = no speedup, 50 = halve the days.</span>
</label>
<div class="flex items-center gap-3">
<input type="range" id="stage6SpeedUp" min="0" max="80" step="5" value="0" class="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer">
<span id="stage6SpeedUpLabel" class="text-sm font-semibold w-12 text-right">0%</span>
</div>
<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>

14
script.js
View file

@ -214,11 +214,6 @@ function bindEvents() {
});
});
// Speed up slider
document.getElementById('stage6SpeedUp').addEventListener('input', (e) => {
document.getElementById('stage6SpeedUpLabel').textContent = e.target.value + '%';
});
// Syndication complexity/EAN change -> update base days
['stage8Complexity', 'stage8EanVolume'].forEach(id => {
document.getElementById(id).addEventListener('change', updateSyndicationBaseDays);
@ -243,7 +238,12 @@ function onBriefTypeChange() {
// Description
const descEl = document.getElementById('briefDescription');
descEl.textContent = bt.description;
if (Array.isArray(bt.description)) {
descEl.innerHTML = '<ul class="list-disc list-inside space-y-1">' +
bt.description.map(item => `<li>${item}</li>`).join('') + '</ul>';
} else {
descEl.textContent = bt.description;
}
descEl.classList.remove('hidden');
// Stage matrix
@ -622,7 +622,7 @@ function calcGenericStage(stageIndex, isActive, prevDate, getParams) {
function intVal(id) {
const el = document.getElementById(id);
return el ? parseInt(el.value) || 0 : 0;
return el ? parseFloat(el.value) || 0 : 0;
}
// ---- Render Results ----