300a67d247
Features: - Renamed "Reload from Server" to "Refresh Display" for clarity - Added "Reset to Factory Defaults" button with warning icon - Red danger button styling (matches warning theme) - Double confirmation dialog to prevent accidental resets - Backend endpoint to restore original 8 platforms (21 configurations) - Deletes custom platform_specs.json file - Restores L'Oréal documentation specifications Functionality: - "Refresh Display" - Reloads current specs from backend (no changes) - "Reset to Factory Defaults" - Deletes ALL custom platforms and restores original 21 configs - Custom platforms are saved until factory reset is triggered - Factory defaults stored at server startup for restoration Safety features: - Two confirmation dialogs - Clear warning messages - Success feedback showing platform count restored 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
130 lines
5.9 KiB
HTML
130 lines
5.9 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>
|
|
|
|
<!-- 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>
|