-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
162 lines (139 loc) · 7.43 KB
/
index.html
File metadata and controls
162 lines (139 loc) · 7.43 KB
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
161
162
<!--
$$$$$$$\ $$\ $$\
$$ __$$\ \__|$$ |
$$ / $$ |$$\ $$\ $$$$$$\ $$\ $$ |$$\ $$\
$$$$$$$$ |\$$\ $$ |\____$$\ $$ |$$ |$$ | $$ |
$$ __$$ | \$$\$$ / $$$$$$$ |$$ |$$ |$$ | $$ |
$$ | $$ | \$$$ / $$ __$$ |$$ |$$ |$$ | $$ |
$$ | $$ | \$ / \$$$$$$$ |$$ |$$ |\$$$$$$$ |
\__| \__| \_/ \_______|\__|\__| \____$$ |
$$\ $$ |
\$$$$$$ |
\______/
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Working in a remote team and want to know where your colleagues are? Add Availy to your Slack team and get slash commands for setting your status. It's visible next to your name and posted in channel.">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui, user-scalable=no">
<title>Availy for Slack</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="assets/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="assets/favicon-16x16.png" sizes="16x16">
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<header>
<h1>
<img src="assets/logo.png" alt="Availy logo">
<span>Availy</span> <sup>alpha</sup>
</h1>
<p class="slogan">Show your availability to colleagues</p>
<p class="description">
Especially when working in remote teams it can be hard to see where your colleagues actually are.<br>
Availy solves this problem by providing slash commands for setting a status in Slack.<br>
The status appears next to the name in form of an emoji <span class="emoji">👌</span>
</p>
<div class="error" id="error">
<p><span class="emoji emoji--left">🚫</span> Integration could not be added to your Slack team</p>
</div>
<div class="installed" id="installed">
<p>Integration has been added to your Slack team <span class="emoji">✅</span></p>
</div>
<div class="slack-button">
<a href="https://slack.com/oauth/authorize?scope=commands,chat:write:bot,users.profile:read,users.profile:write&client_id=9773282167.1321734534571"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"></a>
</div>
</header>
<section class="instructions">
<h2>Available commands</h2>
<div>
<div class="command-group">
<div class="inner">
<div class="command-box" id="check-in">
<h3><a href="#check-in">Check-in</a> <span class="emoji">🏠</span><span class="emoji">🏢</span></h3>
<p>Start your day by checking in and tell where you work today</p>
<div class="command"><strong>/check-in</strong> [home|office] <span class="optional">[optional message]</span></div>
</div>
<div class="command-box" id="check-out">
<h3><a href="#check-out">Check-out</a> <span class="emoji emoji--removed">🏢</span><span class="emoji emoji--removed">🏠</span></h3>
<p>End your day by checking out and say goodbye</p>
<div class="command"><strong>/check-out</strong> <span class="optional">[optional message]</span></div>
</div>
</div>
</div>
<div class="command-group">
<div class="inner">
<div class="command-box" id="ofl">
<h3><a href="#ofl">Out for lunch</a> <span class="emoji">🍴</span></h3>
<p>Tell your colleagues that you are out for lunch now</p>
<div class="command"><strong>/ofl</strong> <span class="optional">[optional message]</span></div>
</div>
<div class="command-box" id="bfl">
<h3><a href="#bfl">Back from lunch</a> <span class="emoji emoji--removed">🍴</span></h3>
<p>End your lunch.</p>
<div class="command"><strong>/bfl</strong> <span class="optional">[optional message]</span></div>
</div>
</div>
</div>
<div class="command-group">
<div class="inner">
<div class="command-box" id="out">
<h3><a href="#out">Out of office</a> <span class="emoji">➡️</span></h3>
<p>You need to leave the office?</p>
<div class="command"><strong>/out</strong> <span class="optional">[optional message]</span></div>
</div>
<div class="command-box" id="back">
<h3><a href="#back">Back in office</a> <span class="emoji emoji--removed">➡️</span></h3>
<p>Mark yourself as back in the office</p>
<div class="command"><strong>/back</strong> <span class="optional">[optional message]</span></div>
</div>
</div>
</div>
<div class="command-group">
<div class="inner">
<div class="command-box" id="focus">
<h3><a href="#focus">Focus</a> <span class="emoji">👁</span></h3>
<p>Let your colleagues know that you are focused right now</p>
<div class="command"><strong>/focus</strong> <span class="optional">[optional message]</span></div>
</div>
<div class="command-box" id="unfocus">
<h3><a href="#unfocus">Unfocus</a> <span class="emoji emoji--removed">👁</span></h3>
<p>Stop your focus session</p>
<div class="command"><strong>/unfocus</strong></div>
</div>
</div>
</div>
<div class="command-group">
<div class="inner">
<div class="command-box" id="sick">
<h3><a href="#sick">Sick</a> <span class="emoji">😷</span></h3>
<p>Tell your colleagues that you got sick</p>
<div class="command"><strong>/sick</strong> [reason]</div>
</div>
<div class="command-box" id="recovered">
<h3><a href="#recovered">Recovered</a> <span class="emoji emoji--removed">😷</span></h3>
<p>Tell that you are back on track</p>
<div class="command"><strong>/recovered</strong> <span class="optional">[optional message]</span></div>
</div>
</div>
</div>
</section>
<section class="faq" id="faq">
<div class="inner">
<h2><a href="#faq">FAQ</a></h2>
<details>
<summary>I cannot see the status indicator next to usernames</summary>
<div>
<p>Make sure you have real names instead of usernames displayed in Slack.</p>
<p><em>Settings</em> → <em>Messages & Media</em> → <span class="emoji emoji--left">✅</span> <em>Display real names instead of usernames</em></p>
</div>
</details>
</div>
</div>
</section>
</main>
</body>
</html>