diff --git a/index.html b/index.html index 6703a9b71..9c62a762a 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Syso + Simulateur d'embauche @@ -12,4 +12,24 @@ + + + + + + + diff --git a/source/components/HomeEmbauche.css b/source/components/HomeEmbauche.css new file mode 100644 index 000000000..fe73de644 --- /dev/null +++ b/source/components/HomeEmbauche.css @@ -0,0 +1,465 @@ +#homeEmbauche { + font-weight: 400; + font-size: 18px; +} + +/* Viewport explained here : +http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972?ec_unit=translation-info-language +*/ +@viewport{ + zoom: 1.0; + width: extend-to-zoom; +} +@-ms-viewport{ + width: extend-to-zoom; + zoom: 1.0; +} + +.narrow-screen { + display: none; +} + +#project { + color: white; + position: absolute; + left: 1%; + top: 2%; + display: block; + height: 3em; +} + +#project img { + width: 5em; +} + +#project .name { + display: inline-block; + line-height: 1.3em; + vertical-align: top; + margin-top: 1.2em; + margin-left: 0.6em; + font-weight: 300; + font-size: 125%; + width: 6em; +} +#project .heavy{ + font-weight: 400 +} + +nav ul { + position: absolute; + top: 4%; + right: 6%; + margin: 0; + line-height: 3em; + font-weight: 400; +} + +nav a { + color: white; + text-decoration: none; +} + +nav li { + list-style: none; + display: inline; + padding-left: 1.2em +} + +nav li a { + font-size: 75%; + opacity: 0.85 +} + +nav li a:hover { + opacity: 1 +} + +nav li:first-child { + left: 10% +} + +#splash { + padding: 13em 0 8em; + + background: -webkit-linear-gradient(top,#3C4963 10%,#3C3C63 80%); + background: -moz-linear-gradient(top,#3C4963 10%,#3C3C63 80%); + background: -o-linear-gradient(top,#3C4963 10%,#3C3C63 80%); + background: -ms-linear-gradient(top,#3C4963 10%,#3C3C63 80%); + background: linear-gradient(to bottom,#3C4963 10%,#3C3C63 80%); + + /* Get fancy or not ? + -webkit-box-shadow: 2px 8px 21px -11px rgba(0,0,0,0.75); + -moz-box-shadow: 2px 8px 21px -11px rgba(0,0,0,0.75); + box-shadow: 2px 8px 21px -11px rgba(0,0,0,0.75); + */ +} + +#showcase { + color: white; + width: 70%; + display:block; + margin: auto; +} + +#image-wrap { + display: inline-block; + width: 65%; + padding: 0 1em; + background: white; + border-radius: 3px; + opacity: 0.75; + + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08),0 20px 30px rgba(0,0,0,0.2); + box-shadow: 0 1px 3px rgba(0,0,0,0.08),0 20px 30px rgba(0,0,0,0.2); + + transition: opacity .5s; +} + +#image-wrap:hover { + opacity: 1; +} + +#showcase h1 { + display: inline-block; + width: 25%; + font-size: 250%; + font-weight: 600; + line-height: 1.3em; + vertical-align: top; + text-transform: uppercase; + text-align: left; + + text-shadow: 2px 2px 5px rgba(6, 6, 6, 0.3); + float: right; +} + +@media (max-width: 1366px) { + #showcase h1 { + line-height: 1.2 + } +} + +@media (max-width: 1280px) { + #showcase h1 { + font-size: 215%; + margin: .5em 0; + } +} + +#main-actions { + display: flex; + align-items: center; + justify-content: space-around; + margin: 3em 0; + width: 70%; + line-height: 3em; + max-width: 50em; +} + +#main-actions a { + background: white; + color: #222; + display: inline-block; + font-size: 120%; + padding: 0 .6em; + margin-top: .6em; + border: 1px solid white; + border-radius: .3em; + text-decoration: none; + font-weight: 600; + transition: .3s; +} + +#main-actions > span { + position: relative; +} + +#main-actions > span > span { + border: 1px solid white; + line-height: normal; + position: absolute; + top: -1.2em; + padding: 0 .6em; + border-radius: .1em; + left: 50%; + transform: translateX(-50%) +} +#main-actions a:hover { + background: white; + color: #3C4963; +} + +@media (max-width: 1024px) { + #main-actions { + text-align: center; + } + #splash { + padding-top: 8em; + } + #showcase { + width: 80%; + } + #showcase h1 { + font-size: 210%; + float: none; + width: 100%; + text-align: center; + } + #image-wrap { + width: 95%; + } +} + + +/* Narrow screens */ +@media (max-width: 800px) { + .wide-screen { + display: none; + } + .narrow-screen { + display: block; + } + + #project { + transform: scale(.75); + transform-origin: left; + } + + nav li { + display: block; + } + + nav ul { + display: block; + line-height: 1.5em; + text-align: right; + } + + #splash { + padding: 9em 0 5em; + } + + #showcase { + width: 90%; + } + + #showcase h1 { + font-size: 180%; + } + #image-wrap { + width: 100%; + padding: 0; + } +} + + +/* Mobile screens */ +@media (max-width: 400px) { + #project .name { + display: none; + } +} + +#image-wrap { + position: relative; +} + +#image-wrap>img { + width: 100%; +} +#image-wrap .static, #image-wrap:hover .animated { + display: inline; +} +#image-wrap .animated, +#image-wrap:hover .static, +#image-wrap:hover #play-button { + display: none; +} + +#image-wrap #play-button { + position: absolute; + color: black; + font-size: 3em; + left: 3%; + bottom: 0%; + opacity: 0.1; + /* + border: 1px solid black; + border-radius: 50%; + padding: 0 0.2em 0 0.35em + */ +} + +#homeEmbauche section { + color: rgba(0,0,0,0.6); + padding: 2em 0; + text-align: center; +} + +#homeEmbauche section p { + margin-left: auto; + margin-right: auto; + width: 50em; +} + +@media (max-width: 1024px) { + #homeEmbauche section p, + #homeEmbauche section code { + max-width: 90%; + } +} + +#homeEmbauche section h1 { + margin: 0.2em 0 1em; + font-size: 135%; + color: #3C4963; +} + +#homeEmbauche section em { + font-weight: 600; + font-style: normal; +} + +#homeEmbauche section a { + color: #3C4963 +} + +#homeEmbauche a.button { + display: inline-block; + margin: 1.2em 0 0; + padding: .5em 5%; + color: white; + background: #3C4963; + font-weight: 400; + font-size: 120%; +} +#homeEmbauche a.button:hover { + background: #4C5C7D; +} + +#homeEmbauche section.light { + background: #f8f8f8; + border-top: 1px solid rgba(0,0,0,0.10); + border-bottom: 1px solid rgba(0,0,0,0.10) +} + +#homeEmbauche section#integration p { + width: 40em; + margin-top: 3em; + vertical-align: top; + position: relative; +} +#homeEmbauche section#integration code { + position: relative; + display: inline-block; + font-size: 80%; + width: 40em; + padding: 1em 0em; + background: white; + margin: auto; + margin-bottom: 1em; + + box-shadow: 0 1px 1px rgba(0,0,0,0.05), -1px 1px 1px rgba(0,0,0,0.02); +} + +#homeEmbauche section#integration code em { + font-weight: 300; + color: black; +} + +section#integration code:before { + content: ""; + position: absolute; + top: 0; + right: 0; + border-width: 0 16px 16px 0; + border-style: solid; + border-color: #e8e8e8 #f8f8f8; +} + +#homeEmbauche section#integrations a { + text-decoration: none; +} + + +#homeEmbauche section.dark { + background: #3C4963; + color: white; +} + +#homeEmbauche section.dark h1 { + color: white; + margin-bottom: 3em; +} + +#homeEmbauche h2 { + font-size: 100%; + font-weight: 400; +} + +#homeEmbauche section.dark a { + color: white; +} + +#homeEmbauche section.blocks article { + vertical-align: top; + max-width: 15em; + padding: 0 2%; + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + text-align: center; + margin-bottom: 2em; +} + +#homeEmbauche section.blocks article img { + width: 8em; + height: 8em; + border-radius: 8em +} + +#homeEmbauche section.blocks .question-mark { + display: inline-block; + font-size: 6.5em; + border: 1px solid white; + border-radius: 10em; + width: 1.2em; + height: 1.2em; + line-height: 1.2em +} + +#homeEmbauche section.blocks.extended { + padding-bottom: 0; + border-bottom: none; +} + +#homeEmbauche section.extended .block-wrap { + margin-top: 3em; + width: 100%; +} + + +#homeEmbauche section.extended.blocks article { + padding: 0 5% 2em; + margin-bottom: 0; + font-size: 90%; +} + +#homeEmbauche section.extended.blocks article h2 { + font-weight: 600; + color: #3C4963; +} + +#homeEmbauche section.extended.blocks article p { + display: inline; +} + +#homeEmbauche section.extended.blocks article img { + width: 8em; + border-radius: 0; +} + +#scriptColor { + color: #4A89DC +} diff --git a/source/components/HomeEmbauche.js b/source/components/HomeEmbauche.js new file mode 100644 index 000000000..7776c32b2 --- /dev/null +++ b/source/components/HomeEmbauche.js @@ -0,0 +1,178 @@ +import React, { Component } from 'react' +import './HomeEmbauche.css' + +export default class HomeEmbauche extends Component { + render() { + return ( +
+ +
+
+

Estimer le prix
d'une embauche en France

+
+ Vue animée du simulateur + ▶ + Image du simulateur +
+ +
+
+ + +
+

À propos

+

+ L'incubateur des services numériques du Gouvernement a lancé, le 1ᵉʳ octobre 2014, le développement en mode Startup d’État d’une ressource ouverte de calcul des prélèvements sociaux sur les revenus d'activité en France. +

+

+ Le premier produit, un module d'estimation du prix d'une embauche, peut être intégré facilement et gratuitement par toute organisation sur son site Web. Ce module repose sur le moteur de calcul OpenFisca. +

+

+ Nous encourageons toutes les initiatives d'information sur le coût du travail : ses contreparties, la fiche de paie, les spécificités du droit conventionnel... +

+ Participez à l'évolution du produit + {/*

Notre prochaine rencontre OpenLab aura lieu le mercredi 18 janvier 2017 à 10h, au 86 allée de Bercy, 75012, salle 381-R

*/} +
+ + +
+

Intégrez le module Web

+

+ Intégrez le module en ajoutant une ligne à votre page Web : +

+ + {'<'}script
+ id="script-simulateur-embauche" data-couleur="#4A89DC" src="https://embauche.beta.gouv.fr/modules/v2/dist/simulateur.js"> + {'<'}/script> + +

+ Vous pouvez choisir la couleur principale du module pour le fondre dans le thème visuel de votre page : changez simplement la valeur de data-couleur ci-dessus. Pour la choisir, utilisez notre outil interactif. +

+ +
+ +
+

Ou utilisez l'API

+

+ Intégrez le calcul des prélèvements sociaux très simplement dans votre application +

+ Lire la documentation → +
+ +
+

Quelques intégrations

+ + + + + + + + {/* */} + + + + + + +
+ +
+

Contribuez

+ +

+ Les différentes briques sont ouvertes à la contribution et disponibles gratuitement sous licence libre. + Aidez-nous à les améliorer ! +

+ +
+ + + +
+ +
+
+ ) + } +} diff --git a/source/containers/Home.css b/source/components/HomeSyso.css similarity index 100% rename from source/containers/Home.css rename to source/components/HomeSyso.css diff --git a/source/containers/Home.js b/source/components/HomeSyso.js similarity index 99% rename from source/containers/Home.js rename to source/components/HomeSyso.js index 35e0d1e0f..45936354f 100644 --- a/source/containers/Home.js +++ b/source/components/HomeSyso.js @@ -1,5 +1,5 @@ import React, {Component} from 'react' -import './Home.css' +import './HomeSyso.css' import {searchRules} from '../engine/rules.js' import {Link} from 'react-router-dom' import '../components/Rule.css' diff --git a/source/containers/Layout.js b/source/containers/Layout.js index ea8782631..89082df5c 100644 --- a/source/containers/Layout.js +++ b/source/containers/Layout.js @@ -2,23 +2,31 @@ import React, { Component } from 'react' import './Layout.css' import './reset.css' import {Link, Route, BrowserRouter as Router, Switch} from 'react-router-dom' -import Home from './Home' +import HomeEmbauche from '../components/HomeEmbauche' +import HomeSyso from '../components/HomeSyso' import Rule from '../components/Rule' import Route404 from '../components/Route404' import Contact from '../components/Contact' import Simulateur from '../components/Simulateur' import Results from '../components/Results' +import R from 'ramda' export default class Layout extends Component { render() { + console.log('window.location.href.toString()', window.location.href.toString()) + let displayWarning = ['/simulateurs', '/regle'].find(t => window.location.href.toString().indexOf(t) > -1) + return (
- + + diff --git a/source/images/homeEmbauche/aides-creations.png b/source/images/homeEmbauche/aides-creations.png new file mode 100644 index 000000000..4ece75552 Binary files /dev/null and b/source/images/homeEmbauche/aides-creations.png differ diff --git a/source/images/homeEmbauche/apec.png b/source/images/homeEmbauche/apec.png new file mode 100644 index 000000000..343719502 Binary files /dev/null and b/source/images/homeEmbauche/apec.png differ diff --git a/source/images/homeEmbauche/api.svg b/source/images/homeEmbauche/api.svg new file mode 100644 index 000000000..72ee7f721 --- /dev/null +++ b/source/images/homeEmbauche/api.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/images/homeEmbauche/calculator.svg b/source/images/homeEmbauche/calculator.svg new file mode 100644 index 000000000..95f7b03d3 --- /dev/null +++ b/source/images/homeEmbauche/calculator.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/source/images/homeEmbauche/carto.png b/source/images/homeEmbauche/carto.png new file mode 100644 index 000000000..4af3559b4 Binary files /dev/null and b/source/images/homeEmbauche/carto.png differ diff --git a/source/images/homeEmbauche/cci.png b/source/images/homeEmbauche/cci.png new file mode 100644 index 000000000..96c56b4f1 Binary files /dev/null and b/source/images/homeEmbauche/cci.png differ diff --git a/source/images/homeEmbauche/checklist.svg b/source/images/homeEmbauche/checklist.svg new file mode 100644 index 000000000..44d740325 --- /dev/null +++ b/source/images/homeEmbauche/checklist.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/source/images/homeEmbauche/code.svg b/source/images/homeEmbauche/code.svg new file mode 100644 index 000000000..aa21ab12a --- /dev/null +++ b/source/images/homeEmbauche/code.svg @@ -0,0 +1,43 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/source/images/homeEmbauche/logo-SGMAP-fond-blanc.svg b/source/images/homeEmbauche/logo-SGMAP-fond-blanc.svg new file mode 100644 index 000000000..8dfbb38b9 --- /dev/null +++ b/source/images/homeEmbauche/logo-SGMAP-fond-blanc.svg @@ -0,0 +1,1230 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Premier ministre + + + + + + SECRÉTARIAT GÉNÉRAL POUR LA MODERNISATION DE L'ACTION PUBLIQUE + + + + diff --git a/source/images/homeEmbauche/logo-SGMAP-fond-noir.svg b/source/images/homeEmbauche/logo-SGMAP-fond-noir.svg new file mode 100644 index 000000000..314a33754 --- /dev/null +++ b/source/images/homeEmbauche/logo-SGMAP-fond-noir.svg @@ -0,0 +1,1419 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Premier ministre + + + + + + SECRÉTARIAT GÉNÉRAL POUR LA MODERNISATION DE L'ACTION PUBLIQUE + + + + diff --git a/source/images/homeEmbauche/logo-openfisca.svg b/source/images/homeEmbauche/logo-openfisca.svg new file mode 100644 index 000000000..8cfb9cb72 --- /dev/null +++ b/source/images/homeEmbauche/logo-openfisca.svg @@ -0,0 +1,46 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/images/homeEmbauche/logo_startup_etat.svg b/source/images/homeEmbauche/logo_startup_etat.svg new file mode 100644 index 000000000..c9fed7ab6 --- /dev/null +++ b/source/images/homeEmbauche/logo_startup_etat.svg @@ -0,0 +1,79 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/source/images/homeEmbauche/min-tra.jpg b/source/images/homeEmbauche/min-tra.jpg new file mode 100644 index 000000000..be48e5788 Binary files /dev/null and b/source/images/homeEmbauche/min-tra.jpg differ diff --git a/source/images/homeEmbauche/pole-emploi.jpg b/source/images/homeEmbauche/pole-emploi.jpg new file mode 100644 index 000000000..e3b32d81e Binary files /dev/null and b/source/images/homeEmbauche/pole-emploi.jpg differ diff --git a/source/images/homeEmbauche/pole-emploi.png b/source/images/homeEmbauche/pole-emploi.png new file mode 100644 index 000000000..d7c80ae77 Binary files /dev/null and b/source/images/homeEmbauche/pole-emploi.png differ diff --git a/source/images/homeEmbauche/question_mark.svg b/source/images/homeEmbauche/question_mark.svg new file mode 100644 index 000000000..d1953e8b6 --- /dev/null +++ b/source/images/homeEmbauche/question_mark.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/images/homeEmbauche/roues.svg b/source/images/homeEmbauche/roues.svg new file mode 100644 index 000000000..7c7b6ea01 --- /dev/null +++ b/source/images/homeEmbauche/roues.svg @@ -0,0 +1,49 @@ + +image/svg+xml \ No newline at end of file diff --git a/source/images/homeEmbauche/simulateur-statique.gif b/source/images/homeEmbauche/simulateur-statique.gif new file mode 100644 index 000000000..f9bf79fc7 Binary files /dev/null and b/source/images/homeEmbauche/simulateur-statique.gif differ diff --git a/source/images/homeEmbauche/simulateur.gif b/source/images/homeEmbauche/simulateur.gif new file mode 100644 index 000000000..b7f6973cc Binary files /dev/null and b/source/images/homeEmbauche/simulateur.gif differ diff --git a/source/images/homeEmbauche/simulateur.png b/source/images/homeEmbauche/simulateur.png new file mode 100644 index 000000000..a3472ab38 Binary files /dev/null and b/source/images/homeEmbauche/simulateur.png differ diff --git a/source/images/homeEmbauche/tests.svg b/source/images/homeEmbauche/tests.svg new file mode 100644 index 000000000..6c5a26e0a --- /dev/null +++ b/source/images/homeEmbauche/tests.svg @@ -0,0 +1,136 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/images/homeEmbauche/widget.svg b/source/images/homeEmbauche/widget.svg new file mode 100644 index 000000000..ea2b5342f --- /dev/null +++ b/source/images/homeEmbauche/widget.svg @@ -0,0 +1,166 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + +