From 2ed49a5fe1d762cf305ebe84881d88552ce98261 Mon Sep 17 00:00:00 2001 From: vgaNAR6ta Date: Wed, 12 Aug 2026 21:49:33 +0200 Subject: [PATCH] =?UTF-8?q?add=20:=20fenetre=20adhesion=20=20sans=20conten?= =?UTF-8?q?u=20juste=20interactivit=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- affiches/mardis/index.html | 5 +-- index.html | 35 +++++++++++++---- js/floating.js | 34 +++++++++++++++++ js/main.js | 37 ++---------------- readMe.MD | 13 ++++--- style/main.css | 78 ++++++++++++++++++++++++++++++++++++-- style/responsive.css | 3 +- 7 files changed, 150 insertions(+), 55 deletions(-) create mode 100644 js/floating.js diff --git a/affiches/mardis/index.html b/affiches/mardis/index.html index d2aec60..7a3df8a 100644 --- a/affiches/mardis/index.html +++ b/affiches/mardis/index.html @@ -117,17 +117,16 @@

Venez chiller avec nous, partager un thé ou une biere.

-

On échange technique et savoir-faire
sur tous les sujets notamment le logiciel libre, hacking,
couture, bricole et bidouille
mais aussi de nos projets personnels ou collectifs

+

On échange technique et savoir-faire
sur tous les sujets : logiciel libre, hacking,
couture, bricole et bidouille en tout genre,
mais aussi sur nos projets personnels ou collectifs

- Tous les mardis
à partir de 19h + Tous les mardis
à partir de 18h
au local du LOL

-

Adhésion conseillée (prix libre)

diff --git a/index.html b/index.html index d789f17..9c8ee5c 100644 --- a/index.html +++ b/index.html @@ -91,21 +91,19 @@

Horaires d'ouverture

    -
  1. - Dim. 15h → 23h -
    2. -
  2. - Lun. 15h → 23h -
  3. Mar. 15h → 23h
    4. +
  4. + Sam. 15h → 23h +
- +
@@ -146,7 +144,28 @@ - + + +
+ +
+ +
+

Bienvenue !

+ +
+ +

+ test adhésion +

+ +
+
+
diff --git a/js/floating.js b/js/floating.js new file mode 100644 index 0000000..37d0b2d --- /dev/null +++ b/js/floating.js @@ -0,0 +1,34 @@ +export function makeItFloat(target){ + let startTarget = target.querySelector('.title'); + + console.log('selected target :', startTarget); + + let startX, startY; + let clicked = false; + + startTarget.addEventListener('mousedown', (event) => { + startX = event.pageX; + startY = event.pageY; + clicked = true; + console.log('clicking...') + }) + + document.addEventListener('mousemove', (event) => { + if(clicked){ + 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('mouseup', () => { + console.log('STOP !') + clicked = false; + }) +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index 0a65b71..f5e84b4 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,7 @@ import { loadEvents } from './events.js' import { loadStatus } from './status.js' import { initCuteTexture } from './cuteTexture.js' +import { makeItFloat } from './floating.js'; // ======================================== events & statut d'ouverture loadEvents(); @@ -17,40 +18,8 @@ loadStatus() // ======================================== floating message window -let target = document.querySelector('#msgWindow'); - -let startTarget = target.querySelector('.title'); - -console.log('selected target :', startTarget); - -let startX, startY; -let clicked = false; - -startTarget.addEventListener('mousedown', (event) => { - startX = event.pageX; - startY = event.pageY; - clicked = true; - console.log('clicking...') -}) - -document.addEventListener('mousemove', (event) => { - if(clicked){ - 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('mouseup', () => { - console.log('STOP !') - clicked = false; -}) +makeItFloat(document.querySelector('#msgWindow')); +makeItFloat(document.querySelector('#addUserWindow')); /* //================================ tentative de gestion des écran tactiles diff --git a/readMe.MD b/readMe.MD index 6518b1e..68882e8 100644 --- a/readMe.MD +++ b/readMe.MD @@ -20,11 +20,12 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont * [x] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche -* [ ] auto scale affiche dans son conteneur +* [x] auto scale affiche dans son conteneur +> problème à gérer dans la conception des affiches * [x] message de bienvenue !!! -* [ ] tester section event avec des vraies affiches !!! +* [x] tester section event avec des vraies affiches !!! > problème de cohérence interface / contenu sur pc, le panneau event est très large et dois afficher des affiches format vertical donc très haut si rescale sur width ou très petit si rescale sur hauteur + si format aléatoire je sais pas comment scale * [x] performance arrière plan avec un shader @@ -32,11 +33,13 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont + video noir & blanc au dessus en mix blend difference, opacité 0.777 > FERMÉ : texture grain aléatoire sur G et B, entre 0 - 161, opacité 0.5, hue-rotate 13.12deg -* [ ] désactiver la video pour les personnes qui veulent pas d'effets visuels +* [x] désactiver la video pour les personnes qui veulent pas d'effets visuels -* [ ] fond video en version dégradée + scale video un peu plus grand car bande noire en bas +* [x] fond video en version dégradée + scale video un peu plus grand car bande noire en bas -* [ ] réglages padding section statut +* [x] réglages padding section statut + +* [ ] section adhésion et explication financement # Démarrer un serveur de developpement diff --git a/style/main.css b/style/main.css index df55c6e..d101bae 100644 --- a/style/main.css +++ b/style/main.css @@ -253,7 +253,7 @@ main{ h3{ width: 100%; - padding-bottom: 13.12px; + margin-bottom: 16.1px; font-family: 'karrik'; text-transform: uppercase; @@ -286,7 +286,7 @@ main{ } li{ - margin-bottom: 7.77px; + margin-top: 16.1px; } } } @@ -360,6 +360,65 @@ main{ } } + + #adhesionSection{ + grid-column: 1; + grid-row: 2; + + .textBtnStyle{ + position: relative; + z-index: 33; + width: 90%; + height: 33px; + font-size: 13.12px; + margin: 7.77px; + } + + #addUserWindow{ + border-style: none; + background-color: transparent; + position: fixed; + top: 77px; + left: 16.1px; + animation: none; + z-index: 1312; + margin: 0; + + .floatingWindow{ + width: 333px; + height: auto; + margin-top: 33px; + + text-transform: none; + font-size: 15px; + font-family: 'velvelyne'; + font-weight: bold; + padding-bottom: 13.12px; + border-width: 3.33px; + border-style: double solid solid; + + p{ + padding: 7.77px; + padding-right: 16.1px; + + strong{ + font-family: 'karrik'; + font-weight: normal; + text-transform: uppercase; + font-size: 16.1px; + } + } + } + } + + #addUserWindow::backdrop{ + background-color: var(--back-color); + opacity: .333; + width: 100vw; + height: 100vh; + box-sizing: border-box; + } + } } #statuSection{ @@ -379,7 +438,7 @@ main{ #statusDesc{ width: 77%; padding: 7.77px; - padding-right: 16.1px; + padding-right: 33px; font-size: 16.1px; line-height: 1.1em; @@ -449,10 +508,21 @@ main{ padding-right: 16.1px; h3{ - position: sticky; + position: relative; margin-bottom: 7.77px; } + + article{ + h4{ + padding: 16.1px; + } + + a{ + margin-right: 13.12px; + } + } + .solidBox{ width: 100%; height: auto; diff --git a/style/responsive.css b/style/responsive.css index 151ca1b..dd666d6 100644 --- a/style/responsive.css +++ b/style/responsive.css @@ -102,6 +102,7 @@ #statusDesc{ font-size: 16.1px; + padding-left: 33px; } } @@ -172,6 +173,7 @@ ol{ font-size: 16.1px; + padding-left: 16.1px; strong{ font-size: 22px; } @@ -209,7 +211,6 @@ height: 77px; width: 50%; border-radius: 33px 0 0 33px; - margin-left: -88px; } .textBtnStyle{