You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

248 lines
6.1 KiB
HTML

<!DOCTYPE html>
<!-- saved from url=(0043)https://hub.xpub.nl/sandbot/~eunalee/flask/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
@font-face {
font-family: 'jgs7';
src: url("https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/jgs7.ttf");
}
body{
font-family: 'jgs7', monospace;
color: green;
line-height: 1.8rem;
font-size: 1.1rem;
margin-top: 0;
background-color: green;
}
pre{
font-family: 'jgs7', monospace;
margin-top: 0;
line-height: 1.1rem;
}
.box{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
.content{
background-color: white;
color:green;
padding: 5%;
}
a{
font-family: 'jgs7' monospace;
text-decoration: none;
color: white;
}
li a{
color: green;
background-color: white;
margin-left: 5px;
margin-bottom: 5px;
padding: 5px 15px;
border: 2px solid green;
font-size: 1.1rem;
font-family: 'jgs7';
color: green;
cursor: pointer;
}
.left{
background-color: green;
color: white;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 10%;
padding: 3%;
}
.right{
background-color: green;
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 10%;
padding: 3%;
}
.right p{
position: fixed;
top: 90%;
right: 3%;
}
.left pre:hover > .petit{
color: #f44082;
}
.left pre:active > .grr{
color: green;
}
.left pre:active {
transform: translateY(10px) translateX(10px);
}
input[type=submit]{
background-color: white;
margin-left: 5px;
margin-bottom: 5px;
padding: 5px 15px;
border: 2px solid green;
font-size: 1.1rem;
font-family: 'jgs7';
color: green;
cursor: pointer;
}
input[type=submit]:hover {
color: #f44082;
}
button{
background-color: white;
margin-left: 5px;
margin-bottom: 5px;
padding: 5px 15px;
border: 2px solid green;
font-size: 1.1rem;
font-family: 'jgs7';
color: green;
cursor: pointer;
}
button:hover {
color: #f44082;
}
textarea {
background-color: green;
color: white;
border: 2px dotted white;
outline: none;
resize: none
}
textarea:focus {
border: 2px dotted white;
resize: none
}
#text{
display: none;
}
@media only screen and (max-width: 600px) {
body {
width: 90%;
font-size: 2vw;
}
.right{
display: none;
}
.left{
display: none;
}
}
</style></head>
<body data-new-gr-c-s-check-loaded="14.1062.0" data-gr-ext-installed="">
<div class="left">
<a href="https://hub.xpub.nl/sandbot/~eunalee/flask/"><pre>
____________
| |<span class="grr">\</span>
| <span class="petit">MAIN</span> |<span class="grr"></span>
|____________|<span class="grr"></span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre></a>
<a href="/sandbot/~eunalee/flask/g/"><pre>
____________
| |<span class="grr">\</span>
| <span class="petit">Game</span> |<span class="grr"></span>
|____________|<span class="grr"></span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre></a>
</div>
<div class="right">
<p>(C)eunalee</p>
</div>
<div class="box">
<div class="content">
<pre>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
</pre>
<h3>Hold the phone receiver and play Telephone Game!</h3>
{% if ".wav" in datap %}
<br>
<audio controls autoplay><source src="https://hub.xpub.nl/sandbot/~eunalee/record/{{datap}}" type="audio/wav"></audio>
<form action="https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/g2/" method="POST" autocomplete="off">
<p>How do you spell that word?</p><textarea cols="30" name="spel"/></textarea>
<p><input type="submit" value="submit"></p>
</form>
{% else %}
<p>Pronounce this word:</p>
<h2>{{datap}}</h2>
<p>Record -> Stop -> Upload -> Result</p>
<div id="controls">
<button id="recordButton">Record</button>
<button id="pauseButton" disabled>Pause</button>
<button id="stopButton" disabled>Stop</button>
</div>
<div id="formats"></div>
<p><strong>Recordings:</strong></p>
<ol id="recordingsList"></ol>
<button><a href="https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/r3/" style="color: green;">result</a></button>
{% endif%}
<br><br>
<pre>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%</pre>
</div>
</div>
</div>
<script src="https://hub.xpub.nl/sandbot/~eunalee/record/static/js3/recorder.js"></script>
<script src="https://hub.xpub.nl/sandbot/~eunalee/record/static/js3/app.js"></script>
</body></html>