edit: passage en mode off + webring

js/floating.js

@@ -0,0 +1,55 @@
+function deselectAll(){
+    let windowList = document.querySelectorAll('main > .floating');
+    //console.log('selected windows:', windowList);
+    for(const e of windowList){
+        e.setAttribute('data-window', 'background');
+    }
+}
+
+export function makeItFloat(target){
+    const startTarget = target.querySelector('h1');
+
+    //console.log('selected target :', startTarget);
+
+    let startX, startY;
+    let selectedWindow;
+    let selectedPointer;
+
+    startTarget.addEventListener('pointerdown', (event) => {
+        selectedPointer = event.pointerId;
+        startX = event.pageX;
+        startY = event.pageY;
+        selectedWindow = target;
+        deselectAll();
+        target.setAttribute('data-window', 'selected');
+        //console.log('clicking...')
+    })
+
+    document.addEventListener('pointermove', (event) => {
+    if(event.pointerId === selectedPointer && selectedWindow === target){
+        event.preventDefault();
+        document.querySelector('html').style.overflow = 'hidden';
+        //console.log('moving...')
+        let currentX = event.pageX;
+        let currentY = event.pageY;
+        let moveX = target.offsetLeft + currentX - startX;
+        target.style.left =  moveX + 'px';
+        let moveY = target.offsetTop + currentY - startY;
+        target.style.top = moveY + 'px';
+        startX = currentX;
+        startY = currentY;
+    }
+    });
+
+    document.addEventListener('pointerup', () => {
+        //console.log('STOP !')
+        selectedPointer = null;
+        document.querySelector('html').style.overflow = '';
+    })
+
+    document.addEventListener('pointercancel', () => {
+        //console.log('STOP !')
+        selectedPointer = null;
+        document.querySelector('html').style.overflow = '';
+    })
+}

js/main.js

@@ -0,0 +1,13 @@
+import { makeItFloat } from './floating.js'
+import { themeSwitcher } from './theme.js';
+
+//document.documentElement.setAttribute('data-theme', 'dark');
+
+const mainWindow = document.querySelector('main > #seeYouLater');
+
+//const playerWindow = document.querySelector('main > #musicPlayer');
+
+makeItFloat(mainWindow);
+//makeItFloat(playerWindow);
+
+themeSwitcher();

js/theme.js

@@ -0,0 +1,17 @@
+const container = document.querySelector('#colorBtnContainer');
+const themeToggler = container.querySelector('.switch input');
+const background = document.querySelector('aside > #gradient');
+
+export function themeSwitcher(){
+    container.style.visibility = 'visible'
+    console.log('selected switch', themeToggler);
+    themeToggler.addEventListener('change', (event) => {
+        if (event.target.checked){
+            document.documentElement.setAttribute('data-theme', 'light');
+            background.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)';
+        }else{
+           document.documentElement.setAttribute('data-theme', 'dark');
+           background.style.filter = 'unset';
+        }
+    })
+}