HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1868x200
1.59 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlashSave | Auto-Detect Video Downloader</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        :root {
            --primary: #00D4AA;
            --primary-dark: #00B894;
            --secondary: #6C5CE7;
            --bg-dark: #0A0A0A;
            --bg-card: #151515;
            --bg-surface: #1E1E1E;
            --text-primary: #FFFFFF;
            --text-secondary: #A0A0A0;
            --text-muted: #666666;
            --border: #2A2A2A;
            --success: #00D4AA;
            --warning: #FF9F43;
            --error: #FF6B6B;
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 12px;
            --shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            --glow: 0 0 20px rgba(0, 212, 170, 0.3);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            background: var(--bg-dark);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
            min-height: 100vh;
            padding-bottom: 100px;
        }

        .container {
            max-width: 500px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        .header {
            padding: 20px 0;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(20px);
            z-index: 1000;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .settings-btn {
            width: 44px;
            height: 44px;
            background: var(--bg-surface);
            border-radius: var(--radius-md);
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .settings-btn:hover {
            background: var(--bg-card);
            color: var(--primary);
        }

        /* Main Content */
        .main-content {
            padding: 40px 0;
            text-align: center;
        }

        /* Detection Status */
        .detection-status {
            margin-bottom: 50px;
        }

        .status-icon {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: var(--bg-card);
            margin: 0 auto 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            transition: var(--transition);
            position: relative;
        }

        .status-icon.detecting {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            animation: pulse 2s infinite;
            box-shadow: var(--glow);
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .status-text h2 {
            font-size: 28px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .status-text p {
            color: var(--text-secondary);
            font-size: 16px;
            max-width: 300px;
            margin: 0 auto;
        }

        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--text-muted);
            margin: 20px auto;
            transition: var(--transition);
        }

        .status-indicator.active {
            background: var(--success);
            box-shadow: 0 0 10px var(--success);
        }

        /* How-to Guide */
        .how-to-guide {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 25px;
            margin-top: 40px;
            border: 1px solid var(--border);
        }

        .guide-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .steps {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .step {
            display: flex;
            align-items: center;
            gap: 15px;
            text-align: left;
        }

        .step-number {
            width: 36px;
            height: 36px;
            background: var(--bg-surface);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--text-secondary);
            flex-shrink: 0;
        }

        .step-content h4 {
            font-size: 16px;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .step-content p {
            color: var(--text-secondary);
            font-size: 14px;
        }

        /* Floating Download Button */
        .floating-download-btn {
            position: fixed;
            bottom: 100px;
            right: 25px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 50%;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            box-shadow: var(--shadow);
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            transform: translateY(0);
        }

        .floating-download-btn:hover {
            transform: translateY(-5px);
            box-shadow: var(--glow);
        }

        .floating-download-btn.glow {
            animation: floatGlow 1.5s infinite;
        }

        @keyframes floatGlow {
            0%, 100% { 
                transform: translateY(0);
                box-shadow: 0 10px 30px rgba(0, 212, 170, 0.4);
            }
            50% { 
                transform: translateY(-5px);
                box-shadow: 0 15px 40px rgba(0, 212, 170, 0.6);
            }
        }

        /* Bottom Sheet Popup */
        .bottom-sheet {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            padding: 25px;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1000;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
            border: 1px solid var(--border);
            max-height: 80vh;
            overflow-y: auto;
        }

        .bottom-sheet.active {
            transform: translateY(0);
        }

        .sheet-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .sheet-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 20px;
            font-weight: 700;
        }

        .platform-icon {
            width: 36px;
            height: 36px;
            background: var(--bg-surface);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .close-sheet {
            width: 40px;
            height: 40px;
            background: var(--bg-surface);
            border-radius: var(--radius-md);
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
            cursor: pointer;
            transition: var(--transition);
        }

        .close-sheet:hover {
            background: var(--bg-dark);
            color: var(--text-primary);
        }

        .video-preview-card {
            background: var(--bg-surface);
            border-radius: var(--radius-md);
            overflow: hidden;
            margin-bottom: 25px;
        }

        .video-thumbnail {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .video-info {
            padding: 20px;
        }

        .video-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .video-meta {
            display: flex;
            gap: 20px;
            color: var(--text-secondary);
            font-size: 14px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .quality-badge {
            display: inline-block;
            background: rgba(0, 212, 170, 0.2);
            color: var(--primary);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            margin-top: 15px;
        }

        .action-buttons {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .download-btn {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            border: none;
            padding: 20px;
            border-radius: var(--radius-md);
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--glow);
        }

        .audio-btn {
            background: var(--bg-surface);
            color: var(--text-primary);
            border: 1px solid var(--border);
            padding: 20px;
            border-radius: var(--radius-md);
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .audio-btn:hover {
            background: var(--bg-dark);
            border-color: var(--primary);
        }

        /* Downloads Screen */
        .downloads-screen {
            padding: 20px 0;
        }

        .back-btn {
            width: 44px;
            height: 44px;
            background: var(--bg-surface);
            border-radius: var(--radius-md);
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }

        .downloads-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .download-item {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            border: 1px solid var(--border);
            transition: var(--transition);
        }

        .download-item:hover {
            border-color: var(--primary);
            transform: translateY(-2px);
        }

        .download-thumbnail {
            width: 80px;
            height: 80px;
            border-radius: var(--radius-sm);
            object-fit: cover;
            flex-shrink: 0;
        }

        .download-info {
            flex: 1;
            text-align: left;
        }

        .download-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
            line-height: 1.3;
        }

        .download-meta {
            color: var(--text-secondary);
            font-size: 14px;
            display: flex;
            gap: 15px;
        }

        .download-actions {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            width: 40px;
            height: 40px;
            background: var(--bg-surface);
            border-radius: var(--radius-sm);
            border: none;
            color: var(--text-secondary);
            font-size: 16px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .action-btn:hover {
            background: var(--primary);
            color: white;
        }

        /* Navigation */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border-top: 1px solid var(--border);
            padding: 15px 0;
            z-index: 900;
        }

        .nav-items {
            display: flex;
            justify-content: space-around;
            max-width: 500px;
            margin: 0 auto;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
            padding: 10px 20px;
            border-radius: var(--radius-md);
        }

        .nav-item:hover {
            background: var(--bg-surface);
        }

        .nav-item.active {
            color: var(--primary);
        }

        .nav-icon {
            font-size: 22px;
        }

        .nav-label {
            font-size: 12px;
            font-weight: 600;
        }

        /* Settings */
        .settings-screen {
            padding: 20px 0;
        }

        .settings-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .setting-item {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid var(--border);
        }

        .setting-info h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .setting-info p {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .toggle-switch {
            position: relative;
            width: 50px;
            height: 28px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-surface);
            border-radius: 34px;
            transition: var(--transition);
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background: white;
            border-radius: 50%;
            transition: var(--transition);
        }

        input:checked + .toggle-slider {
            background: var(--primary);
        }

        input:checked + .toggle-slider:before {
            transform: translateX(22px);
        }

        /* Utility Classes */
        .hidden {
            display: none !important;
        }

        /* Overlay */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Spinner */
        .spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- Main Screen -->
    <div id="mainScreen" class="screen">
        <!-- Header -->
        <header class="header">
            <div class="container header-content">
                <div class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <span>FlashSave</span>
                </div>
                <button class="settings-btn" id="settingsBtn">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </header>

        <!-- Main Content -->
        <main class="main-content">
            <div class="container">
                <!-- Detection Status -->
                <div class="detection-status">
                    <div class="status-icon" id="statusIcon">
                        <i class="fas fa-download"></i>
                    </div>
                    <div class="status-text">
                        <h2 id="statusTitle">Waiting for video…</h2>
                        <p id="statusMessage">Copy or share any video link</p>
                    </div>
                    <div class="status-indicator" id="statusIndicator"></div>
                </div>

                <!-- How-to Guide -->
                <div class="how-to-guide">
                    <div class="guide-title">
                        <i class="fas fa-graduation-cap"></i>
                        How to download
                    </div>
                    <div class="steps">
                        <div class="step">
                            <div class="step-number">1</div>
                            <div class="step-content">
                                <h4>Find a video</h4>
                                <p>Open TikTok, Instagram, YouTube, etc.</p>
                            </div>
                        </div>
                        <div class="step">
                            <div class="step-number">2</div>
                            <div class="step-content">
                                <h4>Tap "Share"</h4>
                                <p>Use the share button and select FlashSave</p>
                            </div>
                        </div>
                        <div class="step">
                            <div class="step-number">3</div>
                            <div class="step-content">
                                <h4>Download instantly</h4>
                                <p>Video detected automatically. Tap download.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Floating Download Button -->
        <button class="floating-download-btn hidden" id="floatingDownloadBtn">
            <i class="fas fa-download"></i>
        </button>
    </div>

    <!-- Downloads Screen -->
    <div id="downloadsScreen" class="screen hidden">
        <div class="container downloads-screen">
            <button class="back-btn" id="backBtn1">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h2 style="margin-bottom: 25px; font-size: 28px;">Downloads</h2>
            <div class="downloads-list" id="downloadsList">
                <!-- Downloads will be populated here -->
            </div>
        </div>
    </div>

    <!-- Settings Screen -->
    <div id="settingsScreen" class="screen hidden">
        <div class="container settings-screen">
            <button class="back-btn" id="backBtn2">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h2 style="margin-bottom: 25px; font-size: 28px;">Settings</h2>
            <div class="settings-list">
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>Auto-detect</h4>
                        <p>Automatically detect video links</p>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" id="autoDetectToggle" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>Default Quality</h4>
                        <p>Best available (HD)</p>
                    </div>
                    <div class="quality-badge">BEST</div>
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>Dark Mode</h4>
                        <p>Dark theme always on</p>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" id="darkModeToggle" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>Save Location</h4>
                        <p>Internal storage/Downloads</p>
                    </div>
                    <i class="fas fa-chevron-right"></i>
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>Privacy Policy</h4>
                        <p>Read our privacy terms</p>
                    </div>
                    <i class="fas fa-external-link-alt"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Sheet Popup -->
    <div class="bottom-sheet" id="bottomSheet">
        <div class="sheet-header">
            <div class="sheet-title">
                <div class="platform-icon" id="platformIcon">
                    <i class="fab fa-tiktok"></i>
                </div>
                <span>Video Detected</span>
            </div>
            <button class="close-sheet" id="closeSheet">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="video-preview-card">
            <img src="https://images.unsplash.com/photo-1611224923853-80b023f02d71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" 
                 class="video-thumbnail" 
                 alt="Video Thumbnail"
                 id="videoThumbnail">
            <div class="video-info">
                <h3 class="video-title" id="videoTitle">Amazing TikTok Dance Challenge #viral</h3>
                <div class="video-meta">
                    <div class="meta-item">
                        <i class="fas fa-clock"></i>
                        <span id="videoDuration">1:45</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-eye"></i>
                        <span id="videoViews">2.4M</span>
                    </div>
                </div>
                <div class="quality-badge" id="qualityBadge">
                    <i class="fas fa-check-circle"></i> BEST QUALITY (1080p)
                </div>
            </div>
        </div>

        <div class="action-buttons">
            <button class="download-btn" id="startDownloadBtn">
                <i class="fas fa-download"></i> DOWNLOAD VIDEO (45 MB)
            </button>
            <button class="audio-btn" id="audioOnlyBtn">
                <i class="fas fa-music"></i> AUDIO ONLY (8 MB)
            </button>
        </div>
    </div>

    <!-- Overlay -->
    <div class="overlay" id="overlay"></div>

    <!-- Bottom Navigation -->
    <nav class="bottom-nav">
        <div class="nav-items">
            <div class="nav-item active" data-screen="mainScreen">
                <i class="fas fa-home nav-icon"></i>
                <span class="nav-label">Home</span>
            </div>
            <div class="nav-item" data-screen="downloadsScreen">
                <i class="fas fa-folder nav-icon"></i>
                <span class="nav-label">Downloads</span>
            </div>
            <div class="nav-item" data-screen="settingsScreen">
                <i class="fas fa-cog nav-icon"></i>
                <span class="nav-label">Settings</span>
            </div>
        </div>
    </nav>

    <script>
        // DOM Elements
        const mainScreen = document.getElementById('mainScreen');
        const downloadsScreen = document.getElementById('downloadsScreen');
        const settingsScreen = document.getElementById('settingsScreen');
        const statusIcon = document.getElementById('statusIcon');
        const statusTitle = document.getElementById('statusTitle');
        const statusMessage = document.getElementById('statusMessage');
        const statusIndicator = document.getElementById('statusIndicator');
        const floatingDownloadBtn = document.getElementById('floatingDownloadBtn');
        const bottomSheet = document.getElementById('bottomSheet');
        const overlay = document.getElementById('overlay');
        const closeSheet = document.getElementById('closeSheet');
        const startDownloadBtn = document.getElementById('startDownloadBtn');
        const audioOnlyBtn = document.getElementById('audioOnlyBtn');
        const navItems = document.querySelectorAll('.nav-item');
        const settingsBtn = document.getElementById('settingsBtn');
        const backBtn1 = document.getElementById('backBtn1');
        const backBtn2 = document.getElementById('backBtn2');
        const autoDetectToggle = document.getElementById('autoDetectToggle');
        const darkModeToggle = document.getElementById('darkModeToggle');
        const downloadsList = document.getElementById('downloadsList');

        // Sample download history
        const downloads = [
            { title: 'Funny Cat Videos Compilation', size: '85 MB', platform: 'youtube', time: '2 hours ago' },
            { title: 'Cooking Recipe Tutorial', size: '120 MB', platform: 'instagram', time: '1 day ago' },
            { title: 'Workout Motivation', size: '65 MB', platform: 'tiktok', time: '3 days ago' },
            { title: 'Music Mix 2023', size: '45 MB', platform: 'audio', time: '1 week ago' }
        ];

        // Platform Icons
        const platformIcons = {
            'tiktok': 'fab fa-tiktok',
            'instagram': 'fab fa-instagram',
            'youtube': 'fab fa-youtube',
            'facebook': 'fab fa-facebook',
            'twitter': 'fab fa-twitter',
            'audio': 'fas fa-music'
        };

        // Platform Colors
        const platformColors = {
            'tiktok': '#000000',
            'instagram': '#E4405F',
            'youtube': '#FF0000',
            'facebook': '#1877F2',
            'twitter': '#1DA1F2'
        };

        // State
        let isDetecting = false;
        let currentPlatform = 'tiktok';

        // Initialize
        function init() {
            renderDownloadsList();
            simulateAutoDetect();
            setupEventListeners();
        }

        // Setup Event Listeners
        function setupEventListeners() {
            // Navigation
            navItems.forEach(item => {
                item.addEventListener('click', () => switchScreen(item.dataset.screen));
            });

            settingsBtn.addEventListener('click', () => switchScreen('settingsScreen'));
            backBtn1.addEventListener('click', () => switchScreen('mainScreen'));
            backBtn2.addEventListener('click', () => switchScreen('mainScreen'));

            // Bottom Sheet
            closeSheet.addEventListener('click', closeBottomSheet);
            overlay.addEventListener('click', closeBottomSheet);

            // Download Actions
            startDownloadBtn.addEventListener('click', startDownload);
            audioOnlyBtn.addEventListener('click', downloadAudioOnly);

            // Floating Button
            floatingDownloadBtn.addEventListener('click', () => {
                closeBottomSheet();
                startDownload();
            });

            // Toggles
            autoDetectToggle.addEventListener('change', toggleAutoDetect);
            darkModeToggle.addEventListener('change', toggleDarkMode);
        }

        // Switch Screen
        function switchScreen(screenId) {
            // Hide all screens
            document.querySelectorAll('.screen').forEach(screen => {
                screen.classList.add('hidden');
            });

            // Show selected screen
            document.getElementById(screenId).classList.remove('hidden');

            // Update navigation
            navItems.forEach(item => {
                item.classList.toggle('active', item.dataset.screen === screenId);
            });
        }

        // Simulate Auto Detect
        function simulateAutoDetect() {
            // Simulate link detection every 10 seconds
            setInterval(() => {
                if (!isDetecting && autoDetectToggle.checked) {
                    triggerDetection();
                }
            }, 10000);
        }

        // Trigger Detection
        function triggerDetection() {
            isDetecting = true;
            
            // Update UI to detecting state
            statusIcon.classList.add('detecting');
            statusTitle.textContent = 'Detecting video…';
            statusMessage.textContent = 'Analyzing link from clipboard…';
            statusIndicator.classList.remove('active');
            
            // Show spinner
            statusIcon.innerHTML = '<div class="spinner"></div>';
            
            // Simulate detection process
            setTimeout(() => {
                // Successfully detected
                statusIcon.classList.remove('detecting');
                statusIcon.innerHTML = '<i class="fas fa-check-circle"></i>';
                statusTitle.textContent = 'Video detected!';
                statusMessage.textContent = 'Ready to download';
                statusIndicator.classList.add('active');
                
                // Show floating button
                floatingDownloadBtn.classList.remove('hidden');
                floatingDownloadBtn.classList.add('glow');
                
                // Randomly select a platform for demo
                const platforms = ['tiktok', 'instagram', 'youtube', 'facebook'];
                currentPlatform = platforms[Math.floor(Math.random() * platforms.length)];
                
                // Update platform icon in bottom sheet
                const platformIcon = document.getElementById('platformIcon');
                platformIcon.innerHTML = `<i class="${platformIcons[currentPlatform]}"></i>`;
                platformIcon.style.background = platformColors[currentPlatform] || '#6C5CE7';
                
                // Show bottom sheet after delay
                setTimeout(openBottomSheet, 500);
                
                isDetecting = false;
            }, 2000);
        }

        // Open Bottom Sheet
        function openBottomSheet() {
            bottomSheet.classList.add('active');
            overlay.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        // Close Bottom Sheet
        function closeBottomSheet() {
            bottomSheet.classList.remove('active');
            overlay.classList.remove('active');
            document.body.style.overflow = 'auto';
        }

        // Start Download
        function startDownload() {
            // Update UI
            startDownloadBtn.innerHTML = '<div class="spinner" style="width: 24px; height: 24px; margin: 0;"></div>';
            startDownloadBtn.disabled = true;
            
            // Simulate download
            setTimeout(() => {
                startDownloadBtn.innerHTML = '<i class="fas fa-check"></i> DOWNLOADED SUCCESSFULLY';
                
                // Add to downloads list
                const newDownload = {
                    title: document.getElementById('videoTitle').textContent,
                    size: '45 MB',
                    platform: currentPlatform,
                    time: 'Just now'
                };
                downloads.unshift(newDownload);
                renderDownloadsList();
                
                // Close sheet after success
                setTimeout(() => {
                    closeBottomSheet();
                    floatingDownloadBtn.classList.add('hidden');
                    
                    // Reset status
                    setTimeout(() => {
                        statusIcon.innerHTML = '<i class="fas fa-download"></i>';
                        statusTitle.textContent = 'Waiting for video…';
                        statusMessage.textContent = 'Copy or share any video link';
                        statusIndicator.classList.remove('active');
                        
                        // Reset download button
                        startDownloadBtn.innerHTML = '<i class="fas fa-download"></i> DOWNLOAD VIDEO (45 MB)';
                        startDownloadBtn.disabled = false;
                    }, 1000);
                }, 1500);
            }, 3000);
        }

        // Download Audio Only
        function downloadAudioOnly() {
            audioOnlyBtn.innerHTML = '<div class="spinner" style="width: 24px; height: 24px; margin: 0;"></div>';
            audioOnlyBtn.disabled = true;
            
            setTimeout(() => {
                alert('Audio downloaded successfully!');
                audioOnlyBtn.innerHTML = '<i class="fas fa-music"></i> AUDIO ONLY (8 MB)';
                audioOnlyBtn.disabled = false;
                closeBottomSheet();
            }, 2000);
        }

        // Toggle Auto Detect
        function toggleAutoDetect() {
            if (autoDetectToggle.checked) {
                statusTitle.textContent = 'Auto-detect enabled';
                statusMessage.textContent = 'Waiting for video links…';
            } else {
                statusTitle.textContent = 'Auto-detect disabled';
                statusMessage.textContent = 'Enable in settings to auto-detect';
            }
        }

        // Toggle Dark Mode
        function toggleDarkMode() {
            if (!darkModeToggle.checked) {
                document.documentElement.style.setProperty('--bg-dark', '#F5F7FA');
                document.documentElement.style.setProperty('--bg-card', '#FFFFFF');
                document.documentElement.style.setProperty('--bg-surface', '#F0F2F5');
                document.documentElement.style.setProperty('--text-primary', '#1A1A1A');
                document.documentElement.style.setProperty('--text-secondary', '#666666');
                document.documentElement.style.setProperty('--border', '#E0E0E0');
            } else {
                // Reset to dark mode
                document.documentElement.style.setProperty('--bg-dark', '#0A0A0A');
                document.documentElement.style.setProperty('--bg-card', '#151515');
                document.documentElement.style.setProperty('--bg-surface', '#1E1E1E');
                document.documentElement.style.setProperty('--text-primary', '#FFFFFF');
                document.documentElement.style.setProperty('--text-secondary', '#A0A0A0');
                document.documentElement.style.setProperty('--border', '#2A2A2A');
            }
        }

        // Render Downloads List
        function renderDownloadsList() {
            downloadsList.innerHTML = '';
            
            downloads.forEach((download, index) => {
                const item = document.createElement('div');
                item.className = 'download-item';
                item.innerHTML = `
                    <img src="https://images.unsplash.com/photo-${150000 + index}?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                         class="download-thumbnail" 
                         alt="${download.title}">
                    <div class="download-info">
                        <div class="download-title">${download.title}</div>
                        <div class="download-meta">
                            <span>${download.size}</span>
                            <span>${download.time}</span>
                        </div>
                    </div>
                    <div class="download-actions">
                        <button class="action-btn play-btn" data-index="${index}">
                            <i class="fas fa-play"></i>
                        </button>
                        <button class="action-btn share-btn" data-index="${index}">
                            <i class="fas fa-share-alt"></i>
                        </button>
                    </div>
                `;
                
                downloadsList.appendChild(item);
            });
            
            // Add event listeners to action buttons
            document.querySelectorAll('.play-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const index = e.currentTarget.dataset.index;
                    alert(`Playing: ${downloads[index].title}`);
                });
            });
            
            document.querySelectorAll('.share-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const index = e.currentTarget.dataset.index;
                    alert(`Sharing: ${downloads[index].title}`);
                });
            });
        }

        // Clipboard Detection Simulation (for demo)
        document.addEventListener('click', (e) => {
            if (e.target.closest('.status-icon') || e.target.closest('.how-to-guide')) {
                if (!isDetecting) {
                    triggerDetection();
                }
            }
        });

        // Initialize the app
        init();
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
401KB
Transfer Size
480KB
Content Size
184.0ms
Dom Content Loaded
224.0ms
First Paint
214.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests