Skip to content
Snippets Groups Projects
Commit 089e7f8e authored by PepperyMonk6's avatar PepperyMonk6
Browse files

templates_folder added(login/register/user_profile)

parent 9866c217
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Airline Booking - Login</title>
<link rel="stylesheet" href="login_register_style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<!-- <input type="checkbox" class="form-check-input" id="exampleCheck1"> -->
<!-- <label class="form-check-label" for="exampleCheck1">Check me out</label> -->
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
\ No newline at end of file
form {
width: 30%;
border: 1px solid #ccc; /* Example border: 1px solid with color #ccc */
padding: 20px;
border-radius: 5px; /* Optional: if you want rounded corners */
background-color: #ffffff;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Airline Booking - Register</title>
<link rel="stylesheet" href="login_register_style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="register.js"></script>
</head>
<body>
<div class="container">
<form onsubmit="return checkPasswords()">
<div class="form-group">
<label for="inputFullName">Full name</label>
<input type="text" class="form-control" id="inputFullName" placeholder="Full name">
</div>
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="form-group">
<label for="inputConfirmPassword">Confirm password</label>
<input type="password" class="form-control" id="inputConfirmPassword" placeholder="Confirm Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
\ No newline at end of file
function checkPasswords() {
var password = document.getElementById('inputPassword').value;
var confirmPassword = document.getElementById('inputConfirmPassword').value;
if (password === confirmPassword) {
// The passwords match
// You can add code here to handle the form submission
return true; // return true to submit the form
} else {
// The passwords do not match
// Alert the user
alert("The passwords do not match!");
return false; // return false to prevent form submission
}
}
\ No newline at end of file
Templates/user_profile/avatar.jpg

5.89 KiB

body{
margin-top:20px;
color: #1a202c;
text-align: left;
background-color: #e2e8f0;
}
.main-body {
padding: 15px;
}
.card {
box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #ddd; /* Light grey border */
border-radius: 4px;
}
.card-body {
flex: 1 1 auto;
min-height: 1px;
padding: 1rem;
}
.gutters-sm {
margin-right: -8px;
margin-left: -8px;
}
.gutters-sm>.col, .gutters-sm>[class*=col-] {
padding-right: 8px;
padding-left: 8px;
}
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
.bg-gray-300 {
background-color: #e2e8f0;
}
.h-100 {
height: 100%!important;
}
.shadow-none {
box-shadow: none!important;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Airline Booking - Profile</title>
<link rel="stylesheet" href="profile.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="profile_script.js"></script>
</head>
<body>
<div class="container">
<div class="main-body">
<div class="row gutters-sm">
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-body">
<div class="d-flex flex-column align-items-center text-center">
<img src="avatar.jpg" alt="Admin" class="rounded-circle" width="150">
<div class="mt-3">
<h4 id="profileName">Illya Globa</h4>
<p class="text-secondary mb-1">Loyal Customer</p>
<p class="text-muted font-size-sm">Guildford</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card mb-3">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Full Name</h6>
</div>
<div class="col-sm-9 text-secondary">
<input type="text" id="fullName" class="form-control" value="Illya Globa" readonly>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Email</h6>
</div>
<div class="col-sm-9 text-secondary">
<input type="email" id="email" class="form-control" value="ig@surrey.ac.uk" readonly>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Password</h6>
</div>
<div class="col-sm-9 text-secondary">
<input type="password" id="password" class="form-control" value="password" readonly>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-12">
<button class="btn btn-primary" onclick="editProfile()">Edit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Upcoming Flights</h3>
</div>
<div class="col-md-3">
<div class="card" style="width: 25rem;">
<div class="card-body">
<h5 class="card-title">Flight number</h5>
<h6 class="card-subtitle mb-2 text-muted">LTN - MLG</h6>
<p class="card-text">London(LTN) - Spain(MLG)</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" style="width: 25rem;">
<div class="card-body">
<h5 class="card-title">Flight number</h5>
<h6 class="card-subtitle mb-2 text-muted">LTN - MLG</h6>
<p class="card-text">London(LTN) - Spain(MLG)</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" style="width: 25rem;">
<div class="card-body">
<h5 class="card-title">Flight number</h5>
<h6 class="card-subtitle mb-2 text-muted">LTN - MLG</h6>
<p class="card-text">London(LTN) - Spain(MLG)</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<!-- If you have another flight card add it here as another .col-md-6 -->
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-12">
<h3>Flights History</h3>
</div>
<div class="col-md-3">
<div class="card" style="width: 25rem;">
<div class="card-body">
<h5 class="card-title">Flight number</h5>
<h6 class="card-subtitle mb-2 text-muted">LTN - MLG</h6>
<p class="card-text">London(LTN) - Spain(MLG)</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" style="width: 25rem;">
<div class="card-body">
<h5 class="card-title">Flight number</h5>
<h6 class="card-subtitle mb-2 text-muted">LTN - MLG</h6>
<p class="card-text">London(LTN) - Spain(MLG)</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" style="width: 25rem;">
<div class="card-body">
<h5 class="card-title">Flight number</h5>
<h6 class="card-subtitle mb-2 text-muted">LTN - MLG</h6>
<p class="card-text">London(LTN) - Spain(MLG)</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<!-- If you have another flight card add it here as another .col-md-6 -->
</div>
<button style="margin-top: 10px;" type="submit" class="btn btn-primary">View more</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
function editProfile() {
// Get the input fields
var fullNameField = document.getElementById('fullName');
var emailField = document.getElementById('email');
var passwordField = document.getElementById('password');
// Check if the input fields are readonly - if so, make them editable
if (fullNameField.readOnly === true) {
fullNameField.readOnly = false;
emailField.readOnly = false;
passwordField.readOnly = false;
fullNameField.focus(); // Set focus on the name field to start editing
} else {
fullNameField.readOnly = true;
emailField.readOnly = true;
passwordField.readOnly = true;
// Here you can also add an AJAX call to save the data if needed
}
}
\ No newline at end of file
Templates/user_profile/user.png

18.9 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment