Inscription nouvelle saison

{source}<html>
<head>
</head><body>

<p> Les inscriptions pour la saison <strong>2026-2027</strong> sont désormais ouvertes à tous les collectifs. </p>

<p style="font-size: 0.85em;"> <strong>NB :</strong> À partir du week-end des forums des <strong>5 et 6 septembre</strong>, les inscriptions en ligne seront suspendues. </p>

<!-- ============================= --> <!-- AVANT DE S'INSCRIRE --> <!-- ============================= -->

<div style="margin: 25px 0; padding: 15px 20px; border-left: 4px solid #444; background-color: #f5f5f5;">

<p style="margin: 0 0 8px 0; font-size: 1.1em;"> <strong>Avant de vous inscrire</strong> </p>

<p style="margin: 0;"> Consultez le planning pour connaître les <strong>horaires et lieux d'entraînement</strong> de votre groupe : <br> <a href="/index.php/entrainements/planning-des-entrainements" target="_self"> <strong>→ VOIR LES HORAIRES ET LES LIEUX D'ENTRAÎNEMENT</strong> </a> </p> </div>

<!-- ============================= --> <!-- PLACES DISPONIBLES --> <!-- ============================= -->

<p> <strong>Places disponibles par groupe</strong> </p> <p style="font-size: 0.9em;"> Consultez les places encore disponibles avant de commencer votre inscription. </p>

<!-- INSÉRER ICI TON TABLEAU / GRAPHIQUE DES PLACES DISPONIBLES -->

 


<?php
// on se connecte à MySQL
$conn = mysqli_connect('valleem78.mysql.db', 'valleem78', 'VcVb2020BdDsItE', 'valleem78');

$M05 = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M05'")->num_rows;
$M07 = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M07'")->num_rows;
$M09 = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M09'")->num_rows;
$M11 = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M11'")->num_rows;
$M13M = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M13' AND cb_sexe = 'Masculin'")->num_rows;
$M13F = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M13' AND cb_sexe = 'Feminin'")->num_rows;

$AdoDeb = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND (cb_groupe = 'M15-deb' OR cb_groupe = 'M18-deb')")->num_rows;
$M15Deb = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M15-deb'")->num_rows;
$M18Deb = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M18-deb'")->num_rows;
$M15M = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M15' AND cb_sexe = 'Masculin'")->num_rows;
$M15F = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M15' AND cb_sexe = 'Feminin'")->num_rows;
$M18M = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M18' AND cb_sexe = 'Masculin'")->num_rows;
$M18F = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'M18' AND cb_sexe = 'Feminin'")->num_rows;
$SM6 = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'CompetSeniorMasc6' AND cb_sexe = 'Masculin'")->num_rows;
$SF6 = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'CompetSeniorFem6' AND cb_sexe = 'Feminin'")->num_rows;
$LC1M = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'LoisirCompet1' AND cb_sexe = 'Masculin'")->num_rows;
$LC1F = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'LoisirCompet1' AND cb_sexe = 'Feminin'")->num_rows;

$LC2M = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'LoisirCompet2' AND cb_sexe = 'Masculin'")->num_rows;
$LC2F = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'LoisirCompet2' AND cb_sexe = 'Feminin'")->num_rows;

$SM4 = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'CompetSeniorMasc4' AND cb_sexe = 'Masculin'")->num_rows;
$SF4 = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'CompetSeniorFem4' AND cb_sexe = 'Feminin'")->num_rows;
$LO = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'Loisir'")->num_rows;

$SO = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'Soft'")->num_rows;
$AduDeb = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui' AND cb_groupe = 'Adultes-deb'")->num_rows;

$Total = $conn->query("SELECT * FROM joo4590_comprofiler where cb_engagement_saison_2627 = 'oui'")->num_rows;
?>

<style>
/* =========================================================
INSCRIPTIONS - GRAPHIQUE COMPACT ET RESPONSIVE
========================================================= */

.inscriptions-widget {
width: 100%;
max-width: 800px;
margin: 20px auto;
padding: 0 5px;
font-family: Arial, Helvetica, sans-serif;
color: #252a2f;
box-sizing: border-box;
}

.inscriptions-widget *,
.inscriptions-widget *::before,
.inscriptions-widget *::after {
box-sizing: border-box;
}

/* =========================================================
CATEGORIES
========================================================= */

.group-category {
margin-bottom: 13px;
}

.category-title {
display: flex;
align-items: center;
gap: 8px;

margin: 0 0 5px 1px;

font-size: 1.25rem;
font-weight: 700;

color: #044cd0;

text-transform: uppercase;
letter-spacing: .05em;
}

.category-title::after {
content: "";

height: 1px;
flex: 1;

background: #e3e6e9;
}

/* =========================================================
LISTE DES GROUPES
========================================================= */

.groups-list {
display: flex;
flex-direction: column;
gap: 4px;
}

/* =========================================================
LIGNE D'UN GROUPE
========================================================= */

.group-row {
padding: 6px 8px;

border: 1px solid #e8eaec;
border-radius: 7px;

background: #fff;

transition:
background .15s ease,
border-color .15s ease,
box-shadow .15s ease;
}

.group-row:hover,
.group-row.is-highlighted {
background: #fafbfb;
border-color: #fff;
box-shadow: 0 2px 7px rgba(0,0,0,.05);
}

/* =========================================================
CONTENU DE LA LIGNE
========================================================= */

.group-info {
display: flex;
align-items: center;
gap: 9px;
}

/* =========================================================
NOM + BADGE
========================================================= */

.group-name-container {
width: 245px;
min-width: 245px;

display: flex;
align-items: center;
gap: 7px;
}

.group-name {
font-size: .78rem;
font-weight: 600;
line-height: 1.15;
}

/* =========================================================
BADGES
========================================================= */

.group-badge {
display: inline-flex;
align-items: center;
justify-content: center;

padding: 2px 6px;

border-radius: 10px;

font-size: .58rem;
font-weight: 700;
line-height: 1.2;

white-space: nowrap;
text-transform: uppercase;
}

.badge-ok {
background: #e9f5ee;
color: #287348;
}

.badge-warning {
background: #fff3df;
color: #a66700;
}

.badge-danger {
background: #fdeaea;
color: #b73531;
}

.badge-full {
background: #eb2c17;
color: #f8f9faff;
}

/* =========================================================
BARRE
========================================================= */

.group-bar {
position: relative;

height: 13px;

flex: 1;

overflow: hidden;

border-radius: 5px;

background: #e9ecef;
}

.group-filled {
position: absolute;

left: 0;
top: 0;

height: 100%;

min-width: 0;

border-radius: 5px;

transition: width .35s ease;
}

/* =========================================================
COULEURS DES BARRES
========================================================= */

.status-ok .group-filled {
background: #2e8b57;
}

.status-warning .group-filled {
background: #e6a23c;
}

.status-danger .group-filled {
background: #d9534f;
}

.status-full {
background: #f2f3f4;
}

.status-full .group-filled {
width: 100% !important;
background: #343a40;
}

/* =========================================================
COMPTEUR
========================================================= */

.group-count {
width: 65px;
min-width: 65px;

text-align: right;

white-space: nowrap;

font-size: .72rem;
color: #69727a;
}

.group-count strong {
font-size: .78rem;
color: #252a2f;
}

/* =========================================================
LEGENDE
========================================================= */

.inscriptions-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;

margin-bottom: 14px;
padding: 8px 10px;

background: #f6f7f8;
border-radius: 8px;

font-size: .72rem;
color: #5f6870;
}

.legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}

.legend-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 9px;
}

.legend-good {
background: #2e8b57;
}

.legend-warning {
background: #e6a23c;
}

.legend-danger {
background: #d9534f;
}

.legend-full {
background: #343a40;
}

/* =========================================================
TOTAL
========================================================= */

.inscriptions-total {
display: flex;
align-items: center;
justify-content: space-between;

margin-top: 11px;
padding: 8px 10px;

border-radius: 8px;

background: #f6f7f8;
border: 1px solid #e5e8eb;

font-size: .76rem;
color: #4f5962;
}

.total-number {
font-size: .95rem;
font-weight: 700;
color: #252a2f;
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 650px) {

.inscriptions-widget {
width: 100%;
max-width: 100%;
margin: 15px auto;
padding: 0 3px;
}

.inscriptions-title {
font-size: 1.05rem;
}

.inscriptions-subtitle {
font-size: .74rem;
}

.inscriptions-legend {
gap: 5px 11px;
font-size: .67rem;
}

/* Une ligne :
NOM + BADGE
puis BARRE
puis COMPTEUR */

.group-row {
padding: 7px 8px;
}

.group-info {
display: grid;

grid-template-columns: minmax(0, 1fr) auto;

gap: 5px 8px;
}

.group-name-container {
width: auto;
min-width: 0;

grid-column: 1;
grid-row: 1;

min-width: 0;
}

.group-name {
font-size: .76rem;
}

.group-badge {
font-size: .55rem;
padding: 2px 5px;
}

.group-bar {
grid-column: 1 / 3;
grid-row: 2;

width: 100%;
height: 10px;
}

.group-count {
width: auto;
min-width: 0;

grid-column: 2;
grid-row: 1;

font-size: .68rem;
}

.group-count strong {
font-size: .73rem;
}

}

/* =========================================================
TRES PETITS TELEPHONES
========================================================= */

@media (max-width: 390px) {

.group-name-container {
gap: 5px;
}

.group-name {
font-size: .72rem;
}

.group-badge {
font-size: .51rem;
padding: 2px 4px;
}

.group-count {
font-size: .65rem;
}

}
</style>

<?php

/* =========================================================
ORGANISATION DES GROUPES
========================================================= */

$groupes = [

'Baby / Jeunes' => [

[
'nom' => 'Baby M05',
'inscrits' => $M05,
'capacite' => 8
],

[
'nom' => 'Baby M07',
'inscrits' => $M07,
'capacite' => 20
],

[
'nom' => 'M09',
'inscrits' => $M09,
'capacite' => 12
],

[
'nom' => 'M11',
'inscrits' => $M11,
'capacite' => 14
],

[
'nom' => 'M13 Fém. Compétition',
'inscrits' => $M13F,
'capacite' => 10
],

[
'nom' => 'M13 Masc. Compétition',
'inscrits' => $M13M,
'capacite' => 10
]

],

'Ados / Jeunes' => [

[
'nom' => 'M15 Fém. Compétition',
'inscrits' => $M15F,
'capacite' => 12
],

[
'nom' => 'M15 Masc. Compétition',
'inscrits' => $M15M,
'capacite' => 12
],

[
'nom' => 'M18 Fém. Compétition',
'inscrits' => $M18F,
'capacite' => 24
],

[
'nom' => 'M18 Masc. Compétition',
'inscrits' => $M18M,
'capacite' => 24
],

[
'nom' => 'M15 M/F Loisir',
'inscrits' => $M15Deb,
'capacite' => 22
],

[
'nom' => 'M18/M21 M/F Loisir',
'inscrits' => $M18Deb,
'capacite' => 14
]

],

'Adultes' => [

[
'nom' => 'Adultes Mixte Loisir',
'inscrits' => $LO,
'capacite' => 30
],

[
'nom' => 'Soft Volley',
'inscrits' => $SO,
'capacite' => 12
],
[
'nom' => 'LoisirCompet 6x6 Mixte (F)',
'inscrits' => $LC1F + $LC2F,
'capacite' => 12
],

[
'nom' => 'LoisirCompet 6x6 Mixte (H)',
'inscrits' => $LC1M + $LC2M,
'capacite' => 20
],

[
'nom' => 'LoisirCompet Fém. 4x4',
'inscrits' => $SF4,
'capacite' => 12
],

[
'nom' => 'Accession Rég. 6x6 Fém.',
'inscrits' => $SF6,
'capacite' => 12
],

[
'nom' => 'LoisirCompet Masc. 4x4',
'inscrits' => $SM4,
'capacite' => 12
],

[
'nom' => 'Accession Rég. 6x6 Masc.',
'inscrits' => $SM6,
'capacite' => 12
]

]

];

?>

<div class="inscriptions-widget">

<!-- =====================================================
TITRE
===================================================== -->

<!-- =====================================================
GROUPES
===================================================== -->

<?php foreach ($groupes as $categorie => $liste): ?>

<div class="group-category">

<!-- Titre de catégorie -->

<div class="category-title">

<?php echo htmlspecialchars(
$categorie,
ENT_QUOTES,
'UTF-8'
); ?>

</div>

<div class="groups-list">

<?php foreach ($liste as $g): ?>

<?php

$nom = $g['nom'];

$inscrits = max(
0,
(int)$g['inscrits']
);

$capacite = (int)$g['capacite'];

$places = max(
0,
$capacite - $inscrits
);

/*
* Pourcentage de remplissage
*/

$pourcentage = $capacite > 0
? min(
100,
($inscrits / $capacite) * 100
)
: 100;

/*
* Détermination automatique du statut
*/

if ($inscrits >= $capacite) {

$status = 'full';

$badge = 'COMPLET';

} elseif ($places == 1) {

$status = 'danger';

$badge = '1 PLACE';

} elseif ($places == 2) {

$status = 'danger';

$badge = '2 PLACES';

} elseif (($places / $capacite) <= 0.35) {

$status = 'warning';

$badge = $places . ' PLACES';

} else {

$status = 'ok';

$badge = $places . ' PLACES';

}

?>

<!-- =================================================
UNE LIGNE
================================================= -->

<div
class="group-row status-<?php echo $status; ?>"
tabindex="0"
>

<div class="group-info">

<!-- Nom + badge -->

<div class="group-name-container">

<span class="group-name">

<?php echo htmlspecialchars(
$nom,
ENT_QUOTES,
'UTF-8'
); ?>

</span>

<span class="group-badge badge-<?php echo $status; ?>">

<?php echo $badge; ?>

</span>

</div>

<!-- Barre -->

<div class="group-bar">

<div
class="group-filled"
style="width: <?php echo $pourcentage; ?>%;"
></div>

</div>

<!-- Nombre inscrits / capacité -->

<div class="group-count">

<strong>
<?php echo $inscrits; ?>
</strong>

/ <?php echo $capacite; ?>

</div>

</div>

</div>

<?php endforeach; ?>

</div>

</div>

<?php endforeach; ?>

<!-- =====================================================
LEGENDE
===================================================== -->

<div class="inscriptions-legend">

<span class="legend-item">
<span class="legend-dot legend-good"></span>
Places disponibles
</span>

<span class="legend-item">
<span class="legend-dot legend-warning"></span>
Presque complet
</span>

<span class="legend-item">
<span class="legend-dot legend-danger"></span>
Dernières places
</span>

<span class="legend-item">
<span class="legend-dot legend-full"></span>
Complet
</span>

</div>

<!-- =====================================================
TOTAL
===================================================== -->

<div class="inscriptions-total">

<span>
Total des inscriptions enregistrées
</span>

<span class="total-number">

<?php echo (int)$Total; ?>

</span>

</div>

</div>

<script>

/*
* Permet de sélectionner une ligne
* au clic / tactile.
*/

(function() {

var rows = document.querySelectorAll('.group-row');

rows.forEach(function(row) {

row.addEventListener('click', function() {

var selected =
row.classList.contains('is-highlighted');

rows.forEach(function(otherRow) {

otherRow.classList.remove(
'is-highlighted'
);

});

if (!selected) {

row.classList.add(
'is-highlighted'
);

}

});

});

})();

</script>

<!-- ============================= --> <!-- LISTE D'ATTENTE --> <!-- ============================= --> 

<div style="margin-top: 20px; padding: 15px 20px; border-left: 4px solid #d9534f; background-color: #f9f9f9;">

<p style="margin: 0 0 8px 0;">
<strong>Groupe complet ?</strong>
</p>

<p style="margin: 0;">
<a href="/index.php/home/actu-club/122-listeattente" target="_self">
<strong>→ INSCRIPTION SUR LA LISTE D'ATTENTE</strong>
</a>
</p>

<p style="margin: 12px 0 0 0; font-size: 0.85em;">
<strong>Important :</strong> si vous vous inscrivez sur liste d'attente,
<u>ne réglez pas la cotisation</u>.
Toute aide (type Pass+) directement envoyée à notre association
ne pourra pas être remboursée.
</p>

</div>

<!-- ============================= --> <!-- COMMENT S'INSCRIRE --> <!-- ============================= -->
<p style="margin-top: 25px;"> <strong>Commencer votre inscription</strong> </p>

<ol> <li> <strong>Membres ayant déjà un compte</strong><br> Mettez à jour votre fiche adhérent : <br> <a href="/index.php/espace-membres/ma-fiche-adherent" target="_self"> <strong>→ FICHE ADHÉRENT</strong> </a> </li> <br> <li> <strong>Nouveaux adhérents</strong><br> Créez votre compte en suivant ce lien : <br> <a href="/index.php/cb-profile/registers" target="_self"> <strong>→ INSCRIPTION</strong> </a> <br> <span style="font-size: 0.85em;"> Un compte par joueur. Pour les mineurs, indiquez les coordonnées mail et téléphone des parents. </span> </li> </ol>

<!-- ============================= --> <!-- FINALISEZ VOTRE INSCRIPTION       --> <!-- ============================= -->

<div style="margin-top: 25px;">

<p>
<strong>Finaliser votre inscription</strong>
</p>

<p style="font-size: 0.9em;">
Pour que votre inscription soit complète et validée :
</p>

<ul style="font-size: 0.85em;">

<li>
<strong>Complétez votre fiche adhérent et réglez la cotisation</strong>
:
<a href="/index.php/home/tarifs" target="_self">
<strong>Tarif / Règlement</strong>
</a>
</li>

<li>
<strong>Demandez votre licence Fédérale avant la reprise</strong>,
selon les modalités de votre groupe :
<a href="/index.php/home/demande-de-licence" target="_self">
<strong>Licences</strong>
</a>
</li>

</ul>

</div>


</body>
</html>
{/source}