643 lines
39 KiB
HTML
643 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Vélo Boom Boom</title>
|
||
<meta name="description" content="Vélo techno pour tous·tes - Festif mais pas naïf - Nantes">
|
||
|
||
<style>
|
||
/* Entrance animations */
|
||
.button-entrance {
|
||
animation-name: popUp;
|
||
animation-duration: 1s;
|
||
animation-fill-mode: both;
|
||
animation-delay: calc(var(--delay) / 10);
|
||
}
|
||
|
||
@keyframes popUp {
|
||
from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
.fadein {
|
||
animation-name: fadein;
|
||
animation-duration: 3s;
|
||
animation-fill-mode: both;
|
||
}
|
||
|
||
@keyframes fadein {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
.button-hover {
|
||
display: inline-block;
|
||
transform: perspective(1px) translateZ(0);
|
||
box-shadow: 0 0 1px rgba(0,0,0,0);
|
||
transition-duration: .1s;
|
||
transition-property: transform;
|
||
}
|
||
.button-hover:active, .button-hover:focus, .button-hover:hover {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.rounded-avatar {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
:root {
|
||
--bgColor: #223344;
|
||
--bgColor2: #090a0f;
|
||
--accentColor: #FFF;
|
||
--font: 'Karla', sans-serif;
|
||
--delay: .3s;
|
||
}
|
||
|
||
.button {
|
||
position: relative;
|
||
background-color: transparent;
|
||
color: var(--accentColor);
|
||
border: solid var(--accentColor) 2px;
|
||
border-radius: 10px;
|
||
font-size: 1rem;
|
||
text-align: center;
|
||
display: block;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
padding: 10px;
|
||
text-decoration: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
@media (hover: hover) {
|
||
.button:hover { background-color: var(--accentColor); color: var(--bgColor); }
|
||
}
|
||
.button:active { background-color: var(--accentColor); color: var(--bgColor); }
|
||
|
||
.icon {
|
||
padding: 0px 8px 3.5px 0px;
|
||
vertical-align: middle;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.container {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
z-index: 2;
|
||
}
|
||
.column {
|
||
position: relative;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
@media (min-width: 400px) { .container { width: 85%; padding: 0; } }
|
||
@media (min-width: 550px) { .container { width: 80%; } }
|
||
|
||
html { font-size: 100%; }
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
min-height: 100vh;
|
||
font-family: var(--font);
|
||
background: radial-gradient(ellipse at bottom, var(--bgColor) 0%, var(--bgColor2) 100%);
|
||
opacity: 0;
|
||
animation: 1s ease-out var(--delay) 1 transitionAnimation;
|
||
animation-fill-mode: forwards;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
position: relative;
|
||
color: #FFFFFF;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* OPTIMISATION : transform: none supprime le contexte de transformation pour le position: fixed */
|
||
@keyframes transitionAnimation {
|
||
0% { opacity: 0; transform: translateY(-10px); }
|
||
100% { opacity: 1; transform: none; }
|
||
}
|
||
|
||
@keyframes animStar {
|
||
from { transform: translateY(0px); }
|
||
to { transform: translateY(-2000px); }
|
||
}
|
||
|
||
h1 {
|
||
font-family: 'Horizon', var(--font);
|
||
white-space: nowrap;
|
||
font-size: clamp(20px, 6.5vw, 46px);
|
||
line-height: 1.2;
|
||
margin-top: 30px;
|
||
margin-bottom: 16px;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
p { margin-top: 0; }
|
||
a { color: #0085FF; text-decoration: none; }
|
||
|
||
/* Scrollbar */
|
||
* { scrollbar-width: thin; scrollbar-color: #171a1d #31363b; }
|
||
*::-webkit-scrollbar { width: 8px; }
|
||
*::-webkit-scrollbar-track { background: #31363b; }
|
||
*::-webkit-scrollbar-thumb { background-color: #171a1d; border-radius: 30px; }
|
||
|
||
/* Parallax Starfield */
|
||
#object1 {
|
||
position: fixed;
|
||
top: 0; left: 0;
|
||
width: 1px;
|
||
height: 1px;
|
||
background: transparent;
|
||
animation: animStar 120s linear infinite;
|
||
z-index: 1;
|
||
box-shadow: 779px 1331px #fff, 2324px 42px #fff, 303px 586px #fff,
|
||
2512px 276px #fff, 451px 625px #fff, 521px 1931px #fff, 2187px 1871px #fff,
|
||
36px 1546px #fff, 132px 934px #fff, 2698px 901px #fff, 1418px 664px #fff,
|
||
2448px 1157px #fff, 1084px 232px #fff, 347px 1776px #fff, 2722px 243px #fff,
|
||
1629px 835px #fff, 479px 969px #fff, 1231px 960px #fff, 2586px 384px #fff,
|
||
164px 527px #fff, 8px 646px #fff, 1150px 1126px #fff, 2665px 1357px #fff,
|
||
1556px 1982px #fff, 2260px 1961px #fff, 1675px 1741px #fff,
|
||
2843px 1514px #fff, 718px 1628px #fff, 242px 1343px #fff, 1497px 1880px #fff,
|
||
2364px 230px #fff, 1739px 1302px #fff, 636px 959px #fff, 304px 686px #fff,
|
||
2614px 751px #fff, 1935px 816px #fff, 1428px 60px #fff, 355px 335px #fff,
|
||
2594px 158px #fff, 90px 60px #fff, 1553px 162px #fff, 1239px 1825px #fff,
|
||
2945px 587px #fff, 749px 1785px #fff, 1987px 1172px #fff, 1301px 1237px #fff,
|
||
2039px 342px #fff, 1585px 1481px #fff, 995px 1048px #fff, 2524px 932px #fff,
|
||
214px 413px #fff, 1701px 1300px #fff, 1037px 1613px #fff, 2871px 996px #fff,
|
||
1360px 1635px #fff, 1110px 1313px #fff, 2412px 1783px #fff, 1949px 177px #fff,
|
||
2903px 1854px #fff, 700px 1936px #fff, 378px 125px #fff, 308px 834px #fff,
|
||
2118px 962px #fff, 1350px 1929px #fff, 781px 1811px #fff, 2561px 137px #fff,
|
||
757px 1148px #fff, 1670px 1979px #fff, 343px 739px #fff, 2145px 795px #fff,
|
||
576px 1903px #fff, 1078px 1436px #fff, 2583px 450px #fff, 1366px 474px #fff,
|
||
2297px 1873px #fff, 192px 162px #fff, 1624px 1633px #fff, 59px 453px #fff,
|
||
2182px 1872px #fff, 1933px 498px #fff, 1966px 1974px #fff, 2975px 1688px #fff,
|
||
779px 314px #fff, 1858px 1543px #fff, 73px 1507px #fff, 1693px 975px #fff,
|
||
2683px 108px #fff, 1768px 1654px #fff, 654px 14px #fff, 494px 171px #fff,
|
||
2689px 1895px #fff, 1660px 263px #fff, 1031px 903px #fff, 2203px 1393px #fff,
|
||
1333px 1421px #fff, 1113px 41px #fff, 1206px 1645px #fff, 2325px 1635px #fff,
|
||
142px 388px #fff, 572px 215px #fff, 1535px 296px #fff, 2419px 407px #fff,
|
||
1379px 1003px #fff, 329px 469px #fff, 1791px 1652px #fff, 2135px 1802px #fff,
|
||
1330px 1820px #fff, 421px 1933px #fff, 828px 365px #fff, 275px 316px #fff,
|
||
2107px 960px #fff, 1605px 1554px #fff, 625px 58px #fff, 717px 1697px #fff,
|
||
2669px 246px #fff, 1925px 322px #fff, 1154px 1803px #fff, 1929px 295px #fff,
|
||
2248px 240px #fff, 1045px 1755px #fff, 166px 942px #fff, 1888px 1773px #fff,
|
||
2678px 1963px #fff, 1370px 569px #fff, 1974px 1400px #fff, 2786px 460px #fff,
|
||
51px 307px #fff, 784px 1400px #fff, 2130px 1258px #fff, 1712px 393px #fff,
|
||
416px 170px #fff, 1797px 1932px #fff, 572px 219px #fff, 1557px 1856px #fff,
|
||
2218px 8px #fff, 348px 1334px #fff, 469px 413px #fff, 2385px 1738px #fff,
|
||
1357px 1818px #fff, 240px 942px #fff, 248px 1847px #fff, 2535px 806px #fff,
|
||
236px 1514px #fff, 1429px 1556px #fff, 73px 1633px #fff, 1398px 1121px #fff,
|
||
2671px 1301px #fff, 1404px 1663px #fff, 740px 1018px #fff, 1600px 377px #fff,
|
||
2785px 514px #fff, 112px 1084px #fff, 1915px 1887px #fff, 1463px 1848px #fff,
|
||
2687px 1115px #fff, 1268px 1768px #fff, 1729px 1425px #fff,
|
||
1284px 1022px #fff, 801px 974px #fff, 1975px 1317px #fff, 1354px 834px #fff,
|
||
2446px 1484px #fff, 1283px 1786px #fff, 11px 523px #fff, 1842px 236px #fff,
|
||
2355px 654px #fff, 429px 7px #fff, 1033px 1128px #fff, 157px 297px #fff,
|
||
2545px 635px #fff, 52px 1080px #fff, 827px 1520px #fff, 1121px 490px #fff,
|
||
9px 309px #fff, 1744px 1586px #fff, 1014px 417px #fff, 1534px 524px #fff,
|
||
2158px 552px #fff, 1403px 1496px #fff, 387px 703px #fff, 1522px 548px #fff,
|
||
2355px 282px #fff, 1532px 601px #fff, 1838px 790px #fff, 290px 259px #fff,
|
||
295px 598px #fff, 1601px 539px #fff, 1561px 1272px #fff, 34px 1922px #fff,
|
||
2024px 543px #fff, 467px 369px #fff, 722px 333px #fff, 1976px 1255px #fff,
|
||
2766px 983px #fff, 1582px 1285px #fff, 12px 512px #fff, 617px 1410px #fff,
|
||
2682px 577px #fff, 1334px 1438px #fff, 439px 327px #fff, 1617px 1661px #fff,
|
||
2673px 129px #fff, 794px 941px #fff, 1386px 1902px #fff, 37px 1353px #fff,
|
||
2467px 1353px #fff, 416px 18px #fff, 187px 344px #fff, 200px 1898px #fff,
|
||
2491px 1619px #fff, 811px 347px #fff, 924px 1827px #fff, 945px 217px #fff,
|
||
2735px 1228px #fff, 379px 1890px #fff, 79px 761px #fff, 825px 1837px #fff,
|
||
1980px 1558px #fff, 1308px 1573px #fff, 1488px 1726px #fff,
|
||
2382px 1208px #fff, 522px 595px #fff, 1277px 1898px #fff, 354px 552px #fff,
|
||
2161px 1784px #fff, 614px 251px #fff, 526px 1576px #fff, 17px 212px #fff,
|
||
2179px 996px #fff, 467px 1208px #fff, 1944px 1838px #fff, 1140px 1093px #fff,
|
||
2858px 1007px #fff, 200px 1064px #fff, 423px 1964px #fff, 1945px 439px #fff,
|
||
2377px 689px #fff, 1120px 1437px #fff, 1876px 668px #fff, 907px 1324px #fff,
|
||
2343px 1976px #fff, 1816px 1501px #fff, 1849px 177px #fff, 647px 91px #fff,
|
||
1984px 1012px #fff, 1336px 1300px #fff, 128px 648px #fff, 305px 1060px #fff,
|
||
2324px 826px #fff, 1263px 1314px #fff, 1801px 629px #fff, 1614px 1555px #fff,
|
||
2634px 90px #fff, 1603px 452px #fff, 891px 1984px #fff, 1556px 1906px #fff,
|
||
2121px 68px #fff, 1676px 1714px #fff, 516px 936px #fff, 1947px 1492px #fff,
|
||
2455px 1519px #fff, 45px 602px #fff, 205px 1039px #fff, 793px 172px #fff,
|
||
2562px 1739px #fff, 1056px 110px #fff, 1512px 379px #fff, 1795px 1621px #fff,
|
||
2848px 607px #fff, 262px 1719px #fff, 477px 991px #fff, 483px 883px #fff,
|
||
2239px 1197px #fff, 1496px 647px #fff, 1649px 25px #fff, 1491px 1946px #fff,
|
||
2119px 996px #fff, 179px 1472px #fff, 1341px 808px #fff, 1565px 1700px #fff,
|
||
2407px 1544px #fff, 1754px 357px #fff, 1288px 981px #fff, 902px 1997px #fff,
|
||
2755px 1668px #fff, 186px 877px #fff, 1202px 1882px #fff, 461px 1213px #fff,
|
||
2400px 748px #fff, 1969px 1899px #fff, 809px 522px #fff, 514px 1219px #fff,
|
||
2374px 275px #fff, 938px 1973px #fff, 357px 552px #fff, 144px 1722px #fff,
|
||
2572px 912px #fff, 402px 1858px #fff, 1544px 1195px #fff, 667px 1257px #fff,
|
||
2727px 1496px #fff, 993px 232px #fff, 1772px 313px #fff, 1040px 1590px #fff,
|
||
2204px 1973px #fff, 1268px 79px #fff, 1555px 1048px #fff, 986px 1707px #fff,
|
||
2978px 1710px #fff, 713px 360px #fff, 407px 863px #fff, 461px 736px #fff,
|
||
2284px 1608px #fff, 103px 430px #fff, 1283px 1319px #fff, 977px 1186px #fff,
|
||
1966px 1516px #fff, 1287px 1129px #fff, 70px 1098px #fff, 1189px 889px #fff,
|
||
2126px 1734px #fff, 309px 1292px #fff, 879px 764px #fff, 65px 473px #fff,
|
||
2003px 1959px #fff, 658px 791px #fff, 402px 1576px #fff, 35px 622px #fff,
|
||
2529px 1589px #fff, 164px 666px #fff, 1876px 1290px #fff, 1541px 526px #fff,
|
||
2270px 1297px #fff, 440px 865px #fff, 1500px 802px #fff, 182px 1754px #fff,
|
||
2124px 892px #fff, 272px 1249px #fff, 1289px 1535px #fff, 190px 1646px #fff,
|
||
2955px 242px #fff, 1456px 1597px #fff, 1727px 1983px #fff, 635px 801px #fff,
|
||
2226px 455px #fff, 1396px 1710px #fff, 849px 1863px #fff, 237px 1264px #fff,
|
||
2839px 140px #fff, 1122px 735px #fff, 1280px 15px #fff, 1318px 242px #fff,
|
||
2819px 1148px #fff;
|
||
}
|
||
|
||
#object1:after {
|
||
content: '';
|
||
position: absolute;
|
||
top: auto;
|
||
width: 1px;
|
||
height: 1px;
|
||
background: transparent;
|
||
box-shadow: inherit;
|
||
}
|
||
|
||
.gallery-container {
|
||
margin-top: 45px;
|
||
margin-bottom: 60px;
|
||
width: 90vw;
|
||
max-width: 2000px;
|
||
position: relative;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* OPTIMISATION : Espacement plus compact sur mobile pour éviter de longs scrolls vides */
|
||
.gallery-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
}
|
||
@media (min-width: 600px) {
|
||
.gallery-grid { gap: 24px; }
|
||
}
|
||
|
||
.gallery-grid img {
|
||
width: 100%;
|
||
aspect-ratio: 4 / 5;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
cursor: zoom-in;
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
}
|
||
|
||
/* Bouton Partager */
|
||
.share-btn {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background-color: transparent;
|
||
color: #ffffff;
|
||
border: solid #ffffff 2px;
|
||
border-radius: 12px;
|
||
font-family: var(--font);
|
||
font-size: 1rem;
|
||
padding: 10px 24px;
|
||
cursor: pointer;
|
||
z-index: 1000;
|
||
-webkit-tap-highlight-color: transparent;
|
||
transition: background-color 0.1s, color 0.1s;
|
||
}
|
||
@media (hover: hover) {
|
||
.share-btn:hover { background-color: #ffffff; color: var(--bgColor); }
|
||
}
|
||
.share-btn:active { background-color: #ffffff; color: var(--bgColor); }
|
||
|
||
/* Modale de zoom et boutons flèches */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
width: 100dvw;
|
||
height: 100dvh;
|
||
background: rgba(0, 0, 0, 0.95);
|
||
z-index: 999999;
|
||
}
|
||
|
||
.modal-content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
max-width: 85vw;
|
||
max-height: 85vh;
|
||
width: auto;
|
||
height: auto;
|
||
object-fit: contain;
|
||
user-select: none;
|
||
}
|
||
.modal-arrow {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
color: #ffffff;
|
||
font-size: 2rem;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000000;
|
||
transition: background 0.2s, transform 0.2s;
|
||
user-select: none;
|
||
}
|
||
.modal-arrow:hover {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
}
|
||
.modal-arrow:active {
|
||
transform: translateY(-50%) scale(0.95);
|
||
}
|
||
.arrow-left { left: 24px; }
|
||
.arrow-right { right: 24px; }
|
||
|
||
@media (max-width: 600px) {
|
||
.modal-content { max-width: 95vw; }
|
||
.modal-arrow { width: 40px; height: 40px; font-size: 1.5rem; }
|
||
.arrow-left { left: 10px; }
|
||
.arrow-right { right: 10px; }
|
||
}
|
||
|
||
.avatar {
|
||
width: 115px;
|
||
height: 115px;
|
||
object-fit: cover;
|
||
margin-top: 40px;
|
||
}
|
||
.bio {
|
||
font-size: 1.05rem;
|
||
line-height: 1.5;
|
||
margin-bottom: 30px;
|
||
padding: 0 15px;
|
||
}
|
||
.bio p { margin-bottom: 10px; }
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="object1"></div>
|
||
|
||
<button id="shareButton" class="share-btn">Partager</button>
|
||
|
||
<div class="container">
|
||
<div class="column">
|
||
|
||
<img class="avatar rounded-avatar fadein" src="assets/img/logo.webp" alt="Avatar" width="115" height="115">
|
||
<h1 class="fadein">Vélo Boom Boom</h1>
|
||
|
||
<div class="bio fadein">
|
||
<p>Vélo techno pour tous·tes - Festif mais pas naïf - Nantes</p>
|
||
<p>🔥 RDV le samedi 27 juin - 20h00 Miroir d'eau 🔥</p>
|
||
<p>Au profit du <a href="https://www.facebook.com/p/Collectif-Colere-Nantes-61556272583272/">collectif COLERE</a> - CRA ? Ni ici, ni ailleurs !</p>
|
||
</div>
|
||
|
||
<div class="links-stack">
|
||
<a class="button button-entrance button-hover" style="--delay: 1s;" href="https://www.helloasso.com/associations/union-syndicale-departementale-solidaires-loire-atlantique/formulaires/2" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/logo_colere.webp" alt="" onerror="this.style.display='none'">
|
||
Je donne ! Cagnotte Colere X VBB x Solidaires 💸
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 2s;" href="https://www.change.org/p/non-%C3%A0-la-construction-d-un-centre-de-r%C3%A9tention-administrative-ni-%C3%A0-nantes-ni-ailleurs" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/logo_colere.webp" alt="" onerror="this.style.display='none'">
|
||
Je signe ! Pétition Colere sur Change.org 📝
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 3s;" href="https://www.registre-dematerialise.fr/7264/" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/logo_colere.webp" alt="" onerror="this.style.display='none'">
|
||
J'écris ! Contribution publique de la préfecture 🏛️
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 4s;" href="https://framaforms.org/volontaire-velo-boom-boom-1757420246" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/veloboomboom.png" alt="" onerror="this.style.display='none'">
|
||
Rejoins l'équipe ! Bonnes volontés bienvenues ☺️
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 5s;" href="https://ko-fi.com/veloboomboom" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/kofi.png" alt="" onerror="this.style.display='none'">
|
||
Un don pour les petites dépenses du collectif ! 🪙
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 6s;" href="https://www.instagram.com/veloboomboom/" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/instagram.png" alt="" onerror="this.style.display='none'">
|
||
Instagram
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 7s;" href="https://www.facebook.com/profile.php?id=61573893787431" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/facebook.png" alt="" onerror="this.style.display='none'">
|
||
Facebook
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 8s;" href="https://www.threads.net/@veloboomboom" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/threads.png" alt="" onerror="this.style.display='none'">
|
||
Threads
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 9s;" href="https://bsky.app/profile/veloboomboom.bsky.social" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/bluesky.png" alt="" onerror="this.style.display='none'">
|
||
Bluesky
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 10s;" href="https://masto.bike/@veloboomboom" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/mastodon.png" alt="" onerror="this.style.display='none'">
|
||
Mastodon
|
||
</a>
|
||
|
||
<a class="button button-entrance button-hover" style="--delay: 11s;" href="https://pixelfed.social/i/web/profile/805027756453858555" target="_blank" rel="noopener">
|
||
<img class="icon" src="assets/icons/pixelfed.svg" alt="" onerror="this.style.display='none'">
|
||
Pixelfed
|
||
</a>
|
||
</div>
|
||
|
||
<div class="gallery-container fadein">
|
||
<div class="gallery-grid">
|
||
<img src="assets/img/Carré171.webp" loading="lazy" alt="Un CRA à Nantes ? Pas une fatalité. Le don financier n'est pas le seul moyen d'aider le collectif COLERE. Tant que la première pierre n'est pas posée, tout est encore possible. Utilisons l'envie de nous rassembler pour faire la fête au service de causes justes !">
|
||
<img src="assets/img/Carré172.webp" loading="lazy" alt="Signons la pétition et la contribution. Liens en bio, sur notre site. Soyons Efficaces. Luttons ensemble.">
|
||
<img src="assets/img/Carré173.webp" loading="lazy" alt="Rappels sécurité : je ne dépasse pas la·e leader. Respect des autres et consos maîtrisées. Priorité piétons, secours, trams. Trottoirs et voies opposées interdits. Je ne traîne pas, restons compacts ! Autogestion, je participe.">
|
||
<img src="assets/img/Carré161.webp" loading="lazy" alt="Veloboomboom épisode 5 ! No one is illegal. Colère nantes : CRA, ni ici, ni ailleurs. Samedi 27 juin, 20h00 miroir d'eau.">
|
||
<img src="assets/img/Carré162.webp" loading="lazy" alt="Colere ? Coordination opposée à l'enfermement et à la répression des étranger.e.s. Un centre de rétention administratif enferme des personnes étrangères sur simple décision administrative jusqu'à 90 jours. Les conditions 'atteignent à l'intimité et à la dignité' d'après la contrôleuse générale des lieux de privation. La France a été condamnée 11 fois par la Cour Européenne des droits de l’Homme (CEDH) pour l’enfermement d’enfants dans les CRA, toujours pratiqué à Mayotte. Dans deux tiers des cas, les personnes enfermées ont été remises en liberté à cause d’irrégularités de droits ou de procédures. De nouveaux CRA sont prévus à Nantes, Dijon, Oissel, Béziers, Aix-en-Pce, Goussainville, Nice, Olivet, Mérignac, Mayotte et Dunkerque. Stop au racisme d'état.">
|
||
<img src="assets/img/Carré163.webp" loading="lazy" alt="Festif mais pas naïf. Mettons en pratique la solidarité internationale entre les peuples et soutenons la lutte contre la criminalisation des personnes étrangères. VBB1 : 1407€, VBB2 : 1300€, VBB3 : 1650€, VBB4 : 1834€ = 6191€. Objectif 2000€ ? Cagnotte en ligne, cash/CB sur place. Refugees welcome !">
|
||
<img src="assets/img/Carré151.webp" loading="lazy" alt="Le 12 avril, c'était la VéloBoomBoom 4 au profit du Projet Résilience Gaza et d'Urgence Palestine Nantes. Alors on voulait vraiment vous remercier beaucoup beaucoup beaucoup...">
|
||
<img src="assets/img/Carré152.webp" loading="lazy" alt="Nous étions 600 participant·es. Record de dons en direct pour Gaza : 1834€ récoltés, soit 3€ par participant·es.">
|
||
<img src="assets/img/Carré153.webp" loading="lazy" alt="La génocide continue ? La lutte aussi. Continuons à donner, manifester, dénoncer. La VéloBoomBoom réaffirme ses valeurs anticolonialistes, antimilitaristes et antiracistes. Prochaine date en juin. Autogestion, donc tu participes ! Lien en bio pour nous rejoindre.">
|
||
<img src="assets/img/Carré141.webp" loading="lazy" alt="Accessible et inclusive : 10km, c'est trop long ? pour faciliter la logistique, point de passage à mi-parcours prévu au parc de la mitrie à Dalby. Pas possible de faire du vélo ? Un triporteur est dispo ! Contacte-nous !">
|
||
<img src="assets/img/Carré142.webp" loading="lazy" alt="Demain, c'est VBB, c'est samedi. Afin d'éviter les départs en vacances et pour toustes celleux qui ne sont pas dispo le vendredi soir, cette fois-ci, c'est samedi !">
|
||
<img src="assets/img/Carré143.webp" loading="lazy" alt="Après-demain, à l'assemblée. Rejoignons les 640000 citoyen·nes qui s'opposent à la criminalisation du soutien à la Palestine. Signons la pétition contre la loi liberticide de Caroline Yadan, députée française lobbyiste de l'Etat d'Israël au parlement.">
|
||
<img src="assets/img/Carré131.webp" loading="lazy" alt="Samedi 11 avril 20h au miroir d'eau : Véloboomboom édition 4 ! Balade autogérée, fête vélorutionnaire, lutte intersectionnelle. Festive, mais pas naïve.">
|
||
<img src="assets/img/Carré132.webp" loading="lazy" alt="Roulons ensemble pour la Palestine libre et contre le génocide. Au profit de Projet Résilience Gaza et Urgence Palestine Nantes, pour la reconstruction.">
|
||
<img src="assets/img/Carré133.webp" loading="lazy" alt="Cagnotte en ligne & dons sur place. Résistance festive, soutien direct, lien bientôt dispo !">
|
||
<img src="assets/img/Carré121.webp" loading="lazy" alt="Le 10 octobre c'était la Véloboomboom avec l'Autre Cantine de Nantes. 1650 euros récoltés et 750 participant·es ! Les dons en nature ont été distribués dès le 11 octobre. Merci à toustes !">
|
||
<img src="assets/img/Carré122.webp" loading="lazy" alt="L'Autre Cantine, c'est zéro subventions et zéros salarié·es. Pour soutenir quotidiennement les plus précaires, iels cherchent dons, bénévoles et conducteurs. C'est 7 jours sur 7 ! 10h-12h récolte des invendus. 13h-15h découpe de légume sauf lundi. 18h-19h chargement du camion. 19h-20h distribution à Talensac. Pour une fois ou régulièrement ! Viens les rencontrer ! 18 rue des Cornulier, côté gare sud à Nantes.">
|
||
<img src="assets/img/Carré123.webp" loading="lazy" alt="La prochaine Véloboomboom ? Bah c'est pas tout de suite. La première année de la VBB, c'est 1400 + 1300 + 1650€ récoltés. 800 + 650 + 750 participant.es. C'est aussi beaucoup d'orga sur peu de personnes. Besoin de souffler, de se réinventer, nous souhaitons plus de participation et moins de simple consommation. Tu veux aider ? Viens discuter ! Sinon, à l'année prochaine.">
|
||
<img src="assets/img/Carré111.webp" loading="lazy" alt="Plus fort·es ensemble ! Tu veux être transporté·e ? Tu peux transporter ? Une sono, pas de cargo ? On vous met en relation ! Contacte-nous.">
|
||
<img src="assets/img/Carré112.webp" loading="lazy" alt="All caissons are beautiful ! Tu as monté ton système son ? Tu cherches comment faire ? On t'ajoute sur la conversation des sonos ! Entraidons-nous.">
|
||
<img src="assets/img/Carré113.webp" loading="lazy" alt="Les enceintes de mamie ! Tu as des hauts-parleurs ou des amplis qui traînent ? N'hésite pas à nous en faire don ! Le son de l'événement repose sur du matériel personnel ! J-4">
|
||
<img src="assets/img/Carré101.webp" loading="lazy" alt="Envie de pédaler ? C'est la rentrée de la teuf ! Véloboomboom 3, le 10 octobre à 20h00 sur la place de la Petite Hollande.">
|
||
<img src="assets/img/Carré102.webp" loading="lazy" alt="Dansons pour l'autre cantine, la cuisine solidaire et militante de nantes. Cagnotte en ligne et sur place déductible à 75%, dons en nature de produits d'hygiène : savon, shampoing, gel douche, dentifrice, brosse à dents, déodorant, rasoir, crème à raser, couche bébé. Produits neufs !">
|
||
<img src="assets/img/Carré103.webp" loading="lazy" alt="L'autre cantine, c'est un lieu ouvert à toustes sans conditions. Une aide aux exilé·es et aux personnes précaires. Plusieurs centaines de repas, vêtements et produits d'hygiène distribués 7 jours sur 7. 500€ de dépenses hebdomadaires, sans subventions ni aides publiques. Lien de la cagnotte en bio, J-16 !">
|
||
<img src="assets/img/Carré91.webp" loading="lazy" alt="Le 13 juin dernier, c'était Vélo Boom Boom pour NOSIG, le centre LGBTQIA+ de Nantes. 650 participant·es et 1300 euros.">
|
||
<img src="assets/img/Carré92.webp" loading="lazy" alt="Merci pour votre fidélité, pour votre générosité, pour les gros sons, pour les grands sourires. Rappel : sans vous, il n'y a pas d'événément.">
|
||
<img src="assets/img/Carré93.webp" loading="lazy" alt="Restez connecté·es ! Tu veux donner un coup de main ? Contacte-nous ! On se retrouve en octobre pour l'épisode 3 de la Vélo Boom Boom. Attention, traversée de sonos sauvages.">
|
||
<img src="assets/img/Carré81.webp" loading="lazy" alt="Allo houston ? On a un problème. Un DJ connu pour son comportement problématique a annoncé publiquement sa participation à notre événement. Malgré nos refus répétés à ce qu'il participe sans consentement à notre événement, ce dernier ne nous répond qu'avec mépris, égocentrisme, provocation et menaces. Il confirme sa venue envers et contre tout et affirme qu'il sera bien accompagné. La VéloBoomBoom porte des valeurs inflexibles. C'est son ADN et sa raison d'être. Nous sommes repartis de zéro pour être libres, militant·es, safes, intersectionnel·les. Pas d'agresseurs. Pas de forceurs. Pas de récupération des fruits de notre projet. Pas d'agresseurs. Pas de forceurs. Pas de récupération des fruits de notre projet. Nous avons besoin de vous.">
|
||
<img src="assets/img/Carré82.webp" loading="lazy" alt="Quand c'est non, c'est non. Agir pour respecter nos principes est difficile. Mais nous sommes prêt·es à sacrifier notre travail par conviction. Si cette personne se présente vendredi, et tant qu'elle sera là : pas de départ.">
|
||
<img src="assets/img/Carré83.webp" loading="lazy" alt="Nous aimons toustes la VéloBoomBoom pour des raisons personnelles, uniques et propres à chacun·es. Il est frustrant de renoncer à la fête. La musique, l'évasion, le vélo et le bonheur de s'amuser ensemble. Nous organisateur·ices ne pouvons rien faire seul·es. Ensemble, nous sommes fort·es. Vendredi, aidez-nous à montrer qu'on ne gagne pas par la force. Défendons notre safe place, toustes uni·es.">
|
||
<img src="assets/img/Carré71.webp" loading="lazy" alt="Vendredi 13 juin 20h00 au miroir d'eau à Nantes. Technoride inclusive 2ème édition. Vélo boom boom, before marche des fiertés.">
|
||
<img src="assets/img/Carré72.webp" loading="lazy" alt="Roulons ensemble pour NOSIG, le centre LBGTQIA+ de Nantes. Association Véloboomboom et NOSIG. NOSIG, c'est de l'accueil, de l'information et de l'orientation des personnes LGBTQIA+ et leur entourage. Sensibilisations contre les discriminations face au risque dépressif et suicidaire. Éducation à la vie sexuelle et affective. Prévention contre le VIH et les ISTs. Préservation de la mémoire LGBTQIA+. Animation de moments de convivialité pour l'épanouissement des LGBTQIA+. Organisation de la marche des fiertés. Lien cagnotte en bio, boîte et TPE sur place.">
|
||
<img src="assets/img/Carré73.webp" loading="lazy" alt="Tu aimes le son ? Nous aussi ! Ramène tes enceintes, même petites ! Tu as du gros son mais pas de quoi le déplacer ? Contacte-nous !">
|
||
<img src="assets/img/Carré61.webp" loading="lazy" alt="L'art du blocage en autogestion : tu souhaites aider la prochaine Vélo Boom Boom ? Découvre comment sécuriser proprement le cortège.">
|
||
<img src="assets/img/Carré62.webp" loading="lazy" alt="Sécu boom boom : où, quand, comment, que dire, que faire ? Remplis le formulaire en bio ou envoie nous un message. Rejoins-nous ! ">
|
||
<img src="assets/img/Carré63.webp" loading="lazy" alt="Petits rappels de sécurité ! Calme, respect, bienveillance en tout circonstance. Trottoirs strictement interdits, voie opposée réservée aux bloqueurs. Priorité piétons, trams, ambulances, pompiers, je préviens les personnes derrière moi.">
|
||
<img src="assets/img/Carré51.webp" loading="lazy" alt="Le 4 avril, c'était 800 participant·es, 1407€ pour le Planning familial de Loire-Atlantique. Merci pour elleux !">
|
||
<img src="assets/img/Carré52.webp" loading="lazy" alt="11,7 kilomètres de fun, merci à vous ! Carte de Nantes avec le parcours de la Véloboomboom édition 1.">
|
||
<img src="assets/img/Carré53.webp" loading="lazy" alt="La suite en juin. Un comportement ou une remarque inaproprié·e ? Quelque chose s'est mal passé le 4 avril ? Tu aurais préféré que ... Une envie, une remarque, une suggestion ? Prends ta plus belle plume et dépose-nous un petit message en privé. Bisous.">
|
||
<img src="assets/img/Carré41.webp" loading="lazy" alt="Foire aux questions et petits conseils : j'ai pas de vélo, je fais comment ? Prends un bicloo, des patins ou un skate !">
|
||
<img src="assets/img/Carré42.webp" loading="lazy" alt="Foire aux questions et petits conseils : J'emmène quoi ? Des lumières pour être visible de nuit, un casque et des bouchons si besoin, des sous pour le planning familial ! La vélo boom boom, c'est demain.">
|
||
<img src="assets/img/Carré43.webp" loading="lazy" alt="Foire aux questions et petits conseils : je suis en retard, je suis perdu ? Télécharge l'application Critical Maps pour localiser le cortège. Rappel, événement autogéré : tu participes à la sécurité !">
|
||
<img src="assets/img/Carré31.webp" loading="lazy" alt="Vélo Boom Boom en toute sécurité. Si des véhicules prioritaires arrivent, je m'écarte rapidement. Je prends la place des voitures sur la route, pas des piétons sur les trottoirs.">
|
||
<img src="assets/img/Carré32.webp" loading="lazy" alt="Fête autogérée. Je bloque, je participle, j'anticipe, j'explique. Je reste calme, je ne provoque pas, je ne mets pas en danger le groupe à cause de mon égo. Si je craque, je passe la main.">
|
||
<img src="assets/img/Carré33.webp" loading="lazy" alt="Je dépasse avec prudence, je m'arrête en me signalant, je ne roule pas sur la voie opposée. Je maîtrise mes consommations pour rester lucide et bienveillant.">
|
||
<img src="assets/img/Carré21.webp" loading="lazy" alt="Une fête militante. La Vélo Boom Boom, c'est l'occasion de réunir le vélo, la fête, la techno, la nuit. C'est aussi celle de soutenir une société plus juste, plus égalitaire et plus inclusive. Nous appelons aux dons pour le Planning Familial 44 !">
|
||
<img src="assets/img/Carré22.webp" loading="lazy" alt="Ton corps, ton choix. Le planning familial, c'est 60 ans de lutte pour une éducation affective et sexuelle, pour une maternité choisie, contre les violences sexistes et sexuelles, pour prévenir le sida et les infections sexuellement transmissibles. Après 1000€ supprimés par la région, défendons ensemble ces droits fondamentaux.">
|
||
<img src="assets/img/Carré23.webp" loading="lazy" alt="Je donne comment ? En ligne jusqu'au 4 avril via le lien https://don.planning-familial.org/loireatlantique-1. Si tu payes des impôts, fais un joli don au planning, qui t'enverra un reçu, que tu peux transmettre aux impôts en 2026 pour recevoir un remboursement des deux tiers de l'état. Sinon, c'est possible en cash le jour J. Des petites cagnottes roulantes seront à ta disposition ! Merci pour elleux ! J-15">
|
||
<img src="assets/img/Carré11.webp" loading="lazy" alt="Annonce de l'évènement Vélo Boom Boom : le 4 avril à 20h au Miroir d'eau à Nantes, une technoride inclusive première édition.">
|
||
<img src="assets/img/Carré12.webp" loading="lazy" alt="Visuel précisant qu'est ce que la Vélo Boom Boom : une balade à vélo en ville, une fête roulante en autogestion, de la techno et des sonos mobiles, une ride festive mais pas naïve, un évènement vélorutionnaire, un soutien aux luttes intersectionnelles.">
|
||
<img src="assets/img/Carré13.webp" loading="lazy" alt="Visuel précisant pour qui est la Vélo Boom Boom : c'est ok pour M.I.N.T. qui est Meuf, Intersexes, Non Binaires, Trans, LGBTQIA+ qui est Lesbiennes, Gays, Bisexuel·les, Trans, Queer, Intersexes, Asexuel·les & Aromantiques, Racisé·es, Handi·es, Allié·es, pour tout âge, toute nationalité et toute confession. Ça n'est pas ok pour les sexistes, fascistes, racistes, homophobes, transphobes, classistes, validistes et Christelle Morançais.">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="imageModal" class="modal">
|
||
<button class="modal-arrow arrow-left" id="prevBtn" aria-label="Image précédente">❮</button>
|
||
<img class="modal-content" id="modalImage" alt="">
|
||
<button class="modal-arrow arrow-right" id="nextBtn" aria-label="Image suivante">❯</button>
|
||
</div>
|
||
|
||
<script>
|
||
// Script Partage
|
||
document.getElementById('shareButton').addEventListener('click', async () => {
|
||
if (navigator.share) {
|
||
try {
|
||
await navigator.share({
|
||
title: document.title,
|
||
text: 'Retrouvez tous les liens et événements de Vélo Boom Boom !',
|
||
url: window.location.href
|
||
});
|
||
} catch (err) {
|
||
console.log('Partage annulé ou erreur:', err);
|
||
}
|
||
} else {
|
||
try {
|
||
await navigator.clipboard.writeText(window.location.href);
|
||
alert('Lien copié dans le presse-papier !');
|
||
} catch (err) {
|
||
console.error('Impossible de copier le lien:', err);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Script Galerie avec Carrousel Modal
|
||
const modal = document.getElementById('imageModal');
|
||
const modalImg = document.getElementById('modalImage');
|
||
const galleryGrid = document.querySelector('.gallery-grid');
|
||
const prevBtn = document.getElementById('prevBtn');
|
||
const nextBtn = document.getElementById('nextBtn');
|
||
|
||
let images = [];
|
||
let currentIndex = 0;
|
||
|
||
if (galleryGrid && modal && modalImg) {
|
||
images = Array.from(galleryGrid.querySelectorAll('img'));
|
||
|
||
const updateModalImage = (index) => {
|
||
currentIndex = index;
|
||
modalImg.src = images[currentIndex].src;
|
||
};
|
||
|
||
galleryGrid.addEventListener('click', (e) => {
|
||
if (e.target.tagName === 'IMG') {
|
||
const index = images.indexOf(e.target);
|
||
updateModalImage(index);
|
||
|
||
// Aligne la modale sur le scroll vertical actuel
|
||
modal.style.top = window.scrollY + 'px';
|
||
modal.setAttribute('style', 'display: flex !important; top: ' + window.scrollY + 'px;');
|
||
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
});
|
||
|
||
prevBtn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
let newIndex = currentIndex - 1;
|
||
if (newIndex < 0) newIndex = images.length - 1;
|
||
updateModalImage(newIndex);
|
||
});
|
||
|
||
nextBtn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
let newIndex = currentIndex + 1;
|
||
if (newIndex >= images.length) newIndex = 0;
|
||
updateModalImage(newIndex);
|
||
});
|
||
|
||
// OPTIMISATION : Fermeture uniquement lors du clic sur le fond sombre (et non sur l'image elle-même)
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal || e.target.id === 'imageModal') {
|
||
modal.style.display = 'none';
|
||
modal.removeAttribute('style');
|
||
document.body.style.overflow = '';
|
||
}
|
||
});
|
||
|
||
// OPTIMISATION : Gestion du balayage (Swipe) sur écran tactile
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
|
||
modal.addEventListener('touchstart', (e) => {
|
||
touchStartX = e.changedTouches[0].screenX;
|
||
}, { passive: true });
|
||
|
||
modal.addEventListener('touchend', (e) => {
|
||
touchEndX = e.changedTouches[0].screenX;
|
||
const swipeDistance = touchStartX - touchEndX;
|
||
|
||
if (swipeDistance > 50) {
|
||
nextBtn.click(); // Glissement vers la gauche -> Image suivante
|
||
} else if (swipeDistance < -50) {
|
||
prevBtn.click(); // Glissement vers la droite -> Image précédente
|
||
}
|
||
}, { passive: true });
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (modal.style.display === 'flex' || modal.style.getPropertyValue('display') === 'flex') {
|
||
if (e.key === 'ArrowLeft') prevBtn.click();
|
||
if (e.key === 'ArrowRight') nextBtn.click();
|
||
if (e.key === 'Escape') {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |