vgaNAR6ta/LOLv333
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: message de bienvenue !!!

Browse Source
This commit is contained in:
vgaNAR6ta
2026-08-04 05:55:01 +02:00
parent 906c3a3ae2
commit af0b014581
8 changed files with 168 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/msg.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
<path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

index.html
+36 -1
View File
@@ -22,7 +22,6 @@
<link rel="icon" type="image/svg" href="./assets/favicon.svg" /> <link rel="icon" type="image/svg" href="./assets/favicon.svg" />
</head> </head>
<body> <body>
<header> <header>
<h1> <h1>
<img id="logo" src="./assets/logo/logo-forme.svg" alt=""> <img id="logo" src="./assets/logo/logo-forme.svg" alt="">
@@ -42,6 +41,39 @@
<main> <main>
<section id="homeContent"> <section id="homeContent">
<!-- MESSAGE DE BIENVENUE -->
<aside>
<button type="button" name="msgBtn" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg">
<svg class="icon" viewBox="0 0 40.19 38.9">
<path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
</svg>
</button>
<div id="msgWindow" popover="auto">
<dialog class="floatingWindow">
<div class="title">
<h4>Bienvenue !</h4>
<button class="iconBtnStyle" popovertarget="msgWindow" 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>
hellooo, <br>
bienvenue sur le site du LOL ^^<br><br>
en ce moment on cherche du monde pour nous aider à faire fonctionner le lieu, le faire évoluer et le péreniser.<br><br>
si jamais ça t'intéresse<br><strong>contacte nous sur Matrix, <br>
ou passe nous voir au local </strong>directement, quand il est ouvert !<br>
</p>
</dialog>
</div>
</aside>
<section id="titleSection" class="solidBox"> <section id="titleSection" class="solidBox">
<h2> <h2>
Hackerspace queer Hackerspace queer
@@ -169,6 +201,9 @@
</article> </article>
</section> </section>
</section> </section>
<video src="/assets/video/close.webm" id="texture" class="closed" autoplay muted loop>
</video>
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video> <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
<canvas class="cute-texture"></canvas> <canvas class="cute-texture"></canvas>
</main> </main>
js/main.js
+4 -5
View File
@@ -15,12 +15,11 @@ loadStatus()
cuteTexture.target.style.visibility = "visible" cuteTexture.target.style.visibility = "visible"
}); });
// ======================================== floating event window // ======================================== floating message window
/* let target = document.querySelector('#msgWindow');
let target = document.querySelector('#posterWindow');
let startTarget = target.querySelector('.posterTitle'); let startTarget = target.querySelector('.title');
console.log('selected target :', startTarget); console.log('selected target :', startTarget);
@@ -53,7 +52,7 @@ document.addEventListener('mouseup', () => {
clicked = false; clicked = false;
}) })
/*
//================================ tentative de gestion des écran tactiles //================================ tentative de gestion des écran tactiles
startTarget.addEventListener('touchstart', (event) => { startTarget.addEventListener('touchstart', (event) => {
startX = event.pageX; startX = event.pageX;
readMe.MD
+6
View File
@@ -20,6 +20,10 @@ 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 * [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] message de bienvenue !!!
* [ ] tester section event avec des vraies affiches !!! * [ ] tester section event avec des vraies affiches !!!
* [x] performance arrière plan avec un shader * [x] performance arrière plan avec un shader
@@ -29,6 +33,8 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont
* [ ] désactiver la video pour les personnes qui veulent pas d'effets visuels * [ ] désactiver la video pour les personnes qui veulent pas d'effets visuels
* [ ] fond video en version dégrdée
* [ ] réglages padding section statut * [ ] réglages padding section statut
# Démarrer un serveur de developpement # Démarrer un serveur de developpement
style/common.css
+13 -6
View File
@@ -45,12 +45,14 @@
height: 16.1px; height: 16.1px;
width: auto; width: auto;
fill: currentColor; fill: currentColor;
pointer-events: none;
} }
.iconBtnStyle:hover{ .iconBtnStyle:hover{
color: var(--back-color); color: var(--back-color);
background-color: var(--main-color); background-color: var(--main-color);
border-color: var(--back-color); border-color: var(--back-color);
animation: none;
} }
.solidBox{ .solidBox{
@@ -111,7 +113,7 @@
} }
.floatingWindow{ .floatingWindow{
position: fixed; position: relative;
z-index: 3333; z-index: 3333;
width: auto; width: auto;
@@ -131,7 +133,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.posterTitle{ .title{
position: relative; position: relative;
top: 0; top: 0;
width: 100%; width: 100%;
@@ -150,8 +152,8 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-left: 33px; padding-left: 16.1px;
padding-right: 16.1px; padding-right: 7.77px;
box-sizing: border-box; box-sizing: border-box;
cursor: move; cursor: move;
@@ -161,8 +163,13 @@
} }
.iconBtnStyle{ .iconBtnStyle{
width: 33px; width: 27px;
height: 33px; height: 27px;
.icon{
height: 13.12px;
width: auto;
}
} }
} }
style/default.css
+4 -1
View File
@@ -26,7 +26,6 @@ p,h1,h2,h3,h4{
pointer-events: none !important; pointer-events: none !important;
padding: 0; padding: 0;
margin: 0; margin: 0;
user-select: none;
} }
ul,ol { ul,ol {
@@ -34,3 +33,7 @@ ul,ol {
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
} }
dialog{
padding: 0;
}
style/main.css
+75
View File
@@ -126,6 +126,77 @@ main{
grid-template-columns: 2.5fr 2fr 1fr; grid-template-columns: 2.5fr 2fr 1fr;
grid-template-rows: 1fr 1.5fr; grid-template-rows: 1fr 1.5fr;
aside{
grid-row: 2;
grid-column: 2;
align-self: end;
justify-self: end;
color: var(--main-color);
position: relative;
z-index: 33;
margin-bottom: 13.12px;
margin-right: 13.12px;
#openMsg{
width: 33px;
height: 33px;
animation: float 1.61s infinite;
box-sizing: border-box;
border-radius: 13.12px;
}
#openMsg:hover{
animation: none;
}
#msgWindow{
border-style: none;
background-color: transparent;
position: fixed;
top: 117px;
left: 33px;
animation: none;
z-index: 1312;
margin: 0;
.floatingWindow{
width: 277px;
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;
}
}
}
}
#msgWindow::backdrop{
background-color: var(--back-color);
opacity: .333;
}
}
#titleSection{ #titleSection{
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
@@ -388,6 +459,10 @@ main{
.iconBtnStyle{ .iconBtnStyle{
width: 33px; width: 33px;
height: 33px; height: 33px;
.icon{
transform: rotate(45deg);
}
} }
details{ details{
style/responsive.css
+21
View File
@@ -40,6 +40,18 @@
grid-template-columns: 2fr 2fr 1fr; grid-template-columns: 2fr 2fr 1fr;
grid-template-rows: 0.7fr 2fr; grid-template-rows: 0.7fr 2fr;
aside{
grid-column: 3;
margin-bottom: 33px;
margin-right: 33px;
#msgWindow{
left: unset;
right: 16.1px;;
top: 161px;
}
}
#titleSection{ #titleSection{
height: 110%; height: 110%;
h2{ h2{
@@ -135,7 +147,16 @@
main{ main{
#homeContent{ #homeContent{
aside{
margin-bottom: 77px;
margin-right: 77px;
#msgWindow{
left: unset;
right: 33px;
top: 33vh;
}
}
#titleSection{ #titleSection{
width: 90%; width: 90%;