import './index.css'; import { MOVIES_DATA, NEWS_DATA, TEAM_MEMBERS, HISTORY_EVENTS, CORPORATE_CULTURE } from './data'; import { Movie } from './types'; // ==================== STATE MANAGEMENT ==================== let currentTab: string = 'home'; let searchQuery: string = ''; let filterType: string = '全部'; let filterRegion: string = '全部'; let filterYear: string = '全部'; let filterRating: string = '全部'; let filterSort: string = '最热点击'; let currentPage: number = 1; const ITEMS_PER_PAGE: number = 6; // Timeline active index let selectedTimelineIndex: number = HISTORY_EVENTS.length - 1; // Interactive Vector Map States let mapZoom: number = 1.0; let mapOffsetX: number = 0; let mapOffsetY: number = 0; let isDraggingMap: boolean = false; let startDragX: number = 0; let startDragY: number = 0; let selectedPoiIndex: number = 0; // Player Simulation State inside modal let isPlayerPlaying: boolean = true; let playerProgress: number = 37; // initial progress % let playerVolume: number = 90; let selectedPlaybackLine: string = '广州 BGP 极速 4K 加速专线'; let playerTimerInterval: any = null; // ==================== DOM ELEMENTS CACHE ==================== const elements = { // Navigation elements headerLogoBtn: document.getElementById('header-logo-btn'), searchShortcutBtn: document.getElementById('search-quick-shortcut'), headerCollaborationBtn: document.getElementById('header-collaboration-btn'), mobileMenuHamburger: document.getElementById('mobile-menu-hamburger'), mobileDrawer: document.getElementById('mobile-drawer'), mobileSearchTrigger: document.getElementById('mobile-search-trigger'), mobileContactTrigger: document.getElementById('mobile-contact-trigger'), footerLogoBtn: document.getElementById('footer-logo-btn'), // Tab container views tabHome: document.getElementById('tab-content-home'), tabProducts: document.getElementById('tab-content-products'), tabAbout: document.getElementById('tab-content-about'), tabContact: document.getElementById('tab-content-contact'), // Home Grids & Banners homePopularMovies: document.getElementById('home-popular-movies'), homeLatestMovies: document.getElementById('home-latest-movies'), homeNewsGrid: document.getElementById('home-news-grid'), viewMorePopularBtn: document.getElementById('view-more-popular-btn'), heroPlayTrigger: document.getElementById('hero-play-trigger'), heroCatalogTrigger: document.getElementById('hero-catalog-trigger'), commitmentContactBtn: document.getElementById('commitment-contact-btn'), // Products/Catalog Tab catalogSearchInput: document.getElementById('catalog-search-input') as HTMLInputElement, catalogSearchClear: document.getElementById('catalog-search-clear'), catalogMoviesGrid: document.getElementById('catalog-movies-grid'), catalogEmptyView: document.getElementById('catalog-empty-view'), catalogEmptyReset: document.getElementById('catalog-empty-reset'), catalogCountDisplay: document.getElementById('catalog-count-display'), catalogSortSelect: document.getElementById('catalog-sort-select') as HTMLSelectElement, activeTagsContainer: document.getElementById('active-tags-container'), btnPagePrev: document.getElementById('btn-page-prev') as HTMLButtonElement, btnPageNext: document.getElementById('btn-page-next') as HTMLButtonElement, pageNumbersContainer: document.getElementById('page-numbers-container'), catalogPagination: document.getElementById('catalog-pagination'), // About Tab aboutTeamGrid: document.getElementById('about-team-grid'), cultureMissionText: document.getElementById('culture-mission-text'), cultureVisionText: document.getElementById('culture-vision-text'), cultureValuesList: document.getElementById('culture-values-list'), timelineYearsPanel: document.getElementById('timeline-years-panel'), timelineYearBig: document.getElementById('timeline-year-big'), timelineTitleDisplay: document.getElementById('timeline-title-display'), timelineDescDisplay: document.getElementById('timeline-desc-display'), // Contact View Form contactForm: document.getElementById('contact-form') as HTMLFormElement, formSubmitBtn: document.getElementById('form-submit-btn') as HTMLButtonElement, formSubmitText: document.getElementById('form-submit-text'), formSubmitSpinner: document.getElementById('form-submit-spinner'), triggerOnlineChat: document.getElementById('trigger-online-chat'), // Interactive Canvas Map mapCanvas: document.getElementById('interactive-sandmap-canvas') as HTMLCanvasElement, mapCtrlZoomIn: document.getElementById('map-ctrl-zoom-in'), mapCtrlZoomOut: document.getElementById('map-ctrl-zoom-out'), mapCtrlReset: document.getElementById('map-ctrl-reset'), poiMetaDist: document.getElementById('poi-meta-dist'), poiMetaTitle: document.getElementById('poi-meta-title'), poiMetaDesc: document.getElementById('poi-meta-desc'), poiRowsSelector: document.getElementById('poi-rows-selector') as HTMLSelectElement, // Dialog modal player videoStreamDialog: document.getElementById('video-stream-dialog'), modalCloseTrigger: document.getElementById('modal-close-trigger'), modalDynamicContent: document.getElementById('modal-dynamic-content'), // Online AI Chat Simulator floatingChatTrigger: document.getElementById('floating-chat-trigger'), onlineChatWindow: document.getElementById('online-chat-window'), chatWindowClose: document.getElementById('chat-window-close'), chatMessagesBox: document.getElementById('chat-messages-box'), chatUserInput: document.getElementById('chat-user-input') as HTMLInputElement, chatSubmitForm: document.getElementById('chat-submit-form') as HTMLFormElement, chatSuggestionBox: document.getElementById('chat-suggestion-box'), // Success Toast Notification globalSuccessToast: document.getElementById('global-success-toast'), toastTitle: document.getElementById('toast-title'), toastDesc: document.getElementById('toast-desc'), toastCloseBtn: document.getElementById('toast-close-btn') }; // ==================== MAP POIS DATA ==================== interface MapPoi { title: string; desc: string; x: number; // coordinate x inside virtual 800x500 box y: number; // coordinate y distance: string; } const MAP_POIS: MapPoi[] = [ { title: "快看研发总部信息大厦B座", desc: "广州市天河区高新技术产业开发区信息大厦B座。广州快看流媒体数字科技有限公司的研发核心枢纽。部署了 Shanshan-AI 超分辨率降噪修复引擎与高吞吐量多维骨干CDN分发中继节点群，致力于提供高水准、终身免费观看的高清视频大片展示。", x: 400, y: 250, distance: "0米" }, { title: "快看多线 BGP 极速分发云机房", desc: "广州科学城核心千兆骨干直连接入机房，多线BGP网络汇聚，直连中国电信、联通、移动骨干网。支撑最新免费手机高清影院流媒体高吞吐极速硬解码秒开。", x: 580, y: 180, distance: "285米" }, { title: "高新技术产业开发区地铁站 A口", desc: "地铁4号线重要中转枢纽，出站向南步行约120米即可直通快看科技总部信息大厦B座，也是商务加盟、数字版权接洽会客的核心交通路网坐标。", x: 290, y: 340, distance: "120米" } ]; // ==================== RENDERING UTILITIES ==================== // Switch Navigation Tabs function switchTab(tabName: string) { currentTab = tabName; // Hide all tab views const tabViews = document.querySelectorAll('.tab-view'); tabViews.forEach(view => { view.classList.add('hidden'); view.classList.remove('block'); }); // Show active tab view const targetView = document.getElementById(`tab-content-${tabName}`); if (targetView) { targetView.classList.remove('hidden'); targetView.classList.add('block'); } // Update navigation desktop active state const navTabs = document.querySelectorAll('.nav-tab'); navTabs.forEach(tab => { const btnTab = tab.getAttribute('data-tab'); if (btnTab === tabName) { tab.className = "nav-tab px-5 py-2 rounded-lg text-xs font-bold transition duration-200 cursor-pointer text-black bg-amber-500 border border-amber-400/20 shadow"; } else { tab.className = "nav-tab px-5 py-2 rounded-lg text-xs font-bold transition duration-200 cursor-pointer text-slate-400 hover:text-white hover:bg-slate-900/60"; } }); // Update mobile drawer active state const mobileTabBtns = document.querySelectorAll('.mobile-tab-btn'); mobileTabBtns.forEach(btn => { const btnTab = btn.getAttribute('data-tab'); if (btnTab === tabName) { btn.className = "mobile-tab-btn text-left px-4 py-3 rounded-xl text-sm font-bold text-white bg-amber-500/10 border border-amber-500/20"; } else { btn.className = "mobile-tab-btn text-left px-4 py-3 rounded-xl text-sm font-bold text-slate-400 hover:text-white"; } }); // Close mobile drawer if (elements.mobileDrawer) { elements.mobileDrawer.classList.add('hidden'); } // Scroll to top window.scrollTo({ top: 0, behavior: 'smooth' }); // Special triggers: if moving to contact, draw the map canvas if (tabName === 'contact') { setTimeout(() => { initMapCanvas(); }, 100); } } // Create Card HTML for Movie function createMovieCardHTML(movie: Movie): string { const imgUrl = movie.imageUrl || `https://tse-mm.bing.com/th?q=${encodeURIComponent(movie.title + ' 电影海报')}`; return `
${movie.title} - 快看影视免费在线观看
${movie.type} ${movie.isFeatured ? '主推' : ''}
★ ${movie.rating.toFixed(1)}
${movie.updateStatus}

${movie.title}

${movie.region} · ${movie.year} ${movie.playCount}次播放
`; } // Render Home Grid elements function renderHomeMovies() { if (!elements.homePopularMovies || !elements.homeLatestMovies) return; const popular = MOVIES_DATA.filter(m => m.isPopular).slice(0, 6); const latest = MOVIES_DATA.filter(m => m.isLatest).slice(0, 6); elements.homePopularMovies.innerHTML = popular.map(movie => createMovieCardHTML(movie)).join(''); elements.homeLatestMovies.innerHTML = latest.map(movie => createMovieCardHTML(movie)).join(''); // Re-bind click event to open details player modal bindMovieCardClicks(); } // Render SEO-friendly Tech News/Blogs inside Home View function renderHomeNews() { if (!elements.homeNewsGrid) return; elements.homeNewsGrid.innerHTML = NEWS_DATA.map(item => { const detailUrl = `https://tse-mm.bing.com/th?q=${encodeURIComponent(item.title)}`; return `
${item.category || "技术快报"} ${item.date}

${item.title}

${item.content}

SEO: ${item.seoKeywords} 浏览详情 →
`; }).join(''); } // Render Catalog/Products Movies List with dynamic filters function renderCatalogGrid() { if (!elements.catalogMoviesGrid) return; // Filter movies const filtered = MOVIES_DATA.filter(movie => { // Search query matching (Title, actors, director, genre) const matchSearch = searchQuery.trim() === '' || movie.title.toLowerCase().includes(searchQuery.toLowerCase()) || movie.actors.toLowerCase().includes(searchQuery.toLowerCase()) || movie.director.toLowerCase().includes(searchQuery.toLowerCase()) || movie.genre.toLowerCase().includes(searchQuery.toLowerCase()); // Type filter const matchType = filterType === '全部' || movie.type === filterType; // Region filter let matchRegion = true; if (filterRegion !== '全部') { if (filterRegion === '其他') { matchRegion = movie.region !== '大陆' && movie.region !== '港台'; } else { matchRegion = movie.region === filterRegion; } } // Year filter const matchYear = filterYear === '全部' || movie.year === filterYear; // Rating filter let matchRating = true; if (filterRating !== '全部') { const minVal = parseFloat(filterRating); matchRating = movie.rating >= minVal; } return matchSearch && matchType && matchRegion && matchYear && matchRating; }); // Sort movies if (filterSort === '最新上线') { filtered.sort((a, b) => b.year.localeCompare(a.year)); } else if (filterSort === '评分最高') { filtered.sort((a, b) => b.rating - a.rating); } else { // 最热点击 - sort by length of playCount string filtered.sort((a, b) => { const countA = parseInt(a.playCount.replace(/,/g, ''), 10); const countB = parseInt(b.playCount.replace(/,/g, ''), 10); return countB - countA; }); } // Update count indicator if (elements.catalogCountDisplay) { elements.catalogCountDisplay.innerText = filtered.length.toString(); } // Pagination bounds const totalItems = filtered.length; const maxPage = Math.max(1, Math.ceil(totalItems / ITEMS_PER_PAGE)); if (currentPage > maxPage) currentPage = maxPage; const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const pageItems = filtered.slice(startIndex, startIndex + ITEMS_PER_PAGE); // Render list or empty if (totalItems === 0) { elements.catalogMoviesGrid.classList.add('hidden'); if (elements.catalogEmptyView) elements.catalogEmptyView.classList.remove('hidden'); if (elements.catalogPagination) elements.catalogPagination.classList.add('hidden'); } else { elements.catalogMoviesGrid.classList.remove('hidden'); if (elements.catalogEmptyView) elements.catalogEmptyView.classList.add('hidden'); if (elements.catalogPagination) elements.catalogPagination.classList.remove('hidden'); elements.catalogMoviesGrid.innerHTML = pageItems.map(movie => createMovieCardHTML(movie)).join(''); bindMovieCardClicks(); renderPageNumbers(maxPage); } // Disable / enable page buttons if (elements.btnPagePrev) elements.btnPagePrev.disabled = currentPage === 1; if (elements.btnPageNext) elements.btnPageNext.disabled = currentPage === maxPage; // Render current breadcrumb tags renderActiveTags(); } // Generate pagination numbers function renderPageNumbers(maxPage: number) { if (!elements.pageNumbersContainer) return; let numbersHtml = ''; for (let i = 1; i <= maxPage; i++) { const isActive = i === currentPage; numbersHtml += ` `; } elements.pageNumbersContainer.innerHTML = numbersHtml; // Bind click const buttons = document.querySelectorAll('.page-num-btn'); buttons.forEach(btn => { btn.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; currentPage = parseInt(target.getAttribute('data-page') || '1', 10); renderCatalogGrid(); window.scrollTo({ top: elements.tabProducts ? elements.tabProducts.offsetTop - 50 : 0, behavior: 'smooth' }); }); }); } // Render active filters as breadcrumbs tags function renderActiveTags() { if (!elements.activeTagsContainer) return; const tags: { type: string; value: string; label: string }[] = []; if (filterType !== '全部') tags.push({ type: 'type', value: filterType, label: `类型: ${filterType}` }); if (filterRegion !== '全部') tags.push({ type: 'region', value: filterRegion, label: `地区: ${filterRegion}` }); if (filterYear !== '全部') tags.push({ type: 'year', value: filterYear, label: `${filterYear}年` }); if (filterRating !== '全部') tags.push({ type: 'rating', value: filterRating, label: `评分: ${filterRating}分+` }); if (searchQuery.trim() !== '') tags.push({ type: 'search', value: searchQuery, label: `搜索: "${searchQuery}"` }); if (tags.length === 0) { elements.activeTagsContainer.innerHTML = ` 交叉筛选: 暂无筛选限制 `; return; } let tagsHtml = `交叉筛选:`; tagsHtml += tags.map(tag => ` ${tag.label} `).join(''); elements.activeTagsContainer.innerHTML = tagsHtml; // Bind removal triggers const rmButtons = document.querySelectorAll('.remove-tag-btn'); rmButtons.forEach(btn => { btn.addEventListener('click', (e) => { const type = (e.currentTarget as HTMLElement).getAttribute('data-tag-type'); if (type === 'type') { filterType = '全部'; updatePillsRowSelection('type', '全部'); } else if (type === 'region') { filterRegion = '全部'; updatePillsRowSelection('region', '全部'); } else if (type === 'year') { filterYear = '全部'; updatePillsRowSelection('year', '全部'); } else if (type === 'rating') { filterRating = '全部'; updatePillsRowSelection('rating', '全部'); } else if (type === 'search') { searchQuery = ''; if (elements.catalogSearchInput) { elements.catalogSearchInput.value = ''; } if (elements.catalogSearchClear) { elements.catalogSearchClear.classList.add('hidden'); } } currentPage = 1; renderCatalogGrid(); }); }); } // Update pills active styling on row function updatePillsRowSelection(filterKey: string, activeValue: string) { const pills = document.querySelectorAll(`.filter-pill[data-filter="${filterKey}"]`); pills.forEach(pill => { const val = pill.getAttribute('data-value'); if (val === activeValue) { pill.className = "filter-pill px-3.5 py-1.5 rounded-lg font-bold border transition cursor-pointer bg-amber-500 border-amber-400 text-black shadow"; } else { pill.className = "filter-pill px-3.5 py-1.5 rounded-lg font-bold border transition cursor-pointer bg-[#030712] border-slate-900 text-slate-400 hover:text-white hover:border-slate-850"; } }); } // Bind click listeners to dynamically created movie cards function bindMovieCardClicks() { const cards = document.querySelectorAll('.movie-card'); cards.forEach(card => { card.addEventListener('click', () => { const movieId = card.getAttribute('data-movie-id'); if (movieId) { openStreamingModal(movieId); } }); }); } // Render About Tab elements (Team + Cultures) function renderAboutTab() { if (elements.aboutTeamGrid) { elements.aboutTeamGrid.innerHTML = TEAM_MEMBERS.map(member => { const portraitUrl = member.imageUrl || `https://tse-mm.bing.com/th?q=${encodeURIComponent(member.name + ' executive portrait')}`; return `
${member.name} - 快看科技管理肖像

${member.name}

${member.role}

${member.bio}

`; }).join(''); } // Cultures Mission & Vision if (elements.cultureMissionText) elements.cultureMissionText.innerText = CORPORATE_CULTURE.mission; if (elements.cultureVisionText) elements.cultureVisionText.innerText = CORPORATE_CULTURE.vision; if (elements.cultureValuesList) { elements.cultureValuesList.innerHTML = CORPORATE_CULTURE.values.map(val => `
  • ⚡ ${val}
    • `).join(''); } // Render Milestones years panel renderTimelinePanel(); } // Render milestones timeline function renderTimelinePanel() { if (!elements.timelineYearsPanel) return; let timelineHtml = ''; HISTORY_EVENTS.forEach((ev, idx) => { const isSelected = idx === selectedTimelineIndex; timelineHtml += ` `; }); elements.timelineYearsPanel.innerHTML = timelineHtml; // Bind click trigger const years = document.querySelectorAll('.timeline-year-selector'); years.forEach(yr => { yr.addEventListener('click', (e) => { const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-index') || '0', 10); selectedTimelineIndex = idx; // Update details view const event = HISTORY_EVENTS[selectedTimelineIndex]; if (elements.timelineYearBig) elements.timelineYearBig.innerText = event.year; if (elements.timelineTitleDisplay) elements.timelineTitleDisplay.innerText = event.title; if (elements.timelineDescDisplay) elements.timelineDescDisplay.innerText = event.description; // Re-render years panel to show active glowing outline renderTimelinePanel(); }); }); // Init default values on startup const initEv = HISTORY_EVENTS[selectedTimelineIndex]; if (elements.timelineYearBig) elements.timelineYearBig.innerText = initEv.year; if (elements.timelineTitleDisplay) elements.timelineTitleDisplay.innerText = initEv.title; if (elements.timelineDescDisplay) elements.timelineDescDisplay.innerText = initEv.description; } // ==================== ONLINE AI CHAT HELPER SIMULATOR ==================== const CHAT_SUGGESTIONS = [ "如何用手机免VIP观看高清电视剧全集？", "支持哪些AirCast电视投屏协议？", "播放卡顿如何自助优化BGP线路节点？", "关于快看影视的数字版权合规声明" ]; const AI_REPLY_SCRIPT: { [key: string]: string } = { "如何用手机免VIP观看高清电视剧全集？": "广州快看科技郑重承诺：快看影视所有资源支持终身免费观看！ 本站承诺绝不设置付费套路、绝不强制看试看、不卡VIP门槛。您只需在本站检索心仪的剧集（如《狂飙之破晓猎人》），点击‘极速点播播放’，系统即会自动匹配最通畅的BGP骨干传输节点。全站剧集完全支持一站式高清硬解码，手机或电脑直连即可高清秒播！", "支持哪些AirCast电视投屏协议？": "快看影视自研的AirCast无线大屏免VIP投屏协议完全兼容目前市面上主流的：DLNA协议、Apple AirPlay投屏系统以及Miracast直连协议。您只需在手机客户端打开点播播放，点击播放器右上角的‘Aircast 投屏’图标，系统会自动在同一个局域网内扫描您的智能电视或家庭投影。选中后即可实现4K超清画质无损投屏播放，免除任何大屏端VIP充值陷阱！", "播放卡顿如何自助优化BGP线路节点？": "如果您在深圳、北京等网络高负荷时段遇到流媒体微小延迟，可以在快看专线播放器的‘流媒体专线节点选路’菜单中自助切换。本站首推：广州骨干BGP中继专线。此外，我们备用了：华南千兆骨干中继线、5G手机直连专用备用节点。点击切换即可由AI为您智能重新校对多源中继分片，保障秒开。建议优先选择延迟率低于35ms的专线。", "关于快看影视的数字版权合规声明": "快看影视（广州快看流媒体数字科技有限公司）严守知识产权与版权规范。我们主要与华南各大中小型独立影片发行人、文旅宣发单位签约，免费向全网展示正版合规内容。如果您在本站展示的自动雷达采集抓取中发现存在任何版权不妥，请发送侵权证明工单至 dmca@kuaikan.com，我们的合规公共关系室将在24小时内极速回应并进行合规妥善处理。" }; function initOnlineChatHelper() { if (!elements.chatSuggestionBox || !elements.chatMessagesBox) return; // Render quick suggestions elements.chatSuggestionBox.innerHTML = CHAT_SUGGESTIONS.map(s => ` `).join(''); // Initial Greeting from bot appendChatBubble('bot', `您好！我是快看影视的7x24在线AI极速客服助理，很高兴为您解答！

    本站承诺：最新免费手机高清电影与免费电视剧全集一律终身免费观看，不用VIP卡，也没有流氓恶意大屏弹窗。请问您有什么需求或求片反馈？`); // Bind clicks to suggestions const suggBtns = document.querySelectorAll('.chat-sugg-btn'); suggBtns.forEach(btn => { btn.addEventListener('click', (e) => { const q = (e.currentTarget as HTMLElement).innerText.trim(); handleUserChatQuery(q); }); }); } function appendChatBubble(sender: 'user' | 'bot', text: string) { if (!elements.chatMessagesBox) return; const bubble = document.createElement('div'); bubble.className = `flex gap-2.5 max-w-[85%] ${sender === 'user' ? 'self-end ml-auto flex-row-reverse text-right' : 'self-start mr-auto text-left'}`; const avatar = sender === 'user' ? '🙋' : '🤖'; const bgClass = sender === 'user' ? 'bg-amber-500 text-black font-medium' : 'bg-slate-900 text-slate-100 border border-slate-850'; bubble.innerHTML = `
    ${avatar}
    ${text}
    `; elements.chatMessagesBox.appendChild(bubble); elements.chatMessagesBox.scrollTop = elements.chatMessagesBox.scrollHeight; } function handleUserChatQuery(text: string) { if (text.trim() === '') return; // Append user message appendChatBubble('user', text); // Bot response simulation with slight lag setTimeout(() => { const matchedReply = AI_REPLY_SCRIPT[text]; if (matchedReply) { appendChatBubble('bot', matchedReply); } else { // General fall-back reply with SEO target keywords appendChatBubble('bot', `收到您的反馈！关于：“${text}”，已自动录入快看技术研发中心的运维日志库。

    快看影视作为最新免费手机高清影院与电视剧影视大全行业标杆，任何求片诉求或网络加速卡顿故障，都会在12小时内由人工流媒体运营大员帮您解决！

    您亦可在‘联系我们’页面直接提交工单，微信通知将实时为您派发反馈进展！`); } }, 450); } // ==================== INTERACTIVE HEADQUARTERS VECTOR MAP ==================== function initMapCanvas() { const canvas = elements.mapCanvas; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; // Fix high-DPI scaling issues const rect = canvas.getBoundingClientRect(); canvas.width = rect.width * window.devicePixelRatio; canvas.height = rect.height * window.devicePixelRatio; ctx.scale(window.devicePixelRatio, window.devicePixelRatio); // Clear and Draw the sandbox grid map drawMapGrid(ctx, rect.width, rect.height); } function drawMapGrid(ctx: CanvasRenderingContext2D, width: number, height: number) { ctx.clearRect(0, 0, width, height); ctx.save(); // Translate & Zoom ctx.translate(width / 2 + mapOffsetX, height / 2 + mapOffsetY); ctx.scale(mapZoom, mapZoom); ctx.translate(-width / 2, -height / 2); // 1. Draw Map Mesh Background ctx.strokeStyle = '#1e293b'; ctx.lineWidth = 0.5; const gridSize = 40; for (let x = -gridSize * 10; x < width + gridSize * 10; x += gridSize) { ctx.beginPath(); ctx.moveTo(x, -height * 5); ctx.lineTo(x, height * 5); ctx.stroke(); } for (let y = -gridSize * 10; y < height + gridSize * 10; y += gridSize) { ctx.beginPath(); ctx.moveTo(-width * 5, y); ctx.lineTo(width * 5, y); ctx.stroke(); } // 2. Draw Simulated Geographic Road Network Vectors ctx.strokeStyle = '#111827'; ctx.lineWidth = 24; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; // Road A: High-Tech Boulevard (Horizontal) ctx.beginPath(); ctx.moveTo(-width, 250); ctx.lineTo(width * 2, 250); ctx.stroke(); // Road B: Science Ring Road (Diagonal) ctx.beginPath(); ctx.moveTo(100, -height); ctx.lineTo(600, height * 2); ctx.stroke(); // Draw inner overlay path for roads ctx.strokeStyle = '#1f2937'; ctx.lineWidth = 20; ctx.stroke(); // Road Lines (dotted center) ctx.strokeStyle = '#374151'; ctx.lineWidth = 1; ctx.setLineDash([8, 8]); ctx.beginPath(); ctx.moveTo(-width, 250); ctx.lineTo(width * 2, 250); ctx.moveTo(100, -height); ctx.lineTo(600, height * 2); ctx.stroke(); ctx.setLineDash([]); // clear dash // 3. Draw Water Bay/Lake representation (Guangzhou Key Coordinates) ctx.fillStyle = '#1e293b'; ctx.beginPath(); ctx.arc(680, 420, 110, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#d97706'; ctx.lineWidth = 0.5; ctx.stroke(); // Water label ctx.fillStyle = '#475569'; ctx.font = '9px monospace'; ctx.fillText("珠江数字流生态湿地湾区", 620, 410); // Road labels ctx.fillStyle = '#64748b'; ctx.font = '10px monospace'; ctx.fillText("大湾区高新技术科技大道", 80, 235); ctx.fillText("科学谷北二路", 480, 490); // 4. Render POIs Nodes on sandbox MAP_POIS.forEach((poi, idx) => { const isSelected = idx === selectedPoiIndex; // Draw pulsing ring on selected POI if (isSelected) { ctx.fillStyle = 'rgba(217, 119, 6, 0.2)'; ctx.beginPath(); const pulseSize = 25 + Math.sin(Date.now() / 150) * 4; ctx.arc(poi.x, poi.y, pulseSize, 0, Math.PI * 2); ctx.fill(); } // Core dot node ctx.fillStyle = isSelected ? '#f59e0b' : '#334155'; ctx.strokeStyle = isSelected ? '#ffffff' : '#475569'; ctx.lineWidth = isSelected ? 2.5 : 1.5; ctx.beginPath(); ctx.arc(poi.x, poi.y, isSelected ? 9 : 6.5, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); // Text Label above node ctx.fillStyle = isSelected ? '#ffffff' : '#94a3b8'; ctx.font = isSelected ? 'bold 11px font-sans' : '10px font-sans'; // Icon badge representation const markerText = idx === 0 ? "🏢 " + poi.title : idx === 1 ? "📡 " + poi.title : "🚇 " + poi.title; ctx.fillText(markerText, poi.x - 70, poi.y - 16); }); ctx.restore(); } // Map Event handlers for Zooming/Panning function setupMapControls() { const canvas = elements.mapCanvas; if (!canvas) return; elements.mapCtrlZoomIn?.addEventListener('click', () => { mapZoom = Math.min(2.5, mapZoom + 0.15); initMapCanvas(); }); elements.mapCtrlZoomOut?.addEventListener('click', () => { mapZoom = Math.max(0.65, mapZoom - 0.15); initMapCanvas(); }); elements.mapCtrlReset?.addEventListener('click', () => { mapZoom = 1.0; mapOffsetX = 0; mapOffsetY = 0; selectedPoiIndex = 0; if (elements.poiRowsSelector) { elements.poiRowsSelector.value = "0"; } updatePoiMetaCard(0); initMapCanvas(); }); // Selector dropdown handler elements.poiRowsSelector?.addEventListener('change', (e) => { const idx = parseInt((e.target as HTMLSelectElement).value, 10); panToPoi(idx); }); // Mouse Drag implementation canvas.addEventListener('mousedown', (e) => { isDraggingMap = true; startDragX = e.clientX - mapOffsetX; startDragY = e.clientY - mapOffsetY; }); window.addEventListener('mousemove', (e) => { if (!isDraggingMap) return; mapOffsetX = e.clientX - startDragX; mapOffsetY = e.clientY - startDragY; initMapCanvas(); }); window.addEventListener('mouseup', () => { isDraggingMap = false; }); // Touch Drag for mobile responsive canvas.addEventListener('touchstart', (e) => { if (e.touches.length === 1) { isDraggingMap = true; startDragX = e.touches[0].clientX - mapOffsetX; startDragY = e.touches[0].clientY - mapOffsetY; } }); canvas.addEventListener('touchmove', (e) => { if (isDraggingMap && e.touches.length === 1) { mapOffsetX = e.touches[0].clientX - startDragX; mapOffsetY = e.touches[0].clientY - startDragY; initMapCanvas(); } }); canvas.addEventListener('touchend', () => { isDraggingMap = false; }); // Pulsing render loop for select state setInterval(() => { if (currentTab === 'contact') { initMapCanvas(); } }, 250); } function panToPoi(idx: number) { selectedPoiIndex = idx; const poi = MAP_POIS[idx]; // Smoothly set state coordinates back to center of target POI mapZoom = 1.25; mapOffsetX = 0; // reset offsets mapOffsetY = 0; // Custom adjust offsets based on target const canvas = elements.mapCanvas; if (canvas) { const rect = canvas.getBoundingClientRect(); mapOffsetX = (rect.width / 2) - poi.x; mapOffsetY = (rect.height / 2) - poi.y; } updatePoiMetaCard(idx); initMapCanvas(); } function updatePoiMetaCard(idx: number) { const poi = MAP_POIS[idx]; if (elements.poiMetaDist) elements.poiMetaDist.innerText = poi.distance; if (elements.poiMetaTitle) elements.poiMetaTitle.innerText = poi.title; if (elements.poiMetaDesc) elements.poiMetaDesc.innerText = poi.desc; } // ==================== CINEMA EXPERIENCE PLAYER MODAL (SIMULATION) ==================== function openStreamingModal(movieId: string) { const movie = MOVIES_DATA.find(m => m.id === movieId); if (!movie || !elements.videoStreamDialog || !elements.modalDynamicContent) return; // Render comprehensive simulated player content inside modal elements.videoStreamDialog.classList.remove('hidden'); elements.videoStreamDialog.classList.add('flex'); document.body.classList.add('overflow-hidden'); // disable main scrolling isPlayerPlaying = true; playerProgress = 15 + Math.floor(Math.random() * 30); // dynamic initial progress // Start player ticker initPlayerTicker(movie); renderPlayerInsideModal(movie); } function renderPlayerInsideModal(movie: Movie) { if (!elements.modalDynamicContent) return; elements.modalDynamicContent.innerHTML = `
    KK

    广州多线路骨干中继中... 双声道杜比杜比硬解极速启动

    00:15:32 02:18:00
    线路: ${selectedPlaybackLine}
    🔈
    ${movie.type} ${movie.genre} ${movie.region} · ${movie.year}上映

    ${movie.title}

    网民评分 ${movie.rating.toFixed(1)}分
    播放热度 ${movie.playCount}

    快看影院介绍说明：

    ${movie.description}

    BGP专线骨干节点切换（流畅免VIP硬解选路）：

    CREATIVES ${movie.director} 核心导演
    STARRING ${movie.actors} 主演出演
    FORMAT ${movie.durationOrEpisodes} 媒体规格
    状态: ${movie.updateStatus} 永久免费看
    `; // Bind controller listeners inside modal setupPlayerListeners(); } function initPlayerTicker(movie: Movie) { if (playerTimerInterval) clearInterval(playerTimerInterval); // Simulated player ticker drawing graphic on canvas playerTimerInterval = setInterval(() => { if (!isPlayerPlaying) return; // Tick progress % playerProgress = (playerProgress + 0.1) % 100; // Update Seeker range elements in DOM safely const progressRange = document.getElementById('player-progress-range') as HTMLInputElement; if (progressRange) { progressRange.value = playerProgress.toString(); } // Draw dynamic content on movie stream canvas const canvas = document.getElementById('movie-stream-canvas') as HTMLCanvasElement; if (canvas) { const ctx = canvas.getContext('2d'); if (ctx) { drawSimulatedVideoStream(ctx, canvas.width, canvas.height, movie); } } // Update timers updatePlayerTimestamps(); }, 100); } function updatePlayerTimestamps() { const totalSeconds = 2 * 3600 + 18 * 60; // 02:18:00 const currentSeconds = Math.floor((playerProgress / 100) * totalSeconds); const formatTime = (sec: number) => { const h = Math.floor(sec / 3600); const m = Math.floor((sec % 3600) / 60); const s = sec % 60; return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; }; const currEl = document.getElementById('player-time-curr'); if (currEl) currEl.innerText = formatTime(currentSeconds); const totalEl = document.getElementById('player-time-total'); if (totalEl) totalEl.innerText = formatTime(totalSeconds); } function drawSimulatedVideoStream(ctx: CanvasRenderingContext2D, width: number, height: number, movie: Movie) { ctx.clearRect(0, 0, width, height); // 1. Black cinema backing ctx.fillStyle = '#030712'; ctx.fillRect(0, 0, width, height); // 2. Multi-spectral grid ctx.strokeStyle = 'rgba(245, 158, 11, 0.05)'; ctx.lineWidth = 1; const meshSize = 30; for (let x = 0; x < width; x += meshSize) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); } // 3. Simulated wave form rendering ctx.strokeStyle = '#f59e0b'; ctx.lineWidth = 2; ctx.beginPath(); const step = 8; const points = Math.floor(width / step); const waveAmp = 15 + Math.sin(Date.now() / 100) * 8; for (let i = 0; i <= points; i++) { const x = i * step; const y = (height / 2) + Math.sin(i * 0.12 + Date.now() / 150) * waveAmp; if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } } ctx.stroke(); // Draw secondary blue wave overlay ctx.strokeStyle = '#d97706'; ctx.lineWidth = 1.5; ctx.beginPath(); for (let i = 0; i <= points; i++) { const x = i * step; const y = (height / 2) + Math.sin(i * 0.08 - Date.now() / 200) * (waveAmp * 0.6); if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } } ctx.stroke(); // 4. Floating holographic movie credentials ctx.fillStyle = '#ffffff'; ctx.font = '13px monospace'; ctx.fillText(`▶️ 正在硬解：${movie.title}`, 20, 35); ctx.fillStyle = '#f59e0b'; ctx.font = 'bold 10px monospace'; ctx.fillText("广州骨干 CDN 5G中继极速专线", 20, 55); // Draw frames counters const fps = 60; ctx.fillStyle = '#64748b'; ctx.font = '9px monospace'; ctx.fillText(`FPS: ${fps} | 比特率: 18.5 Mbps | 音频: 杜比杜比 Atmos 双声道`, 20, height - 20); // Floating ambient rings on canvas ctx.strokeStyle = 'rgba(245, 158, 11, 0.12)'; ctx.beginPath(); ctx.arc(width - 80, height / 2, 40 + Math.sin(Date.now() / 300) * 10, 0, Math.PI * 2); ctx.stroke(); } function setupPlayerListeners() { const bottomPlayBtn = document.getElementById('player-bottom-play-btn'); const midToggle = document.getElementById('player-mid-toggle'); const progressRange = document.getElementById('player-progress-range') as HTMLInputElement; const volumeRange = document.getElementById('player-volume-range') as HTMLInputElement; const aircastBtn = document.getElementById('player-aircast-btn'); // Buffering text overlay cache const halo = document.getElementById('video-canvas-halo'); const togglePlayback = () => { isPlayerPlaying = !isPlayerPlaying; // Toggle spinner visibility when pause/play if (halo) { if (isPlayerPlaying) { halo.classList.add('hidden'); } else { halo.classList.remove('hidden'); const bufferMsg = document.getElementById('player-buffering-msg'); if (bufferMsg) bufferMsg.innerText = "播放暂停 ⏸ KK-流媒体硬解系统已挂起"; } } if (bottomPlayBtn) bottomPlayBtn.innerText = isPlayerPlaying ? '暂停 ⏸' : '播放 ▶️'; if (midToggle) midToggle.innerHTML = `${isPlayerPlaying ? '⏸' : '▶️'}`; }; // Bind play triggers bottomPlayBtn?.addEventListener('click', togglePlayback); midToggle?.addEventListener('click', togglePlayback); // Manual Seeker slider handler progressRange?.addEventListener('input', (e) => { playerProgress = parseFloat((e.target as HTMLInputElement).value); updatePlayerTimestamps(); }); // Volume slider handler volumeRange?.addEventListener('input', (e) => { playerVolume = parseInt((e.target as HTMLInputElement).value, 10); }); // Line selectors click handlers const nodeButtons = document.querySelectorAll('.player-node-btn'); nodeButtons.forEach(btn => { btn.addEventListener('click', (e) => { const line = (e.currentTarget as HTMLElement).getAttribute('data-line') || ''; selectedPlaybackLine = line; // Update indicators const indicator = document.getElementById('player-line-indicator'); if (indicator) indicator.innerText = line; // Re-trigger visual outline glow state nodeButtons.forEach(b => { b.className = "player-node-btn p-3 rounded-xl border text-left flex flex-col justify-between transition cursor-pointer border-slate-900 bg-slate-950/60 text-slate-400 hover:text-white"; }); (e.currentTarget as HTMLElement).className = "player-node-btn p-3 rounded-xl border text-left flex flex-col justify-between transition cursor-pointer border-amber-500 bg-amber-500/5 text-amber-400"; // Display dynamic routing success toast triggerSuccessToast("分发骨干线路切换成功！", `已由快看智能云为您重塑数据流，直连 “${line}”，高并发更流畅！`); }); }); // Aircast casting button aircastBtn?.addEventListener('click', () => { triggerSuccessToast("AirCast智能大屏投屏启动！", "正在多播搜索局域网电视/家用投影。已秒级匹配，高清无损画面投射中！"); }); // Hide halo initially as autoplay simulator if (halo) halo.classList.add('hidden'); } // ==================== GLOBAL SUCCESS TOAST TRIGGER ==================== function triggerSuccessToast(title: string, desc: string) { const toast = elements.globalSuccessToast; if (!toast) return; if (elements.toastTitle) elements.toastTitle.innerText = title; if (elements.toastDesc) elements.toastDesc.innerText = desc; toast.classList.remove('hidden'); toast.classList.add('flex'); // Automatically fade-out toast after 4s setTimeout(() => { toast.classList.add('hidden'); toast.classList.remove('flex'); }, 4500); } // ==================== CONFIGURE AND BIND LIFE CYCLES ==================== function setupAllEventListeners() { // 1. Navigation clicks const navTabs = document.querySelectorAll('.nav-tab'); navTabs.forEach(tab => { tab.addEventListener('click', (e) => { const tabName = (e.currentTarget as HTMLElement).getAttribute('data-tab'); if (tabName) switchTab(tabName); }); }); const mobileTabs = document.querySelectorAll('.mobile-tab-btn'); mobileTabs.forEach(tab => { tab.addEventListener('click', (e) => { const tabName = (e.currentTarget as HTMLElement).getAttribute('data-tab'); if (tabName) switchTab(tabName); }); }); // Header and Footer Logo clicks elements.headerLogoBtn?.addEventListener('click', () => switchTab('home')); elements.footerLogoBtn?.addEventListener('click', () => switchTab('home')); // Mobile Hamburger menu toggle elements.mobileMenuHamburger?.addEventListener('click', () => { if (elements.mobileDrawer) { elements.mobileDrawer.classList.toggle('hidden'); } }); // Mobile quick triggers elements.mobileSearchTrigger?.addEventListener('click', () => { switchTab('products'); setTimeout(() => { elements.catalogSearchInput?.focus(); }, 150); }); elements.mobileContactTrigger?.addEventListener('click', () => { switchTab('contact'); }); // 2. Home view quick redirection triggers elements.viewMorePopularBtn?.addEventListener('click', () => { filterSort = '最热点击'; if (elements.catalogSortSelect) { elements.catalogSortSelect.value = '最热点击'; } switchTab('products'); currentPage = 1; renderCatalogGrid(); }); elements.heroPlayTrigger?.addEventListener('click', () => { // Autoplay featured "流浪地球3：前哨晨曦" (m12) openStreamingModal('m12'); }); elements.heroCatalogTrigger?.addEventListener('click', () => { switchTab('products'); }); elements.commitmentContactBtn?.addEventListener('click', () => { switchTab('contact'); }); // 3. Products/Catalog search input & filter pill click bindings elements.catalogSearchInput?.addEventListener('input', (e) => { const val = (e.target as HTMLInputElement).value; searchQuery = val; // Toggle clean input cross button if (elements.catalogSearchClear) { if (val.trim() !== '') { elements.catalogSearchClear.classList.remove('hidden'); } else { elements.catalogSearchClear.classList.add('hidden'); } } currentPage = 1; renderCatalogGrid(); }); elements.catalogSearchClear?.addEventListener('click', () => { searchQuery = ''; if (elements.catalogSearchInput) elements.catalogSearchInput.value = ''; elements.catalogSearchClear?.classList.add('hidden'); currentPage = 1; renderCatalogGrid(); }); // Filter pills row click events delegation const filterRows = ['type', 'region', 'year', 'rating']; filterRows.forEach(row => { const rowEl = document.getElementById(`pill-row-${row}`); rowEl?.addEventListener('click', (e) => { const target = e.target as HTMLElement; if (target.classList.contains('filter-pill')) { const val = target.getAttribute('data-value') || '全部'; if (row === 'type') filterType = val; else if (row === 'region') filterRegion = val; else if (row === 'year') filterYear = val; else if (row === 'rating') filterRating = val; updatePillsRowSelection(row, val); currentPage = 1; renderCatalogGrid(); } }); }); // Sorting dropdown event elements.catalogSortSelect?.addEventListener('change', (e) => { filterSort = (e.target as HTMLSelectElement).value; currentPage = 1; renderCatalogGrid(); }); // Pagination buttons prev/next elements.btnPagePrev?.addEventListener('click', () => { if (currentPage > 1) { currentPage--; renderCatalogGrid(); window.scrollTo({ top: elements.tabProducts ? elements.tabProducts.offsetTop - 50 : 0, behavior: 'smooth' }); } }); elements.btnPageNext?.addEventListener('click', () => { currentPage++; renderCatalogGrid(); window.scrollTo({ top: elements.tabProducts ? elements.tabProducts.offsetTop - 50 : 0, behavior: 'smooth' }); }); // Catalog empty state reset elements.catalogEmptyReset?.addEventListener('click', () => { filterType = '全部'; filterRegion = '全部'; filterYear = '全部'; filterRating = '全部'; searchQuery = ''; filterSort = '最热点击'; if (elements.catalogSearchInput) elements.catalogSearchInput.value = ''; if (elements.catalogSortSelect) elements.catalogSortSelect.value = '最热点击'; elements.catalogSearchClear?.classList.add('hidden'); filterRows.forEach(row => updatePillsRowSelection(row, '全部')); currentPage = 1; renderCatalogGrid(); }); // Ctrl+F Keyboard quick search focus window.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'f') { e.preventDefault(); switchTab('products'); setTimeout(() => { elements.catalogSearchInput?.focus(); }, 150); } }); elements.searchShortcutBtn?.addEventListener('click', () => { switchTab('products'); setTimeout(() => { elements.catalogSearchInput?.focus(); }, 150); }); // Header collaboration btn elements.headerCollaborationBtn?.addEventListener('click', () => { switchTab('contact'); setTimeout(() => { const select = document.getElementById('form-message-type') as HTMLSelectElement; if (select) { select.value = "商务加盟推广"; select.dispatchEvent(new Event('change')); } const descInput = document.getElementById('form-content'); if (descInput) descInput.focus(); }, 150); }); // 4. Contact View Form submission log elements.contactForm?.addEventListener('submit', (e) => { e.preventDefault(); // Captcha verification checking "KK" const captcha = (document.getElementById('form-captcha') as HTMLInputElement).value.trim().toUpperCase(); if (captcha !== 'KK') { alert("安全验证防刷码校验失败，请输大写拼音拼音“KK”！"); return; } // Disable button to prevent double submit if (elements.formSubmitBtn) elements.formSubmitBtn.disabled = true; if (elements.formSubmitSpinner) elements.formSubmitSpinner.classList.remove('hidden'); if (elements.formSubmitText) elements.formSubmitText.innerText = "快看安全算法对接入网解密中..."; // Simulated network latencies setTimeout(() => { // Show success toast const name = (document.getElementById('form-name') as HTMLInputElement).value; const type = (document.getElementById('form-message-type') as HTMLSelectElement).value; triggerSuccessToast( "工单安全提报成功！", `尊敬的 “${name}”，您的工单【${type}】已通过快看TSL专线安全加密归档，流媒体运维大员将在12小时内微信/电话回传处理进度！` ); // Re-enable and reset form if (elements.formSubmitBtn) elements.formSubmitBtn.disabled = false; if (elements.formSubmitSpinner) elements.formSubmitSpinner.classList.add('hidden'); if (elements.formSubmitText) elements.formSubmitText.innerText = "安全提报快看工单"; elements.contactForm.reset(); }, 1200); }); elements.triggerOnlineChat?.addEventListener('click', () => { elements.onlineChatWindow?.classList.remove('hidden'); }); // 5. Floating AI chat logs toggle elements.floatingChatTrigger?.addEventListener('click', () => { elements.onlineChatWindow?.classList.toggle('hidden'); }); elements.chatWindowClose?.addEventListener('click', () => { elements.onlineChatWindow?.classList.add('hidden'); }); elements.chatSubmitForm?.addEventListener('submit', (e) => { e.preventDefault(); const txt = elements.chatUserInput.value; if (txt.trim() !== '') { handleUserChatQuery(txt); elements.chatUserInput.value = ''; } }); // 6. Modal close actions elements.modalCloseTrigger?.addEventListener('click', () => { if (playerTimerInterval) clearInterval(playerTimerInterval); if (elements.videoStreamDialog) elements.videoStreamDialog.classList.add('hidden'); document.body.classList.remove('overflow-hidden'); }); elements.toastCloseBtn?.addEventListener('click', () => { elements.globalSuccessToast?.classList.add('hidden'); }); } // ==================== INITIALIZATION BOOTSTRAP ==================== function bootstrapApp() { // Render home elements renderHomeMovies(); renderHomeNews(); // Render product catalogue grid renderCatalogGrid(); // Render milestones timeline, team cards renderAboutTab(); // Configure custom dynamic vector maps setupMapControls(); // Configure online chat assistant suggest topics initOnlineChatHelper(); // Attach navigation and triggers setupAllEventListeners(); // Autoclose loading dialog if any console.log("快看影视-最新免费手机高清影院-电视剧影视大全平台启动成功！BGP专线部署状态：良好。"); } window.addEventListener('DOMContentLoaded', bootstrapApp);