Juan
/
lab
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[HTML/CSS] sample test disposition

Browse Source
master
Juan Massuelles 10 months ago
parent 087af4d4c0
commit 0c4b1971cd
7 changed files with 382 additions and 0 deletions
Show Stats Download Patch File Download Diff File

17
new-grid-for-keycloack/README.md
Unescape View File

@ -0,0 +1,17 @@
# CSS pie charts
Recherche sur un positionnement grid flexible
## css build / watch :
```
sass grid.scss:grid.css
```
```
sass --watch grid.scss:grid.css
```

3
new-grid-for-keycloack/_global.scss
Unescape View File

@ -0,0 +1,3 @@
:root{
font-family: sans-serif;
}

96
new-grid-for-keycloack/_main.scss
Unescape View File

@ -0,0 +1,96 @@
/*
.pj-popin-big-authent {
.pj-popin-authent {
max-width: 96rem;
}
.authent-container {
display: grid;
grid-template-columns: 43rem auto;
grid-template-rows: 1fr;
gap: 1px 1px;
grid-template-areas:
"authent-banner authent-footer";
height: 100%;
}
.authent-banner {
background-color:yellow;
grid-area: authent-banner;
padding: 13rem 6rem 6rem;
background-image: url('../images/boussole.svg'), url('../images/coeur.svg'), url('../images/poi.svg');
background-position: -1.6rem -1.6rem,110% 35rem, -10px 104%;
background-size: 15rem, 15rem, 11rem;
}
.authent-footer {
grid-area: authent-footer;
padding: 9rem 4rem 2rem;
}
}
.authent-banner {
background-size: 15rem;
padding: 7rem;
}
.authent-footer {
padding: 14rem;
}
*/
.pj-popin-big-authent {
.pj-popin-authent {
max-width: 96rem;
}
.authent-container {
}
.authent-banner {
background-color:yellow;
}
#kc-content-wrapper {
display: grid;
grid-template-columns: calc(50% - 20px) 40px calc(50% - 20px);
grid-template-rows: 1fr 1fr;
grid-template-areas: "auth-left auth-divide auth-right" "auth-info auth-info auth-info";
height: 100%;
.pj-form {
position: relative;
background-color: azure;
grid-area: auth-right;
}
hr,.hr {
text-align: center;
width:100%;
display: block;
color: transparent;
background-color: transparent;
border:none;
position: relative;
grid-area: auth-divide;
&:before {
content: "";
position: absolute;
display:block;
width:2px;
height: 100%;
left:calc(50% - 1px);
background-color: black;
}
&:after {
color:black;
position: absolute;
content: "OU";
display:block;
background-color: white;
height:40px;
line-height: 40px;
bottom:calc(50% - 20px);
left:0;
right:0;
}
}
#kc-info {
grid-area: auth-info;
}
.social-providers {
position: relative;
grid-area: auth-left;
}
}
}

87
new-grid-for-keycloack/grid.css
Unescape View File

@ -0,0 +1,87 @@
:root {
font-family: sans-serif; }
/*
.pj-popin-big-authent {
.pj-popin-authent {
max-width: 96rem;
}
.authent-container {
display: grid;
grid-template-columns: 43rem auto;
grid-template-rows: 1fr;
gap: 1px 1px;
grid-template-areas:
"authent-banner authent-footer";
height: 100%;
}
.authent-banner {
background-color:yellow;
grid-area: authent-banner;
padding: 13rem 6rem 6rem;
background-image: url('../images/boussole.svg'), url('../images/coeur.svg'), url('../images/poi.svg');
background-position: -1.6rem -1.6rem,110% 35rem, -10px 104%;
background-size: 15rem, 15rem, 11rem;
}
.authent-footer {
grid-area: authent-footer;
padding: 9rem 4rem 2rem;
}
}
.authent-banner {
background-size: 15rem;
padding: 7rem;
}
.authent-footer {
padding: 14rem;
}
*/
.pj-popin-big-authent .pj-popin-authent {
max-width: 96rem; }
.pj-popin-big-authent .authent-banner {
background-color: yellow; }
.pj-popin-big-authent #kc-content-wrapper {
display: grid;
grid-template-columns: calc(50% - 20px) 40px calc(50% - 20px);
grid-template-rows: 1fr 1fr;
grid-template-areas: "auth-left auth-divide auth-right" "auth-info auth-info auth-info";
height: 100%; }
.pj-popin-big-authent #kc-content-wrapper .pj-form {
position: relative;
background-color: azure;
grid-area: auth-right; }
.pj-popin-big-authent #kc-content-wrapper hr, .pj-popin-big-authent #kc-content-wrapper .hr {
text-align: center;
width: 100%;
display: block;
color: transparent;
background-color: transparent;
border: none;
position: relative;
grid-area: auth-divide; }
.pj-popin-big-authent #kc-content-wrapper hr:before, .pj-popin-big-authent #kc-content-wrapper .hr:before {
content: "";
position: absolute;
display: block;
width: 2px;
height: 100%;
left: calc(50% - 1px);
background-color: black; }
.pj-popin-big-authent #kc-content-wrapper hr:after, .pj-popin-big-authent #kc-content-wrapper .hr:after {
color: black;
position: absolute;
content: "OU";
display: block;
background-color: white;
height: 40px;
line-height: 40px;
bottom: calc(50% - 20px);
left: 0;
right: 0; }
.pj-popin-big-authent #kc-content-wrapper #kc-info {
grid-area: auth-info; }
.pj-popin-big-authent #kc-content-wrapper .social-providers {
position: relative;
grid-area: auth-left; }
/*# sourceMappingURL=grid.css.map */

7
new-grid-for-keycloack/grid.css.map
Unescape View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAAA,KAAK;EACH,WAAW,EAAE,UAAU;;ACDzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCE;AAGD,uCAAkB;EACjB,SAAS,EAAE,KAAK;AAIjB,qCAAgB;EACb,gBAAgB,EAAC,MAAM;AAE1B,yCAAoB;EACnB,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,sCAAsC;EAC7D,kBAAkB,EAAE,OAAO;EAC3B,mBAAmB,EAAE,kEAAkE;EACvF,MAAM,EAAE,IAAI;EACV,kDAAS;IACP,QAAQ,EAAE,QAAQ;IAClB,gBAAgB,EAAE,KAAK;IACvB,SAAS,EAAE,UAAU;EAEvB,2FAAO;IACL,UAAU,EAAE,MAAM;IAClB,KAAK,EAAC,IAAI;IACV,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,WAAW;IAClB,gBAAgB,EAAE,WAAW;IAC7B,MAAM,EAAC,IAAI;IACX,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,WAAW;IACtB,yGAAS;MACP,OAAO,EAAE,EAAE;MACX,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAC,KAAK;MACb,KAAK,EAAC,GAAG;MACT,MAAM,EAAE,IAAI;MACZ,IAAI,EAAC,eAAe;MACpB,gBAAgB,EAAE,KAAK;IAEzB,uGAAQ;MACN,KAAK,EAAC,KAAK;MACX,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,IAAI;MACb,OAAO,EAAC,KAAK;MACb,gBAAgB,EAAE,KAAK;MACvB,MAAM,EAAC,IAAI;MACX,WAAW,EAAE,IAAI;MACjB,MAAM,EAAC,gBAAgB;MACvB,IAAI,EAAC,CAAC;MACN,KAAK,EAAC,CAAC;EAGX,kDAAS;IACP,SAAS,EAAE,SAAS;EAEtB,2DAAkB;IAChB,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,SAAS",
"sources": ["_global.scss","_main.scss"],
"names": [],
"file": "grid.css"
}

2
new-grid-for-keycloack/grid.scss
Unescape View File

@ -0,0 +1,2 @@
@import "global";
@import "main";

170
new-grid-for-keycloack/index.html
Unescape View File

@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="grid.css">
<title>Grid</title>
</head>
<body>
<div id="pj-popin-register" class="pj-popin pj-popin-register pj-popin-big-authent" role="dialog">
<div class="pjpopin-overlay pjpopin-closer"></div>
<div class="pj-popin-container pj-popin-authent ">
<a href="https://www.cd.pagesjaunes.fr/close-authentication" role="button" class="button normal-button btn btn_close btn_secondary btn_ico_only pjpopin-closer">
<i class="icon icon-fermer"></i>
<span class="value">Fermer la popin</span>
</a>
<div class="authent-container">
<section class="authent-banner">
<h1 id="kc-page-title" class="sen">
<span class="title-authent">
<span>
Inscription
</span>
<img src="/assets/images/arrow_draw-b6d09d328e.svg" alt="" width="120">
</span>
</h1>
<h2 class="sen marg-btm-m">Créez un compte et profitez de tous nos services</h2>
<p class="marg-btm-s hidden-phone">Accédez à bien plus que des coordonnées&nbsp;:</p>
<p class="hidden-phone marg-btm-m">&nbsp;Accessible depuis tous vos écrans&nbsp;!</p>
<p class="sen">Déjà membre&nbsp;? <a class="pj-connection-link pj-link" href="/auth/realms/pj/login-actions/authenticate?client_id=browsing&amp;tab_id=-xEI09G6C6g" data-pjstats="{&quot;pjscript&quot;: &quot;pa.sendEvent('click.action',{'click_chapter1':'COMPTE_UTILISATEUR','click_chapter2':'authentification','click':'connectez_vous','site_level2':'Compte Utilisateur'}) &quot;}">Connectez-vous&nbsp;!</a></p>
</section>
<section class="authent-footer">
<div id="kc-inner-wrap" class="">
<header class="">
</header>
<div id="kc-content">
<div id="kc-content-wrapper" class="pj-form">
<form id="kc-register-form" class="pj-form" action="https://sso.cd.pagesjaunes.fr/auth/realms/pj/login-actions/registration?session_code=0vlvKsC92yba41YEUQAADneoowvdixEDLG59zV1iaso&amp;execution=bcb687e1-98d2-48ef-84d0-f62585ff0a49&amp;client_id=browsing&amp;tab_id=-xEI09G6C6g" method="post" data-np-autofill-form-type="register" data-np-checked="1" data-np-watching="1">
<div class=" pjinputerase pj-email ">
<div class="">
<label for="register_mail" class="">Email</label>
<input type="text" id="register_mail" class="" name="email" required="required" value="" autocomplete="email" autofocus="" placeholder="nom@email.fr" aria-invalid="false">
</div>
</div>
<div class="">
<div class=" visible-pwd-container pj-password ">
<label for="register_password_first" class="">Mot de passe</label>
<input type="password" id="register_password_first" class="" name="password" autocomplete="off" required="required" placeholder="••••••••••••" aria-invalid="false" data-pjrobustpwd="{&quot;sel&quot;:&quot;#rp-register_password_first&quot;}" data-np-autofill-field-type="newPassword" data-np-uid="95d46918-b078-4e4b-8101-deda1f0906f6"><button type="button" class="icon-preview" data-pjshowpwd="{&quot;sel&quot;:&quot;#register_password_first&quot;,&quot;klass&quot;:&quot;icon-eye_close&quot;,&quot;hiddenlabel&quot;:&quot;Afficher le mot de passe&quot;,&quot;shownlabel&quot;:&quot;Masquer le mot de passe&quot;}" aria-label="Afficher le mot de passe"></button>
<span class="robust-pwd" id="rp-register_password_first">
<span class="level level-1"></span>
<span class="level level-2"></span>
<span class="level level-3"></span>
<span class="level level-4"></span>
<span class="screenreader">Niveau de sécurité</span>
<span class="value faible">Faible</span>
<span class="value moyen">Moyen</span>
<span class="value bon">Bon</span>
<span class="value eleve">Elevé</span>
</span>
<div>
<p class="txt_sm no-margin">Votre mot de passe doit contenir au minimum&nbsp;:</p>
<ul class="txt_sm">
<li>- 8 caractères</li>
<li>- 1 lettre et 1 chiffre</li>
<li>- 1 caractère spécial</li>
</ul>
</div>
<nordpass-icon data-np-uid="95d46918-b078-4e4b-8101-deda1f0906f6"></nordpass-icon></div>
</div>
<div class="">
<div class=" visible-pwd-container pj-password ">
<label for="register_password_second" class="">Confirmez votre mot de passe</label>
<input type="password" id="register_password_second" class="" name="password-confirm" autocomplete="off" required="required" placeholder="••••••••••••" aria-invalid="false" data-pjrobustpwd="{&quot;sel&quot;:&quot;#rp-register_password_second&quot;}" data-np-autofill-field-type="newPassword" data-np-uid="fff0f0d9-7b3a-424b-95a7-18ea89c48a40"><button type="button" class="icon-preview" data-pjshowpwd="{&quot;sel&quot;:&quot;#register_password_second&quot;,&quot;klass&quot;:&quot;icon-eye_close&quot;,&quot;hiddenlabel&quot;:&quot;Afficher le mot de passe&quot;,&quot;shownlabel&quot;:&quot;Masquer le mot de passe&quot;}" aria-label="Afficher le mot de passe"></button>
<span class="robust-pwd" id="rp-register_password_second">
<span class="level level-1"></span>
<span class="level level-2"></span>
<span class="level level-3"></span>
<span class="level level-4"></span>
<span class="screenreader">Niveau de sécurité</span>
<span class="value faible">Faible</span>
<span class="value moyen">Moyen</span>
<span class="value bon">Bon</span>
<span class="value eleve">Elevé</span>
</span>
<nordpass-icon data-np-uid="fff0f0d9-7b3a-424b-95a7-18ea89c48a40"></nordpass-icon></div>
</div>
<div class=" ">
<div id="kc-form-options">
<div class="pj-checkbox">
<input id="register_cgu" name="termsAndConditions" type="checkbox" value="true">
<label for="register_cgu"> J’accepte les conditions générales d’utilisation du
<a id="account_cgu_link" target="_blank" href="https://www.cd.pagesjaunes.fr/infoslegales/cgu-solocal/" rel="noopener" class="pj-link" data-pjstats="{&quot;pjscript&quot;: &quot;pa.sendEvent('click.action',{'click_chapter1':'COMPTE_UTILISATEUR','click_chapter2':'authentification','click':'cgu_solocal','site_level2':'Compte Utilisateur'}) &quot;}" aria-label="Conditions Générales d’Utilisation du compte Solocal">compte</a>
et des
<a id="services_cgu_link" target="_blank" href="https://www.cd.pagesjaunes.fr/infoslegales/cgu-compte/" rel="noopener" class="pj-link" data-pjstats="{&quot;pjscript&quot;: &quot;pa.sendEvent('click.action',{'click_chapter1':'COMPTE_UTILISATEUR','click_chapter2':'authentification','click':'cgu_pagesjaunes','site_level2':'Compte Utilisateur'}) &quot;}" aria-label="Conditions Générales d’Utilisation des services du compte PagesJaunes">services du compte</a>
PagesJaunes.
</label>
</div>
</div>
</div>
<div id="kc-form-options">
<div class="pj-checkbox">
<input id="register_newsletter" name="newsletter" type="checkbox" value="true">
<label for="register_newsletter"> J’accepte de recevoir des communications personnalisées de la part de Solocal, éditeur de PagesJaunes.
</label>
</div>
</div>
<div class="">
<div id="kc-form-buttons" class="">
<button id="btn_register" data-pjstats="{&quot;pjscript&quot;: &quot;pa.sendEvent('click.action',{'click_chapter1':'COMPTE_UTILISATEUR','click_chapter2':'authentification','click':'creation_valider','site_level2':'Compte Utilisateur'}) &quot;}" class="button normal-button btn btn_authent btn_accident btn_primary " type="submit">
Inscrivez-vous par ici !
</button>
</div>
</div>
</form>
<hr>
<div id="kc-social-providers" class="social-providers ">
<h4>Connectez-vous à PagesJaunes </h4>
<ul class="authent-rs ">
<li class="btn-rs-wrap">
<a id="social-google" title="Se connecter avec Google" aria-label="Se connecter avec Google" class="btn btn-rs btn-google " href="/auth/realms/pj/broker/google/login?client_id=browsing&amp;tab_id=-xEI09G6C6g&amp;session_code=0vlvKsC92yba41YEUQAADneoowvdixEDLG59zV1iaso">
<img src="/assets/images/rs/google-bb771a0494.svg" alt="" width="32" height="32">
<span class="value ">Se connecter avec</span>
</a>
</li>
<li class="btn-rs-wrap">
<a id="social-apple" title="Se connecter avec Apple" aria-label="Se connecter avec Apple" class="btn btn-rs btn-apple " href="/auth/realms/pj/broker/apple/login?client_id=browsing&amp;tab_id=-xEI09G6C6g&amp;session_code=0vlvKsC92yba41YEUQAADneoowvdixEDLG59zV1iaso">
<img src="/assets/images/rs/apple-e3930e0e27.svg" alt="" width="32" height="32">
<span class="value ">Se connecter avec</span>
</a>
</li>
</ul>
</div>
<div id="kc-info" class="">
<div id="kc-info-wrapper" class="">
<h2 class="sen">
Déjà membre&nbsp;?<br>
<a class="pj-connection-link pj-link" href="/auth/realms/pj/login-actions/authenticate?client_id=browsing&amp;tab_id=-xEI09G6C6g" data-pjstats="{&quot;pjscript&quot;: &quot;pa.sendEvent('click.action',{'click_chapter1':'COMPTE_UTILISATEUR','click_chapter2':'authentification','click':'connectez_vous','site_level2':'Compte Utilisateur'}) &quot;}">Connectez-vous&nbsp;!</a>
</h2>
<p class="txt_sm" id="legal_mentions">
Nous vous informons que les données personnelles communiquées sont nécessaires pour vous permettre de bénéficier du service et sont strictement destinées à PagesJaunes et ses prestataires. Les données peuvent être transmises à nos prestataires en-dehors de l’Union européenne, desquels nous avons exigé des garanties appropriées de protection des données personnelles. Vous disposez de droits d’accès, de rectification, d’effacement, de portabilité, de limitation, d’opposition, de retrait de votre consentement à tout moment et du droit d’introduire une réclamation auprès d’une autorité de contrôle, ainsi que d’organiser le sort de vos données post-mortem. Vous pouvez exercer ces droits par voie postale à l’adresse PagesJaunes - Data Protection Officer - Citylights, 204, Rond-point du Pont de Sèvres, 92649 Boulogne Billancourt Cedex, ou par courrier électronique à l’adresse <a href="mailto:cil-pjg@pagesjaunes.fr">cil-pjg@pagesjaunes.fr</a>. Un justificatif d’identité pourra vous être demandé. Nous conservons vos données pendant une durée de 3 ans à compter de la dernière trace d’activité sur votre compte.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save