-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
184 lines (168 loc) · 12.3 KB
/
index.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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<html>
<head>
<title>TickyBot - Your Support Ticket Slack Bot</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Add to Slack</li>
</ul>
</header>
<section class="home">
<div class="home-container">
<div class="home-container-left">
<h1 class="tickybot-title">Ticky<span class="bot">Bot</span></h1>
<h5 class="tickybot-title-first">Let your team manage their support tickets</h5>
<h5>100% inside Slack</h5>
<button class="btn">Add to <span class="slack">Slack</span></button>
</div>
<div class="home-container-right">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 508 508" width="300px" height="300px">
<circle style="fill:#FFD05B;" cx="254" cy="254" r="254"></circle>
<path style="fill:#F9B54C;" d="M90.8,448.8C134.8,486,191.6,508,254,508s118.8-22.4,163.2-59.2H90.8z"></path>
<g>
<polygon style="fill:#324A5E;" points="241.2,136.8 234,177.6 274,177.6 266.8,136.8"></polygon>
<polygon style="fill:#324A5E;" points="288,300.4 276,302 268,272 278,270.8"></polygon>
<polygon style="fill:#324A5E;" points="220,300.4 232,302 240,272 230,270.8"></polygon>
<rect x="275.6" y="422.4" style="fill:#324A5E;" width="25.6" height="18.4"></rect>
</g>
<path style="fill:#FFFFFF;" d="M310,447.2c-0.4-4.4-2.8-7.6-5.6-7.6h-32c-2.8,0-5.2,3.2-5.6,7.6H310z"></path>
<rect x="206.8" y="422.4" style="fill:#324A5E;" width="25.6" height="18.4"></rect>
<g>
<path style="fill:#FFFFFF;" d="M241.6,447.2c-0.4-4.4-2.8-7.6-5.6-7.6h-32c-2.8,0-5.2,3.2-5.6,7.6H241.6z"></path>
<path style="fill:#FFFFFF;" d="M197.6,395.2c0,39.2,19.6,36.4,28.4,36.4c8.8,0,16,2.8,16-36.4s-7.2-104.8-16-104.8
C216.8,290.4,197.6,356.4,197.6,395.2z"></path>
<path style="fill:#FFFFFF;" d="M310.4,395.2c0,39.2-19.6,36.4-28.4,36.4s-16,2.8-16-36.4s7.2-104.8,16-104.8
C291.2,290.4,310.4,356.4,310.4,395.2z"></path>
</g>
<g class="head">
<path id="SVGCleanerId_0" style="fill:#FFFFFF;" d="M333.6,61.2c-10.8-0.8-21.2,2-29.6,7.2c-14,8.4-29.6,13.2-45.6,13.2h-8.8
c-16,0-32-4.8-45.6-13.2c-8.4-5.2-18.8-8-29.6-7.2c-24.8,1.6-45.2,22-46.8,46.8c-2,29.2,21.2,54,50.4,54c9.6,0,18.8-2.8,26.4-7.6
c14-8.8,30.4-13.2,46.8-13.2h6.4c16.4,0,32.8,4.4,46.8,13.2c7.6,4.8,16.8,7.6,26.4,7.6c29.2,0,52.4-24.4,50.4-54
C378.8,82.8,358.4,62.8,333.6,61.2z"></path>
<path id="SVGCleanerId_0_1_" style="fill:#FFFFFF;" d="M333.6,61.2c-10.8-0.8-21.2,2-29.6,7.2c-14,8.4-29.6,13.2-45.6,13.2h-8.8
c-16,0-32-4.8-45.6-13.2c-8.4-5.2-18.8-8-29.6-7.2c-24.8,1.6-45.2,22-46.8,46.8c-2,29.2,21.2,54,50.4,54c9.6,0,18.8-2.8,26.4-7.6
c14-8.8,30.4-13.2,46.8-13.2h6.4c16.4,0,32.8,4.4,46.8,13.2c7.6,4.8,16.8,7.6,26.4,7.6c29.2,0,52.4-24.4,50.4-54
C378.8,82.8,358.4,62.8,333.6,61.2z"></path>
<g>
<path style="fill:#84DBFF;" d="M330,151.2c-22,0-40-18-40-40s18-40,40-40s40,18,40,40S352,151.2,330,151.2z"></path>
<path style="fill:#84DBFF;" d="M178,151.2c-22,0-40-18-40-40s18-40,40-40s40,18,40,40C217.6,133.2,199.6,151.2,178,151.2z"></path>
</g>
<path style="fill:#54C0EB;" d="M330,134.8c-12.8,0-23.6-10.4-23.6-23.6s10.4-23.6,23.6-23.6c12.8,0,23.6,10.4,23.6,23.6
S343.2,134.8,330,134.8z"></path>
<g>
<circle style="fill:#FFFFFF;" cx="321.6" cy="97.2" r="11.2"></circle>
<circle style="fill:#FFFFFF;" cx="340.4" cy="128.4" r="6.4"></circle>
</g>
<path style="fill:#54C0EB;" d="M178,134.8c-12.8,0-23.6-10.4-23.6-23.6s10.4-23.6,23.6-23.6c12.8,0,23.6,10.4,23.6,23.6
S190.8,134.8,178,134.8z"></path>
<g>
<circle style="fill:#FFFFFF;" cx="169.2" cy="97.2" r="11.2"></circle>
<circle style="fill:#FFFFFF;" cx="188" cy="128.4" r="6.4"></circle>
</g>
</g>
<g>
<path style="fill:#324A5E;" d="M305.2,220.4c2.8,7.6,7.2,16.4,12.8,25.2c14.8,22.8,32.8,37.2,40,32.4s1.2-27.2-13.2-49.6
c-5.6-8.8-12-16.4-17.6-22L305.2,220.4z"></path>
<path style="fill:#324A5E;" d="M364.8,312.4c0,0,6.8,17.6-5.2,43.6c-0.8,2-3.2,3.2-5.6,3.2l0,0c-3.6-0.4-5.6-4-4.8-7.2
c1.6-4.8,3.2-12,3.2-18.4c0-6-7.6-8.8-11.6-4.4c-1.6,1.6-2.8,4-3.6,6.8c-0.8,2.8-4,4-6.4,3.2l0,0c-2.8-0.8-4.4-4-3.2-6.8
C331.6,321.6,342.8,300.4,364.8,312.4z"></path>
</g>
<path style="fill:#FFFFFF;" d="M376,321.6c0,9.6-2.4,16.4-6,20.4c-9.6-18.8-27.6-26.4-38-29.6c1.2-8.8,3.6-18,7.2-24.8 c-2-3.6-3.2-7.6-4-12.4c17.6-8.8,25.2-17.6,28.8-24c3.2,4.8,5.2,11.6,5.2,18.8c0,5.2-0.8,10-2.4,14C372.4,293.6,376,309.2,376,321.6 z"></path>
<g>
<path style="fill:#324A5E;" d="M202.8,220.4c-2.8,7.6-7.2,16.4-12.8,25.2c-14.8,22.8-32.8,37.2-40,32.4s-1.2-27.2,13.2-49.6
c5.6-8.8,12-16.4,17.6-22L202.8,220.4z"></path>
<path style="fill:#324A5E;" d="M177.2,339.2c-2.8,0.8-5.6-0.4-6.4-3.2c-0.8-2.8-2.4-5.2-3.6-6.8c-4-4.8-11.2-2-11.6,4.4
c0,6.4,1.6,13.6,3.2,18.4c0,0.4,1.6,6-4.8,7.2c-2.4,0.4-4.4-0.8-5.6-3.2c-3.6-7.6-5.6-14.8-6.4-20.4c8-10.8,18.8-17.2,27.6-20.8
c5.6,5.2,9.2,12.4,11.2,17.6C180.8,332.8,182,337.6,177.2,339.2z"></path>
</g>
<g>
<path style="fill:#FFFFFF;" d="M132,321.6c0,9.6,2.4,16.4,6,20.4c9.6-18.8,27.6-26.4,38-29.6c-1.2-8.8-3.6-18-7.2-24.8
c2-3.6,3.2-7.6,4-12.4c-17.6-8.8-25.2-17.6-28.8-24c-3.2,4.8-5.2,11.6-5.2,18.8c0,5.2,0.8,10,2.4,14
C135.6,293.6,132,309.2,132,321.6z"></path>
<path style="fill:#FFFFFF;" d="M314,188c-4.4,0-8.8,1.2-12.4,3.2c-4.4-10-13.2-16.8-24-16.8h-47.2c-10.8,0-19.6,7.2-24,16.8
c-3.6-2-8-3.2-12.4-3.2c-14,0-25.6,11.6-25.6,25.6s11.6,25.6,25.6,25.6c5.2,0,9.6-1.6,13.6-4l2.8,20.4c2,14.8,13.2,25.6,26.4,25.6
h34c13.2,0,24.4-10.8,26.4-25.6l2.8-20.4c4,2.4,8.8,4,13.6,4c14,0,25.6-11.6,25.6-25.6C339.6,199.2,328,188,314,188z"></path>
</g>
</svg>
</div>
</div>
</section>
<section class="about">
<div class="about-container">
<h3>What Is TickyBot</h3>
<div class="about-containers">
<div class="about-container-left">
<p>
TickyBot is a Slack Bot 🤖 that lets you use support tickets on Slack. This way, you don't need to leave your beloved channel to assist your users, if you don't feel like it.
</p>
</div>
<div class="about-container-right">
<p>
With TickyBot you can easily check if you've received new tickets, change their status, or write a reply, and the ticket will instantly update itself on our site.
</p>
</div>
</div>
<p class="about-container-paragraph">
Support requests shouldn't be handled through Slack's direct messages. <br/> Image about someone asking silly questions and the workplace admin asking him/her to open a support ticket so other admins could look into the issue.
</p>
</div>
</section>
<section class="features">
<div class="features-container">
<h3> How It Works </h3>
<hr>
<div class="features-cards">
<div class="features-cards-first">
<div class="card">
<div class="features-img">
<img src="https://tickybott.herokuapp.com/5e294ff6045f826e1b4f452df8897fb8.svg" alt="Avatar" style="width: 200px; height: 200px;">
</div>
<div class="container">
<p>You can add TickyBot to your Slack workplace by scrolling down or clicking here</p>
</div>
</div>
</div>
<div class="features-cards-second">
<div class="card">
<div class="features-img">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTA4IDUwOCI+DQogIDxjaXJjbGUgc3R5bGU9ImZpbGw6IzU0QzFFQzsiIGN4PSIyNTQiIGN5PSIyNTQiIHI9IjI1NCIvPg0KICA8cGF0aCBzdHlsZT0iZmlsbDojMzI0QTVFOyIgZD0iTTE4NS4yLDE5MS42djEzMy4yYzAsNi40LDUuMiwxMS4yLDExLjIsMTEuMmgxMTEuMmw4MS42LDU2LjhMMzc0LjQsMzM2aDI2LjggYzYuNCwwLDExLjItNS4yLDExLjItMTEuMlYxOTEuNmMwLTYuNC01LjItMTEuMi0xMS4yLTExLjJIMTk2LjRDMTkwLDE4MC40LDE4NS4yLDE4NS4yLDE4NS4yLDE5MS42eiIvPg0KICA8cGF0aCBzdHlsZT0iZmlsbDojRkY3MDU1OyIgZD0iTTM2Ni40LDEyOC44djE1OC40YzAsNy42LTYsMTMuNi0xMy42LDEzLjZIMjIwLjRMMTIzLjIsMzY4bDE3LjYtNjcuNmgtMzJjLTcuNiwwLTEzLjYtNi0xMy42LTEzLjYgdi0xNThjMC03LjYsNi0xMy42LDEzLjYtMTMuNmgyNDRDMzYwLDExNS4yLDM2Ni40LDEyMS4yLDM2Ni40LDEyOC44eiIvPg0KICA8Zz4NCiAgPGNpcmNsZSBzdHlsZT0iZmlsbDojRTZFOUVFOyIgY3g9IjE1My42IiBjeT0iMjA4IiByPSIxOS42Ii8+DQogICAgPGNpcmNsZSBzdHlsZT0iZmlsbDojRTZFOUVFOyIgY3g9IjIzMC44IiBjeT0iMjA4IiByPSIxOS42Ii8+DQogICAgPGNpcmNsZSBzdHlsZT0iZmlsbDojRTZFOUVFOyIgY3g9IjMwNy42IiBjeT0iMjA4IiByPSIxOS42Ii8+DQogIDwvZz4NCjwvc3ZnPg0K" alt="Avatar" style="width: 200px; height: 200px;">
</div>
<div class="container">
<p>Your users can open a ticket by typing /ticket and their message into the chat field</p>
</div>
</div>
</div>
<div class="features-cards-third">
<div class="card">
<div class="features-img">
<img src="https://tickybott.herokuapp.com/61dc5059d07b210a9e0a7881695a8e03.svg" alt="Avatar" style="width: 200px; height: 200px;">
</div>
<div class="container">
<p>Once you or another admin solved their problems you can type /ticket close #id to close the ticket</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="add-to-slack">
<div class="add-to-slack-container">
<h3>Start Using TickyBot Today</h3>
<p>TickyBot allows Slack teams to manage their support tickets</p>
<p>100% inside Slack, without having to switch between different apps.</p>
<button class="btn btn-slack">Add to Slack</button>
<p>... so you don't need to go back and forth with another app.</p>
</div>
</section>
<footer>
<p>Made with ❤️ by Laurent Mbuyu</p>
<p>Source code is available on our GitHub page</p>
<p>The app is not created by, affiliated with, or supported by Slack Technologies, Inc.</p>
</footer>
</body>
</html>