scratch – Diff between revs 91 and 99

Subversion Repositories:
Rev:
Only display areas with differencesIgnore whitespace
Rev 91 Rev 99
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 copy</title> 12 <title>scratch copy</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 <!-- Bootstrap Toggle --> 18 <!-- Bootstrap Toggle -->
19 <link href="bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet"> 19 <link href="bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
20 20
21 <!-- Site-wide style CCS --> 21 <!-- Site-wide style CCS -->
22 <link href="css/style.css" rel="stylesheet"> 22 <link href="css/style.css" rel="stylesheet">
23 </head> 23 </head>
24   24  
25 <body> 25 <body>
26 26
27 <!-- Main component for a primary marketing message or call to action --> 27 <!-- Main component for a primary marketing message or call to action -->
28 <div class="paralax-background"></div> 28 <div class="paralax-background"></div>
29 <div class="jumbotron"> 29 <div class="jumbotron">
30 <h1>scratch copy</h1> 30 <h1>scratch copy</h1>
31 <p class="quote">the asset sharer</p> 31 <p class="quote">the asset sharer</p>
32 </div> 32 </div>
33 33
34 <div class="container"> 34 <div class="container">
35 <div class="pull-right"> 35 <div class="pull-right">
36 <input id="toggle-sound" type="checkbox"> 36 <input id="toggle-sound" type="checkbox">
37 </div> 37 </div>
38 38
39 <ul class="nav nav-tabs"> 39 <ul class="nav nav-tabs">
40 <li class="active"><a href="#">Home</a></li> 40 <li class="active"><a href="#">Home</a></li>
41 <li><a href="file.html">File</a></li> 41 <li><a href="file.html">File</a></li>
42 <li><a href="text.html">Text</a></li> 42 <li><a href="text.html">Text</a></li>
43 <li><a href="draw.html">Draw</a></li> 43 <li><a href="draw.html">Draw</a></li>
44 <li><a href="link.html">Link</a></li> 44 <li><a href="link.html">Link</a></li>
45 </ul> 45 </ul>
46 46
47 <div class="row"> 47 <div class="row">
48 <h2>About</h2> 48 <h2>About</h2>
49 <p><strong>scratch copy</strong> is a platform for small-sized asset sharing developed by <a href="http://grimore.org">Wizardry and Steamworks</a> and published under the <a href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC 1.0 Universal (CC0 1.0)</a> license. The sharing platform covers images, text snippets, movie clips and any sort of media that can be conveniently shared by generating short, public and obfuscated URLs that are easily accessible.</p> 49 <p><strong>scratch copy</strong> is a platform for small-sized asset sharing developed by <a href="http://grimore.org">Wizardry and Steamworks</a> and published under the <a href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC 1.0 Universal (CC0 1.0)</a> license. The sharing platform covers images, text snippets, movie clips and any sort of media that can be conveniently shared by generating short, public and obfuscated URLs that are easily accessible.</p>
50 <!-- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> --> 50 <!-- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> -->
51 </div> 51 </div>
52 52
53 <div class="row" ng-app="scratch" ng-controller="scratch-control"> 53 <div class="row" ng-app="scratch" ng-controller="scratch-control">
54 <!-- <h2>Configuration</h2> 54 <!-- <h2>Configuration</h2>
55 <p>The <strong>scratch copy</strong> platform can be configured for each usage case. This section is meant to hint to the users what configuration is currently active and specifies the configured lmits and allowances.</p> 55 <p>The <strong>scratch copy</strong> platform can be configured for each usage case. This section is meant to hint to the users what configuration is currently active and specifies the configured lmits and allowances.</p>
56 <h3>Allowed Files</h3> 56 <h3>Allowed Files</h3>
57 <p>The file extensions <span ng-repeat="extension in extensions" id="box">{{extension}}, </span> are currently accepted for uploading.</p> 57 <p>The file extensions <span ng-repeat="extension in extensions" id="box">{{extension}}, </span> are currently accepted for uploading.</p>
58 <h3>Upload Limits</h3> 58 <h3>Upload Limits</h3>
59 <p>The current upload limit is set to {{uploadlimit}}MiB.</p> --> 59 <p>The current upload limit is set to {{uploadlimit}}MiB.</p> -->
60 <h2>Configuration</h2> 60 <h2>Configuration</h2>
61 <div class="panel panel-default"> 61 <div class="panel panel-default">
62 <!-- Default panel contents --> 62 <!-- Default panel contents -->
63 <div class="panel-heading">Current Configuration Settings</div> 63 <div class="panel-heading">Current Configuration Settings</div>
64 <div class="panel-body"> 64 <div class="panel-body">
65 <!-- Table --> 65 <!-- Table -->
66 <table class="table table-striped table-hover table-condensed table-responsive"> 66 <table class="table table-striped table-hover table-condensed table-responsive">
67 <thead> 67 <thead>
68 <tr> 68 <tr>
69 <th> 69 <th>
70 Description 70 Description
71 </th> 71 </th>
72 <th> 72 <th>
73 Limit 73 Limit
74 </th> 74 </th>
75 </tr> 75 </tr>
76 </thead> 76 </thead>
77 <tbody> 77 <tbody>
78 <tr> 78 <tr>
79 <td> 79 <td>
80 File extensions accepted for upload. 80 File extensions accepted for upload.
81 </td> 81 </td>
82 <td> 82 <td>
83 <span ng-repeat="extension in extensions" id="box">{{extension}} </span> 83 <span ng-repeat="extension in extensions" id="box">{{extension}} </span>
84 </td> 84 </td>
85 </tr> 85 </tr>
86 <tr> 86 <tr>
87 <td> 87 <td>
88 Allowed file size upload limit. 88 Allowed file size upload limit.
89 </td> 89 </td>
90 <td> 90 <td>
91 <p>{{uploadlimit}}MiB</p> 91 <p>{{uploadlimit}}MiB</p>
92 </td> 92 </td>
93 </tr> 93 </tr>
94 </tbody> 94 </tbody>
95 </table> 95 </table>
96 </div> 96 </div>
97 </div> 97 </div>
98 </div> 98 </div>
99   99  
100 </div> <!-- /container --> 100 </div> <!-- /container -->
101 101
102 <div id="footer"> 102 <div id="footer">
103 <div class="container"> 103 <div class="container">
104 <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> 104 <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>
105 </div> 105 </div>
106 </div> 106 </div>
107   107  
108 <!-- jQuery --> 108 <!-- jQuery -->
109 <script src="bower_components/jquery/dist/jquery.min.js"></script> 109 <script src="bower_components/jquery/dist/jquery.min.js"></script>
110 <!-- Angular JS --> 110 <!-- Angular JS -->
111 <script src="bower_components/angular/angular.min.js"></script> 111 <script src="bower_components/angular/angular.min.js"></script>
112 <!-- BootStrap --> 112 <!-- BootStrap -->
113 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 113 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
114 <!-- BootStrap Toggle --> 114 <!-- BootStrap Toggle -->
115 <script src="bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script> 115 <script src="bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
116 <!-- SoundJS --> 116 <!-- SoundJS -->
117 <script src="bower_components/SoundJS/lib/soundjs-NEXT.combined.js"></script> 117 <script src="bower_components/SoundJS/lib/soundjs-NEXT.combined.js"></script>
118 <!-- YAML --> 118 <!-- YAML -->
119 <script src="bower_components/yaml.js/dist/yaml.min.js"></script> 119 <script src="bower_components/yaml.js/dist/yaml.min.js"></script>
120 <!-- js-cookie --> 120 <!-- js-cookie -->
121 <script src="bower_components/js-cookie/src/js.cookie.js"></script> 121 <script src="bower_components/js-cookie/src/js.cookie.js"></script>
122 <script> 122 <script>
123 var app = angular.module('scratch', []); 123 var app = angular.module('scratch', []);
124 app.controller('scratch-control', function($scope, $http) { 124 app.controller('scratch-control', function($scope, $http) {
125 $http.get('config.yaml').then((response) => { 125 $http.get('config.yaml').then((response) => {
126 var doc = YAML.parse(response.data); 126 var doc = YAML.parse(response.data);
127 $scope.extensions = doc.ALLOWED_FILE_EXTENSIONS; 127 $scope.extensions = doc.ALLOWED_FILE_EXTENSIONS;
128 $scope.uploadlimit = doc.ALLOWED_ASSET_SIZE; 128 $scope.uploadlimit = doc.ALLOWED_ASSET_SIZE;
129 }); 129 });
130 }); 130 });
131 </script> 131 </script>
132 <!-- Jumbotron parallax effect --> 132 <!-- Jumbotron parallax effect -->
133 <script> 133 <script>
134 var jumboHeight = $('.jumbotron').outerHeight(); 134 var jumboHeight = $('.jumbotron').outerHeight();
135 function parallax(){ 135 function parallax(){
136 var scrolled = $(window).scrollTop(); 136 var scrolled = $(window).scrollTop();
137 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px'); 137 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
138 } 138 }
139   139  
140 $(window).scroll(function(e){ 140 $(window).scroll(function(e){
141 parallax(); 141 parallax();
142 }); 142 });
143 </script> 143 </script>
144 <!-- Hiss sounds --> 144 <!-- Hiss sounds -->
145 <script> 145 <script>
146 $(document).ready(() => { 146 $(document).ready(() => {
147 // Get the sound cookie. 147 // Get the sound cookie.
148 const sound = Cookies.get('sound'); 148 const sound = Cookies.get('sound');
149 149
150 if (!createjs.Sound.initializeDefaultPlugins() || 150 if (!createjs.Sound.initializeDefaultPlugins() ||
151 createjs.BrowserDetect.isIOS || 151 createjs.BrowserDetect.isIOS ||
152 createjs.BrowserDetect.isAndroid || 152 createjs.BrowserDetect.isAndroid ||
153 createjs.BrowserDetect.isBlackberry) 153 createjs.BrowserDetect.isBlackberry)
154 return; 154 return;
155 155
156 const hiss = [ 156 const hiss = [
157 "snd/hisses/hiss_1.mp3", 157 "snd/hisses/hiss_1.mp3",
158 "snd/hisses/hiss_2.mp3", 158 "snd/hisses/hiss_2.mp3",
159 "snd/hisses/hiss_3.mp3", 159 "snd/hisses/hiss_3.mp3",
160 "snd/hisses/hiss_4.mp3", 160 "snd/hisses/hiss_4.mp3",
161 "snd/hisses/hiss_5.mp3", 161 "snd/hisses/hiss_5.mp3",
162 "snd/hisses/hiss_6.mp3", 162 "snd/hisses/hiss_6.mp3",
163 "snd/hisses/hiss_7.mp3", 163 "snd/hisses/hiss_7.mp3",
164 "snd/hisses/hiss_8.mp3", 164 "snd/hisses/hiss_8.mp3",
165 "snd/hisses/hiss_9.mp3", 165 "snd/hisses/hiss_9.mp3",
166 "snd/hisses/hiss_10.mp3", 166 "snd/hisses/hiss_10.mp3",
167 ]; 167 ];
168 168
169 // Play the sounds. 169 // Play the sounds.
170 if(!sound || sound != 'off') { 170 if(!sound || sound == 'on') {
171 createjs.Sound.onLoadComplete = 171 createjs.Sound.onLoadComplete =
172 (event) => createjs.Sound.play(event.src); 172 (event) => createjs.Sound.play(event.src);
173 createjs.Sound.addEventListener("fileload", 173 createjs.Sound.addEventListener("fileload",
174 (event) => createjs.Sound.play(event.src)); 174 (event) => createjs.Sound.play(event.src));
175 createjs.Sound.registerSound( 175 createjs.Sound.registerSound(
176 hiss[~~(Math.random() * hiss.length)] 176 hiss[~~(Math.random() * hiss.length)]
177 ); 177 );
178 } 178 }
179 179
180 // Load the toggle. 180 // Load the toggle.
181 $('#toggle-sound').bootstrapToggle({ 181 $('#toggle-sound').bootstrapToggle({
182 on: 'Pet Kitty', 182 on: 'Pet Kitty',
183 off: 'Annoy Kitty', 183 off: 'Annoy Kitty',
184 onstyle: "danger", 184 onstyle: "danger",
185 offstyle: "success" 185 offstyle: "success"
186 }); 186 });
187 $('#toggle-sound') 187 $('#toggle-sound')
188 .bootstrapToggle(sound) 188 .bootstrapToggle(sound)
189 .change(() => { 189 .change(() => {
190 var checked = $('#toggle-sound').is(":checked"); 190 var checked = $('#toggle-sound').is(":checked");
191 Cookies.set('sound', 191 Cookies.set('sound',
192 checked ? 'on' : 'off' 192 checked ? 'on' : 'off'
193 ); 193 );
194 if(checked) { 194 if(checked) {
195 createjs.Sound.onLoadComplete = 195 createjs.Sound.onLoadComplete =
196 (event) => createjs.Sound.play(event.src); 196 (event) => createjs.Sound.play(event.src);
197 createjs.Sound.addEventListener("fileload", 197 createjs.Sound.addEventListener("fileload",
198 (event) => createjs.Sound.play(event.src)); 198 (event) => createjs.Sound.play(event.src));
199 createjs.Sound.registerSound( 199 createjs.Sound.registerSound(
200 hiss[~~(Math.random() * hiss.length)] 200 hiss[~~(Math.random() * hiss.length)]
201 ); 201 );
202 } 202 }
203 }); 203 });
204 }); 204 });
205 </script> 205 </script>
206 </body> 206 </body>
207 </html> 207 </html>
208   208