<html>
<head>
<title>Rhythm Thing</title>
<link rel="stylesheet" href="/static/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="row">
<h1 class="mx-auto">Quick Rhythm Maker</h1>
</div>
<hr>
<div class="row mb-3">
<div class="col-12">
<audio style="width: 100%;" controls>
<source src="audio.php?file_name=<?php echo($file_name) ?>" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-warning" type="button" data-toggle="collapse" data-target="#collapse-solution">
<?php echo(_("Solution")) ?>
</button>
<br>
<div class="collapse" id="collapse-solution">
<img class="py-3" src="./tmp/<?php echo($file_name) ?>.png">
</div>
</div>
</div>
<hr>
<div class="row">
<form class="col-12" action="" method="get">
<button class="btn btn-primary" type="submit"><?php echo(_("Generate this rhythm")) ?></button>
<button class="btn btn-secondary" onclick="document.getElementById('id').value ='';" type="submit"><?php echo(_("Generate new rhythm")) ?></button>
<div class="form-group">
ID
<input type="text" class="form-control" name="id" id="id" value="<?php echo($id); ?>" />
<small>
<?php echo(_("Anything is possible. Used as seed for the rhythm.")) ?>
</small>
</div>
<div class="form-group">
<?php echo(_("Time Signature")) ?>
<input type="text" class="form-control" name="time" value="<?php echo($time); ?>" />
<small>
<?php echo(_("Examples")) ?>: 4/4, 3/4, 6/8, 2/2, 13/8, 11/16, 2/4
</small>
</div>
<div class="form-group">
<?php echo(_("Tempo")) ?>
<input type="text" class="form-control" name="tempo" value="<?php echo($tempo); ?>" />
<small>
<a data-toggle="collapse" href="#collapse-tempo" role="button">
<?php echo(_("Examples")) ?> (<?php echo(_("click")) ?>)
</a>
</small>
<div class="collapse" id="collapse-tempo">
<img src="./static/res/tempo.png">
</div>
</div>
<div class="form-group">
<?php echo(_("Bars")) ?>
<input type="number" class="form-control" min="1" max="64" name="bars" value="<?php echo($bars); ?>" />
<small>
<?php printf(_("Anything between %s and %s"), 1, 64) ?>
</small>
</div>
<div class="form-group">
<?php echo(_("Dynamic for Beat")) ?>
<input type="text" class="form-control" name="dynamic_beat" value="<?php echo($dynamic_beat); ?>" />
<small>
ppppp, pppp, ppp, pp, p, mp, mf, f, ff, fff, ffff, fffff, fp, sf, sff, sp, spp, sfz, rfz
</small>
</div>
<div class="form-group">
<?php echo(_("Dynamic for Rhythm")) ?>
<input type="text" class="form-control" name="dynamic_rhythm" value="<?php echo($dynamic_rhythm); ?>" />
<small>
ppppp, pppp, ppp, pp, p, mp, mf, f, ff, fff, ffff, fffff, fp, sf, sff, sp, spp, sfz, rfz
</small>
</div>
</form>
</div>
</div>
</body>