clear: nettoyer
git init : initialisation du git
git add .: tout ajouter
git status : voir les statut changés
git commit -m "description du changement" : préparer l'envoi
git push origin master : lancer l'envoi vers le github
git pull origin master : tirer
git branch: mijery ny branch misy
git checkout -b new : mamorona branch "new"
git stash save "vers une nouvelle branche" : sauver temporairement
rehefa avy manao changement :
git add .
git status : mijery ny zavatra niova
git commit -m "descripition du changement":
git push -u origin new : mandefa azy any am new
mijery ny version taloha
git log : mijery ny version de changement rehetra
commit (chiffre bedebe = copiena)
git checkout (chiffre bedebe collena eto): miova ami'ilay version taloha
Q = mampiseho ny chemain
.ui.dropdown .menu > .item {
background-color: #333 !important;
color: #ccc !important;
border-radius: 0 !important;
}
.ui.dropdown .menu > .item:hover {
background-color: #0070FF !important;
color: #ccc !important;
border-radius: 0 !important;
.ui.dropdown.multiple.active.visible .menu > .item.selected {
color: #ccc !important;
}
je veux que vous ajouter un progress simple dans la div class "pro" qui est a
gauche du formulaire,
le detail du progress : c'est des chiffres, 1-2-3-4-5 dans un div qui ont du
background transparent,
quand le step1 est affiché, le 1 a la classe active qui a le background #0070FF, et
quand le step2 est affiché le 2 est active et ainsi de suite
analyser mon code <!DOCTYPE html>
<html lang="en">
<head>
<title>Praktek</title>
<link rel="icon" type="image/x-icon" href="/assets/img/p.png" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?
family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
/>
<link href="/assets/css/style.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Montserrat&family=Russo+One&display=swap"
rel="stylesheet"
/>
<script>
(function (h, o, t, j, a, r) {
h.hj =
h.hj ||
function () {
(h.hj.q = h.hj.q || []).push(arguments);
};
h._hjSettings = {
hjid: 3887887,
hjsv: 6,
};
a = o.getElementsByTagName("head")[0];
r = o.createElement("script");
r.async = 1;
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
a.appendChild(r);
})(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
</script>
</head>
<body class="bg-commun" data-bs-target=".navbar" data-bs-offset="76">
<a id="arrow-to-top" href="#">
<svg
class="ic-pkt position-fixed bottom-0 end-0 m-3 border mete-border p-2"
xmlns="http://www.w3.org/2000/svg"
height="16"
width="16"
viewBox="0 0 512 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0
45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8
0-45.3l192-192z"
/>
</svg>
</a>
<!--NAVBAR-->
<nav class="navbar navbar-expand-md sticky-top" style="z-index: 9999">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/assets/img/Logo.png" alt="Logo" style="height: 50px" />
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapsibleNavbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a
id="vers-hero"
class="nav-link color-pkt-grey mete-border"
href="index.html#hero"
>Accueil</a
>
</li>
<li class="nav-item">
<a
id="vers-presentation"
class="nav-link color-pkt-grey mete-border"
href="index.html#presentation"
>A propos</a
>
</li>
<li class="nav-item">
<a
id="vers-services"
class="nav-link color-pkt-grey mete-border"
href="index.html#services"
>Nos solutions</a
>
</li>
<li class="nav-item">
<a
id="vers-methodes-technologies"
class="nav-link color-pkt-grey mete-border"
href="index.html#methodes-technologies"
>Méthodes et Technologies</a
>
</li>
<li class="nav-item">
<a
id="vers-contact"
class="nav-link color-pkt-grey mete-border"
href="index.html#contact"
>Contact</a
>
</li>
<li class="nav-item">
<a
id="vers-methodes-technologies"
class="nav-link color-pkt-grey mete-border"
href="offres.html"
>Nous rejoindre</a
>
</li>
</ul>
</div>
</div>
</nav>
<div class="container my-5">
<div class="row">
<div id="go-contact" class="col-md my-auto">
<div id="p-contact" class="text-center pb-3 pro">
<!-- <h2 id="pc1">Un projet à réaliser ou à améliorer ?</h2>
<h2 id="pc2">Besoin d'un développeur ou d'une équipe ?</h2>
<h2 id="pc3">Besoin de conseils ?</h2> -->
<span id="pc4" class="fs-3" style="display: block"
>Contactez-nous !</span
>
<h2 id="pc5">Contactez-nous !</h2>
</div>
</div>
<div class="col-lg-7">
<div
class="container"
style="
background-color: #333;
padding-left: 0px;
padding-right: 0px;
"
>
<div class="progress mb-3" style="border-radius: 0; height: 15px">
<div
class="progress-bar"
role="progressbar"
style="width: 0%"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
>
0%
</div>
</div>
<form class="px-5 pb-4" id="Inscription" action="">
<img src="Logo.png" alt="" width="120px" class="my-4" />
<div id="step1">
<div class="contain mb-4 select-container">
<label class="multiLabel">Quel est votre besoin?</label>
<select
class="multiSelect w-100"
name="multiple[]"
multiple="multiple"
>
<option value="Pack recrutement">Pack recrutement</option>
<option value="Pack essentiel">Pack essentiel</option>
<option value="Développement sur mesure">
Développement sur mesure
</option>
<option value="Conseils gratuits">Conseils gratuits</option>
<option value="Autre">Autre</option>
</select>
</div>
<div class="contain mb-4 select-container">
<label class="singleLabel">Sexe</label>
<select
class="singleSelect"
placeholder=""
autocomplete="off"
>
<option value=""></option>
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
<option value="Ne pas choisir" class="clear">
Ne pas choisir
</option>
</select>
</div>
</div>
<div id="step2" style="display: none">
<div class="input-container mb-4 w-100">
<input
type="text"
id="username"
name="username"
placeholder=" "
/>
<label for="username">Nom d'utilisateur</label>
</div>
<div class="input-container mb-4 w-100">
<input type="email" id="email" name="email" placeholder=" " />
<label for="email">E-mail</label>
</div>
</div>
<div id="step3" style="display: none">
<div class="input-container mb-4 w-100">
<input
type="number"
id="number"
name="number"
placeholder=" "
/>
<label for="number">N° de téléphone</label>
</div>
<div class="input-container mb-4 w-100">
<input
type="text"
id="entreprise"
name="entreprise"
placeholder=" "
/>
<label for="number">Nom de votre entreprise</label>
</div>
</div>
<div id="step4" style="display: none">
<div class="input-container mb-4 w-100">
<div class="d-flex">
<input
type="checkbox"
id="confirm"
name="number"
placeholder=" "
/>
<p class="ms-3 my-auto">
J'accepte les termes et conditions
</p>
</div>
</div>
<div class="input-container mb-4 w-100">
<p>Veulliez sélectionnez un langage :</p>
<div class="d-flex mb-4">
<input
type="radio"
id="fruit"
name="number"
placeholder=" "
value="Python"
/>
<p class="ms-3 my-auto">Python</p>
</div>
<div class="d-flex mb-4">
<input
type="radio"
id="fruit"
name="number"
placeholder=" "
value="java"
/>
<p class="ms-3 my-auto">Java</p>
</div>
<div class="d-flex">
<input
type="radio"
id="fruit"
name="number"
placeholder=" "
value="C/C++"
/>
<p class="ms-3 my-auto">C++/C</p>
</div>
</div>
</div>
<div id="step5" style="display: none">
<div class="input-container mb-4 w-100">
<textarea
name="message"
id="message"
cols="30"
rows="10"
class="w-100"
placeholder=" "
></textarea>
<label for="number">Parlez-vous de votre projet!</label>
</div>
</div>
<!-- Le bouton "Précédent" ne sera pas affiché au début -->
<div class="d-flex justify-content-between position-relative">
<!-- Conteneur pour les boutons -->
<div class="flex-grow-1">
<!-- Conteneur pour le bouton de gauche -->
<button
type="button"
class="btn btn-prev mb-4"
id="prevBtn"
style="display: none"
onclick="prevStep()"
>
< Précédent
</button>
</div>
<div class="text-end">
<!-- Conteneur pour le bouton de droite -->
<button
type="button"
class="btn btn-next mb-4"
id="nextBtn"
onclick="nextStep()"
>
Suivant >
</button>
</div>
</div>
<button
type="submit"
class="btn btn-premier form-control w-100"
id="submitBtn"
style="display: none"
>
Envoyer
</button>
</form>
</div>
</div>
</div>
</div>
<footer class="bg-pkt-dark small pt-5 pb-3">
<div class="container pb-5 border-bottom border-primary mete-border">
<div
class="d-flex flex-sm-row flex-column justify-content-sm-around align-
content-sm-start justify-content-center align-content-center"
>
<div class="mx-auto">
<h4>NOS SERVICES</h4>
<div>Pack Recrutement</div>
<div>Pack essentiel</div>
<div>Développement sur mesure</div>
</div>
<div class="mt-4 d-sm-none"></div>
<div class="mx-auto">
<h4>CONTACT</h4>
<div>Antananarivo, Madagascar</div>
<div>
[email protected]</div>
<div>+261 34 10 768 56</div>
<div class="d-flex">
<a
title="LinkedIn"
href="https://www.linkedin.com/company/praktek-madagascar/"
target="_blank"
>
<svg
class="ic-pkt me-1"
xmlns="http://www.w3.org/2000/svg"
height="23"
width="22"
viewBox="0 0 448 512"
>
<path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480
31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4
416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2
0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-
56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-
34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
/>
</svg>
</a>
<a
title="Facebook"
href="https://web.facebook.com/profile.php?id=61552695715653"
target="_blank"
>
<svg
class="ic-pkt"
xmlns="http://www.w3.org/2000/svg"
height="23"
width="22"
viewBox="0 0 448 512"
>
<path
d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64
64h98.2V334.2H109.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7
6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4
78.2H255V480H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"
/>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="text-center mt-3 color-pkt-blue">
Praktek | Copyright © 2024 | All rights reserved
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/tom-
select.complete.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></
script>
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script
src="https://kit.fontawesome.com/6f45507c0d.js"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.4/lottie.min.js"></
script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></
script>
<script type="module" src="/assets/js/main.js"></script>
<script>
let currentStep = 1;
const totalSteps = 5; // Mettez à jour le nombre total d'étapes
function nextStep() {
if (currentStep < totalSteps) {
document.getElementById(`step${currentStep}`).style.display = "none";
currentStep++;
document.getElementById(`step${currentStep}`).style.display = "block";
document.getElementById("prevBtn").style.display = "block"; // Affiche le
bouton "Précédent" après avoir avancé d'un pas
}
updateProgressBar();
}
function prevStep() {
if (currentStep > 1) {
document.getElementById(`step${currentStep}`).style.display = "none";
currentStep--;
document.getElementById(`step${currentStep}`).style.display = "block";
}
updateProgressBar();
if (currentStep === 1) {
document.getElementById("prevBtn").style.display = "none"; // Cache le
bouton "Précédent" lorsque l'on revient au premier pas
}
}
function updateProgressBar() {
let progressPercentage = ((currentStep - 1) / (totalSteps - 1)) * 100; //
Mettez à jour le calcul de la progression
const progressBar = document.querySelector(".progress-bar");
progressBar.style.width = `${progressPercentage}%`;
progressBar.textContent = `${progressPercentage.toFixed(0)}%`;
if (currentStep === totalSteps) {
document.getElementById("nextBtn").style.display = "none";
document.getElementById("submitBtn").style.display = "block";
} else {
document.getElementById("nextBtn").style.display = "block";
document.getElementById("submitBtn").style.display = "none";
}
}
$(document).ready(function () {
$("#submitBtn").click(function (event) {
event.preventDefault(); // Empêche le comportement par défaut du
formulaire
// Récupérer les valeurs des inputs
let multiValue = $(".multiSelect").val() || [];
let singleValue = $(".singleSelect").val() || "";
let usernameValue = $("#username").val() || "";
let emailValue = $("#email").val() || "";
let numberValue = $("#number").val() || "";
let entrepriseValue = $("#entreprise").val() || "";
let messageValue = $("#message").val() || "";
// Récupérer la valeur des cases à cocher
let confirmValue = $("#confirm").is(":checked");
// Récupérer la valeur du bouton radio sélectionné
let radioValue = "";
$("input[name='number']").each(function () {
if ($(this).is(":checked")) {
radioValue = $(this).val();
}
});
// Convertir la liste d'options sélectionnées en une chaîne de caractères
pour le multi-select
let multiValueString = multiValue.join(", ");
// Afficher les valeurs dans la console dans le format spécifié
console.log("Besoin :", multiValueString);
console.log("Sexe :", singleValue);
console.log("Nom :", usernameValue);
console.log("Email :", emailValue);
console.log("Numero :", numberValue);
console.log("Entreprise :", entrepriseValue);
console.log("Message :", messageValue);
console.log("Confirmation :", confirmValue);
console.log("Langage :", radioValue);
// Réinitialiser le formulaire
$("#Inscription")[0].reset();
});
});
</script>
</body>
</html>
<script>
// Toggle additional button visibility when section is opened or closed
$(".collapse").on("show.bs.collapse", function () {
$(this).parent().find(".btn-postuler").show(300);
});
$(".collapse").on("hide.bs.collapse", function () {
$(this).parent().find(".btn-postuler").hide(300);
});
// Toggle additional button visibility and change button text when section
is opened or closed
$(".collapse").on("show.bs.collapse", function () {
$(this)
.parent()
.find(".btn-link")
.html("Voir moins")
.addClass("btn-moins");
});
$(".collapse").on("hide.bs.collapse", function () {
$(this)
.parent()
.find(".btn-link")
.html("Voir plus")
.removeClass("btn-moins");
});
</script>
