From c89f3a4171d730f3e9288dd21815a83de4226660 Mon Sep 17 00:00:00 2001 From: genuineparts Date: Sat, 5 Jul 2025 18:57:47 +0200 Subject: [PATCH] Initial import --- .gitignore | 1 + authenticate.php | 52 +++++ config.example.php | 5 + home.php | 57 ++++++ index.php | 45 +++++ logout.php | 9 + profile.php | 85 +++++++++ style.css | 458 +++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 712 insertions(+) create mode 100644 .gitignore create mode 100644 authenticate.php create mode 100644 config.example.php create mode 100644 home.php create mode 100644 index.php create mode 100644 logout.php create mode 100644 profile.php create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4f4773f --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +config.php diff --git a/authenticate.php b/authenticate.php new file mode 100644 index 0000000..bcc68d5 --- /dev/null +++ b/authenticate.php @@ -0,0 +1,52 @@ +prepare('SELECT id, password FROM accounts WHERE username = ?')) { + // Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s" + $stmt->bind_param('s', $_POST['username']); + $stmt->execute(); + // Store the result so we can check if the account exists in the database + $stmt->store_result(); + // Check if account exists with the input username + if ($stmt->num_rows > 0) { + // Account exists, so bind the results to variables + $stmt->bind_result($id, $password); + $stmt->fetch(); + // Note: remember to use password_hash in your registration file to store the hashed passwords + if (password_verify($_POST['password'], $password)) { + // Password is correct! User has logged in! + // Regenerate the session ID to prevent session fixation attacks + session_regenerate_id(); + // Declare session variables (they basically act like cookies but the data is remembered on the server) + $_SESSION['account_loggedin'] = TRUE; + $_SESSION['account_name'] = $_POST['username']; + $_SESSION['account_id'] = $id; + // Redirect to the home page + header('Location: home.php'); + exit; + } else { + // Incorrect password + echo 'Incorrect username and/or password!'; + } + } else { + // Incorrect username + echo 'Incorrect username and/or password!'; + } + // Close the prepared statement + $stmt->close(); +} +?> diff --git a/config.example.php b/config.example.php new file mode 100644 index 0000000..5326451 --- /dev/null +++ b/config.example.php @@ -0,0 +1,5 @@ + + + + + + + Home + + + + +
+ +
+ +

Website Title

+ + + +
+ +
+ +
+ +
+
+

Home

+

Welcome back, !

+
+
+ +
+ +

This is the home page. You are logged in!

+ +
+ +
+ + + \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..c2b42ae --- /dev/null +++ b/index.php @@ -0,0 +1,45 @@ + + + + + + + Login + + + +
+ +

Member Login

+ + + +
+ + \ No newline at end of file diff --git a/logout.php b/logout.php new file mode 100644 index 0000000..d7ff9d0 --- /dev/null +++ b/logout.php @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/profile.php b/profile.php new file mode 100644 index 0000000..a79de44 --- /dev/null +++ b/profile.php @@ -0,0 +1,85 @@ +prepare('SELECT email, registered FROM accounts WHERE id = ?'); +// In this case, we can use the account ID to get the account info +$stmt->bind_param('i', $_SESSION['account_id']); +$stmt->execute(); +$stmt->bind_result($email, $registered); +$stmt->fetch(); +$stmt->close(); +?> + + + + + + Home + + + + +
+ +
+ +

Website Title

+ + + +
+ +
+ +
+ +
+
+

Profile

+

View your profile details below.

+
+
+ +
+ +
+ Username + +
+ +
+ Email + +
+ +
+ Registered + +
+ +
+ +
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..fcc28f1 --- /dev/null +++ b/style.css @@ -0,0 +1,458 @@ +* { + box-sizing: border-box; + font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 16px; +} +body, html { + background-color: #f3f5f7; + margin: 0; + padding: 0; +} +h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; + color: #474b50; +} +.form { + display: flex; + flex-flow: column; + width: 100%; +} +.form .form-label { + display: block; + padding: 20px 0 10px 0; + font-weight: 500; + font-size: 14px; + color: #474b50; +} +.form .form-group { + display: flex; + position: relative; + justify-content: space-between; + align-items: center; + width: 100%; +} +.form .form-group .form-icon-left, .form .form-group .form-icon-right { + fill: #c1c6cb; + width: 40px; + position: absolute; + transform: translateY(-50%); + top: 50%; + pointer-events: none; +} +.form .form-group .form-icon-left { + left: 0; +} +.form .form-group .form-icon-left + .form-input { + padding-left: 40px; +} +.form .form-group .form-icon-right { + right: 0; +} +.form .form-group .form-icon-right + .form-input { + padding-right: 40px; +} +.form .form-group:focus-within .form-icon-left { + fill: #989fa8; +} +.form .form-input { + width: 100%; + height: 43px; + border: 1px solid #dee1e6; + padding: 0 15px; + border-radius: 4px; + color: #000; +} +.form .form-input::placeholder { + color: #989fa8; +} +.form .form-link { + color: #2a8eeb; + font-weight: 500; + text-decoration: none; + font-size: 14px; +} +.form .form-link:hover { + color: #136fc5; +} +.form p.register-link { + margin: 0; + padding: 20px 0 0 0; + font-size: 14px; + color: #6b7179; +} +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + text-decoration: none; + appearance: none; + cursor: pointer; + border: 0; + background: #3e7bd6; + color: #FFFFFF; + padding: 0 14px; + font-size: 14px; + font-weight: 600; + border-radius: 4px; + height: 42px; + box-shadow: 0px 0px 6px 1px rgba(45, 57, 68, 0.1); +} +.btn:hover { + background: #3172d3; +} +.login, .register { + display: flex; + flex-flow: column; + width: 400px; + max-width: 95%; + background-color: #ffffff; + box-shadow: 0px 0px 7px 1px rgba(45, 57, 68, 0.05); + border-radius: 5px; + margin: 100px auto; + padding: 35px; +} +.login h1, .register h1 { + text-align: center; + font-size: 24px; + font-weight: 500; + padding: 15px 0; + margin: 0; +} + + + +.header { + background-color: #333941; + height: 60px; + width: 100%; +} +.header .wrapper { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + margin: 0 auto; + width: 900px; + height: 100%; +} +.header .wrapper h1, .header .wrapper a { + display: inline-flex; + align-items: center; +} +.header .wrapper h1 { + font-size: 20px; + padding: 0; + margin: 0; + color: #fff; + font-weight: normal; +} +.header .wrapper .menu { + display: flex; + align-items: center; +} +.header .wrapper .menu a { + display: flex; + align-items: center; + justify-content: center; + height: 32px; + padding: 0 12px; + margin: 0 3px; + text-decoration: none; + color: #dddfe2; + font-weight: 500; + font-size: 16px; + line-height: 16px; +} +.header .wrapper .menu a svg { + fill: #dddfe2; + margin: 2px 8px 0 0; +} +.header .wrapper .menu a:hover, .header .wrapper .menu a:active { + color: #ebebec; +} +.header .wrapper .menu a:hover svg, .header .wrapper .menu a:active svg { + fill: #ebebec; +} +.header .wrapper .menu a:last-child { + margin-right: 0; +} +.content { + width: 900px; + margin: 0 auto; +} +.content .page-title { + display: flex; + align-items: center; + padding: 25px 0 10px 0; +} +.content .page-title h2 { + margin: 0; + padding: 0 0 7px 0; + font-size: 20px; + font-weight: 600; + color: #53585e; +} +.content .page-title p { + margin: 0; + padding: 0; + font-size: 14px; + color: #777e86; +} +.content .block { + box-shadow: 0px 0px 7px 1px rgba(45, 57, 68, 0.05); + margin: 25px 0; + padding: 25px; + border-radius: 5px; + background-color: #fff; +} +.content .block p { + padding: 7px; + margin: 0; +} +.content .profile-detail { + display: flex; + flex-flow: column; + font-size: 18px; + padding: 5px 0; +} +.content .profile-detail strong { + display: block; + color: #92979e; + font-size: 14px; + font-weight: 500; + margin-bottom: 2px; +} + + + +.pad-1 { + padding: 5px; +} +.mar-1 { + margin: 5px; +} +.pad-2 { + padding: 10px; +} +.mar-2 { + margin: 10px; +} +.pad-3 { + padding: 15px; +} +.mar-3 { + margin: 15px; +} +.pad-4 { + padding: 20px; +} +.mar-4 { + margin: 20px; +} +.pad-5 { + padding: 25px; +} +.mar-5 { + margin: 25px; +} +.pad-bot-1 { + padding-bottom: 5px; +} +.pad-top-1 { + padding-top: 5px; +} +.pad-left-1 { + padding-left: 5px; +} +.pad-right-1 { + padding-right: 5px; +} +.pad-x-1 { + padding-left: 5px; + padding-right: 5px; +} +.pad-y-1 { + padding-top: 5px; + padding-bottom: 5px; +} +.mar-bot-1 { + margin-bottom: 5px; +} +.mar-top-1 { + margin-top: 5px; +} +.mar-left-1 { + margin-left: 5px; +} +.mar-right-1 { + margin-right: 5px; +} +.mar-x-1 { + margin-left: 5px; + margin-right: 5px; +} +.mar-y-1 { + margin-top: 5px; + margin-bottom: 5px; +} +.pad-bot-2 { + padding-bottom: 10px; +} +.pad-top-2 { + padding-top: 10px; +} +.pad-left-2 { + padding-left: 10px; +} +.pad-right-2 { + padding-right: 10px; +} +.pad-x-2 { + padding-left: 10px; + padding-right: 10px; +} +.pad-y-2 { + padding-top: 10px; + padding-bottom: 10px; +} +.mar-bot-2 { + margin-bottom: 10px; +} +.mar-top-2 { + margin-top: 10px; +} +.mar-left-2 { + margin-left: 10px; +} +.mar-right-2 { + margin-right: 10px; +} +.mar-x-2 { + margin-left: 10px; + margin-right: 10px; +} +.mar-y-2 { + margin-top: 10px; + margin-bottom: 10px; +} +.pad-bot-3 { + padding-bottom: 15px; +} +.pad-top-3 { + padding-top: 15px; +} +.pad-left-3 { + padding-left: 15px; +} +.pad-right-3 { + padding-right: 15px; +} +.pad-x-3 { + padding-left: 15px; + padding-right: 15px; +} +.pad-y-3 { + padding-top: 15px; + padding-bottom: 15px; +} +.mar-bot-3 { + margin-bottom: 15px; +} +.mar-top-3 { + margin-top: 15px; +} +.mar-left-3 { + margin-left: 15px; +} +.mar-right-3 { + margin-right: 15px; +} +.mar-x-3 { + margin-left: 15px; + margin-right: 15px; +} +.mar-y-3 { + margin-top: 15px; + margin-bottom: 15px; +} +.pad-bot-4 { + padding-bottom: 20px; +} +.pad-top-4 { + padding-top: 20px; +} +.pad-left-4 { + padding-left: 20px; +} +.pad-right-4 { + padding-right: 20px; +} +.pad-x-4 { + padding-left: 20px; + padding-right: 20px; +} +.pad-y-4 { + padding-top: 20px; + padding-bottom: 20px; +} +.mar-bot-4 { + margin-bottom: 20px; +} +.mar-top-4 { + margin-top: 20px; +} +.mar-left-4 { + margin-left: 20px; +} +.mar-right-4 { + margin-right: 20px; +} +.mar-x-4 { + margin-left: 20px; + margin-right: 20px; +} +.mar-y-4 { + margin-top: 20px; + margin-bottom: 20px; +} +.pad-bot-5 { + padding-bottom: 25px; +} +.pad-top-5 { + padding-top: 25px; +} +.pad-left-5 { + padding-left: 25px; +} +.pad-right-5 { + padding-right: 25px; +} +.pad-x-5 { + padding-left: 25px; + padding-right: 25px; +} +.pad-y-5 { + padding-top: 25px; + padding-bottom: 25px; +} +.mar-bot-5 { + margin-bottom: 25px; +} +.mar-top-5 { + margin-top: 25px; +} +.mar-left-5 { + margin-left: 25px; +} +.mar-right-5 { + margin-right: 25px; +} +.mar-x-5 { + margin-left: 25px; + margin-right: 25px; +} +.mar-y-5 { + margin-top: 25px; + margin-bottom: 25px; +} \ No newline at end of file