Added terms and conditions logic
This commit is contained in:
parent
1c29421f73
commit
795e3b12ce
4 changed files with 92 additions and 12 deletions
|
|
@ -270,7 +270,7 @@ article li:not(:first-of-type){
|
||||||
border: 2px solid white;
|
border: 2px solid white;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.profile .label{
|
.profile .label, #signal-modal label{
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.user-description{
|
.user-description{
|
||||||
|
|
@ -318,11 +318,14 @@ article li:not(:first-of-type){
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0.5em 1.5em;
|
padding: 0.5em 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.btn-cta, .btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary{
|
.btn-cta, .btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary{
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
.btn:disabled, .btn.disabled{
|
||||||
|
background: var(--bs-gray-400);
|
||||||
|
color: var(--bs-gray-600);
|
||||||
|
border-color: var(--bs-gray-500);
|
||||||
|
}
|
||||||
/* forms */
|
/* forms */
|
||||||
.lang-select{
|
.lang-select{
|
||||||
max-width: 12em;
|
max-width: 12em;
|
||||||
|
|
@ -342,11 +345,33 @@ ul, ol{
|
||||||
.rounded{
|
.rounded{
|
||||||
--bs-border-radius: 2rem;
|
--bs-border-radius: 2rem;
|
||||||
}
|
}
|
||||||
|
.emphasis{
|
||||||
|
color: var(--bs-link-color);
|
||||||
|
}
|
||||||
|
sup.emphasis{
|
||||||
|
margin-left: 0.125rem;
|
||||||
|
margin-right: 0.125rem;
|
||||||
|
}
|
||||||
|
.validated{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.validated::before{
|
||||||
|
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
/*modals*/
|
/*modals*/
|
||||||
.modal-header{
|
.modal-header{
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
.modal-title{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* footer */
|
/* footer */
|
||||||
footer{
|
footer{
|
||||||
|
|
@ -443,7 +468,7 @@ nav .icon-ui{
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0 .5rem;
|
gap: 0 .5rem;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin: calc(var(--div-padding) / 1.25) auto 0;
|
margin: calc(var(--div-padding) / 3) auto 0;
|
||||||
}
|
}
|
||||||
.offcanvas .user-avatar{
|
.offcanvas .user-avatar{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
|
||||||
3
static/img/icons/check.svg
Normal file
3
static/img/icons/check.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 220 B |
14
static/js/check.js
Normal file
14
static/js/check.js
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
const checkTerms = document.querySelector('#cgv-check');
|
||||||
|
const createAccountButton = document.querySelector('#btnCreateAccount');
|
||||||
|
const readTerms = document.querySelector('#readTerms');
|
||||||
|
console.log(checkTerms, createAccountButton);
|
||||||
|
checkTerms.addEventListener("change", function() {
|
||||||
|
createAccountButton.disabled = !checkTerms.checked;
|
||||||
|
if (checkTerms.checked) {
|
||||||
|
readTerms.classList.add("validated");
|
||||||
|
} else {
|
||||||
|
readTerms.classList.remove("validated");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<link href="static/css/main.css" rel="stylesheet">
|
<link href="static/css/main.css" rel="stylesheet">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon.png">
|
||||||
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
|
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
|
||||||
<script src="static/js/menu.js"></script>
|
<script src="static/js/js.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -3773,13 +3773,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-description">
|
<p class="user-description">
|
||||||
Ich möchte gerne meine Französischkenntnisse verbessern. In meiner Freizeit male bzw. illustriere ich, lese, mache Yoga oder verbringe Zeit in der Natur. Ich komme aus Thun, arbeite aber in Bern. Gerne unterstütze ich dich dabei, deine Deutschkenntnisse zu verbessern.
|
Ich möchte gerne meine Französischkenntnisse verbessern. In meiner Freizeit male bzw. illustriere ich, lese, mache Yoga oder verbringe Zeit in der Natur. Ich komme aus Thun, arbeite aber in Bern. Gerne unterstütze ich dich dabei, deine Deutschkenntnisse zu verbessern.
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="profile-options">
|
<div class="profile-options">
|
||||||
<button type="button" class="btn btn-cta rounded">Proposer un TANDEM</button>
|
<button type="button" class="btn btn-cta rounded">Proposer un TANDEM</button>
|
||||||
<button type="button" class="btn btn-link">Signaler ce profil inapproprié</button>
|
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -3834,13 +3834,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-description">
|
<p class="user-description">
|
||||||
Ich möchte meine Französischkenntnisse v.A. mündlich verbessern um im Berufsalltag ungehemmter und einfacher kommunizieren zu können. Ist eingerostet, da ich es sehr wenig brauchte. Bin 39jährig, mag die Natur und Musik, habe 2 Töchter. Am liebsten möchte ich mich in Persona treffen, aber wir können auch mit online abwechseln. Kann zu Bürozeiten oder Do/Fr nach Feierabend.
|
Ich möchte meine Französischkenntnisse v.A. mündlich verbessern um im Berufsalltag ungehemmter und einfacher kommunizieren zu können. Ist eingerostet, da ich es sehr wenig brauchte. Bin 39jährig, mag die Natur und Musik, habe 2 Töchter. Am liebsten möchte ich mich in Persona treffen, aber wir können auch mit online abwechseln. Kann zu Bürozeiten oder Do/Fr nach Feierabend.
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="profile-options">
|
<div class="profile-options">
|
||||||
<button type="button" class="btn btn-cta rounded" >Proposer un TANDEM</button>
|
<button type="button" class="btn btn-cta rounded" >Proposer un TANDEM</button>
|
||||||
<button type="button" class="btn btn-link">Signaler ce profil inapproprié</button>
|
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -3874,5 +3874,43 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<!-- Modal -->
|
||||||
|
<div class="modal fade" id="signal-modal" tabindex="-1" aria-label="Signaler un utilisateur" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Signaler le profil de<br>{user-pseudo}</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam eget magna aliquet pretium. In eget orci eu turpis commodo cursus.</p>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<label class="form-label">Motif du signalement</label>
|
||||||
|
<select class="form-select">
|
||||||
|
<option selected>Sélectionnez un motif</option>
|
||||||
|
<option>Spam</option>
|
||||||
|
<option>Comportement inapproprié</option>
|
||||||
|
<option>Informations erronées</option>
|
||||||
|
<option>Autre</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3">
|
||||||
|
<label class="form-label">Précisions</label>
|
||||||
|
<textarea name="signal-description" id="signal-description" class="form-control" placeholder="Précisez le motif de signalement" rows="4" maxlength="250"></textarea>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" id="userId" name="userId" value="12345" />
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
|
||||||
|
<button type="button" class="btn btn-primary">Envoyer</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue