From a177bec498481df39b827f64e605e8d68c2b91ea Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Fri, 31 Jan 2025 11:48:40 +0100 Subject: [PATCH] Create base login page --- js_login/README.md | 3 + js_login/src/index.html | 52 +++++++++ js_login/src/script.js | 12 ++ js_login/src/styles.css | 243 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 310 insertions(+) create mode 100644 js_login/README.md create mode 100644 js_login/src/index.html create mode 100644 js_login/src/script.js create mode 100644 js_login/src/styles.css diff --git a/js_login/README.md b/js_login/README.md new file mode 100644 index 0000000..aead83c --- /dev/null +++ b/js_login/README.md @@ -0,0 +1,3 @@ +# JsLogin + +Taken from: https://github.com/mazipan/login-page-css/tree/master/src/18-instagram \ No newline at end of file diff --git a/js_login/src/index.html b/js_login/src/index.html new file mode 100644 index 0000000..ef479bf --- /dev/null +++ b/js_login/src/index.html @@ -0,0 +1,52 @@ + + + + + + + Instagram clone + + + + +
+
+ +
+

Don't have an account?

+ Sign up +
+ + +
+ +
+
+ + + + \ No newline at end of file diff --git a/js_login/src/script.js b/js_login/src/script.js new file mode 100644 index 0000000..89f9f3f --- /dev/null +++ b/js_login/src/script.js @@ -0,0 +1,12 @@ +const form = document.getElementById("loginForm"); +form.addEventListener("submit", (e) => { + e.preventDefault(); + + const email = document.getElementById("email").value; + const password = document.getElementById("password").value; + + if (email === "sesame@ouvretoi.com" && password === "topsecret") + location.href = "/flag.txt"; + else + alert("Identifiants incorrects, veuillez réessayer !"); +}) \ No newline at end of file diff --git a/js_login/src/styles.css b/js_login/src/styles.css new file mode 100644 index 0000000..4344769 --- /dev/null +++ b/js_login/src/styles.css @@ -0,0 +1,243 @@ +* { + border: none; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; +} + +body { + background-color: #fafafa; + height: 100vh; +} + +main { + height: 100vh; + margin: auto; + max-width: 935px; +} + +a { + text-decoration: none; +} + +h1 { + margin: 20px 0; +} + +ul { + list-style: none; +} + +/** + * Flex rules + */ + +.flex { + display: flex; +} + +.direction-column { + flex-direction: column; +} + +.justify-content-center { + justify-content: center; +} + +.align-items-center { + align-items: center; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.panel { + background-color: white; + border: 1px solid #dbdbdb; + margin-bottom: 10px; + padding: 10px; +} + +#auth { + max-width: 350px; +} + +#mobile img { + height: 618px; +} + +/** + * Login section + */ +.login-with-fb, +form { + width: 100%; +} + +.register, +form { + padding: 30px 20px; +} + +.login-with-fb { + padding: 30px 20px 20px; +} + +form .sr-only { + display: none; +} + +form input { + background-color: #fafafa; + border: 1px solid #dbdbdb; + border-radius: 3px; + color: #808080; + margin-bottom: 8px; + padding: 10px; + width: 100%; +} + +form input::placeholder { + color: #808080; +} + +form input:focus { + border: 1px solid #808080; + outline: none; +} + +form button { + background-color: #0095f6; + border-radius: 5px; + color: #fff; + font-weight: bold; + height: 35px; + margin-top: 10px; + width: 100%; +} + +/** + * Separator login form from login with fb + */ +.separator span { + background-color: #dbdbdb; + height: 1px; + width: calc(100% - 10px); +} + +.separator .or { + color: #808080; + font-weight: bold; +} + +.separator { + padding: 0 20px; +} + +.separator span:first-child { + margin-right: 10px; +} + +.separator span:last-child { + margin-left: 10px; +} + +/** + * Login with fb section + */ +.login-with-fb a { + color: #385185; +} + +.login-with-fb>a { + font-size: 12px; +} + +.login-with-fb div a { + font-weight: bold; +} + +.login-with-fb div { + margin-bottom: 15px; +} + +/** + * Register section + */ +.register * { + font-size: 14px; +} + +.register a { + color: #0095f6; + font-weight: bold; +} + +.register p { + margin-right: 5px; +} + +/** + * App download + */ +.app-download { + padding: 15px; +} + +.app-download p { + padding: 10px 0; +} + +.app-download img { + height: 40px; + margin: 0 5px; +} + +/** + * Footer + */ +.foot { + margin: 0 auto 30px; + max-width: 935px; +} + +.foot ul { + margin-bottom: 20px; +} + +.foot ul li { + margin: 0 10px 10px; +} + +.foot ul li a { + color: #385185; +} + +.foot .copyright { + color: #808080; +} + +.foot ul li a, +.foot .copyright { + font-weight: bold; + text-align: center; + text-transform: uppercase; +} + + +/** + * Media queries + */ + +@media screen and (width <=767px) { + main { + margin: 30px auto 50px; + } + + .foot .copyright, + .foot ul li a { + font-size: 13px; + } +} \ No newline at end of file