167c85bde5
Validation Improvements: - Subject Title: Automatically converts underscores to hyphens - Subject Title: Shows warning when underscores are detected - Spot Version: Always enforces 3-character length - Spot Version: Auto-pads with leading zeros (e.g., 1 → 001) - Both frontend (JavaScript) and backend (PHP) validation Smart Defaults: - Spot Version: Defaults to "001" - Duration: Defaults to "6" seconds - Users can change defaults as needed Applied to Both Versions: - v1 (public/) - Original version updated - v2 (public-v2/) - Tracking ID version updated Technical Implementation: - Real-time underscore detection and conversion - Auto-hide warning after 3 seconds - Input blur event for spot version padding - Form submit validation as final check - Server-side enforcement in API endpoints Testing: - ✅ Underscores converted: "TEST_FILE" → "TEST-FILE" - ✅ Spot version validated: "1" rejected, "001" accepted - ✅ Defaults working: spot=001, duration=6 Improves data consistency and user experience. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
415 lines
23 KiB
PHP
415 lines
23 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ferrero Communication Assets - Naming Convention Tool</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<h1>Ferrero</h1>
|
|
<p class="subtitle">Communication Assets - Naming Convention Tool</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
|
|
<!-- Naming Convention Reference -->
|
|
<section class="reference-section">
|
|
<h2>Naming Structure</h2>
|
|
<div class="naming-structure">
|
|
<div class="structure-item">
|
|
<span class="label">BRAND CODE</span>
|
|
<span class="chars">2-5 chars</span>
|
|
</div>
|
|
<div class="separator">_</div>
|
|
<div class="structure-item">
|
|
<span class="label">COUNTRY CODE</span>
|
|
<span class="chars">2 chars</span>
|
|
</div>
|
|
<div class="separator">_</div>
|
|
<div class="structure-item">
|
|
<span class="label">LANGUAGE CODE</span>
|
|
<span class="chars">2-3 chars</span>
|
|
</div>
|
|
<div class="separator">_</div>
|
|
<div class="structure-item">
|
|
<span class="label">SUBJECT TITLE</span>
|
|
<span class="chars">15 chars max</span>
|
|
</div>
|
|
<div class="separator">_</div>
|
|
<div class="structure-item">
|
|
<span class="label">ASSET TYPE</span>
|
|
<span class="chars">3 chars</span>
|
|
</div>
|
|
<div class="separator">_</div>
|
|
<div class="structure-item">
|
|
<span class="label">SPOT VERSION</span>
|
|
<span class="chars">3 chars*</span>
|
|
</div>
|
|
<div class="separator">_</div>
|
|
<div class="structure-item">
|
|
<span class="label">SECONDS</span>
|
|
<span class="chars">2-3 digits</span>
|
|
</div>
|
|
<div class="separator">_</div>
|
|
<div class="structure-item">
|
|
<span class="label">ASPECT RATIO</span>
|
|
<span class="chars">4 chars</span>
|
|
</div>
|
|
</div>
|
|
<p class="note">* Include 'MST' in the Spot Version name only if the asset contains a Master File. For alternate cuts, do not include any additional identifiers.</p>
|
|
</section>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<button class="tab-button active" data-tab="builder">Filename Builder</button>
|
|
<button class="tab-button" data-tab="decoder">Filename Decoder</button>
|
|
<button class="tab-button" data-tab="help">Help</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content">
|
|
|
|
<!-- Builder Tab -->
|
|
<div id="builder-tab" class="tab-pane active">
|
|
<div class="card">
|
|
<h3>Build a Filename</h3>
|
|
<form id="builder-form">
|
|
<div class="form-row single-row">
|
|
<div class="form-group">
|
|
<label for="omg-job-number">OMG Job No.*</label>
|
|
<input type="text" id="omg-job-number" maxlength="10" placeholder="e.g., 12345" required pattern="[0-9]*" title="Numbers only">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="brand-code">Brand Code*</label>
|
|
<select id="brand-code" required>
|
|
<option value="">Select brand...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="country-code">Country Code*</label>
|
|
<select id="country-code" required>
|
|
<option value="">Select country...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="language-code">Language Code*</label>
|
|
<select id="language-code" required>
|
|
<option value="">Select language...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subject-title">
|
|
Subject Title* (max 15 characters)
|
|
<span class="char-count-inline"><span id="title-count">0</span>/15</span>
|
|
</label>
|
|
<input type="text" id="subject-title" maxlength="15" placeholder="e.g., ME MOMENT" required>
|
|
<div id="underscore-warning" class="hidden" style="font-size: 0.85em; color: var(--error); margin-top: 5px;">
|
|
⚠ Underscores (_) are not allowed and will be converted to hyphens (-)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="asset-type">Asset Type*</label>
|
|
<select id="asset-type" required>
|
|
<option value="">Select asset type...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="spot-version">Spot Version</label>
|
|
<input type="text" id="spot-version" maxlength="3" minlength="3" placeholder="e.g., 001" value="001" pattern="[0-9A-Z]{3}" title="3 characters: numbers or uppercase letters">
|
|
</div>
|
|
|
|
<div class="form-group form-group-checkbox">
|
|
<label for="has-master">
|
|
<input type="checkbox" id="has-master">
|
|
Master File (MST)
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="seconds">Duration (sec)*</label>
|
|
<input type="number" id="seconds" min="1" max="999" placeholder="e.g., 6" value="6" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="aspect-ratio">Aspect Ratio*</label>
|
|
<select id="aspect-ratio" required>
|
|
<option value="">Select ratio...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Generate Filename</button>
|
|
</form>
|
|
|
|
<div id="result" class="result hidden">
|
|
<h4>Generated Filename:</h4>
|
|
<div class="filename-output">
|
|
<code id="generated-filename"></code>
|
|
<button id="copy-btn" class="btn btn-secondary">Copy</button>
|
|
</div>
|
|
<div id="copy-success" class="success-message hidden">Copied to clipboard!</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decoder Tab -->
|
|
<div id="decoder-tab" class="tab-pane">
|
|
<div class="card">
|
|
<h3>Decode a Filename</h3>
|
|
<form id="decoder-form">
|
|
<div class="form-group full-width">
|
|
<label for="filename-input">Filename</label>
|
|
<input type="text" id="filename-input" placeholder="e.g., RAF_GL_en_ME MOMENT_OLV_6S_1x1" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Decode Filename</button>
|
|
</form>
|
|
|
|
<div id="decode-result" class="decode-result hidden">
|
|
<h4>Decoded Components:</h4>
|
|
<div class="decode-grid">
|
|
<div class="decode-item">
|
|
<span class="decode-label">OMG Job Number:</span>
|
|
<span class="decode-value" id="decode-omg"></span>
|
|
</div>
|
|
<div class="decode-item">
|
|
<span class="decode-label">Brand Code:</span>
|
|
<span class="decode-value" id="decode-brand"></span>
|
|
</div>
|
|
<div class="decode-item">
|
|
<span class="decode-label">Country Code:</span>
|
|
<span class="decode-value" id="decode-country"></span>
|
|
</div>
|
|
<div class="decode-item">
|
|
<span class="decode-label">Language Code:</span>
|
|
<span class="decode-value" id="decode-language"></span>
|
|
</div>
|
|
<div class="decode-item">
|
|
<span class="decode-label">Subject Title:</span>
|
|
<span class="decode-value" id="decode-subject"></span>
|
|
</div>
|
|
<div class="decode-item">
|
|
<span class="decode-label">Asset Type:</span>
|
|
<span class="decode-value" id="decode-asset"></span>
|
|
</div>
|
|
<div class="decode-item">
|
|
<span class="decode-label">Spot Version:</span>
|
|
<span class="decode-value" id="decode-spot"></span>
|
|
</div>
|
|
<div class="decode-item">
|
|
<span class="decode-label">Master File:</span>
|
|
<span class="decode-value" id="decode-master"></span>
|
|
</div>
|
|
<div class="decode-item">
|
|
<span class="decode-label">Duration:</span>
|
|
<span class="decode-value" id="decode-seconds"></span>
|
|
</div>
|
|
<div class="decode-item">
|
|
<span class="decode-label">Aspect Ratio:</span>
|
|
<span class="decode-value" id="decode-ratio"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="decode-error" class="error-message hidden"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Tab -->
|
|
<div id="help-tab" class="tab-pane">
|
|
<div class="card">
|
|
<h3>Help & Documentation</h3>
|
|
|
|
<div class="help-section">
|
|
<h4>📋 Overview</h4>
|
|
<p>This tool helps you create and decode filenames for Ferrero communication assets according to the official naming convention. All filenames follow a standardized structure to ensure consistency across all brands and markets.</p>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h4>🏗️ Naming Structure</h4>
|
|
<p>Every filename consists of 8 components separated by underscores:</p>
|
|
<div class="help-formula">
|
|
<code>[BRAND]_[COUNTRY]_[LANGUAGE]_[SUBJECT]_[ASSET]_[VERSION]*_[DURATION]S_[RATIO]</code>
|
|
</div>
|
|
<p class="help-note">* Version and MST are optional</p>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h4>📖 Component Details</h4>
|
|
|
|
<div class="help-component">
|
|
<strong>1. Brand Code (2-5 characters)</strong>
|
|
<p>The abbreviated code for the Ferrero brand. Examples: RAF (Raffaello), NUT (Nutella), BUE (Kinder Bueno)</p>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>2. Country Code (2 characters)</strong>
|
|
<p>ISO 3166-1 two-letter code indicating the market. Examples: GL (Global), IT (Italy), DE (Germany), GB (United Kingdom), US (United States)</p>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>3. Language Code (2-3 characters)</strong>
|
|
<p>ISO 639-1/639-2 code indicating the language. Examples: en (English), it (Italian), de (German), es (Spanish), fr (French), zh (Chinese)</p>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>4. Subject Title (max 15 characters)</strong>
|
|
<p>Brief description of the asset content. Use UPPERCASE and keep it concise. Examples: ME MOMENT, CHRISTMAS MAGIC, SUMMER FUN</p>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>5. Asset Type (3 characters)</strong>
|
|
<p>Three-letter code for the type of asset. Examples:</p>
|
|
<ul>
|
|
<li><strong>OLV</strong> - Online Video</li>
|
|
<li><strong>TVC</strong> - TV Commercial</li>
|
|
<li><strong>PKI</strong> - Pack Images</li>
|
|
<li><strong>POS</strong> - Point of Sale Material</li>
|
|
<li><strong>LOG</strong> - Logo</li>
|
|
<li><strong>BBK</strong> - Brand Book</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>6. Spot Version (optional, 3 characters)</strong>
|
|
<p>Version identifier for the asset. Examples: 001, 002, V01. Leave blank if not applicable.</p>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>7. Master File Indicator (optional)</strong>
|
|
<p>Check the "Master File (MST)" box if this asset is a master file. This adds "_MST" to the filename. <strong>Only use for master files - do not use for alternate cuts.</strong></p>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>8. Duration (2-3 digits + S)</strong>
|
|
<p>Duration in seconds followed by "S". Examples: 6S, 15S, 30S, 120S</p>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>9. Aspect Ratio (3-4 characters)</strong>
|
|
<p>The dimensions of the asset. Common ratios:</p>
|
|
<ul>
|
|
<li><strong>16x9</strong> - Widescreen (standard video)</li>
|
|
<li><strong>1x1</strong> - Square (social media)</li>
|
|
<li><strong>9x16</strong> - Vertical (mobile/stories)</li>
|
|
<li><strong>4x5</strong> - Portrait (social media feeds)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h4>✅ Examples</h4>
|
|
<div class="help-examples">
|
|
<div class="help-example">
|
|
<code>RAF_GL_en_ME MOMENT_OLV_6S_1x1</code>
|
|
<p>Raffaello, Global, English, "Me Moment" campaign, Online Video, 6 seconds, square format</p>
|
|
</div>
|
|
<div class="help-example">
|
|
<code>KGS_IT_it_IN THE AIR_TVC_MST_20S_16x9</code>
|
|
<p>Kinder Gran Sorpresa, Italy, Italian, "In The Air" campaign, TV Commercial, Master File, 20 seconds, widescreen</p>
|
|
</div>
|
|
<div class="help-example">
|
|
<code>NUT_DE_de_BREAKFAST_PKI_001_15S_4x5</code>
|
|
<p>Nutella, Germany, German, "Breakfast" campaign, Pack Images, version 001, 15 seconds, portrait format</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h4>🔧 Using This Tool</h4>
|
|
|
|
<div class="help-component">
|
|
<strong>Filename Builder</strong>
|
|
<p>Fill in all required fields (*) to generate a properly formatted filename. The tool will validate your input and create the filename following the naming convention.</p>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>Filename Decoder</strong>
|
|
<p>Paste an existing filename to break it down into its components. This is helpful for understanding filenames you receive or verifying correct formatting.</p>
|
|
</div>
|
|
|
|
<div class="help-component">
|
|
<strong>Examples</strong>
|
|
<p>View real-world examples with detailed breakdowns of each component.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h4>💡 Tips & Best Practices</h4>
|
|
<ul class="help-tips">
|
|
<li>Always use UPPERCASE for Subject Titles</li>
|
|
<li>Keep Subject Titles concise and descriptive (max 15 characters)</li>
|
|
<li>Country codes use <strong>ISO 3166-1</strong> standard (e.g., IT, DE, GB, US)</li>
|
|
<li>Language codes use <strong>ISO 639-1</strong> standard (lowercase: en, it, de, es, fr)</li>
|
|
<li>Use GL (Global) + en (English) for international assets</li>
|
|
<li>Match language code to the actual content language, not market language</li>
|
|
<li>Only include MST for master files, not for alternate cuts</li>
|
|
<li>Ensure the aspect ratio matches the actual asset dimensions</li>
|
|
<li>Be consistent with spot versions across related assets</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="help-section">
|
|
<h4>❓ Common Questions</h4>
|
|
|
|
<div class="help-faq">
|
|
<strong>Q: What if my Subject Title is longer than 15 characters?</strong>
|
|
<p>A: Use abbreviations or shorter words. For example: "CHRISTMAS CELEBRATION" could become "XMAS CELEBRTN" or "XMAS PARTY".</p>
|
|
</div>
|
|
|
|
<div class="help-faq">
|
|
<strong>Q: When should I use the Spot Version field?</strong>
|
|
<p>A: Use it when you have multiple versions of the same asset (e.g., 001, 002, 003) or different creative versions (V01, V02).</p>
|
|
</div>
|
|
|
|
<div class="help-faq">
|
|
<strong>Q: What's the difference between MST and regular versions?</strong>
|
|
<p>A: MST (Master) indicates the master file that contains all elements. Regular versions are alternate cuts or edits derived from the master.</p>
|
|
</div>
|
|
|
|
<div class="help-faq">
|
|
<strong>Q: What's the difference between Country Code and Language Code?</strong>
|
|
<p>A: Country Code indicates the market (e.g., IT for Italy, DE for Germany), while Language Code indicates the content language (e.g., it for Italian, de for German). An asset for the German market in English would be: DE_en.</p>
|
|
</div>
|
|
|
|
<div class="help-faq">
|
|
<strong>Q: Which language code should I use for a multi-language asset?</strong>
|
|
<p>A: Use the primary/dominant language of the asset. If truly language-neutral (e.g., instrumental music video), use the market's primary language or "en" for global content.</p>
|
|
</div>
|
|
|
|
<div class="help-faq">
|
|
<strong>Q: What if I need a language not in the dropdown?</strong>
|
|
<p>A: Contact your system administrator to add additional ISO 639-1 language codes to the database.</p>
|
|
</div>
|
|
|
|
<div class="help-faq">
|
|
<strong>Q: Can I add new brands, countries, or asset types?</strong>
|
|
<p>A: Contact your system administrator to add new codes to the database.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>© Ferrero. All rights reserved.</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|