diff --git a/client/css/phone.css b/client/css/phone.css index 4119563..1801151 100644 --- a/client/css/phone.css +++ b/client/css/phone.css @@ -70,11 +70,13 @@ * { touch-action: pan-y; - } .sidebar, + } + .sidebar, .rightbar, .settings-sidebar { position: fixed; top: 0; + width: 60vw !important; bottom: 0; z-index: 1000; height: 100dvh; @@ -85,7 +87,6 @@ .sidebar { left: 0; - max-width: 70vw; transform: translateX(-100%); border-right: 1px solid #e0e0e0; } @@ -95,9 +96,6 @@ } .settings-sidebar { - left: 0; - max-width: 80vw; - width: 80vw !important; transform: translateX(-100%); border-right: 1px solid #e0e0e0; z-index: 1001; /* Higher than normal sidebar */ @@ -206,4 +204,32 @@ .bubble.me.private-message .bubble-content { color: white !important; background-color: transparent !important; +} + +/* Mobile theme selector styles */ +/* 移动端主题选择器样式 */ +.theme-selector { + gap: 8px; + padding: 6px 2px; + /* Ensure scrollbars are hidden on mobile too */ + scrollbar-width: none; + -ms-overflow-style: none; + /* Improve touch scrolling */ + -webkit-overflow-scrolling: touch; +} + +.theme-selector::-webkit-scrollbar { + display: none; +} + +.theme-item { + width: 70px; + height: 70px; + /* Prevent text selection on mobile */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* Prevent touch callouts */ + -webkit-touch-callout: none; } \ No newline at end of file diff --git a/client/css/style.css b/client/css/style.css index 62660aa..3c76373 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -65,12 +65,12 @@ body { } .settings-header { - display: flex; - align-items: center; - padding: 17.2px 18px 10px 17px; - background: #fff; - border-bottom: 1px solid #dcdcdc; - position: relative; + display: flex; + align-items: center; + padding: 19.2px 18px 18px 12px; + background: #fff; + border-bottom: 1px solid #dcdcdc; + position: relative; } .settings-back-btn { @@ -138,6 +138,77 @@ body { margin-top: 4px; } +/* Theme selector styles */ +/* 主题选择器样式 */ +.theme-selector { + display: flex; + gap: 12px; + overflow-x: auto; + padding: 8px 4px; + border-radius: 8px; + background: #f8f9fa; + /* Hide scrollbars */ + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + cursor: grab; +} + +.theme-selector::-webkit-scrollbar { + display: none; /* Webkit browsers */ +} + +.theme-selector.dragging { + cursor: grabbing; + user-select: none; +} + +.theme-item { + flex-shrink: 0; + width: 70px; + height: 70px; + border-radius: 12px; + border: 3px solid transparent; + cursor: pointer; + transition: all 0.3s ease; + user-select: none; + background-size: cover !important; + background-position: center !important; + background-repeat: no-repeat !important; + position: relative; + overflow: hidden; +} + +.theme-item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.1); + border-radius: 9px; + transition: all 0.3s ease; +} + +.theme-item:hover { + border-color: #30a8f7; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(48, 168, 247, 0.25); +} + +.theme-item:hover::before { + background: rgba(48, 168, 247, 0.1); +} + +.theme-item.active { + border-color: #30a8f7; + box-shadow: 0 0 0 2px rgba(48, 168, 247, 0.3); +} + +.theme-item.active::before { + background: rgba(48, 168, 247, 0.15); +} + /* Old settings panel - hide */ .settings-panel { display: none !important; @@ -348,7 +419,6 @@ body { .main { display: flex; flex-direction: column; - background-image: url(data:image/png;base64,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) !important; background-size: 100% 100%; position: relative; flex: 2.5; diff --git a/client/js/main.js b/client/js/main.js index e8e7d75..d097f63 100644 --- a/client/js/main.js +++ b/client/js/main.js @@ -25,6 +25,12 @@ import { notifyMessage // 通知信息提示 / Display notification message } from './util.settings.js'; +// 从 util.theme.js 中导入主题功能函数 +// Import theme functions from util.theme.js +import { + initTheme // 初始化主题 / Initialize theme +} from './util.theme.js'; + // 从 util.dom.js 中导入常用 DOM 操作函数 // Import common DOM manipulation functions from util.dom.js import { @@ -67,7 +73,8 @@ import { renderUserList, // 渲染用户列表 / Render user list // 设置全局配置参数 // Set global configuration parameters window.config = { - wsAddress: `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`, // WebSocket 服务器地址 / WebSocket server address + //wsAddress: `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`, // WebSocket 服务器地址 / WebSocket server address + wsAddress: `ws://127.0.0.1:8787`, debug: true // 是否开启调试模式 / Enable debug mode }; @@ -103,7 +110,6 @@ window.addEventListener('DOMContentLoaded', () => { preventSpaceInput($id('userName')); preventSpaceInput($id('roomName')); preventSpaceInput($id('password')); - // 初始化辅助功能和界面设置 // Initialize autofill, input placeholders, and menus autofillRoomPwd(); @@ -112,6 +118,7 @@ window.addEventListener('DOMContentLoaded', () => { setupImagePreview(); setupEmojiPicker(); initSettings(); + initTheme(); // 初始化主题 / Initialize theme const settingsBtn = $id('settings-btn'); // 设置按钮 / Settings button if (settingsBtn) { settingsBtn.onclick = (e) => { diff --git a/client/js/util.settings.js b/client/js/util.settings.js index eabb295..c9f281d 100644 --- a/client/js/util.settings.js +++ b/client/js/util.settings.js @@ -10,11 +10,16 @@ import { addClass, removeClass } from './util.dom.js'; + +// Import theme utilities +// 导入主题工具函数 +import { THEMES, getCurrentTheme, applyTheme } from './util.theme.js'; // Default settings // 默认设置 const DEFAULT_SETTINGS = { notify: false, - sound: false + sound: false, + theme: 'theme1' }; // Load settings from localStorage @@ -37,11 +42,13 @@ function loadSettings() { function saveSettings(settings) { const { notify, - sound + sound, + theme } = settings; localStorage.setItem('settings', JSON.stringify({ notify, - sound + sound, + theme })) } @@ -68,8 +75,7 @@ function setupSettingsPanel() { const settingsContent = $id('settings-content'); if (!settingsSidebar || !settingsContent) return; - const settings = loadSettings(); - // Create settings content HTML + const settings = loadSettings(); // Create settings content HTML settingsContent.innerHTML = `
通知设置
@@ -91,6 +97,14 @@ function setupSettingsPanel() {
+
+
主题设置
+
+ ${THEMES.map(theme => ` +
+
+ `).join('')} +
`; @@ -133,8 +147,7 @@ function setupSettingsPanel() { settingsSidebar._notificationShown = false; } } - }); - on(soundCheckbox, 'change', e => { + }); on(soundCheckbox, 'change', e => { settings.sound = e.target.checked; if (settings.sound) { settings.notify = false; @@ -143,6 +156,154 @@ function setupSettingsPanel() { saveSettings(settings); applySettings(settings) }); + // Theme selection event handlers + // 主题选择事件处理 + const themeSelector = $('#theme-selector', settingsContent); + if (themeSelector) { + // Custom scrolling functionality + // 自定义滚动功能 + let isDragging = false; + let startX = 0; + let scrollLeft = 0; + + // Mouse wheel scrolling (vertical -> horizontal) + // 鼠标滚轮滚动（垂直转水平） + on(themeSelector, 'wheel', e => { + e.preventDefault(); + const scrollAmount = e.deltaY * 0.5; // Adjust scroll sensitivity + themeSelector.scrollLeft += scrollAmount; + }); + // Mouse drag scrolling + // 鼠标拖拽滚动 + let dragStartTime = 0; + let hasDragged = false; + + on(themeSelector, 'mousedown', e => { + isDragging = true; + hasDragged = false; + dragStartTime = Date.now(); + startX = e.pageX - themeSelector.offsetLeft; + scrollLeft = themeSelector.scrollLeft; + themeSelector.classList.add('dragging'); + e.preventDefault(); // Prevent text selection + }); + on(document, 'mousemove', e => { + if (!isDragging) return; + e.preventDefault(); + const x = e.pageX - themeSelector.offsetLeft; + const walk = (x - startX) * 2; // Scroll speed multiplier + const moved = Math.abs(walk); + + // If moved more than 5px, consider it a drag + if (moved > 5) { + hasDragged = true; + } + + themeSelector.scrollLeft = scrollLeft - walk; + }); + + on(document, 'mouseup', () => { + if (isDragging) { + isDragging = false; + themeSelector.classList.remove('dragging'); + } + }); + // Touch support for mobile + // 移动端触摸支持 + let touchStartX = 0; + let touchScrollLeft = 0; + let touchStartTime = 0; + let touchHasMoved = false; + + on(themeSelector, 'touchstart', e => { + touchStartX = e.touches[0].clientX; + touchScrollLeft = themeSelector.scrollLeft; + touchStartTime = Date.now(); + touchHasMoved = false; + }); + + on(themeSelector, 'touchmove', e => { + e.preventDefault(); + const touchX = e.touches[0].clientX; + const walk = (touchStartX - touchX) * 1.5; // Touch scroll sensitivity + + // If moved more than 10px, consider it a swipe + if (Math.abs(walk) > 10) { + touchHasMoved = true; + } + + themeSelector.scrollLeft = touchScrollLeft + walk; + }); + + // Handle touch end for theme selection + // 处理触摸结束的主题选择 + on(themeSelector, 'touchend', e => { + // If user swiped, don't trigger theme selection + // 如果用户滑动过，不触发主题选择 + if (touchHasMoved) { + touchHasMoved = false; + return; + } + + // Check if it was a quick tap + // 检查是否是快速点击 + const tapDuration = Date.now() - touchStartTime; + if (tapDuration > 300) { + return; + } + + const themeItem = e.target.closest('.theme-item'); + if (themeItem) { + const themeId = themeItem.dataset.themeId; + if (themeId && themeId !== settings.theme) { + // Update active state + $$('.theme-item', themeSelector).forEach(item => { + item.classList.remove('active'); + }); + themeItem.classList.add('active'); + + // Apply theme and save settings + settings.theme = themeId; + applyTheme(themeId); + saveSettings(settings); + } + } + }); + // Theme selection click handler + // 主题选择点击处理器 + on(themeSelector, 'click', e => { + // If user just dragged, don't trigger theme selection + // 如果用户刚刚拖拽过，不触发主题选择 + if (hasDragged) { + hasDragged = false; + return; + } + + // Also check if it was a quick click (less than 200ms and minimal movement) + // 同时检查是否是快速点击（少于200ms且移动很少） + const clickDuration = Date.now() - dragStartTime; + if (clickDuration > 200) { + return; + } + + const themeItem = e.target.closest('.theme-item'); + if (themeItem) { + const themeId = themeItem.dataset.themeId; + if (themeId && themeId !== settings.theme) { + // Update active state + $$('.theme-item', themeSelector).forEach(item => { + item.classList.remove('active'); + }); + themeItem.classList.add('active'); + + // Apply theme and save settings + settings.theme = themeId; + applyTheme(themeId); + saveSettings(settings); + } + } + }); + } } // Check if device is mobile @@ -207,7 +368,13 @@ function closeSettingsPanel() { // 页面加载时初始化设置 function initSettings() { const settings = loadSettings(); - applySettings(settings) + applySettings(settings); + + // Apply theme from settings + // 从设置中应用主题 + if (settings.theme) { + applyTheme(settings.theme); + } } // Maximum notification text length diff --git a/client/js/util.theme.js b/client/js/util.theme.js new file mode 100644 index 0000000..b1a57d9 --- /dev/null +++ b/client/js/util.theme.js @@ -0,0 +1,123 @@ +// Theme utility functions +// 主题工具函数 + +// Theme data - simplified structure +// 主题数据 - 简化结构 +export const THEMES = [ + { + id: 'theme1', + background: 'url(data:image/png;base64,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)' + }, + { + id: 'theme2', + background: 'url(data:image/png;base64,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)' + }, + { + id: 'theme3', + background: 'url(data:image/png;base64,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)' + }, + { + id: 'theme4', + background: 'url(data:image/png;base64,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)' + }, + { + id: 'theme5', + background: 'url(data:image/png;base64,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)' + }, + { + id: 'theme6', + background: 'url(data:image/png;base64,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)' + }, + { + id: 'theme7', + background: 'url(data:image/png;base64,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)' + }, { + id: 'theme8', + background: 'url(data:image/png;base64,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)' + } +]; + +// Get current theme from settings +// 从设置中获取当前主题 +export function getCurrentTheme() { + try { + const settings = JSON.parse(localStorage.getItem('settings') || '{}'); + + // If no theme is set (first-time visitor), randomly select one + // 如果没有设置主题（首次访问），随机选择一个 + if (!settings.theme) { + const randomIndex = Math.floor(Math.random() * THEMES.length); + const randomTheme = THEMES[randomIndex]; + + // Save the randomly selected theme to settings + // 将随机选择的主题保存到设置中 + settings.theme = randomTheme.id; + localStorage.setItem('settings', JSON.stringify(settings)); + + return randomTheme; + } + + const themeId = settings.theme; + return THEMES.find(theme => theme.id === themeId) || THEMES[0]; + } catch { + // If there's an error, select a random theme for fallback + // 如果出现错误，随机选择一个主题作为备选 + const randomIndex = Math.floor(Math.random() * THEMES.length); + return THEMES[randomIndex]; + } +} + +// Apply theme to the document +// 应用主题到文档 +export function applyTheme(themeId) { + const theme = THEMES.find(t => t.id === themeId); + if (!theme) { + console.warn(`Theme with id "${themeId}" not found`); + return false; + } + + const mainElement = document.querySelector('.main'); + if (mainElement) { + // Clear any existing background + mainElement.style.backgroundImage = ''; + mainElement.style.background = ''; + + // Apply new background + if (theme.background.startsWith('url(')) { + mainElement.style.backgroundImage = theme.background; + mainElement.style.backgroundSize = '100% 100%'; + mainElement.style.backgroundRepeat = 'no-repeat'; + mainElement.style.backgroundPosition = 'center'; + } else { + mainElement.style.background = theme.background; + } + // Add transition effect for smooth theme switching + // 添加过渡效果，实现平滑的主题切换 + mainElement.style.transition = 'background 0.5s ease-in-out, background-image 0.5s ease-in-out'; + + console.log(`Applied theme: ${themeId}`); + return true; + } else { + console.warn('Main element not found'); + return false; + } +} + +// Initialize theme on page load +// 页面加载时初始化主题 +export function initTheme() { + const currentTheme = getCurrentTheme(); + applyTheme(currentTheme.id); +} + +// Get theme by ID +// 根据ID获取主题 +export function getThemeById(themeId) { + return THEMES.find(theme => theme.id === themeId); +} + +// Get all available themes +// 获取所有可用主题 +export function getAllThemes() { + return THEMES; +}