shortcutguide/index.html at master · CalicoCatalyst/shortcutguide · GitHub

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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222

<!DOCTYPE HTML>

<html>

<!-- RC1. Beginning of this project. Will be beta tested on folks before ANY release :) -->
<!-- We're going to pack this all into one file at release. Modular is cool but I want an easily downloadable standalone-->

<!--

REMEMBER TO STICK IN GOOGLE ANALYTICS AND SOME FORM OF ADBLOCK MESSAGE

Going to use a rather unorthodox approach to this webpage.

We have 19 categories each with under 20 shortcuts in them.

I can create 20 HTML divs for the 19 elements. The text and subtext can be set in javascript.

All of the shortcuts will be stored in the JS

Designed and coded from scratch by /u/Insxnity

Minimum Resolution before things stop working: 245px w x 98px h

Things look beautiful on mobile screens. Wonky ones or people who insist on portrait mode might look a bit off. s

Site is functional at any resolution above that but things start to get
        noticably buggy around 2000px raw unscaled width and 4000px raw unscaled height

        Still usable on an UHD screen with no scaling.


 -->


<head>
  <title>Ableton 10 Shortcut Guide</title>
  <meta name="description" content="" />
  <script src="ASG2.js"></script>
  <meta name="keywords" content="" />
  <link rel="stylesheet" type="text/css" href="ASG2.css">
  <link rel="stylesheet" type="text/css" id="darkmode" href="darkmode.css" />
  <style>
  </style>
  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109451859-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-109451859-2');
</script>

</head>

<body onload="callCategories();">

    <div class="sticky headerbox" id="stickyHeaderBox">

        <div class="title" id="pagename"><div class="clickable" id="abletonlogo" onClick="toggleDarkMode();" title="Toggle Light/Dark Mode" style="background-image:url('abletonlogo.png');width: 50px;display: inline-block;height: 23px;background-size: 98px 23px;"></div> Ableton Live 10 Shortcut Guide<a id="formac" style="display:none"> (For Mac!)</a></div>

        <input id="shortcutsearch" onInput="search(this.value);" name="Search Shortcuts" type="text" placeholder="Search Shortcuts" maxlength="20">

    </div>
    <div class="pagetitle" id="pagetitle">
        Categories
    </div>
    <div class="content">
    <style>


    </style>
        <div class="rightsidebar" id="rightsidebar">
            <div class="sidebaritem clickable" id="dmtoggle" onClick="toggleDarkMode()">
                Toggle Light/Dark Mode
            </div>
            <div class="sidebaritem clickable" id="mactoggle" onClick="toggleMacShortcuts()">
                View Mac Shortcuts
            </div>
        </div>
        <div class="itemcontainer" id="shortcutcontainer">
            <div class="shortcutinfocontainer" id="shortcutinfocontainer" style="display:none">

            <div id="scicholder"><div id="shortcutname">
                     Placeholder Text
                </div>
                <div id="shortcut">
                     <kbd>Shortcut</kbd>
                </div>
                </div>
            </div>
            <div class="uibox clickable" id="uib1" onclick="buttonClicked(1)">
                Placeholder Title
                <div class="subtext">
                    If you're reading this the page did not load properly
                </div>
            </div>
        <div class="uibox clickable" id="uib2" onclick="buttonClicked(2)">
                Placeholder Title
                <div class="subtext">
                    Try refreshing the page.
                </div>
            </div>
        <div class="uibox clickable" id="uib3" onclick="buttonClicked(3)">
                Placeholder Title
                <div class="subtext">
                    This is what you'll see if the javascript file doesn't load properly
                </div>
            </div>
        <div class="uibox clickable" id="uib4" onclick="buttonClicked(4)">
                Placeholder Title
                <div class="subtext">
                    You'll also see this if you're on some old browser
                </div>
            </div>
        <div class="uibox clickable" id="uib5" onclick="buttonClicked(5)">
                Placeholder Title
                <div class="subtext">
                    I dont support old Internet Explorer versions
                </div>
            </div>
        <div class="uibox clickable" id="uib6" onclick="buttonClicked(6)">
                Placeholder Title
                <div class="subtext">
                    If you're using a browser other than Chrome/Firefox/IE/Opera and get this error
                </div>
            </div>
        <div class="uibox clickable" id="uib7" onclick="buttonClicked(7)">
                Placeholder Title
                <div class="subtext">
                    It likely doesn't support some javascript syntax used here
                </div>
            </div>
        <div class="uibox clickable" id="uib8" onclick="buttonClicked(8)">
                Placeholder Title
                <div class="subtext">
                    I'll throw a link up at some point that removes certain features in exchange
                </div>
            </div>
        <div class="uibox clickable" id="uib9" onclick="buttonClicked(9)">
                Placeholder Title
                <div class="subtext">
                    For you being able to use this tool
                </div>
            </div>
        <div class="uibox clickable" id="uib10" onclick="buttonClicked(10)">
                Placeholder Title
                <div class="subtext">
                    <3
                </div>
            </div>
        <div class="uibox clickable" id="uib11" onclick="buttonClicked(11)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>
        <div class="uibox clickable" id="uib12" onclick="buttonClicked(12)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>
        <div class="uibox clickable" id="uib13" onclick="buttonClicked(13)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>
        <div class="uibox clickable" id="uib14" onclick="buttonClicked(14)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>
        <div class="uibox clickable" id="uib15" onclick="buttonClicked(15)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>
        <div class="uibox clickable" id="uib16" onclick="buttonClicked(16)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>
        <div class="uibox clickable" id="uib17" onclick="buttonClicked(17)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>
        <div class="uibox clickable" id="uib18" onclick="buttonClicked(18)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>
        <div class="uibox clickable" id="uib19" onclick="buttonClicked(19)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>
        <div class="uibox clickable" id="uib20" onclick="buttonClicked(20)">
                Placeholder Title
                <div class="subtext">
                    Alan add info please
                </div>
            </div>

        <p id="creditline">Designed And Coded from Scratch by /u/CalicoCatalyst</p>
        <p id="donatebutton" title="Donate to help keep this site online and fund future projects!"><a href="http://paypal.me/CalicoCatalyst">Donate</a></p>
        </div>

    </div>

</body>

</html>