From 313f87d787792591393fd84529cdb3789d6dcae6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93=20Ng=E1=BB=8Dc=20Sen?= <70382284+Sentechtipsvn@users.noreply.github.com> Date: Tue, 8 Sep 2026 14:27:00 +0700 Subject: [PATCH 001/124] Update vi-VN.json --- Language/vi-VN.json | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/Language/vi-VN.json b/Language/vi-VN.json index d0d5915..a530bdc 100644 --- a/Language/vi-VN.json +++ b/Language/vi-VN.json @@ -57,6 +57,7 @@ "shadow_soft": "⚪️ Mờ Diện Rộng", "shadow_hard": "⚪️ Nổi Khối 3D", "shadow_glow": "⚪️ Phát Sáng", + "shadow_neumorphic": "⚪️ Dập Nổi 3D", "slider_x": "Trục X", "slider_y": "Trục Y", "slider_blur": "Độ mờ", @@ -64,8 +65,15 @@ "slider_color": "Màu Bóng", "slider_opacity": "Độ đậm bóng", "lbl_layout_mode": "Danh sách/Lưới", - "msg_copy_success": "Đã sao chép mã cấu hình (22 Biến)!", + "msg_copy_success": "Đã sao chép mã cấu hình!", "msg_prompt_import": "📥 Dán mã cấu hình vào đây:", + "lbl_media_widget": "🎵 Trình Phát Nhạc", + "lbl_media_width": "Kích thước khung", + "lbl_media_bg_opacity": "Độ mờ khung", + "lbl_media_btn_size": "Cỡ nút bấm", + "lbl_media_bg_color": "Màu khung", + "lbl_media_btn_color": "Màu nút", + "lbl_media_svg_color": "Màu SVG", "lang_wifi": "Wi-Fi", "lang_bluetooth": "Bluetooth", "lang_cellular": "Di động", From 258bb63ba468c80a23c521bf772a33a5b8f5bca2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93=20Ng=E1=BB=8Dc=20Sen?= <70382284+Sentechtipsvn@users.noreply.github.com> Date: Tue, 8 Sep 2026 14:27:35 +0700 Subject: [PATCH 002/124] Update theme.js --- js/theme.js | 70 ++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 53 insertions(+), 17 deletions(-) diff --git a/js/theme.js b/js/theme.js index 461e899..6c3b02b 100644 --- a/js/theme.js +++ b/js/theme.js @@ -4,6 +4,7 @@ const SHADOW_MODES = [ { id: 'soft', nameKey: 'shadow_soft', name: 'Mờ Diện Rộng', template: '{x}px {y}px {b}px {s}px {c}' }, { id: 'hard', nameKey: 'shadow_hard', name: 'Nổi Khối 3D', template: '{x}px {y}px {b}px {s}px {c}' }, { id: 'glow', nameKey: 'shadow_glow', name: 'Phát Sáng', template: '0px 0px {b}px {s}px {c}' }, + { id: 'neumorphic', nameKey: 'shadow_neumorphic', name: 'Dập Nổi (Neumorphism)', template: '-{x}px -{y}px {b}px {s}px rgba(255,255,255,0.3), {x}px {y}px {b}px {s}px {c}' } ]; document.addEventListener("DOMContentLoaded", () => { @@ -128,6 +129,13 @@ document.addEventListener("DOMContentLoaded", () => { return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`; } + function hexToRgb(hex) { + let r = 0, g = 0, b = 0; + if (hex.length === 4) { r = parseInt(hex[1] + hex[1], 16); g = parseInt(hex[2] + hex[2], 16); b = parseInt(hex[3] + hex[3], 16); } + else if (hex.length === 7) { r = parseInt(hex.substring(1, 3), 16); g = parseInt(hex.substring(3, 5), 16); b = parseInt(hex.substring(5, 7), 16); } + return `${r}, ${g}, ${b}`; + } + function updateShadow() { const activeShadows = document.querySelectorAll('input[name="active_shadow"]:checked'); let combinedShadow = ''; @@ -172,6 +180,14 @@ document.addEventListener("DOMContentLoaded", () => { localStorage.setItem('sttv_glassMode', document.getElementById('toggle-glass').checked); localStorage.setItem('sttv_audioFeedback', document.getElementById('toggle-audio').checked); + // Lưu cài đặt Media Widget + localStorage.setItem('sttv_mediaWidth', document.getElementById('val-media-width').value); + localStorage.setItem('sttv_mediaBgOpacity', document.getElementById('val-media-bg-opacity').value); + localStorage.setItem('sttv_mediaBtnSize', document.getElementById('val-media-btn-size').value); + localStorage.setItem('sttv_mediaBgColor', document.getElementById('val-media-bg-color').value); + localStorage.setItem('sttv_mediaBtnColor', document.getElementById('val-media-btn-color').value); + localStorage.setItem('sttv_mediaSvgColor', document.getElementById('val-media-svg-color').value); + const shadowState = {}; SHADOW_MODES.forEach(mode => { const drawer = document.getElementById(`drawer-${mode.id}`); @@ -203,7 +219,10 @@ document.addEventListener("DOMContentLoaded", () => { document.getElementById('val-frame-radius').value, document.getElementById('val-frame-color').value, document.getElementById('val-svg-color').value, sData, document.getElementById('toggle-hide-labels').checked, document.getElementById('val-title-size').value, document.getElementById('val-title-spacing').value, document.getElementById('toggle-list-frame').checked, document.getElementById('val-icon-size').value, document.getElementById('val-icon-spacing').value, - document.getElementById('val-list-bg-opacity').value, document.getElementById('val-frame-bg-opacity').value + document.getElementById('val-list-bg-opacity').value, document.getElementById('val-frame-bg-opacity').value, + document.getElementById('val-media-width').value, document.getElementById('val-media-bg-opacity').value, + document.getElementById('val-media-btn-size').value, document.getElementById('val-media-bg-color').value, + document.getElementById('val-media-btn-color').value, document.getElementById('val-media-svg-color').value ]; return btoa(JSON.stringify(dataArr)).replace(/=/g, ''); } @@ -239,13 +258,17 @@ document.addEventListener("DOMContentLoaded", () => { } if(arr.length >= 21) { document.getElementById('val-list-bg-opacity').value = arr[20]; - } else { - document.getElementById('val-list-bg-opacity').value = 10; - } - if(arr.length >= 22) { - document.getElementById('val-frame-bg-opacity').value = arr[21]; - } else { - document.getElementById('val-frame-bg-opacity').value = 100; + } else { document.getElementById('val-list-bg-opacity').value = 10; } + + if(arr.length >= 22) { document.getElementById('val-frame-bg-opacity').value = arr[21]; } else { document.getElementById('val-frame-bg-opacity').value = 100; } + + if(arr.length >= 28) { + document.getElementById('val-media-width').value = arr[22]; + document.getElementById('val-media-bg-opacity').value = arr[23]; + document.getElementById('val-media-btn-size').value = arr[24]; + document.getElementById('val-media-bg-color').value = arr[25]; + document.getElementById('val-media-btn-color').value = arr[26]; + document.getElementById('val-media-svg-color').value = arr[27]; } updateLiveVariables(); } catch(e) { alert("Mã cấu hình không hợp lệ!"); } @@ -253,7 +276,7 @@ document.addEventListener("DOMContentLoaded", () => { document.getElementById('btn-export').onclick = () => { navigator.clipboard.writeText(packConfig()).then(() => { - const msg = window.i18nData?.['msg_copy_success'] || "Đã sao chép mã cấu hình (22 Biến)!"; + const msg = window.i18nData?.['msg_copy_success'] || "Đã sao chép mã cấu hình!"; alert(msg); }); }; @@ -278,7 +301,6 @@ document.addEventListener("DOMContentLoaded", () => { root.style.setProperty('--title-size', document.getElementById('val-title-size').value + 'px'); root.style.setProperty('--title-spacing', document.getElementById('val-title-spacing').value + 'px'); - root.style.setProperty('--icon-font-size', document.getElementById('val-icon-size').value + 'px'); root.style.setProperty('--icon-spacing', document.getElementById('val-icon-spacing').value + 'px'); root.style.setProperty('--label-display', document.getElementById('toggle-hide-labels').checked ? 'none' : 'block'); @@ -295,7 +317,6 @@ document.addEventListener("DOMContentLoaded", () => { const listBgOpacity = document.getElementById('val-list-bg-opacity').value; root.style.setProperty('--list-bg-color', listBgHex); root.style.setProperty('--list-bg-rgba', hexToRgba(listBgHex, listBgOpacity)); - root.style.setProperty('--list-text-color', document.getElementById('val-list-text').value); root.style.setProperty('--list-svg-color', document.getElementById('val-list-svg').value); @@ -305,7 +326,6 @@ document.addEventListener("DOMContentLoaded", () => { const frameColorRgba = hexToRgba(frameColorHex, frameColorOpacity); const customContainer = document.getElementById('custom-svg-container'); - if (frameSelect === 'custom') { customContainer.style.display = 'block'; root.style.setProperty('--frame-bg-color', 'transparent'); const savedCustom = localStorage.getItem('sttv_customSvg') || document.getElementById('custom-svg-code').value; @@ -325,6 +345,17 @@ document.addEventListener("DOMContentLoaded", () => { const glassMode = document.getElementById('toggle-glass').checked; if(glassMode) mainContainer.classList.add('glass-active'); else mainContainer.classList.remove('glass-active'); + // ÁP DỤNG BIẾN MEDIA WIDGET + const mediaBgColor = document.getElementById('val-media-bg-color').value; + root.style.setProperty('--media-bg-rgb', hexToRgb(mediaBgColor)); + root.style.setProperty('--media-bg-opacity', document.getElementById('val-media-bg-opacity').value / 100); + root.style.setProperty('--media-width', document.getElementById('val-media-width').value + '%'); + root.style.setProperty('--media-btn-color', document.getElementById('val-media-btn-color').value); + root.style.setProperty('--media-svg-color', document.getElementById('val-media-svg-color').value); + const mediaBtnSize = document.getElementById('val-media-btn-size').value; + root.style.setProperty('--media-btn-size', mediaBtnSize + 'px'); + root.style.setProperty('--media-btn-play', (parseInt(mediaBtnSize) + 15) + 'px'); + updateShadow(); saveSettingsToLocal(); } @@ -343,17 +374,22 @@ document.addEventListener("DOMContentLoaded", () => { safeSet('val-theme-frame', 'themeFrame', 'none'); safeSet('val-frame-size', 'frameSize', '60'); safeSet('val-svg-size', 'svgSize', '28'); safeSet('val-svg-opacity', 'svgOpacity', '100'); safeSet('val-svg-color', 'svgColor', '#ffffff'); safeSet('val-frame-radius', 'frameRadius', '22'); - safeSet('val-frame-color', 'frameColor', '#000000'); - safeSet('val-frame-bg-opacity', 'frameBgOpacity', '100'); + safeSet('val-frame-color', 'frameColor', '#000000'); safeSet('val-frame-bg-opacity', 'frameBgOpacity', '100'); - safeSet('toggle-hide-labels', 'hideLabels', false, true); - safeSet('toggle-list-frame', 'listFrame', false, true); + safeSet('toggle-hide-labels', 'hideLabels', false, true); safeSet('toggle-list-frame', 'listFrame', false, true); safeSet('val-title-size', 'titleSize', '22'); safeSet('val-title-spacing', 'titleSpacing', '0.5'); safeSet('val-icon-size', 'iconSize', '14'); safeSet('val-icon-spacing', 'iconSpacing', '0'); - safeSet('toggle-glass', 'glassMode', false, true); safeSet('toggle-audio', 'audioFeedback', false, true); safeSet('toggle-parallax', 'parallax', false, true); + // Load cài đặt Media Widget + safeSet('val-media-width', 'mediaWidth', '90'); + safeSet('val-media-bg-opacity', 'mediaBgOpacity', '3'); + safeSet('val-media-btn-size', 'mediaBtnSize', '50'); + safeSet('val-media-bg-color', 'mediaBgColor', '#ffffff'); + safeSet('val-media-btn-color', 'mediaBtnColor', '#ffffff'); + safeSet('val-media-svg-color', 'mediaSvgColor', '#ffffff'); + const initLayout = localStorage.getItem('sttv_layoutMode') || 'grid'; const btnList = document.getElementById('btn-layout-list'); const btnGrid = document.getElementById('btn-layout-grid'); From 0f1c915e5ec57478840518eab5d5181aeeae2974 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93=20Ng=E1=BB=8Dc=20Sen?= <70382284+Sentechtipsvn@users.noreply.github.com> Date: Tue, 8 Sep 2026 14:28:03 +0700 Subject: [PATCH 003/124] Update main.js --- js/main.js | 88 +++++++++++++++++++----------------------------------- 1 file changed, 30 insertions(+), 58 deletions(-) diff --git a/js/main.js b/js/main.js index 224b49d..b0561c7 100644 --- a/js/main.js +++ b/js/main.js @@ -4,21 +4,18 @@ document.addEventListener("DOMContentLoaded", async () => { let userLang = navigator.language || navigator.userLanguage; if (!SUPPORTED_LANGS.includes(userLang)) userLang = 'en-US'; - // 1. Tải ngôn ngữ Fallback Tiếng Anh (Làm gốc chuẩn ngữ pháp) let fallbackTranslations = {}; try { const fbRes = await fetch(`Language/en-US.json`); if (fbRes.ok) fallbackTranslations = await fbRes.json(); } catch (e) { console.warn("Missing English fallback"); } - // 2. Tải ngôn ngữ theo thiết bị người dùng (vi-VN) let userTranslations = {}; try { const res = await fetch(`Language/${userLang}.json`); if (res.ok) userTranslations = await res.json(); } catch (e) { console.warn(`Missing language: ${userLang}`); } - // 3. Hợp nhất: Ưu tiên ngôn ngữ thiết bị, nếu thiếu khóa nào tự động dùng Tiếng Anh window.i18nData = { ...fallbackTranslations, ...userTranslations }; document.querySelectorAll('[data-i18n]').forEach(element => { @@ -56,80 +53,55 @@ document.addEventListener("DOMContentLoaded", async () => { }); } - // --- HỆ THỐNG KÉO THẢ CẢM ỨNG (TOUCH DRAG & DROP) CHO LƯỚI 2D --- + // --- SẮP XẾP BẰNG CÁCH CHẠM HOÁN ĐỔI (TAP-TO-SWAP) --- const btnEditLayout = document.getElementById('btn-edit-layout'); let editMode = false; + let selectedSwapNode = null; btnEditLayout.addEventListener('click', () => { editMode = !editMode; document.body.classList.toggle('edit-mode', editMode); btnEditLayout.style.background = editMode ? 'red' : ''; btnEditLayout.innerHTML = editMode ? 'Xong' : '🔄 Sắp xếp'; + + if (!editMode && selectedSwapNode) { + selectedSwapNode.classList.remove('selected-swap'); + selectedSwapNode = null; + } + document.querySelectorAll('.glass-btn').forEach(b => { b.onclick = editMode ? (e) => e.preventDefault() : null; }); }); - let draggedItem = null; - let ghostEl = null; - - // Bắt sự kiện chạm ngón tay - container.addEventListener('touchstart', (e) => { + container.addEventListener('click', (e) => { if (!editMode) return; const target = e.target.closest('.glass-btn'); if (!target) return; - draggedItem = target; - draggedItem.classList.add('dragging'); - - ghostEl = draggedItem.cloneNode(true); - ghostEl.style.position = 'absolute'; - ghostEl.style.zIndex = 1000; - ghostEl.style.opacity = '0.8'; - ghostEl.style.transform = 'scale(1.1)'; - ghostEl.style.pointerEvents = 'none'; // Phải có để elementFromPoint nhìn xuyên qua bóng mờ - document.body.appendChild(ghostEl); - - const touch = e.touches[0]; - ghostEl.style.left = (touch.pageX - ghostEl.offsetWidth / 2) + 'px'; - ghostEl.style.top = (touch.pageY - ghostEl.offsetHeight / 2) + 'px'; - }, {passive: false}); - - // Bắt sự kiện di chuyển ngón tay (Thuật toán sắp xếp ma trận 2D) - container.addEventListener('touchmove', (e) => { - if (!editMode || !draggedItem || !ghostEl) return; - e.preventDefault(); - const touch = e.touches[0]; - - ghostEl.style.left = (touch.pageX - ghostEl.offsetWidth / 2) + 'px'; - ghostEl.style.top = (touch.pageY - ghostEl.offsetHeight / 2) + 'px'; - - // Tìm nút thực tế ngón tay đang đè lên (nhìn xuyên qua ghostEl nhờ pointerEvents none) - const targetEl = document.elementFromPoint(touch.clientX, touch.clientY); - const dropZone = targetEl ? targetEl.closest('.glass-btn:not(.dragging)') : null; - - if (dropZone && dropZone !== draggedItem) { - const allElements = [...container.querySelectorAll('.glass-btn')]; - const draggedIndex = allElements.indexOf(draggedItem); - const dropIndex = allElements.indexOf(dropZone); + if (!selectedSwapNode) { + // Chọn nút đầu tiên + selectedSwapNode = target; + target.classList.add('selected-swap'); + } else if (selectedSwapNode === target) { + // Hủy chọn nếu bấm lại chính nó + target.classList.remove('selected-swap'); + selectedSwapNode = null; + } else { + // Hoán đổi 2 nút trong DOM + const temp = document.createElement('div'); + target.parentNode.insertBefore(temp, target); + selectedSwapNode.parentNode.insertBefore(target, selectedSwapNode); + temp.parentNode.insertBefore(selectedSwapNode, temp); + temp.parentNode.removeChild(temp); - // Thuật toán Đổi chỗ: Kéo xuôi chèn sau, kéo ngược chèn trước - if (draggedIndex < dropIndex) { - dropZone.after(draggedItem); - } else { - dropZone.before(draggedItem); - } + selectedSwapNode.classList.remove('selected-swap'); + selectedSwapNode = null; + + // Lưu trạng thái mới + const newOrder = Array.from(container.querySelectorAll('.glass-btn')).map(b => b.dataset.id); + localStorage.setItem('sttv_iconOrder', JSON.stringify(newOrder)); } - }, {passive: false}); - - container.addEventListener('touchend', () => { - if (!editMode || !draggedItem) return; - if (ghostEl) { document.body.removeChild(ghostEl); ghostEl = null; } - draggedItem.classList.remove('dragging'); - draggedItem = null; - - const newOrder = Array.from(container.querySelectorAll('.glass-btn')).map(b => b.dataset.id); - localStorage.setItem('sttv_iconOrder', JSON.stringify(newOrder)); }); } catch (e) { console.error("Lỗi:", e); } From 688e9fbc90bf1d030e0db552044fd0f7f4f025fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93=20Ng=E1=BB=8Dc=20Sen?= <70382284+Sentechtipsvn@users.noreply.github.com> Date: Tue, 8 Sep 2026 14:28:34 +0700 Subject: [PATCH 004/124] Update style.css --- CSS/style.css | 167 +++++++++++++++----------------------------------- 1 file changed, 49 insertions(+), 118 deletions(-) diff --git a/CSS/style.css b/CSS/style.css index 1eaa862..124d01a 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -9,6 +9,15 @@ --list-bg-rgba: rgba(255, 255, 255, 0.1); --tilt-x: 0px; --tilt-y: 0px; --title-size: 22px; --title-spacing: 0.5px; --label-display: block; + + /* Biến cho Widget Nhạc */ + --media-bg-rgb: 255, 255, 255; + --media-bg-opacity: 0.03; + --media-width: 90%; + --media-btn-size: 50px; + --media-btn-play: 65px; + --media-btn-color: rgba(255, 255, 255, 0.05); + --media-svg-color: #ffffff; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; } @@ -18,7 +27,7 @@ body { background-color: var(--bg-main); background-size: cover; background-posi /* Grid Mode */ .grid-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 20px; max-width: 600px; margin: 0 auto; position: relative; } -.glass-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text-color); user-select: none; } +.glass-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text-color); user-select: none; position: relative; } .icon-box { width: var(--frame-size); height: var(--frame-size); background-image: var(--frame-bg); background-color: var(--frame-bg-color); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--frame-border-radius); @@ -27,127 +36,62 @@ body { background-color: var(--bg-main); background-size: cover; background-posi } .icon-box svg { width: var(--svg-size); height: var(--svg-size); fill: var(--svg-color); color: var(--svg-color); opacity: var(--svg-opacity); position: relative; z-index: 2; transform: perspective(500px) translate3d(calc(var(--tilt-x) * 1.5), calc(var(--tilt-y) * 1.5), 10px); } .glass-btn:active .icon-box { transform: scale(0.92); } - .label { font-size: var(--icon-font-size, 14px); font-weight: 500; letter-spacing: var(--icon-spacing, 0px); text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,0.5); display: var(--label-display); transition: font-size 0.2s, letter-spacing 0.2s; } - .glass-active .icon-box { background: rgba(255,255,255,0.15); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.2); } .glass-active.list-mode .glass-btn { background: rgba(0,0,0,0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); } -@keyframes jiggle { 0% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 100% { transform: rotate(-2deg); } } -.edit-mode .glass-btn { animation: jiggle 0.3s infinite; pointer-events: none; } -.edit-mode .glass-btn.dragging { opacity: 0.5; animation: none; transform: scale(1.1); z-index: 999; } +/* Chế độ Sắp xếp: Hoán đổi (Swap) */ +@keyframes pulseSwap { 0% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(0, 122, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); } } +.edit-mode .glass-btn { pointer-events: auto; cursor: pointer; } +.edit-mode .glass-btn.selected-swap .icon-box { border: 2px solid #007aff; animation: pulseSwap 1.5s infinite; transform: scale(1.05); } +.edit-mode .glass-btn.selected-swap::after { content: "🔄"; position: absolute; top: -5px; right: -5px; font-size: 18px; background: #007aff; border-radius: 50%; padding: 2px; } .edit-mode .grid-layout { background: rgba(255,255,255,0.05); border: 2px dashed rgba(255,255,255,0.3); border-radius: 20px; } +/* List Mode */ .app-container.list-mode .grid-layout { grid-template-columns: 1fr; gap: 12px; } -.app-container.list-mode .glass-btn { - flex-direction: row; justify-content: flex-start; align-items: center; gap: 15px; - background: var(--list-bg-rgba); padding: 12px 18px; - border-radius: var(--list-border-radius); color: var(--list-text-color); box-shadow: var(--btn-shadow); -} -.app-container.list-mode:not(.list-frame-active) .icon-box { - background: transparent !important; box-shadow: none !important; - width: var(--svg-size); height: var(--svg-size); transform: none; border-radius: 0; -} -.app-container.list-mode:not(.list-frame-active) .icon-box svg { - fill: var(--list-svg-color); color: var(--list-svg-color); width: 100%; height: 100%; transform: none; opacity: var(--svg-opacity); -} +.app-container.list-mode .glass-btn { flex-direction: row; justify-content: flex-start; align-items: center; gap: 15px; background: var(--list-bg-rgba); padding: 12px 18px; border-radius: var(--list-border-radius); color: var(--list-text-color); box-shadow: var(--btn-shadow); } +.app-container.list-mode:not(.list-frame-active) .icon-box { background: transparent !important; box-shadow: none !important; width: var(--svg-size); height: var(--svg-size); transform: none; border-radius: 0; } +.app-container.list-mode:not(.list-frame-active) .icon-box svg { fill: var(--list-svg-color); color: var(--list-svg-color); width: 100%; height: 100%; transform: none; opacity: var(--svg-opacity); } .app-container.list-mode .label { text-align: left; } .app-container.list-mode.list-frame-active .glass-btn { background: var(--list-bg-rgba); box-shadow: none; } -.app-container.list-mode.list-frame-active .icon-box { - width: var(--frame-size); height: var(--frame-size); min-width: var(--frame-size); - background-image: var(--frame-bg) !important; background-color: var(--frame-bg-color) !important; - background-size: cover; background-position: center; background-repeat: no-repeat; - border-radius: var(--frame-border-radius); box-shadow: var(--btn-shadow) !important; - transform: perspective(500px) translate3d(var(--tilt-x), var(--tilt-y), 0); display: flex; justify-content: center; align-items: center; -} +.app-container.list-mode.list-frame-active .icon-box { width: var(--frame-size); height: var(--frame-size); min-width: var(--frame-size); background-image: var(--frame-bg) !important; background-color: var(--frame-bg-color) !important; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--frame-border-radius); box-shadow: var(--btn-shadow) !important; transform: perspective(500px) translate3d(var(--tilt-x), var(--tilt-y), 0); display: flex; justify-content: center; align-items: center; } .app-container.list-mode.list-frame-active .icon-box svg { fill: var(--svg-color); color: var(--svg-color); width: var(--svg-size); height: var(--svg-size); opacity: var(--svg-opacity); } -/* WIDGET TRÌNH PHÁT NHẠC & HỆ THỐNG NEUMORPHISM */ +/* WIDGET TRÌNH PHÁT NHẠC (Đồng bộ đổ bóng & biến hệ thống) */ .media-player-widget { margin: 10px auto 30px auto; - width: 90%; + width: var(--media-width); max-width: 400px; padding: 20px; border-radius: 24px; display: flex; flex-direction: column; gap: 22px; - background: rgba(255, 255, 255, 0.03); - box-shadow: inset 2px 2px 5px rgba(255,255,255,0.05), inset -2px -2px 5px rgba(0,0,0,0.2); + background: rgba(var(--media-bg-rgb), var(--media-bg-opacity)); + box-shadow: var(--btn-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } - -.media-controls { - display: flex; - align-items: center; - justify-content: center; - gap: 30px; -} - +.media-controls { display: flex; align-items: center; justify-content: center; gap: 30px; } .media-btn { border: none; - background: rgba(255, 255, 255, 0.05); - color: var(--text-color, #ffffff); + background: var(--media-btn-color); + color: var(--media-svg-color); border-radius: 50%; - width: 50px; - height: 50px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - box-shadow: -4px -4px 8px rgba(255, 255, 255, 0.1), 4px 4px 8px rgba(0, 0, 0, 0.4); + width: var(--media-btn-size); + height: var(--media-btn-size); + display: flex; align-items: center; justify-content: center; cursor: pointer; + box-shadow: var(--btn-shadow); transition: all 0.15s ease; } +.media-btn.play-main { width: var(--media-btn-play); height: var(--media-btn-play); } +.media-btn:active { box-shadow: inset 0 0 10px rgba(0,0,0,0.3); transform: scale(0.95); } +.system-sliders { display: flex; flex-direction: column; gap: 15px; width: 100%; } +.sys-slider-container { display: flex; align-items: center; gap: 12px; color: var(--media-svg-color); opacity: 0.8; } +.sys-slider { -webkit-appearance: none; flex: 1; height: 8px !important; border-radius: 4px; background: rgba(0, 0, 0, 0.3) !important; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5), inset -1px -1px 3px rgba(255,255,255,0.1) !important; outline: none; } +.sys-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px !important; height: 24px !important; margin-top: -8px !important; border-radius: 50% !important; background: url('../Theme/icon-control.png') center/contain no-repeat #fff !important; box-shadow: 0 0 5px rgba(0,0,0,0.5) !important; cursor: pointer; } -.media-btn.play-main { - width: 65px; - height: 65px; - box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.15), 5px 5px 10px rgba(0, 0, 0, 0.5); -} - -.media-btn:active { - box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.1), inset 2px 2px 5px rgba(0, 0, 0, 0.4); - transform: scale(0.95); -} - -.system-sliders { - display: flex; - flex-direction: column; - gap: 15px; - width: 100%; -} - -.sys-slider-container { - display: flex; - align-items: center; - gap: 12px; - color: var(--text-color, #ffffff); - opacity: 0.8; -} - -.sys-slider { - -webkit-appearance: none; - flex: 1; - height: 8px !important; - border-radius: 4px; - background: rgba(0, 0, 0, 0.3) !important; - box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5), inset -1px -1px 3px rgba(255,255,255,0.1) !important; - outline: none; -} - -.sys-slider::-webkit-slider-thumb { - -webkit-appearance: none; - width: 24px !important; - height: 24px !important; - margin-top: -8px !important; - border-radius: 50% !important; - background: url('../Theme/icon-control.png') center/contain no-repeat #fff !important; - box-shadow: 0 0 5px rgba(0,0,0,0.5) !important; - cursor: pointer; -} - -/* Giao diện Setting Dark Mode */ +/* Cài đặt Overlay */ .settings-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 998; } .settings-overlay.open { opacity: 1; visibility: visible; } .settings-fab { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 25px; background: var(--accent-color); color: white; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 100; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; } @@ -168,16 +112,7 @@ body { background-color: var(--bg-main); background-size: cover; background-posi input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; } -input[type=range]::-webkit-slider-thumb { - -webkit-appearance: none; - height: 25px; width: 25px; - background: url('../Theme/icon-dot.png') center/contain no-repeat transparent !important; - border: 0px solid transparent !important; - border-radius: 0 !important; - box-shadow: none !important; - margin-top: -9.5px; cursor: pointer; -} - +input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 25px; width: 25px; background: url('../Theme/icon-dot.png') center/contain no-repeat transparent !important; border: 0px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; margin-top: -9.5px; cursor: pointer; } .slider-item input[type="color"] { height: 28px; padding: 0; border: none; background: none; border-radius: 5px; cursor: pointer; } .layout-buttons { display: flex; gap: 10px; } .layout-btn { flex: 1; padding: 10px 0; background: rgba(255,255,255,0.1); border: 1px solid transparent; color: white; border-radius: 8px; cursor: pointer; font-weight: 500; transition: all 0.2s; } @@ -191,19 +126,20 @@ input[type=range]::-webkit-slider-thumb { select { width: 100%; padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.3); color: white; border: 1px solid rgba(255,255,255,0.2); font-size: 14px; } .info-btn { position: absolute; bottom: 20px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; opacity: 0.8; z-index: 10; } -/* Info Popup macOS */ +/* Info Popup macOS PRO */ .info-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 2000; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .info-overlay.show { opacity: 1; visibility: visible; } -.macos-window { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 85%; max-width: 320px; background: rgba(30, 30, 32, 0.85); border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); z-index: 2001; border: 1px solid rgba(255,255,255,0.15); opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); color: white; } +.macos-window { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 85%; max-width: 380px; background: #ffffff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); z-index: 2001; opacity: 0; visibility: hidden; transition: all 0.3s ease; color: #000000; overflow: hidden; } .macos-window.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } -.macos-header { padding: 12px 15px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); border-radius: 14px 14px 0 0; } -.macos-btn { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; display: block; object-fit: cover; } -.close-btn:hover { opacity: 0.8; } -.macos-body { padding: 25px 20px; text-align: center; } -.macos-body h3 { margin-bottom: 8px; font-size: 18px; font-weight: 600; } +.macos-header { background: #f1f1f1; padding: 12px 15px; display: flex; gap: 8px; align-items: center; justify-content: flex-start; } +.mac-dot { width: 13px; height: 13px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 4px rgba(0,0,0,0.1); } +.close-dot { background: #ff5f56; } .close-dot:active { opacity: 0.7; } +.min-dot { background: #ffbd2e; } .max-dot { background: #27c93f; } +.macos-body { padding: 30px 25px; text-align: center; } +.macos-body h3 { margin-bottom: 12px; font-size: 22px; font-weight: 700; letter-spacing: 0.5px; } .macos-body a { color: var(--accent-color); text-decoration: none; font-weight: bold; } -.info-desc { font-size: 13px; margin-top: 12px; opacity: 0.75; line-height: 1.5; } -.dev-text { color: #ffffff; font-weight: bold;} +.info-desc { font-size: 15px; margin-top: 15px; opacity: 0.8; line-height: 1.6; } +.dev-text { color: #ffffff; background: #000000; padding: 3px 8px; border-radius: 6px; font-weight: bold; font-size: 14px;} /* AUTO LIGHT MODE */ @media (prefers-color-scheme: light) { @@ -218,9 +154,4 @@ select { width: 100%; padding: 10px; border-radius: 8px; background: rgba(0,0,0, .shadow-item { border: 1px solid rgba(0,0,0,0.1); } .shadow-header { background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.05); } .shadow-drawer { background: rgba(0,0,0,0.01); } - - .macos-window { background: rgba(245, 245, 247, 0.95); border: 1px solid rgba(0,0,0,0.1); color: #000; } - .macos-header { background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.1); } - .info-desc { opacity: 0.8; } - .dev-text { color: #ffffff; background: #000; padding: 2px 6px; border-radius: 5px;} } \ No newline at end of file From 37f2df3f7e5a3e949611af77d41c0b9eaa90fa61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93=20Ng=E1=BB=8Dc=20Sen?= <70382284+Sentechtipsvn@users.noreply.github.com> Date: Tue, 8 Sep 2026 14:29:34 +0700 Subject: [PATCH 005/124] Update index.html --- index.html | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index c4669f1..94dfd7e 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,13 @@