bobbert/peworkshop
1
0 Fork 0
mirror of https://github.com/mudabbir-ahmad/peworkshop.git synced 2026-10-07 19:50:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

CSS styling for login page and register page

Browse Source
This commit is contained in:
bobbert committed 2025-03-20 19:47:06 +00:00
1 parent a4f0f66efd
commit 410c7e97d4
2 files changed
+63 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(auth)/login/page.js
+26
View File
@@ -61,6 +61,9 @@ export default function Login() {
return (
<div className="auth-page">
{/* Decorative square */}
<div className="decorative-square"></div>
<div className="auth-container">
<div className="auth-card">
<h2>Login to Treasure Hunt</h2>
@@ -143,6 +146,29 @@ export default function Login() {
margin-bottom: 10px;
font-size: 0.875rem;
}
.decorative-square {
position: absolute;
top: calc(50% - 265px);
left: calc(50% - 250px);
width: 150px;
height: 150px;
background-image: url("/images/parrot.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 4px;
z-index: 2;
}
.auth-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #f4e9dc;
background-image: url("/images/decor.svg");
background-size: auto 100%;
background-repeat: repeat-x;
background-position: center;
}
`}</style>
</div>
);
app/(auth)/register/page.js
+37 -11
View File
@@ -63,13 +63,12 @@ export default function Register() {
return (
<div className="auth-page">
<div className="page-header">
<div className="page-title">Register</div>
<div className="placeholder"></div>
</div>
{/* Decorative square */}
<div className="decorative-square"></div>
<div className="auth-container">
<div className="auth-card">
<h2>Register for Treasure Hunt</h2>
<div className="input-container">
<input
type="text"
@@ -112,6 +111,11 @@ export default function Register() {
align-items: center;
height: 100vh;
overflow: hidden;
background-image: url("/images/decor.svg");
background-size: auto 100%;
background-repeat: repeat-x;
background-position: center;
background-color: #f4e9dc;
}
.auth-container {
display: flex;
@@ -124,11 +128,10 @@ export default function Register() {
box-sizing: border-box;
}
.auth-card {
width: 100%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.input-container {
margin-bottom: 10px;
@@ -143,16 +146,39 @@ export default function Register() {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #68543c; /* Updated brown color */
background-color: #68543c; /* Dark brown */
color: white;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
transition: background-color 0.3s;
}
.auth-button:hover {
background-color: #53402d; /* Darker brown on hover */
}
.auth-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.error-message {
color: red;
color: #e53935;
margin-top: 10px;
margin-bottom: 10px;
font-size: 0.875rem;
}
.decorative-square {
position: absolute;
top: calc(50% - 240px);
left: calc(50% + 95px);
width: 150px;
height: 150px;
background-image: url("/images/pirate-hat.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 4px;
z-index: 2;
}
`}</style>
</div>