scratch – Diff between revs 75 and 76

Subversion Repositories:
Rev:
Only display areas with differencesIgnore whitespace
Rev 75 Rev 76
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 18
19 <!-- Site-wide style CCS --> 19 <!-- Site-wide style CCS -->
20 <link href="css/style.css" rel="stylesheet"> 20 <link href="css/style.css" rel="stylesheet">
21 </head> 21 </head>
22   22  
23 <body> 23 <body>
24 24
25 <!-- Main component for a primary marketing message or call to action --> 25 <!-- Main component for a primary marketing message or call to action -->
26 <div class="paralax-background"></div> 26 <div class="paralax-background"></div>
27 <div class="jumbotron"> 27 <div class="jumbotron">
28 <h1>scratch copy</h1> 28 <h1>scratch copy</h1>
29 <p class="quote">the asset sharer</p> 29 <p class="quote">the asset sharer</p>
30 </div> 30 </div>
31 31
32 <div class="container"> 32 <div class="container">
33 33
34 <ul class="nav nav-tabs"> 34 <ul class="nav nav-tabs">
35 <li class="active"><a href="#">Home</a></li> 35 <li class="active"><a href="#">Home</a></li>
36 <li><a href="file.html">File</a></li> 36 <li><a href="file.html">File</a></li>
37 <li><a href="text.html">Text</a></li> 37 <li><a href="text.html">Text</a></li>
38 </ul> 38 </ul>
39 -  
40 39
41 <div class="row"> 40 <div class="row">
42 <h2>About</h2> 41 <h2>About</h2>
43 <p><strong>scratch</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> 42 <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>
44 <!-- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> --> 43 <!-- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> -->
-   44 </div>
45 </div> 45
46 <div class="row" ng-app="scratch" ng-controller="scratch-control" > 46 <div class="row" ng-app="scratch" ng-controller="scratch-control">
47 <h2>Configuration</h2> 47 <!-- <h2>Configuration</h2>
48 <p>The <strong>scratch</strong> platform can</p> 48 <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>
49 <h3>Allowed Files</h3> 49 <h3>Allowed Files</h3>
-   50 <p>The file extensions <span ng-repeat="extension in extensions" id="box">{{extension}}, </span> are currently accepted for uploading.</p>
-   51 <h3>Upload Limits</h3>
-   52 <p>The current upload limit is set to {{uploadlimit}}MiB.</p> -->
-   53 <h2>Configuration</h2>
-   54 <div class="panel panel-default">
-   55 <!-- Default panel contents -->
-   56 <div class="panel-heading">Current Configuration Settings</div>
-   57 <div class="panel-body">
-   58 <!-- Table -->
-   59 <table class="table table-striped table-hover table-condensed table-responsive">
-   60 <thead>
-   61 <tr>
-   62 <th>
-   63 Description
-   64 </th>
-   65 <th>
-   66 Limit
-   67 </th>
-   68 </tr>
-   69 </thead>
-   70 <tbody>
-   71 <tr>
-   72 <td>
-   73 File extensions accepted for upload.
-   74 </td>
-   75 <td>
-   76 <span ng-repeat="extension in extensions" id="box">{{extension}} </span>
-   77 </td>
-   78 </tr>
-   79 <tr>
-   80 <td>
-   81 Allowed file size upload limit.
-   82 </td>
-   83 <td>
-   84 <p>{{uploadlimit}}MiB</p>
-   85 </td>
-   86 </tr>
-   87 </tbody>
-   88 </table>
-   89 </div>
50 The following files, expressed as file extensions: <div ng-repeat="extension in extensions"><span id="box">{{extension}}</span></div> are currently accepted for uploading. 90 </div>
51 </div> 91 </div>
52   92  
53 </div> <!-- /container --> 93 </div> <!-- /container -->
54 94
55 <div id="footer"> 95 <div id="footer">
56 <div class="container"> 96 <div class="container">
57 <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> 97 <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>
58 </div> 98 </div>
59 </div> 99 </div>
60   100  
61 <!-- jQuery --> 101 <!-- jQuery -->
62 <script src="bower_components/jquery/dist/jquery.min.js"></script> 102 <script src="bower_components/jquery/dist/jquery.min.js"></script>
63 <!-- Angular JS --> 103 <!-- Angular JS -->
64 <script src="bower_components/angular/angular.min.js"></script> 104 <script src="bower_components/angular/angular.min.js"></script>
65 <!-- BootStrap --> 105 <!-- BootStrap -->
66 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 106 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
67 <!-- SoundJS --> 107 <!-- SoundJS -->
68 <script src="bower_components/SoundJS/lib/soundjs-NEXT.combined.js"></script> 108 <script src="bower_components/SoundJS/lib/soundjs-NEXT.combined.js"></script>
69 <!-- YAML --> 109 <!-- YAML -->
70 <script src="bower_components/yaml.js/dist/yaml.min.js"></script> 110 <script src="bower_components/yaml.js/dist/yaml.min.js"></script>
71 <script> 111 <script>
72 var app = angular.module('scratch', []); 112 var app = angular.module('scratch', []);
73 app.controller('scratch-control', function($scope, $http) { 113 app.controller('scratch-control', function($scope, $http) {
74 $http.get('config.yaml').then((response) => { 114 $http.get('config.yaml').then((response) => {
75 var doc = YAML.parse(response.data); 115 var doc = YAML.parse(response.data);
76 //alert(JSON.stringify(doc)); -  
77 $scope.extensions = doc.ALLOWED_FILE_EXTENSIONS; 116 $scope.extensions = doc.ALLOWED_FILE_EXTENSIONS;
-   117 $scope.uploadlimit = doc.ALLOWED_ASSET_SIZE;
78 }); 118 });
79 }); 119 });
80 </script> 120 </script>
81 <!-- Jumbotron parallax effect --> 121 <!-- Jumbotron parallax effect -->
82 <script> 122 <script>
83 var jumboHeight = $('.jumbotron').outerHeight(); 123 var jumboHeight = $('.jumbotron').outerHeight();
84 function parallax(){ 124 function parallax(){
85 var scrolled = $(window).scrollTop(); 125 var scrolled = $(window).scrollTop();
86 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px'); 126 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
87 } 127 }
88   128  
89 $(window).scroll(function(e){ 129 $(window).scroll(function(e){
90 parallax(); 130 parallax();
91 }); 131 });
92 </script> 132 </script>
93 <!-- Hiss sounds --> 133 <!-- Hiss sounds -->
94 <script> 134 <script>
95 $(document).ready(() => { 135 $(document).ready(() => {
96 if (!createjs.Sound.initializeDefaultPlugins() || 136 if (!createjs.Sound.initializeDefaultPlugins() ||
97 createjs.BrowserDetect.isIOS || 137 createjs.BrowserDetect.isIOS ||
98 createjs.BrowserDetect.isAndroid || 138 createjs.BrowserDetect.isAndroid ||
99 createjs.BrowserDetect.isBlackberry) 139 createjs.BrowserDetect.isBlackberry)
100 return; 140 return;
101 141
102 const hiss = [ 142 const hiss = [
103 "snd/hisses/hiss_1.mp3", 143 "snd/hisses/hiss_1.mp3",
104 "snd/hisses/hiss_2.mp3", 144 "snd/hisses/hiss_2.mp3",
105 "snd/hisses/hiss_3.mp3", 145 "snd/hisses/hiss_3.mp3",
106 "snd/hisses/hiss_4.mp3", 146 "snd/hisses/hiss_4.mp3",
107 "snd/hisses/hiss_5.mp3", 147 "snd/hisses/hiss_5.mp3",
108 "snd/hisses/hiss_6.mp3", 148 "snd/hisses/hiss_6.mp3",
109 "snd/hisses/hiss_7.mp3", 149 "snd/hisses/hiss_7.mp3",
110 "snd/hisses/hiss_8.mp3", 150 "snd/hisses/hiss_8.mp3",
111 "snd/hisses/hiss_9.mp3", 151 "snd/hisses/hiss_9.mp3",
112 "snd/hisses/hiss_10.mp3", 152 "snd/hisses/hiss_10.mp3",
113 ]; 153 ];
114   154  
115 createjs.Sound.onLoadComplete = 155 createjs.Sound.onLoadComplete =
116 (event) => createjs.Sound.play(event.src); 156 (event) => createjs.Sound.play(event.src);
117 createjs.Sound.addEventListener("fileload", 157 createjs.Sound.addEventListener("fileload",
118 (event) => createjs.Sound.play(event.src)); 158 (event) => createjs.Sound.play(event.src));
119 createjs.Sound.registerSound( 159 createjs.Sound.registerSound(
120 hiss[~~(Math.random() * hiss.length)] 160 hiss[~~(Math.random() * hiss.length)]
121 ); 161 );
122 }); 162 });
123 </script> 163 </script>
124 </body> 164 </body>
125 </html> 165 </html>
126   166