Skip to content

Revise signup page layout and styles #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alwin-m wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Revise signup page layout and styles #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
307 changes: 159 additions & 148 deletions signup_page/signup_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,156 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scream - Signup</title>

<style>
:root {
--primary: #4A90E2;
--primary-light: #74b4ff;
--background: #111;
--card-bg: #1b1b1b;
--text-dark: #fff;
--text-light: #ccc;
}

body {
font-family: Arial, sans-serif;
background: var(--background);
color: var(--text-dark);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background: var(--card-bg);
padding: 30px;
border-radius: 14px;
width: 380px;
box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 12px;
}

h2 {
text-align: center;
margin-bottom: 10px;
font-size: 26px;
}

label {
font-size: 14px;
margin-bottom: 2px;
}

input {
width: 100%;
padding: 12px;
border-radius: 8px;
border: none;
background: #2b2b2b;
color: var(--text-dark);
}

input:focus {
outline: 2px solid var(--primary);
}

#username-status {
font-size: 13px;
height: 16px;
margin-top: -6px;
}

button {
width: 100%;
padding: 14px;
margin-top: 10px;
background: var(--primary);
border: none;
border-radius: 8px;
color: white;
cursor: pointer;
font-size: 16px;
}

button:hover {
background: #3578c8;
}

.login-link {
text-align: center;
margin-top: 15px;
font-size: 14px;
}

.login-link a {
color: var(--primary-light);
text-decoration: none;
}

.login-link a:hover {
text-decoration: underline;
}
</style>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scream - Home</title>
<link rel="icon" type="image/png" href="blue.webp"> <!-- Favicon added here -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Comment on lines +4 to +9
Copy link
Collaborator

@jeen-40 jeen-40 Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Meta tags are used and Favicon added

<title>Scream - Sign Up</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
Comment on lines +4 to +23
Copy link
Owner Author

@alwin-m alwin-m Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overview

This HTML file represents an earlier or alternative version of the Scream – Sign Up page. Compared to the newer version, it focuses more on visual branding and background presentation rather than performance, structure, and modern UI consistency.

Key Characteristics

  • Uses a background image (background.jpg) fixed to the viewport, creating a visually rich landing experience.
  • Relies on a system UI font stack (Segoe UI, Tahoma, etc.) instead of a custom theme or CSS variables.
  • Includes a favicon (blue.webp), which helps with branding in browser tabs.
  • Applies global body-level styling for layout, centering content both vertically and horizontally.

Differences from the Newer Version

  • No CSS variables (:root) are defined, making theme changes harder and less scalable.
  • Styling is more static and monolithic, with most visual decisions baked directly into the body selector.
  • Emphasizes visual aesthetics (background image) over minimalism and fast-loading UI.
  • Repeats <meta charset> and <meta viewport> tags, which is unnecessary and slightly unclean from a standards perspective.

Code Quality Notes

  • The duplicated <meta> and <title> tags should be cleaned up to avoid confusion and improve HTML correctness.
  • Inline CSS is acceptable for small prototypes, but separating styles into a CSS file would improve maintainability.
  • Using large background images can negatively impact loading performance, especially on slower devices.

Summary

Overall, this version reflects a design-first approach, prioritizing appearance and branding. In contrast, the newer file moves toward a performance-first, minimal, and scalable UI architecture, which is better suited for modern, fast, app-like experiences.


<body>
<div class="container">
<h2>Create Account</h2>

<!-- CONNECTED BACKEND FORM -->
<form action="signup_action.php" method="POST">

<label>Username</label>
<input type="text" id="username" name="username" placeholder="Choose a username" required />
<div id="username-status"></div>

<label>Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required />

<label>Password</label>
<input type="password" id="password" name="password" placeholder="Create a password" required />

<label>Date of Birth</label>
<input type="date" id="dob" name="dob" required />

<button type="submit">Sign Up</button>
</form>

Comment on lines -108 to -125
Copy link
Collaborator

@jeen-40 jeen-40 Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a tricky portion where the username that we are taking and it's connected to the backend. We are taking username from using the label and the name that we used in the database is given here. We are taking email, email, and password for password, birthdate for birthdate, and the type of submission we have signup button.

<div class="login-link">Already have an account? <a href="#">Login here</a>.</div>
</div>

<script>
document.getElementById('username').addEventListener('input', function() {
const username = this.value.trim();
const statusBox = document.getElementById('username-status');

if (username.length < 3) {
statusBox.style.color = 'orange';
statusBox.textContent = 'Username too short';
return;
}

// LIVE CHECK (Must match your backend file)
fetch('check_username.php?username=' + username)
.then(res => res.text())
.then(data => {
if (data === 'taken') {
statusBox.style.color = 'red';
statusBox.textContent = 'Username already taken';
} else {
statusBox.style.color = 'lightgreen';
statusBox.textContent = 'Username available';
.signup-container {
background-color: rgba(255, 255, 255, 0.9);
padding: 30px 40px;
border-radius: 10px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 450px;
}

.signup-container h1 {
font-size: 28px;
margin-bottom: 25px;
text-align: center;
color: #444;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}

.form-group input, .form-group select {
width: 100%;
padding: 12px;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
background: #fdfdfd;
}

.form-group input[type="file"] {
padding: 6px;
}

.form-row {
display: flex;
gap: 15px;
Comment on lines +25 to +68
Copy link
Owner Author

@alwin-m alwin-m Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overview

This CSS snippet defines the core visual styling for a signup form container and its internal form elements. The code is clean, readable, and follows common UI patterns used in modern web forms.

Strengths

  • Clear structure and naming: Class names like .signup-container, .form-group, and .form-row are intuitive and easy to understand.
  • Good visual hierarchy: Font sizes, margins, and spacing are well balanced, making the form readable and user-friendly.
  • Responsive-friendly design: Using width: 100% with a max-width ensures the form adapts well across different screen sizes.
  • Consistent spacing: Padding and margins are applied consistently, giving the layout a polished feel.
  • Flexbox usage: .form-row with display: flex and gap improves alignment and simplifies multi-field layouts.

UI & UX Considerations

  • The semi-transparent background (rgba(255, 255, 255, 0.9)) works well when placed over an image or gradient, helping maintain readability.
  • The box shadow adds subtle depth without being too aggressive, which suits a form-based interface.
  • Input fields are large and accessible, improving usability on both desktop and touch devices.

Areas for Improvement

  • Focus states are not defined for inputs and selects. Adding :focus styles would improve accessibility and keyboard navigation.
  • Color variables are not used. Introducing CSS variables (e.g., for colors and spacing) would make future theming easier.
  • Mobile optimization could be enhanced by adding media queries to stack .form-row fields vertically on very small screens.
  • Validation states (error, success) are not included and may be needed for a complete signup experience.

Maintainability Notes

  • This CSS is suitable for small to medium projects, but extracting it into a dedicated stylesheet or component-based structure would improve scalability.
  • Reusing shared styles (inputs, labels) through utility classes could reduce duplication as the project grows.

Summary

Overall, this code demonstrates a solid, conventional approach to form styling. It prioritizes clarity, usability, and visual balance. With minor enhancements around accessibility, responsiveness, and theming, it can easily scale to production-quality UI standards.

}
});
});
</script>

.form-row .form-group {
flex: 1;
}

.signup-button {
width: 100%;
padding: 15px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}

.signup-button:hover {
background-color: #0056b3;
}

.footer {
margin-top: 20px;
text-align: center;
font-size: 13px;
color: #888;
}

.footer a {
color: #007bff;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-container">
<h1>Sign Up for Scream</h1>
Copy link
Collaborator

@jeen-40 jeen-40 Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

title

<form action="signupaction.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>

<div class="form-group">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" required>
</div>

<div class="form-row">
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phone" required>
</div>
</div>

<div class="form-group">
<label for="age">Age</label>
<input type="number" id="age" name="age" required min="13">
</div>

<div class="form-group">
<label for="sex">Sex</label>
<select id="sex" name="sex" required>
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>

<div class="form-group">
<label for="location">Location</label>
<input type="text" id="location" name="location" required>
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>

<button type="submit" class="signup-button">Sign Up</button>
</form>
<div class="footer">
By signing up, you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.
</div>
</div>
Comment on lines +71 to +164
Copy link
Owner Author

@alwin-m alwin-m Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overview

This code defines the layout, styling, and structure of a complete signup form for the Scream application. It combines CSS for visual behavior and HTML for form structure and data collection. The implementation is straightforward, readable, and suitable for beginner-to-intermediate level projects.

CSS Review (Why these styles exist)

.form-row .form-group { flex: 1; }

  • Ensures that multiple form fields inside a row share equal width.
  • Used to align fields like Email and Phone Number side by side.
  • Helps maintain a clean, balanced layout.

.signup-button

  • Styles the main action button so it stands out clearly.
  • Full width makes it easy to tap on mobile devices.
  • Bold text and strong color emphasize it as the primary action.

.signup-button:hover

  • Provides visual feedback when the user hovers over the button.
  • Improves user experience by making the interface feel interactive.

.footer and .footer a

  • Displays legal information in a subtle, non-distracting way.
  • Smaller font size and muted color prevent it from overpowering the form.
  • Links are styled clearly so users recognize them as clickable.

HTML Review (Why these elements exist)

<form action="signupaction.php" method="POST" enctype="multipart/form-data">

  • Sends user data securely to the server using POST.
  • enctype allows future support for file uploads (profile pictures, etc.).

.form-group

  • Wraps each label and input pair.
  • Helps keep spacing consistent and improves readability.

Labels and Inputs

  • <label> improves accessibility and usability.
  • Each input uses the appropriate type (email, number, password) to enable browser validation.

.form-row

  • Groups related inputs together in a single row.
  • Improves form flow and reduces vertical scrolling.

Age Field (min="13")

  • Prevents users below the minimum age requirement from signing up.
  • Enforced directly by the browser before submission.

Sex Dropdown (<select>)

  • Restricts input to predefined values.
  • Prevents inconsistent or invalid data.

Submit Button

  • Clearly signals the final action of the form.
  • Uses a descriptive label so users know exactly what will happen.

Strengths

  • Clean and readable structure
  • Good use of semantic HTML
  • Built-in validation using HTML attributes
  • User-friendly layout and spacing

Minor Improvements

  • Add :focus styles for inputs to improve accessibility
  • Use type="tel" for phone numbers
  • Consider adding client-side validation feedback messages

Summary

This code exists to create a simple, reliable, and user-friendly signup experience. Every line serves a clear purpose—either to improve layout, guide user input, or ensure valid data submission. Overall, it is a solid foundation that can be easily expanded as the project grows.

Comment on lines 69 to +164
Copy link
Owner Author

@alwin-m alwin-m Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overview

This code defines the layout, styling, and structure of a complete signup form for the Scream application. It combines CSS for visual behavior and HTML for form structure and data collection. The implementation is straightforward, readable, and suitable for beginner-to-intermediate level projects.

CSS Review (Why these styles exist)

.form-row .form-group { flex: 1; }

  • Ensures that multiple form fields inside a row share equal width.
  • Used to align fields like Email and Phone Number side by side.
  • Helps maintain a clean, balanced layout.

.signup-button

  • Styles the main action button so it stands out clearly.
  • Full width makes it easy to tap on mobile devices.
  • Bold text and strong color emphasize it as the primary action.

.signup-button:hover

  • Provides visual feedback when the user hovers over the button.
  • Improves user experience by making the interface feel interactive.

.footer and .footer a

  • Displays legal information in a subtle, non-distracting way.
  • Smaller font size and muted color prevent it from overpowering the form.
  • Links are styled clearly so users recognize them as clickable.

HTML Review (Why these elements exist)

<form action="signupaction.php" method="POST" enctype="multipart/form-data">

  • Sends user data securely to the server using POST.
  • enctype allows future support for file uploads (profile pictures, etc.).

.form-group

  • Wraps each label and input pair.
  • Helps keep spacing consistent and improves readability.

Labels and Inputs

  • <label> improves accessibility and usability.
  • Each input uses the appropriate type (email, number, password) to enable browser validation.

.form-row

  • Groups related inputs together in a single row.
  • Improves form flow and reduces vertical scrolling.

Age Field (min="13")

  • Prevents users below the minimum age requirement from signing up.
  • Enforced directly by the browser before submission.

Sex Dropdown (<select>)

  • Restricts input to predefined values.
  • Prevents inconsistent or invalid data.

Submit Button

  • Clearly signals the final action of the form.
  • Uses a descriptive label so users know exactly what will happen.

Strengths

  • Clean and readable structure
  • Good use of semantic HTML
  • Built-in validation using HTML attributes
  • User-friendly layout and spacing

Minor Improvements

  • Add :focus styles for inputs to improve accessibility
  • Use type="tel" for phone numbers
  • Consider adding client-side validation feedback messages

Summary

This code exists to create a simple, reliable, and user-friendly signup experience. Every line serves a clear purpose—either to improve layout, guide user input, or ensure valid data submission. Overall, it is a solid foundation that can be easily expanded as the project grows.

</body>
</html>