Edit Knowledge

Primary Question

Keywords (comma separated)

Content (Knowledge provided to AI) @section PageHead { .vr-page { font-family: inherit; background-color: #f8f9fa; color: #1a1a1a; padding-bottom: 80px; } /* Hero / Header */ .vr-hero { background: linear-gradient(135deg, #085536 0%, #0d6b44 100%); padding: 80px 20px; text-align: center; color: white; position: relative; } .vr-hero h1 { font-size: 42px; font-weight: 800; margin-bottom: 15px; color: #ffffff; } .vr-hero p { font-size: 18px; color: #e8f1ed !important; max-width: 700px; margin: 0 auto; line-height: 1.6; } /* Filter & Search Bar */ .vr-controls { max-width: 1200px; margin: -35px auto 40px auto; background: #ffffff; border-radius: 12px; padding: 20px 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; position: relative; z-index: 10; } .vr-tabs { display: flex; gap: 10px; flex-wrap: wrap; } .vr-tab { background: #f1f5f9; color: #475569; padding: 10px 20px; border-radius: 30px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; border: none; } .vr-tab.active { background: #e86f2a; color: #ffffff; box-shadow: 0 4px 12px rgba(232, 111, 42, 0.3); } .vr-tab:hover:not(.active) { background: #e2e8f0; color: #085536; } .vr-search { position: relative; flex: 1; min-width: 250px; max-width: 400px; } .vr-search input { width: 100%; padding: 12px 20px 12px 45px; border-radius: 30px; border: 1px solid #cbd5e1; font-size: 15px; transition: border-color 0.3s; font-family: inherit; } .vr-search input:focus { outline: none; border-color: #085536; box-shadow: 0 0 0 3px rgba(8, 85, 54, 0.1); } .vr-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #94a3b8; } /* Grid */ .vr-grid { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; } /* Card */ .vr-card { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.04); transition: all 0.4s ease; cursor: pointer; position: relative; display: flex; flex-direction: column; border: 1px solid #e4e7e2; } .vr-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .vr-card-thumb { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ background: #000; overflow: hidden; } .vr-card-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; opacity: 0.9; } .vr-card:hover .vr-card-thumb img { transform: scale(1.05); opacity: 1; } .vr-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(232, 111, 42, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; opacity: 0; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(232, 111, 42, 0.4); padding-left: 4px; /* Optically center play triangle */ } .vr-card:hover .vr-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } .vr-card-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.75); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; } .vr-card-category { position: absolute; top: 10px; left: 10px; background: #085536; color: white; padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .vr-card-category.move { background: #085536; } .vr-card-category.learn { background: #b47600; } .vr-card-category.live { background: #0284c7; } .vr-card-category.reflect { background: #9333ea; } .vr-card-content { padding: 16px; flex: 1; display: flex; flex-direction: column; } .vr-card-title { font-size: 16px; font-weight: 800; color: #1a1a1a; margin: 0 0 8px 0; line-height: 1.4; } .vr-card-desc { font-size: 12px; color: #6b7280 !important; line-height: 1.5; margin: 0; flex: 1; } /* Modal styling */ .bp-video-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); z-index: 99999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(5px); } .bp-video-modal.active { display: flex; opacity: 1; } .bp-video-modal-inner { position: relative; width: 90%; max-width: 1000px; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); aspect-ratio: 16/9; } .bp-video-modal iframe { width: 100%; height: 100%; border: none; } .bp-video-close { position: absolute; top: -40px; right: 0; background: transparent; color: white; border: none; font-size: 36px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.3s; } .bp-video-close:hover { color: #e86f2a; } @@media (max-width: 768px) { .vr-hero { padding: 60px 20px; } .vr-hero h1 { font-size: 32px; } .vr-controls { margin: -20px 20px 30px 20px; padding: 15px; flex-direction: column; align-items: stretch; } .vr-search { max-width: 100%; } } } Video Resources Library Explore our carefully curated collection of educational videos spanning the Move, Learn, Live, and Reflect libraries. Expert guidance, accessible anytime. All Videos Move Learn Live Reflect @foreach (var v in Model.SampleVideos) { @v.Category @v.Duration @v.Title @v.Description } No videos found Try adjusting your search criteria or selecting a different category. × document.addEventListener("DOMContentLoaded", function () { const tabs = document.querySelectorAll('.vr-tab'); const searchInput = document.getElementById('vr-search-input'); const cards = document.querySelectorAll('.vr-card'); const emptyState = document.getElementById('vr-empty-state'); // Modal elements const modal = document.getElementById("bp-video-modal"); const frame = document.getElementById("bp-video-frame"); const closeBtn = document.querySelector(".bp-video-close"); let currentFilter = 'all'; let searchQuery = ''; function filterVideos() { let visibleCount = 0; cards.forEach(card => { const category = card.getAttribute('data-category'); const title = card.getAttribute('data-title'); const matchesCategory = (currentFilter === 'all' || category === currentFilter); const matchesSearch = title.includes(searchQuery); if (matchesCategory && matchesSearch) { card.style.display = 'flex'; visibleCount++; } else { card.style.display = 'none'; } }); emptyState.style.display = visibleCount === 0 ? 'block' : 'none'; } // Tab click tabs.forEach(tab => { tab.addEventListener('click', () => { tabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); currentFilter = tab.getAttribute('data-filter'); filterVideos(); }); }); // Search input searchInput.addEventListener('input', (e) => { searchQuery = e.target.value.toLowerCase(); filterVideos(); }); // Video Modal Logic function getYouTubeEmbedUrl(url) { let videoId = ""; if (url.includes("youtu.be/")) { videoId = url.split("youtu.be/")[1].split("?")[0]; } else if (url.includes("watch?v=")) { videoId = url.split("watch?v=")[1].split("&")[0]; } else if (url.includes("/embed/")) { videoId = url.split("/embed/")[1].split("?")[0]; } return videoId ? "https://www.youtube.com/embed/" + videoId + "?autoplay=1" : ""; } cards.forEach(card => { card.addEventListener('click', function() { const youtubeUrl = this.getAttribute("data-youtube"); const embedUrl = getYouTubeEmbedUrl(youtubeUrl); if (!embedUrl) return; frame.src = embedUrl; modal.classList.add("active"); }); }); function closeVideo() { modal.classList.remove("active"); frame.src = ""; } closeBtn.addEventListener("click", closeVideo); modal.addEventListener("click", function(e) { if (e.target === modal) closeVideo(); }); });

Related Questions (JSON Array of strings)

Recommended Actions (JSON Array of objects) []

Active

Save Changes Cancel