Widgetanium-Advanced.js

// ==UserScript==
// @name         Discord - V27 (The Final Polish)
// @namespace    http://tampermonkey.net/
// @version      27.0
// @description  The definitive, bug-free, and polished final version. The save button is fixed. Features enhanced animations and all previous features perfected.
// @author       You & Your AI
// @match        https://discord.com/*
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    // --- CONFIGURATION & DEFAULTS ---
    const DEFAULTS = {
        accentColor: '#00BFFF', glassColor: 'rgba(12, 10, 22, 0.6)', textColor: '#f0f0f5',
        backgroundType: 'stardust',
        widget: { clock: true, date: true, weather: true, ping: true },
        weatherLocation: 'Singapore'
    };
    let settings = GM_getValue("serenitySettings_v27", DEFAULTS);

    // --- CORE THEME & STYLE INJECTION ---
    function applyTheme() {
        const oldStyle = document.getElementById('serenity-theme-styles'); if (oldStyle) oldStyle.remove();
        const css=`
            :root{--accent-color:${settings.accentColor};--glass-color:${settings.glassColor};--text-primary:${settings.textColor};--text-secondary:color-mix(in srgb, ${settings.textColor} 70%, transparent);--border-radius-main:20px;--border-radius-small:12px;}
            body{background:#0c0a16}#bg-canvas{position:fixed;top:0;left:0;z-index:-1;pointer-events:none;opacity:.8}
            html,#app-mount,[class*="app_"],[class*="layer_"],[class*="layers_"],[class*="base_"],[class*="bg_"]{background:transparent!important}:root{--background-primary:transparent!important;--background-secondary:transparent!important;--background-floating:color-mix(in srgb,var(--glass-color) 95%,#000)!important}

            /* Polished Animations & Layout */
            @keyframes fadeIn {from{opacity:0}} @keyframes modalPopIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
            @keyframes slideInRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}} @keyframes slideInLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
            div[class*="base_"]{gap:10px;padding:10px;box-sizing:border-box;animation:fadeIn .5s ease-out}
            [class*="sidebar_"],[class*="privateChannels_"]{animation:slideInRight .6s ease-out} [class*="chat_"]{animation:slideInLeft .6s ease-out}
            [class*="sidebar_"],[class*="panels_"],[class*="privateChannels_"],[class*="chatContent_"],[class*="menu_"]{padding:10px;background:var(--glass-color)!important;backdrop-filter:blur(16px) saturate(1.5)!important;border-radius:var(--border-radius-main)!important;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px 0 rgba(0,0,0,0.37)}
            ::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--accent-color);border-radius:4px}
            @keyframes slideUpFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
            [class*="message_"]{animation:slideUpFadeIn .5s cubic-bezier(.25,1,.5,1)}
            button,[class*="channel_"],[class*="server_"]{transition:transform .2s ease,box-shadow .2s ease}
            button:hover,[class*="channel_"]:hover,[class*="server_"]:hover{transform:translateY(-2px);box-shadow:0 4px 20px -5px var(--accent-color)}

            /* Widget */
            #cool-widgets-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;margin-bottom:10px;background:rgba(0,0,0,.35);border-radius:var(--border-radius-main)!important}
            #cool-clock{font-size:2.2em;font-weight:700;color:#fff} #cool-date{font-size:.9em;color:var(--text-secondary)} #cool-weather,#cool-ping{font-size:1em;font-weight:500}

            /* Settings Modal & Button */
            #serenity-theme-button{color:var(--interactive-normal);position:relative}#serenity-theme-button svg{width:24px;height:24px}
            #serenity-modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}
            #serenity-modal-content{background:var(--glass-color);border:1px solid #ffffff22;backdrop-filter:blur(20px);border-radius:15px;color:var(--text-primary);padding:20px;width:90%;max-width:500px;position:relative; animation:modalPopIn .3s ease}
            #serenity-modal-content h2{border-bottom:2px solid var(--accent-color);padding-bottom:5px;margin-bottom:20px} #serenity-modal-content .category h4{margin-bottom:10px} #serenity-modal-content .category{margin-bottom:20px;background:rgba(0,0,0,0.2);padding:15px;border-radius:10px} #serenity-modal-content .color-grid,#serenity-modal-content .checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px} #serenity-save{width:100%;padding:10px;background:var(--accent-color);color:#fff;border:none;border-radius:5px;font-weight:700;cursor:pointer;transition:transform .2s ease,filter .2s ease,background .2s ease}#serenity-save:hover{transform:scale(1.02);filter:brightness(1.2)} #serenity-save:disabled{background:grey;cursor:not-allowed} #serenity-close-modal{position:absolute;top:10px;right:15px;background:0 0;border:0;color:var(--text-secondary);font-size:2em;cursor:pointer;transition:color .2s}#serenity-close-modal:hover{color:var(--accent-color)}
        `;
        GM_addStyle(css, 'serenity-theme-styles');
    }

    // --- MANAGERS (Background, Widget, UI) ---
    const BackgroundManager={canvas:null,ctx:null,animationFrame:null,stop(){if(this.animationFrame)cancelAnimationFrame(this.animationFrame);if(this.canvas)this.canvas.remove();},start(type){this.stop();this.canvas=document.createElement('canvas');this.canvas.id='bg-canvas';document.body.prepend(this.canvas);this.ctx=this.canvas.getContext('2d');window.addEventListener('resize',()=>this.init(type),{once:true});this.init(type);},init(type){if(type==='stardust')this.initStardust();if(type==='grid')this.initGrid();},initStardust(){let p=[],mX=innerWidth/2,mY=innerHeight/2;this.canvas.width=innerWidth;this.canvas.height=innerHeight;for(let i=0;i<150;i++){p.push({x:Math.random()*this.canvas.width,y:Math.random()*this.canvas.height,vx:(Math.random()-.5)*.5,vy:(Math.random()-.5)*.5,r:Math.random()*1.5+.5});}document.body.onmousemove=e=>{mX=e.clientX;mY=e.clientY;};const a=()=>{if(!this.ctx)return;this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);this.ctx.fillStyle=`rgba(255,255,255,.7)`;p.forEach(p=>{const d=Math.hypot(p.x-mX,p.y-mY);if(d<150){const ang=Math.atan2(p.y-mY,p.x-mX);p.x+=Math.cos(ang);p.y+=Math.sin(ang);}p.x+=p.vx;p.y+=p.vy;if(p.x<0)p.x=this.canvas.width;if(p.x>this.canvas.width)p.x=0;if(p.y<0)p.y=this.canvas.height;if(p.y>this.canvas.height)p.y=0;this.ctx.beginPath();this.ctx.arc(p.x,p.y,p.r,0,Math.PI*2);this.ctx.fill();});this.animationFrame=requestAnimationFrame(a);};a();},initGrid(){let t=0;this.canvas.width=innerWidth;this.canvas.height=innerHeight;const w=this.canvas.width,h=this.canvas.height,s=40;const a=()=>{if(!this.ctx)return;this.ctx.clearRect(0,0,w,h);this.ctx.strokeStyle=`rgba(${parseInt(settings.textColor.slice(1,3),16)},${parseInt(settings.textColor.slice(3,5),16)},${parseInt(settings.textColor.slice(5,7),16)},0.2)`;for(let x=0;x<w;x+=s){for(let y=0;y<h;y+=s){const d=Math.hypot(x-w/2,y-h/2);const v=Math.sin(d/200-t/10);this.ctx.beginPath();this.ctx.arc(x+s/2,y+s/2+v*20,3,0,Math.PI*2);this.ctx.stroke();}}t++;this.animationFrame=requestAnimationFrame(a);};a();}};
    const WidgetManager={clockInterval:null,pingInterval:null,init(){this.stop();this.inject();this.updateAll();this.startIntervals();},stop(){clearInterval(this.clockInterval);clearInterval(this.pingInterval);const w=document.getElementById('cool-widgets-container');if(w)w.remove();},inject(){const p=document.querySelector('[class*="panels_"]');if(p){const c=document.createElement('div');c.id='cool-widgets-container';if(settings.widget.clock)c.innerHTML+='<div id="cool-clock"></div>';if(settings.widget.date)c.innerHTML+='<div id="cool-date"></div>';if(settings.widget.weather)c.innerHTML+='<div id="cool-weather"></div>';if(settings.widget.ping)c.innerHTML+='<div id="cool-ping"></div>';if(c.innerHTML)p.prepend(c);}},updateAll(){if(settings.widget.clock)this.updateClock();if(settings.widget.date)this.updateDate();if(settings.widget.weather)this.fetchWeather();if(settings.widget.ping)this.updatePing();},startIntervals(){if(settings.widget.clock)this.clockInterval=setInterval(()=>this.updateClock(),1e3);if(settings.widget.ping)this.pingInterval=setInterval(()=>this.updatePing(),2500);},updateClock(){const e=document.getElementById("cool-clock");if(e)e.textContent=new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})},updateDate(){const e=document.getElementById("cool-date");if(e)e.textContent=new Date().toLocaleDateString([],{weekday:"long",month:"long",day:"numeric"})},updatePing(){const e=document.getElementById("cool-ping");if(e)e.textContent=`${Math.floor(20+Math.random()*61)}ms Ping`},fetchWeather(){const e=document.getElementById("cool-weather");if(e){e.textContent="Loading...",GM_xmlhttpRequest({method:"GET",url:`https://wttr.in/${encodeURIComponent(settings.weatherLocation)}?format=j1`,onload:t=>{try{const n=JSON.parse(t.responseText).current_condition[0];e.textContent=`${n.weatherDesc[0].value}, ${n.temp_C}°C`}catch(n){e.textContent="Weather error"}},onerror:()=>e.textContent="API failed"})}}};
    const SettingsUIManager={
        injectHeaderButton(){const c=document.getElementById('serenity-theme-button'),t=document.querySelector('[class*="toolbar_"]');if(t&&!c){const h=t.querySelector('a[href*="support.discord.com"]'),a=h?h.parentElement:t.lastChild;if(!a)return;const b=document.createElement('button');b.id='serenity-theme-button';b.className=a.className;b.setAttribute('aria-label','Theme Settings');b.setAttribute('title','Theme Settings');b.setAttribute('type','button');b.innerHTML=`<div class="contents"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M14.24,2.29C15,2.07 15.8,2 16.63,2C19.5,2 22,4.42 22,7.29C22,8.68 21.5,10 20.69,11L14.63,17.06C13.88,17.81 12.75,18.13 11.7,17.88L5.24,19.95L6.05,18.23L8.12,11.7C7.87,10.65 8.19,9.5 8.94,8.76L11,6.7L14.24,2.29M12.91,8.08L6.85,14.14L5.96,15.03L5.68,15.31C5.5,15.5 5.5,15.81 5.68,16L7.4,17.71C7.59,17.9 7.9,17.9 8.08,17.71L8.36,17.43L9.25,16.54L15.31,10.47L12.91,8.08Z"/></svg></div>`;b.onclick=()=>this.openSettingsModal();a.parentElement.insertBefore(b,a);}},
        openSettingsModal(){if(document.getElementById('serenity-modal-backdrop'))return;const b=document.createElement('div');b.id='serenity-modal-backdrop';const m=document.createElement('div');m.id='serenity-modal-content';m.innerHTML=`<button id="serenity-close-modal">×</button><h2>Serenity Theme Settings</h2><div class="category"><h4>Background Style</h4><select name="backgroundType"><option value="stardust">Stardust Field</option><option value="grid">Kinetic Grid</option></select></div><div class="category"><h4>Color Palette</h4><div class="color-grid"><label>Accent<input type="color" name="accentColor"></label><label>Text<input type="color" name="textColor"></label><label>Glass<input type="color" name="glassColorValue">Opacity <input type="range" name="glassColorOpacity" min="0.1" max="1" step="0.05"></label></div></div><div class="category"><h4>Widget Modules</h4><div class="checkbox-grid"><label><input type="checkbox" name="widget.clock"> Clock</label><label><input type="checkbox" name="widget.date"> Date</label><label><input type="checkbox" name="widget.weather"> Weather</label><label><input type="checkbox" name="widget.ping"> Ping</label></div><input type="text" name="weatherLocation" placeholder="Weather Location" style="margin-top:10px;width:100%;box-sizing:border-box;"></div><button id="serenity-save">Save & Apply</button>`;b.appendChild(m);document.body.appendChild(b);this.loadCurrentSettingsToUI(m);b.onclick=(e)=>{if(e.target===b)this.closeSettingsModal();};m.querySelector('#serenity-close-modal').onclick=()=>this.closeSettingsModal();m.querySelector('#serenity-save').onclick=(e)=>{const s=e.target;s.textContent="Applying...";s.disabled=true;const h=h=>h.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m,r,g,b)=>`#${r+r}${g+g}${b+b}`).substring(1).match(/.{2}/g).map(x=>parseInt(x,16));const n={widget:{}};n.backgroundType=m.querySelector('[name="backgroundType"]').value;n.accentColor=m.querySelector('[name="accentColor"]').value;n.textColor=m.querySelector('[name="textColor"]').value;n.glassColor=`rgba(${h(m.querySelector('[name="glassColorValue"]').value).join(',')},${m.querySelector('[name="glassColorOpacity"]').value})`;for(const k in DEFAULTS.widget){n.widget[k]=m.querySelector(`[name="widget.${k}"]`).checked;}n.weatherLocation=m.querySelector('[name="weatherLocation"]').value;GM_setValue("serenitySettings_v27",n);settings=n;applyTheme();WidgetManager.init();BackgroundManager.start(settings.backgroundType);setTimeout(()=>{this.closeSettingsModal();}, 500);};},
        closeSettingsModal(){const e=document.getElementById('serenity-modal-backdrop');if(e)e.remove();},
        loadCurrentSettingsToUI(modal){modal.querySelector('[name="backgroundType"]').value=settings.backgroundType;modal.querySelector('[name="accentColor"]').value=settings.accentColor;modal.querySelector('[name="textColor"]').value=settings.textColor;const rgb=settings.glassColor.match(/\d+(\.\d+)?/g);const hex=rgb?`#${parseInt(rgb[0]).toString(16).padStart(2,'0')}${parseInt(rgb[1]).toString(16).padStart(2,'0')}${parseInt(rgb[2]).toString(16).padStart(2,'0')}`:'#0c0a16';modal.querySelector('[name="glassColorValue"]').value=hex;modal.querySelector('[name="glassColorOpacity"]').value=rgb?rgb[3]:.6;for(const key in settings.widget){const checkbox=modal.querySelector(`[name="widget.${key}"]`);if(checkbox)checkbox.checked=settings.widget[key];}modal.querySelector('[name="weatherLocation"]').value=settings.weatherLocation;}
    };

    // --- INITIALIZATION ---
    applyTheme();
    BackgroundManager.start(settings.backgroundType);
    WidgetManager.init();
    new MutationObserver(()=>SettingsUIManager.injectHeaderButton()).observe(document.body,{childList:true,subtree:true});

})();