add : fenetre adhesion sans contenu juste interactivité

affiches/mardis/index.html

@@ -117,17 +117,16 @@
 
                 <p>Venez chiller avec nous, partager un thé ou une biere.</p>
 
-                <p>On échange technique et savoir-faire<br>sur tous les sujets notamment le logiciel libre, hacking,<br> couture, bricole et bidouille<br> mais aussi de nos projets personnels ou collectifs</p>
+                <p>On échange technique et savoir-faire<br>sur tous les sujets : logiciel libre, hacking,<br> couture, bricole et bidouille en tout genre,<br> mais aussi sur nos projets personnels ou collectifs</p>
             
 
             <p class="event-hours">
                 <span property="eventSchedule" typeof="Schedule">
-                    <data property="byDay" content="Tuesday">Tous les mardis</data><br> à partir de&nbsp;<data property="startTime" content="19:00">19h</data>
+                    <data property="byDay" content="Tuesday">Tous les mardis</data><br> à partir de&nbsp;<data property="startTime" content="18:00">18h</data>
                 </span>
                 <br>
                 <span property="location" href="https://labolyon.fr/">au local du LOL</span>
             </p>
-            <p>Adhésion conseillée (prix libre)</p>
         </div>
     </article>
 </body>

index.html

@@ -91,21 +91,19 @@
           <section id="hourSection" class="solidBox">
             <h3>Horaires d'ouverture</h3>
             <ol>
-                <li>
-                    Dim. <strong>15h &rarr; 23h</strong>
-                </li>
-                <li>
-                    Lun. <strong>15h &rarr; 23h</strong>
-                </li>
                 <li>
                     Mar. <strong>15h &rarr; 23h</strong>
                 </li>
+                <li>
+                    Sam. <strong>15h &rarr; 23h</strong>
+                </li>
             </ol>
-
+            <!-- pour plus tard 
             <h3>Nocturne</h3>
             <ol>
                 <li>Ven. <strong>21h &rarr; 5h</strong></li>
             </ol>
+            -->
           </section>
 
           <address class="transparentBox">
@@ -146,7 +144,28 @@
             <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
                 <img src="./assets/logo_hackerspaces_monde.png">
             </a>
-        </div>
+          </div>
+
+          <div id="adhesionSection">
+            <button class="textBtnStyle" popovertarget="addUserWindow" popoveraction="show">Comment adhérer ?</button>
+            <div id="addUserWindow" popover="auto">
+                        <dialog class="floatingWindow">
+                          <div class="title">
+                            <h4>Bienvenue !</h4>
+                            <button class="iconBtnStyle" popovertarget="addUserWindow" popoveraction="hide">
+                              <svg viewBox="0 0 53.73 53.59" class="icon">
+                                <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+                              </svg>
+                            </button>
+                          </div>
+
+                          <p>
+                            test adhésion
+                          </p>
+                        </dialog>
+              </div>
+          </div>
+
       </section>
 
       <section id="statuSection" class="solidBox">

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;
+    })
+}

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');
+makeItFloat(document.querySelector('#msgWindow'));
-
+makeItFloat(document.querySelector('#addUserWindow'));
-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;
-})
 
 /*
 //================================ tentative de gestion des écran tactiles

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
 

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;

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{