Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
L
leximpact-socio-fiscal-ui
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
leximpact
Simulateur socio-fiscal
leximpact-socio-fiscal-ui
Commits
9ff9756d
Commit
9ff9756d
authored
1 year ago
by
Dorine Lambinet
Committed by
Toufic Batache
1 year ago
Browse files
Options
Downloads
Patches
Plain Diff
Ajoute section graphiques des cas types
parent
d825720d
No related branches found
No related tags found
1 merge request
!210
Début du travail sur la nouvelle page d'accueil/d'atterrissage du simulateur
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
src/routes/welcome/+page.svelte
+101
-6
101 additions, 6 deletions
src/routes/welcome/+page.svelte
static/welcome-capture-ecran-graphiques-cas-types.png
+0
-0
0 additions, 0 deletions
static/welcome-capture-ecran-graphiques-cas-types.png
with
101 additions
and
6 deletions
src/routes/welcome/+page.svelte
+
101
−
6
View file @
9ff9756d
...
@@ -232,11 +232,11 @@
...
@@ -232,11 +232,11 @@
class=
"fond grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white"
class=
"fond grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white"
>
>
<h2
<h2
class=
"justify-self-center text-2xl font-bold col-span-4 text-center
relative z-10
max-w-prose"
class=
"justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose"
>
>
<span
<span
class=
"border-b-2 border-black pb-3 font-serif italic font-light
highlight
"
class=
"border-b-2 border-black pb-3 font-serif italic font-light
relative z-10
"
>
le budgétaire
</span
><span
class=
"highlight"
>
le budgétaire
</span
></span
>
>
<br
/>
<br
/>
<br
/>
<br
/>
...
@@ -292,11 +292,11 @@
...
@@ -292,11 +292,11 @@
class=
"grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-[#E3E4D6]"
class=
"grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-[#E3E4D6]"
>
>
<h2
<h2
class=
"justify-self-center text-2xl font-bold col-span-4 text-center
relative z-10
max-w-prose"
class=
"justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose"
>
>
<span
<span
class=
"border-b-2 border-black pb-3 font-serif italic font-light
highlight
"
class=
"border-b-2 border-black pb-3 font-serif italic font-light
relative z-10
"
>
la feuille de paie
</span
><span
class=
"highlight"
>
la feuille de paie
</span
></span
>
>
<br
/>
<br
/>
<br
/>
<br
/>
...
@@ -334,6 +334,97 @@
...
@@ -334,6 +334,97 @@
</div>
</div>
</div>
</div>
</section>
</section>
<section
class=
"grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-[#D7E2F4]"
>
<h2
class=
"justify-self-center text-2xl font-bold col-span-4 text-center max-w-prose"
>
<span
class=
"border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
><span
class=
"highlight"
>
les graphiques cas types
</span></span
>
<br
/>
<br
/>
Consulter l’évolution du système socio-fiscal d’un cas type selon son salaire
</h2>
<div
class=
"font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
>
<img
class=
"max-h-[500px]"
src=
"welcome-capture-ecran-graphiques-cas-types.png"
/>
</div>
<div
class=
"font-serif text-lg col-span-4 lg:col-span-2"
>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet
laoreet mauris, ut cursus lorem. Sed vitae dolor risus. Ut molestie
imperdiet dapibus. Nulla facilisi. Vivamus laoreet nibh at magna auctor,
eget accumsan er at volutpat. Pellentesque id est pellentesque, aliquam
purus id, ullamcorper lorem. Integer sit amet metus nulla. Vivamus
ullamcorper rutrum erat. Fusce tincidunt augue et effici iaculis.
</span
>
</div>
<div
class=
"col-span-4 grid grid-cols-3 gap-12 bg-[#D7E2F4]"
>
<h3
class=
"justify-self-center text-2xl font-light col-span-3 text-center relative z-10 max-w-prose"
>
Comment accéder à cette fonctionnalité ?
</h3>
<div
class=
" font-serif text-lg col-span-3 lg:col-span-1 justify-self-center lg:justify-self-end"
>
<h4
class=
"relative font-light text-xl font-sans mb-4 text-center z-10"
>
<span
class=
"highlight-grey"
>
1. Sélectionner un cas type
</span>
</h4>
<p
class=
"font-serif text-base text-center"
>
Rendez-vous sur le
<a
href=
"#"
class=
"link text-le-bleu"
>
simulateur
</a
>
, sélectionnez un cas type.
</p>
</div>
<div
class=
" font-serif text-lg col-span-3 lg:col-span-1 justify-self-center lg:justify-self-end"
>
<h4
class=
"relative font-light text-xl font-sans mb-4 text-center z-10"
>
<span
class=
"highlight-grey"
>
2. Cliquer sur l’onglet «
fiche de paie
»
</span
>
</h4>
<p
class=
"font-serif text-base text-center"
>
Vérifiez que vous êtes bien sur l’onglet «
fiche de paie
»
et non sur une vue zoomée sur un seul dispositif.
</p>
</div>
<div
class=
" font-serif text-lg col-span-3 lg:col-span-1 justify-self-center lg:justify-self-end"
>
<h4
class=
"relative font-light text-xl font-sans mb-4 text-center z-10"
>
<span
class=
"highlight-grey"
>
3. Défiler vers le bas et ouvrir l’accordéon
</span
>
</h4>
<p
class=
"font-serif text-base text-center"
>
En bas de la «
fiche de paie
», déplier l’accordéon
«
Voir ce cas type sur un graphique faisant évoluer le
salaire
».
</p>
</div>
<div
class=
"flex justify-center col-span-3"
>
<button
class=
"mt-5 font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase"
title=
"Vers le simulateur budgétaire de l'impôt sur le revenu"
>
Utiliser les graphiques
<iconify-icon
class=
"ml-2 align-[-0.4rem] text-2xl"
icon=
"ri-arrow-right-line"
/>
</button>
</div>
</div>
</section>
</main>
</main>
<style
lang=
"postcss"
>
<style
lang=
"postcss"
>
...
@@ -341,6 +432,10 @@
...
@@ -341,6 +432,10 @@
@apply
relative
before
:
absolute
before
:
-
z-10
before
:
top-1
before
:
bottom-0
before
:
-
left-1
before
:
-
right-4
before
:
bg-le-jaune
before
:
bg-opacity-65
;
@apply
relative
before
:
absolute
before
:
-
z-10
before
:
top-1
before
:
bottom-0
before
:
-
left-1
before
:
-
right-4
before
:
bg-le-jaune
before
:
bg-opacity-65
;
}
}
.highlight-grey
{
@apply
relative
before
:
absolute
before
:
-
z-10
before
:
top-1
before
:
bottom-0
before
:
-
left-1
before
:
-
right-4
before
:
bg-
[
#C5C39C
]
before
:
bg-opacity-65
;
}
.fond
{
.fond
{
background-color
:
#ffffff
;
background-color
:
#ffffff
;
/* Polka dots - Heropatterns.com échelle réduite */
/* Polka dots - Heropatterns.com échelle réduite */
...
...
This diff is collapsed.
Click to expand it.
static/welcome-capture-ecran-graphiques-cas-types.png
0 → 100644
+
0
−
0
View file @
9ff9756d
581 KiB
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment