From 99525e662d053b9eade1a21239c357297c9d3df0 Mon Sep 17 00:00:00 2001
From: strokh24 <Rokas.Stankunas@Student.Reutlingen-University.DE>
Date: Fri, 4 Oct 2024 19:01:42 +0200
Subject: [PATCH] Move CSS into styles.css
---
public/css/styles.css | 124 ++++++++++++++++++++++++++++++++++++++++++
public/login.html | 99 +--------------------------------
public/register.html | 100 +---------------------------------
3 files changed, 128 insertions(+), 195 deletions(-)
diff --git a/public/css/styles.css b/public/css/styles.css
index e69de29..aa5f611 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -0,0 +1,124 @@
+body {
+ font-family: Helvetica, Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background-color: #f0f0f0;
+}
+.login-container {
+ background-color: white;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 320px;
+ margin: 0 auto;
+}
+.register-container {
+ background-color: white;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 320px;
+ margin: 0 auto;
+}
+@media (min-width: 600px) {
+ .login-container {
+ padding: 2rem;
+ }
+ .register-container {
+ padding: 2rem;
+ }
+}
+
+@media (min-width: 900px) {
+ .login-container {
+ max-width: 350px;
+ }
+ .register-container {
+ max-width: 350px;
+ }
+}
+h2 {
+ text-align: center;
+ color: #333;
+}
+form {
+ display: flex;
+ flex-direction: column;
+}
+input {
+ margin: 0.5rem 0;
+ padding: 0.5rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+button {
+ margin-top: 1rem;
+ padding: 0.5rem;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+button:hover {
+ background-color: #0056b3;
+}
+.submit-register {
+ background-color: #28a745;
+}
+.submit-register:hover {
+ background-color: #218838;
+}
+.error_text {
+ display: block;
+ color: red;
+ margin-top: 1rem;
+ font-size: 0.9rem;
+ font-style: italic;
+ text-align: center;
+}
+.success_message {
+ display: none;
+ color: #28a745;
+ margin-top: 1rem;
+ font-size: 1rem;
+ text-align: center;
+ opacity: 0;
+ transition: opacity 0.6s ease;
+}
+.success_message.show {
+ display: block;
+ opacity: 1;
+}
+.register-link {
+ text-align: center;
+ margin-top: 1.5rem;
+ font-size: 0.9rem;
+ color: #555;
+}
+.register-link a {
+ color: #007bff;
+ text-decoration: none;
+}
+.register-link a:hover {
+ text-decoration: underline;
+}
+.login-link {
+ text-align: center;
+ margin-top: 1.5rem;
+ font-size: 0.9rem;
+ color: #555;
+}
+.login-link a {
+ color: #007bff;
+ text-decoration: none;
+}
+.login-link a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/public/login.html b/public/login.html
index 04611e8..0047bd7 100644
--- a/public/login.html
+++ b/public/login.html
@@ -4,104 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login</title>
- <style>
- body {
- font-family: Helvetica, Arial, sans-serif;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- background-color: #f0f0f0;
- }
- .login-container {
- background-color: white;
- padding: 2rem;
- border-radius: 8px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- width: 100%;
- max-width: 320px;
- margin: 0 auto;
- }
-
- @media (min-width: 600px) {
- .login-container {
- padding: 2rem;
- }
- }
-
- @media (min-width: 900px) {
- .login-container {
- max-width: 350px;
- }
- }
-
- h2 {
- text-align: center;
- color: #333;
- }
- form {
- display: flex;
- flex-direction: column;
- }
- input {
- margin: 0.5rem 0;
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- }
- button {
- margin-top: 1rem;
- padding: 0.5rem;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
- }
- button:hover {
- background-color: #0056b3;
- }
- .error_text {
- display: block;
- color: red;
- margin-top: 1rem;
- font-size: 0.9rem;
- font-style: italic;
- text-align: center;
- }
- .success_message {
- display: none;
- color: #28a745;
- margin-top: 1rem;
- font-size: 1rem;
- text-align: center;
- opacity: 0;
- transition: opacity 0.6s ease;
- }
-
- .success_message.show {
- display: block;
- opacity: 1;
- }
-
- .register-link {
- text-align: center;
- margin-top: 1.5rem;
- font-size: 0.9rem;
- color: #555;
- }
-
- .register-link a {
- color: #007bff;
- text-decoration: none;
- }
-
- .register-link a:hover {
- text-decoration: underline;
- }
- </style>
+ <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="login-container">
diff --git a/public/register.html b/public/register.html
index 88fcc6f..4529939 100644
--- a/public/register.html
+++ b/public/register.html
@@ -4,102 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Register</title>
- <style>
- body {
- font-family: Helvetica, Arial, sans-serif;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- background-color: #f0f0f0;
- }
- .register-container {
- background-color: white;
- padding: 2rem;
- border-radius: 8px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- width: 100%;
- max-width: 320px;
- margin: 0 auto;
- }
+ <link rel="stylesheet" href="./css/styles.css">
- @media (min-width: 600px) {
- .register-container {
- padding: 2rem;
- }
- }
-
- @media (min-width: 900px) {
- .register-container {
- max-width: 350px;
- }
- }
-
- h2 {
- text-align: center;
- color: #333;
- }
- form {
- display: flex;
- flex-direction: column;
- }
- input {
- margin: 0.5rem 0;
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- }
- button {
- margin-top: 1rem;
- padding: 0.5rem;
- background-color: #28a745;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
- }
- button:hover {
- background-color: #218838;
- }
- .error_text {
- display: block;
- color: red;
- margin-top: 1rem;
- font-size: 0.9rem;
- font-style: italic;
- text-align: center;
- }
- .success_message {
- display: none;
- color: #28a745;
- margin-top: 1rem;
- font-size: 1rem;
- text-align: center;
- opacity: 0;
- transition: opacity 0.6s ease;
- }
- .success_message.show {
- display: block;
- opacity: 1;
- }
- .login-link {
- text-align: center;
- margin-top: 1.5rem;
- font-size: 0.9rem;
- color: #555;
- }
-
- .login-link a {
- color: #007bff;
- text-decoration: none;
- }
-
- .login-link a:hover {
- text-decoration: underline;
- }
- </style>
</head>
<body>
<div class="register-container">
@@ -119,13 +25,13 @@
placeholder="Password"
required
/>
- <button type="submit">Register</button>
+ <button type="submit" class="submit-register">Register</button>
</form>
<span class="error_text"></span>
<div class="success_message">Registration successful! Redirecting...</div>
<div class="login-link">
- Already have an account? <a href="register.html">Log in</a>.
+ Already have an account? <a href="login.html">Log in</a>.
</div>
</div>
</body>
--
GitLab