|
|
<!DOCTYPE html>
|
|
|
<!-- saved from url=(0048)https://hub.xpub.nl/sandbot/~eunalee/flask/trad/ -->
|
|
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
|
<link rel="stylesheet" href="https://hub.xpub.nl/sandbot/~eunalee/show/templates/desktop.css">
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
textarea {
|
|
|
background-color: green;
|
|
|
color: white;
|
|
|
border: 2px dotted white;
|
|
|
outline: none;
|
|
|
resize: none
|
|
|
}
|
|
|
|
|
|
textarea:focus {
|
|
|
border: 2px dotted white;
|
|
|
resize: none
|
|
|
}
|
|
|
|
|
|
form{
|
|
|
margin-left: 0;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.txt{
|
|
|
margin-left: 10%;
|
|
|
line-height: 1.8rem;
|
|
|
display: grid;
|
|
|
grid-template-columns: 42% 8% 42%;
|
|
|
grid-template-areas:
|
|
|
"txt1 txt3 txt2"
|
|
|
}
|
|
|
.txt1{
|
|
|
grid-area: txt1;
|
|
|
}
|
|
|
|
|
|
.txt2{
|
|
|
grid-area: txt2;
|
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
|
body {
|
|
|
width: 90%;
|
|
|
font-size: 2vw;
|
|
|
}
|
|
|
|
|
|
.right{
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.left{
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
* {box-sizing: border-box;}
|
|
|
|
|
|
/* The popup form - hidden by default */
|
|
|
.form-popup {
|
|
|
display: none;
|
|
|
background-color: white;
|
|
|
position: fixed;
|
|
|
color: green;
|
|
|
top: 20%;
|
|
|
left: 5%;
|
|
|
width: 20%;
|
|
|
padding: 3rem;
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<title>Frabjousish Translator</title>
|
|
|
</head>
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="left">
|
|
|
<pre class="open-button" onclick="openForm()">
|
|
|
________________
|
|
|
| |<span class="grr">\</span>
|
|
|
| <span class="petit">Hint</span> |<span class="grr">░</span>
|
|
|
|________________|<span class="grr">░</span>
|
|
|
<span class="grr">\░░░░░░░░░░░░░░░░\;</span>
|
|
|
</pre>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="form-popup" id="myForm">
|
|
|
You can use these words below;
|
|
|
<br><br>
|
|
|
{{mw}}
|
|
|
<br><br>
|
|
|
<button type="button" class="btn cancel" onclick="closeForm()" style="background-color: white; color: green;">Close</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="right">
|
|
|
<p>(C)eunalee</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="box">
|
|
|
<div class="cnt">
|
|
|
<pre>
|
|
|
______________________________________________________________________________________________
|
|
|
______________________________________________________________________________________________
|
|
|
. . . .
|
|
|
. . .
|
|
|
. ____ ____ __ ____ . __ __ _ _ ____ __ ____ _ _ .
|
|
|
( __)( _ \ / _\ ( _ \ _( ) / \ / )( \/ ___)( )/ ___)/ )( \
|
|
|
) _) .) // \ ) _ (/ \) \( O )) \/ (\___ \ )( \___ \) __ ( . .
|
|
|
. (__) (__\_)\_/\_/(____/\____/ \__/ \____/(____/(__)(____/\_)(_/
|
|
|
____ ____ __ . _ _ ___ __ __ . ____ ____ .
|
|
|
. (_ _)( _ \. /__\ ( \( )/ __)( ) . /__\ (_ _)( ___) .
|
|
|
. )( ) / /(__)\ ) ( \__ \ )(__ /(__)\ )( )__) .
|
|
|
(__) (_)\_)(__)(__)(_)\_)(___/(____)(__)(__)(__) (____)
|
|
|
. . . .
|
|
|
. . .
|
|
|
. .
|
|
|
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
<p style="width:70%; margin-left: 15%; text-align: center;">
|
|
|
Frabjousish Translate can 'almost' instantly translate your words, phrases
|
|
|
into Frabjousish languages.
|
|
|
<br><br>
|
|
|
Please type something in the textbox below.
|
|
|
<br><br>
|
|
|
'Hint' button will give you an idea what to write.
|
|
|
<br><br>
|
|
|
</p>
|
|
|
|
|
|
<form>
|
|
|
<textarea cols="45" rows="8" name="text">Hello, good to meet you!</textarea>
|
|
|
<br><br>
|
|
|
<input type="submit" value="submit">
|
|
|
</form>
|
|
|
|
|
|
{% if str1 %}
|
|
|
<pre>
|
|
|
|
|
|
|
|
|
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
|
|
|
|
|
</pre>
|
|
|
<div class="txt">
|
|
|
<div class="txt1">
|
|
|
<h2>Your text</h2>
|
|
|
<p>{{text}}</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="txt2">
|
|
|
<h2>Your text in Frabjousish</h2>
|
|
|
<p>
|
|
|
{% for i in token %}
|
|
|
{% if i in collec %}
|
|
|
<a href="https://hub.xpub.nl/sandbot/~eunalee/flask/dictionary/?word={{i}}" style="color: green; text-decoration: underline;" target="_blank" rel="noopener noreferrer">{{i}}</a>
|
|
|
{% else %}
|
|
|
{{i}}
|
|
|
{%endif%}
|
|
|
{%endfor%}
|
|
|
</p>
|
|
|
<br>
|
|
|
<audio controls autoplay>
|
|
|
<source src="https://hub.xpub.nl/sandbot/~eunalee/show/voice.mp3" type="audio/mpeg">
|
|
|
</audio>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% else %}
|
|
|
<div class="txt"></div>
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
._. ._.
|
|
|
/ oo\ /Oo \
|
|
|
<span id="ascii"></span>
|
|
|
______________________________________________________________________________________________
|
|
|
</pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
// Define global variables for the function of the code
|
|
|
// Frequncy in Hz
|
|
|
var frequency = 2;
|
|
|
// The ID of the HTML element you wish to update
|
|
|
var elementID = "ascii";
|
|
|
// The array (list) of things you want to cycle through. To escape special characters like \, ', " etc use a \ before them. To do a newline use <br />. All HTML tags are valid.
|
|
|
var ASCIIs = [
|
|
|
" | > | Blala | < |<br>_________|__σ__|_/______________________________________________________________|__.__|_______",
|
|
|
" | > | Pruru | < |<br>_________|__.__|______________________________________________________________\\_|__o__|_______"
|
|
|
];
|
|
|
|
|
|
// On window load, start the update cylce function
|
|
|
window.onload = function() {
|
|
|
|
|
|
update(0);
|
|
|
|
|
|
}
|
|
|
|
|
|
// Update cylce function takes the index (where it is in the array)
|
|
|
function update(index){
|
|
|
|
|
|
// Update the element id of elementID to have the index-th ASCII array entry in it. (Note: arrays start at 0)
|
|
|
document.getElementById(elementID).innerHTML = ASCIIs[index];
|
|
|
|
|
|
// Call the update function after 1 second / frequency (Hz).
|
|
|
setTimeout(function(){
|
|
|
|
|
|
// Pass the update function the index that it was called with this time, plus 1.
|
|
|
// % means modulus (remainder when divided by)
|
|
|
// This way, it doesnt' try to look for the 1000th element which doesn't exist
|
|
|
update((index+1)%ASCIIs.length);
|
|
|
|
|
|
}, 1000/frequency);
|
|
|
|
|
|
}
|
|
|
|
|
|
function openForm() {
|
|
|
document.getElementById("myForm").style.display = "block";
|
|
|
}
|
|
|
|
|
|
function closeForm() {
|
|
|
document.getElementById("myForm").style.display = "none";
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
</html> |