scratch – Diff between revs 121 and 125

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