From 523a60173bdcef2b72c2043d8d48e8d95d86aef4 Mon Sep 17 00:00:00 2001
From: Alwin madhu <alwinmadhu7@gmail.com>
Date: Wed, 14 Jan 2026 07:41:32 +0530
Subject: [PATCH] Revise signup page layout and styles

---
 signup_page/signup_page.html | 307 ++++++++++++++++++-----------------
 1 file changed, 159 insertions(+), 148 deletions(-)
diff --git a/signup_page/signup_page.html b/signup_page/signup_page.html
index 5e5aecd..f598e24 100644
--- a/signup_page/signup_page.html
+++ b/signup_page/signup_page.html
@@ -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">
+    <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;
+        }
 
-<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>
-
-  <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;
         }
-      });
-});
-</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>
+        <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>
 </body>
 </html>
+
