This commit is contained in:
Flatlogic Bot 2025-10-14 13:56:45 +00:00
parent f71da413cb
commit 42d99a2401
2 changed files with 347 additions and 110 deletions

228
login.php
View File

@ -41,68 +41,192 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - My SaaS</title> <title>Login - TAP2SKILL</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="assets/css/custom.css"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #2A9D8F;
--secondary-color: #E9C46A;
--background-color: #F4F4F4;
--surface-color: #FFFFFF;
--text-color: #264653;
--error-color: #e74c3c;
--success-color: #2ecc71;
}
body {
font-family: 'Lato', sans-serif;
margin: 0;
background-color: var(--background-color);
color: var(--text-color);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
header {
background-color: var(--surface-color);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 16px 0;
position: sticky;
top: 0;
z-index: 100;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Poppins', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
margin-left: 32px;
}
nav ul li a {
text-decoration: none;
color: var(--text-color);
font-weight: 600;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: var(--primary-color);
}
main {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0;
}
.form-container {
background-color: var(--surface-color);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 48px;
width: 100%;
max-width: 480px;
}
.form-title {
font-family: 'Poppins', sans-serif;
font-size: 32px;
text-align: center;
margin-bottom: 32px;
}
form input {
font-family: 'Lato', sans-serif;
padding: 16px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
form button {
font-family: 'Poppins', sans-serif;
background-color: var(--primary-color);
color: white;
padding: 16px 32px;
border-radius: 8px;
border: none;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
font-size: 16px;
}
form button:hover {
background-color: #228b80;
}
.alert-message {
color: white;
padding: 16px;
border-radius: 8px;
text-align: center;
margin-bottom: 16px;
}
.alert-message.error {
background-color: var(--error-color);
}
.alert-message.success {
background-color: var(--success-color);
}
.form-footer {
text-align: center;
margin-top: 24px;
}
.form-footer a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
footer {
background-color: var(--text-color);
color: white;
text-align: center;
padding: 24px 0;
}
</style>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <header>
<div class="container"> <nav class="container">
<a class="navbar-brand" href="index.php">My SaaS</a> <a href="index.php" class="logo">TAP2SKILL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <ul>
<span class="navbar-toggler-icon"></span> <li><a href="index.php#about">About</a></li>
</button> <li><a href="index.php#features">Features</a></li>
<div class="collapse navbar-collapse" id="navbarNav"> <li><a href="index.php#testimonials">Testimonials</a></li>
<ul class="navbar-nav ms-auto"> <li><a href="index.php#contact">Contact</a></li>
<li class="nav-item"> <li><a href="register.php">Register</a></li>
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
</ul> </ul>
</div> </nav>
</div> </header>
</nav>
<div class="container mt-5"> <main>
<div class="row justify-content-center"> <div class="form-container">
<div class="col-md-6"> <h2 class="form-title">Login</h2>
<div class="card">
<div class="card-body">
<h2 class="card-title text-center">Login</h2>
<?php if (isset($_GET['registered'])): ?> <?php if (isset($_GET['registered'])): ?>
<div class="alert alert-success">Registration successful! Please log in.</div> <div class="alert-message success">Registration successful! Please log in.</div>
<?php endif; ?> <?php endif; ?>
<?php if ($error): ?> <?php if ($error): ?>
<div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div> <div class="alert-message error"><?php echo htmlspecialchars($error); ?></div>
<?php endif; ?> <?php endif; ?>
<form action="login.php" method="post"> <form action="login.php" method="post">
<div class="mb-3"> <input type="email" name="email" placeholder="Email Address" required>
<label for="email" class="form-label">Email address</label> <input type="password" name="password" placeholder="Password" required>
<input type="email" class="form-control" id="email" name="email" required> <button type="submit">Login</button>
</div> </form>
<div class="mb-3"> <div class="form-footer">
<label for="password" class="form-label">Password</label> <p>Don't have an account? <a href="register.php">Register here</a>.</p>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
</div>
<div class="card-footer text-center">
<p>Don't have an account? <a href="register.php">Register here</a>.</p>
</div>
</div> </div>
</div> </div>
</div> </main>
</div>
<footer>
<div class="container">
<p>&copy; 2025 TAP2SKILL. All Rights Reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

View File

@ -17,13 +17,11 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
try { try {
$pdo = db(); $pdo = db();
// Check for existing user
$stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username OR email = :email"); $stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username OR email = :email");
$stmt->execute(['username' => $username, 'email' => $email]); $stmt->execute(['username' => $username, 'email' => $email]);
if ($stmt->fetch()) { if ($stmt->fetch()) {
$error = 'Username or email already exists.'; $error = 'Username or email already exists.';
} else { } else {
// Insert new user
$hashed_password = password_hash($password, PASSWORD_DEFAULT); $hashed_password = password_hash($password, PASSWORD_DEFAULT);
$insert_stmt = $pdo->prepare("INSERT INTO users (username, email, password) VALUES (:username, :email, :password)"); $insert_stmt = $pdo->prepare("INSERT INTO users (username, email, password) VALUES (:username, :email, :password)");
$insert_stmt->execute([ $insert_stmt->execute([
@ -46,68 +44,183 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - My SaaS</title> <title>Register - TAP2SKILL</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="assets/css/custom.css"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #2A9D8F;
--secondary-color: #E9C46A;
--background-color: #F4F4F4;
--surface-color: #FFFFFF;
--text-color: #264653;
--error-color: #e74c3c;
}
body {
font-family: 'Lato', sans-serif;
margin: 0;
background-color: var(--background-color);
color: var(--text-color);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
header {
background-color: var(--surface-color);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 16px 0;
position: sticky;
top: 0;
z-index: 100;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Poppins', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
margin-left: 32px;
}
nav ul li a {
text-decoration: none;
color: var(--text-color);
font-weight: 600;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: var(--primary-color);
}
main {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0;
}
.form-container {
background-color: var(--surface-color);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 48px;
width: 100%;
max-width: 480px;
}
.form-title {
font-family: 'Poppins', sans-serif;
font-size: 32px;
text-align: center;
margin-bottom: 32px;
}
form input {
font-family: 'Lato', sans-serif;
padding: 16px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
form button {
font-family: 'Poppins', sans-serif;
background-color: var(--primary-color);
color: white;
padding: 16px 32px;
border-radius: 8px;
border: none;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
font-size: 16px;
}
form button:hover {
background-color: #228b80;
}
.error-message {
background-color: var(--error-color);
color: white;
padding: 16px;
border-radius: 8px;
text-align: center;
margin-bottom: 16px;
}
.form-footer {
text-align: center;
margin-top: 24px;
}
.form-footer a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
footer {
background-color: var(--text-color);
color: white;
text-align: center;
padding: 24px 0;
}
</style>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <header>
<div class="container"> <nav class="container">
<a class="navbar-brand" href="index.php">My SaaS</a> <a href="index.php" class="logo">TAP2SKILL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <ul>
<span class="navbar-toggler-icon"></span> <li><a href="index.php#about">About</a></li>
</button> <li><a href="index.php#features">Features</a></li>
<div class="collapse navbar-collapse" id="navbarNav"> <li><a href="index.php#testimonials">Testimonials</a></li>
<ul class="navbar-nav ms-auto"> <li><a href="index.php#contact">Contact</a></li>
<li class="nav-item"> <li><a href="login.php">Login</a></li>
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.php">Login</a>
</li>
</ul> </ul>
</div> </nav>
</div> </header>
</nav>
<div class="container mt-5"> <main>
<div class="row justify-content-center"> <div class="form-container">
<div class="col-md-6"> <h2 class="form-title">Create Account</h2>
<div class="card">
<div class="card-body">
<h2 class="card-title text-center">Create Account</h2>
<?php if ($error): ?> <?php if ($error): ?>
<div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div> <div class="error-message"><?php echo htmlspecialchars($error); ?></div>
<?php endif; ?> <?php endif; ?>
<form action="register.php" method="post"> <form action="register.php" method="post">
<div class="mb-3"> <input type="text" name="username" placeholder="Username" required>
<label for="username" class="form-label">Username</label> <input type="email" name="email" placeholder="Email Address" required>
<input type="text" class="form-control" id="username" name="username" required> <input type="password" name="password" placeholder="Password" required>
</div> <button type="submit">Register</button>
<div class="mb-3"> </form>
<label for="email" class="form-label">Email address</label> <div class="form-footer">
<input type="email" class="form-control" id="email" name="email" required> <p>Already have an account? <a href="login.php">Login here</a>.</p>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</form>
</div>
<div class="card-footer text-center">
<p>Already have an account? <a href="login.php">Login here</a>.</p>
</div>
</div> </div>
</div> </div>
</div> </main>
</div>
<footer>
<div class="container">
<p>&copy; 2025 TAP2SKILL. All Rights Reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>