Some user interface improvements

Close control on popup, progress bar when recording.
This commit is contained in:
Simon Brooke 2022-09-18 18:27:53 +01:00
parent 950eec5fed
commit 353e37cff5
No known key found for this signature in database
GPG key ID: A7A4F18D1D4DF987
4 changed files with 112 additions and 14 deletions

View file

@ -16,6 +16,7 @@ src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
<body id="body">
<div id="popup"
style="display: none; border: thin solid gray; width: 10%">
<div id="closebox" onclick="$('#popup').hide();"></div>
<p id="character"
style="text-align: center; margin: 0; font-size: 4em;">?</p>
<table id="controls"
@ -23,23 +24,26 @@ src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
<tr>
<th>Tutor</th>
<td>
<button id="play-tutor"></button>
<span id="play-tutor"></span>
</td>
</tr>
<tr>
<th>You</th>
<td>
<button id="play-student"></button>
<span id="play-student"></span>
</td>
<td>
<button id="record-stop"></button>
<span id="record-stop"></span>
</td>
</tr>
<tr>
<td colspan="3" id="progress"></td>
</tr>
</table>
</div>
<h1>Muharni table</h1>
<button
onclick="var l = document.getElementById('long'); var s = document.getElementById('short'); if (l.style.display == 'none') { l.style.display = 'block'; s.style.display = 'none'; } else { l.style.display = 'none'; s.style.display = 'block'; }">Toggle
onclick="var l = document.getElementById('long'); var s = document.getElementById('short'); if (l.style.display == 'none') { l.style.display = 'block'; s.style.display = 'none'; } else { l.style.display = 'none'; s.style.display = 'block'; } $('#popup').hide();">Toggle
short/long</button>
<div id="long" style="display: block;">
<h2>Long forms</h2>