5f8bac9ec4
Features: - Complete admin interface for managing platform specifications - Metrics dashboard showing total platforms, configurations, codecs, and aspect ratios - Add new platforms with custom codecs and format configurations - Edit existing platforms and their aspect ratio settings - Delete platforms from the system - Export all specifications to JSON (for backups) - Import specifications from JSON (bulk updates/restore) - Real-time platform list with detailed specification tables - Dark theme (black + yellow) matching main app - Link to admin panel from main app footer Backend Enhancements: - 5 new admin API endpoints (POST, PUT, DELETE, export, import) - Auto-save to platform_specs.json file - Auto-load specs from JSON on server startup - Persistent storage for platform configurations - CORS enabled for admin endpoints Admin Panel allows non-technical users to: - Add new social media platforms as they emerge - Update bitrate recommendations - Add new aspect ratio support - Manage all 21+ platform configurations - Export/import for version control and backups Access: frontend/admin.html 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
129 lines
5.8 KiB
HTML
129 lines
5.8 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">Reload from Server</button>
|
|
</section>
|
|
|
|
<!-- Platforms Table -->
|
|
<section class="platforms-section">
|
|
<h2>Platform Specifications</h2>
|
|
<div id="platformsList">
|
|
<!-- Platforms will be dynamically loaded here -->
|
|
</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>L'Oréal Video Optimizer - Admin Panel</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="config.js"></script>
|
|
<script src="admin.js"></script>
|
|
</body>
|
|
</html>
|