-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (169 loc) · 7.31 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
<!DOCTYPE html>
<html>
<head>
<!-- Set character encoding for the document -->
<meta charset="utf-8">
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Meta Description -->
<meta name="description" content="A clone of the TickyBot landing page named RoboToucan">
<!-- insert Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Signika" rel="stylesheet">
<!-- insert Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous">
<!-- link to main stylesheet -->
<link href="styles/main.css" type="text/css" rel="stylesheet">
<!-- link to responsive stylesheet -->
<link href="styles/responsive.css" type="text/css" rel="stylesheet">
<!-- font-awesome for collapsable navbar -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>RoboToucan - Chingu Voyage 3 : TickyBot clone</title>
</head>
<body>
<nav role="navigation" id="home">
<!--toggle for small screens-->
<div class="toggle">
<i class="fa fa-bars menu"></i>
</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#cta">Add to Slack</a></li>
</ul>
</nav>
<!-- beginning of header -->
<header>
<div class="container">
<div class="wrapper-header">
<div class="header-txt js-animate">
<h1><strong>Robo</strong>Toucan</h1>
<p>Let your team manage their tickets 100% inside Slack</p>
<a class="btn-header" href="https://slack.com/">
<img src="images/Slack_Mark.svg" id="slack-logo" alt="slack logo">
<span>Add to
<strong>Slack</strong>
</span>
</a>
</div>
<div class="header-img js-animate">
<div>
<img class="robotoucan-img" src="images/robot_toucannon.png" alt="image of the RoboToucan">
</div>
</div>
</div>
</div>
</header>
<!-- end of header -->
<section class="what-is" id="about">
<div class="container">
<h2 class="section-heading js-animate">What is <span class="fancy">Robo</span>Toucan</h2>
<!-- beginning of wrapper -->
<div class="wrapper-about">
<div class="what-is-message js-animate">
<p>
<span class="fancy">Robo</span>Toucan 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="what-is-message js-animate">
<p>
With RoboToucan 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>
<!-- end of wrapper -->
<p class="js-animate">
Support requests shouldn't be handled through Slack's direct messages.<br>
<em>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.</em>
</p>
</div>
</section>
<!-- begin how-it-works sections -->
<section class="how-it-works" id="features">
<div class="container">
<h2 class="section-heading">How It Works</h2>
<!-- beginning of wrapper -->
<div class="wrapper-features">
<!-- card 1 -->
<div class="card js-animate">
<img class="card-img" src="images/workplace.svg" alt="">
<div class="card-description">
<p>You can add RoboToucan to your Slack workplace by scrolling down or <a href="#">clicking here</a></p>
</div>
</div>
<!-- end of card 1 -->
<!-- card 2 -->
<div class="card js-animate">
<img class="card-img" src="images/message-bubble.svg" alt="">
<div class="card-description">
<p>Your users can open a ticket by typing <code>/ticket</code> and their message into the chat field</p>
</div>
</div>
<!-- end of card 2 -->
<!-- card 3 -->
<div class="card js-animate">
<img class="card-img" src="images/checklist.svg" alt="">
<div class="card-description">
<p>Once you or another admin solved their problems you can type <code>/ticket close #id</code> to close the ticket</p>
</div>
</div>
<!-- end of card 3 -->
</div>
<!-- end of wrapper -->
</section>
<!-- end of how-it-works action -->
<!--begin call to action section -->
<section id="cta">
<h2 class="section-heading">Start Using <span class="fancy">Robo</span>Toucan Today</h2>
<div class="cta-text">
<p><span class="fancy">Robo</span>Toucan allows Slack teams to manage their support tickets 100% inside Slack, without having to switch between different apps.</p>
</div>
<a class="btn-cta" href="https://slack.com/">
<img src="images/Slack_Mark.svg" id="slack-logo" alt="slack logo">
<span>Add to
<strong>Slack</strong>
</span>
</a>
<p class="cta-text">... so you don't need to go back and forth with another app.</p>
</section>
<!-- end of call to action section -->
<footer>
<p>Built with 💪 by the Chingu Voyage 3 Toucans-07 Team<br> Source code available on our <a href="https://github.com/chingu-voyage3/toucans-07">Github</a> page<br> Reverse-engineered from the <a href="https://tickybott.herokuapp.com/">TickyBot</a> app
designed by the Chingu Voyage 2 Bears Team<br> This page is not created by, affiliated with, or supported by Slack Technologies, Inc.</p>
<a href="#home" id="back-to-top" role="button">
<i class="fa fa-angle-up"></i>
</a>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="scripts/whenInViewport.min.js"></script>
<script type="text/javascript">
let e = document.querySelectorAll(".js-animate");
$('.js-animate').whenInViewport(function(e) {
e.addClass('reveal-item');
});
$(document).ready(function() {
$('.menu').click(function() {
$('ul').toggleClass('active');
});
});
// When the user scrolls down 20px from the top of the document, show back-to-top button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("back-to-top").style.display = "block";
} else {
document.getElementById("back-to-top").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
</body>
</html>