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>
152 lines
6.7 KiB
HTML
152 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Video Optimizer - Social Media Platform Tool</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">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<h1>Video Optimizer</h1>
|
|
<p class="subtitle">Social Media Platform Optimization Tool</p>
|
|
</header>
|
|
|
|
<!-- Upload Section -->
|
|
<section class="upload-section" id="uploadSection">
|
|
<div class="upload-area" id="dropZone">
|
|
<div class="upload-icon">📁</div>
|
|
<h2>Drag & Drop Video File</h2>
|
|
<p>or click to browse</p>
|
|
<input type="file" id="fileInput" accept="video/*" hidden>
|
|
<p class="file-hint">Supported formats: MP4, MOV, AVI, MKV, WEBM</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Configuration Section -->
|
|
<section class="config-section" id="configSection" style="display: none;">
|
|
<h2>Video Configuration</h2>
|
|
|
|
<div class="video-info" id="videoInfo">
|
|
<!-- Video info will be populated here -->
|
|
</div>
|
|
|
|
<div class="config-grid">
|
|
<div class="config-item">
|
|
<label for="platformSelect">Platform</label>
|
|
<select id="platformSelect" class="select-input">
|
|
<option value="">Select Platform...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="config-item">
|
|
<label for="aspectRatioSelect">Aspect Ratio</label>
|
|
<select id="aspectRatioSelect" class="select-input">
|
|
<option value="">Select Aspect Ratio...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="config-item">
|
|
<label for="bitrateInput">Video Bitrate (optional)</label>
|
|
<input type="text" id="bitrateInput" class="text-input" placeholder="e.g., 1500k (leave blank for recommended)">
|
|
<small class="hint" id="bitrateHint"></small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="format-info" id="formatInfo">
|
|
<!-- Format specifications will be shown here -->
|
|
</div>
|
|
|
|
<div class="warning-message" id="aspectRatioWarning" style="display: none;">
|
|
<strong>⚠️ Warning:</strong> The selected aspect ratio differs from your original video. This may cause distortion, stretching, or cropping of the video content.
|
|
</div>
|
|
|
|
<button class="btn-primary" id="convertBtn" disabled>
|
|
<span id="convertBtnText">Convert Video</span>
|
|
</button>
|
|
|
|
<div class="progress-bar" id="progressBar" style="display: none;">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
<span class="progress-text" id="progressText">Converting...</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Comparison Section -->
|
|
<section class="comparison-section" id="comparisonSection" style="display: none;">
|
|
<h2>Video Comparison</h2>
|
|
|
|
<div class="stats-bar">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Original Size:</span>
|
|
<span class="stat-value" id="originalSize">-</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Optimized Size:</span>
|
|
<span class="stat-value" id="optimizedSize">-</span>
|
|
</div>
|
|
<div class="stat-item reduction">
|
|
<span class="stat-label">Reduction:</span>
|
|
<span class="stat-value" id="reduction">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="warning-message warning-red" id="aspectRatioChangedWarning" style="display: none;">
|
|
<strong>⚠️ Aspect Ratio Changed:</strong> This video was converted to a different aspect ratio than the original. The video may appear distorted, stretched, or cropped.
|
|
</div>
|
|
|
|
<div class="video-grid">
|
|
<div class="video-player-container">
|
|
<h3>Original</h3>
|
|
<video id="originalVideo" controls class="video-player">
|
|
<source id="originalSource" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<div class="video-specs" id="originalSpecs">
|
|
<!-- Video specs will be populated here -->
|
|
</div>
|
|
<div class="video-controls">
|
|
<button class="btn-mute" id="muteOriginal">🔊 Mute</button>
|
|
<button class="btn-secondary" id="downloadOriginal">Download Original</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="video-player-container">
|
|
<h3>Optimized</h3>
|
|
<video id="optimizedVideo" controls class="video-player">
|
|
<source id="optimizedSource" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<div class="video-specs" id="optimizedSpecs">
|
|
<!-- Video specs will be populated here -->
|
|
</div>
|
|
<div class="video-controls">
|
|
<button class="btn-mute" id="muteOptimized">🔊 Mute</button>
|
|
<button class="btn-secondary" id="downloadOptimized">Download Optimized</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="playback-controls">
|
|
<button class="btn-secondary" id="syncPlayBtn">⏯️ Sync Playback</button>
|
|
<button class="btn-secondary" id="pauseAllBtn">⏸️ Pause Both</button>
|
|
</div>
|
|
|
|
<button class="btn-primary" id="newFileBtn">Upload New File</button>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>Video Optimization Tool for Social Media Platforms</p>
|
|
<p><a href="admin.html" style="color: #FFC407; text-decoration: none;">Admin Panel →</a></p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="config.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|