+
+
\ No newline at end of file
diff --git a/sign_in_script.js b/sign_in_script.js
new file mode 100644
index 0000000..a77ed4e
--- /dev/null
+++ b/sign_in_script.js
@@ -0,0 +1,61 @@
+function on() {
+ document.getElementById("overlay").style.display = "block";
+}
+
+function off() {
+ document.getElementById("overlay").style.display = "none";
+}
+
+function setFormMessage(formElement, type, message) {
+ const messageElement = formElement.querySelector(".form__message");
+
+ messageElement.textContent = message;
+ messageElement.classList.remove("form__message--success", "form__message--error");
+ messageElement.classList.add(`form__message--${type}`);
+}
+
+function setInputError(inputElement, message) {
+ inputElement.classList.add("form__input--error");
+ inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
+}
+
+function clearInputError(inputElement) {
+ inputElement.classList.remove("form__input--error");
+ inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+ const loginForm = document.querySelector("#login");
+ const createAccountForm = document.querySelector("#createAccount");
+
+ document.querySelector("#linkCreateAccount").addEventListener("click", e => {
+ e.preventDefault();
+ loginForm.classList.add("form--hidden");
+ createAccountForm.classList.remove("form--hidden");
+ });
+
+ document.querySelector("#linkLogin").addEventListener("click", e => {
+ e.preventDefault();
+ loginForm.classList.remove("form--hidden");
+ createAccountForm.classList.add("form--hidden");
+ });
+
+ loginForm.addEventListener("submit", e => {
+ e.preventDefault();
+
+
+ setFormMessage(loginForm, "error", "Invalid username/password combination");
+ });
+
+ document.querySelectorAll(".form__input").forEach(inputElement => {
+ inputElement.addEventListener("blur", e => {
+ if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
+ setInputError(inputElement, "Username must be at least 10 characters in length");
+ }
+ });
+
+ inputElement.addEventListener("input", e => {
+ clearInputError(inputElement);
+ });
+ });
+});
\ No newline at end of file
diff --git a/sign_in_stylesheet.css b/sign_in_stylesheet.css
new file mode 100644
index 0000000..cc0694f
--- /dev/null
+++ b/sign_in_stylesheet.css
@@ -0,0 +1,146 @@
+body {
+ --color-primary: #0A3E36;
+ --color-primary-dark: #FFD80A;
+ --color-secondary: #252c6a;
+ --color-error: #cc3333;
+ --color-success: #4bb544;
+ --border-radius: 23px;
+
+ margin: 0;
+ min-height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ background: black;
+}
+#overlay {
+ position: fixed;
+ display: none;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+ z-index: 5; /* Specify a stack order in case you're using a different order for other elements */
+ cursor: pointer; /* Add a pointer on hover */
+}
+.container {
+ width: 400px;
+ max-width: 400px;
+ margin: auto;
+ margin-top:5em;
+ padding: 2rem;
+ box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
+ border-radius: var(--border-radius);
+
+ background: #F3F3F3;
+ border: 1.40774px solid #000000;
+ box-sizing: border-box;
+ z-index: 6;
+}
+
+.container,
+.form__input,
+.form__button {
+ font: 500 1rem 'Quicksand', sans-serif;
+}
+
+.form--hidden {
+ display: none;
+}
+
+.form > *:first-child {
+ margin-top: 0;
+}
+
+.form > *:last-child {
+ margin-bottom: 0;
+}
+
+.form__title {
+ margin-bottom: 2rem;
+ text-align: center;
+}
+
+.form__message {
+ text-align: center;
+ margin-bottom: 1rem;
+}
+
+.form__message--success {
+ color: var(--color-success);
+}
+
+.form__message--error {
+ color: var(--color-error);
+}
+
+.form__input-group {
+ margin-bottom: 1rem;
+}
+
+.form__input {
+ display: block;
+ width: 100%;
+ padding: 0.75rem;
+ box-sizing: border-box;
+ border-radius: var(--border-radius);
+ border: 1px solid #dddddd;
+ outline: none;
+ background: #eeeeee;
+ transition: background 0.2s, border-color 0.2s;
+}
+
+.form__input:focus {
+ border-color: var(--color-primary);
+ background: #ffffff;
+}
+
+.form__input--error {
+ color: var(--color-error);
+ border-color: var(--color-error);
+}
+
+.form__input-error-message {
+ margin-top: 0.5rem;
+ font-size: 0.85rem;
+ color: var(--color-error);
+}
+
+.form__button {
+ width: 100%;
+ padding: 1rem 2rem;
+ font-weight: bold;
+ font-size: 1.1rem;
+ color: #ffffff;
+ border: none;
+ border-radius: var(--border-radius);
+ outline: none;
+ cursor: pointer;
+ background: var(--color-primary);
+}
+
+.form__button:hover {
+ background: var(--color-primary-dark);
+}
+
+.form__button:active {
+ transform: scale(0.98);
+}
+
+.form__text {
+ text-align: center;
+}
+
+.form__link {
+ color: var(--color-secondary);
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.form__link:hover {
+ text-decoration: underline;
+}
\ No newline at end of file