Apply Ferrero branding and improve Debug View UI
Branding Updates: - Applied Ferrero brown (#431b06) throughout app (replaced all blues) - Darker brown (#6b2d10) for gradients and hover states - Added Montserrat font family across entire application - Updated header gradient to Ferrero brown tones - Font weights: 300 (light), 400 (regular), 500 (medium), 600 (semi-bold), 700 (bold) Debug View Improvements: - Added Reset/Clear Results button for easy cleanup - Added "How to use" instructions box with step-by-step guide - Improved button labels with icons (📂 for folders) - Enhanced visual hierarchy with Ferrero brown accents - Better spacing and readability Color Changes: - Primary color: #431b06 (Ferrero brown) - Hover/gradient: #6b2d10 (darker brown) - Accent backgrounds: #fff9f5 (light brown tint) - All buttons use Montserrat font with proper weights - Active tab now uses Ferrero brown with increased weight UI Enhancements: - Clear folder navigation instructions - Reset button appears when results are loaded - Consistent Ferrero branding throughout - Professional, clean Montserrat typography - Improved visual feedback with brown accents 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DJP
parent
169d84dd4e
commit
52b919affe
1 changed files with 61 additions and 28 deletions
|
|
@ -1851,12 +1851,15 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Content Scaling Workflow V3</title>
|
||||
<title>Ferrero Content Scaling Workflow</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -1871,14 +1874,21 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, #431b06 0%, #6b2d10 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 { margin-bottom: 10px; }
|
||||
.header p { opacity: 0.9; }
|
||||
.header h1 {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.header p {
|
||||
opacity: 0.9;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.env-info {
|
||||
background: rgba(255,255,255,0.2);
|
||||
|
|
@ -1911,8 +1921,9 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
|
||||
.tab.active {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border-bottom: 3px solid #667eea;
|
||||
color: #431b06;
|
||||
border-bottom: 3px solid #431b06;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
|
|
@ -1959,11 +1970,13 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
background: #431b06;
|
||||
color: white;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-primary:hover { background: #5568d3; }
|
||||
.btn-primary:hover { background: #6b2d10; }
|
||||
|
||||
.btn-success {
|
||||
background: #28a745;
|
||||
|
|
@ -1999,8 +2012,8 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
}
|
||||
|
||||
.campaign-card:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||
border-color: #431b06;
|
||||
box-shadow: 0 4px 12px rgba(67, 27, 6, 0.2);
|
||||
}
|
||||
|
||||
.campaign-card.selected {
|
||||
|
|
@ -2302,7 +2315,7 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
<small><strong>Asset ID:</strong> <code><?= htmlspecialchars($results['selected_campaign']['asset_id']) ?></code></small>
|
||||
<br>
|
||||
<a href="debug_assets.php?action=get_folders&campaign_id=<?= urlencode($results['selected_campaign']['asset_id']) ?>"
|
||||
target="_blank" style="color: #667eea; font-size: 12px;">
|
||||
target="_blank" style="color: #431b06; font-size: 12px;">
|
||||
🔍 Debug folder structure for this campaign
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -2380,7 +2393,7 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
<div style="font-size: 13px;">
|
||||
<!-- Basic Info -->
|
||||
<?php if (isset($metadata['basic'])): ?>
|
||||
<div style="background: white; padding: 12px; margin: 8px 0; border-radius: 4px; border-left: 4px solid #667eea;">
|
||||
<div style="background: white; padding: 12px; margin: 8px 0; border-radius: 4px; border-left: 4px solid #431b06;">
|
||||
<strong>📋 Basic Info:</strong><br>
|
||||
<div style="margin-top: 8px; display: grid; grid-template-columns: 150px 1fr; gap: 5px;">
|
||||
<?php foreach ($metadata['basic'] as $key => $value): ?>
|
||||
|
|
@ -2976,7 +2989,7 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
</label>
|
||||
<input type="file" name="upload_files[]" multiple
|
||||
accept=".jpg,.jpeg,.png,.gif,.pdf,.ai,.psd,.eps,.tif,.tiff,.mov,.mp4,.avi,.zip,.txt,.doc,.docx,.xls,.xlsx"
|
||||
style="padding: 10px; border: 2px dashed #667eea; border-radius: 6px; width: 100%; background: white;">
|
||||
style="padding: 10px; border: 2px dashed #431b06; border-radius: 6px; width: 100%; background: white;">
|
||||
<p style="font-size: 13px; color: #666; margin-top: 10px;">
|
||||
Accepted formats: Images (JPG, PNG, GIF, TIFF), Documents (PDF, AI, PSD, EPS), Video (MOV, MP4, AVI), Archives (ZIP), Office (DOC, XLS, TXT)
|
||||
</p>
|
||||
|
|
@ -3233,7 +3246,7 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
<div style="font-size: 13px;">
|
||||
<!-- Same metadata display as download tab -->
|
||||
<?php if (isset($metadata['basic'])): ?>
|
||||
<div style="background: white; padding: 12px; margin: 8px 0; border-radius: 4px; border-left: 4px solid #667eea;">
|
||||
<div style="background: white; padding: 12px; margin: 8px 0; border-radius: 4px; border-left: 4px solid #431b06;">
|
||||
<strong>📋 Basic Info:</strong><br>
|
||||
<div style="margin-top: 8px; display: grid; grid-template-columns: 150px 1fr; gap: 5px;">
|
||||
<?php foreach ($metadata['basic'] as $key => $value): ?>
|
||||
|
|
@ -3416,7 +3429,7 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
<small><strong>Type:</strong> Global Masters</small>
|
||||
<br>
|
||||
<a href="debug_assets.php?action=get_folders&campaign_id=<?= urlencode($results['selected_campaign_b1']['asset_id']) ?>"
|
||||
target="_blank" style="color: #667eea; font-size: 12px;">
|
||||
target="_blank" style="color: #431b06; font-size: 12px;">
|
||||
🔍 Debug folder structure for this campaign
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -3530,19 +3543,29 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
<!-- Debug View Tab -->
|
||||
<div id="tab-debug-view" class="tab-content <?= $currentTab === 'debug-view' ? 'active' : '' ?>">
|
||||
<h2>🔧 Debug View</h2>
|
||||
<p style="color: #666; margin: 10px 0 20px 0;">
|
||||
Campaign status management and folder inspection tools
|
||||
<p style="color: #666; margin: 10px 0 20px 0; font-weight: 300;">
|
||||
Campaign status management and folder inspection tools for testing workflows
|
||||
</p>
|
||||
|
||||
<!-- Section 1: Campaign Status Management -->
|
||||
<div style="background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||
<h3 style="margin-top: 0;">📋 Campaign Status Management</h3>
|
||||
<h3 style="margin-top: 0; color: #431b06; font-weight: 600;">📋 Campaign Status Management</h3>
|
||||
|
||||
<form method="POST" style="margin-bottom: 20px;">
|
||||
<input type="hidden" name="tab" value="debug-view">
|
||||
<input type="hidden" name="action" value="load_all_campaigns_debug">
|
||||
<button type="submit" class="btn btn-primary">Load All Campaigns (All Statuses)</button>
|
||||
</form>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<form method="POST" style="display: inline-block; margin-right: 10px;">
|
||||
<input type="hidden" name="tab" value="debug-view">
|
||||
<input type="hidden" name="action" value="load_all_campaigns_debug">
|
||||
<button type="submit" class="btn btn-primary">Load All Campaigns (All Statuses)</button>
|
||||
</form>
|
||||
|
||||
<?php if (isset($results['debug_all_campaigns']) || isset($results['debug_folder_contents'])): ?>
|
||||
<form method="POST" style="display: inline-block;">
|
||||
<input type="hidden" name="tab" value="debug-view">
|
||||
<input type="hidden" name="clear_results" value="1">
|
||||
<button type="submit" class="btn btn-secondary">🗑️ Reset / Clear Results</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if (isset($results['debug_all_campaigns'])): ?>
|
||||
<div class="alert alert-info">
|
||||
|
|
@ -3636,20 +3659,30 @@ $envInfo = $configV3->getEnvironmentInfo();
|
|||
|
||||
<!-- Section 2: Folder Viewer -->
|
||||
<div style="background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||
<h3 style="margin-top: 0;">📁 Folder Viewer</h3>
|
||||
<p style="color: #666; font-size: 14px;">View contents of Master Assets and Final Assets folders with metadata</p>
|
||||
<h3 style="margin-top: 0; color: #431b06; font-weight: 600;">📁 Folder Viewer</h3>
|
||||
<p style="color: #666; font-size: 14px; font-weight: 300;">View contents of Master Assets and Final Assets folders with campaign metadata</p>
|
||||
|
||||
<div style="margin-bottom: 20px; padding: 15px; background: #fff9f5; border-radius: 4px; border-left: 4px solid #431b06;">
|
||||
<p style="font-size: 14px; margin-bottom: 10px;"><strong>How to use:</strong></p>
|
||||
<ol style="margin-left: 20px; font-size: 13px; color: #666;">
|
||||
<li style="margin-bottom: 5px;">Click either "View Master Assets" or "View Final Assets" to see all campaign folders</li>
|
||||
<li style="margin-bottom: 5px;">Campaign folders will show their Campaign ID and Status</li>
|
||||
<li style="margin-bottom: 5px;">Click "View Contents" on any folder to drill down into subfolders and assets</li>
|
||||
<li>Navigate through the folder hierarchy to inspect asset structure</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
<form method="POST" style="display: inline-block; margin-right: 10px;">
|
||||
<input type="hidden" name="tab" value="debug-view">
|
||||
<input type="hidden" name="action" value="view_master_assets_folder">
|
||||
<button type="submit" class="btn btn-secondary">View Master Assets Folders</button>
|
||||
<button type="submit" class="btn btn-secondary">📂 View Master Assets (01. Master Assets)</button>
|
||||
</form>
|
||||
|
||||
<form method="POST" style="display: inline-block;">
|
||||
<input type="hidden" name="tab" value="debug-view">
|
||||
<input type="hidden" name="action" value="view_final_assets_folder">
|
||||
<button type="submit" class="btn btn-secondary">View Final Assets Folders</button>
|
||||
<button type="submit" class="btn btn-secondary">📂 View Final Assets (01. Final Assets)</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue