Passage en flex
This commit is contained in:
parent
0f43907fa3
commit
3b43a9d6d3
79
index.php
79
index.php
|
|
@ -84,21 +84,17 @@
|
||||||
|
|
||||||
echo "<form action=\"" . htmlspecialchars($_SERVER['PHP_SELF']) . "\" method=\"post\">";
|
echo "<form action=\"" . htmlspecialchars($_SERVER['PHP_SELF']) . "\" method=\"post\">";
|
||||||
echo "<div class=\"formbox\">";
|
echo "<div class=\"formbox\">";
|
||||||
echo "<div class=\"labels\">";
|
echo "<input type=\"hidden\" id=\"captcha_value\" name=\"captcha_value\" value=\"" . $captcha_value . "\">";
|
||||||
echo "<label for=\"nom\">Nom</label>";
|
echo "<label class=\"labels\" for=\"nom\">Nom</label>";
|
||||||
echo "<label for=\"prenom\">Prénom(s)</label>";
|
echo "<input class=\"renseignements\" type=\"text\" id=\"nom\" name=\"nom\" required>";
|
||||||
echo "<label for=\"adresse\">Adresse postale</label>";
|
echo "<label class=\"labels\" for=\"prenom\">Prénom(s)</label>";
|
||||||
echo "<label for=\"mail\">Courriel<b>actuel</b></label>";
|
echo "<input class=\"renseignements\" type=\"text\" id=\"prenom\" name=\"prenom\" required/>";
|
||||||
echo "<label for=\"mailconfirm\">Courriel<b>actuel</b>(confirmation)</label>";
|
echo "<label class=\"labels\" for=\"adresse\">Adresse postale</label>";
|
||||||
echo "</div>";
|
echo "<input class=\"renseignements\" type=\"text\" id=\"adresse\" name=\"adresse\" required/>";
|
||||||
echo "<div class=\"inputs\">";
|
echo "<label class=\"labels\" for=\"mail\">Courriel<b>actuel</b></label>";
|
||||||
echo "<input type=\"hidden\" id=\"captcha_value\" name=\"captcha_value\" value=\"" . $captcha_value . "\">";
|
echo "<input class=\"renseignements\" type=\"email\" id=\"mail\" name=\"mail\" required/>";
|
||||||
echo "<input class=\"renseignements\" type=\"text\" id=\"nom\" name=\"nom\" required>";
|
echo "<label class=\"labels\" for=\"mailconfirm\">Courriel<b>actuel</b>(confirmation)</label>";
|
||||||
echo "<input class=\"renseignements\" type=\"text\" id=\"prenom\" name=\"prenom\" required/>";
|
echo "<input class=\"renseignements\" type=\"email\" id=\"mailconfirm\" name=\"mailconfirm\" required/>";
|
||||||
echo "<input class=\"renseignements\" type=\"text\" id=\"adresse\" name=\"adresse\" required/>";
|
|
||||||
echo "<input class=\"renseignements\" type=\"email\" id=\"mail\" name=\"mail\" required/>";
|
|
||||||
echo "<input class=\"renseignements\" type=\"email\" id=\"mailconfirm\" name=\"mailconfirm\" required/>";
|
|
||||||
echo "</div>";
|
|
||||||
echo "</div>";
|
echo "</div>";
|
||||||
|
|
||||||
echo "<br/><p class=\"a-lec_paragraph\">Un courriel est fourni par l’association à chacun de ses membres. C’est cette adresse qui sera contactée par l’association pour les invitations aux Assemblées Générales et toute information liée à l’association. Si vous ne comptez pas utiliser ce courriel, vous pouvez opter pour une redirection du courrier entrant à l’adresse que vous aurez choisie vers un mail personnel de votre de choix, en
|
echo "<br/><p class=\"a-lec_paragraph\">Un courriel est fourni par l’association à chacun de ses membres. C’est cette adresse qui sera contactée par l’association pour les invitations aux Assemblées Générales et toute information liée à l’association. Si vous ne comptez pas utiliser ce courriel, vous pouvez opter pour une redirection du courrier entrant à l’adresse que vous aurez choisie vers un mail personnel de votre de choix, en
|
||||||
|
|
@ -107,52 +103,43 @@ remplissant le champ Redirection.</p>";
|
||||||
echo "<p class=\"a-lec_paragraph\">Nous proposons également à nos membre de posséder un compte sur notre serveur XMPP afin de faciliter la présence dans nos salons où se déroulent la majorité des activités des commissions et projets de l'association. Votre compte aura la même adresse que votre courriel<b>@a-lec.org</b>.</p><br/>";
|
echo "<p class=\"a-lec_paragraph\">Nous proposons également à nos membre de posséder un compte sur notre serveur XMPP afin de faciliter la présence dans nos salons où se déroulent la majorité des activités des commissions et projets de l'association. Votre compte aura la même adresse que votre courriel<b>@a-lec.org</b>.</p><br/>";
|
||||||
|
|
||||||
echo "<div class=\"formbox\">";
|
echo "<div class=\"formbox\">";
|
||||||
echo "<div class=\"labels\">";
|
echo "<label class=\"labels\" for=\"mailalec\">Courriel<b>@a-lec.org</b>désiré</label>";
|
||||||
echo "<label for=\"mailalec\">Courriel<b>@a-lec.org</b>désiré</label>";
|
echo "<input class=\"renseignements\" type=\"email\" id=\"mailalec\" name=\"mailalec\" required/>";
|
||||||
echo "<label for=\"rediralec\">Redirection vers courriel personnel</label>";
|
echo "<label class=\"labels\" for=\"rediralec\">Redirection vers courriel personnel</label>";
|
||||||
echo "<label for=\"xmppalec\">Compte XMPP<b>@a-lec.org</b></label>";
|
echo "<input class=\"mode\" type=\"checkbox\" id=\"rediralec\" name=\"rediralec\"/>";
|
||||||
echo "</div>";
|
echo "<label class=\"labels\" for=\"xmppalec\">Compte XMPP<b>@a-lec.org</b></label>";
|
||||||
echo "<div class=\"inputs\">";
|
echo "<input class=\"mode\" type=\"checkbox\" id=\"xmppalec\" name=\"xmppalec\"/>";
|
||||||
echo "<input class=\"renseignements\" type=\"email\" id=\"mailalec\" name=\"mailalec\" required/>";
|
|
||||||
echo "<input class=\"mode\" type=\"checkbox\" id=\"rediralec\" name=\"rediralec\"/>";
|
|
||||||
echo "<input class=\"mode\" type=\"checkbox\" id=\"xmppalec\" name=\"xmppalec\"/>";
|
|
||||||
echo "</div>";
|
|
||||||
echo "</div>";
|
echo "</div>";
|
||||||
|
|
||||||
echo "<br/><p class=\"a-lec_paragraph\">Les membres de plein droit versent une cotisation annuelle de 20€. Les personnes dont les ressources sont limitées peuvent bénéficier d’une réduction de 10€. Les membres sont libres d’augmenter ou diminuer le montant de leur cotisation chaque année.</p><br/>";
|
echo "<br/><p class=\"a-lec_paragraph\">Les membres de plein droit versent une cotisation annuelle de 20€. Les personnes dont les ressources sont limitées peuvent bénéficier d’une réduction de 10€. Les membres sont libres d’augmenter ou diminuer le montant de leur cotisation chaque année.</p><br/>";
|
||||||
|
|
||||||
echo "<div class=\"formbox\">";
|
echo "<div class=\"formbox\">";
|
||||||
echo "<div class=\"labels\">";
|
echo "<label class=\"labels\" for=\"cotisation\">Cotisation annuelle</label>";
|
||||||
echo "<label for=\"cotisation\">Cotisation annuelle</label>";
|
|
||||||
echo "<label for=\"mode\">Mode de versement</label>";
|
|
||||||
echo "<label for=\"captcha\">Captcha</label>";
|
|
||||||
echo "</div>";
|
|
||||||
echo "<div class=\"inputs\">";
|
|
||||||
echo "<span class=\"mode_radio\">";
|
echo "<span class=\"mode_radio\">";
|
||||||
echo "<span><input class=\"mode\" type=\"radio\" id=\"cotisation\" name=\"cotisation\" value=\"tarif normal\" required>tarif normal (20€)</input></span>";
|
echo "<span><input class=\"mode\" type=\"radio\" id=\"cotisation\" name=\"cotisation\" value=\"tarif normal\" required>tarif normal (20€)</input></span>";
|
||||||
echo "<span><input class=\"mode\" type=\"radio\" id=\"cotisation\" name=\"cotisation\" value=\"tarif réduit\" required>tarif réduit (10€)</input></span>";
|
echo "<span><input class=\"mode\" type=\"radio\" id=\"cotisation\" name=\"cotisation\" value=\"tarif réduit\" required>tarif réduit (10€)</input></span>";
|
||||||
echo "</span>";
|
echo "</span>";
|
||||||
|
echo "<label class=\"labels\" for=\"mode\">Mode de versement</label>";
|
||||||
echo "<span class=\"mode_radio\">";
|
echo "<span class=\"mode_radio\">";
|
||||||
echo "<span><input class=\"mode\" type=\"radio\" id=\"mode\" name=\"mode\" value=\"virement bancaire\" required>virement bancaire</input></span>";
|
echo "<span><input class=\"mode\" type=\"radio\" id=\"mode\" name=\"mode\" value=\"virement bancaire\" required>virement bancaire</input></span>";
|
||||||
echo "<span><input class=\"mode\" type=\"radio\" id=\"mode\" name=\"mode\" value=\"espèces\" required>espèces</input></span>";
|
echo "<span><input class=\"mode\" type=\"radio\" id=\"mode\" name=\"mode\" value=\"espèces\" required>espèces</input></span>";
|
||||||
echo "<span><input class=\"mode\" type=\"radio\" id=\"mode\" name=\"mode\" value=\"chèque\" required>chèque</input></span>";
|
echo "<span><input class=\"mode\" type=\"radio\" id=\"mode\" name=\"mode\" value=\"chèque\" required>chèque</input></span>";
|
||||||
echo "</span>";
|
echo "</span>";
|
||||||
echo "<img src=\"" . data_uri($captcha_data, 'image/png') . "\" alt=\"Captcha à résoudre\" style=\"display:table-cell;text-align:right;\"/>";
|
echo "<label class=\"labels\" for=\"captcha\">Captcha</label>";
|
||||||
echo "<input class=\"renseignements\" type=\"text\" id=\"captcha\" name=\"captcha\" required/>";
|
echo "<div class=\"captcha_inputs\">";
|
||||||
|
echo "<img src=\"" . data_uri($captcha_data, 'image/png') . "\" alt=\"Captcha à résoudre\" style=\"display:table-cell;text-align:right;\"/>";
|
||||||
|
echo "<input class=\"renseignements\" type=\"text\" id=\"captcha\" name=\"captcha\" required/>";
|
||||||
|
echo "</div>";
|
||||||
echo "</div>";
|
echo "</div>";
|
||||||
echo "</div>";
|
echo "</div>";
|
||||||
|
|
||||||
echo "<br/><p class=\"a-lec_paragraph\">En cliquant sur <b>Valider</b>, j’atteste sur l’honneur que les informations précédemment renseignées sont exactes.</p><p class=\"a-lec_paragraph\">J’atteste sur l’honneur être âgé de 12 ans au moins.</p><p class=\"a-lec_paragraph\">Une autorisation parentale signée est nécessaire pour les mineurs adhérant. Vous pouvez l'envoyer par courriel à <b>secretaire@a-lec.org</b></p><br/>";
|
echo "<br/><p class=\"a-lec_paragraph\">En cliquant sur <b>Valider</b>, j’atteste sur l’honneur que les informations précédemment renseignées sont exactes.</p><p class=\"a-lec_paragraph\">J’atteste sur l’honneur être âgé de 12 ans au moins.</p><p class=\"a-lec_paragraph\">Une autorisation parentale signée est nécessaire pour les mineurs adhérant. Vous pouvez l'envoyer par courriel à <b>secretaire@a-lec.org</b></p><br/>";
|
||||||
|
|
||||||
echo "<div class=\"formbox\">";
|
echo "<div class=\"formbox\">";
|
||||||
echo "<div class=\"labels\">";
|
echo "<label class=\"labels\"><br/></label>";
|
||||||
echo "<label><br/></label>";
|
echo "<input class=\"validation\" type=\"submit\" value=\"Valider\">";
|
||||||
echo "</div>";
|
echo "</div>";
|
||||||
echo "<div class=\"inputs\">";
|
echo "</form>";
|
||||||
echo "<input class=\"validation\" type=\"submit\" value=\"Valider\">";
|
|
||||||
echo "</div>";
|
|
||||||
echo "</div>";
|
|
||||||
echo "</form>";
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|
|
||||||
85
styles.css
85
styles.css
|
|
@ -608,90 +608,47 @@ h1,h2,h3,h4,h5,h6 {
|
||||||
========================================================================
|
========================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.tableform {
|
.formbox {
|
||||||
margin-top: 20px;
|
display: flex;
|
||||||
display: table;
|
flex-direction: row;
|
||||||
margin-left: auto;
|
flex-wrap: nowrap;
|
||||||
margin-right: auto;
|
justify-content: center;
|
||||||
width: 80%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableform *{
|
.labels, .inputs{
|
||||||
padding: 5px;
|
display: flex;
|
||||||
margin: 10px;
|
flex-direction: column;
|
||||||
line-height: 20px;
|
flex-wrap: nowrap;
|
||||||
text-justify: none;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableform p {
|
.mode {
|
||||||
display: table-row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tableform label {
|
|
||||||
display: table-cell;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=radio] {
|
|
||||||
all: revert;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox] {
|
|
||||||
all: revert;
|
|
||||||
margin-left: 15px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-symbol-euro {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.input-symbol-euro {
|
|
||||||
margin-left: -5px;
|
|
||||||
padding-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-symbol-euro::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
content:"€";
|
|
||||||
font-size: 120%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tableform .mode {
|
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableform .renseignements {
|
.renseignements {
|
||||||
display: table-cell;
|
|
||||||
border-bottom: 2px solid lightgrey;
|
border-bottom: 2px solid lightgrey;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
padding: 5px;
|
|
||||||
color: black;
|
color: black;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableform .renseignements:focus {
|
.renseignements:focus {
|
||||||
border-bottom: 2px solid var(--a-lec_blue);
|
border-bottom: 2px solid var(--a-lec_blue);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background-color: aliceblue;
|
background-color: aliceblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableform .validation {
|
.validation {
|
||||||
background-color: var(--a-lec_blue);
|
background-color: var(--a-lec_blue);
|
||||||
box-shadow: 3px 3px 5px grey;
|
box-shadow: 3px 3px 5px grey;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: right;
|
|
||||||
margin-bottom: -10px;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableform .validation:focus {
|
.validation:focus {
|
||||||
display: table-cell;
|
|
||||||
background-color: var(--a-lec_red);
|
background-color: var(--a-lec_red);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -699,13 +656,23 @@ input[type=checkbox] {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableform p img {
|
.inputs img {
|
||||||
all: unset;
|
all: unset;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
width: 30vh;
|
width: 30vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=radio] {
|
||||||
|
all: revert;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
all: revert;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
========================================================================
|
========================================================================
|
||||||
LITTLE SCREENS
|
LITTLE SCREENS
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue