e8f37fc989
Features: - Display detailed video specs below each player (original and optimized) - Show resolution, codec, bitrate, duration, file size, aspect ratio, and platform - Fix video player sizing to 100% width with proper max-width constraints - Specs displayed in clean, easy-to-read format with yellow highlights - Shows conversion details including input and output specifications 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
144 lines
6.1 KiB
HTML
144 lines
6.1 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 - L'Oréal Creative Optimization</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">L'Oréal Creative 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>
|
|
|
|
<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="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>Based on L'Oréal CDMO Creative Optimization Documentation v1.1</p>
|
|
<p>Impact Plus - March 2025</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="config.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|