diff --git a/assets/app.js b/assets/app.js
index 0aec7dd48a53595f13ca9ac79e1e15d3bc824adc..5c6ec81740e95d1acfe7901cb0cb1841b4358f60 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -13,4 +13,4 @@ import './bootstrap';
// React
import { registerReactControllerComponents } from '@symfony/ux-react';
-registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
+registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
\ No newline at end of file
diff --git a/assets/connection.js b/assets/connection.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea9db186191b58ed701c554108f02f3af45eb0ea
--- /dev/null
+++ b/assets/connection.js
@@ -0,0 +1,11 @@
+const signUpButton = document.getElementById('signUp');
+const signInButton = document.getElementById('signIn');
+const container = document.getElementById('container');
+
+signUpButton.addEventListener('click', () => {
+ container.classList.add("right-panel-active");
+});
+
+signInButton.addEventListener('click', () => {
+ container.classList.remove("right-panel-active");
+});
\ No newline at end of file
diff --git a/assets/styles/app.css b/assets/styles/app.css
index cb33b131595765db651e2be3d47e211f6c8fd0ee..078a93caa2c8a9eecc5c5052e7fb9e34db3d88cf 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,3 +1,254 @@
body {
background-color: lightgray;
}
+
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background: #f6f5f7;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ font-family: 'Montserrat', sans-serif;
+ height: 100vh;
+ margin: -20px 0 50px;
+}
+
+h1 {
+ font-weight: bold;
+ margin: 0;
+}
+
+h2 {
+ text-align: center;
+}
+
+p {
+ font-size: 14px;
+ font-weight: 100;
+ line-height: 20px;
+ letter-spacing: 0.5px;
+ margin: 20px 0 30px;
+}
+
+span {
+ font-size: 12px;
+}
+
+a {
+ color: #333;
+ font-size: 14px;
+ text-decoration: none;
+ margin: 15px 0;
+}
+
+button {
+ border-radius: 20px;
+ border: 1px solid #FF4B2B;
+ background-color: #FF4B2B;
+ color: #FFFFFF;
+ font-size: 12px;
+ font-weight: bold;
+ padding: 12px 45px;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ transition: transform 80ms ease-in;
+}
+
+button:active {
+ transform: scale(0.95);
+}
+
+button:focus {
+ outline: none;
+}
+
+button.ghost {
+ background-color: transparent;
+ border-color: #FFFFFF;
+}
+
+form {
+ background-color: #FFFFFF;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 50px;
+ height: 100%;
+ text-align: center;
+}
+
+input {
+ background-color: #eee;
+ border: none;
+ padding: 12px 15px;
+ margin: 8px 0;
+ width: 100%;
+}
+
+.container {
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ position: relative;
+ overflow: hidden;
+ width: 768px;
+ max-width: 100%;
+ min-height: 480px;
+}
+
+.form-container {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ transition: all 0.6s ease-in-out;
+}
+
+.sign-in-container {
+ left: 0;
+ width: 50%;
+ z-index: 2;
+}
+
+.container.right-panel-active .sign-in-container {
+ transform: translateX(100%);
+}
+
+.sign-up-container {
+ left: 0;
+ width: 50%;
+ opacity: 0;
+ z-index: 1;
+}
+
+.container.right-panel-active .sign-up-container {
+ transform: translateX(100%);
+ opacity: 1;
+ z-index: 5;
+ animation: show 0.6s;
+}
+
+@keyframes show {
+ 0%,
+ 49.99% {
+ opacity: 0;
+ z-index: 1;
+ }
+ 50%,
+ 100% {
+ opacity: 1;
+ z-index: 5;
+ }
+}
+
+.overlay-container {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ transition: transform 0.6s ease-in-out;
+ z-index: 100;
+}
+
+.container.right-panel-active .overlay-container {
+ transform: translateX(-100%);
+}
+
+.overlay {
+ background: #ff7441;
+ background: -webkit-linear-gradient(to right, #f3735d, #ec4f74);
+ background: linear-gradient(to right, #fa6d55, #f4625f);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 0 0;
+ color: #FFFFFF;
+ position: relative;
+ left: -100%;
+ height: 100%;
+ width: 200%;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+}
+
+.container.right-panel-active .overlay {
+ transform: translateX(50%);
+}
+
+.overlay-panel {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 40px;
+ text-align: center;
+ top: 0;
+ height: 100%;
+ width: 50%;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+}
+
+.overlay-left {
+ transform: translateX(-20%);
+}
+
+.container.right-panel-active .overlay-left {
+ transform: translateX(0);
+}
+
+.overlay-right {
+ right: 0;
+ transform: translateX(0);
+}
+
+.container.right-panel-active .overlay-right {
+ transform: translateX(20%);
+}
+
+.social-container {
+ margin: 20px 0;
+}
+
+.social-container a {
+ border: 1px solid #DDDDDD;
+ border-radius: 50%;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 5px;
+ height: 40px;
+ width: 40px;
+}
+
+footer {
+ background-color: #222;
+ color: #fff;
+ font-size: 14px;
+ bottom: 0;
+ position: fixed;
+ left: 0;
+ right: 0;
+ text-align: center;
+ z-index: 999;
+}
+
+footer p {
+ margin: 10px 0;
+}
+
+footer i {
+ color: red;
+}
+
+footer a {
+ color: #3c97bf;
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/public/img/207deff1d5ab0bc11dff5a18e170039f.jpg b/public/img/207deff1d5ab0bc11dff5a18e170039f.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..aee69ce5104118830b798f19019617e0a0434195
Binary files /dev/null and b/public/img/207deff1d5ab0bc11dff5a18e170039f.jpg differ
diff --git a/public/img/logo_2.1.1.png b/public/img/logo_2.1.1.png
new file mode 100644
index 0000000000000000000000000000000000000000..da7b4735b7e193f3590249a277f54d7141d47cb8
Binary files /dev/null and b/public/img/logo_2.1.1.png differ
diff --git a/public/img/money-2724241_1280-1.jpg b/public/img/money-2724241_1280-1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4f356eb8bcc8c9a0ee98b54f881c63c8a8645371
Binary files /dev/null and b/public/img/money-2724241_1280-1.jpg differ
diff --git a/public/styless.css b/public/styless.css
deleted file mode 100644
index fea84c98899bad4e99ed06552e492f7d3d650c55..0000000000000000000000000000000000000000
--- a/public/styless.css
+++ /dev/null
@@ -1,96 +0,0 @@
-* {
- box-sizing: border-box;
-}
-
-h1 {
- font-weight: bold;
- color: black;
- text-align: center;
- align-items: center;
- justify-content: center;
-}
-
-input {
- width: 25%;
- padding: 12px 20px;
- margin: 8px 0;
- box-sizing: border-box;
- border: 2px solid black;
- border-radius: 4px;
- text-align: center;
- align-items: center;
-}
-
-.label {
- font-size: 20px;
- font-weight: bold;
- color: black;
- text-align: left;
-}
-
-.btn {
- border-radius: 5%;
- background-color: orange;
- color: white;
- padding: 14px 20px;
- margin: 8px 0;
- border: none;
- cursor: pointer;
- width: 35%;
- font-size: 25px;
- font-weight: bold;
-}
-
-.btn-dette {
- border-radius: 5%;
- background-color: wheat;
- color: black;
- padding: 14px 20px;
- margin: 8px 0;
- cursor: pointer;
- width: 35%;
- font-size: 25px;
- font-weight: bold;
-}
-
-.imput {
- width: 30%;
- padding: 12px 20px;
- margin: 8px 0;
- display: inline-block;
- border: 1px solid black;
- box-sizing: border-box;
- border-radius: 5%;
-}
-
-.lien {
- font-size: 20px;
- padding: 10px 50px 20px;
-}
-
-.flex-container {
- display: flex;
- flex-direction: row;
- font-size: 30px;
- text-align: center;
- min-height: 100vh;
-}
-
-.flex-item-left {
- background-color: white;
- flex: 100%;
-}
-
-.flex-item-right {
- background-image: url("./img/money-2724241_1280-1.jpg");
- background-size: cover;
- flex: 100%;
- align-items: center;
- justify-content: center;
-}
-
-@media (max-width: 100%) {
- .flex-container {
- flex-direction: column;
- }
-}
\ No newline at end of file
diff --git a/templates/connection.html.twig b/templates/connection.html.twig
index fca3155060ef5ca104621efb1bfcb843d76ece9f..c52e7060104733237d3ff2dae2b1bd978758fb3f 100644
--- a/templates/connection.html.twig
+++ b/templates/connection.html.twig
@@ -1,46 +1,53 @@
+{#
<!DOCTYPE html>
<html lang="en">
<head>
- <link rel="stylesheet" href="/public/styless.css">
-</head>
-
-
-<body>
-
- <div class="flex-container">
-
- <div class="flex-item-left">
- <img src="./img/logo_2.1.1.png" width="200px" height="200px" />
- <p>
- <div>
- <label class="label"> Créer un identifiant : *</label>
- <div>
- <input type="text" class="imput" id="name" placeholder="Step" required>
- </div>
- </div>
- <div>
- <label class="label">Créer un mot de passe : <front color="#FF0000">*</front></label>
- <div>
- <input type="password" class="imput" id="password" placeholder="********" required>
- </div>
- </p>
+ <link rel="stylesheet" href="/styless.css">
+</head> #} {% extends "base.html.twig" %} {% block title %}Connection{% endblock %} {% block javascripts %} {{ parent() }} {{ encore_entry_script_tags('connection') }}{% endblock %} {% block body %}
+<div class="container" id="container">
+ <div class="form-container sign-up-container">
+ <form action="#">
+ <h1>Creer un compte</h1>
<div>
- <button onclick="window.location.href = 'http://127.0.0.1:8000/';" type="submit" class="btn">Se connecter</button>
+ <img src="./img/logo_2.1.1.png" width="200px" height="200px" />
</div>
-
+ <input type="text" placeholder="Name" required />
+ <input type="email" placeholder="salagadou_la_menchikabou@la_bibidi_bobidi.bou" required/>
+ <input type="password" placeholder="********" required />
+ <button>Sign Up</button>
+ </form>
+ </div>
+ <div class="form-container sign-in-container">
+ <form action="#">
+ <h1>Connection</h1>
+ <div>
+ <img src="./img/logo_2.1.1.png" width="50px" height="50px" />
+ </div>
+ {# <br></br> #}
+ <input type="email" placeholder="salagadou_la_menchikabou@la_bibidi_bobidi.bou" required/>
+ <input type="password" placeholder="********" required />
+ <br></br>
+ <button>Se connecter</button>
+ </form>
+ </div>
+ <div class="overlay-container">
+ <div class="overlay">
+ <div class="overlay-panel overlay-left">
+ <h1>Bon retour !</h1>
+ <p>A simple and rapid way to understand and plan your daily transactions !</p>
+ <p>Une manière simple et rapide de planifier et comprendre vos transactions quotidiennes !</p>
+ <button class="ghost" id="signIn">Se connecter</button>
+ </div>
+ <div class="overlay-panel overlay-right">
+ <h1>Smart Money !</h1>
+ <p>A simple and rapid way to understand and plan your daily transactions !</p>
+ <p>Une manière simple et rapide de planifier et comprendre vos transactions quotidiennes !</p>
+ <button class="ghost" id="signUp">Créer un compte</button>
</div>
- </div>
-
-
- <div class="flex-item-right">
- <h1>Smart money</h1>
</div>
</div>
-
-
-</body>
-
-</html>
\ No newline at end of file
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index bb0fa7e3eb1c63d4a08f127980caeeb1172ba093..3673e8a47005d57d78ac716bbe43c6a2dd91a11d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,71 +7,72 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {
}
Encore
- // directory where compiled assets will be stored
+// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or subdirectory deploy
//.setManifestKeyPrefix('build/')
- /*
- * ENTRY CONFIG
- *
- * Each entry will result in one JavaScript file (e.g. app.js)
- * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
- */
- .addEntry('app', './assets/app.js')
+/*
+ * ENTRY CONFIG
+ *
+ * Each entry will result in one JavaScript file (e.g. app.js)
+ * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
+ */
+.addEntry('app', './assets/app.js')
.addEntry('main', './assets/main.ts')
+ .addEntry('connection', './assets/connection.js')
- // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
- .enableStimulusBridge('./assets/controllers.json')
+// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
+.enableStimulusBridge('./assets/controllers.json')
- // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
- .splitEntryChunks()
+// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
+.splitEntryChunks()
- // will require an extra script tag for runtime.js
- // but, you probably want this, unless you're building a single-page app
- .enableSingleRuntimeChunk()
+// will require an extra script tag for runtime.js
+// but, you probably want this, unless you're building a single-page app
+.enableSingleRuntimeChunk()
- /*
- * FEATURE CONFIG
- *
- * Enable & configure other features below. For a full
- * list of features, see:
- * https://symfony.com/doc/current/frontend.html#adding-more-features
- */
- .cleanupOutputBeforeBuild()
+/*
+ * FEATURE CONFIG
+ *
+ * Enable & configure other features below. For a full
+ * list of features, see:
+ * https://symfony.com/doc/current/frontend.html#adding-more-features
+ */
+.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
- // configure Babel
- // .configureBabel((config) => {
- // config.plugins.push('@babel/a-babel-plugin');
- // })
+// configure Babel
+// .configureBabel((config) => {
+// config.plugins.push('@babel/a-babel-plugin');
+// })
- // enables and configure @babel/preset-env polyfills
- .configureBabelPresetEnv((config) => {
- config.useBuiltIns = 'usage';
- config.corejs = '3.23';
- })
+// enables and configure @babel/preset-env polyfills
+.configureBabelPresetEnv((config) => {
+ config.useBuiltIns = 'usage';
+ config.corejs = '3.23';
+})
- // enables Sass/SCSS support
- //.enableSassLoader()
+// enables Sass/SCSS support
+//.enableSassLoader()
- // uncomment if you use TypeScript
- .enableTypeScriptLoader()
+// uncomment if you use TypeScript
+.enableTypeScriptLoader()
- // uncomment if you use React
- .enableReactPreset()
+// uncomment if you use React
+.enableReactPreset()
- // uncomment to get integrity="..." attributes on your script & link tags
- // requires WebpackEncoreBundle 1.4 or higher
- //.enableIntegrityHashes(Encore.isProduction())
+// uncomment to get integrity="..." attributes on your script & link tags
+// requires WebpackEncoreBundle 1.4 or higher
+//.enableIntegrityHashes(Encore.isProduction())
- // uncomment if you're having problems with a jQuery plugin
- //.autoProvidejQuery()
+// uncomment if you're having problems with a jQuery plugin
+//.autoProvidejQuery()
;
-module.exports = Encore.getWebpackConfig();
+module.exports = Encore.getWebpackConfig();
\ No newline at end of file