From b26b405ecaf8cfc533f1e7b2271c176a0c9278ae Mon Sep 17 00:00:00 2001 From: Timothy Pidashev Date: Fri, 7 Jan 2022 12:43:22 -0800 Subject: [PATCH] just some more work done --- code.html | 39 ------------------------ css/styles.css | 71 +++++++++++++++++++++++++++++++++++++++++++- index.html | 3 +- js/python3/editor.js | 0 js/python3/login.js | 16 ++++++++++ login.html | 31 +++++++++++++++++++ 6 files changed, 119 insertions(+), 41 deletions(-) delete mode 100644 code.html create mode 100644 js/python3/editor.js create mode 100644 js/python3/login.js create mode 100644 login.html diff --git a/code.html b/code.html deleted file mode 100644 index 4f19cec..0000000 --- a/code.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - Editor - - - - -
function foo(items) {
-    var i;
-    for (i = 0; i < items.length; i++) {
-        alert("Ace Rocks " + items[i]);
-    }
-}
- - - - - - \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index 5101a43..1bbe82a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -198,7 +198,7 @@ html { .blog:hover { transform: scale(1.1); cursor: pointer; - } + } .blog__image { margin-left: 2vw; @@ -206,6 +206,75 @@ html { width: 10vw; } +/* Login */ +#login-holder { + width: 50%; + height: 70%; + display: grid; + justify-items: center; + align-items: center; + background-color: grey; + border-radius: 7px; + box-shadow: 0px 0px 5px 2px black; +} + +#login-error-msg-holder { + width: 100%; + height: 100%; + display: grid; + justify-items: center; + align-items: center; +} + +#login-error-msg { + width: 23%; + text-align: center; + margin: 0; + padding: 5px; + font-size: 12px; + font-weight: bold; + color: #8a0000; + border: 1px solid #8a0000; + background-color: #e58f8f; + opacity: 0; +} + +#error-msg-second-line { + display: block; +} + +#login-form { + align-self: flex-start; + display: grid; + justify-items: center; + align-items: center; +} + +.login-form-field::placeholder { + color: #3a3a3a; +} + +.login-form-field { + border: none; + border-bottom: 1px solid #3a3a3a; + margin-bottom: 10px; + border-radius: 3px; + outline: none; + padding: 0px 0px 5px 5px; +} + +#login-form-submit { + width: 100%; + padding: 7px; + border: none; + border-radius: 5px; + color: white; + font-weight: bold; + background-color: #3a3a3a; + cursor: pointer; + outline: none; +} + @media only screen and (max-width: 1024px) { .hero__header { font-size: 12vw; diff --git a/index.html b/index.html index 63ceb62..a6e19d7 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,8 @@
×
- Write some code + My Gitea instance + Learn Python3
diff --git a/js/python3/editor.js b/js/python3/editor.js new file mode 100644 index 0000000..e69de29 diff --git a/js/python3/login.js b/js/python3/login.js new file mode 100644 index 0000000..76e0a6d --- /dev/null +++ b/js/python3/login.js @@ -0,0 +1,16 @@ +const loginForm = document.getElementById("login-form"); +const loginButton = document.getElementById("login-form-submit"); +const loginErrorMsg = document.getElementById("login-error-msg"); + +loginButton.addEventListener("click", (e) => { + e.preventDefault(); + const username = loginForm.username.value; + const password = loginForm.password.value; + + if (username === "user" && password === "web_dev") { + alert("You have successfully logged in."); + location.reload(); + } else { + loginErrorMsg.style.opacity = 1; + } +}) \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 0000000..c1fb595 --- /dev/null +++ b/login.html @@ -0,0 +1,31 @@ + + + + Login + + + + + + + + +
+
+
+

Login

+ +
+

Invalid username and/or password

+
+ +
+ + + +
+
+
+
+ + \ No newline at end of file