cdnhost 2.6.6 → 2.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdnhost",
-  "version": "2.6.6",
+  "version": "2.6.8",
   "description": "cdnhost",
   "main": "index.js",
   "scripts": {

package/ws_cdn.js

@@ -1,325 +1 @@
-	
-    document.addEventListener('DOMContentLoaded', function() {
-        if (window.FHLWidgetInitialized) return;
-        window.FHLWidgetInitialized = true;
-
-        const languages = [ { code: 'ko', name: '한국어' }, { code: 'en', name: 'English' }, { code: 'es', name: 'Español' }, { code: 'hi', name: 'हिन्दी' }, { code: 'ar', name: 'العربية' }, { code: 'de', name: 'Deutsch' }, { code: 'fr', name: 'Français' }, { code: 'pt', name: 'Português' }, { code: 'bn', name: 'বাংলা' }, { code: 'ja', name: '日本語' }, { code: 'ru', name: 'Русский' }, { code: 'zh', name: '简体中文' }, { code: 'th', name: 'ไทย' }, { code: 'vi', name: 'Tiếng Việt' }, { code: 'id', name: 'Indonesia' }, { code: 'tr', name: 'Türkçe' }, { code: 'ur', name: 'اردو' }];
-        let fullApiItemsData = null;
-        let currentDisplayItems = []; 
-        let currentPage = 1; 
-        const ITEMS_PER_PAGE = 30;
-        let isLoadingNextPage = false; 
-
-        const widgetContainer = document.getElementById('fhl-widget-container');
-        const widgetWrapper = document.getElementById('fhl-widget-wrapper');
-        const listContainer = document.getElementById('fhl-list-container');
-        const searchInput = document.getElementById('fhl-search-input');
-        const searchResultsContainer = document.getElementById('fhl-search-results');
-        const searchTrigger = document.getElementById('fhl-search-trigger');
-        const searchClose = document.getElementById('fhl-search-close');
-        const indicatorTrack = document.getElementById('fhl-indicator-track');
-        const scrollIndicator = document.getElementById('fhl-scroll-indicator');
-        const addToHomeBtn = document.getElementById('fhl-add-to-home-btn');
-        const searchAddBtn = document.getElementById('fhl-search-add-btn');
-        const toastElement = document.getElementById('fhl-toast-notification');
-        const languageBtn = document.getElementById('fhl-language-btn');
-        const languagePanel = document.getElementById('fhl-language-panel');
-        
-        const fixedImageBtn = document.getElementById('fhl-fixed-image');
-        const fixedChatBtn = document.getElementById('fhl-fixed-chat');
-        const fixedAdBtn = document.getElementById('fhl-fixed-ad');
-        
-        let toastTimeout = null;
-        let currentLang = localStorage.getItem('fhl-widget-lang') || 'ko';
-
-        const shortcutManager = {
-            key: 'fhl-custom-icons-with-expiry',
-            get: () => {
-                const rawData = localStorage.getItem(shortcutManager.key);
-                if (!rawData) return [];
-                try {
-                    const data = JSON.parse(rawData);
-                    const thirtyDaysInMs = 30 * 24 * 60 * 60 * 1000;
-                    if (Date.now() - data.timestamp > thirtyDaysInMs) {
-                        localStorage.removeItem(shortcutManager.key);
-                        return [];
-                    }
-                    return data.shortcuts || [];
-                } catch (e) {
-                    localStorage.removeItem(shortcutManager.key);
-                    return [];
-                }
-            },
-            set: (shortcuts) => {
-                const dataToStore = { timestamp: Date.now(), shortcuts: shortcuts };
-                localStorage.setItem(shortcutManager.key, JSON.stringify(dataToStore));
-            },
-            syncFromURL: () => {
-                const params = new URLSearchParams(window.location.search);
-                const shortcutsParam = params.get('shortcuts');
-                if (shortcutsParam) {
-                    try {
-                        const decodedData = atob(shortcutsParam);
-                        JSON.parse(decodedData);
-                        localStorage.setItem(shortcutManager.key, decodedData);
-                    } catch (e) {
-                        console.error("Failed to parse shortcuts from URL:", e);
-                    }
-                }
-            },
-            getAsParam: () => {
-                const rawData = localStorage.getItem(shortcutManager.key);
-                if (!rawData) return '';
-                return `shortcuts=${btoa(rawData)}`;
-            }
-        };
-        
-        const updateAllWidgetLinks = () => {
-            const paramString = shortcutManager.getAsParam();
-            if (!paramString) return;
-            const allLinks = document.querySelectorAll('.fhl-icon-display, .fhl-fixed-item');
-            allLinks.forEach(link => {
-                if (link.tagName === 'A') {
-                    const originalHref = link.getAttribute('href');
-                    if (!originalHref || originalHref.startsWith('#')) return;
-                    try {
-                        let newUrl = new URL(originalHref);
-                        const [key, value] = paramString.split('=');
-                        newUrl.searchParams.set(key, value);
-                        link.href = newUrl.toString();
-                    } catch (e) { console.error('Invalid URL for link update:', originalHref); }
-                }
-            });
-        };
-
-        const showToast = (message) => { clearTimeout(toastTimeout); toastElement.textContent = message; toastElement.classList.add('visible'); toastTimeout = setTimeout(() => { toastElement.classList.remove('visible'); }, 2500); };
-        
-        const applyLanguage = (langCode) => {
-            if (typeof translations === 'undefined') {
-                console.error("Translations not loaded! Make sure lang.js is included correctly.");
-                return;
-            }
-            const t = translations[langCode] || translations['en'];
-            
-            document.documentElement.lang = langCode;
-            
-            searchTrigger.setAttribute('aria-label', t.openSearch);
-            addToHomeBtn.setAttribute('aria-label', t.addToWidget);
-            searchClose.setAttribute('aria-label', t.closeSearch);
-            languageBtn.setAttribute('aria-label', t.changeLanguage);
-            searchAddBtn.setAttribute('aria-label', 'Copy Widget Code'); 
-            fixedImageBtn.setAttribute('aria-label', t.images);
-            fixedChatBtn.setAttribute('aria-label', t.characterChat);
-            fixedAdBtn.setAttribute('aria-label', t.ads);
-            
-            searchInput.placeholder = t.searchPlaceholder;
-            
-            initialRender();
-        };
-
-        const populateLanguagePanel = () => {
-            languagePanel.innerHTML = '';
-            languages.forEach(lang => {
-                const langItem = document.createElement('a');
-                langItem.href = '#';
-                langItem.className = 'fhl-language-item';
-                langItem.textContent = lang.name;
-                langItem.dataset.lang = lang.code;
-                langItem.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    const newLang = e.target.dataset.lang;
-                    if (newLang !== currentLang) {
-                        currentLang = newLang;
-                        localStorage.setItem('fhl-widget-lang', currentLang);
-                        applyLanguage(currentLang);
-                    }
-                    languagePanel.classList.remove('visible');
-                });
-                languagePanel.appendChild(langItem);
-            });
-        };
-        
-        const getProcessedUrl = (fullUrl) => {
-            try {
-                const urlObj = new URL(fullUrl);
-                return `${urlObj.protocol}//${urlObj.hostname}`;
-            } catch (e) {
-                return fullUrl;
-            }
-        };
-
-
-
-
-
-        const createIconItem = (item, type = 'default') => {
-            const link = document.createElement('a');
-            
-            if (type === 'search') {
-                const paramString = shortcutManager.getAsParam();
-                let finalUrl = item.url;
-                if (paramString) {
-                    try {
-                        let newUrl = new URL(item.url);
-                        const [key, value] = paramString.split('=');
-                        newUrl.searchParams.set(key, value);
-                        finalUrl = newUrl.toString();
-                    } catch (e) { console.error('Invalid URL for search result link:', item.url); }
-                }
-                link.href = finalUrl;
-            } else {
-                link.href = item.url;
-            }
-
-            link.className = 'fhl-icon-display';
-            link.setAttribute('aria-label', item.name);
-            
-            if (type === 'search') {
-                link.addEventListener('mousedown', () => {
-                    fetch('https://isai.kr/update_view_count.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: item.url }) }).catch(console.error);
-                });
-                link.target = '_blank';
-            }
-            
-            const iconCircle = document.createElement('div');
-            iconCircle.className = 'fhl-icon-circle';
-            
-            if (item.icon) {
-                const icon = document.createElement('i');
-                icon.className = `ph-bold ${item.icon}`;
-                iconCircle.appendChild(icon);
-            } else if (item.img) {
-                const customImage = document.createElement('img');
-                customImage.src = item.img;
-                customImage.alt = item.name;
-                customImage.onerror = () => { customImage.style.display = 'none'; };
-                iconCircle.appendChild(customImage);
-            } else {
-                const favicon = document.createElement('img');
-                favicon.src = `https://www.google.com/s2/favicons?sz=64&domain_url=${item.url}`;
-                favicon.alt = item.name;
-                favicon.onerror = () => { favicon.style.display = 'none'; };
-                iconCircle.appendChild(favicon);
-            }
-            
-            link.appendChild(iconCircle);
-
-            if (type === 'search') {
-                const tooltip = document.createElement('div');
-                tooltip.className = 'fhl-item-tooltip';
-                tooltip.textContent = item.name.length > 5 ? item.name.slice(0, 5) + '..' : item.name;
-                link.appendChild(tooltip);
-                link.addEventListener('mouseenter', (e) => {
-                    const currentTooltip = e.currentTarget.querySelector('.fhl-item-tooltip');
-                    if (!currentTooltip) return;
-                    currentTooltip.classList.add('visible');
-                    const widgetRect = widgetWrapper.getBoundingClientRect();
-                    const tooltipRect = currentTooltip.getBoundingClientRect();
-                    let offsetX = 0; const padding = 5;
-                    if (tooltipRect.left < widgetRect.left) { offsetX = widgetRect.left - tooltipRect.left + padding; } else if (tooltipRect.right > widgetRect.right) { offsetX = widgetRect.right - tooltipRect.right - padding; }
-                    if (offsetX !== 0) { currentTooltip.style.transform = `translateX(calc(-50% + ${offsetX}px))`; }
-                });
-                link.addEventListener('mouseleave', (e) => {
-                    const currentTooltip = e.currentTarget.querySelector('.fhl-item-tooltip');
-                    if (!currentTooltip) return;
-                    currentTooltip.classList.remove('visible');
-                    currentTooltip.style.transform = 'translateX(-50%)';
-                });
-            } else {
-                const nameSpan = document.createElement('span');
-                nameSpan.className = 'fhl-item-name';
-                nameSpan.textContent = item.name.length > 5 ? item.name.slice(0, 5) + '..' : item.name;
-                link.appendChild(nameSpan);
-            }
-
-            if (type === 'local') {
-                const controls = document.createElement('div');
-                controls.className = 'fhl-item-controls';
-                const deleteBtn = document.createElement('button');
-                deleteBtn.className = 'fhl-control-btn';
-                deleteBtn.innerHTML = '&times;';
-                deleteBtn.title = '삭제';
-                deleteBtn.addEventListener('click', (e) => {
-                    e.preventDefault(); e.stopPropagation();
-                    let storedItems = shortcutManager.get();
-                    storedItems = storedItems.filter(stored => stored.url !== item.url);
-                    shortcutManager.set(storedItems);
-                    initialRender();
-                });
-                const moveBtn = document.createElement('button');
-                moveBtn.className = 'fhl-control-btn';
-                moveBtn.innerHTML = '&gt;';
-                moveBtn.title = '오른쪽으로 이동';
-                moveBtn.addEventListener('click', (e) => {
-                    e.preventDefault(); e.stopPropagation();
-                    let storedItems = shortcutManager.get();
-                    const currentIndex = storedItems.findIndex(stored => stored.url === item.url);
-                    if (currentIndex > -1) {
-                        const newIndex = (currentIndex + 1) % storedItems.length;
-                        const [movedItem] = storedItems.splice(currentIndex, 1);
-                        storedItems.splice(newIndex, 0, movedItem);
-                        shortcutManager.set(storedItems);
-                        initialRender();
-                    }
-                });
-                controls.appendChild(deleteBtn);
-                controls.appendChild(moveBtn);
-                link.appendChild(controls);
-            }
-            return link;
-        };
-
-
-
-
-
-
-
-
-        const appendNextPage = () => { if (isLoadingNextPage) return; isLoadingNextPage = true; const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const endIndex = currentPage * ITEMS_PER_PAGE; if (startIndex >= currentDisplayItems.length) { isLoadingNextPage = false; return; } const itemsToAppend = currentDisplayItems.slice(startIndex, endIndex); itemsToAppend.forEach(item => { searchResultsContainer.appendChild(createIconItem(item, 'search')); }); currentPage++; isLoadingNextPage = false; };
-        const renderInitialResults = (items) => { searchResultsContainer.innerHTML = ''; currentPage = 1; currentDisplayItems = items; appendNextPage(); };
-        const openSearch = async () => { widgetContainer.classList.add('search-mode'); widgetWrapper.classList.add('search-mode'); searchInput.focus(); if (fullApiItemsData === null) { try { const response = await fetch('https://isai.kr/appapi2.php'); if (!response.ok) throw new Error('API 응답 오류'); fullApiItemsData = await response.json(); } catch (error) { console.error('전체 앱 목록 로드 실패:', error); searchResultsContainer.innerHTML = '<p>목록 로드 실패</p>'; fullApiItemsData = []; return; } } renderInitialResults(fullApiItemsData); };
-      
-		const initialRender=()=>{const a=translations[currentLang]||translations['en'];const b=[{name:a.search,url:'https://isai.kr',icon:'ph-sparkle'},{name:a.question,url:'https://isai.kr/#chat',icon:'ph-question-mark'},{name:a.blog,url:'https://blog.099.kr',icon:'ph-article-medium'},{name:a.characterChat,url:'https://zoai.oduc.kr/ko/character/select',icon:'ph-chats-circle'},{name:a.translate,url:'https://translato.isai.kr/',icon:'ph-translate'},{name:a.tarot,url:'https://tarot.isai.kr/',icon:'ph-cards'},{name:'라노벨',url:'https://ranovel.kr/',img:'https://cdn.jsdelivr.net/npm/cdnhost@2.2.2/__ra.png'},{name:a.psychology,url:'https://simpong.oduc.kr/',img:'http://cdn.jsdelivr.net/npm/cdnhost@2.2.0/_simpong.png'},{name:a.forum,url:'https://logig.im',img:'https://cdn.jsdelivr.net/npm/cdnhost@2.3.9/_______________logig.png'},{name:a.ads,url:'https://gig.snapp.im/',icon:'ph-currency-circle-dollar'},];listContainer.innerHTML='';const c=shortcutManager.get();let d=[...b];d.splice(2,0,...c);d.forEach(e=>{const f=c.some(g=>g.url===e.url);const h=f&&!e.icon&&!e.img?'local':'default';listContainer.appendChild(createIconItem(e,h));});checkScrollability();updateAllWidgetLinks();};
-
-        const updateScrollIndicator = () => { const scrollLeft = listContainer.scrollLeft; const maxScrollLeft = listContainer.scrollWidth - listContainer.clientWidth; if (maxScrollLeft <= 0) return; const scrollFraction = scrollLeft / maxScrollLeft; const trackWidth = indicatorTrack.clientWidth; const indicatorWidth = scrollIndicator.clientWidth; const maxIndicatorLeft = trackWidth - indicatorWidth; const indicatorLeft = scrollFraction * maxIndicatorLeft; scrollIndicator.style.transform = `translateY(-50%) translateX(${indicatorLeft}px)`; };
-        const checkScrollability = () => { const isScrollable = listContainer.scrollWidth > listContainer.clientWidth; widgetContainer.classList.toggle('scrollable', isScrollable); if (isScrollable) updateScrollIndicator(); };
-        let isDragging = false;
-        const handleDragMove = (e) => { if (!isDragging) return; e.preventDefault(); const trackRect = indicatorTrack.getBoundingClientRect(); const maxScrollLeft = listContainer.scrollWidth - listContainer.clientWidth; let positionRatio = (e.clientX - trackRect.left) / trackRect.width; positionRatio = Math.max(0, Math.min(1, positionRatio)); listContainer.scrollLeft = positionRatio * maxScrollLeft; };
-        const handleDragEnd = () => { if (!isDragging) return; isDragging = false; document.removeEventListener('mousemove', handleDragMove); document.removeEventListener('mouseup', handleDragEnd); };
-        indicatorTrack.addEventListener('mousedown', (e) => { isDragging = true; handleDragMove(e); document.addEventListener('mousemove', handleDragMove); document.addEventListener('mouseup', handleDragEnd); });
-        const closeSearch = () => { widgetContainer.classList.remove('search-mode'); widgetWrapper.classList.remove('search-mode'); searchInput.value = ''; searchResultsContainer.innerHTML = ''; };
-        let hideTimeout = null;
-        widgetContainer.addEventListener('mouseenter', () => { clearTimeout(hideTimeout); });
-        widgetContainer.addEventListener('mouseleave', () => { hideTimeout = setTimeout(() => { widgetContainer.classList.add('hidden'); }, 6000); });
-        document.addEventListener('click', (e) => { if (!languagePanel.contains(e.target) && !languageBtn.contains(e.target)) { languagePanel.classList.remove('visible'); } if (!widgetContainer.classList.contains('hidden') || widgetContainer.contains(e.target)) { return; } widgetContainer.classList.remove('hidden'); clearTimeout(hideTimeout); hideTimeout = setTimeout(() => { widgetContainer.classList.add('hidden'); }, 6000); });
-        listContainer.addEventListener('scroll', updateScrollIndicator);
-        window.addEventListener('resize', checkScrollability);
-        searchTrigger.addEventListener('click', openSearch);
-        languageBtn.addEventListener('click', (e) => { e.stopPropagation(); languagePanel.classList.toggle('visible'); });
-        searchInput.addEventListener('input', function() { if (!fullApiItemsData) return; const searchTerm = this.value.toLowerCase().trim(); const filteredItems = fullApiItemsData.filter(item => item.name.toLowerCase().includes(searchTerm)); renderInitialResults(filteredItems); });
-        searchResultsContainer.addEventListener('scroll', () => { const isAtBottom = searchResultsContainer.scrollTop + searchResultsContainer.clientHeight >= searchResultsContainer.scrollHeight - 10; if (isAtBottom) { appendNextPage(); } });
-        searchClose.addEventListener('click', closeSearch);
-        document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && widgetWrapper.classList.contains('search-mode')) { closeSearch(); } });
-        
-		const addCurrentPageToWidget=async a=>{a.preventDefault();const b=translations[currentLang]||translations.en,c=getProcessedUrl(window.location.href);let d=document.title||b.currentPage;try{const e=await fetch(`https://isai.kr/get_title.php?url=${encodeURIComponent(c)}`);if(e.ok){const f=await e.json();f.title&&(d=f.title)}}catch(g){console.error("Failed to fetch title:",g)}const h={name:d,url:c};let i=shortcutManager.get();if(!i.some(j=>getProcessedUrl(j.url)===getProcessedUrl(h.url))){i.length>=10&&i.shift(),i.push(h),shortcutManager.set(i);try{await fetch("https://isai.kr/register_app.php",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(h)})}catch(k){console.error("DB 등록/갱신 실패:",k)}initialRender(),widgetWrapper.classList.contains("search-mode")&&closeSearch()}else showToast(b.alreadyAdded)};
-
-        const copyWidgetScript = (e) => {
-            e.preventDefault();
-            const textToCopy = '<script src="https://unpkg.com/@phosphor-icons/web"><\/script> <script src="https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_lg.js"><\/script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_css.css"> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_cdnhtml.js"><\/script> <script src="https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_cdn.js"><\/script>';
-            const t = translations[currentLang] || translations['en'];
-            const fallbackCopy = () => { const textArea = document.createElement("textarea"); textArea.value = textToCopy; textArea.style.position = "fixed"; textArea.style.top = 0; textArea.style.left = "-9999px"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); showToast(t.codeCopied); } catch (err) { console.error('Fallback: Oops, unable to copy', err); } document.body.removeChild(textArea); };
-            if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(textToCopy).then(() => { showToast(t.codeCopied); }).catch(() => { fallbackCopy(); }); } else { fallbackCopy(); }
-        };
-
-        addToHomeBtn.addEventListener('click', addCurrentPageToWidget);
-        searchAddBtn.addEventListener('click', copyWidgetScript);
-        
-        shortcutManager.syncFromURL();
-        shortcutManager.get();
-        
-        populateLanguagePanel();
-        applyLanguage(currentLang);
-        widgetContainer.classList.add('hidden');
-    });
+document.addEventListener('DOMContentLoaded', function() { if (window.FHLWidgetInitialized) return; window.FHLWidgetInitialized = true; const languages = [ { code: 'ko', name: '한국어' }, { code: 'en', name: 'English' }, { code: 'es', name: 'Español' }, { code: 'hi', name: 'हिन्दी' }, { code: 'ar', name: 'العربية' }, { code: 'de', name: 'Deutsch' }, { code: 'fr', name: 'Français' }, { code: 'pt', name: 'Português' }, { code: 'bn', name: 'বাংলা' }, { code: 'ja', name: '日本語' }, { code: 'ru', name: 'Русский' }, { code: 'zh', name: '简体中文' }, { code: 'th', name: 'ไทย' }, { code: 'vi', name: 'Tiếng Việt' }, { code: 'id', name: 'Indonesia' }, { code: 'tr', name: 'Türkçe' }, { code: 'ur', name: 'اردو' }]; let currentDisplayItems = []; let currentPage = 1; const ITEMS_PER_PAGE = 30; let isLoadingNextPage = false; let searchTimeout = null; const widgetContainer = document.getElementById('fhl-widget-container'); const widgetWrapper = document.getElementById('fhl-widget-wrapper'); const listContainer = document.getElementById('fhl-list-container'); const searchInput = document.getElementById('fhl-search-input'); const searchResultsContainer = document.getElementById('fhl-search-results'); const searchTrigger = document.getElementById('fhl-search-trigger'); const searchClose = document.getElementById('fhl-search-close'); const indicatorTrack = document.getElementById('fhl-indicator-track'); const scrollIndicator = document.getElementById('fhl-scroll-indicator'); const addToHomeBtn = document.getElementById('fhl-add-to-home-btn'); const searchAddBtn = document.getElementById('fhl-search-add-btn'); const toastElement = document.getElementById('fhl-toast-notification'); const languageBtn = document.getElementById('fhl-language-btn'); const languagePanel = document.getElementById('fhl-language-panel'); const fixedQuestionBtn = document.getElementById('fhl-fixed-question'); const fixedChatBtn = document.getElementById('fhl-fixed-chat'); const fixedAdBtn = document.getElementById('fhl-fixed-ad'); const fixedInfoBtn = document.getElementById('fhl-fixed-info'); let toastTimeout = null; let currentLang = localStorage.getItem('fhl-widget-lang') || 'ko'; const API_BASE_URL = 'https://isai.kr'; const shortcutManager = { key: 'fhl-custom-icons-with-expiry', get: () => { const rawData = localStorage.getItem(shortcutManager.key); if (!rawData) return []; try { const data = JSON.parse(rawData); const thirtyDaysInMs = 30 * 24 * 60 * 60 * 1000; if (Date.now() - data.timestamp > thirtyDaysInMs) { localStorage.removeItem(shortcutManager.key); return []; } return data.shortcuts || []; } catch (e) { localStorage.removeItem(shortcutManager.key); return []; } }, set: (shortcuts) => { const dataToStore = { timestamp: Date.now(), shortcuts: shortcuts }; localStorage.setItem(shortcutManager.key, JSON.stringify(dataToStore)); }, syncFromURL: () => { const params = new URLSearchParams(window.location.search); const shortcutsParam = params.get('shortcuts'); if (shortcutsParam) { try { const decodedData = atob(shortcutsParam); JSON.parse(decodedData); localStorage.setItem(shortcutManager.key, decodedData); } catch (e) { console.error("Failed to parse shortcuts from URL:", e); } } }, getAsParam: () => { const rawData = localStorage.getItem(shortcutManager.key); if (!rawData) return ''; return `shortcuts=${btoa(rawData)}`; } }; const updateAllWidgetLinks = () => { const paramString = shortcutManager.getAsParam(); if (!paramString) return; const allLinks = document.querySelectorAll('#fhl-widget-container .fhl-icon-display, #fhl-widget-container .fhl-fixed-item'); allLinks.forEach(link => { if (link.tagName === 'A') { const originalHref = link.getAttribute('href'); if (!originalHref || originalHref.startsWith('#')) return; try { let newUrl = new URL(originalHref); const [key, value] = paramString.split('='); newUrl.searchParams.set(key, value); link.href = newUrl.toString(); } catch (e) { console.error('Invalid URL for link update:', originalHref); } } }); }; const showToast = (message) => { clearTimeout(toastTimeout); toastElement.textContent = message; toastElement.classList.add('visible'); toastTimeout = setTimeout(() => { toastElement.classList.remove('visible'); }, 2500); }; const applyLanguage = (langCode) => { if (typeof translations === 'undefined') { console.error("Translations not loaded! Make sure lang.js is included correctly."); return; } const t = translations[langCode] || translations['en']; document.documentElement.lang = langCode; searchTrigger.setAttribute('aria-label', t.openSearch); addToHomeBtn.setAttribute('aria-label', t.addToWidget); searchClose.setAttribute('aria-label', t.closeSearch); languageBtn.setAttribute('aria-label', t.changeLanguage); searchAddBtn.setAttribute('aria-label', 'Copy Widget Code'); fixedQuestionBtn.setAttribute('aria-label', t.question); fixedChatBtn.setAttribute('aria-label', t.characterChat); fixedAdBtn.setAttribute('aria-label', t.ads); fixedInfoBtn.setAttribute('aria-label', t.info); searchInput.placeholder = t.searchPlaceholder; initialRender(); }; const populateLanguagePanel = () => { languagePanel.innerHTML = ''; languages.forEach(lang => { const langItem = document.createElement('a'); langItem.href = '#'; langItem.className = 'fhl-language-item'; langItem.textContent = lang.name; langItem.dataset.lang = lang.code; langItem.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const newLang = e.target.dataset.lang; if (newLang !== currentLang) { currentLang = newLang; localStorage.setItem('fhl-widget-lang', currentLang); applyLanguage(currentLang); } languagePanel.classList.remove('visible'); }); languagePanel.appendChild(langItem); }); }; const getProcessedUrl = (fullUrl) => { try { const urlObj = new URL(fullUrl); return `${urlObj.protocol}//${urlObj.hostname}`; } catch (e) { return fullUrl; } }; const createIconItem = (item, type = 'default') => { const link = document.createElement('a'); if (type === 'search') { const paramString = shortcutManager.getAsParam(); let finalUrl = item.url; if (paramString) { try { let newUrl = new URL(item.url); const [key, value] = paramString.split('='); newUrl.searchParams.set(key, value); finalUrl = newUrl.toString(); } catch (e) { console.error('Invalid URL for search result link:', item.url); } } link.href = finalUrl; } else { link.href = item.url; } link.className = 'fhl-icon-display'; link.setAttribute('aria-label', item.name); if (type === 'search') { link.addEventListener('mousedown', () => { fetch(`${API_BASE_URL}/update_view_count.php`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: item.url }) }).catch(console.error); }); link.target = '_blank'; } const iconCircle = document.createElement('div'); iconCircle.className = 'fhl-icon-circle'; if (item.icon) { const icon = document.createElement('i'); icon.className = `ph-bold ${item.icon}`; iconCircle.appendChild(icon); } else if (item.img) { const customImage = document.createElement('img'); customImage.src = item.img; customImage.alt = item.name; customImage.onerror = () => { customImage.style.display = 'none'; }; iconCircle.appendChild(customImage); } else { const favicon = document.createElement('img'); favicon.src = `https://www.google.com/s2/favicons?sz=64&domain_url=${item.url}`; favicon.alt = item.name; favicon.onerror = () => { favicon.style.display = 'none'; }; iconCircle.appendChild(favicon); } link.appendChild(iconCircle); if (type === 'search') { const tooltip = document.createElement('div'); tooltip.className = 'fhl-item-tooltip'; tooltip.textContent = item.name.length > 5 ? item.name.slice(0, 5) + '..' : item.name; link.appendChild(tooltip); link.addEventListener('mouseenter', (e) => { const currentTooltip = e.currentTarget.querySelector('.fhl-item-tooltip'); if (!currentTooltip) return; currentTooltip.classList.add('visible'); const widgetRect = widgetWrapper.getBoundingClientRect(); const tooltipRect = currentTooltip.getBoundingClientRect(); let offsetX = 0; const padding = 5; if (tooltipRect.left < widgetRect.left) { offsetX = widgetRect.left - tooltipRect.left + padding; } else if (tooltipRect.right > widgetRect.right) { offsetX = widgetRect.right - tooltipRect.right - padding; } if (offsetX !== 0) { currentTooltip.style.transform = `translateX(calc(-50% + ${offsetX}px))`; } }); link.addEventListener('mouseleave', (e) => { const currentTooltip = e.currentTarget.querySelector('.fhl-item-tooltip'); if (!currentTooltip) return; currentTooltip.classList.remove('visible'); currentTooltip.style.transform = 'translateX(-50%)'; }); } else { const nameSpan = document.createElement('span'); nameSpan.className = 'fhl-item-name'; nameSpan.textContent = item.name.length > 5 ? item.name.slice(0, 5) + '..' : item.name; link.appendChild(nameSpan); } if (type === 'local') { const controls = document.createElement('div'); controls.className = 'fhl-item-controls'; const deleteBtn = document.createElement('button'); deleteBtn.className = 'fhl-control-btn'; deleteBtn.innerHTML = '&times;'; deleteBtn.title = '삭제'; deleteBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); let storedItems = shortcutManager.get(); storedItems = storedItems.filter(stored => stored.url !== item.url); shortcutManager.set(storedItems); initialRender(); }); const moveBtn = document.createElement('button'); moveBtn.className = 'fhl-control-btn'; moveBtn.innerHTML = '&gt;'; moveBtn.title = '오른쪽으로 이동'; moveBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); let storedItems = shortcutManager.get(); const currentIndex = storedItems.findIndex(stored => stored.url === item.url); if (currentIndex > -1) { const newIndex = (currentIndex + 1) % storedItems.length; const [movedItem] = storedItems.splice(currentIndex, 1); storedItems.splice(newIndex, 0, movedItem); shortcutManager.set(storedItems); initialRender(); } }); controls.appendChild(deleteBtn); controls.appendChild(moveBtn); link.appendChild(controls); } return link; }; const appendNextPage = () => { if (isLoadingNextPage) return; isLoadingNextPage = true; const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const endIndex = currentPage * ITEMS_PER_PAGE; if (startIndex >= currentDisplayItems.length) { isLoadingNextPage = false; return; } const itemsToAppend = currentDisplayItems.slice(startIndex, endIndex); itemsToAppend.forEach(item => { searchResultsContainer.appendChild(createIconItem(item, 'search')); }); currentPage++; isLoadingNextPage = false; }; const renderInitialResults = (items) => { searchResultsContainer.innerHTML = ''; currentPage = 1; currentDisplayItems = items; appendNextPage(); }; const performSearch = async (query = '') => { try { const response = await fetch(`${API_BASE_URL}/appapi2.php?query=${encodeURIComponent(query)}`); if (!response.ok) throw new Error('API 응답 오류'); const results = await response.json(); renderInitialResults(results); } catch (error) { console.error('앱 목록 로드 실패:', error); searchResultsContainer.innerHTML = '<p>목록 로드 실패</p>'; } }; const openSearch = () => { widgetContainer.classList.add('search-mode'); widgetWrapper.classList.add('search-mode'); searchInput.focus(); performSearch(); }; const initialRender = () => { const t = translations[currentLang] || translations['en']; const b = [ { name: t.search, url: 'https://isai.kr', icon: 'ph-sparkle' }, { name: t.question, url: 'https://isai.kr/#chat', icon: 'ph-question-mark' }, { name: t.characterChat, url: 'https://zoai.oduc.kr/ko/character/select', icon: 'ph-chats-circle' }, { name: t.translate, url: 'https://translato.isai.kr/', icon: 'ph-translate' }, { name: t.tarot, url: 'https://tarot.isai.kr/', icon: 'ph-cards' }, { name: t.blog, url: 'https://blog.099.kr', icon: 'ph-article-medium' }, { name: t.novel, url: 'https://ranovel.kr/', img: 'https://cdn.jsdelivr.net/npm/cdnhost@2.2.2/__ra.png' }, { name: t.psychology, url: 'https://simpong.oduc.kr/', img: 'http://cdn.jsdelivr.net/npm/cdnhost@2.2.0/_simpong.png' }, { name: t.forum, url: 'https://logig.im', img: 'https://cdn.jsdelivr.net/npm/cdnhost@2.3.9/_______________logig.png' }, { name: t.ads, url: 'https://gig.snapp.im/', icon: 'ph-currency-circle-dollar' }, ]; listContainer.innerHTML = ''; const c = shortcutManager.get(); let d = [...b]; d.splice(2, 0, ...c); d.forEach(e => { const f = c.some(g => g.url === e.url); const h = f && !e.icon && !e.img ? 'local' : 'default'; listContainer.appendChild(createIconItem(e, h)); }); checkScrollability(); updateAllWidgetLinks(); }; const updateScrollIndicator = () => { const scrollLeft = listContainer.scrollLeft; const maxScrollLeft = listContainer.scrollWidth - listContainer.clientWidth; if (maxScrollLeft <= 0) return; const scrollFraction = scrollLeft / maxScrollLeft; const trackWidth = indicatorTrack.clientWidth; const indicatorWidth = scrollIndicator.clientWidth; const maxIndicatorLeft = trackWidth - indicatorWidth; const indicatorLeft = scrollFraction * maxIndicatorLeft; scrollIndicator.style.transform = `translateY(-50%) translateX(${indicatorLeft}px)`; }; const checkScrollability = () => { const isScrollable = listContainer.scrollWidth > listContainer.clientWidth; widgetContainer.classList.toggle('scrollable', isScrollable); if (isScrollable) updateScrollIndicator(); }; let isDragging = false; const handleDragMove = (e) => { if (!isDragging) return; e.preventDefault(); const trackRect = indicatorTrack.getBoundingClientRect(); const maxScrollLeft = listContainer.scrollWidth - listContainer.clientWidth; let positionRatio = (e.clientX - trackRect.left) / trackRect.width; positionRatio = Math.max(0, Math.min(1, positionRatio)); listContainer.scrollLeft = positionRatio * maxScrollLeft; }; const handleDragEnd = () => { if (!isDragging) return; isDragging = false; document.removeEventListener('mousemove', handleDragMove); document.removeEventListener('mouseup', handleDragEnd); }; indicatorTrack.addEventListener('mousedown', (e) => { isDragging = true; handleDragMove(e); document.addEventListener('mousemove', handleDragMove); document.addEventListener('mouseup', handleDragEnd); }); const closeSearch = () => { widgetContainer.classList.remove('search-mode'); widgetWrapper.classList.remove('search-mode'); searchInput.value = ''; searchResultsContainer.innerHTML = ''; }; let hideTimeout = null; widgetContainer.addEventListener('mouseenter', () => { clearTimeout(hideTimeout); }); widgetContainer.addEventListener('mouseleave', () => { hideTimeout = setTimeout(() => { widgetContainer.classList.add('hidden'); }, 6000); }); document.addEventListener('click', (e) => { if (!languagePanel.contains(e.target) && !languageBtn.contains(e.target)) { languagePanel.classList.remove('visible'); } if (widgetContainer.contains(e.target)) { return; } if (widgetContainer.classList.contains('hidden')) { setTimeout(() => { widgetContainer.classList.remove('hidden'); clearTimeout(hideTimeout); hideTimeout = setTimeout(() => { widgetContainer.classList.add('hidden'); }, 6000); }, 50); } }); listContainer.addEventListener('scroll', updateScrollIndicator); window.addEventListener('resize', checkScrollability); searchTrigger.addEventListener('click', openSearch); languageBtn.addEventListener('click', (e) => { e.stopPropagation(); languagePanel.classList.toggle('visible'); }); searchInput.addEventListener('input', function() { clearTimeout(searchTimeout); const query = this.value.toLowerCase().trim(); searchTimeout = setTimeout(() => { performSearch(query); }, 300); }); searchResultsContainer.addEventListener('scroll', () => { const isAtBottom = searchResultsContainer.scrollTop + searchResultsContainer.clientHeight >= searchResultsContainer.scrollHeight - 10; if (isAtBottom) { appendNextPage(); } }); searchClose.addEventListener('click', closeSearch); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && widgetWrapper.classList.contains('search-mode')) { closeSearch(); } }); const addCurrentPageToWidget = async (e) => { e.preventDefault(); const t = translations[currentLang] || translations['en']; const baseUrl = getProcessedUrl(window.location.href); let iconName = document.title || t.currentPage; try { const response = await fetch(`${API_BASE_URL}/get_title.php?url=${encodeURIComponent(baseUrl)}`); if (response.ok) { const data = await response.json(); if (data.title) { iconName = data.title; } } } catch (error) { console.error('Failed to fetch title:', error); } const newIcon = { name: iconName, url: baseUrl }; let storedItems = shortcutManager.get(); const isAlreadyAdded = storedItems.some(item => getProcessedUrl(item.url) === getProcessedUrl(newIcon.url)); if (!isAlreadyAdded) { if (storedItems.length >= 10) { storedItems.shift(); } storedItems.push(newIcon); shortcutManager.set(storedItems); try { await fetch(`${API_BASE_URL}/register_app.php`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newIcon) }); } catch (error) { console.error('DB 등록/갱신 실패:', error); } initialRender(); if (widgetWrapper.classList.contains('search-mode')) { closeSearch(); } } else { showToast(t.alreadyAdded); } }; const copyWidgetScript = (e) => { e.preventDefault(); const textToCopy = '<script src="https://unpkg.com/@phosphor-icons/web"><\/script> <script src="https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_lg.js"><\/script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_css.css"> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_cdnhtml.js"><\/script> <script src="https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_cdn.js"><\/script>'; const t = translations[currentLang] || translations['en']; const fallbackCopy = () => { const textArea = document.createElement("textarea"); textArea.value = textToCopy; textArea.style.position = "fixed"; textArea.style.top = 0; textArea.style.left = "-9999px"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); showToast(t.codeCopied); } catch (err) { console.error('Fallback: Oops, unable to copy', err); } document.body.removeChild(textArea); }; if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(textToCopy).then(() => { showToast(t.codeCopied); }).catch(() => { fallbackCopy(); }); } else { fallbackCopy(); } }; addToHomeBtn.addEventListener('click', addCurrentPageToWidget); searchAddBtn.addEventListener('click', copyWidgetScript); shortcutManager.syncFromURL(); shortcutManager.get(); populateLanguagePanel(); applyLanguage(currentLang); });

package/ws_cdnhtml.js

@@ -7,7 +7,7 @@ const widgetHTML = `
 
 
     <div id="fhl-toast-notification" class="fhl-toast"></div>
-    <div class="fhl-widget-container" id="fhl-widget-container">
+    <div id="fhl-widget-container" class="hidden">
         <div class="fhl-indicator-track" id="fhl-indicator-track">
             <div class="fhl-scroll-indicator" id="fhl-scroll-indicator"></div>
         </div>
@@ -27,10 +27,10 @@ const widgetHTML = `
                     <div class="fhl-search-results" id="fhl-search-results"></div>
                     <div class="fhl-fixed-panel">
                         <a href="#" id="fhl-search-add-btn" class="fhl-fixed-item"><i class="ph-bold ph-code"></i></a>
-                        <a href="https://isai.kr/#chat" id="fhl-fixed-image" class="fhl-fixed-item"><i class="ph-bold ph-question-mark"></i></a>
+                        <a href="https://isai.kr/#chat" id="fhl-fixed-question" class="fhl-fixed-item"><i class="ph-bold ph-question"></i></a>
                         <a href="https://zoai.oduc.kr/ko/character/select" id="fhl-fixed-chat" class="fhl-fixed-item"><i class="ph-bold ph-chats-circle"></i></a>
                         <a href="https://gig.snapp.im/" id="fhl-fixed-ad" class="fhl-fixed-item"><i class="ph-bold ph-currency-circle-dollar"></i></a>
-                        <a href="https://webstore.isai.kr/" id="fhl-fixed-ad" class="fhl-fixed-item"><i class="ph-bold ph-info"></i></a>
+                        <a href="https://webstore.isai.kr/" id="fhl-fixed-info" class="fhl-fixed-item"><i class="ph-bold ph-info"></i></a>
                     </div>
                 </div>
             </div>
@@ -38,7 +38,6 @@ const widgetHTML = `
         <div id="fhl-language-panel" class="fhl-language-panel"></div>
     </div>
 
-
 `;
 
 // 3. appContainer가 실제로 존재하는지 확인한 후,

package/ws_css.css

@@ -1,51 +1 @@
-
-        .fhl-widget-wrapper *, .fhl-widget-wrapper *::before, .fhl-widget-wrapper *::after { box-sizing: border-box; }
-        .fhl-widget-container { position: fixed; z-index: 1000; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(0); display: flex; flex-direction: column; align-items: center; width: calc(100% - 30px); max-width: 460px; pointer-events: auto; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
-        .fhl-widget-container.hidden { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; }
-        .fhl-indicator-track { position: relative; width: 100px; height: 14px; margin-bottom: 8px; cursor: pointer; background-color: transparent; transition: opacity 0.3s ease; opacity: 0; pointer-events: auto; }
-        .fhl-widget-container.scrollable .fhl-indicator-track { opacity: 1; }
-        .fhl-widget-container.search-mode .fhl-indicator-track { display: none; }
-        .fhl-scroll-indicator { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; background-color: #555; border-radius: 50%; transform: translateY(-50%); transition: transform 0.1s linear; pointer-events: none; }
-        .fhl-widget-wrapper { position: relative; display: flex; align-items: center; width: 100%; max-width: 460px; height: 52px; padding: 7px 10px; border-radius: 26px; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: all 0.3s ease-in-out; pointer-events: auto; overflow: visible; }
-        .fhl-icon-display { position: relative; flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; color: #333; background-color: rgba(0, 0, 0, 0.05); border: none; border-radius: 50%; text-decoration: none; cursor: pointer; padding: 0; transition: background-color 0.2s ease; }
-        .fhl-icon-display:hover { background-color: rgba(0, 0, 0, 0.1); }
-        .fhl-icon-display i { font-size: 22px; }
-        .fhl-list-container .fhl-icon-display { display: inline-flex; width: auto; padding: 0 8px 0 0; border-radius: 20px; background-color: transparent; }
-        .fhl-list-container .fhl-icon-display:hover { background-color: rgba(0, 0, 0, 0.08); }
-        .fhl-list-container .fhl-icon-display:hover .fhl-icon-circle { background-color: transparent; }
-        .fhl-item-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.3s ease-in-out, opacity 0.2s ease-in-out 0.05s; }
-        .fhl-list-container .fhl-icon-display:hover .fhl-item-name { max-width: 150px; opacity: 1; }
-        .fhl-icon-circle { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; background-color: rgba(0, 0, 0, 0.05); border-radius: 50%; transition: background-color 0.2s ease; overflow: hidden; }
-        .fhl-icon-circle img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; }
-        .fhl-icon-bar { display: flex; align-items: center; gap: 8px; width: 100%; transition: opacity 0.3s ease; }
-        .fhl-list-container { padding:0 8px; flex-grow: 1; display: flex; align-items: center; gap: 6px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); padding-bottom: 30px; margin-bottom: -30px; overflow-y: visible; }
-        .fhl-list-container::-webkit-scrollbar { display: none; }
-        .fhl-list-container > .fhl-icon-display { scroll-snap-align: center; }
-        .fhl-widget-wrapper.search-mode { height: 280px; align-items: flex-start; border-radius: 20px; }
-        .fhl-widget-wrapper.search-mode .fhl-icon-bar { opacity: 0; pointer-events: none; }
-        .fhl-search-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 10px; opacity: 0; visibility: hidden; transition: opacity 0.3s 0.1s ease; }
-        .fhl-widget-wrapper.search-mode .fhl-search-view { opacity: 1; visibility: visible; }
-        .fhl-search-input-wrapper { display: flex; align-items: center; flex-shrink: 0; margin-bottom: 10px; }
-        .fhl-search-input { flex-grow: 1; height: 38px; border: none; background: transparent; font-size: 16px; color: #111; padding: 0 10px; outline: none; border-bottom: 2px solid #ccc; transition: border-color 0.2s ease; }
-        .fhl-search-input:focus { border-bottom-color: #007bff; }
-        .fhl-search-content { display: flex; flex-grow: 1; overflow: hidden; }
-        .fhl-search-results { flex-grow: 1; width: 0; overflow-y: auto; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; gap: 12px; padding: 15px; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 40px; }
-        .fhl-search-results::-webkit-scrollbar { display: none; }
-        .fhl-search-results .fhl-icon-display { background-color: transparent; }
-        .fhl-search-results .fhl-icon-display:hover .fhl-icon-circle { background-color: rgba(0, 0, 0, 0.1); }
-        .fhl-item-tooltip { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 3px 6px; border-radius: 5px; font-size: 11px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease-in-out, bottom 0.2s ease-in-out; z-index: 10; }
-        .fhl-item-tooltip.visible { opacity: 1; visibility: visible; bottom: -32px; }
-        .fhl-fixed-panel { flex-shrink: 0; width: 70px; height: 100%; padding: 0; border-left: 1px solid rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
-        .fhl-fixed-item { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; text-decoration: none; color: #444; cursor: pointer; transition: background-color 0.2s ease; }
-        .fhl-fixed-item:hover { background-color: rgba(0, 0, 0, 0.08); }
-        .fhl-fixed-item i { font-size: 24px; }
-        .fhl-item-controls { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background-color: rgba(0,0,0,0.7); border-radius: 10px; padding: 2px 4px; opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; z-index: 20; }
-        .fhl-list-container .fhl-icon-display:hover .fhl-item-controls { opacity: 1; visibility: visible; pointer-events: auto; bottom: -13px; }
-        .fhl-control-btn { background: none; border: none; color: white; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px; font-family: monospace; }
-        .fhl-control-btn:hover { color: #007bff; }
-        .fhl-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(10px); background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px 16px; border-radius: 18px; font-size: 14px; z-index: 1001; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
-        .fhl-toast.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
-        .fhl-language-panel { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 15px; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: bottom center; }
-        .fhl-language-panel.visible { opacity: 1; visibility: visible; pointer-events: auto; }
-        .fhl-language-item { display: block; padding: 6px 12px; font-size: 14px; color: #333; text-decoration: none; border-radius: 8px; transition: background-color 0.2s ease; cursor: pointer; text-align: center; }
-        .fhl-language-item:hover { background-color: rgba(0,0,0,0.1); }
+.fhl-widget-wrapper *, .fhl-widget-wrapper *::before, .fhl-widget-wrapper *::after { box-sizing: border-box; } #fhl-widget-container { position: fixed; z-index: 1000; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(0); display: flex; flex-direction: column; align-items: center; width: calc(100% - 30px); max-width: 460px; pointer-events: auto; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } #fhl-widget-container.hidden { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; } #fhl-widget-container .fhl-indicator-track { position: relative; width: 100px; height: 14px; margin-bottom: 8px; cursor: pointer; background-color: transparent; transition: opacity 0.3s ease; opacity: 0; pointer-events: auto; } #fhl-widget-container.scrollable .fhl-indicator-track { opacity: 1; } #fhl-widget-container.search-mode .fhl-indicator-track { display: none; } #fhl-widget-container .fhl-scroll-indicator { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; background-color: #555; border-radius: 50%; transform: translateY(-50%); transition: transform 0.1s linear; pointer-events: none; } #fhl-widget-container .fhl-widget-wrapper { position: relative; display: flex; align-items: center; width: 100%; max-width: 460px; height: 52px; padding: 7px 10px; border-radius: 26px; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); transition: all 0.3s ease-in-out; pointer-events: auto; overflow: visible; } #fhl-widget-container .fhl-icon-display { position: relative; flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; color: #333; background-color: rgba(0, 0, 0, 0.05); border: none; border-radius: 50%; text-decoration: none; cursor: pointer; padding: 0; transition: background-color 0.2s ease; } #fhl-widget-container .fhl-icon-display:hover { background-color: rgba(0, 0, 0, 0.1); } #fhl-widget-container .fhl-icon-display i { font-size: 22px; } #fhl-widget-container .fhl-list-container .fhl-icon-display { display: inline-flex; width: auto; padding: 0 8px 0 0; border-radius: 20px; background-color: transparent; } #fhl-widget-container .fhl-list-container .fhl-icon-display:hover { background-color: rgba(0, 0, 0, 0.08); } #fhl-widget-container .fhl-list-container .fhl-icon-display:hover .fhl-icon-circle { background-color: transparent; } #fhl-widget-container .fhl-item-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.3s ease-in-out, opacity 0.2s ease-in-out 0.05s; } #fhl-widget-container .fhl-list-container .fhl-icon-display:hover .fhl-item-name { max-width: 150px; opacity: 1; } #fhl-widget-container .fhl-icon-circle { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; background-color: rgba(0, 0, 0, 0.05); border-radius: 50%; transition: background-color 0.2s ease; overflow: hidden; } #fhl-widget-container .fhl-icon-circle img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; } #fhl-widget-container .fhl-icon-bar { display: flex; align-items: center; gap: 8px; width: 100%; transition: opacity 0.3s ease; } #fhl-widget-container .fhl-list-container { padding:0 8px; flex-grow: 1; display: flex; align-items: center; gap: 6px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); padding-bottom: 30px; margin-bottom: -30px; overflow-y: visible; } #fhl-widget-container .fhl-list-container::-webkit-scrollbar { display: none; } #fhl-widget-container .fhl-list-container > .fhl-icon-display { scroll-snap-align: center; } #fhl-widget-container .fhl-widget-wrapper.search-mode { height: 280px; align-items: flex-start; border-radius: 20px; } #fhl-widget-container .fhl-widget-wrapper.search-mode .fhl-icon-bar { opacity: 0; pointer-events: none; } #fhl-widget-container .fhl-search-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 10px; opacity: 0; visibility: hidden; transition: opacity 0.3s 0.1s ease; } #fhl-widget-container .fhl-widget-wrapper.search-mode .fhl-search-view { opacity: 1; visibility: visible; } #fhl-widget-container .fhl-search-input-wrapper { display: flex; align-items: center; flex-shrink: 0; margin-bottom: 10px; } #fhl-widget-container .fhl-search-input { flex-grow: 1; height: 38px; border: none; background: transparent; font-size: 16px; color: #111; padding: 0 10px; outline: none; border-bottom: 2px solid #ccc; transition: border-color 0.2s ease; } #fhl-widget-container .fhl-search-input:focus { border-bottom-color: #007bff; } #fhl-widget-container .fhl-search-content { display: flex; flex-grow: 1; overflow: hidden; } #fhl-widget-container .fhl-search-results { flex-grow: 1; width: 0; overflow-y: auto; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; gap: 12px; padding: 15px; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 40px; } #fhl-widget-container .fhl-search-results::-webkit-scrollbar { display: none; } #fhl-widget-container .fhl-search-results .fhl-icon-display { background-color: transparent; } #fhl-widget-container .fhl-search-results .fhl-icon-display:hover .fhl-icon-circle { background-color: rgba(0, 0, 0, 0.1); } #fhl-widget-container .fhl-item-tooltip { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 3px 6px; border-radius: 5px; font-size: 11px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease-in-out, bottom 0.2s ease-in-out; z-index: 10; } #fhl-widget-container .fhl-item-tooltip.visible { opacity: 1; visibility: visible; bottom: -32px; } #fhl-widget-container .fhl-fixed-panel { flex-shrink: 0; width: 70px; height: 100%; padding: 0; border-left: 1px solid rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: space-around; align-items: center; } #fhl-widget-container .fhl-fixed-item { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; text-decoration: none; color: #444; cursor: pointer; transition: background-color 0.2s ease; } #fhl-widget-container .fhl-fixed-item:hover { background-color: rgba(0, 0, 0, 0.08); } #fhl-widget-container .fhl-fixed-item i { font-size: 24px; } #fhl-widget-container .fhl-item-controls { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background-color: rgba(0,0,0,0.7); border-radius: 10px; padding: 2px 4px; opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; z-index: 20; } #fhl-widget-container .fhl-list-container .fhl-icon-display:hover .fhl-item-controls { opacity: 1; visibility: visible; pointer-events: auto; bottom: -13px; } #fhl-widget-container .fhl-control-btn { background: none; border: none; color: white; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px; font-family: monospace; } #fhl-widget-container .fhl-control-btn:hover { color: #007bff; } #fhl-widget-container .fhl-language-panel { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 15px; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: bottom center; } #fhl-widget-container .fhl-language-panel.visible { opacity: 1; visibility: visible; pointer-events: auto; } #fhl-widget-container .fhl-language-item { display: block; padding: 6px 12px; font-size: 14px; color: #333; text-decoration: none; border-radius: 8px; transition: background-color 0.2s ease; cursor: pointer; text-align: center; } #fhl-widget-container .fhl-language-item:hover { background-color: rgba(0,0,0,0.1); } .fhl-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(10px); background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px 16px; border-radius: 18px; font-size: 14px; z-index: 1001; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .fhl-toast.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }