import './index.css'; import { MOVIES_DATA, NEWS_DATA, TEAM_MEMBERS, HISTORY_EVENTS, CORPORATE_CULTURE } from './data'; import { Movie, TeamMember, HistoryEvent } 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 = 45; // initial progress % let playerVolume: number = 80; let selectedPlaybackLine: string = '北京电信专线 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 POI Selectors 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'), // 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') }; // ==================== INLINE MAP POIS DATA ==================== interface MapPoi { title: string; desc: string; x: number; // local sandbox coordinate x inside virtual 800x500 box y: number; // local sandbox coordinate y distance: string; } const MAP_POIS: MapPoi[] = [ { title: "蓝莓影视科技总部研发中心", desc: "北京市朝阳区中关村互联网大厦C座。配备100G专属光纤直联主干网，全天候运营并维护流媒体秒播加速节点，确保最新手机在线电影追剧极致流畅。", x: 400, y: 250, distance: "0米" }, { // BGP center title: "蓝莓多线BGP高速汇聚机房", desc: "北京朝阳区核心汇聚云节点，直达电信、联通、移动、广电网等运营商主干网。完美支持最新免费电视剧大全多路P2P高效并发解析。", x: 550, y: 160, distance: "320米" }, { // Metro title: "朝阳公园地铁站 B口", desc: "北京地铁14号线重要枢纽，步行150米即可直达蓝莓大厦，交通出行极其便捷，商务合作伙伴接洽枢纽。", x: 325, y: 350, distance: "145米" } ]; // ==================== RENDERING UTILITIES ==================== // Switch Active Navigation Tabs (SPA approach) 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 button active state (Desktop Nav) 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.5 rounded-xl text-xs font-bold font-sans tracking-wide transition duration-200 cursor-pointer text-white bg-indigo-600/10 border border-indigo-500/20 shadow-inner"; } else { tab.className = "nav-tab px-5 py-2.5 rounded-xl text-xs font-bold font-sans tracking-wide 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-indigo-600/10 border border-indigo-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 open if (elements.mobileDrawer) { elements.mobileDrawer.classList.add('hidden'); } // Scroll to top with smooth micro-animation window.scrollTo({ top: 0, behavior: 'smooth' }); } // Generate Rating Stars HTML function getRatingStars(rating: number): string { const fullStars = Math.floor(rating / 2); const halfStar = rating % 2 >= 1 ? 1 : 0; let starsHtml = ''; for (let i = 0; i < 5; i++) { if (i < fullStars) { starsHtml += '★'; } else if (i === fullStars && halfStar === 1) { starsHtml += '★'; } else { starsHtml += '★'; } } return starsHtml; } // Create Card HTML for Movie Card function createMovieCardHTML(movie: Movie): string { // Clicking on any part of the card triggers our streaming dialog modal // But wait! Let's ensure there is a Bing Image search URL clickable wrapping element inside to satisfy image requirements! const imgUrl = `https://tse-mm.bing.com/th?q=${encodeURIComponent(movie.title + ' movie poster')}`; return `
${movie.title} - 蓝莓影院免费电视剧
${movie.type} ${movie.isFeatured ? '主推' : ''}
★ ${movie.rating.toFixed(1)}
${movie.updateStatus}

${movie.title}

${movie.region} · ${movie.year} ${movie.playCount}次
`; } // Render Home Movies grids (Popular, Latest) 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 all cards bindMovieCardClicks(); } // Render SEO Articles Grid function renderHomeNews() { if (!elements.homeNewsGrid) return; elements.homeNewsGrid.innerHTML = NEWS_DATA.map(news => { const bingLink = `https://tse-mm.bing.com/th?q=${encodeURIComponent(news.title + ' digital technology')}`; return `
${news.title}
${news.category} ${news.date}

${news.title}

${news.content}

来源: 蓝莓影院编辑部 阅读全文 →
`; }).join(''); } // Render Team Cards function renderAboutTeam() { if (!elements.aboutTeamGrid) return; elements.aboutTeamGrid.innerHTML = TEAM_MEMBERS.map(member => { const avatarUrl = `https://tse-mm.bing.com/th?q=${encodeURIComponent(member.name + ' executive portrait')}`; return `
${member.name} - 蓝莓影视科技
${member.role}

${member.name}

${member.bio}

邮箱: info@blueberrycinema.com ★ 已认证核心成员
`; }).join(''); } // Render Corporate Values Checklist function renderCorporateCulture() { 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 => { return `
  • ✓ ${val}
    • `; }).join(''); } } // Render Timeline Milestones Select function renderTimelinePanel() { if (!elements.timelineYearsPanel) return; elements.timelineYearsPanel.innerHTML = HISTORY_EVENTS.map((evt, idx) => { const isSelected = selectedTimelineIndex === idx; return ` `; }).join(''); // Update detail panel const activeEvt = HISTORY_EVENTS[selectedTimelineIndex]; if (activeEvt) { if (elements.timelineYearBig) elements.timelineYearBig.innerText = activeEvt.year; if (elements.timelineTitleDisplay) elements.timelineTitleDisplay.innerText = activeEvt.title; if (elements.timelineDescDisplay) elements.timelineDescDisplay.innerText = activeEvt.description; } // Bind click const buttons = document.querySelectorAll('.timeline-year-btn'); buttons.forEach(btn => { btn.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const idx = parseInt(target.getAttribute('data-idx') || '0', 10); selectedTimelineIndex = idx; renderTimelinePanel(); }); }); } // Render Catalog Filter indicators / pills row function updateFilterActivePills() { // Update Type const typePills = document.querySelectorAll('#pill-row-type button'); typePills.forEach(pill => { const val = pill.getAttribute('data-value'); if (val === filterType) { pill.className = "filter-pill px-3.5 py-1.5 rounded-xl font-bold font-sans tracking-wide border transition cursor-pointer bg-indigo-600 border-indigo-500 text-white shadow"; } else { pill.className = "filter-pill px-3.5 py-1.5 rounded-xl font-bold font-sans tracking-wide border transition cursor-pointer bg-[#05060b] border-slate-900 text-slate-400 hover:text-white hover:border-slate-850"; } }); // Update Region const regionPills = document.querySelectorAll('#pill-row-region button'); regionPills.forEach(pill => { const val = pill.getAttribute('data-value'); if (val === filterRegion) { pill.className = "filter-pill px-3.5 py-1.5 rounded-xl font-bold font-sans tracking-wide border transition cursor-pointer bg-indigo-600 border-indigo-500 text-white shadow"; } else { pill.className = "filter-pill px-3.5 py-1.5 rounded-xl font-bold font-sans tracking-wide border transition cursor-pointer bg-[#05060b] border-slate-900 text-slate-400 hover:text-white hover:border-slate-850"; } }); // Update Year const yearPills = document.querySelectorAll('#pill-row-year button'); yearPills.forEach(pill => { const val = pill.getAttribute('data-value'); if (val === filterYear) { pill.className = "filter-pill px-3.5 py-1.5 rounded-xl font-bold font-sans tracking-wide border transition cursor-pointer bg-indigo-600 border-indigo-500 text-white shadow"; } else { pill.className = "filter-pill px-3.5 py-1.5 rounded-xl font-bold font-sans tracking-wide border transition cursor-pointer bg-[#05060b] border-slate-900 text-slate-400 hover:text-white hover:border-slate-850"; } }); // Update Rating const ratingPills = document.querySelectorAll('#pill-row-rating button'); ratingPills.forEach(pill => { const val = pill.getAttribute('data-value'); if (val === filterRating) { pill.className = "filter-pill px-3.5 py-1.5 rounded-xl font-bold font-sans tracking-wide border transition cursor-pointer bg-indigo-600 border-indigo-500 text-white shadow"; } else { pill.className = "filter-pill px-3.5 py-1.5 rounded-xl font-bold font-sans tracking-wide border transition cursor-pointer bg-[#05060b] border-slate-900 text-slate-400 hover:text-white hover:border-slate-850"; } }); // Render Breadcrumb Active Tag Bubbles if (elements.activeTagsContainer) { let tagsHtml = `已选条件:`; let count = 0; if (filterType !== '全部') { tagsHtml += ` 类型: ${filterType} `; count++; } if (filterRegion !== '全部') { tagsHtml += ` 地区: ${filterRegion} `; count++; } if (filterYear !== '全部') { tagsHtml += ` 年份: ${filterYear} `; count++; } if (filterRating !== '全部') { tagsHtml += ` 评分: ${filterRating === '9' ? '9分+' : filterRating === '8.5' ? '8.5分+' : '8分+'} `; count++; } if (searchQuery.trim() !== '') { tagsHtml += ` 搜索: ${searchQuery} `; count++; } if (count === 0) { tagsHtml += `无交叉条件`; } else { tagsHtml += ` `; } elements.activeTagsContainer.innerHTML = tagsHtml; // Bind breadcrumb clear clicks const btnClearType = document.getElementById('clear-tag-type'); const btnClearRegion = document.getElementById('clear-tag-region'); const btnClearYear = document.getElementById('clear-tag-year'); const btnClearRating = document.getElementById('clear-tag-rating'); const btnClearSearch = document.getElementById('clear-tag-search'); const btnClearAll = document.getElementById('clear-tag-all'); if (btnClearType) btnClearType.addEventListener('click', () => { filterType = '全部'; currentPage = 1; renderCatalog(); }); if (btnClearRegion) btnClearRegion.addEventListener('click', () => { filterRegion = '全部'; currentPage = 1; renderCatalog(); }); if (btnClearYear) btnClearYear.addEventListener('click', () => { filterYear = '全部'; currentPage = 1; renderCatalog(); }); if (btnClearRating) btnClearRating.addEventListener('click', () => { filterRating = '全部'; currentPage = 1; renderCatalog(); }); if (btnClearSearch) { btnClearSearch.addEventListener('click', () => { searchQuery = ''; if (elements.catalogSearchInput) elements.catalogSearchInput.value = ''; if (elements.catalogSearchClear) elements.catalogSearchClear.classList.add('hidden'); currentPage = 1; renderCatalog(); }); } if (btnClearAll) { btnClearAll.addEventListener('click', () => { filterType = '全部'; filterRegion = '全部'; filterYear = '全部'; filterRating = '全部'; searchQuery = ''; if (elements.catalogSearchInput) elements.catalogSearchInput.value = ''; if (elements.catalogSearchClear) elements.catalogSearchClear.classList.add('hidden'); currentPage = 1; renderCatalog(); }); } } } // Render Products catalog (Includes cross filters, sorting, real-time search, AND full pagination state) function renderCatalog() { if (!elements.catalogMoviesGrid || !elements.catalogEmptyView) return; // Apply active pill highlights and breadcrumbs updateFilterActivePills(); // 1. Cross Filtering Dataset let filtered = MOVIES_DATA.filter(movie => { // Keyword match if (searchQuery.trim() !== '') { const q = searchQuery.toLowerCase().trim(); const matchTitle = movie.title.toLowerCase().includes(q); const matchActors = movie.actors.toLowerCase().includes(q); const matchDirector = movie.director.toLowerCase().includes(q); const matchGenre = movie.genre.toLowerCase().includes(q); if (!matchTitle && !matchActors && !matchDirector && !matchGenre) { return false; } } // Type match if (filterType !== '全部' && movie.type !== filterType) { return false; } // Region match if (filterRegion !== '全部' && movie.region !== filterRegion) { return false; } // Year match if (filterYear !== '全部' && movie.year !== filterYear) { return false; } // Rating minimum match if (filterRating !== '全部') { const ratingVal = parseFloat(filterRating); if (movie.rating < ratingVal) { return false; } } return true; }); // 2. Sorting Dataset filtered.sort((a, b) => { if (filterSort === '最热点击') { const countA = parseInt(a.playCount.replace(/,/g, ''), 10); const countB = parseInt(b.playCount.replace(/,/g, ''), 10); return countB - countA; } else if (filterSort === '最新上线') { return parseInt(b.year, 10) - parseInt(a.year, 10); } else if (filterSort === '评分最高') { return b.rating - a.rating; } return 0; }); // Update total matches count if (elements.catalogCountDisplay) { elements.catalogCountDisplay.innerText = filtered.length.toString(); } // 3. Handle Empty View or Paginate if (filtered.length === 0) { elements.catalogMoviesGrid.classList.add('hidden'); elements.catalogPagination.classList.add('hidden'); elements.catalogEmptyView.classList.remove('hidden'); } else { elements.catalogEmptyView.classList.add('hidden'); elements.catalogMoviesGrid.classList.remove('hidden'); elements.catalogPagination.classList.remove('hidden'); // Pagination calculations const totalPages = Math.ceil(filtered.length / ITEMS_PER_PAGE); if (currentPage > totalPages) currentPage = totalPages; if (currentPage < 1) currentPage = 1; const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const paginatedSlice = filtered.slice(startIndex, startIndex + ITEMS_PER_PAGE); // Render slice elements.catalogMoviesGrid.innerHTML = paginatedSlice.map(movie => createMovieCardHTML(movie)).join(''); // Render pagination controls if (elements.btnPagePrev) elements.btnPagePrev.disabled = (currentPage === 1); if (elements.btnPageNext) elements.btnPageNext.disabled = (currentPage === totalPages); if (elements.pageNumbersContainer) { let pageNumsHtml = ''; for (let i = 1; i <= totalPages; i++) { const isCurrent = i === currentPage; pageNumsHtml += ` `; } elements.pageNumbersContainer.innerHTML = pageNumsHtml; // Bind page number clicks const numBtns = document.querySelectorAll('.page-num-btn'); numBtns.forEach(btn => { btn.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const targetPage = parseInt(target.getAttribute('data-page') || '1', 10); currentPage = targetPage; renderCatalog(); // Scroll up inside catalog tab view slightly const container = elements.tabProducts; if (container) container.scrollIntoView({ behavior: 'smooth', block: 'start' }); }); }); } // Bind card clicks bindMovieCardClicks(); } } // Bind Clicks to all home / catalog movie cards function bindMovieCardClicks() { const cards = document.querySelectorAll('.movie-card, [data-movie-id]'); cards.forEach(card => { // Avoid double attaching const oldListener = card.getAttribute('data-listener'); if (!oldListener) { card.setAttribute('data-listener', 'true'); card.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const movieId = target.getAttribute('data-movie-id'); if (movieId) { openMovieDetailModal(movieId); } }); } }); } // ==================== DIALOG STREAMING MOVIE PLAYER MODAL ==================== function openMovieDetailModal(movieId: string) { const movie = MOVIES_DATA.find(m => m.id === movieId); if (!movie || !elements.videoStreamDialog || !elements.modalDynamicContent) return; // Initialize simulated video player configurations isPlayerPlaying = true; playerProgress = 45; selectedPlaybackLine = '北京电信专线 4K'; // Populate dynamic player layout renderModalContent(movie); // Show modal overlay elements.videoStreamDialog.classList.remove('hidden'); document.body.style.overflow = 'hidden'; // Lock background viewport scrolling // Launch simulated progression loops if (playerTimerInterval) clearInterval(playerTimerInterval); playerTimerInterval = setInterval(() => { if (isPlayerPlaying) { playerProgress += 0.18; if (playerProgress >= 100) { playerProgress = 0; } // Update DOM progress const fillBar = document.getElementById('player-progress-fill'); const handleDot = document.getElementById('player-progress-handle'); if (fillBar) fillBar.style.width = `${playerProgress}%`; if (handleDot) handleDot.style.left = `${playerProgress}%`; // Update timer countdown digits const curTimeDisplay = document.getElementById('player-current-time'); if (curTimeDisplay) { const durationSec = movie.type === '电影' ? 128 * 60 : 45 * 60; // movie: 128m, show: 45m const currentSec = Math.floor((playerProgress / 100) * durationSec); curTimeDisplay.innerText = formatTime(currentSec); } } }, 1000); } function formatTime(secs: number): string { const h = Math.floor(secs / 3600); const m = Math.floor((secs % 3600) / 60); const s = secs % 60; const hh = h > 0 ? `${h.toString().padStart(2, '0')}:` : ''; const mm = `${m.toString().padStart(2, '0')}:`; const ss = s.toString().padStart(2, '0'); return `${hh}${mm}${ss}`; } function closeMovieDetailModal() { if (elements.videoStreamDialog) { elements.videoStreamDialog.classList.add('hidden'); } document.body.style.overflow = ''; // Restore background viewport scrolling if (playerTimerInterval) { clearInterval(playerTimerInterval); playerTimerInterval = null; } } // Render player controls, lines, related bento blocks inside modal function renderModalContent(movie: Movie) { if (!elements.modalDynamicContent) return; // Pick up to 4 similar movie recommendations const related = MOVIES_DATA.filter(m => m.id !== movie.id && (m.type === movie.type || m.genre.includes(movie.genre.split(' / ')[0]))).slice(0, 4); const relatedHtml = related.map(rel => { const relImg = `https://tse-mm.bing.com/th?q=${encodeURIComponent(rel.title + ' movie poster')}`; return `
    ${rel.title}
    ★ ${rel.rating.toFixed(1)}
    ${rel.title}

    ${rel.genre}

    ${rel.updateStatus}

    `; }).join(''); const starsHtml = getRatingStars(movie.rating); elements.modalDynamicContent.innerHTML = `
    Atmosphere
    ${movie.type} ${movie.region} · ${movie.year}上映 · ${movie.durationOrEpisodes}

    ${movie.title}

    ${starsHtml}
    ${movie.rating.toFixed(1)} 分 (${movie.playCount}次手机播放量)
    流媒体就绪：${selectedPlaybackLine} 画质: 4K HDR AI超分原画
    Screen
    ${isPlayerPlaying ? '⏸️' : '▶️'}

    正在极速分发解码 4K P2P 专线...

    蓝莓自建BGP中继房直连 · 免转码等待 · 缓冲 0.1s

    🔊
    00:00:00 / ${movie.durationOrEpisodes}
    P2P加速已就绪
    BLUEBERRY BACKUP LINE SELECTOR 如遇播放黑屏卡顿，请进行线路切换

    影视详情及备案详情

    北京蓝莓影视科技有限公司数据中心安全公示

    ${movie.description}

    编导/导演: ${movie.director}
    主要演员: ${movie.actors}
    影视产地: ${movie.region}
    连载更新: ${movie.updateStatus}
    上映年份: ${movie.year}年
    授权属性: 永久免VIP卡·正版展示

    🔥 猜你喜欢 · 热门追剧推荐

    根据您的观影偏好实时搜寻

    📱 手机全屏/大屏TV极速播

    本站播放器针对主流手机浏览器（Safari, Chrome, 夸克, UC等）做过底层内核调优。当检测到在手机端播放时，播放器会自动采用硬解码加速。点击播放右下方 [投屏] 按钮，即可将高清无损视频一秒投射至电视设备，尽享家庭院线级尊享！

    `; // Dynamic Event Bindings within player modal const playBtn = document.getElementById('player-toggle-btn'); const screenPlayBtn = document.getElementById('player-screen-play-btn'); const centerIcon = document.getElementById('player-center-icon'); const screenStatus = document.getElementById('player-screen-status'); const progressBar = document.getElementById('player-progress-bar'); const volumeRange = document.getElementById('volume-range') as HTMLInputElement; const volumeIcon = document.getElementById('volume-icon'); const castBtn = document.getElementById('player-cast-btn'); const togglePlay = () => { isPlayerPlaying = !isPlayerPlaying; if (playBtn) playBtn.innerText = isPlayerPlaying ? '⏸️ 暂停' : '▶️ 播放'; if (centerIcon) centerIcon.innerText = isPlayerPlaying ? '⏸️' : '▶️'; if (screenStatus) screenStatus.innerText = isPlayerPlaying ? '正在极速分发解码 4K P2P 专线...' : '视频已暂停播放'; }; if (playBtn) playBtn.addEventListener('click', togglePlay); if (screenPlayBtn) screenPlayBtn.addEventListener('click', togglePlay); // Seek Progress if (progressBar) { progressBar.addEventListener('click', (e) => { const rect = progressBar.getBoundingClientRect(); const clickX = e.clientX - rect.left; const pct = Math.min(Math.max((clickX / rect.width) * 100, 0), 100); playerProgress = pct; const fillBar = document.getElementById('player-progress-fill'); const handleDot = document.getElementById('player-progress-handle'); if (fillBar) fillBar.style.width = `${pct}%`; if (handleDot) handleDot.style.left = `${pct}%`; }); } // Volume range if (volumeRange) { volumeRange.addEventListener('input', (e) => { const val = parseInt((e.target as HTMLInputElement).value, 10); playerVolume = val; if (volumeIcon) { if (val === 0) volumeIcon.innerText = '🔇'; else if (val < 40) volumeIcon.innerText = '🔈'; else if (val < 80) volumeIcon.innerText = '🔉'; else volumeIcon.innerText = '🔊'; } }); } // TV Cast if (castBtn) { castBtn.addEventListener('click', () => { alert(`📶 蓝莓AirCast正在搜寻您的家庭TV设备...\n\n已成功在同一WiFi下发现以下投屏设备：\n1. [客厅小米电视5 4K] - 信号良好 \n2. [主卧华为Vision智慧屏] - 信号良好\n\n已为您自动建立连接并流式投递！请尽情在电视大屏享受免费电影大全全集观看吧！`); }); } // Line buttons const lineBtns = document.querySelectorAll('.line-btn'); lineBtns.forEach(btn => { btn.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const lineName = target.getAttribute('data-line-name') || ''; selectedPlaybackLine = lineName; // Update states const currentLineDisp = document.getElementById('current-line-display'); if (currentLineDisp) currentLineDisp.innerText = lineName; lineBtns.forEach(b => { b.className = "line-btn px-4 py-2.5 text-xs font-bold rounded-xl border transition text-center cursor-pointer bg-slate-950 border-slate-900 text-slate-400 hover:border-slate-800"; }); target.className = "line-btn px-4 py-2.5 text-xs font-bold rounded-xl border transition text-center cursor-pointer bg-slate-950 border-indigo-500 text-indigo-400"; // Temporary float toast const tempToast = document.createElement('div'); tempToast.className = "fixed top-24 left-1/2 -translate-x-1/2 z-50 bg-[#090b14] border border-indigo-500/20 text-indigo-400 font-extrabold text-xs px-5 py-3 rounded-2xl shadow-2xl"; tempToast.innerText = `🔄 已成功切流至 【${lineName}】，超清无感续播中！`; document.body.appendChild(tempToast); setTimeout(() => tempToast.remove(), 2200); }); }); // Re-bind related movies recommendations deep redirect const relCards = document.querySelectorAll('.modal-related-card'); relCards.forEach(card => { card.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const id = target.getAttribute('data-movie-id'); if (id) { openMovieDetailModal(id); } }); }); } // ==================== INTERACTIVE VECTOR MAP ENGINE (CANVAS) ==================== function initMapEngine() { const canvas = elements.mapCanvas; if (!canvas) return; // Set canvas dimension based on bounding box const resizeCanvas = () => { const parent = canvas.parentElement; if (parent) { canvas.width = parent.clientWidth; canvas.height = parent.clientHeight; drawMap(); } }; resizeCanvas(); // Debounce/Listen window resize window.addEventListener('resize', resizeCanvas); // Redraw Sandbox loop function drawMap() { const ctx = canvas.getContext('2d'); if (!ctx) return; const w = canvas.width; const h = canvas.height; // Background Canvas color ctx.fillStyle = "#05060b"; ctx.fillRect(0, 0, w, h); ctx.save(); // Applying Panning and Zooming center coordinate matrix offsets ctx.translate(w / 2 + mapOffsetX, h / 2 + mapOffsetY); ctx.scale(mapZoom, mapZoom); // Center of virtual sandbox 800x500 ctx.translate(-400, -250); // 1. Grid Background ctx.strokeStyle = "#0c0d16"; ctx.lineWidth = 1; for (let x = -500; x < 1300; x += 50) { ctx.beginPath(); ctx.moveTo(x, -300); ctx.lineTo(x, 800); ctx.stroke(); } for (let y = -300; y < 800; y += 50) { ctx.beginPath(); ctx.moveTo(-500, y); ctx.lineTo(1300, y); ctx.stroke(); } // 2. Streets Layout ctx.fillStyle = "#0a0a0f"; // Wangjing South Road ctx.fillRect(-100, 230, 1000, 45); // Wangjing Tech Avenue ctx.fillRect(380, -100, 45, 700); ctx.fillStyle = "#1e2238"; ctx.font = "bold 9px font-mono"; ctx.fillText("WANGJING SOUTH ROAD ( 望 京 南 路 )", 150, 256); ctx.fillText("WANGJING TECH AVENUE ( 望 京 科 技 路 )", 395, 80); // 3. Drawing fiber optic link from HQ BGP Center const hq = MAP_POIS[0]; const bgp = MAP_POIS[1]; ctx.strokeStyle = "rgba(79, 70, 229, 0.25)"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(hq.x, hq.y); ctx.lineTo(bgp.x, bgp.y); ctx.stroke(); // Pulse package packet particle const time = Date.now() * 0.0025; const offset = time % 1; const dotX = hq.x + (bgp.x - hq.x) * offset; const dotY = hq.y + (bgp.y - hq.y) * offset; ctx.fillStyle = "#a78bfa"; ctx.beginPath(); ctx.arc(dotX, dotY, 4.5, 0, Math.PI * 2); ctx.fill(); // 4. Drawing POI markers MAP_POIS.forEach((poi, index) => { const isSelected = selectedPoiIndex === index; // Halo Rings on selected if (isSelected) { ctx.fillStyle = index === 0 ? "rgba(79, 70, 229, 0.18)" : (index === 1 ? "rgba(124, 58, 237, 0.18)" : "rgba(6, 182, 212, 0.15)"); ctx.beginPath(); ctx.arc(poi.x, poi.y, 24 + Math.sin(Date.now() * 0.006) * 4, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = index === 0 ? "rgba(79, 70, 229, 0.4)" : (index === 1 ? "rgba(124, 58, 237, 0.4)" : "rgba(6, 182, 212, 0.4)"); ctx.lineWidth = 1.5; ctx.beginPath(); ctx.arc(poi.x, poi.y, 18 + Math.sin(Date.now() * 0.006) * 2, 0, Math.PI * 2); ctx.stroke(); } // Pin core ctx.fillStyle = index === 0 ? "#4f46e5" : (index === 1 ? "#7c3aed" : "#06b6d4"); ctx.beginPath(); ctx.arc(poi.x, poi.y, 8, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#ffffff"; ctx.beginPath(); ctx.arc(poi.x, poi.y, 3, 0, Math.PI * 2); ctx.fill(); // Labels Text ctx.fillStyle = isSelected ? "#ffffff" : "#475569"; ctx.font = isSelected ? "bold 11px font-sans" : "9px font-sans"; ctx.fillText(poi.title, poi.x - 55, poi.y - 15); }); ctx.restore(); } // Animation Loop for map pulse ripples let animationFrameId: any = null; function animate() { drawMap(); animationFrameId = requestAnimationFrame(animate); } animate(); // Mouse pan triggers canvas.addEventListener('mousedown', (e) => { isDraggingMap = true; startDragX = e.clientX - mapOffsetX; startDragY = e.clientY - mapOffsetY; canvas.style.cursor = 'grabbing'; }); window.addEventListener('mousemove', (e) => { if (!isDraggingMap) return; mapOffsetX = e.clientX - startDragX; mapOffsetY = e.clientY - startDragY; }); window.addEventListener('mouseup', () => { isDraggingMap = false; canvas.style.cursor = 'grab'; }); // Wheel zoom canvas.addEventListener('wheel', (e) => { e.preventDefault(); const zoomFactor = e.deltaY < 0 ? 1.06 : 0.94; mapZoom = Math.min(Math.max(mapZoom * zoomFactor, 0.5), 3.0); }); // Clicking pinpoint selection canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const clickX = e.clientX - rect.left; const clickY = e.clientY - rect.top; // Convert click screen position into translated/scaled coordinate const w = canvas.width; const h = canvas.height; // Matrix inverse calculation const transformedX = ((clickX - w / 2 - mapOffsetX) / mapZoom) + 400; const transformedY = ((clickY - h / 2 - mapOffsetY) / mapZoom) + 250; // Detect click distance to each poi let closestIndex = -1; let minDistance = 24; // click tolerance radius MAP_POIS.forEach((poi, index) => { const dist = Math.sqrt(Math.pow(transformedX - poi.x, 2) + Math.pow(transformedY - poi.y, 2)); if (dist < minDistance) { minDistance = dist; closestIndex = index; } }); if (closestIndex !== -1) { selectPoi(closestIndex); } }); // Controls bindings if (elements.mapCtrlZoomIn) elements.mapCtrlZoomIn.addEventListener('click', () => { mapZoom = Math.min(mapZoom * 1.2, 3.0); }); if (elements.mapCtrlZoomOut) elements.mapCtrlZoomOut.addEventListener('click', () => { mapZoom = Math.max(mapZoom * 0.8, 0.5); }); if (elements.mapCtrlReset) elements.mapCtrlReset.addEventListener('click', () => { mapZoom = 1.0; mapOffsetX = 0; mapOffsetY = 0; }); } // Map selection helper function selectPoi(idx: number) { selectedPoiIndex = idx; const poi = MAP_POIS[idx]; if (elements.poiMetaDist) elements.poiMetaDist.innerText = `DISTANCE: ${poi.distance}`; if (elements.poiMetaTitle) elements.poiMetaTitle.innerText = poi.title; if (elements.poiMetaDesc) elements.poiMetaDesc.innerText = poi.desc; // Highlights row button const buttons = document.querySelectorAll('.map-poi-row-btn'); buttons.forEach(btn => { const bIdx = parseInt(btn.getAttribute('data-idx') || '0', 10); if (bIdx === idx) { btn.className = "map-poi-row-btn w-full text-left p-3 rounded-2xl bg-indigo-600/10 border border-indigo-500/30 transition flex items-center justify-between text-xs cursor-pointer shadow"; const txtSpan = btn.querySelector('span:first-child'); if (txtSpan) txtSpan.className = "text-white font-bold"; } else { btn.className = "map-poi-row-btn w-full text-left p-3 rounded-2xl bg-[#05060b] border border-slate-900 hover:border-indigo-950 transition flex items-center justify-between text-xs cursor-pointer"; const txtSpan = btn.querySelector('span:first-child'); if (txtSpan) txtSpan.className = "text-slate-400 font-bold group-hover:text-white"; } }); } // ==================== ONLINE AI CHATBOT ENGINE ==================== function initChatEngine() { if (!elements.chatMessagesBox) return; // Set default initial greeting elements.chatMessagesBox.innerHTML = `
    🤖
    您好！我是蓝莓影院在线智能AI客服。我可以帮您排查播放异常卡顿、提供一键投屏TV指南，或查询最新电视剧大全上架时间。请问有什么可以帮您？
    `; // Submit trigger if (elements.chatSubmitForm) { elements.chatSubmitForm.addEventListener('submit', (e) => { e.preventDefault(); const val = elements.chatUserInput.value.trim(); if (!val) return; appendUserMessage(val); elements.chatUserInput.value = ''; // Trigger automatic replies based on query setTimeout(() => { triggerBotReply(val); }, 750); }); } // Interactive quick button pills const suggBtns = document.querySelectorAll('.chat-sugg-pill'); suggBtns.forEach(btn => { btn.addEventListener('click', (e) => { const txt = (e.currentTarget as HTMLElement).innerText; appendUserMessage(txt); setTimeout(() => { triggerBotReply(txt); }, 750); }); }); } function appendUserMessage(msg: string) { if (!elements.chatMessagesBox) return; const bubble = document.createElement('div'); bubble.className = "flex items-start gap-2 max-w-[85%] self-end flex-row-reverse"; bubble.innerHTML = `
    👤
    ${msg}
    `; elements.chatMessagesBox.appendChild(bubble); elements.chatMessagesBox.scrollTop = elements.chatMessagesBox.scrollHeight; } function appendBotMessage(msg: string) { if (!elements.chatMessagesBox) return; const bubble = document.createElement('div'); bubble.className = "flex items-start gap-2 max-w-[85%] self-start animate-in fade-in slide-in-from-bottom-2 duration-150"; bubble.innerHTML = `
    🤖
    ${msg}
    `; elements.chatMessagesBox.appendChild(bubble); elements.chatMessagesBox.scrollTop = elements.chatMessagesBox.scrollHeight; } function triggerBotReply(userQuery: string) { let botReply = ''; if (userQuery.includes('求片') || userQuery.includes('我想看')) { botReply = `已为您拉起蓝莓极速求片特快通道！\n\n请按格式回复: 【求片: 名字 + 上映年份】。蓝莓爬虫雷达将在24小时内为您搜集分发该片的高清无损片源，并同步至极速产品页中！永久免付费看全集哦！`; } else if (userQuery.includes('卡顿') || userQuery.includes('播放不了') || userQuery.includes('慢')) { botReply = `网络卡顿通常由您的家庭无线网络通道阻塞产生。建议尝试：\n\n1. 在视频播放框底部，点击切换备用线路。我们支持【北京电信专线 4K】及【腾讯云加速节点】等多条中继线路，自动切换低时延网络；\n2. 尝试将播放设备连接至 5G 频段 WiFi 信号；\n3. 彻底重启您的路由器及电视设备。`; } else if (userQuery.includes('投屏') || userQuery.includes('电视')) { botReply = `蓝莓影院全站资源内置 AirCast 投屏协议：\n\n1. 请确保您的手机和电视连接至同一家庭 WiFi 局域网下；\n2. 点击播放器底部的【AirCast 智能投屏】按钮；\n3. 播放系统将自动探测电视播放终端，点击确认即可将 4K 无损画质秒级同步至客厅大屏，免除电视端装App付费！`; } else if (userQuery.includes('合作') || userQuery.includes('广告') || userQuery.includes('商')) { botReply = `蓝莓影院恪守绿色纯净、网络视听文明协议。我们严格拒绝任何涉及博彩、引流网贷或带有水印卡死的低俗挂码广告！\n\n若您有正规品牌展示、友链交换或版权代理等商务合作意向，欢迎致信官方邮箱：\n📧 bd@blueberrycinema.com\n\n我们合作部主管将在12小时内向您回复并派送合作价格单！`; } else { botReply = `收到您发送的诉求：“${userQuery}”。\n\n智能客服已将此情况实时提报至蓝莓技术运维大屏。如果是最新手机在线电影电视剧的更新咨询，爬虫雷达已经触发优先搜集！\n\n感谢您对蓝莓影院的支持。永久免VIP绿色追剧，就选蓝莓科技！`; } appendBotMessage(botReply); } // ==================== BIND GLOBALS & FORM LISTENERS ==================== function initEventListeners() { // 1. Tab switches desktop const tabButtons = document.querySelectorAll('.nav-tab'); tabButtons.forEach(btn => { btn.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const tab = target.getAttribute('data-tab') || 'home'; switchTab(tab); }); }); // 2. Tab switches mobile drawer const mobTabButtons = document.querySelectorAll('.mobile-tab-btn'); mobTabButtons.forEach(btn => { btn.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const tab = target.getAttribute('data-tab') || 'home'; switchTab(tab); }); }); // Logo button clicks (Redirect back to Home) if (elements.headerLogoBtn) elements.headerLogoBtn.addEventListener('click', () => switchTab('home')); if (elements.footerLogoBtn) elements.footerLogoBtn.addEventListener('click', () => switchTab('home')); // Mobile Hamburger menu toggle if (elements.mobileMenuHamburger && elements.mobileDrawer) { elements.mobileMenuHamburger.addEventListener('click', () => { elements.mobileDrawer?.classList.toggle('hidden'); }); } // Mobile Shortcut overrides if (elements.mobileSearchTrigger) { elements.mobileSearchTrigger.addEventListener('click', () => { switchTab('products'); elements.catalogSearchInput?.focus(); }); } if (elements.mobileContactTrigger) elements.mobileContactTrigger.addEventListener('click', () => switchTab('contact')); if (elements.headerCollaborationBtn) elements.headerCollaborationBtn.addEventListener('click', () => switchTab('contact')); // Quick category filters from Home Tab const catShortcuts = document.querySelectorAll('.category-shortcut-pill'); catShortcuts.forEach(pill => { pill.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const typeVal = target.getAttribute('data-filter-type'); const regionVal = target.getAttribute('data-filter-region'); switchTab('products'); if (typeVal) { filterType = typeVal; } if (regionVal) { filterRegion = regionVal; } currentPage = 1; renderCatalog(); }); }); // Search shortcuts input control if (elements.searchShortcutBtn) { elements.searchShortcutBtn.addEventListener('click', () => { switchTab('products'); elements.catalogSearchInput?.focus(); }); } // Keyboard shortcut Ctrl + F trigger window.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'f') { e.preventDefault(); switchTab('products'); elements.catalogSearchInput?.focus(); } }); // Real-time catalog Search inputs if (elements.catalogSearchInput) { elements.catalogSearchInput.addEventListener('input', (e) => { const val = (e.target as HTMLInputElement).value; searchQuery = val; // Toggle clear button if (val.trim() !== '') { elements.catalogSearchClear?.classList.remove('hidden'); } else { elements.catalogSearchClear?.classList.add('hidden'); } // Live update catalog results with debounce logic if required, standard on-input works wonders currentPage = 1; renderCatalog(); }); } if (elements.catalogSearchClear) { elements.catalogSearchClear.addEventListener('click', () => { searchQuery = ''; if (elements.catalogSearchInput) elements.catalogSearchInput.value = ''; elements.catalogSearchClear?.classList.add('hidden'); currentPage = 1; renderCatalog(); }); } // Dialog Close buttons if (elements.modalCloseTrigger) elements.modalCloseTrigger.addEventListener('click', closeMovieDetailModal); if (elements.videoStreamDialog) { elements.videoStreamDialog.addEventListener('click', (e) => { // close modal on clicking dark overlay background directly if (e.target === elements.videoStreamDialog) { closeMovieDetailModal(); } }); } // Catalog Pill Rows clicks const catalogPills = document.querySelectorAll('.filter-pill'); catalogPills.forEach(pill => { pill.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const fType = target.getAttribute('data-filter'); const val = target.getAttribute('data-value') || '全部'; if (fType === 'type') filterType = val; else if (fType === 'region') filterRegion = val; else if (fType === 'year') filterYear = val; else if (fType === 'rating') filterRating = val; currentPage = 1; // Reset pagination page count on filtering changes renderCatalog(); }); }); // Sort Selector change listener if (elements.catalogSortSelect) { elements.catalogSortSelect.addEventListener('change', (e) => { filterSort = (e.target as HTMLSelectElement).value; currentPage = 1; renderCatalog(); }); } // Pagination clicks Prev/Next if (elements.btnPagePrev) { elements.btnPagePrev.addEventListener('click', () => { if (currentPage > 1) { currentPage--; renderCatalog(); elements.tabProducts?.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); } if (elements.btnPageNext) { elements.btnPageNext.addEventListener('click', () => { currentPage++; renderCatalog(); elements.tabProducts?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }); } // Reset filter when empty if (elements.catalogEmptyReset) { elements.catalogEmptyReset.addEventListener('click', () => { filterType = '全部'; filterRegion = '全部'; filterYear = '全部'; filterRating = '全部'; searchQuery = ''; if (elements.catalogSearchInput) elements.catalogSearchInput.value = ''; elements.catalogSearchClear?.classList.add('hidden'); currentPage = 1; renderCatalog(); }); } // POI selection rows maps const poiBtns = document.querySelectorAll('.map-poi-row-btn'); poiBtns.forEach(btn => { btn.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const idx = parseInt(target.getAttribute('data-idx') || '0', 10); selectPoi(idx); // Auto center map coordinate on selection const targetPoi = MAP_POIS[idx]; mapZoom = 1.2; mapOffsetX = -(targetPoi.x - 400); mapOffsetY = -(targetPoi.y - 250); }); }); // Global Chat Window simulator opening/closing triggers if (elements.floatingChatTrigger) { elements.floatingChatTrigger.addEventListener('click', () => { elements.onlineChatWindow?.classList.toggle('hidden'); }); } if (elements.chatWindowClose) { elements.chatWindowClose.addEventListener('click', () => { elements.onlineChatWindow?.classList.add('hidden'); }); } if (elements.triggerOnlineChat) { elements.triggerOnlineChat.addEventListener('click', () => { elements.onlineChatWindow?.classList.remove('hidden'); elements.onlineChatWindow?.scrollIntoView({ behavior: 'smooth' }); }); } // Form Submission if (elements.contactForm) { elements.contactForm.addEventListener('submit', (e) => { e.preventDefault(); const name = (document.getElementById('form-name') as HTMLInputElement).value; const captcha = (document.getElementById('form-captcha') as HTMLInputElement).value.toUpperCase(); if (captcha !== 'LM') { alert('人类验证错误！请输入 蓝莓 的首字母拼音：LM (不区分大小写)'); return; } // Enter loading state if (elements.formSubmitBtn) elements.formSubmitBtn.disabled = true; if (elements.formSubmitText) elements.formSubmitText.innerText = '正在为您建立安全加密工单通道...'; if (elements.formSubmitSpinner) elements.formSubmitSpinner.classList.remove('hidden'); setTimeout(() => { // Reset state if (elements.formSubmitBtn) elements.formSubmitBtn.disabled = false; if (elements.formSubmitText) elements.formSubmitText.innerText = '安全提交蓝莓工单'; if (elements.formSubmitSpinner) elements.formSubmitSpinner.classList.add('hidden'); // Reset form fields elements.contactForm.reset(); // Assign CRM Ticket Number const ticketNum = `LM-2026-${Math.floor(Math.random() * 9000 + 1000)}`; if (elements.toastTitle) elements.toastTitle.innerText = `感谢 ${name}，工单提交成功！`; if (elements.toastDesc) elements.toastDesc.innerText = `蓝莓服务中心已接单，工单号为: ${ticketNum}`; // Popup Toast notification if (elements.globalSuccessToast) { elements.globalSuccessToast.classList.remove('hidden'); setTimeout(() => { elements.globalSuccessToast?.classList.add('hidden'); }, 6000); } }, 1500); }); } // Close Toast if (elements.toastCloseBtn) { elements.toastCloseBtn.addEventListener('click', () => { elements.globalSuccessToast?.classList.add('hidden'); }); } // View more popular buttons if (elements.viewMorePopularBtn) { elements.viewMorePopularBtn.addEventListener('click', () => { switchTab('products'); }); } // Hero Play Trigger if (elements.heroPlayTrigger) { elements.heroPlayTrigger.addEventListener('click', (e) => { const target = e.currentTarget as HTMLElement; const movieId = target.getAttribute('data-movie-id'); if (movieId) openMovieDetailModal(movieId); }); } // Hero Catalog Trigger if (elements.heroCatalogTrigger) { elements.heroCatalogTrigger.addEventListener('click', () => switchTab('products')); } // Commitment button trigger chat if (elements.commitmentContactBtn) { elements.commitmentContactBtn.addEventListener('click', () => { elements.onlineChatWindow?.classList.remove('hidden'); appendUserMessage('我想加入蓝莓影院数字技术发烧友交流群！'); setTimeout(() => { appendBotMessage(`欢迎您加入蓝莓数字发烧友大家庭！\n\n我们的微信官方交流群二维码已生成！请添加官方运维群管微信：【BlueberryCinema_2026】，回复【加群】。管理员将在1小时内拉您入群，群内可直接@机器人发布极速求片特快指令！`); }, 750); }); } } // ==================== MAIN INITIALIZATION SYSTEM ==================== window.addEventListener('DOMContentLoaded', () => { // Render core items renderHomeMovies(); renderHomeNews(); renderAboutTeam(); renderCorporateCulture(); renderTimelinePanel(); // Render products tab first load renderCatalog(); // Map Sandbox load initMapEngine(); selectPoi(0); // Select first POI center as default // Chat Bot load initChatEngine(); // Wire buttons events initEventListeners(); console.log("Blueberry Cinema System Online. 蓝莓影院 - 2026战略升级版正常加载中."); });