n.kolosnaj/Globaly-CSS-Practice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

jun 13

Browse Source
This commit is contained in:
nkolosnjaj
2024-06-13 11:06:39 +02:00
parent 8851ff41b4
commit 65ba6fad57
10 changed files with 256 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
about.html
View File

@@ -87,6 +87,10 @@
</ul>
</div>
<img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
<div class="register">
<a class="register-link" href="login.html" >Log in</a>
<a class="register-link" href="signup.php" >Sign up</a>
</div>
<!-- site navigation-->

4
cases.html
View File

@@ -88,6 +88,10 @@
</ul>
</div>
<img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
<div class="register">
<a class="register-link" href="login.html" >Log in</a>
<a class="register-link" href="signup.php" >Sign up</a>
</div>
<!-- site navigation-->

4
contacts.html
View File

@@ -87,6 +87,10 @@
</ul>
</div>
<img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
<div class="register">
<a class="register-link" href="login.html" >Log in</a>
<a class="register-link" href="signup.php" >Sign up</a>
</div>
<!-- site navigation-->

2
index.html
View File

@@ -91,7 +91,7 @@
<img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
<div class="register">
<a class="register-link" href="login.html" >Log in</a>
<a class="register-link" href="signup.html" >Sign up</a>
<a class="register-link" href="signup.php" >Sign up</a>
</div>

2
login.html
View File

@@ -39,7 +39,7 @@
<script type="text/javascript">
document.getElementById("signup-button").onclick = function () {
location.href = "signup.html";
location.href = "signup.php";
};
</script>

4
news.html
View File

@@ -88,6 +88,10 @@
</ul>
</div>
<img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
<div class="register">
<a class="register-link" href="login.html" >Log in</a>
<a class="register-link" href="signup.php" >Sign up</a>
</div>
<!-- site navigation-->

27
php/register.php
View File

@@ -5,35 +5,48 @@ require 'core.inc.php';
if (!loggedin()) {
if (
isset($_POST['name']) && isset($_POST['email'])
&& isset($_POST['password']) && isset($_POST['password_again'])
&& isset($_POST['password']) && isset($_POST['password_again']) && isset($_POST['birth_day'])
&& isset($_POST['birth_month']) && isset($_POST['birth_year'])
) {
$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];
$password_again = $_POST['password_again'];
$password_hash = md5($password);
$upperCase = preg_match('/[A-Z]/', $password);
$birth_day = $_POST['birth_day'];
$birth_month = $_POST['birth_month'];
$birth_year = $_POST['birth_year'];
if (
!empty($name) && !empty($password) && !empty($password_again) &&
!empty($email)
!empty($email) && !empty($birth_day) && !empty($birth_month) && !empty($birth_year)
) {
if (strlen($name) > 30) {
echo 'Please ahear to maxlength of fields';
} elseif (preg_match("/\d/", $name) || preg_match("/\W/", $name)) {
echo 'Your name must contains only letters!';
} else {
if ($password != $password_again) {
echo 'Passwords do not match';
}elseif (strlen($password) < 6){
} elseif (strlen($password) <= 8) {
echo 'Password is weak!';
}
else {
} elseif (!preg_match("/\d/", $password)) {
echo 'Password must have one number at least!';
} elseif (!preg_match("#[A-Z]+#", $password)) {
echo 'Password must have one capital letter at least!';
} elseif (!preg_match("#[a-z]+#", $password)) {
echo 'Password must have one letter at least!';
} elseif (!preg_match("/\W/", $password)) {
echo 'Password must have one special carachter at least!';
} else {
$query = "SELECT `email` FROM `globaly_accounts` WHERE `email` ='$email'";
$query_run = mysqli_query($con, $query);
if (mysqli_num_rows($query_run) == 1) {
echo 'The email ' . $email . 'already exists';
} else {
$query = "INSERT INTO `globaly_accounts` VALUES (NULL ,'" . mysqli_real_escape_string($con, $name) .
"','" . mysqli_real_escape_string($con, $email) . "','" . mysqli_real_escape_string($con, $password_hash) . "')";
"','" . mysqli_real_escape_string($con, $email) . "','" . mysqli_real_escape_string($con, $password_hash) . "','" .
mysqli_real_escape_string($con, $birth_day) . "','" . mysqli_real_escape_string($con, $birth_month) . "','" . mysqli_real_escape_string($con, $birth_year) . "')";
if ($query_run = mysqli_query($con, $query)) {
echo '<script>alert("You are registerd!")</script>';
header('Location: ../index.html');

4
services.html
View File

@@ -88,6 +88,10 @@
</ul>
</div>
<img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
<div class="register">
<a class="register-link" href="login.html" >Log in</a>
<a class="register-link" href="signup.php" >Sign up</a>
</div>
<!-- site navigation-->

44
signup.html
View File

@@ -1,44 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css"
integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://kit.fontawesome.com/4bb6479073.js" crossorigin="anonymous"></script>
<title>Globaly - Full Cycle Business Management & Consulting Responsive WordPress Theme</title>
</head>
<body>
<div class="form d-flex flex-column align-items-center justify-content-center my-md-5 mb-5 mb-lg-0">
<div class="headline-card d-flex flex-column align-items-center justify-content-center mt-4">
<h2>Signup</h2>
<img class="line-img" src="assets/images/line.png" alt="">
</div>
<h6>Create your account</h6>
<form action="php/register.php" method="post">
<div class="form-container-bot d-flex flex-column align-items-start justify-content-center" >
<input class="input-text" type="text" placeholder="Name" name="name">
<input class="input-text" type="text" placeholder="Email" name="email">
<input class="input-text" type="password" placeholder="Password" name="password">
<input class="input-text" type="password" placeholder="Confirm Password" name="password_again">
<input class="view-more" type="submit" value="Signup">
</div>
</form>
</body>
</html>

214
signup.php Normal file
View File

@@ -0,0 +1,214 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://kit.fontawesome.com/4bb6479073.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<title>Globaly - Full Cycle Business Management & Consulting Responsive WordPress Theme</title>
<style>
#pswd_info {
position: absolute;
bottom: 35%;
bottom: -115px\9;
/* IE Specific */
right: 1%;
width: 400px;
padding: 15px;
background: #fefefe;
font-size: .875em;
border-radius: 5px;
box-shadow: 0 1px 3px #ccc;
border: 1px solid #ddd;
}
#pswd_info {
display: none;
}
#pswd_info h4 {
margin: 0 0 10px 0;
padding: 0;
font-weight: normal;
}
#pswd_info::before {
content: "\25B2";
position: absolute;
top: -12px;
left: 45%;
font-size: 14px;
line-height: 14px;
color: #ddd;
text-shadow: none;
display: block;
}
.invalid {
padding-left: 22px;
line-height: 24px;
color: #ec3f41;
}
.valid {
padding-left: 22px;
line-height: 24px;
color: #3a7d34;
}
@media screen and (min-width: 768px) {
#pswd_info {
bottom: 42%;
right: 30%;
}
}
@media screen and (min-width: 992px) {
#pswd_info {
bottom: 22%;
right: 38%;
}
}
.date-container {
width: 100%;
display: flex;
span{
margin-right: 20px;
}
}
</style>
</head>
<body>
<div class="form d-flex flex-column align-items-center justify-content-center my-md-5 mb-5 mb-lg-0">
<div class="headline-card d-flex flex-column align-items-center justify-content-center mt-4">
<h2>Signup</h2>
<img class="line-img" src="assets/images/line.png" alt="">
</div>
<h6>Create your account</h6>
<form action="php/register.php" method="post">
<div class="form-container-bot d-flex flex-column align-items-start justify-content-center">
<input class="input-text" type="text" placeholder="Name" name="name">
<input class="input-text" type="text" placeholder="Email" name="email">
<input class="input-text" type="password" id="password" placeholder="Password" name="password">
<input class="input-text" type="password" placeholder="Confirm Password" name="password_again">
<div class="date-container">
<span>
<select name="birth_day">
<?php
$start_date = 1;
$end_date = 31;
for ($j = $start_date; $j <= $end_date; $j++) {
echo '<option value=' . $j . '>' . $j . '</option>';
}
?>
</select>
</span>
<span>
<select name="birth_month">
<?php for ($m = 1; $m <= 12; ++$m) {
$month_label = date('F', mktime(0, 0, 0, $m, 1));
?>
<option value="<?php echo $month_label; ?>"><?php echo $month_label; ?></option>
<?php } ?>
</select>
</span>
<span>
<select name="birth_year">
<?php
$year = date('Y');
$min = $year - 60;
$max = $year;
for ($i = $max; $i >= $min; $i--) {
echo '<option value=' . $i . '>' . $i . '</option>';
}
?>
</select>
</span>
</div>
<input class="view-more" type="submit" value="Signup">
</div>
</form>
<div id="pswd_info">
<h4>Password must meet the following requirements:</h4>
<ul>
<li id="letter" class="invalid">At least <strong>one letter</strong></li>
<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
<li id="number" class="invalid">At least <strong>one number</strong></li>
<li id="character" class="invalid">At least <strong>one special character</strong></li>
<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
</ul>
</div>
<script>
$(document).ready(function() {
// Function to validate password
function validatePassword() {
var pswd = $('#password').val();
// Validate the length
if (pswd.length < 8) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
// Validate letter
if (pswd.match(/[A-Za-z]/)) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
// Calidate Capital letter
if (pswd.match(/[A-Z]/)) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
// Validate Number
if (pswd.match(/[0-9]/)) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
// Validate special character
if (pswd.match(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/)) {
$('#character').removeClass('invalid').addClass('valid');
} else {
$('#character').removeClass('valid').addClass('invalid');
}
}
// Bind events
$('#password').on('keyup focus blur', function() {
$('#pswd_info').show();
validatePassword();
});
$('#password').blur(function() {
$('#pswd_info').hide();
});
});
</script>
</body>
</html>