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; let visualizerAnimationId: number | null = 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座。广州琪琪流媒体数字科技有限公司的研发核心中枢。部署了量子AI超分辨率修复画质核心、量子多线BGP高速分发系统，致力于提供高清晰度、免VIP的绿色免费视频展示端。", x: 400, y: 250, distance: "0米" }, { title: "量子多线 BGP 高速云机房", desc: "广州科学城核心千兆骨干直连接入云端机房，多线BGP带宽汇聚，直接接入国内主流骨干网。全面支撑最新最全免费电影及高分电视剧影视大全的高负荷流畅缓冲。", x: 580, y: 180, distance: "285米" }, { title: "高新技术地铁站 A口", desc: "地铁号线高新技术产业站核心枢纽，出站向南步行约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-white bg-purple-600 border border-purple-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-purple-500/10 border border-purple-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 (supports search and redirect according to user requirements) function createMovieCardHTML(movie: Movie): string { const keyword = encodeURIComponent(movie.title); const imgUrl = movie.imageUrl || `https://tse-mm.bing.com/th?q=${keyword}`; 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(''); bindMovieCardClicks(); } // Render SEO-friendly News 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 => { 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()); const matchType = filterType === '全部' || movie.type === filterType; let matchRegion = true; if (filterRegion !== '全部') { if (filterRegion === '其他') { matchRegion = movie.region !== '大陆' && movie.region !== '港台'; } else { matchRegion = movie.region === filterRegion; } } const matchYear = filterYear === '全部' || movie.year === filterYear; 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 playCount parsed to integer 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); } if (elements.btnPagePrev) elements.btnPagePrev.disabled = currentPage === 1; if (elements.btnPageNext) elements.btnPageNext.disabled = currentPage === maxPage; 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; 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; 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-purple-600 border-purple-400 text-white shadow"; } else { pill.className = "filter-pill px-3.5 py-1.5 rounded-lg font-bold border transition cursor-pointer bg-[#04020a] border-purple-950/40 text-slate-400 hover:text-white hover:border-purple-800"; } }); } // Bind clicks to video modal play 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 + Timeline) 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)}`; 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(''); } 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; 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; 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; renderTimelinePanel(); }); }); 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观看最新电影电视剧全集？", "支持哪些魔镜无线电视投屏协议？", "播放卡顿如何自主调优量子加速BGP线路？", "关于琪琪影院的数字合规与版权政策" ]; const AI_REPLY_SCRIPT: { [key: string]: string } = { "如何用手机免VIP观看最新电影电视剧全集？": "广州琪琪流媒体技术郑重承诺：琪琪影院全站所有的电影、高分电视剧均提供终身免费观看！ 本站致力于打破VIP高昂限制。您只需在影片检索大库选择心仪影片，点击‘立即极速点播’，系统即会自动匹配最畅通的‘量子BGP加速专线’。全站画质均通过高算力无损还原，秒播秒开，无任何强制付费卡！", "支持哪些魔镜无线电视投屏协议？": "琪琪影院自主开源的“魔镜大屏多端智能免卡投屏系统”，在技术上完全兼容和支持：DLNA国际标准协议、Apple AirPlay投屏通道以及安卓/华为无线多端投影技术。手机和大屏投影设备处于同一家庭网下即可实现一键投影。完美跨越电视端高额大屏VIP卡门槛！", "播放卡顿如何自主调优量子加速BGP线路？": "在极高并发时段，如果您遇到微小卡顿，可在视频模拟播放面板中一秒自由切换不同的加速中继：\n- 推荐：广州 BGP 极速 4K 专线\n- 备用：华南千兆骨干中继线\n- 直连：5G 手机直连备用节点\n切换线路后，系统会启动底层‘神盾安全防线’重新定向。推荐选用当前负载低于40%的流路径！", "关于琪琪影院的数字合规与版权政策": "琪琪影院（广州琪琪流媒体数字科技有限公司）极度敬畏正规数字版权。我们引进并展示海量海内外中小独立制作室、国风动画发行方和高品质微电影的正规合规内容。如果您在平台智能雷达缓存中发现版权疑问，请致信 dmca@qiqi.com，我们的合规治理团队将在24小时内极速下架和校核！" }; function initOnlineChatHelper() { if (!elements.chatSuggestionBox || !elements.chatMessagesBox) return; elements.chatSuggestionBox.innerHTML = CHAT_SUGGESTIONS.map(s => ` `).join(''); appendChatBubble('bot', `您好！我是琪琪流媒体的7x24小时在线AI客服助理，竭诚为您提供高精细服务！

    本站承诺：所有免费电影与电视剧大全均可免VIP、无广告、终身免费在线看。请问您有什么求片问题或故障反馈？`); 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-pink-500 text-white font-medium shadow-md shadow-pink-500/10' : 'bg-[#090412]/95 text-slate-100 border border-purple-950/40'; bubble.innerHTML = `
    ${avatar}
    ${text}
    `; elements.chatMessagesBox.appendChild(bubble); elements.chatMessagesBox.scrollTop = elements.chatMessagesBox.scrollHeight; } function handleUserChatQuery(text: string) { if (text.trim() === '') return; appendChatBubble('user', text); setTimeout(() => { const matchedReply = AI_REPLY_SCRIPT[text]; if (matchedReply) { appendChatBubble('bot', matchedReply); } else { 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; const rect = canvas.getBoundingClientRect(); canvas.width = rect.width * window.devicePixelRatio; canvas.height = rect.height * window.devicePixelRatio; ctx.scale(window.devicePixelRatio, window.devicePixelRatio); 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 = '#1a1230'; 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 = '#070314'; 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 = '#0f0724'; ctx.lineWidth = 20; ctx.stroke(); // Road Lines (dotted center) ctx.strokeStyle = '#311a54'; 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 = '#0f0822'; ctx.beginPath(); ctx.arc(680, 420, 110, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = '#d946ef'; ctx.lineWidth = 0.5; ctx.stroke(); // Water label ctx.fillStyle = '#5c4885'; ctx.font = '9px monospace'; ctx.fillText("大湾区数字媒体创新生态湖泊", 610, 410); // Road labels ctx.fillStyle = '#64538a'; 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(236, 72, 153, 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 ? '#ec4899' : '#3c1d70'; ctx.strokeStyle = isSelected ? '#ffffff' : '#6347a6'; 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' : '#a78bfa'; ctx.font = isSelected ? 'bold 11px font-sans' : '10px font-sans'; 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 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 responsiveness 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; }); // Pulse loop rendering setInterval(() => { if (currentTab === 'contact') { initMapCanvas(); } }, 250); } function panToPoi(idx: number) { selectedPoiIndex = idx; const poi = MAP_POIS[idx]; mapZoom = 1.25; mapOffsetX = 0; mapOffsetY = 0; 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 ==================== function openStreamingModal(movieId: string) { const movie = MOVIES_DATA.find(m => m.id === movieId); if (!movie || !elements.videoStreamDialog || !elements.modalDynamicContent) return; elements.videoStreamDialog.classList.remove('hidden'); elements.videoStreamDialog.classList.add('flex'); document.body.classList.add('overflow-hidden'); isPlayerPlaying = true; playerProgress = 20 + Math.floor(Math.random() * 25); initPlayerTicker(movie); renderPlayerInsideModal(movie); startVisualizerAnimation(); } function renderPlayerInsideModal(movie: Movie) { if (!elements.modalDynamicContent) return; elements.modalDynamicContent.innerHTML = `
    QQ

    量子BGP加速中继分流中... AI画质硬解启动

    00:15:32 ${movie.durationOrEpisodes.split('/')[0]}
    线路: ${selectedPlaybackLine}
    音量 ${playerVolume}%
    ${movie.type} ${movie.genre}

    ${movie.title}

    导演: ${movie.director}  |  领衔主演: ${movie.actors}

    影片详情介绍 & 百度SEO收录大纲

    ${movie.description}

    琪琪影院极速直连专线温馨寄语： 本站秉持绿色健康公益追求。如果您在观看《${movie.title}》时遇到延迟或重试，请随时调换下侧的量子BGP千兆专线分流路径。本片完全支持免卡大屏播放！
    量子加速分流选路
    `; // Bind dialog controls setupPlayerControlListeners(); } function setupPlayerControlListeners() { const midToggle = document.getElementById('player-mid-toggle'); const bottomPlay = document.getElementById('player-bottom-play-btn'); const progressRange = document.getElementById('player-progress-range') as HTMLInputElement; const volumeRange = document.getElementById('player-volume-range') as HTMLInputElement; const lineIndicator = document.getElementById('player-line-indicator'); const aircastBtn = document.getElementById('player-aircast-btn'); const togglePlay = () => { isPlayerPlaying = !isPlayerPlaying; if (midToggle) midToggle.innerHTML = `${isPlayerPlaying ? '⏸' : '▶️'}`; if (bottomPlay) bottomPlay.innerText = isPlayerPlaying ? '暂停 ⏸' : '播放 ▶️'; const bufferingMsg = document.getElementById('player-buffering-msg'); if (bufferingMsg) { bufferingMsg.innerText = isPlayerPlaying ? "正在由 BGP 加速专线无损传输画质中..." : "播放已暂停"; } }; midToggle?.addEventListener('click', togglePlay); bottomPlay?.addEventListener('click', togglePlay); progressRange?.addEventListener('input', (e) => { playerProgress = parseInt((e.target as HTMLInputElement).value, 10); updatePlayerTimeDisplay(); }); volumeRange?.addEventListener('input', (e) => { playerVolume = parseInt((e.target as HTMLInputElement).value, 10); const volVal = document.getElementById('player-vol-val'); if (volVal) volVal.innerText = `${playerVolume}%`; }); // Switch line routes const routeBtns = document.querySelectorAll('.line-route-btn'); routeBtns.forEach(btn => { btn.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const lineName = target.getAttribute('data-line-name') || ''; selectedPlaybackLine = lineName; if (lineIndicator) lineIndicator.innerText = lineName; // Reset selection styling routeBtns.forEach(b => { b.className = "line-route-btn w-full px-4 py-3 rounded-xl text-left border transition cursor-pointer flex items-center justify-between bg-slate-900/80 border-purple-950/40 text-slate-400 hover:text-white"; }); target.className = "line-route-btn w-full px-4 py-3 rounded-xl text-left border transition cursor-pointer flex items-center justify-between bg-purple-500/10 border-purple-500/40 text-purple-400"; // Show temporary buffering message const halo = document.getElementById('video-canvas-halo'); const bufferingMsg = document.getElementById('player-buffering-msg'); if (halo) halo.classList.remove('hidden'); if (bufferingMsg) bufferingMsg.innerText = `正在重定向并握手至：${lineName}...`; setTimeout(() => { if (halo) halo.classList.add('hidden'); }, 700); }); }); // AirCast action aircastBtn?.addEventListener('click', () => { showGlobalToast("魔镜无线投屏握手成功", "已经极速建立与大屏幕电视/投影设备的 DLNA 智能桥接！无需开卡，尽享巨幅视觉震撼。"); }); // Hide buffer halo quickly setTimeout(() => { const halo = document.getElementById('video-canvas-halo'); if (halo) halo.classList.add('hidden'); }, 1000); } function initPlayerTicker(movie: Movie) { if (playerTimerInterval) clearInterval(playerTimerInterval); playerTimerInterval = setInterval(() => { if (isPlayerPlaying) { playerProgress = (playerProgress + 1) % 100; const slider = document.getElementById('player-progress-range') as HTMLInputElement; if (slider) slider.value = playerProgress.toString(); updatePlayerTimeDisplay(); } }, 1000); } function updatePlayerTimeDisplay() { const curr = document.getElementById('player-time-curr'); if (!curr) return; // Simulate hh:mm:ss based on progress const totalSecs = 138 * 60; // 2h 18m const currentSecs = Math.floor((playerProgress / 100) * totalSecs); const format = (s: number) => { const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const sec = s % 60; return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`; }; curr.innerText = format(currentSecs); } // Canvas high-tech reactive equalizers animation inside player function startVisualizerAnimation() { const canvas = document.getElementById('movie-stream-canvas') as HTMLCanvasElement; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let animationFrame: number; let phase = 0; const render = () => { if (!document.getElementById('movie-stream-canvas')) { return; // dialog closed } const rect = canvas.getBoundingClientRect(); if (canvas.width !== rect.width || canvas.height !== rect.height) { canvas.width = rect.width; canvas.height = rect.height; } ctx.fillStyle = '#04020a'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Render an artistic simulated galaxy black-hole visualization (referring to main movie sci-fi theme) ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); const time = Date.now() / 1000; const numLines = 60; const maxRadius = Math.min(canvas.width, canvas.height) * 0.4; for (let i = 0; i < numLines; i++) { const angle = (i / numLines) * Math.PI * 2 + time * 0.15; const factor = isPlayerPlaying ? (Math.sin(time * 3 + i) * 0.15 + 0.85) : 0.85; const radius = maxRadius * factor; ctx.strokeStyle = `hsla(${(i * 6) % 360}, 80%, 65%, ${isPlayerPlaying ? 0.3 : 0.1})`; ctx.lineWidth = isPlayerPlaying ? 1.5 : 0.5; ctx.beginPath(); ctx.moveTo(0, 0); const targetX = Math.cos(angle) * radius; const targetY = Math.sin(angle) * radius; ctx.lineTo(targetX, targetY); ctx.stroke(); // Pulsing stars if (isPlayerPlaying && i % 4 === 0) { ctx.fillStyle = '#ec4899'; ctx.beginPath(); ctx.arc(targetX, targetY, 2 + Math.cos(time * 5 + i) * 1.5, 0, Math.PI * 2); ctx.fill(); } } // Outer orbiting neon ring ctx.strokeStyle = '#a855f7'; ctx.lineWidth = 3; ctx.shadowColor = '#ec4899'; ctx.shadowBlur = 15; ctx.beginPath(); ctx.arc(0, 0, maxRadius * 0.45 + Math.sin(time * 4) * 8, 0, Math.PI * 2); ctx.stroke(); ctx.shadowBlur = 0; // reset shadow // Inner black-hole core ctx.fillStyle = '#020105'; ctx.beginPath(); ctx.arc(0, 0, maxRadius * 0.2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // 2. Overlay glowing HUD lines ctx.fillStyle = 'rgba(236, 72, 153, 0.75)'; ctx.font = '9px monospace'; ctx.fillText("QIQI STREAMING ENGINE v2.6.4", 25, 30); ctx.fillText("FPS: 60 / DECODING: H.265 QUANTUM", 25, 45); ctx.fillText(`VOLUME: ${playerVolume}% / BUFFERS: 12.8MB`, canvas.width - 180, 30); phase += 0.05; visualizerAnimationId = requestAnimationFrame(render); }; render(); } function closeStreamingModal() { if (elements.videoStreamDialog) { elements.videoStreamDialog.classList.add('hidden'); elements.videoStreamDialog.classList.remove('flex'); } document.body.classList.remove('overflow-hidden'); if (playerTimerInterval) clearInterval(playerTimerInterval); if (visualizerAnimationId) cancelAnimationFrame(visualizerAnimationId); } // ==================== TOAST & FORM SUBMIT HANDLERS ==================== function showGlobalToast(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'); // Auto close after 4.5 seconds setTimeout(() => { toast.classList.add('hidden'); }, 4500); } function handleFormSubmit(e: Event) { e.preventDefault(); if (!elements.formSubmitSpinner || !elements.formSubmitText || !elements.formSubmitBtn) return; // Show loading elements.formSubmitSpinner.classList.remove('hidden'); elements.formSubmitText.innerText = '正在为您建立安全加密链路对接...'; elements.formSubmitBtn.disabled = true; setTimeout(() => { // Hide loading elements.formSubmitSpinner.classList.add('hidden'); elements.formSubmitText.innerText = '📬 提交琪琪工单 极速响应'; elements.formSubmitBtn.disabled = false; // Reset Form if (elements.contactForm) elements.contactForm.reset(); // Show Global toast showGlobalToast("琪琪云工单提报成功", "我们已将您的诉求实时派发至琪琪网络运维中枢，12小时内将为您采集优化完成！"); }, 1250); } // ==================== BIND GLOBAL EVENTS ==================== function setupEventBindings() { // Navigation Logo Button elements.headerLogoBtn?.addEventListener('click', () => switchTab('home')); elements.footerLogoBtn?.addEventListener('click', () => switchTab('home')); // Desktop tab selectors const navTabs = document.querySelectorAll('.nav-tab'); navTabs.forEach(tab => { tab.addEventListener('click', (e) => { const targetTab = (e.currentTarget as HTMLElement).getAttribute('data-tab') || 'home'; switchTab(targetTab); }); }); // Mobile drawer tab selectors const mobileTabBtns = document.querySelectorAll('.mobile-tab-btn'); mobileTabBtns.forEach(btn => { btn.addEventListener('click', (e) => { const targetTab = (e.currentTarget as HTMLElement).getAttribute('data-tab') || 'home'; switchTab(targetTab); }); }); // Mobile menu hamburger toggle elements.mobileMenuHamburger?.addEventListener('click', () => { if (elements.mobileDrawer) { elements.mobileDrawer.classList.toggle('hidden'); } }); // Shortcut search focus elements.searchShortcutBtn?.addEventListener('click', () => { switchTab('products'); setTimeout(() => { elements.catalogSearchInput?.focus(); }, 150); }); elements.mobileSearchTrigger?.addEventListener('click', () => { switchTab('products'); setTimeout(() => { elements.catalogSearchInput?.focus(); }, 150); }); // Collaboration triggers elements.headerCollaborationBtn?.addEventListener('click', () => { switchTab('contact'); }); elements.mobileContactTrigger?.addEventListener('click', () => { switchTab('contact'); }); elements.viewMorePopularBtn?.addEventListener('click', () => { switchTab('products'); }); elements.heroCatalogTrigger?.addEventListener('click', () => { switchTab('products'); }); elements.heroPlayTrigger?.addEventListener('click', () => { openStreamingModal('m1'); // Play starry interstellar default }); elements.commitmentContactBtn?.addEventListener('click', () => { switchTab('contact'); setTimeout(() => { elements.contactForm?.scrollIntoView({ behavior: 'smooth' }); }, 100); }); // Catalog input real-time search elements.catalogSearchInput?.addEventListener('input', (e) => { searchQuery = (e.target as HTMLInputElement).value; if (elements.catalogSearchClear) { if (searchQuery.trim() !== '') { elements.catalogSearchClear.classList.remove('hidden'); } else { elements.catalogSearchClear.classList.add('hidden'); } } currentPage = 1; renderCatalogGrid(); }); // Search input clear trigger elements.catalogSearchClear?.addEventListener('click', () => { searchQuery = ''; if (elements.catalogSearchInput) elements.catalogSearchInput.value = ''; elements.catalogSearchClear?.classList.add('hidden'); currentPage = 1; renderCatalogGrid(); }); // Catalog empty state reset trigger elements.catalogEmptyReset?.addEventListener('click', () => { searchQuery = ''; filterType = '全部'; filterRegion = '全部'; filterYear = '全部'; filterRating = '全部'; if (elements.catalogSearchInput) elements.catalogSearchInput.value = ''; elements.catalogSearchClear?.classList.add('hidden'); // reset pills styles updatePillsRowSelection('type', '全部'); updatePillsRowSelection('region', '全部'); updatePillsRowSelection('year', '全部'); updatePillsRowSelection('rating', '全部'); currentPage = 1; renderCatalogGrid(); }); // Catalog sorting select trigger elements.catalogSortSelect?.addEventListener('change', (e) => { filterSort = (e.target as HTMLSelectElement).value; currentPage = 1; renderCatalogGrid(); }); // Catalog Pills Selection listeners const filterPills = document.querySelectorAll('.filter-pill'); filterPills.forEach(pill => { pill.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const type = target.getAttribute('data-filter') || ''; const val = target.getAttribute('data-value') || ''; if (type === 'type') { filterType = val; } else if (type === 'region') { filterRegion = val; } else if (type === 'year') { filterYear = val; } else if (type === 'rating') { filterRating = val; } updatePillsRowSelection(type, val); currentPage = 1; renderCatalogGrid(); }); }); // Prev / Next pagination buttons 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' }); }); // Form Submit trigger elements.contactForm?.addEventListener('submit', handleFormSubmit); // Trigger Chat helper elements.triggerOnlineChat?.addEventListener('click', () => { elements.onlineChatWindow?.classList.remove('hidden'); elements.chatUserInput?.focus(); }); // Close player modal elements.modalCloseTrigger?.addEventListener('click', closeStreamingModal); elements.videoStreamDialog?.addEventListener('click', (e) => { // If clicking outside modal dialog wrap container, close modal if (e.target === elements.videoStreamDialog) { closeStreamingModal(); } }); // Floating Chat trigger and close elements.floatingChatTrigger?.addEventListener('click', () => { elements.onlineChatWindow?.classList.toggle('hidden'); if (!elements.onlineChatWindow?.classList.contains('hidden')) { elements.chatUserInput?.focus(); } }); elements.chatWindowClose?.addEventListener('click', () => { elements.onlineChatWindow?.classList.add('hidden'); }); // Chat form submit elements.chatSubmitForm?.addEventListener('submit', (e) => { e.preventDefault(); if (elements.chatUserInput) { const val = elements.chatUserInput.value; handleUserChatQuery(val); elements.chatUserInput.value = ''; } }); // Toast close trigger elements.toastCloseBtn?.addEventListener('click', () => { elements.globalSuccessToast?.classList.add('hidden'); }); // Global Ctrl + F search focus hook window.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'f') { e.preventDefault(); switchTab('products'); setTimeout(() => { elements.catalogSearchInput?.focus(); }, 150); } }); } // ==================== APP STARTUP INITIALIZATION ==================== function startup() { // 1. Render all home screen channels renderHomeMovies(); renderHomeNews(); // 2. Render other static layout elements renderCatalogGrid(); renderAboutTab(); // 3. Initiate Online Chat bot greeting & suggestions initOnlineChatHelper(); // 4. Bind all interactive clicks & events setupEventBindings(); // 5. Initiate canvas interactive sandbox map details setupMapControls(); } // Boot startup();