bc05da3314
Major Features: - Complete Naming Convention editor in Admin Panel - Define custom filename patterns for platform detection - Define custom filename patterns for aspect ratio detection - Patterns saved to naming_conventions.json (editable) - Test pattern functionality built-in - Auto-loads patterns from JSON on server startup - Factory reset now restores original patterns too UI Changes: - Remove L'Oréal references from app (now generic tool) - Changed title to "Social Media Platform Optimization Tool" - Renamed "Reload from Server" to "Refresh Display" - Added "Reset to Factory Defaults" button (red, double-confirm) - New Naming Conventions section in admin panel - Pattern editor with add/remove functionality Backend Enhancements: - Save/load naming conventions to JSON - GET /api/admin/naming-conventions (retrieve patterns) - POST /api/admin/naming-conventions (save patterns) - Factory defaults for patterns stored at startup - Patterns persist across server restarts - Detection logic now uses editable patterns Naming Convention Features: - Platform patterns: Map platform key to filename patterns - Aspect ratio patterns: Map ratio to filename patterns - Multiple patterns per platform/ratio supported - Test functionality to verify detection - Immediate application to main app Example patterns: - TikTok: _tiktok_, _tt_ - 16:9: _16x9_, _landscape_ - Meta: _meta_, _fb_, _ig_ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
163 lines
7.6 KiB
HTML
163 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Panel - Video Optimizer</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@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="admin.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<h1>Admin Panel</h1>
|
|
<p class="subtitle">Platform Specifications Management</p>
|
|
<div class="header-actions">
|
|
<a href="index.html" class="btn-link">← Back to App</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Metrics Overview -->
|
|
<section class="metrics-section">
|
|
<h2>Current Metrics</h2>
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="totalPlatforms">0</div>
|
|
<div class="metric-label">Total Platforms</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="totalFormats">0</div>
|
|
<div class="metric-label">Total Configurations</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="totalCodecs">0</div>
|
|
<div class="metric-label">Unique Codecs</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="totalAspectRatios">0</div>
|
|
<div class="metric-label">Aspect Ratios</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Actions Bar -->
|
|
<section class="actions-bar">
|
|
<button class="btn-primary" id="addPlatformBtn">+ Add New Platform</button>
|
|
<button class="btn-secondary" id="exportBtn">Export Specs (JSON)</button>
|
|
<button class="btn-secondary" id="importBtn">Import Specs (JSON)</button>
|
|
<input type="file" id="importFile" accept=".json" hidden>
|
|
<button class="btn-secondary" id="reloadBtn">Refresh Display</button>
|
|
<button class="btn-secondary btn-danger" id="resetFactoryBtn">⚠️ Reset to Factory Defaults</button>
|
|
</section>
|
|
|
|
<!-- Platforms Table -->
|
|
<section class="platforms-section">
|
|
<h2>Platform Specifications</h2>
|
|
<div id="platformsList">
|
|
<!-- Platforms will be dynamically loaded here -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Naming Conventions Section -->
|
|
<section class="naming-section">
|
|
<h2>Naming Conventions</h2>
|
|
<p class="section-description">Define filename patterns for automatic platform and aspect ratio detection. Use regular expressions or simple text patterns.</p>
|
|
|
|
<div class="naming-grid">
|
|
<!-- Platform Patterns -->
|
|
<div class="naming-panel">
|
|
<h3>Platform Detection Patterns</h3>
|
|
<p class="hint">Patterns to identify platform from filename (e.g., "_tiktok_", "_meta_")</p>
|
|
<div id="platformPatternsList">
|
|
<!-- Platform patterns will be loaded here -->
|
|
</div>
|
|
<button class="btn-secondary btn-sm" id="addPlatformPatternBtn">+ Add Platform Pattern</button>
|
|
</div>
|
|
|
|
<!-- Aspect Ratio Patterns -->
|
|
<div class="naming-panel">
|
|
<h3>Aspect Ratio Detection Patterns</h3>
|
|
<p class="hint">Patterns to identify aspect ratio from filename (e.g., "_16x9_", "_1x1_")</p>
|
|
<div id="aspectRatioPatternsList">
|
|
<!-- Aspect ratio patterns will be loaded here -->
|
|
</div>
|
|
<button class="btn-secondary btn-sm" id="addAspectRatioPatternBtn">+ Add Aspect Ratio Pattern</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="naming-actions">
|
|
<button class="btn-primary" id="saveNamingBtn">Save Naming Conventions</button>
|
|
<button class="btn-secondary" id="testNamingBtn">Test Pattern</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Add/Edit Platform Modal -->
|
|
<div class="modal" id="platformModal" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="modalTitle">Add New Platform</h2>
|
|
<button class="modal-close" id="closeModal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="platformForm">
|
|
<div class="form-group">
|
|
<label for="platformKey">Platform Key *</label>
|
|
<input type="text" id="platformKey" class="text-input" placeholder="e.g., tiktok" required>
|
|
<small class="hint">Lowercase, no spaces (used in API and filenames)</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="platformName">Platform Name *</label>
|
|
<input type="text" id="platformName" class="text-input" placeholder="e.g., TikTok" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="platformCodec">Video Codec *</label>
|
|
<select id="platformCodec" class="select-input" required>
|
|
<option value="">Select Codec...</option>
|
|
<option value="libx264">H264 (libx264)</option>
|
|
<option value="libx265">H265 (libx265)</option>
|
|
<option value="libvpx-vp9">VP9 (libvpx-vp9)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="platformContainer">Container Format *</label>
|
|
<select id="platformContainer" class="select-input" required>
|
|
<option value="">Select Container...</option>
|
|
<option value="mp4">MP4</option>
|
|
<option value="webm">WebM</option>
|
|
<option value="mov">MOV</option>
|
|
</select>
|
|
</div>
|
|
|
|
<h3>Format Configurations</h3>
|
|
<div id="formatsContainer">
|
|
<!-- Format configurations will be added here -->
|
|
</div>
|
|
|
|
<button type="button" class="btn-secondary" id="addFormatBtn">+ Add Format Configuration</button>
|
|
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn-primary">Save Platform</button>
|
|
<button type="button" class="btn-secondary" id="cancelBtn">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>Video Optimizer - Admin Panel</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="config.js"></script>
|
|
<script src="admin.js"></script>
|
|
</body>
|
|
</html>
|