scratch – Diff between revs 115 and 121

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 115 Rev 121
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8 <meta name="description" content="quick asset upload"> 8 <meta name="description" content="quick asset upload">
9 <meta name="author" content="Wizardry and Steamworks"> 9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico"> 10 <link rel="icon" href="favicon.ico">
11   11  
12 <title>scratch</title> 12 <title>scratch</title>
13 13
14 <!-- Bootstrap core CSS --> 14 <!-- Bootstrap core CSS -->
15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
16 <!-- Font Awesome --> 16 <!-- Font Awesome -->
17 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 17 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
18 18
19 <!-- DropZone --> 19 <!-- DropZone -->
20 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet"> 20 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
21 21
22 <!-- Site-wide style CCS --> 22 <!-- Site-wide style CCS -->
23 <link href="css/style.css" rel="stylesheet"> 23 <link href="css/style.css" rel="stylesheet">
24 24
25 <!-- Local style --> 25 <!-- Local style -->
26 <link href="css/files/style.css" rel="stylesheet"> 26 <link href="css/files/style.css" rel="stylesheet">
27 </head> 27 </head>
28   28  
29 <body> 29 <body>
30   30  
31 <!-- Main component for a primary marketing message or call to action --> 31 <!-- Main component for a primary marketing message or call to action -->
32 <div class="paralax-background"></div> 32 <div class="paralax-background"></div>
33 <div class="jumbotron"> 33 <div class="jumbotron">
34 <h1>scratch copy</h1> 34 <h1>scratch copy</h1>
35 <p class="quote">the asset sharer</p> 35 <p class="quote">the asset sharer</p>
36 </div> 36 </div>
37   37  
38 <div class="container"> 38 <div class="container">
39 39
40 <ul class="nav nav-tabs"> 40 <ul class="nav nav-tabs">
41 <li><a href="index.html">Home</a></li> 41 <li><a href="index.html">Home</a></li>
42 <li class="active"><a href="#">File</a></li> 42 <li class="active"><a href="#">File</a></li>
43 <li><a href="text.html">Text</a></li> 43 <li><a href="text.html">Text</a></li>
44 <li><a href="draw.html">Draw</a></li> 44 <li><a href="draw.html">Draw</a></li>
45 <li><a href="link.html">Link</a></li> 45 <li><a href="link.html">Link</a></li>
46 <li><a href="gallery.html">Gallery</a></li> 46 <li><a href="view.html">View</a></li>
47 </ul> 47 </ul>
48 48
49 <div id="main-panel" class="panel panel-default"> 49 <div id="main-panel" class="panel panel-default">
50 <div class="panel-heading"> 50 <div class="panel-heading">
51 <div id="actions" class="row"> 51 <div id="actions" class="row">
52 <div class="col-lg-5"> 52 <div class="col-lg-5">
53 <div class="btn-group btn-group-justified" role="group"> 53 <div class="btn-group btn-group-justified" role="group">
54 <!-- The fileinput-button span is used to style the file input field as button --> 54 <!-- The fileinput-button span is used to style the file input field as button -->
55 <div class="btn-group" role="group"> 55 <div class="btn-group" role="group">
56 <button id="uploadbutton" type="button" class="btn btn-default"> 56 <button id="uploadbutton" type="button" class="btn btn-default">
57 <i class="glyphicon glyphicon-plus"></i> 57 <i class="glyphicon glyphicon-plus"></i>
58 <span>Add...</span> 58 <span>Add...</span>
59 </button> 59 </button>
60 </div> 60 </div>
61 <div class="btn-group" role="group"> 61 <div class="btn-group" role="group">
62 <button type="submit" class="btn btn-default start"> 62 <button type="submit" class="btn btn-default start">
63 <i class="glyphicon glyphicon-upload"></i> 63 <i class="glyphicon glyphicon-upload"></i>
64 <span>Upload All</span> 64 <span>Upload All</span>
65 </button> 65 </button>
66 </div> 66 </div>
67 <div class="btn-group" role="group"> 67 <div class="btn-group" role="group">
68 <button type="reset" class="btn btn-danger cancel"> 68 <button type="reset" class="btn btn-danger cancel">
69 <i class="glyphicon glyphicon-ban-circle"></i> 69 <i class="glyphicon glyphicon-ban-circle"></i>
70 <span>Cancel All</span> 70 <span>Cancel All</span>
71 </button> 71 </button>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 <div class="panel-body" id="uploadpanel"> 77 <div class="panel-body" id="uploadpanel">
78 <div class="table table-striped files" id="previews"> 78 <div class="table table-striped files" id="previews">
79 <div id="template" class="file-row"> 79 <div id="template" class="file-row">
80 <!-- This is used as the file preview template --> 80 <!-- This is used as the file preview template -->
81 <div> 81 <div>
82 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> 82 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
83 </div> 83 </div>
84 <div> 84 <div>
85 <p id="name" class="name" data-dz-name></p> 85 <p id="name" class="name" data-dz-name></p>
86 <div class="input-group"> 86 <div class="input-group">
87 <input id="URL" type="text" class="form-control" readonly> 87 <input id="URL" type="text" class="form-control" readonly>
88 <span class="input-group-btn"> 88 <span class="input-group-btn">
89 <button id="btn-mailto" class="btn btn-default" type="button"><i class="glyphicon glyphicon-envelope"></i></button> 89 <button id="btn-mailto" class="btn btn-default" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
90 </span> 90 </span>
91 <span class="input-group-btn"> 91 <span class="input-group-btn">
92 <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button> 92 <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button>
93 </span> 93 </span>
94 <span class="input-group-btn"> 94 <span class="input-group-btn">
95 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> 95 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
96 </span> 96 </span>
97 </div> 97 </div>
98 <div class="input-group"> 98 <div class="input-group">
99 <input id="deleteURL" type="text" class="form-control" readonly> 99 <input id="deleteURL" type="text" class="form-control" readonly>
100 <span class="input-group-btn"> 100 <span class="input-group-btn">
101 <button id="btn-clipboard-delete" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> 101 <button id="btn-clipboard-delete" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
102 </span> 102 </span>
103 </div> 103 </div>
104 <strong class="error text-danger" data-dz-errormessage></strong> 104 <strong class="error text-danger" data-dz-errormessage></strong>
105 </div> 105 </div>
106 <div> 106 <div>
107 <p class="size" data-dz-size></p> 107 <p class="size" data-dz-size></p>
108 <div id="progress" class="progress active" role="progressbar"> 108 <div id="progress" class="progress active" role="progressbar">
109 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div> 109 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
110 </div> 110 </div>
111 </div> 111 </div>
112 <div> 112 <div>
113 <button id="start" class="btn btn-default start"> 113 <button id="start" class="btn btn-default start">
114 <i class="glyphicon glyphicon-upload"></i> 114 <i class="glyphicon glyphicon-upload"></i>
115 <span>Upload</span> 115 <span>Upload</span>
116 </button> 116 </button>
117 <button id="cancel" data-dz-remove class="btn btn-warning cancel"> 117 <button id="cancel" data-dz-remove class="btn btn-warning cancel">
118 <i class="glyphicon glyphicon-ban-circle"></i> 118 <i class="glyphicon glyphicon-ban-circle"></i>
119 <span>Cancel</span> 119 <span>Cancel</span>
120 </button> 120 </button>
121 <button id="remove" data-dz-remove class="btn btn-danger remove"> 121 <button id="remove" data-dz-remove class="btn btn-danger remove">
122 <i class="glyphicon glyphicon-remove"></i> 122 <i class="glyphicon glyphicon-remove"></i>
123 <span>Remove</span> 123 <span>Remove</span>
124 </button> 124 </button>
125 </div> 125 </div>
126 </div> 126 </div>
127   127  
128 </div> 128 </div>
129 </div> 129 </div>
130 <!-- The global file processing state --> 130 <!-- The global file processing state -->
131 <div class="fileupload-process"> 131 <div class="fileupload-process">
132 <div id="total-progress" class="progress active" role="progressbar"> 132 <div id="total-progress" class="progress active" role="progressbar">
133 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div> 133 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137   137  
138 </div> <!-- /container --> 138 </div> <!-- /container -->
139 139
140 <div id="footer"> 140 <div id="footer">
141 <div class="container"> 141 <div class="container">
142 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p> 142 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
143 </div> 143 </div>
144 </div> 144 </div>
145   145  
146 <!-- jQuery --> 146 <!-- jQuery -->
147 <script src="bower_components/jquery/dist/jquery.min.js"></script> 147 <script src="bower_components/jquery/dist/jquery.min.js"></script>
148 <!-- BootStrap --> 148 <!-- BootStrap -->
149 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 149 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
150 <!-- DropZone --> 150 <!-- DropZone -->
151 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> 151 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
152 <!-- Clipboard --> 152 <!-- Clipboard -->
153 <script src="bower_components/clipboard/dist/clipboard.min.js"></script> 153 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
154 <script> 154 <script>
155 $(document).ready(() => { 155 $(document).ready(() => {
156 $.get('session.php').then((token) => { 156 $.get('session.php').then((token) => {
157 // Get the template HTML and remove it from the doument 157 // Get the template HTML and remove it from the doument
158 var previewNode = document 158 var previewNode = document
159 .querySelector("#template"); 159 .querySelector("#template");
160 previewNode.id = ""; 160 previewNode.id = "";
161 var previewTemplate = previewNode 161 var previewTemplate = previewNode
162 .parentNode 162 .parentNode
163 .innerHTML; 163 .innerHTML;
164 previewNode 164 previewNode
165 .parentNode 165 .parentNode
166 .removeChild(previewNode); 166 .removeChild(previewNode);
167 167
168 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone 168 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
169 url: 'file.php', // Set the url 169 url: 'file.php', // Set the url
170 paramName: 'file', 170 paramName: 'file',
171 thumbnailWidth: 80, 171 thumbnailWidth: 80,
172 thumbnailHeight: 80, 172 thumbnailHeight: 80,
173 //parallelUploads: 20, 173 //parallelUploads: 20,
174 previewTemplate: previewTemplate, 174 previewTemplate: previewTemplate,
175 autoQueue: false, // Make sure the files aren't queued until manually added 175 autoQueue: false, // Make sure the files aren't queued until manually added
176 previewsContainer: '#previews', // Container to display the previews 176 previewsContainer: '#previews', // Container to display the previews
177 clickable: [ 177 clickable: [
178 '#uploadbutton', 178 '#uploadbutton',
179 '#uploadpanel' 179 '#uploadpanel'
180 ], 180 ],
181 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files. 181 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
182 }).on('sending', (file, xhr, formData) => { 182 }).on('sending', (file, xhr, formData) => {
183 // Append session token. 183 // Append session token.
184 formData.append('token', token); 184 formData.append('token', token);
185 }).on('addedfile', (file) => { 185 }).on('addedfile', (file) => {
186 // Hookup the start button 186 // Hookup the start button
187 file.previewElement.querySelector(".start").onclick = () => { 187 file.previewElement.querySelector(".start").onclick = () => {
188 myDropzone.enqueueFile(file); 188 myDropzone.enqueueFile(file);
189 }; 189 };
190 }).on('totaluploadprogress', (progress) => { 190 }).on('totaluploadprogress', (progress) => {
191 document 191 document
192 .querySelector('#total-progress .progress-bar') 192 .querySelector('#total-progress .progress-bar')
193 .style 193 .style
194 .width = progress + "%"; 194 .width = progress + "%";
195 }).on('sending', (file) => { 195 }).on('sending', (file) => {
196 // Show the total progress bar when upload starts 196 // Show the total progress bar when upload starts
197 document.querySelector("#total-progress") 197 document.querySelector("#total-progress")
198 .style 198 .style
199 .opacity = 1; 199 .opacity = 1;
200 200
201 // And disable the start button. 201 // And disable the start button.
202 file 202 file
203 .previewElement 203 .previewElement
204 .querySelector(".start") 204 .querySelector(".start")
205 .setAttribute("disabled", "disabled"); 205 .setAttribute("disabled", "disabled");
206 }).on('queuecomplete', (progress) => { 206 }).on('queuecomplete', (progress) => {
207 document.querySelector("#total-progress") 207 document.querySelector("#total-progress")
208 .style 208 .style
209 .opacity = "0"; 209 .opacity = "0";
210 }).on('success', (file, data) => { 210 }).on('success', (file, data) => {
211 // Serialize JSON to object. 211 // Serialize JSON to object.
212 data = JSON.parse(data); 212 data = JSON.parse(data);
213 213
214 // Set the ID of the URL box. 214 // Set the ID of the URL box.
215 const boxURLID = '_' + Math 215 const boxURLID = '_' + Math
216 .random() 216 .random()
217 .toString(36) 217 .toString(36)
218 .substr(2, 9); 218 .substr(2, 9);
219 file 219 file
220 .previewElement 220 .previewElement
221 .querySelector("#URL") 221 .querySelector("#URL")
222 .value = location.protocol 222 .value = location.protocol
223 .concat("//") 223 .concat("//")
224 .concat(window.location.hostname) 224 .concat(window.location.hostname)
225 .concat("/") 225 .concat("/")
226 .concat(data.hash); 226 .concat(data.hash);
227 227
228 file 228 file
229 .previewElement 229 .previewElement
230 .querySelector("#URL") 230 .querySelector("#URL")
231 .setAttribute('id', boxURLID) 231 .setAttribute('id', boxURLID)
232   232  
233 // Set the ID of the delete URL box. 233 // Set the ID of the delete URL box.
234 const deleteBoxURLID = '_' + Math 234 const deleteBoxURLID = '_' + Math
235 .random() 235 .random()
236 .toString(36) 236 .toString(36)
237 .substr(2, 9); 237 .substr(2, 9);
238 file 238 file
239 .previewElement 239 .previewElement
240 .querySelector("#deleteURL") 240 .querySelector("#deleteURL")
241 .value = location.protocol.concat("//") 241 .value = location.protocol.concat("//")
242 .concat(window.location.hostname) 242 .concat(window.location.hostname)
243 .concat("/") 243 .concat("/")
244 .concat(data.timestamp) 244 .concat(data.timestamp)
245 .concat("/") 245 .concat("/")
246 .concat(data.hash); 246 .concat(data.hash);
247 247
248 file 248 file
249 .previewElement 249 .previewElement
250 .querySelector("#deleteURL") 250 .querySelector("#deleteURL")
251 .setAttribute('id', deleteBoxURLID) 251 .setAttribute('id', deleteBoxURLID)
252 252
253 // Set the ID of the URL clipboard button. 253 // Set the ID of the URL clipboard button.
254 const clipButtonID = '_' + Math 254 const clipButtonID = '_' + Math
255 .random() 255 .random()
256 .toString(36) 256 .toString(36)
257 .substr(2, 9); 257 .substr(2, 9);
258 file 258 file
259 .previewElement 259 .previewElement
260 .querySelector("#btn-clipboard") 260 .querySelector("#btn-clipboard")
261 .setAttribute('data-clipboard-target', '#' + boxURLID) 261 .setAttribute('data-clipboard-target', '#' + boxURLID)
262 262
263 file 263 file
264 .previewElement 264 .previewElement
265 .querySelector("#btn-clipboard") 265 .querySelector("#btn-clipboard")
266 .setAttribute('id', clipButtonID); 266 .setAttribute('id', clipButtonID);
267 267
268 new Clipboard('#' + clipButtonID); 268 new Clipboard('#' + clipButtonID);
269 269
270 // Set the ID of the delete URL clipboard button. 270 // Set the ID of the delete URL clipboard button.
271 const clipButtonDeleteID = '_' + Math 271 const clipButtonDeleteID = '_' + Math
272 .random() 272 .random()
273 .toString(36) 273 .toString(36)
274 .substr(2, 9); 274 .substr(2, 9);
275 file 275 file
276 .previewElement 276 .previewElement
277 .querySelector("#btn-clipboard-delete") 277 .querySelector("#btn-clipboard-delete")
278 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID) 278 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID)
279 279
280 file 280 file
281 .previewElement 281 .previewElement
282 .querySelector("#btn-clipboard-delete") 282 .querySelector("#btn-clipboard-delete")
283 .setAttribute('id', clipButtonDeleteID); 283 .setAttribute('id', clipButtonDeleteID);
284 284
285 new Clipboard('#' + clipButtonDeleteID); 285 new Clipboard('#' + clipButtonDeleteID);
286 286
287 // Set the ID of the mailto button. 287 // Set the ID of the mailto button.
288 const mailToButtonID = '_' + Math 288 const mailToButtonID = '_' + Math
289 .random() 289 .random()
290 .toString(36) 290 .toString(36)
291 .substr(2, 9); 291 .substr(2, 9);
292 292
293 file 293 file
294 .previewElement 294 .previewElement
295 .querySelector("#btn-mailto") 295 .querySelector("#btn-mailto")
296 .setAttribute('id', mailToButtonID); 296 .setAttribute('id', mailToButtonID);
297   297  
298 file 298 file
299 .previewElement 299 .previewElement
300 .querySelector(".start") 300 .querySelector(".start")
301 .setAttribute("disabled", "disabled"); 301 .setAttribute("disabled", "disabled");
302 file 302 file
303 .previewElement 303 .previewElement
304 .querySelector(".cancel") 304 .querySelector(".cancel")
305 .setAttribute("disabled", "disabled"); 305 .setAttribute("disabled", "disabled");
306 306
307 $('#' + mailToButtonID).on('click', () => { 307 $('#' + mailToButtonID).on('click', () => {
308 window.location.href = "mailto:?subject="+ 308 window.location.href = "mailto:?subject="+
309 encodeURIComponent("Can't scratch this!") + "&body=" + 309 encodeURIComponent("Can't scratch this!") + "&body=" +
310 encodeURIComponent($('#' + boxURLID).val()); 310 encodeURIComponent($('#' + boxURLID).val());
311 }); 311 });
312 312
313 // Set the ID of the facebook button. 313 // Set the ID of the facebook button.
314 const faceBookButtonID = '_' + Math 314 const faceBookButtonID = '_' + Math
315 .random() 315 .random()
316 .toString(36) 316 .toString(36)
317 .substr(2, 9); 317 .substr(2, 9);
318   318  
319 file 319 file
320 .previewElement 320 .previewElement
321 .querySelector("#btn-facebook") 321 .querySelector("#btn-facebook")
322 .setAttribute('id', faceBookButtonID); 322 .setAttribute('id', faceBookButtonID);
323 323
324 switch(data.opengraph) { 324 switch(data.opengraph) {
325 case true: 325 case true:
326 // Enable the facebook button. 326 // Enable the facebook button.
327 file 327 file
328 .previewElement 328 .previewElement
329 .querySelector('#' + faceBookButtonID) 329 .querySelector('#' + faceBookButtonID)
330 .removeAttribute("disabled"); 330 .removeAttribute("disabled");
331 331
332 // Change the URL when the user clicks the button. 332 // Change the URL when the user clicks the button.
333 $('#' + faceBookButtonID).on('click', () => { 333 $('#' + faceBookButtonID).on('click', () => {
334 $('#' + boxURLID) 334 $('#' + boxURLID)
335 .val( 335 .val(
336 location.protocol.concat("//") 336 location.protocol.concat("//")
337 .concat(window.location.hostname) 337 .concat(window.location.hostname)
338 .concat("/") 338 .concat("/")
339 .concat("og") 339 .concat("og")
340 .concat("/") 340 .concat("/")
341 .concat(data.hash) 341 .concat(data.hash)
342 ); 342 );
343 }); 343 });
344 break; 344 break;
345 default: 345 default:
346 // Disable the facebook button. 346 // Disable the facebook button.
347 file 347 file
348 .previewElement 348 .previewElement
349 .querySelector('#' + faceBookButtonID) 349 .querySelector('#' + faceBookButtonID)
350 .setAttribute("disabled", "disabled"); 350 .setAttribute("disabled", "disabled");
351 break; 351 break;
352 } 352 }
353 }); 353 });
354 354
355 document.querySelector("#actions .start").onclick = () => { 355 document.querySelector("#actions .start").onclick = () => {
356 myDropzone.enqueueFiles( 356 myDropzone.enqueueFiles(
357 myDropzone 357 myDropzone
358 .getFilesWithStatus(Dropzone.ADDED)); 358 .getFilesWithStatus(Dropzone.ADDED));
359 }; 359 };
360 360
361 document.querySelector("#actions .cancel").onclick = () => { 361 document.querySelector("#actions .cancel").onclick = () => {
362 myDropzone.removeAllFiles(true); 362 myDropzone.removeAllFiles(true);
363 }; 363 };
364 }); 364 });
365 365
366 // Scroll to the panel. 366 // Scroll to the panel.
367 $('html, body').animate({ 367 $('html, body').animate({
368 scrollTop: $('#main-panel').offset().top 368 scrollTop: $('#main-panel').offset().top
369 }, 'slow'); 369 }, 'slow');
370 }); 370 });
371 </script> 371 </script>
372 <!-- Jumbotron parallax effect --> 372 <!-- Jumbotron parallax effect -->
373 <script> 373 <script>
374 const jumboHeight = $('.jumbotron').outerHeight(); 374 const jumboHeight = $('.jumbotron').outerHeight();
375 function parallax(){ 375 function parallax(){
376 var scrolled = $(window).scrollTop(); 376 var scrolled = $(window).scrollTop();
377 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px'); 377 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
378 } 378 }
379   379  
380 $(window).scroll(function(e){ 380 $(window).scroll(function(e){
381 parallax(); 381 parallax();
382 }); 382 });
383 </script> 383 </script>
384 </body> 384 </body>
385 </html> 385 </html>
386   386