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.

239 lines
7.2 KiB
HTML

2 years ago
<!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>