scratch – Rev 99

Subversion Repositories:
Rev:
<!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>
        <li><a href="link.html">Link</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 &raquo;</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 == 'on') {
            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>