From 8de24790b649a8577fd2ff37268845f71608be16 Mon Sep 17 00:00:00 2001 From: Adeel Ahmad <adeah090@student.liu.se> Date: Sun, 26 Feb 2023 13:10:40 +0000 Subject: [PATCH] Upload client.html --- client.html | 251 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 251 insertions(+) create mode 100644 client.html diff --git a/client.html b/client.html new file mode 100644 index 0000000..67e35e0 --- /dev/null +++ b/client.html @@ -0,0 +1,251 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Twidder</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link href="client.css" rel="stylesheet" type="text/css" /> + <script src="serverstub.js" type="text/javascript"></script> + <script src="client.js" type="text/javascript"></script> + + <script type="text/view" , id="welcomeScript"> + <section id="welcome"> + <div class="parent"> + <div class="logo"> + <img src="imgs/wimage.png" alt="logo image" /> + </div> + <div id="forms"> + <!-- sign in form --> + <div class="signin"> + <h3>Sign in</h3> + <form id="form1"> + <div class="formElement"> + <label for="signinEmail">Email: </label> + <input + type="email" + id="signinEmail" + required + value="test1@email.com" + /> + </div> + <div class="formElementError signinEmailError"></div> + <div class="formElement"> + <label for="signinPassword">Password:</label> + <input + type="password" + id="signinPassword" + required + value="321321321321" + /> + </div> + <div class="formElementError signinsubmitError"></div> + + <input type="submit" value="Submit"/> + </form> + </div> + <!-- sign up form --> + <div class="signup"> + <h3>Sign up</h3> + <form id="form2" > + <div class="formElement"> + <label for="signupEmail">Email: </label> + <input type="email" id="signupEmail" required /> + </div> + <div class="formElementError signupEmailError"></div> + <div class="formElement"> + <label for="signupPassword">Password:</label> + <input type="password" id="signupPassword" required /> + </div> + <div class="formElement"> + <label for="signupPasswordRepeat">Repeat Password:</label> + <input type="password" id="signupPasswordRepeat" required /> + </div> + <div class="formElement"> + <label for="signupFirstName">First Name:</label> + <input type="text" id="signupFirstName" required /> + </div> + <div class="formElement"> + <label for="signupFamilyName">Family Name:</label> + <input type="text" id="signupFamilyName" required /> + </div> + <div class="formElement"> + <label for="signupGender">Gender:</label> + <select id="signupGender"> + <option value="Male">Male</option> + <option value="Female">Female</option> + </select> + </div> + + <div class="formElement"> + <label for="signupCity">City:</label> + <input type="text" id="signupCity" required /> + </div> + + <div class="formElement"> + <label for="signupCountry">Country:</label> + <input type="text" id="signupCountry" required /> + </div> + <div class="formElementError signupsubmitError"></div> + <div class="formElementSuccess signupsubmitSuccess"></div> + <input type="submit" value="Submit" /> + </form> + </div> + </div> + </div> + </section> + </script> + <script type="text/view" , id="homeScript"> + <section id="home"> + <ul class="tabs"> + <li> + <a + id="tabButtonHome" + data-detail="tabButtonHomeDetail" + class="tabButton active" + > + Home + </a> + </li> + <li> + <a + id="tabButtonBrowse" + data-detail="tabButtonBrowseDetail" + class="tabButton" + > + Browse + </a> + </li> + <li> + <a + id="tabButtonAccount" + data-detail="tabButtonAccountDetail" + class="tabButton" + > + Account + </a> + </li> + </ul> + <div class="tabsDetailsParent"> + <div id="tabButtonHomeDetail" class="tabsDetails active"> + <h3 id="tabHomeUserName">User information</h3> + <div id="tabHomeUserInfo"></div> + <div class="userPostFormParent"> + <form id="userPostForm"> + <textarea + id="userPostFormTextarea" + rows="4" + cols="60" + placeholder="post messages on your wall" + ></textarea> + <div class="formElementError userPostFormTextareaError"></div> + <div class="userPostFormTextareaSuccess"></div> + <input + id="userPostFormButton" + type="button" + value="Post" + onclick="postMessageToWall()" + /> + </form> + </div> + <input + id="userPostReloadButton" + type="button" + value="Reload" + onclick="loadPostMessage()" + /> + <div class="postedMessageList"></div> + </div> + <div id="tabButtonBrowseDetail" class="tabsDetails"> + <h3>Browse User</h3> + <div class="browseFormParent"> + <form id="browseForm"> + <input + type="email" + id="browseUserEmail" + placeholder="Enter Users Email Address" + required + /> + <br /> + <input + type="button" + value="Browse User" + id="browseUserButton" + onclick="browseUser(this)" + /> + </form> + <form id="userPostFormBroswe"> + <textarea + id="userPostFormBrosweTextarea" + rows="4" + cols="60" + placeholder="post messages on the user wall" + ></textarea> + <div + class="formElementError userPostFormBrosweTextareaError" + ></div> + <div class="userPostFormBrosweTextareaSuccess"></div> + <input + id="userPostFormBrosweButton" + type="button" + value="Post" + onclick="postMessageToUserWall()" + /> + </form> + + <div class="formElementError browseUserFormError"></div> + <h3>User Details</h3> + <div class="browseUserDetails"></div> + <h3>User Posts</h3> + <div class="browseUserPosts"></div> + </div> + </div> + <div id="tabButtonAccountDetail" class="tabsDetails"> + <input + type="button" + value="Sign Out" + id="signOutButton" + onclick="logoutUser()" + /> + + <h3>Change Password</h3> + <form id="changePasswordForm"> + <div class="formElement"> + <label for="changePasswordOldPassword">Old Password: </label> + <br /> + <input type="password" id="changePasswordOldPassword" required /> + <br /> + </div> + <div class="formElement"> + <label for="changePasswordNewPassword">New Password:</label> + <br /> + <input type="password" id="changePasswordNewPassword" required /> + </div> + <div class="formElement"> + <label for="changePasswordNewPasswordRepeat"> + Repeat New Password: + </label> + <br /> + <input + type="password" + id="changePasswordNewPasswordRepeat" + required + /> + <br /> + </div> + <div class="formElementError changePasswordNewError"></div> + <div class="changePasswordNewSuccess"></div> + <br /> + <input + type="button" + value="Change Password" + id="changePasswordButton" + onclick="changePassword(this)" + /> + </form> + </div> + </div> + </section> + </script> + </head> + <body></body> +</html> -- GitLab