forked from Marco-Ammann/join-813
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhelp.html
160 lines (136 loc) · 7.86 KB
/
help.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help | Join</title>
<link rel="stylesheet" href="./style/fonts.css">
<link rel="stylesheet" href="./style/help.css">
<link rel="stylesheet" href="./assets/header-sidebar/header_sidebar.css">
<script src="./js/login_signup/storage.js"></script>
<script src="./assets/header-sidebar/header_sidebar.js"></script>
<!-- SVG -->
<link rel="icon" type="image/svg+xml" href="./assets/favicon/logo-black.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="./assets/favicon/logo-white.svg" media="(prefers-color-scheme: dark)">
<!-- 96x96 -->
<link rel="icon" type="image/png" href="./assets/favicon/logo-black-96.png" media="(prefers-color-scheme: light)" sizes="96x96">
<link rel="icon" type="image/png" href="./assets/favicon/logo-white-96.png" media="(prefers-color-scheme: dark)" sizes="96x96">
<!-- 32x32 -->
<link rel="icon" type="image/png" href="./assets/favicon/logo-black-32.png" media="(prefers-color-scheme: light)" sizes="32x32">
<link rel="icon" type="image/png" href="./assets/favicon/logo-white-32.png" media="(prefers-color-scheme: dark)" sizes="32x32">
<!-- 16x16 -->
<link rel="icon" type="image/png" href="./assets/favicon/logo-black-16.png" media="(prefers-color-scheme: light)" sizes="16x16">
<link rel="icon" type="image/png" href="./assets/favicon/logo-white-16.png" media="(prefers-color-scheme: dark)" sizes="16x16">
</head>
<body onload="init()">
<!-- Header template -->
<div w3-include-html="./assets/header-sidebar/header_sidebar.html"></div>
<!-- Content -->
<div class="content">
<section class="help-notice">
<div class="content-title-div">
<h1 class="content-title">Help</h1>
<a class="noselect" href="javascript:history.back()"><img
src="./assets/img/Desktop/general_elements/arrow_left/default.svg" alt="Go back"></a>
</div>
<div class="help-notice-content gap_15">
<p>Welcome to the help page for <span>Join</span>, your guide to using our kanban
project management tool. Here,
we'll provide an overview of what <span>Join</span> is, how it can benefit you,
and how to use it.</p>
<div class="gap_10">
<h2>What is Join?</h2>
<p><span>Join</span> is a kanban-based project management tool designed and built
by a group of dedicated
students as part of their web development bootcamp at the Developer Akademie.
<br> <br>
Kanban, a Japanese term meaning "billboard", is a highly effective method to visualize work,
limit work-in-progress, and maximize efficiency (or flow). <span>Join</span>
leverages the principles of
kanban to help users manage their tasks and projects in an intuitive, visual interface.
<br> <br>
It is important to note that <span>Join</span> is designed as an educational
exercise and is not intended for
extensive business usage. While we strive to ensure the best possible user experience, we cannot
guarantee consistent availability, reliability, accuracy, or other aspects of quality regarding
<span>Join</span>.
</p>
</div>
<div class="gap_15">
<h2>How to use it</h2>
<div class="gap_10">
<p>Here is a step-by-step guide on how to use <span>Join</span>:</p>
<div class="firstSteps">
<h2>1.</h2>
<div>
<h3>Exploring the Board</h3>
<p>When you log in to <span>Join</span>, you'll find a default board.
This board represents your
project and contains four default lists: "To Do", "In Progress", “Await feedback”
and
"Done".
</p>
</div>
</div>
<div class="firstSteps">
<h2>2.</h2>
<div>
<h3>Creating Contacts</h3>
<p>In <span>Join</span>, you can add contacts to collaborate on your
projects. Go to the "Contacts"
section, click on "New contact", and fill in the required information. Once added,
these
contacts can be assigned tasks and they can interact with the tasks on the board.
</p>
</div>
</div>
<div class="firstSteps">
<h2>3.</h2>
<div>
<h3>Adding Cards</h3>
<p>Now that you've added your contacts, you can start adding cards. Cards represent
individual tasks. Click the "+" button under the appropriate list to create a new
card.
Fill in the task details in the card, like task name, description, due date,
assignees,
etc.
</p>
</div>
</div>
<div class="firstSteps">
<h2>4.</h2>
<div>
<h3>Moving Cards</h3>
<p>As the task moves from one stage to another, you can reflect that on the board by
dragging and dropping the card from one list to another.
</p>
</div>
</div>
<div class="firstSteps">
<h2>5.</h2>
<div>
<h3>Deleting Cards</h3>
<p>
Once a task is completed, you can either move it to the "Done" list or delete it.
Deleting a card will permanently remove it from the board. Please exercise caution
when deleting cards, as this action is irreversible.
<br><br>
Remember that using <span>Join</span> effectively requires
consistent updates from you and your
team to ensure the board reflects the current state of your project.
<br><br>
Have more questions about <span>Join</span>? Feel free to contact
us at <a href="mailto:[email protected]"><span>Contact</span></a>.
We're here to help you!
</p>
</div>
</div>
</div>
<h2>Enjoy using Join!</h2>
<br>
</div>
</div>
</section>
</div>
</body>
</html>