scratch – Diff between revs 115 and 121

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