summaryrefslogtreecommitdiff
path: root/index.php
diff options
context:
space:
mode:
authorhorus2021-03-15 22:38:58 +0100
committerhorus2021-03-15 22:38:58 +0100
commite0acc0b7877a48f8add10515ac89643b2ec96293 (patch)
treef0604c83feb8d5c3cb8ca7f10cf3846f83067370 /index.php
parent413f4c1298eb20f66b594dd311e3fd49d3ac32cb (diff)
downloadbpm -e0acc0b7877a48f8add10515ac89643b2ec96293.tar.gz
Inline page into website
Diffstat (limited to 'index.php')
-rw-r--r--index.php165
1 files changed, 0 insertions, 165 deletions
diff --git a/index.php b/index.php
deleted file mode 100644
index c42bbf1..0000000
--- a/index.php
+++ /dev/null
@@ -1,165 +0,0 @@
-<!doctype html>
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <meta name="description" content="Berechnet die Preise für Pizza im Verhältnis zum Flächeninhalt. Lieber zwei kleine oder eine große Pizza kaufen?">
- <link rel='stylesheet' type='text/css' href="/css/bootstrap.min.css">
- <link rel='icon' href="/img/paw-144.png">
- <link rel="manifest" href="/manifest.json">
- <title>Beats per Minute</title>
- <style>
- html {
- width: 100%;
- }
- .main {
- margin-top: 1rem;
- }
- </style>
-</head>
-<body class="container main text-center">
- <span id="countBpm">
- <div class="jumbotron">
- <h1>Hier klicken um die BPMs zu zählen:</h1>
- <h2><span id="showBpm">0</span> BPM</h2>
- <button class="btn btn-primary">Click</button>
- <div class="mt-5 mb-5 container" id="showDances">
- <div class="row mb-2" id="showDances-standard">
- </div>
- <div class="row mb-2" id="showDances-latein"></div>
- </div>
- </div>
- </span>
- <button id="reset" class="btn btn-secondary">Reset</button>
-
- <div class="row">
-<?php
- $dances = json_decode( file_get_contents("dances.json") );
- $type = "";
-?>
-<?Php
- foreach ( $dances as $dance ) {
- if ( $dance->type != $type ) {
- $type = $dance->type;
-?>
- <div class="col-12 mt-4 mb-2"> <h2> <?= ucfirst( $type ) ?> </h2> </div>
-<?php
- }
-?>
- <div class="col" id="<?= $dance->name ?>">
- <h3> <?= $dance->name; ?> </h3>
- <?= $dance->minBarspm ?> bis <?= $dance->maxBarspm ?> Takte pM
- <br>
- <?= $dance->minBpm ?> bis <?= $dance->maxBpm ?> BpM
- <br>
- <?= $dance->bar; ?> Takt
- </div>
-<?php
- }
-?>
- </div>
-
-<script>
- var lastClick = 0;
- var bpm = [];
- var dances = <?php readfile("dances.json"); ?>;
- var appendedDances = [];
- var appendedHeader = [];
- function median(values){
- if ( values.length === 0 ) {
- return 0;
- }
-
- values.sort(function(a,b){
- return a-b;
- });
-
- var half = Math.floor(values.length / 2);
-
- if (values.length % 2) {
- return values[half];
- }
-
- return (values[half - 1] + values[half]) / 2.0;
- }
- function reset() {
- lastClick = 0;
- bpm = [];
- appendedDances = [];
- appendedHeader = [];
- document.getElementById("showBpm").innerHTML = 0;
- document.getElementById("showDances-standard").innerHTML = "";
- document.getElementById("showDances-latein").innerHTML = "";
- }
- function getBpm(bpm) {
- /* slice() copies by value, not by reference, so the median() doesn't mess with the array */
- return Math.round(median(bpm.slice()));
- }
- function display(bpm) {
- document.getElementById("showBpm").innerHTML = getBpm(bpm.slice());
- }
- window.addEventListener("load",function() {
- document.getElementById("countBpm").addEventListener("click", function(e){
- var d = new Date();
- var t = d.getTime();
- var seconds = ( t - lastClick ) / 1000;
-
- if ( 0 != lastClick ) {
-
- if ( seconds > 10 ) {
- // reset after 10 seconds delay
- reset();
- } else {
- var _bpm = 60 / seconds
- bpm.push( _bpm );
- if ( bpm.length > 25 ) {
- // keep only last 10 clicks
- bpm.shift();
- }
- display(bpm);
- }
-
- }
- lastClick = t;
-
- if ( bpm.length >= 5 ) {
- for ( i = 0; i < dances.length; i++ ) {
- var dance = dances[i];
- if ( ( (dance.minBpm-3) <= getBpm(bpm) ) && ( getBpm(bpm) <= (dance.maxBpm+3) ) && -1 == appendedDances.indexOf( dance.name ) ) {
- var danceDiv = document.createElement("div");
- danceDiv.innerHTML = document.getElementById( dance.name ).innerHTML;
- danceDiv.classList.add("dance-created");
- danceDiv.classList.add("col");
-
- if ( -1 == appendedHeader.indexOf( dance.type ) ) {
- var danceHeader = document.createElement("div");
- danceHeader.classList.add("col-12");
- danceHeader.classList.add("mb-2");
- danceHeader.classList.add("mt-4");
- danceHeader.innerHTML = "<h3> Mögliche " + dance.type[0].toUpperCase() + dance.type.substr(1) + "-Tänze</h3>";
- document.getElementById( "showDances-" + dance.type ).appendChild(danceHeader);
- appendedHeader.push( dance.type );
- }
-
- appendedDances.push( dance.name );
-
- document.getElementById( "showDances-" + dance.type ).appendChild(danceDiv);
- }
- }
- }
-
- });
- document.getElementById("reset").addEventListener("click", function(e){
- reset();
- });
- });
- if ('serviceWorker' in navigator){
- navigator.serviceWorker.register('serviceworker.js').then(function(registration){
- console.log('ServiceWorker registration successful with scope: ', registration.scope);
- }).catch(function(err){
- console.log('ServiceWorker registration failed: ', err);
- });
- } else {
- console.log('no service worker found. offline access is not granted.');
- }
-</script>
-</body>