Adrian Gaudebert
22a620594b
This commit changes the way the UI is displayed. Buttons are bigger and square, with the status icon at the bottom. It makes use of CSS grids to show all buttons nicely aligned. It also makes the UI squishy, showing more columns the wider the screen (up to 5 columns).
64 lines
2.4 KiB
HTML
64 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Ghetto Blastr</title>
|
|
<meta name="description" content="A sound board">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="manifest" href="site.webmanifest">
|
|
<!-- <link rel="apple-touch-icon" href="icon.png"> -->
|
|
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/spinner.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!--[if lte IE 9]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://mozilla.org/firefox/">upgrade your browser</a> to improve your experience and security.</p>
|
|
<![endif]-->
|
|
<div id="soundboard">
|
|
<header>
|
|
<template>
|
|
<h1>{{ title }} Ghetto Blastr</h1>
|
|
</template>
|
|
</header>
|
|
|
|
<section class="loading" v-if="!ready">
|
|
<div class="spinner">
|
|
<div class="rect1"></div>
|
|
<div class="rect2"></div>
|
|
<div class="rect3"></div>
|
|
<div class="rect4"></div>
|
|
<div class="rect5"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="sounds" v-else>
|
|
<template v-for="asset in assets">
|
|
<ghetto-sound
|
|
v-bind:asset="asset"
|
|
v-on:ghetto-playsound="stopAllPlayingSounds"
|
|
ref="sound"
|
|
></ghetto-sound>
|
|
</template>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
// https://github.com/typicode/pegasus
|
|
//0.3.5
|
|
function pegasus(a,b,c){return c=new XMLHttpRequest,c.open("GET",a),a=[],pegasus.timeout&&(c.timeout=pegasus.timeout),c.ontimeout=function(a){b=a},c.onreadystatechange=c.then=function(d,e,f,g){if(d&&d.call&&(a=[,d,e]),b&&a[2]&&a[2](b,c),4==c.readyState&&(f=a[0|c.status/200])){try{g=JSON.parse(c.responseText)}catch(a){g=null}f(g,c)}},c.send(),c}
|
|
</script>
|
|
<script>
|
|
var GHETTO_SOURCE_REQUEST = pegasus('ghettoblastr.json');
|
|
</script>
|
|
|
|
<script src="lib/vue.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|