Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 13, 2025

Commit

d269d99

verified ·

1 Parent(s): 554dd97

Update index.html

Browse files

Files changed (1) hide show

index.html +592 -97

index.html CHANGED Viewed

@@ -1,122 +1,617 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dynamic Facet Explorer</title>
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <style>
-        .sticky-query {
-            position: sticky;
-            top: 0;
-            z-Coeff: 1;
             background-color: white;
-            padding: 1rem;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            animation: zoomIn 0.5s ease-out;
-        }
-        .fade-in {
-            animation: fadeIn 0.5s ease-out;
-            @keyframes fadeIn {
-                0% {
-                    opacity: 0;
-                }
-                100% {
-                    opacity: 1;
-                }
             }
         }
     </style>
 </head>
-<body class="bg-gray-50 min-h-screen font-sans text-gray-800">
-    <div class="container mx-auto px-4 py-12">
-        <!-- Query Input -->
-        <div class="sticky-query bg-white rounded-lg shadow-lg p-8 mb-12">
-            <div class="mb-6">
-                <label for="query" class="block text-lg font-medium text-gray-700 mb-2">Query</label>
-                <input type="text" id="query" placeholder="Enter your query" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-            </div>
         </div>
-        <!-- Section 1: Input -->
-        <div class="bg-white rounded-lg shadow-lg p-8 mb-12">
-            <div class="mb-6">
-                <label for="given_facet" class="block text-lg font-medium text-gray-700 mb-2">Given Facet</label>
-                <input type="text" id="given_facet" placeholder="Enter your facet in Python dictionary format" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-            </div>
-            <button id="submit" class="w-full bg-blue-600 text-white py-3 px-6 rounded-md hover:bg-blue-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Submit</button>
         </div>
-        <!-- Section 2: Dynamic Boxes -->
-        <div id="dynamicBoxes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"></div>
-        <!-- Get List Button -->
-        <div class="mt-12 text-center">
-            <button id="getList" class="bg-green-600 text-white py-3 px-8 rounded-md hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">Get List</button>
-            <button id="reset" class="bg-red-600 text-white py-3 px-8 ml-4 rounded-md hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Reset</button>
         </div>
-        <!-- Result Display -->
-        <div id="result" class="mt-12 text-center text-2xl font-semibold"></div>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
-        $(document).ready(function() {
-            let isResultShown = false;
-            $('#submit').click(function() {
-                const query = $('#query').val();
-                const givenFacet = $('#given_facet').val();
-                try {
-                    const facetObj = eval('(' + givenFacet + ')');
-                    generateBoxes(facetObj);
-                    resetResult();
-                } catch (error) {
-                    alert('Invalid facet format. Please enter a valid Python dictionary.');
                 }
             });
-            function generateBoxes(facetObj) {
-                const $dynamicBoxes = $('#dynamicBoxes').empty();
-                Object.entries(facetObj).forEach(([key, values]) => {
-                    const $box = $('<div>').addClass('bg-white rounded-lg shadow-md p-6 fade-in');
-                    const $title = $('<div>').addClass('flex items-center justify-between mb-4')
-                        .append($('<h2>').addClass('text-xl font-semibold').text(`'${key}'`))
-                        .append($('<input>').attr({
-                            type: 'checkbox',
-                            name: key,
-                            class: 'form-checkbox h-5 w-5 text-blue-600'
-                        }));
-                    const $content = $('<div>').addClass('space-y-2');
-                    values.forEach(value => {
-                        $content.append($('<p>').addClass('text-gray-600').text(value));
-                    });
-                    $box.append($title).append($content);
-                    $dynamicBoxes.append($box);
                 });
             }
-            $('#getList').click(function() {
-                const checkedBoxes = $('input[type="checkbox"]:checked').map(function() {
-                    return `'${this.name}'`;
-                }).get();
-                const result = `[${checkedBoxes.join(', ')}]`;
-                $('#result').text(result).addClass('fade-in');
-                isResultShown = true;
-            });
-            $('#reset').click(function() {
-                $('input[type="checkbox"]').prop('checked', false);
-                if (isResultShown) {
-                    $('#result').text('').removeClass('fade-in');
-                    isResultShown = false;
                 }
-            });
-            function resetResult() {
-                $('#result').text('').removeClass('fade-in');
-                isResultShown = false;
             }
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Player</title>
     <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            background-color: #2c3e50;
+            color: white;
+            padding: 20px 0;
+            text-align: center;
+            margin-bottom: 30px;
+            border-radius: 5px;
+        }
+        h1 {
+            font-size: 2.5rem;
+        }
+        .search-container {
+            margin: 20px 0;
+            display: flex;
+            justify-content: center;
+        }
+        #search {
+            width: 70%;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 25px;
+            font-size: 16px;
+            outline: none;
+            transition: all 0.3s;
+        }
+        #search:focus {
+            border-color: #3498db;
+            box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
+        }
+        .video-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        .video-item {
             background-color: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s, box-shadow 0.3s;
+            cursor: pointer;
+        }
+        .video-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+        .video-thumbnail {
+            position: relative;
+            padding-top: 56.25%; /* 16:9 aspect ratio */
+            background-color: #000;
+        }
+        .video-thumbnail img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .video-info {
+            padding: 15px;
+        }
+        .video-title {
+            font-size: 1.1rem;
+            margin-bottom: 5px;
+            font-weight: 600;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+        .video-player-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        .video-player-container.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .video-player-wrapper {
+            width: 90%;
+            max-width: 1000px;
+            position: relative;
+        }
+        #videoPlayer {
+            width: 100%;
+            border-radius: 8px;
+            background-color: #000;
+        }
+        .player-controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 10px;
+            border-radius: 0 0 8px 8px;
+            margin-top: -5px;
+        }
+        .control-group {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .control-btn {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 1.2rem;
+            cursor: pointer;
+            padding: 5px;
+            border-radius: 50%;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.2s;
+        }
+        .control-btn:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        .progress-container {
+            flex-grow: 1;
+            margin: 0 15px;
+            height: 5px;
+            background-color: rgba(255, 255, 255, 0.2);
+            border-radius: 5px;
+            cursor: pointer;
+            position: relative;
+        }
+        .progress-bar {
+            height: 100%;
+            background-color: #3498db;
+            border-radius: 5px;
+            width: 0%;
+            position: relative;
+        }
+        .progress-time {
+            position: absolute;
+            top: -25px;
+            transform: translateX(-50%);
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 3px 6px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            display: none;
+        }
+        .progress-container:hover .progress-time {
+            display: block;
+        }
+        .close-player {
+            position: absolute;
+            top: -40px;
+            right: 0;
+            background: none;
+            border: none;
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+        }
+        .time-display {
+            color: white;
+            font-size: 0.9rem;
+            min-width: 100px;
+            text-align: center;
+        }
+        .volume-container {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .volume-slider {
+            width: 80px;
+            cursor: pointer;
+        }
+        .no-results {
+            text-align: center;
+            padding: 40px;
+            color: #666;
+            font-size: 1.2rem;
+            grid-column: 1 / -1;
+        }
+        @media (max-width: 768px) {
+            .video-list {
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            }
+            .control-group {
+                gap: 8px;
+            }
+            .time-display {
+                min-width: 80px;
+                font-size: 0.8rem;
+            }
+            .volume-slider {
+                width: 60px;
+            }
+        }
+        @media (max-width: 480px) {
+            .video-list {
+                grid-template-columns: 1fr;
+            }
+            #search {
+                width: 90%;
+            }
+            .video-player-wrapper {
+                width: 95%;
+            }
+            .control-btn {
+                font-size: 1rem;
+                width: 30px;
+                height: 30px;
             }
         }
     </style>
 </head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Video Player</h1>
+        </header>
+        <div class="search-container">
+            <input type="text" id="search" placeholder="Search videos...">
         </div>
+        <div class="video-list" id="videoList">
+            <!-- Videos will be loaded here -->
         </div>
+    </div>
+    <div class="video-player-container" id="playerContainer">
+        <div class="video-player-wrapper">
+            <button class="close-player" id="closePlayer">&times;</button>
+            <video id="videoPlayer"></video>
+            <div class="player-controls">
+                <div class="control-group">
+                    <button class="control-btn" id="playPauseBtn">&#9658;</button>
+                    <button class="control-btn" id="skipBackBtn">&#8630;</button>
+                    <button class="control-btn" id="skipForwardBtn">&#8631;</button>
+                    <div class="time-display">
+                        <span id="currentTime">0:00</span> / <span id="duration">0:00</span>
+                    </div>
+                </div>
+                <div class="progress-container" id="progressContainer">
+                    <div class="progress-bar" id="progressBar"></div>
+                    <div class="progress-time" id="progressTime">0:00</div>
+                </div>
+                <div class="control-group">
+                    <div class="volume-container">
+                        <button class="control-btn" id="volumeBtn">&#128266;</button>
+                        <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="1">
+                    </div>
+                    <button class="control-btn" id="fullscreenBtn">&#9974;</button>
+                </div>
+            </div>
         </div>
     </div>
     <script>
+        // Global variables
+        let videos = [];
+        let lastTapTime = 0;
+        // DOM elements
+        const videoListElement = document.getElementById('videoList');
+        const searchInput = document.getElementById('search');
+        const playerContainer = document.getElementById('playerContainer');
+        const videoPlayer = document.getElementById('videoPlayer');
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const skipBackBtn = document.getElementById('skipBackBtn');
+        const skipForwardBtn = document.getElementById('skipForwardBtn');
+        const progressBar = document.getElementById('progressBar');
+        const progressContainer = document.getElementById('progressContainer');
+        const progressTime = document.getElementById('progressTime');
+        const currentTimeDisplay = document.getElementById('currentTime');
+        const durationDisplay = document.getElementById('duration');
+        const volumeBtn = document.getElementById('volumeBtn');
+        const volumeSlider = document.getElementById('volumeSlider');
+        const fullscreenBtn = document.getElementById('fullscreenBtn');
+        const closePlayer = document.getElementById('closePlayer');
+        // Load videos from JSON
+        async function loadVideos() {
+            try {
+                const response = await fetch('database.json');
+                if (!response.ok) {
+                    throw new Error('Failed to load videos');
                 }
+                videos = await response.json();
+                displayVideos(videos);
+            } catch (error) {
+                console.error('Error loading videos:', error);
+                videoListElement.innerHTML = '<div class="no-results">Failed to load videos. Please try again later.</div>';
+            }
+        }
+        // Display videos in the list
+        function displayVideos(videosToDisplay) {
+            if (videosToDisplay.length === 0) {
+                videoListElement.innerHTML = '<div class="no-results">No videos found. Try a different search.</div>';
+                return;
+            }
+            videoListElement.innerHTML = videosToDisplay.map(video => `
+                <div class="video-item" data-url="${video.url}" data-title="${video.title}">
+                    <div class="video-thumbnail">
+                        <img src="${video.thumbnail || 'https://via.placeholder.com/300x169?text=No+Thumbnail'}" alt="${video.title}">
+                    </div>
+                    <div class="video-info">
+                        <h3 class="video-title">${video.title}</h3>
+                    </div>
+                </div>
+            `).join('');
+            // Add click event to video items
+            document.querySelectorAll('.video-item').forEach(item => {
+                item.addEventListener('click', () => {
+                    const videoUrl = item.getAttribute('data-url');
+                    const videoTitle = item.getAttribute('data-title');
+                    playVideo(videoUrl, videoTitle);
+                });
             });
+        }
+        // Play selected video
+        function playVideo(url, title) {
+            videoPlayer.src = url;
+            document.title = `${title} - Video Player`;
+            // Show player
+            playerContainer.classList.add('show');
+            // Attempt to play (may need user interaction on some browsers)
+            const playPromise = videoPlayer.play();
+            if (playPromise !== undefined) {
+                playPromise.catch(error => {
+                    console.log('Auto-play prevented:', error);
                 });
             }
+        }
+        // Close video player
+        function closeVideoPlayer() {
+            videoPlayer.pause();
+            playerContainer.classList.remove('show');
+            document.title = 'Video Player';
+        }
+        // Format time (seconds to MM:SS)
+        function formatTime(seconds) {
+            const minutes = Math.floor(seconds / 60);
+            const remainingSeconds = Math.floor(seconds % 60);
+            return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+        }
+        // Update progress bar
+        function updateProgressBar() {
+            const currentTime = videoPlayer.currentTime;
+            const duration = videoPlayer.duration;
+            if (duration) {
+                const progressPercent = (currentTime / duration) * 100;
+                progressBar.style.width = `${progressPercent}%`;
+                currentTimeDisplay.textContent = formatTime(currentTime);
+                durationDisplay.textContent = formatTime(duration);
+            }
+        }
+        // Skip forward or backward
+        function skip(seconds) {
+            videoPlayer.currentTime += seconds;
+        }
+        // Toggle play/pause
+        function togglePlayPause() {
+            if (videoPlayer.paused) {
+                videoPlayer.play();
+                playPauseBtn.innerHTML = '&#10074;&#10074;';
+            } else {
+                videoPlayer.pause();
+                playPauseBtn.innerHTML = '&#9658;';
+            }
+        }
+        // Toggle mute
+        function toggleMute() {
+            videoPlayer.muted = !videoPlayer.muted;
+            if (videoPlayer.muted) {
+                volumeBtn.innerHTML = '&#128263;';
+                volumeSlider.value = 0;
+            } else {
+                volumeBtn.innerHTML = '&#128266;';
+                volumeSlider.value = videoPlayer.volume;
+            }
+        }
+        // Update volume
+        function updateVolume() {
+            videoPlayer.volume = volumeSlider.value;
+            if (videoPlayer.volume === 0) {
+                volumeBtn.innerHTML = '&#128263;';
+            } else {
+                volumeBtn.innerHTML = '&#128266;';
+            }
+        }
+        // Seek to position in video
+        function seek(e) {
+            const width = this.clientWidth;
+            const clickX = e.offsetX;
+            const duration = videoPlayer.duration;
+            videoPlayer.currentTime = (clickX / width) * duration;
+        }
+        // Update progress time indicator
+        function updateProgressTime(e) {
+            const width = this.clientWidth;
+            const clickX = e.offsetX;
+            const duration = videoPlayer.duration;
+            const seekTime = (clickX / width) * duration;
+            progressTime.textContent = formatTime(seekTime);
+            // Position the time indicator
+            const progressContainerRect = progressContainer.getBoundingClientRect();
+            const progressTimeWidth = progressTime.offsetWidth;
+            let leftPosition = e.clientX - progressContainerRect.left - (progressTimeWidth / 2);
+            // Keep within bounds
+            leftPosition = Math.max(0, Math.min(leftPosition, progressContainerRect.width - progressTimeWidth));
+            progressTime.style.left = `${leftPosition}px`;
+        }
+        // Toggle fullscreen
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                playerContainer.requestFullscreen().catch(err => {
+                    console.error(`Error attempting to enable fullscreen: ${err.message}`);
+                });
+            } else {
+                document.exitFullscreen();
+            }
+        }
+        // Handle double tap for skip
+        function handleDoubleTap(e) {
+            const currentTime = Date.now();
+            const tapLength = currentTime - lastTapTime;
+            if (tapLength < 300 && tapLength > 0) {
+                // Double tap detected
+                const rect = videoPlayer.getBoundingClientRect();
+                const tapPosition = e.clientX - rect.left;
+                const halfWidth = rect.width / 2;
+                if (tapPosition < halfWidth) {
+                    // Left side - skip backward
+                    skip(-10);
+                } else {
+                    // Right side - skip forward
+                    skip(10);
                 }
+            }
+            lastTapTime = currentTime;
+        }
+        // Event listeners
+        searchInput.addEventListener('input', () => {
+            const searchTerm = searchInput.value.toLowerCase();
+            const filteredVideos = videos.filter(video =>
+                video.title.toLowerCase().includes(searchTerm)
+            );
+            displayVideos(filteredVideos);
+        });
+        videoPlayer.addEventListener('timeupdate', updateProgressBar);
+        videoPlayer.addEventListener('ended', () => {
+            playPauseBtn.innerHTML = '&#9658;';
+        });
+        videoPlayer.addEventListener('click', togglePlayPause);
+        videoPlayer.addEventListener('dblclick', handleDoubleTap);
+        playPauseBtn.addEventListener('click', togglePlayPause);
+        skipBackBtn.addEventListener('click', () => skip(-10));
+        skipForwardBtn.addEventListener('click', () => skip(10));
+        progressContainer.addEventListener('click', seek);
+        progressContainer.addEventListener('mousemove', updateProgressTime);
+        volumeBtn.addEventListener('click', toggleMute);
+        volumeSlider.addEventListener('input', updateVolume);
+        fullscreenBtn.addEventListener('click', toggleFullscreen);
+        closePlayer.addEventListener('click', closeVideoPlayer);
+        // Keyboard controls
+        document.addEventListener('keydown', (e) => {
+            if (!playerContainer.classList.contains('show')) return;
+            switch (e.key) {
+                case ' ':
+                case 'k':
+                    togglePlayPause();
+                    e.preventDefault();
+                    break;
+                case 'ArrowLeft':
+                    skip(-5);
+                    break;
+                case 'ArrowRight':
+                    skip(5);
+                    break;
+                case 'ArrowUp':
+                    videoPlayer.volume = Math.min(1, videoPlayer.volume + 0.1);
+                    volumeSlider.value = videoPlayer.volume;
+                    updateVolume();
+                    break;
+                case 'ArrowDown':
+                    videoPlayer.volume = Math.max(0, videoPlayer.volume - 0.1);
+                    volumeSlider.value = videoPlayer.volume;
+                    updateVolume();
+                    break;
+                case 'm':
+                    toggleMute();
+                    break;
+                case 'f':
+                    toggleFullscreen();
+                    break;
+                case 'Escape':
+                    closeVideoPlayer();
+                    break;
             }
         });
+        // Initialize
+        loadVideos();
     </script>
 </body>
+</html>