scratch – Diff between revs 125 and 137

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