您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Adds custom UI enhancements
当前为
// ==UserScript== // @name AAC Enhanced // @namespace http://tampermonkey.net/ // @version 1.7.0 // @copyright 2025, Asriel(https://greasyfork.org/de/users/1375984-asriel-aac) // @license MIT // @description Adds custom UI enhancements // @author Asriel // @icon https://i.ibb.co/z5CJ5zv/revanced.png // @supportURL https://greasyfork.org/de/scripts/511351-aac-enhanced/feedback // @include /^https?:\/\/(www\.)?anime\.academy\/chat/ // @grant none // @require https://code.jquery.com/jquery-3.6.0.min.js // @require https://code.jquery.com/ui/1.12.1/jquery-ui.min.js // ==/UserScript== (function() { 'use strict'; const scriptName = GM_info.script.name; const scriptVersion = GM_info.script.version; window.aacEnhancedScriptID = `${scriptName.replace(/\s+/g, '-')}-${scriptVersion}`; console.log(window.aacEnhancedScriptID); // Main Application Namespace const AACApp = { init: function() { this.loadModules(); }, loadModules: function() { TopWrapperIcon.init(); WallpaperChanger.init(); ChatArea.init(); } }; // Top Wrapper Icon Module const TopWrapperIcon = { init: function() { this.addIconToTopWrapper(); }, addIconToTopWrapper: function() { const topWrapper = document.querySelector('.area'); if (topWrapper) { const iconButton = this.createIconButton(); iconButton.addEventListener('click', () => Menu.createPlaceholderMenu()); topWrapper.appendChild(iconButton); } else { console.warn('[AAC Enhanced] Top wrapper not found. Icon could not be added.'); } }, createIconButton: function() { const iconButton = document.createElement('div'); iconButton.id = 'aac-topWrapperIcon'; iconButton.style.width = '40px'; iconButton.style.height = '40px'; iconButton.style.borderRadius = '50%'; iconButton.style.display = 'flex'; iconButton.style.alignItems = 'center'; iconButton.style.justifyContent = 'center'; iconButton.style.cursor = 'pointer'; iconButton.style.marginRight = '10px'; iconButton.style.boxShadow = '0 0 5px rgba(0, 0, 0, 0.2)'; const iconImage = document.createElement('img'); iconImage.src = 'https://i.ibb.co/z5CJ5zv/revanced.png'; iconImage.alt = 'Menu Icon'; iconImage.style.width = '100%'; iconImage.style.height = '100%'; iconImage.style.borderRadius = '50%'; iconButton.appendChild(iconImage); return iconButton; } }; // Menu Module const Menu = { createPlaceholderMenu: function() { const existingMenu = document.querySelector('#aac-placeholderMenu'); if (existingMenu) { existingMenu.remove(); return; } const menu = this.createMenuElement(); document.body.appendChild(menu); ChatArea.updateToggleButton(); this.updateToggleLeftbarButton(); }, createMenuElement: function() { const menu = document.createElement('div'); menu.id = 'aac-placeholderMenu'; const iconButton = document.querySelector('#aac-topWrapperIcon'); const iconButtonRect = iconButton.getBoundingClientRect(); menu.style.position = 'absolute'; menu.style.top = `${iconButtonRect.bottom + window.scrollY + 10}px`; menu.style.left = `${iconButtonRect.left + window.scrollX}px`; menu.style.zIndex = '10001'; menu.style.padding = '20px'; menu.style.backgroundColor = '#fff'; menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)'; menu.style.borderRadius = '10px'; menu.style.textAlign = 'center'; const title = this.createTitleElement(); const wallpaperSectionTitle = document.createElement('h4'); wallpaperSectionTitle.innerText = 'Wallpaper Einstellungen'; wallpaperSectionTitle.style.marginTop = '20px'; wallpaperSectionTitle.style.marginBottom = '10px'; const wallpaperChangerButton = WallpaperChanger.createWallpaperChangerButton(); const savedWallpapersButton = WallpaperChanger.createSavedWallpapersButton(); const uiSettingsSectionTitle = document.createElement('h4'); uiSettingsSectionTitle.innerText = 'UI Einstellungen'; uiSettingsSectionTitle.style.marginTop = '20px'; uiSettingsSectionTitle.style.marginBottom = '10px'; const toggleChatAreaButton = ChatArea.createToggleChatAreaButton(); const toggleLeftbarButton = this.createToggleLeftbarButton(); // Add Reset Button to UI Settings const resetChatAreaButton = document.createElement('button'); resetChatAreaButton.innerText = 'Chat Fenster Position zurücksetzen'; resetChatAreaButton.style.padding = '10px'; resetChatAreaButton.style.backgroundColor = '#573699'; resetChatAreaButton.style.color = '#fff'; resetChatAreaButton.style.border = 'none'; resetChatAreaButton.style.borderRadius = '5px'; resetChatAreaButton.style.cursor = 'pointer'; resetChatAreaButton.style.marginBottom = '10px'; resetChatAreaButton.addEventListener('click', () => ChatArea.resetChatAreaPosition()); // PNG Management Section const pngSectionTitle = document.createElement('h4'); pngSectionTitle.innerText = 'PNG Management'; pngSectionTitle.style.marginTop = '20px'; pngSectionTitle.style.marginBottom = '10px'; const pngManagerButton = this.createPngManagerButton(); const closeButton = this.createCloseButton(); menu.appendChild(title); menu.appendChild(wallpaperSectionTitle); menu.appendChild(wallpaperChangerButton); menu.appendChild(document.createElement('br')); menu.appendChild(savedWallpapersButton); menu.appendChild(document.createElement('br')); menu.appendChild(uiSettingsSectionTitle); menu.appendChild(toggleChatAreaButton); menu.appendChild(document.createElement('br')); menu.appendChild(toggleLeftbarButton); menu.appendChild(document.createElement('br')); menu.appendChild(resetChatAreaButton); // Moved here menu.appendChild(document.createElement('br')); // Append PNG Management section menu.appendChild(pngSectionTitle); menu.appendChild(pngManagerButton); menu.appendChild(document.createElement('br')); menu.appendChild(closeButton); return menu; }, createTitleElement: function() { const title = document.createElement('h3'); title.innerText = 'AC-Enhanced Settings'; title.style.marginBottom = '20px'; return title; }, createToggleLeftbarButton: function() { const toggleLeftbarButton = document.createElement('button'); toggleLeftbarButton.id = 'aac-toggleLeftbarButton'; toggleLeftbarButton.style.padding = '10px'; toggleLeftbarButton.style.color = '#fff'; toggleLeftbarButton.style.border = 'none'; toggleLeftbarButton.style.borderRadius = '5px'; toggleLeftbarButton.style.cursor = 'pointer'; toggleLeftbarButton.style.marginBottom = '10px'; toggleLeftbarButton.addEventListener('click', () => Menu.toggleLeftbarVisibility()); return toggleLeftbarButton; }, createResetChatAreaButton: function() { const resetButton = document.createElement('button'); resetButton.innerText = 'Chat Fenster Position zurücksetzen'; resetButton.style.padding = '10px'; resetButton.style.backgroundColor = '#573699'; resetButton.style.color = '#fff'; resetButton.style.border = 'none'; resetButton.style.borderRadius = '5px'; resetButton.style.cursor = 'pointer'; resetButton.style.marginBottom = '10px'; resetButton.addEventListener('click', () => ChatArea.resetChatAreaPosition()); return resetButton; }, createPngManagerButton: function() { const pngManagerButton = document.createElement('button'); pngManagerButton.innerText = 'PNG Management'; pngManagerButton.style.padding = '10px'; pngManagerButton.style.backgroundColor = '#573699'; pngManagerButton.style.color = '#fff'; pngManagerButton.style.border = 'none'; pngManagerButton.style.borderRadius = '5px'; pngManagerButton.style.cursor = 'pointer'; pngManagerButton.style.marginBottom = '10px'; pngManagerButton.addEventListener('click', () => { PngManager.createPngMenu(); }); return pngManagerButton; }, createCloseButton: function() { const closeButton = document.createElement('button'); closeButton.innerText = 'Schließen'; closeButton.style.padding = '10px'; closeButton.style.backgroundColor = '#ccc'; closeButton.style.color = '#000'; closeButton.style.border = 'none'; closeButton.style.borderRadius = '5px'; closeButton.style.cursor = 'pointer'; closeButton.addEventListener('click', () => { const menu = document.querySelector('#aac-placeholderMenu'); if (menu) menu.remove(); }); return closeButton; }, toggleLeftbarVisibility: function() { const leftbar = document.querySelector('#leftbar'); const chatBox = document.querySelector('#chatverlaufbox'); if (!leftbar) return; if (leftbar.style.visibility === 'hidden') { leftbar.style.transition = 'visibility 0s, opacity 0.5s linear'; leftbar.style.opacity = '1'; leftbar.style.visibility = 'visible'; leftbar.style.pointerEvents = 'auto'; if (chatBox) chatBox.style.left = '250px'; localStorage.setItem('aac-leftbarVisibility', 'visible'); } else { leftbar.style.transition = 'visibility 0s 0.5s, opacity 0.5s linear'; leftbar.style.opacity = '0'; leftbar.style.visibility = 'hidden'; leftbar.style.pointerEvents = 'none'; if (chatBox) chatBox.style.left = '0'; localStorage.setItem('aac-leftbarVisibility', 'hidden'); } this.updateToggleLeftbarButton(); } }; Menu.updateToggleLeftbarButton = function() { const toggleLeftbarButton = document.querySelector('#aac-toggleLeftbarButton'); const leftbarVisible = localStorage.getItem('aac-leftbarVisibility') !== 'hidden'; if (toggleLeftbarButton) { if (leftbarVisible) { toggleLeftbarButton.innerText = 'User Liste verstecken'; toggleLeftbarButton.style.backgroundColor = '#573699'; } else { toggleLeftbarButton.innerText = 'User Liste zeigen'; toggleLeftbarButton.style.backgroundColor = '#FF0000'; } } }; // Initialize the leftbar visibility state on load document.addEventListener('DOMContentLoaded', () => { sessionStorage.removeItem('aac-wallpaperChanged'); sessionStorage.removeItem('aac-chatAreaButtonState'); const leftbar = document.querySelector('#leftbar'); const chatBox = document.querySelector('#chatverlaufbox'); const toggleLeftbarButton = document.querySelector('#aac-toggleLeftbarButton'); if (leftbar) { const leftbarVisible = localStorage.getItem('aac-leftbarVisibility') !== 'hidden'; leftbar.style.transition = 'visibility 0s, opacity 0.5s linear'; leftbar.style.opacity = leftbarVisible ? '1' : '0'; leftbar.style.visibility = leftbarVisible ? 'visible' : 'hidden'; leftbar.style.pointerEvents = leftbarVisible ? 'auto' : 'none'; if (chatBox) { chatBox.style.left = leftbarVisible ? '250px' : '0'; // Ensure consistent positioning for chatbox } if (toggleLeftbarButton) { toggleLeftbarButton.innerText = leftbarVisible ? 'User Liste verstecken' : 'User Liste zeigen'; toggleLeftbarButton.style.backgroundColor = leftbarVisible ? '#573699' : '#FF0000'; } } window.onbeforeunload = () => {}; // Disable confirmation popup when reloading the page }); // PNG MANAGER const PngManager = { init: function() { $(document).ready(() => { this.loadSavedPngs(); }); }, loadSavedPngs: function() { const savedPngs = JSON.parse(localStorage.getItem('aac-savedPngs') || '[]'); savedPngs.forEach((png, index) => { if (png.active) { this.createPngElement(png.url, index); } }); }, createPngMenu: function() { const existingMenu = document.querySelector('#aac-pngMenu'); if (existingMenu) { existingMenu.remove(); return; } const menu = document.createElement('div'); menu.id = 'aac-pngMenu'; menu.style.position = 'fixed'; menu.style.top = '50%'; menu.style.left = '50%'; menu.style.transform = 'translate(-50%, -50%)'; menu.style.zIndex = '10001'; menu.style.padding = '20px'; menu.style.backgroundColor = '#fff'; menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)'; menu.style.borderRadius = '10px'; menu.style.textAlign = 'center'; const title = document.createElement('h3'); title.innerText = 'PNG Management'; title.style.marginBottom = '20px'; menu.appendChild(title); // Toggle Handles Button const toggleHandlesButton = document.createElement('button'); toggleHandlesButton.innerText = 'Toggle Handles'; toggleHandlesButton.style.padding = '10px'; toggleHandlesButton.style.backgroundColor = '#573699'; toggleHandlesButton.style.color = '#fff'; toggleHandlesButton.style.border = 'none'; toggleHandlesButton.style.borderRadius = '5px'; toggleHandlesButton.style.cursor = 'pointer'; toggleHandlesButton.style.marginBottom = '10px'; toggleHandlesButton.addEventListener('click', () => { const handles = document.querySelectorAll('.aac-png-handle'); const areHandlesVisible = handles[0].style.display !== 'none'; handles.forEach(handle => { handle.style.display = areHandlesVisible ? 'none' : 'block'; }); // Save state to localStorage localStorage.setItem('aac-png-handles-visible', !areHandlesVisible); }); menu.appendChild(toggleHandlesButton); const savedPngs = JSON.parse(localStorage.getItem('aac-savedPngs') || '[]'); savedPngs.forEach((png, index) => { const pngContainer = document.createElement('div'); pngContainer.style.display = 'flex'; pngContainer.style.alignItems = 'center'; pngContainer.style.marginBottom = '10px'; const thumbnail = document.createElement('img'); thumbnail.src = png.url; thumbnail.alt = png.name || `PNG ${index + 1}`; thumbnail.style.width = '50px'; thumbnail.style.height = '50px'; thumbnail.style.objectFit = 'cover'; thumbnail.style.borderRadius = '5px'; thumbnail.style.marginRight = '10px'; const activateButton = document.createElement('button'); activateButton.innerText = png.active ? 'Ausblenden' : 'Einblenden'; activateButton.style.padding = '10px'; activateButton.style.marginRight = '5px'; activateButton.style.backgroundColor = png.active ? '#FF0000' : '#573699'; activateButton.style.color = '#fff'; activateButton.style.border = 'none'; activateButton.style.borderRadius = '5px'; activateButton.style.cursor = 'pointer'; activateButton.addEventListener('click', () => { png.active = !png.active; savedPngs[index] = png; localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs)); if (png.active) { this.createPngElement(png.url, index); } else { const existingPng = document.querySelector(`#aac-png-${index}`); if (existingPng) existingPng.remove(); } activateButton.innerText = png.active ? 'Ausblenden' : 'Einblenden'; activateButton.style.backgroundColor = png.active ? '#FF0000' : '#573699'; }); const deleteButton = document.createElement('button'); deleteButton.innerText = '✕'; deleteButton.style.marginLeft = '5px'; deleteButton.style.padding = '2px'; deleteButton.style.width = '20px'; deleteButton.style.height = '20px'; deleteButton.style.backgroundColor = '#FF0000'; deleteButton.style.color = '#fff'; deleteButton.style.border = 'none'; deleteButton.style.borderRadius = '3px'; deleteButton.style.cursor = 'pointer'; deleteButton.addEventListener('click', () => { savedPngs.splice(index, 1); localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs)); // Remove the entire container (including handles) const existingPngContainer = document.querySelector(`#aac-png-container-${index}`); if (existingPngContainer) existingPngContainer.remove(); menu.remove(); this.createPngMenu(); }); pngContainer.appendChild(thumbnail); pngContainer.appendChild(activateButton); pngContainer.appendChild(deleteButton); menu.appendChild(pngContainer); }); const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = 'image/png'; fileInput.style.marginBottom = '10px'; fileInput.style.display = 'block'; fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { if (file.size > 2560 * 2560) { alert('Die PNG-Datei ist zu groß. Bitte wählen Sie eine Datei, die kleiner als 2,5 MB ist.'); return; } const reader = new FileReader(); reader.onload = (e) => { const pngUrl = e.target.result; let savedPngs = JSON.parse(localStorage.getItem('aac-savedPngs') || '[]'); if (savedPngs.length >= 5) { alert('Du kannst maximal 5 PNG-Dateien speichern. Bitte lösche eine, bevor du eine neue hinzufügst.'); return; } savedPngs.push({ url: pngUrl, name: file.name, active: false }); localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs)); menu.remove(); this.createPngMenu(); }; reader.readAsDataURL(file); } }); const closeButton = document.createElement('button'); closeButton.innerText = 'Schließen'; closeButton.style.marginTop = '20px'; closeButton.style.padding = '10px'; closeButton.style.backgroundColor = '#ccc'; closeButton.style.color = '#000'; closeButton.style.border = 'none'; closeButton.style.borderRadius = '5px'; closeButton.style.cursor = 'pointer'; closeButton.addEventListener('click', () => { menu.remove(); }); menu.appendChild(fileInput); menu.appendChild(closeButton); document.body.appendChild(menu); }, createResizeHandle: function() { const resizeHandle = document.createElement('div'); resizeHandle.classList.add('aac-png-handle'); resizeHandle.style.width = '15px'; resizeHandle.style.height = '15px'; resizeHandle.style.backgroundColor = '#573699'; // Purple for resizing resizeHandle.style.border = '2px solid #fff'; resizeHandle.style.position = 'absolute'; resizeHandle.style.right = '0'; resizeHandle.style.bottom = '0'; resizeHandle.style.cursor = 'se-resize'; resizeHandle.title = 'Resize'; // Tooltip return resizeHandle; }, createRotateHandle: function() { const rotateHandle = document.createElement('div'); rotateHandle.classList.add('aac-png-handle'); rotateHandle.style.width = '15px'; rotateHandle.style.height = '15px'; rotateHandle.style.backgroundColor = '#FF0000'; // Red for rotating rotateHandle.style.border = '2px solid #fff'; rotateHandle.style.position = 'absolute'; rotateHandle.style.top = '0'; rotateHandle.style.right = '0'; rotateHandle.style.cursor = 'grab'; rotateHandle.title = 'Rotate'; // Tooltip return rotateHandle; }, createPngElement: function(url, index) { const pngElement = document.createElement('img'); pngElement.src = url; pngElement.id = `aac-png-${index}`; // Set initial styles for the PNG pngElement.style.position = 'absolute'; // Position relative to the container pngElement.style.width = '150px'; pngElement.style.height = '150px'; pngElement.style.cursor = 'move'; pngElement.style.transformOrigin = 'center center'; // For rotation // Container for the PNG and handles const pngContainer = document.createElement('div'); pngContainer.id = `aac-png-container-${index}`; // Unique ID for the container pngContainer.style.position = 'fixed'; pngContainer.style.top = '100px'; pngContainer.style.left = '100px'; pngContainer.style.zIndex = '10002'; pngContainer.style.pointerEvents = 'auto'; // Append the PNG to the container pngContainer.appendChild(pngElement); // Create and append handles const resizeHandle = this.createResizeHandle(); const rotateHandle = this.createRotateHandle(); pngContainer.appendChild(resizeHandle); pngContainer.appendChild(rotateHandle); // Append the container to the body document.body.appendChild(pngContainer); let isDragging = false; let isResizing = false; let isRotating = false; let startX, startY, initialLeft, initialTop, initialWidth, initialHeight, initialAngle; // Dragging logic pngContainer.addEventListener('mousedown', (e) => { if (e.target === resizeHandle || e.target === rotateHandle) { return; // Ignore mousedown on handles for dragging } e.preventDefault(); isDragging = true; startX = e.clientX; startY = e.clientY; initialLeft = parseInt(pngContainer.style.left, 10) || 0; initialTop = parseInt(pngContainer.style.top, 10) || 0; pngElement.style.opacity = '0.6'; }); // Resizing logic resizeHandle.addEventListener('mousedown', (e) => { e.preventDefault(); isResizing = true; startX = e.clientX; startY = e.clientY; initialWidth = pngElement.offsetWidth; initialHeight = pngElement.offsetHeight; }); // Rotating logic rotateHandle.addEventListener('mousedown', (e) => { e.preventDefault(); isRotating = true; startX = e.clientX; startY = e.clientY; const transform = pngElement.style.transform; initialAngle = transform ? parseFloat(transform.replace('rotate(', '').replace('deg)', '')) : 0; }); document.addEventListener('mousemove', (e) => { if (isDragging) { const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; const newLeft = initialLeft + deltaX; const newTop = initialTop + deltaY; // Update container position pngContainer.style.left = `${newLeft}px`; pngContainer.style.top = `${newTop}px`; } if (isResizing) { const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; const newWidth = initialWidth + deltaX; const newHeight = initialHeight + deltaY; // Ensure minimum size if (newWidth > 50 && newHeight > 50) { pngElement.style.width = `${newWidth}px`; pngElement.style.height = `${newHeight}px`; } } if (isRotating) { const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; const angle = initialAngle + Math.atan2(deltaY, deltaX) * (180 / Math.PI); pngElement.style.transform = `rotate(${angle}deg)`; } }); document.addEventListener('mouseup', () => { isDragging = false; isResizing = false; isRotating = false; pngElement.style.opacity = '1'; }); } }; // Load handle visibility state on page load document.addEventListener('DOMContentLoaded', () => { const handlesVisible = localStorage.getItem('aac-png-handles-visible') === 'true'; const handles = document.querySelectorAll('.aac-png-handle'); handles.forEach(handle => { handle.style.display = handlesVisible ? 'block' : 'none'; }); }); // Wallpaper Changer Module const WallpaperChanger = { init: function() { this.applySavedBackground(); }, applySavedBackground: function() { const savedImageUrl = localStorage.getItem('aac-customBackgroundUrl'); if (savedImageUrl) { this.applyCustomBackground(savedImageUrl); } else { this.resetToDefaultBackground(); } }, applyCustomBackground: function(url) { if (url) { document.documentElement.style.cssText = ` background-image: url("${url}") !important; background-color: #000 !important; background-position: center center !important; background-attachment: fixed !important; background-size: cover !important; background-repeat: no-repeat !important; `; document.body.style.cssText = ` background-image: url("${url}") !important; background-color: #000 !important; background-position: center center !important; background-attachment: fixed !important; background-size: cover !important; background-repeat: no-repeat !important; `; } }, resetToDefaultBackground: function() { document.documentElement.style.cssText = ''; document.body.style.cssText = ''; localStorage.removeItem('aac-customBackgroundUrl'); }, createWallpaperChangerButton: function() { const button = document.createElement('button'); button.innerText = 'Hintergrund ändern'; // Change Wallpaper -> Hintergrund ändern button.style.padding = '10px'; button.style.backgroundColor = '#573699'; button.style.color = '#fff'; button.style.border = 'none'; button.style.borderRadius = '5px'; button.style.cursor = 'pointer'; button.style.marginBottom = '10px'; button.addEventListener('click', () => { WallpaperChanger.createInputMenu(); const menu = document.querySelector('#aac-placeholderMenu'); if (menu) menu.remove(); }); return button; }, createSavedWallpapersButton: function() { const button = document.createElement('button'); button.innerText = 'Gespeicherte Hintergründe'; // Saved Wallpapers -> Gespeicherte Hintergründe button.style.padding = '10px'; button.style.backgroundColor = '#573699'; button.style.color = '#fff'; button.style.border = 'none'; button.style.borderRadius = '5px'; button.style.cursor = 'pointer'; button.style.marginBottom = '10px'; button.addEventListener('click', () => { WallpaperChanger.createSavedWallpapersMenu(); }); return button; }, createSavedWallpapersMenu: function() { const menu = document.createElement('div'); menu.style.position = 'fixed'; menu.style.top = '50%'; menu.style.left = '50%'; menu.style.transform = 'translate(-50%, -50%)'; menu.style.zIndex = '10001'; menu.style.padding = '20px'; menu.style.backgroundColor = '#fff'; menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)'; menu.style.borderRadius = '10px'; menu.style.textAlign = 'center'; const title = document.createElement('h3'); title.innerText = 'Gespeicherte Hintergründe'; title.style.marginBottom = '20px'; menu.appendChild(title); const savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]'); savedWallpapers.forEach((wallpaper, index) => { const wallpaperContainer = document.createElement('div'); wallpaperContainer.style.display = 'flex'; wallpaperContainer.style.alignItems = 'center'; wallpaperContainer.style.marginBottom = '10px'; const thumbnail = document.createElement('img'); thumbnail.src = wallpaper.url; thumbnail.alt = wallpaper.name || `Wallpaper ${index + 1}`; thumbnail.style.width = '50px'; thumbnail.style.height = '50px'; thumbnail.style.objectFit = 'cover'; thumbnail.style.borderRadius = '5px'; thumbnail.style.marginRight = '10px'; const wallpaperButton = document.createElement('button'); wallpaperButton.innerText = wallpaper.name || `Wallpaper ${index + 1}`; wallpaperButton.style.padding = '10px'; wallpaperButton.style.backgroundColor = '#573699'; wallpaperButton.style.color = '#fff'; wallpaperButton.style.border = 'none'; wallpaperButton.style.borderRadius = '5px'; wallpaperButton.style.cursor = 'pointer'; wallpaperButton.style.marginRight = '5px'; wallpaperButton.addEventListener('click', () => { WallpaperChanger.applyCustomBackground(wallpaper.url); localStorage.setItem('aac-customBackgroundUrl', wallpaper.url); // Save the applied wallpaper URL }); const deleteButton = document.createElement('button'); deleteButton.innerText = '✕'; deleteButton.style.marginLeft = '5px'; deleteButton.style.padding = '2px'; deleteButton.style.width = '20px'; deleteButton.style.height = '20px'; deleteButton.style.backgroundColor = '#FF0000'; deleteButton.style.color = '#fff'; deleteButton.style.border = 'none'; deleteButton.style.borderRadius = '3px'; deleteButton.style.cursor = 'pointer'; deleteButton.addEventListener('click', () => { savedPngs.splice(index, 1); localStorage.setItem('aac-savedPngs', JSON.stringify(savedPngs)); // Remove the entire container (including handles) const existingPngContainer = document.querySelector(`#aac-png-container-${index}`); if (existingPngContainer) existingPngContainer.remove(); menu.remove(); this.createPngMenu(); }); wallpaperContainer.appendChild(thumbnail); wallpaperContainer.appendChild(wallpaperButton); wallpaperContainer.appendChild(deleteButton); menu.appendChild(wallpaperContainer); }); // Add a button to reset to the default wallpaper const resetButton = document.createElement('button'); resetButton.innerText = 'Standardhintergrund wiederherstellen'; // Reset to Default Background resetButton.style.marginTop = '20px'; resetButton.style.padding = '10px'; resetButton.style.backgroundColor = '#ccc'; resetButton.style.color = '#000'; resetButton.style.border = 'none'; resetButton.style.borderRadius = '5px'; resetButton.style.cursor = 'pointer'; resetButton.addEventListener('click', () => { WallpaperChanger.resetToDefaultBackground(); menu.remove(); }); menu.appendChild(resetButton); const closeButton = document.createElement('button'); closeButton.innerText = 'Schließen'; closeButton.style.marginTop = '10px'; closeButton.style.padding = '10px'; closeButton.style.backgroundColor = '#ccc'; closeButton.style.color = '#000'; closeButton.style.border = 'none'; closeButton.style.borderRadius = '5px'; closeButton.style.cursor = 'pointer'; closeButton.addEventListener('click', () => { menu.remove(); }); menu.appendChild(closeButton); document.body.appendChild(menu); }, createInputMenu: function() { const menu = document.createElement('div'); menu.style.position = 'fixed'; menu.style.top = '50%'; menu.style.left = '50%'; menu.style.transform = 'translate(-50%, -50%)'; menu.style.zIndex = '10001'; menu.style.padding = '20px'; menu.style.backgroundColor = '#fff'; menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)'; menu.style.borderRadius = '10px'; menu.style.textAlign = 'center'; const input = document.createElement('input'); input.type = 'text'; input.placeholder = 'Bild-URL hier eingeben...'; // Enter image URL here... input.value = localStorage.getItem('aac-customBackgroundUrl') || ''; input.style.width = '300px'; input.style.padding = '10px'; input.style.marginBottom = '10px'; input.style.border = '1px solid #ccc'; input.style.borderRadius = '5px'; const nameInput = document.createElement('input'); nameInput.type = 'text'; nameInput.placeholder = 'Geben Sie den Namen des Hintergrunds ein...'; // Enter wallpaper name... nameInput.style.width = '300px'; nameInput.style.padding = '10px'; nameInput.style.marginBottom = '10px'; nameInput.style.border = '1px solid #ccc'; nameInput.style.borderRadius = '5px'; const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = 'image/*'; fileInput.style.marginBottom = '10px'; fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { // Check if file size exceeds 1 MB (1 MB = 1024 * 1024 bytes) if (file.size > 2.5 * 1024 * 1024) { alert('Die Bilddatei ist zu groß. Bitte wählen Sie eine Datei, die kleiner als 2,5 MB ist.'); return; } const reader = new FileReader(); reader.onload = (e) => { const imageUrl = e.target.result; input.value = imageUrl; }; reader.readAsDataURL(file); } }); const applyButton = document.createElement('button'); applyButton.innerText = 'Hintergrund anwenden'; // Apply Background -> Hintergrund anwenden applyButton.style.marginLeft = '10px'; applyButton.style.padding = '10px'; applyButton.style.backgroundColor = '#573699'; applyButton.style.color = '#fff'; applyButton.style.border = 'none'; applyButton.style.borderRadius = '5px'; applyButton.style.cursor = 'pointer'; applyButton.addEventListener('click', () => { const imageUrl = input.value.trim(); const wallpaperName = nameInput.value.trim(); if (imageUrl && wallpaperName) { localStorage.setItem('aac-customBackgroundUrl', imageUrl); WallpaperChanger.applyCustomBackground(imageUrl); sessionStorage.setItem('aac-wallpaperChanged', 'true'); menu.remove(); } else { alert('Bitte geben Sie eine gültige URL und einen Namen ein.'); // Please enter a valid URL and name. } }); const saveButton = document.createElement('button'); saveButton.innerText = 'Hintergrund speichern'; // Save Wallpaper -> Hintergrund speichern saveButton.style.marginTop = '10px'; saveButton.style.padding = '10px'; saveButton.style.backgroundColor = '#573699'; saveButton.style.color = '#fff'; saveButton.style.border = 'none'; saveButton.style.borderRadius = '5px'; saveButton.style.cursor = 'pointer'; saveButton.addEventListener('click', () => { const imageUrl = input.value.trim(); const wallpaperName = nameInput.value.trim(); if (imageUrl && wallpaperName) { let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]'); if (savedWallpapers.length >= 5) { alert('Du kannst maximal 5 Hintergründe speichern. Bitte lösche einen, bevor du einen neuen hinzufügst.'); // You can save a maximum of 5 wallpapers. Please delete one before adding a new one. return; } WallpaperChanger.saveWallpaper(imageUrl, wallpaperName); alert('Hintergrund erfolgreich gespeichert.'); // Wallpaper saved successfully. } else { alert('Bitte geben Sie eine gültige URL und einen Namen ein.'); // Please enter a valid URL and name. } }); const closeButton = document.createElement('button'); closeButton.innerText = 'Schließen'; // Close -> Schließen closeButton.style.marginTop = '10px'; closeButton.style.padding = '10px'; closeButton.style.backgroundColor = '#ccc'; closeButton.style.color = '#000'; closeButton.style.border = 'none'; closeButton.style.borderRadius = '5px'; closeButton.style.cursor = 'pointer'; closeButton.addEventListener('click', () => { menu.remove(); }); menu.appendChild(input); menu.appendChild(document.createElement('br')); menu.appendChild(nameInput); menu.appendChild(document.createElement('br')); menu.appendChild(fileInput); menu.appendChild(applyButton); menu.appendChild(document.createElement('br')); menu.appendChild(saveButton); menu.appendChild(document.createElement('br')); menu.appendChild(closeButton); document.body.appendChild(menu); }, saveWallpaper: function(url, name) { let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]'); if (!savedWallpapers.some(wallpaper => wallpaper.url === url)) { savedWallpapers.push({ url, name }); localStorage.setItem('aac-savedWallpapers', JSON.stringify(savedWallpapers)); } }, deleteWallpaper: function(index) { let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]'); savedWallpapers.splice(index, 1); localStorage.setItem('aac-savedWallpapers', JSON.stringify(savedWallpapers)); } }; // Chat Area Module const ChatArea = { isDraggable: false, init: function() { this.chatArea = document.querySelector('#graphicChatArea'); if (this.chatArea) { this.centerChatArea(); this.chatArea.style.position = 'absolute'; const savedState = localStorage.getItem('aac-isChatAreaDraggable'); if (savedState === 'true') { this.enableDraggable(); } } }, centerChatArea: function() { if (this.chatArea) { const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; const chatWidth = this.chatArea.offsetWidth; const chatHeight = this.chatArea.offsetHeight; this.chatArea.style.left = `${(windowWidth - chatWidth) / 2}px`; this.chatArea.style.top = `${(windowHeight - chatHeight) / 2}px`; } }, resetChatAreaPosition: function() { this.centerChatArea(); console.log('[AAC Enhanced] Chat area position reset to center.'); }, toggleDraggable: function() { if (!this.chatArea) return; if (this.isDraggable) { this.disableDraggable(); } else { this.enableDraggable(); } this.updateToggleButton(); }, enableDraggable: function() { this.isDraggable = true; localStorage.setItem('aac-isChatAreaDraggable', 'true'); sessionStorage.setItem('aac-chatAreaButtonState', 'true'); $(this.chatArea).draggable({ containment: 'document', start: function() { ChatArea.chatArea.classList.add('ui-draggable-enabled'); }, stop: function() { ChatArea.chatArea.classList.remove('ui-draggable-enabled'); } }); console.log('[AAC Enhanced] Chat area is now draggable.'); }, disableDraggable: function() { this.isDraggable = false; localStorage.setItem('aac-isChatAreaDraggable', 'false'); if ($(this.chatArea).draggable('instance')) { $(this.chatArea).draggable('destroy'); } console.log('[AAC Enhanced] Draggable functionality has been disabled.'); }, updateToggleButton: function() { const toggleButton = document.querySelector('#aac-toggleChatAreaButton'); if (toggleButton) { if (this.isDraggable) { toggleButton.innerText = 'Verschiebbare Chat-Bereich deaktivieren'; // Disable Draggable Chat Area toggleButton.style.backgroundColor = '#FF0000'; } else { toggleButton.innerText = 'Verschiebbare Chat-Bereich aktivieren'; // Enable Draggable Chat Area toggleButton.style.backgroundColor = '#573699'; } } }, createToggleChatAreaButton: function() { const button = document.createElement('button'); button.id = 'aac-toggleChatAreaButton'; button.style.padding = '10px'; button.style.color = '#fff'; button.style.border = 'none'; button.style.borderRadius = '5px'; button.style.cursor = 'pointer'; button.style.marginBottom = '10px'; button.addEventListener('click', () => ChatArea.toggleDraggable()); return button; } }; AACApp.init(); })();