scratch – Rev 84
?pathlinks?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="quick asset upload">
<meta name="author" content="Wizardry and Steamworks">
<link rel="icon" href="favicon.ico">
<title>scratch copy</title>
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap Toggle -->
<link href="bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
<!-- Site-wide style CCS -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Main component for a primary marketing message or call to action -->
<div class="paralax-background"></div>
<div class="jumbotron">
<h1>scratch copy</h1>
<p class="quote">the asset sharer</p>
</div>
<div class="container">
<div class="pull-right">
<input id="toggle-sound" type="checkbox">
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="file.html">File</a></li>
<li><a href="text.html">Text</a></li>
<li><a href="draw.html">Draw</a></li>
</ul>
<div class="row">
<h2>About</h2>
<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>
<!-- <p><a class="btn btn-default" href="#" role="button">View details »</a></p> -->
</div>
<div class="row" ng-app="scratch" ng-controller="scratch-control">
<!-- <h2>Configuration</h2>
<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>
<h3>Allowed Files</h3>
<p>The file extensions <span ng-repeat="extension in extensions" id="box">{{extension}}, </span> are currently accepted for uploading.</p>
<h3>Upload Limits</h3>
<p>The current upload limit is set to {{uploadlimit}}MiB.</p> -->
<h2>Configuration</h2>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Current Configuration Settings</div>
<div class="panel-body">
<!-- Table -->
<table class="table table-striped table-hover table-condensed table-responsive">
<thead>
<tr>
<th>
Description
</th>
<th>
Limit
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
File extensions accepted for upload.
</td>
<td>
<span ng-repeat="extension in extensions" id="box">{{extension}} </span>
</td>
</tr>
<tr>
<td>
Allowed file size upload limit.
</td>
<td>
<p>{{uploadlimit}}MiB</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> <!-- /container -->
<div id="footer">
<div class="container">
<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>
</div>
</div>
<!-- jQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Angular JS -->
<script src="bower_components/angular/angular.min.js"></script>
<!-- BootStrap -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- BootStrap Toggle -->
<script src="bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
<!-- SoundJS -->
<script src="bower_components/SoundJS/lib/soundjs-NEXT.combined.js"></script>
<!-- YAML -->
<script src="bower_components/yaml.js/dist/yaml.min.js"></script>
<!-- js-cookie -->
<script src="bower_components/js-cookie/src/js.cookie.js"></script>
<script>
var app = angular.module('scratch', []);
app.controller('scratch-control', function($scope, $http) {
$http.get('config.yaml').then((response) => {
var doc = YAML.parse(response.data);
$scope.extensions = doc.ALLOWED_FILE_EXTENSIONS;
$scope.uploadlimit = doc.ALLOWED_ASSET_SIZE;
});
});
</script>
<!-- Jumbotron parallax effect -->
<script>
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
</script>
<!-- Hiss sounds -->
<script>
$(document).ready(() => {
// Get the sound cookie.
const sound = Cookies.get('sound');
if (!createjs.Sound.initializeDefaultPlugins() ||
createjs.BrowserDetect.isIOS ||
createjs.BrowserDetect.isAndroid ||
createjs.BrowserDetect.isBlackberry)
return;
const hiss = [
"snd/hisses/hiss_1.mp3",
"snd/hisses/hiss_2.mp3",
"snd/hisses/hiss_3.mp3",
"snd/hisses/hiss_4.mp3",
"snd/hisses/hiss_5.mp3",
"snd/hisses/hiss_6.mp3",
"snd/hisses/hiss_7.mp3",
"snd/hisses/hiss_8.mp3",
"snd/hisses/hiss_9.mp3",
"snd/hisses/hiss_10.mp3",
];
// Play the sounds.
if(!sound || sound != 'off') {
createjs.Sound.onLoadComplete =
(event) => createjs.Sound.play(event.src);
createjs.Sound.addEventListener("fileload",
(event) => createjs.Sound.play(event.src));
createjs.Sound.registerSound(
hiss[~~(Math.random() * hiss.length)]
);
}
// Load the toggle.
$('#toggle-sound').bootstrapToggle({
on: 'Pet Kitty',
off: 'Annoy Kitty',
onstyle: "danger",
offstyle: "success"
});
$('#toggle-sound')
.bootstrapToggle(sound)
.change(() => {
var checked = $('#toggle-sound').is(":checked");
Cookies.set('sound',
checked ? 'on' : 'off'
);
if(checked) {
createjs.Sound.onLoadComplete =
(event) => createjs.Sound.play(event.src);
createjs.Sound.addEventListener("fileload",
(event) => createjs.Sound.play(event.src));
createjs.Sound.registerSound(
hiss[~~(Math.random() * hiss.length)]
);
}
});
});
</script>
</body>
</html>