<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Video Overlay</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: transparent;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        
        /* Debug indicator to verify CSS is loaded */
        body::before {
            content: 'Overlay v2.1 loaded';
            position: absolute;
            top: 5px;
            left: 5px;
            color: rgba(255,255,255,0.5);
            font-size: 10px;
            z-index: 9999;
        }
        
        .overlay-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }
        
        .title-main {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 48px;
            font-weight: bold;
            color: white;
            text-shadow: 
                2px 2px 4px rgba(0,0,0,0.8),
                -1px -1px 0px rgba(0,0,0,0.5),
                1px -1px 0px rgba(0,0,0,0.5),
                -1px 1px 0px rgba(0,0,0,0.5),
                1px 1px 0px rgba(0,0,0,0.5);
            text-align: center;
            opacity: 0;
            animation: titleSlideIn 2s ease-out forwards;
            max-width: 90%;
            word-wrap: break-word;
        }
        
        .title-subtitle {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
            text-align: center;
            opacity: 0;
            animation: titleSlideIn 2s ease-out 0.5s forwards;
            max-width: 90%;
        }
        
        .news-ticker {
            position: absolute;
            bottom: 10%;
            width: 100%;
            background: linear-gradient(90deg, 
                rgba(220, 53, 69, 0.9) 0%, 
                rgba(220, 53, 69, 0.95) 50%,
                rgba(220, 53, 69, 0.9) 100%);
            color: white;
            padding: 12px 0;
            font-size: 18px;
            font-weight: 500;
            overflow: hidden;
            white-space: nowrap;
            opacity: 0;
            animation: fadeIn 1s ease-in 1s forwards;
        }
        
        .ticker-text {
            display: inline-block;
            animation: scroll 30s linear infinite;
            padding-left: 100%;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
        
        
        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(90deg, #007bff, #0056b3);
            transition: width 0.3s ease;
            opacity: 0.8;
        }
        
        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 80px;
            height: 80px;
            opacity: 0;
            animation: logoSlideIn 1.5s ease-out 1.5s forwards;
        }
        
        .logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .stats-panel {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            padding: 20px;
            color: white;
            font-size: 16px;
            opacity: 0;
            animation: slideInRight 1s ease-out 2.5s forwards;
            min-width: 200px;
        }
        
        .stats-item {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
        }
        
        .canvas-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 500;
        }
        
        /* Animations */
        @keyframes titleSlideIn {
            0% {
                opacity: 0;
                transform: translateX(-50%) translateY(-50px);
            }
            100% {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }
        
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
        
        @keyframes logoSlideIn {
            0% {
                opacity: 0;
                transform: translateX(-100px);
            }
            100% {
                opacity: 0.9;
                transform: translateX(0);
            }
        }
        
        @keyframes slideInRight {
            0% {
                opacity: 0;
                transform: translateY(-50%) translateX(100px);
            }
            100% {
                opacity: 1;
                transform: translateY(-50%) translateX(0);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .title-main {
                font-size: 36px;
            }
            .title-subtitle {
                font-size: 20px;
            }
            .news-ticker {
                font-size: 16px;
            }
        }
        
        @media (max-width: 800px) {
            .title-main {
                font-size: 28px;
            }
            .title-subtitle {
                font-size: 16px;
            }
            .stats-panel {
                right: 10px;
                font-size: 14px;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="overlay-container">
        <div class="logo" id="logo">
            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiByeD0iMTAiIGZpbGw9IiNkYzM1NDUiLz4KPHRleHQgeD0iNDAiIHk9IjQ1IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zNWVtIj5NPC90ZXh0Pgo8L3N2Zz4K" alt="MbetterClient Logo" onerror="this.style.display='none'">
        </div>
        
        <div class="title-main" id="titleMain">
            MbetterClient Video Player
        </div>
        
        <div class="title-subtitle" id="titleSubtitle">
            Ready for Content
        </div>
        
        
        <div class="news-ticker" id="newsTicker">
            <div class="ticker-text" id="tickerText">
                Welcome to MbetterClient • Professional Video Overlay System • Real-time Updates • Hardware Accelerated Playback
            </div>
        </div>
        
        <div class="stats-panel" id="statsPanel" style="display: none;">
            <div class="stats-item">
                <span>Resolution:</span>
                <span id="resolution">1920x1080</span>
            </div>
            <div class="stats-item">
                <span>Bitrate:</span>
                <span id="bitrate">5.2 Mbps</span>
            </div>
            <div class="stats-item">
                <span>Codec:</span>
                <span id="codec">H.264</span>
            </div>
            <div class="stats-item">
                <span>FPS:</span>
                <span id="fps">30.0</span>
            </div>
        </div>
        
        <canvas class="canvas-overlay" id="canvasOverlay"></canvas>
        
        <div class="progress-bar" id="progressBar" style="width: 0%;"></div>
    </div>

    <!--
    IMPORTANT: When creating or editing custom templates, always maintain these two script tags:
    1. qrc:///qtwebchannel/qwebchannel.js - Required for Qt WebChannel communication
    2. overlay://overlay.js - Required for overlay functionality and data updates
    
    These scripts enable communication between the Qt application and the overlay template.
    Without them, the template will not receive data updates or function properly.
    
    NOTE: When editing this template or creating new ones, never remove these script sources!
    The overlay:// custom scheme ensures JavaScript files work for both built-in and uploaded templates.
    -->
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script src="overlay://overlay.js"></script>
</body>
</html>