-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (108 loc) · 7.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>MDN-Bot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msapplication-config" content="resources/images/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="180x180" href="resources/images/apple-touch-icon.png">
<link rel="icon" type="image/png" href="resources/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="resources/images/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="resources/images/manifest.json">
<link rel="mask-icon" href="resources/images/safari-pinned-tab.svg" color="#2b5797">
<link rel="shortcut icon" href="resources/images/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="resources/css/style.css" rel="stylesheet">
<link href="resources/css/queries.css" rel="stylesheet">
</head>
<body>
<!--Header Plan-->
<div class="row header">
<header id="header" class="dock">
<!--Header Left Image-->
<div class="grid-half header-img">
<img src="resources/images/bot-logo.svg" alt="Header Bot Image" id="logo">
</div>
<!--Header Right Part-->
<div class="grid-half header-title">
<h1>MDNBot</h1>
<span class="credits">A slack app by <strong>FLYING HORSES</strong></span>
<a href="#"><img src="resources/images/add_to_slack.png" alt=""></a>
<a href="https://flying-horses.github.io/Bot-Splash-Page/feedback.html" class="support"><i class="fa fa-life-ring" aria-hidden="true"></i> Support</a>
</div>
</header>
</div>
<!-- Description Plan -->
<div class="row description">
<div class="dock">
<section class="grid-half" id="decription">
<p>I'm <strong>MDNBot</strong> and my job is to make your life as a develepor easier! Need a quick reference on CSS, HTML or JavaScript web standards? MDNbot has you covered.</p>
<p>Just tell me what you're looking for and I'll search the <a href="https://developer.mozilla.org/en-US/">Mozilla Developer Network</a> (MDN) for you and find the answer.</p>
<p>I'm currently available for Slack, you can easily add me to your Slack team by clicking the button below!</p>
<a href="#"><img src="resources/images/add_to_slack.png" alt=" Add to Slack Logo"></a>
</section>
<div class="grid-half">
<img src="resources/images/screenshot.png" class="screenshot" alt="App Screenshot">
</div>
</div>
</div>
<!-- HOW TO USE IT -->
<div class="row usages">
<h2 class="usages-title">HOW TO USE ME...</h2>
<div class="dock">
<section class="grid-half">
<p>Slash Commands enable you to interact with MDNBot from within Slack. Start your search by typing <code>/mdnbot-search</code> followed by your <strong>searchTerm.</strong></p>
<p>Let's say you want information on <strong>reduce</strong>, just type <code>/mdnbot-search reduce</code> This will return a list of (max.) 10 items related to <strong>reduce</strong> which is only visible to you</p>
<p>If you want to filter your search results by topic (eg. js, html, css), type the topic as the last term in your command, for example <code>/mdnbot-search reduce js</code></p>
<p>If you want to show a search result to another developer, type <code>/mdnbot-show</code> followed by the <strong>searchTerm</strong> (and <em>searchTopic</em> if needed). By default the first result of your search will be displayed. If you want to display a specific result, add the result number to the end of your show command. Example: <code>/mdnbot-show reduce 4</code></p>
<p><strong>Happy searching!</strong></p>
</section>
<section class="grid-half commands">
<div class="bot-background">
<img src="resources/images/bot_command.svg" alt="">
</div>
<table class="command-table">
<tbody>
<tr><td id="table-title">Available Commands</td></tr>
<tr>
<td><code class="inverse">/mdnbot</code> <span class="command-data">This command returns a brief description of the app and a basic how-to-use instruction.</span></td>
</tr>
<tr>
<td><code class="inverse">/mdnbot-search [searchTerm] [searchTopic]*</code><br><span class="command-data">This command performs a private search and resturns a maximum of 10 results, which are only visible to you.</span></td>
</tr>
<tr>
<td><code class="inverse">/mdnbot-show [searchTerm] [searchTopic] [itemNumber] *</code><br><span class="command-data">This command performs a public search and returns 1 result, which is visible for everyone. If, for example, you want to show the 4th item of your search, just add the number 4 to the end of your show command.</span></td>
</tr>
<tr>
<td><code class="inverse">/mdnbot-random</code><span class="command-data">This command performs a public search with a random term and returns a single result, which is visible to everyone.</span></td>
</tr>
<tr>
<td><span class="command-data"><strong>* searchTopic and itemNumber </strong>are optional parameters.</span></td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
<!-- FOOTER SECTION -->
<footer class="row" id="footer">
<div class="dock">
<section class="grid-half help-img">
<a href="https://flying-horses.github.io/Bot-Splash-Page/privacy-policy.html" alt="Privacy Policy Link" class="policy"><i class="fa fa-user-secret" aria-hidden="true"></i> Privacy policy</a>
<div class="footer-img">
<img src="resources/images/bot_help.svg" alt="Bot Help Image">
</div>
</section>
<section class="grid-half social-links">
<h4>Need help or found an issue...
<a href="https://github.com/flying-horses/Bot-Splash-Page/issues/new" alt="Github Issues Link"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="mailto:vishami3r@outlook.com?subject=Bot Support Request" alt="Email Link"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</h4>
</section>
</div>
</footer>
</body>
</html>