-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (116 loc) · 5.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
<title>Slack on Keys</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body class="p-5 pt-3">
<section class="mb-5">
<img class="mx-auto d-block" src="./images/icon.png" width="64px" height="64px" alt="app-icon">
<h1 class="text-center fw-bold">Slack on Keys</h1>
<h4 class="text-center"><b>⚡ Control your Slack from any app window with keyboard shortcuts ⚡</b>
</h4>
</section>
<section class="my-5">
<div class="d-flex align-items-center justify-content-center mb-2">
<div class="form-floating">
<input placeholder="Starts with xoxp-" id="i-slack-token" class="form-control w-auto" />
<label for="">Paste Slack token</label>
</div>
<div class="mt-2 mx-4">
<a href="#" id="generate-slack-token">Get
your Slack token ↗</a>
</div>
</div>
</div>
</section>
<div class="accordion my-5" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" data-bs-theme="dark">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
🟢 Active and away action shortcuts
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<section id="presence">
<div class="row">
<div class="col-6 mb-3">
<p class="mb-2"><b>SET AS ACTIVE</b></p>
</div>
<div class="col-6 mb-3">
<p class="mb-2"><b>SET AS AWAY</b></p>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" data-bs-theme="dark">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
🔔 Notification action shortcuts
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<section id="dnd">
<div class="row">
<div class="col-12 mb-5">
<p class="mb-2"><b>PAUSE NOTIFICATIONS</b></p>
<button id="b-dnd-set" type="button" class="btn btn-outline-primary btn-sm mt-2">Add
another shortcut</button>
</div>
<div class="col-12 mb-2">
<p class="mb-2"><b>RESUME NOTIFICATIONS</b></p>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" data-bs-theme="dark">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
🔮 Status action shortcuts
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<section id="status">
<div class="row">
<div class="col-12 mb-5">
<p class="mb-2"><b>SET STATUS</b></p>
<button id="b-status-set" type="button" class="btn btn-outline-primary btn-sm mt-2">Add
another shortcut</button>
</div>
<div class="col-12 mb-2">
<p class="mb-2"><b>CLEAR STATUS</b></p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="text-center">
<button id="b-save" type="button" class="btn btn-outline-primary btn-sm">Minimise to
system tray</button>
<div class="mt-5 mb-3">
<a href="#" id="downloads">Downloads ↗</a>
</div>
<p id="app-version" class="my-3"></p>
</div>
<script src="./js/bootstrap/bootstrap.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>