diff --git a/Site Web/src/App.js b/Site Web/src/App.js index a21fd144..ef13fc58 100644 --- a/Site Web/src/App.js +++ b/Site Web/src/App.js @@ -1,5 +1,4 @@ //import logo from './logo.svg'; -import './styles/App.scss'; import React from 'react'; import 'tachyons'; import Connexion from './pages/Connexion'; @@ -7,12 +6,14 @@ import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from './pages/Home'; import Tendances from './pages/Tendances'; import Decouvrir from './pages/Decouvrir'; +import Inscription from './pages/Inscription'; function App() { return ( } /> + } /> } /> } /> } /> diff --git a/Site Web/src/assets/img/param.svg b/Site Web/src/assets/img/param.svg new file mode 100644 index 00000000..e68539b5 --- /dev/null +++ b/Site Web/src/assets/img/param.svg @@ -0,0 +1,3 @@ + + + diff --git a/Site Web/src/components/Navbar.js b/Site Web/src/components/Navbar.js index 332d33d2..a0768799 100644 --- a/Site Web/src/components/Navbar.js +++ b/Site Web/src/components/Navbar.js @@ -1,30 +1,47 @@ import React from "react"; import { NavLink } from "react-router-dom"; +import "../styles/components/_navbar.scss" const Navbar = () => { return ( - ); } diff --git a/Site Web/src/index.js b/Site Web/src/index.js index 961a18c2..66239b77 100644 --- a/Site Web/src/index.js +++ b/Site Web/src/index.js @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './styles/index.scss'; import App from './App'; +import "./styles/index.scss"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( diff --git a/Site Web/src/pages/Connexion.js b/Site Web/src/pages/Connexion.js index b00e02f2..51889153 100644 --- a/Site Web/src/pages/Connexion.js +++ b/Site Web/src/pages/Connexion.js @@ -1,8 +1,8 @@ import 'tachyons'; import React from 'react'; -import '../styles/All.scss'; -import '../styles/Connexion.scss'; -import App from '../App'; +import '../styles/components/_connexion.scss'; +import { NavLink } from "react-router-dom"; +//import App from '../App'; function Connexion(){ return( @@ -18,8 +18,10 @@ function Connexion(){ mot de passe - - + + + +

Mot de passe oublié?

diff --git a/Site Web/src/pages/Inscription.js b/Site Web/src/pages/Inscription.js index 7ecf6378..10636ed6 100644 --- a/Site Web/src/pages/Inscription.js +++ b/Site Web/src/pages/Inscription.js @@ -3,7 +3,6 @@ import React from 'react'; const Inscription = () => { return (
-
); }; diff --git a/Site Web/src/styles/All.scss b/Site Web/src/styles/All.scss deleted file mode 100644 index f50038fe..00000000 --- a/Site Web/src/styles/All.scss +++ /dev/null @@ -1,5 +0,0 @@ -*{ - top: 0; - margin: 0; - box-sizing: border-box; -} \ No newline at end of file diff --git a/Site Web/src/styles/Connexion.scss b/Site Web/src/styles/Connexion.scss deleted file mode 100644 index 1ba6ebea..00000000 --- a/Site Web/src/styles/Connexion.scss +++ /dev/null @@ -1,66 +0,0 @@ -.formulaire { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -} - -.cadre { - position: relative; - padding: 50px 50px; - background: #fff; - border-radius: 10px; - background:purple; -} - -.cadre h1 { - letter-spacing: 5px; - margin-bottom: 60px; - font-weight: bold; - padding-left: 10px; - } - - .cadre .inputbox { - position: relative; - width: 300px; - height: 50px; - margin-bottom: 25px; - } - .cadre .inputbox input { - width: 100%; - border: 2px solid #000; - outline: none; - background: none; - padding: 10px; - border-radius: 10px; - font-size: 1.2em; - } - - .cadre .inputbox span { - position: absolute; - top: 14px; - left: 20px; - font-size: 1em; - transition: 0.3s; - font-family: sans-serif; - } - - .span_date{ - margin-left: 7px; - font-size: 1em; - font-family: sans-serif; - } - - .cadre .inputbox input:focus ~ span, - .cadre .inputbox input:valid ~ span { - transform: translateX(-13px) translateY(-35px); - font-size: 1em; - } - -input[type="submit"], #buttonTEL{ - border: none; - border-radius: 5px; - border: 2px solid #000; - margin: 10px 0px 0px 25%; - padding: 20px 10% 20px 10%; -} \ No newline at end of file diff --git a/Site Web/src/styles/_settings.scss b/Site Web/src/styles/_settings.scss new file mode 100644 index 00000000..b2644491 --- /dev/null +++ b/Site Web/src/styles/_settings.scss @@ -0,0 +1,11 @@ + + +$color-1: #61dafb; +$color-2: salmon; +$color-3: #282c34; + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + } \ No newline at end of file diff --git a/Site Web/src/styles/App.scss b/Site Web/src/styles/components/_app.scss similarity index 100% rename from Site Web/src/styles/App.scss rename to Site Web/src/styles/components/_app.scss diff --git a/Site Web/src/styles/components/_connexion.scss b/Site Web/src/styles/components/_connexion.scss new file mode 100644 index 00000000..0538df6f --- /dev/null +++ b/Site Web/src/styles/components/_connexion.scss @@ -0,0 +1,64 @@ +.formulaire { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.cadre { + position: relative; + padding: 50px 50px; + background: #fff; + border-radius: 10px; + background:purple; + h1 { + letter-spacing: 5px; + margin-bottom: 60px; + font-weight: bold; + padding-left: 10px; + } + .inputbox { + position: relative; + width: 300px; + height: 50px; + margin-bottom: 25px; + input { + width: 100%; + border: 2px solid #000; + outline: none; + background: none; + padding: 10px; + border-radius: 10px; + font-size: 1.2em; + } + span { + position: absolute; + top: 14px; + left: 20px; + font-size: 1em; + transition: 0.3s; + font-family: sans-serif; + } + } +} + + +.span_date{ + margin-left: 7px; + font-size: 1em; + font-family: sans-serif; +} + +.cadre .inputbox input:focus ~ span, +.cadre .inputbox input:valid ~ span { + transform: translateX(-13px) translateY(-35px); + font-size: 1em; +} + +input[type="submit"], #buttonTEL{ + border: none; + border-radius: 5px; + border: 2px solid #000; + margin: 10px 0px 0px 25%; + padding: 20px 10% 20px 10%; +} \ No newline at end of file diff --git a/Site Web/src/styles/components/_navbar.scss b/Site Web/src/styles/components/_navbar.scss new file mode 100644 index 00000000..77ad1924 --- /dev/null +++ b/Site Web/src/styles/components/_navbar.scss @@ -0,0 +1,63 @@ +.b:visited { + color: #b9b9b9; +} + + +.b:hover, +.b:focus { + color: lightgrey; +} + +nav{ + display: flex; + align-items: center; + justify-content: center; + height: 50px; + background-color: #AAAAAA; + top: 0; + left: 0; + right: 0; + text-transform: uppercase; + color: #b9b9b9; + position: fixed; +} + +.logo{ + margin-right: 250px; +} + +.b:active { + color: #b9b9b9; +} + + +.home{ + width: 2rem; +} + +ul{ + display: flex; + flex-direction: row; + align-self: center; + list-style-type: none; + li{ + padding-left: 1rem; + } +} + +.b{ + text-decoration: none; + cursor: pointer; +} + +.nav-neko-bleue{ + color: blue; +} + +.n{ + height: 0.95rem; + width: 0.95rem; + padding-top: 0.15rem; + overflow: hidden; + fill: #b9b9b9; +} diff --git a/Site Web/src/styles/index.scss b/Site Web/src/styles/index.scss index ec2585e8..d45acda0 100644 --- a/Site Web/src/styles/index.scss +++ b/Site Web/src/styles/index.scss @@ -1,13 +1,2 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} +@import "./settings"; +@import "./components/navbar"; \ No newline at end of file