Skip to content

add profile and change password frontend #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ywang289 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add profile and change password frontend #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 126 additions & 0 deletions templates/templates/SignUp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<title>UBchating</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #ffe6e6;
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
color: #FEFAD7;

height: 450px
}

/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #321E0F;
height: 100%;
}

/* Set black background color, white text and some padding */
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #321E0F;
color: white;
text-align: center;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
body{
background-color: #FEFAD7;
}
#logo {
text-align:center;
color: #FEFAD7;
}
#sign_in {

text-align:center;
color: #F1D5EF;
font-size: 20px;
}
.jumbotron{
background-color: #F1D5EF;

color: #FEFAD7;

}
.text-center{
color: #FEFAD7;


}
.container-fluid{
background-color: #F1D5EF;

}

</style>


<body>

<div class="jumbotron text-center">
<h1>Welcome to UB Chating！</h1>
<!-- <p4>Making communicate easier!</p4>-->
</div>
<div class="container">
<div class="row">
<div class="col-lg-12" id="sign_in" >
<h1>User Sign Up </h1>
<form action="/Signup" method="post" enctype="multipart/form-data">
<form action="this username is existed" method="post">
<label for="fname">Username:</label>
<input style="color:#F1D5EF" type="text" id="fname" name="Name" minlength="6" maxlength="12" required>
<label id="fname-error" style="display: none">username is existed, pick another one</label>
<br><br>
<label for="lname">Password:</label>
<input style="color:#F1D5EF" type="text" id="lname" name="Password" minlength="6" maxlength="12" required><br><br>
<input type="submit" style="color:#F1D5EF" value="Submit">
<br><br>
<p><a href="/" data-toggle="tooltip" title="Sign In right now!" ><font color="F1D5EF"size = "5px">Sign In</font></a ></p >
</form>
</form>
</div>
</div>
</div>

<script>
let query = new URLSearchParams(window.location.search)
if (query.has('error')) {
if (query.get('error') === "username") {
document.querySelector('#fname-error').style.display = 'block'
}
}
</script>
<footer class="container-fluid text-center">
<p>About Us</p >

</footer>
</body>


</html>

176 changes: 176 additions & 0 deletions templates/templates/homepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>UB chatting</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 1px;
border-radius: 1px;
color: #050505;
}


/* Set black background color, white text and some padding */
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #321E0F;
color: white;
text-align: center;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
body{
background-color: #FEFAD7;
}
#logo {
text-align:center;
color: #FEFAD7;
}
#sign_in {

text-align:center;
color: #FEFAD7;
}
.jumbotron{
background-color: #F1D5EF;
color: #FEFAD7;

}
.text-center{
color: #FEFAD7;
}
.container-fluid{
background-color: #F1D5EF;
color: #050505;
}
a {
color: #333;
text-decoration: none;
}
.header-image{
/*background-image: url("cat.jpg");*/
background-position: center;
background-repeat: no-repeat;
position: relative;
background-size: cover;
}
.my_image {
width: 40px;
height : 40px;
border: 5px solid #F1D5EF;
}



</style>

</head>





<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href=" " >UBChatting</a>
</div>
<ul class="nav navbar-nav">
<li class="active" ><a href="#">Home</a></li>
<li><a onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Chat</a></li>
<li><a href="#"> Profile</a></li>
<!-- <li>< a href="#">Page 3</ a></li>-->
</ul>
</div>
</nav>




<body>

<div class="container">
<div class= “header-image”>
<div class="col-lg-12" id="moment_background">
<h2 class="text-left">Welcome back ,{{username}}!</h2>
</div>
</div>

<hr>
<div class="row">
<div class="col-sm-12">
<img src="/cat.jpg" alt="user_image" class="my_image"/> {{username}}
</div>

</div>
<br>
<div class="row">
<div class ="col-sm-1">
</div>
<div class="col-sm-8">
<p class="text-left">{{content_begin_here}} </p ><br>
<button style="font-size:20px;color:red"><i class="fa fa-thumbs-up"></i></button>{{thumbersLst}}
</div>
</div>
<hr>

</div>

<!-- <div class="col-*-*"></div>-->
<p><strong>1. upload Image</strong></p>
<form action="/image-upload" id="image-form" method="post" enctype="multipart/form-data">
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
<input type="submit">
</form>
<h3>Styling Flex Container</h3>
<ul>
<li>flex-direction</li>
<li>flex-wrap</li>
<li>justify-content</li>
<li>align-content</li>
<li>align-items</li>
</ul>
<h3>Designing Flex Items </h3>
<ul>
<li>order</li>
<li>align-self</li>
<li>flex-grow</li>
<li>flex-shrink</li>
<li>flex-basis</li>
</ul>




</body>



<footer class="container-fluid text-center">
<p>About Us</p >
</footer>

<script>

</script>

</html>
Loading