-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathhelpPage.html
122 lines (111 loc) · 6.29 KB
/
helpPage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<title>Help Page</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style='font-size: 1.6vh;'>
<div class="container" style='padding-right: 2px;padding-left: 2px; background-color:rgba(132, 116, 116, 0.17) !important;'>
<h1 style='text-align:center;background-color:white; padding: 3% 39%;margin-bottom: 2%;'><i>Survival Guide</i></h1>
<!-- <h2><i>Account Settings</i></h2> -->
<ul>
<h3><li>Create an account</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>New users can sign up by clicking on the <a href="./signup/signUpPage.php">Create New Account</a> link on the login page. The image is shown below.</li>
<img src='./assets/helpPageScreenShots/Signup.PNG' alt='SignupForm Img' width="60%" height="100%">
<li>Fill out the required fields and click 'Sign up'.</li>
</ol>
<h3><li>Change Profile Picture</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>On the vertical navigation bar present on the left-hand side of the homepage, you will find 'Select image to upload:' option.</li>
<img src="./assets/helpPageScreenShots/ProfilePic.PNG" alt="Profile Pic Update " width="60%" height="100%">
<li>Please click on the 'Choose File' option right below it.</li>
<li>Please choose a .jpg or a .png file.</li>
<li>Click on 'Upload Image' after having chosen a file.</li>
</ol>
<h3><li>Sign-out</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>Users can logout by clicking on their <b><i>username</b></i>.</li>
<li>On clicking the username, a dropdown menu appears which contains the option to 'LogOut' as shown in the image below.</li>
<img src="./assets/helpPageScreenShots/logout.PNG" alt=" LogOut" width="60%" height="100%">
</ol>
</ul>
<br>
<h2><i>Channels</i></h2>
<ul>
<h3><li>Channel Members</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>Users can view the other members of channel by clicking on the icon as shown in the below figure. </li>
<img src="./assets/helpPageScreenShots/listOfChannelMembers.PNG" alt="Create Channel" width="60%" height="100%">
</ol>
<h3><li>Create a new channel</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>Users can create a new channel by clicking on the '+' icon next to Channels in order to <a href="./newChannel.php">create a new channel</a> as shown in the figure below.</li>
<img src="./assets/helpPageScreenShots/createNewChannel.PNG" alt="Create Channel" width="60%" height="100%">
<li>Provide a name for your channel, its purpose and add the users you'd like to have on your channel.</li>
<img src="./assets/helpPageScreenShots/create_channel.PNG" alt="Mountain View" width="60%" height="100%">
<li>Users have options to create either a public channel in which any user could join or a private channel which requires an invite from the owner of the channel.</li>
<li>A user will have to remain logged-in for creating a channel.</li>
</ol>
<h3><li>Add members</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>A channel owner will be able to add members at the time of creating a channel.</li>
<img src="./assets/helpPageScreenShots/InviteUserWhileCreatingChannel.png" alt="Mountain View" width="60%" height="100%">
</ol>
<h3><li>Invite members</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>The owner of a channel can invite other users to the channel that has been created.</li>
<li>A user can select from the list of channels that displays all existing public channels. Even the private channels will be displayed 'if' they have been created by that user.</li>
<li>An owner can invite new members by clicking on <a href="http://qav2.cs.odu.edu/chandu/web-programming/inviteMembersToChannel.php">this</a>. Refer below image.</li>
<img src="./assets/helpPageScreenShots/InviteMembersToChannel.png" alt="Mountain View" width="60%" height="100%">
</ol>
<!-- <h3><li>Delete a Channel</li></h3> -->
<!-- <p><h4><i>Instructions</i></h4>
<ol>
<li>??.</li>
</ol></p> -->
</ul><br>
<h2><i>Messages</i></h2>
<ul>
<h3><li>User search Profile</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>Users can look up other users in the search bar and view their profile, located on the top right corner of the webpage.</li>
<img src="./assets/helpPageScreenShots/userProfileSearch.PNG" alt="Mountain View" width="60%" height="100%">
</ol>
<h3><li>Post</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>Text messages can be posted by typing a message in the text field and pressing 'Enter' Refer the image below.</li>
<img src="./assets/helpPageScreenShots/postingOptions.PNG" alt="Mountain View" width="60%" height="100%">
<li>Users can also upload local images, post code snippets, and upload image urls by clicking on the '+' icon as shown in the image above.</li>
<li>Image urls can be of the formats - .png, .jpeg/jpg, .gif, .tiff/tif.</li>
<li>Please note that empty messages cannot be posted.</li>
<li>Please refrain from using profane or vulgar language.</li>
</ol>
<h3><li>Reactions</li></h3>
<p><h4><i>Instructions</i></h4></p>
<ol>
<li>Users can also reply to the existing posts. Replies could be in the form of a message or a code.</li>
<img src="./assets/helpPageScreenShots/reply.PNG" alt="Mountain View" width="60%" height="100%">
<li>Users can react to already existing posts.</li>
<li>Users can either like or dislike a post.</li>
<img src="./assets/helpPageScreenShots/like.PNG" alt="Mountain View" width="60%" height="100%">
<img src="./assets/helpPageScreenShots/dislike.PNG" alt="Mountain View" width="60%" height="100%">
</ol>
</ul>
<h1 style='text-align:center;background-color:white;padding: 2% 38%;margin-bottom: 3%;'><i>Happy Surviving!</i></h1>
</div>
</body>
</html>