eunalee
/
frabjousish
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

this is main flask pages :)

Browse Source
master
eunalee 2 years ago
parent 507bb63793
commit 7ba5f4fbb5
30 changed files with 7572 additions and 0 deletions
Show Stats Download Patch File Download Diff File

1468
main/database.json
View File

File diff suppressed because it is too large Load Diff

502
main/fll2.py
Unescape Escape View File

@ -0,0 +1,502 @@
from flask import Flask, render_template, request, redirect, url_for
import os
import json
from datetime import datetime
import pytz
import random
from gtts import gTTS
import requests
# from nltk.corpus import wordnet as wn
from nltk.tokenize import SyllableTokenizer
from nltk import word_tokenize
import requests
from bs4 import BeautifulSoup
app = Flask(__name__)
datap = ""
app = Flask(__name__)
text = None
str1=''
la=''
token=[]
collec=[]
bunch=[]
@app.route("/response/")
def wordnet():
with open("database.json", "r") as f: #close automatically
json_file = f.read()
database = json.loads(json_file)
# bunch = list(chosenword.keys())
if request.args.get("whatever"):
response = None
clicked_word = request.args.get("whatever")
SSP = SyllableTokenizer()
if clicked_word in database:
response = database[clicked_word]
stories = response["stories"]
a=stories[0]["A"]
b=stories[0]["B"]
word1 = SSP.tokenize(a)
word2 = SSP.tokenize(b)
remove1 = []
remove2 = []
pick=''
what = ["noun", "verb", "adjective", "adverb", "conjunction", "pronoun", "preposition", "exclamation", "determiner"]
pick='(potentially) ' + random.choice(what)
print("word1", word1, len(word1), type(word1))
print("word2", word2, len(word2), type(word2))
# word1 ['screw', 'dri', 'ver']
# word2 ['dri', 'ver']
for i in range(len(word1)):
print(i)
print(word1[i])
if word1[i] in word2:
remove1.append(word1[i])
remove2.append(word1[i])
print("remove1", remove1)
print("remove2", remove2)
for j in remove1:
word1.remove(j)
for k in remove1:
word2.remove(k)
print("word1", word1)
print("word2", word2)
# word2.remove(word1[i])
# word1.remove(word1[i])
if not len(word1)==0:
frab1=word1[0]
else:
frab1=""
if not len(word2)==0:
frab2=word2[-1]
else:
frab2=""
frab = frab1 + frab2
# print(os.path.exists(frab + ".json"))
# if not os.path.exists(frab + ".json"):
# with open(frab+".json", "w") as fra:
# frab = {
# frab : [frab]
# }
# json.dump(frab, fra, indent=1)
return render_template("response.html", clicked_word = clicked_word, database = database, stories=stories, a=a, b=b, word1=word1, word2=word2, frab=frab, pick=pick)
else:
return render_template("first.html", database = database)
@app.route('/game2/', methods =['GET', 'POST'])
def game2():
with open("database.json", "r") as word: #close automatically
json_file = word.read()
chosenword = json.loads(json_file)
bunch=[]
bunch = list(chosenword.keys())
ranword = random.choice(bunch)
response = None
print(ranword)
if ranword in chosenword:
response = chosenword[ranword]
stories = response["stories"]
frab=stories[0]["frab"]
example=stories[0]["example"]
example2=stories[0]["example2"]
if request.method == 'GET':
return render_template("secondgame1.html", stories=stories, example=example, frab=frab, ranword=ranword, example2=example2)
elif request.args.get("whatever"):
frab = request.args.get("whatever")
guess1 = request.form.get('guess1')
guess2 = request.form.get('guess2')
SSP = SyllableTokenizer()
word1 = SSP.tokenize(guess1)
word2 = SSP.tokenize(guess2)
remove1 = []
remove2 = []
frab1=""
frab2=""
for i in range(len(word1)):
print(i)
print(word1[i])
if word1[i] in word2:
remove1.append(word1[i])
remove2.append(word1[i])
print("remove1", remove1)
print("remove2", remove2)
for j in remove1:
word1.remove(j)
for k in remove1:
word2.remove(k)
print("word1", word1)
print("word2", word2)
# word2.remove(word1[i])
# word1.remove(word1[i])
if not len(word1)==0:
frab1=word1[0]
else:
frab1=""
if not len(word2)==0:
frab2=word2[-1]
else:
frab2=""
newfrab = frab1 + frab2
return render_template("secondgame2.html", guess1=guess1, guess2=guess2, frab1=frab1, frab2=frab2, newfrab=newfrab, frab=frab)
# with open("game2.json", "r+") as jsonFile:
# gugu = {
# chosenword: [guess1, guess2]
# }
# json.dump(gugu, jsonFile, indent=1)
# else:
# return render_template("first3.html", chosenword = chosenword)
@app.route('/trad/', methods =['GET', 'POST'])
def trad():
if os.path.exists("hello3.mp3"):
os.remove("hello3.mp3")
text = None
str1=''
la=''
token=[]
collec=[]
mw2=[]
text2 = ''
with open("database.json", "r") as word: #close automatically
json_file = word.read()
data = json.loads(json_file)
for i in range(len(data)):
first=list(data.values())[i]['stories'][0]
if ' ' in first['A']:
mw2.append(first['A'])
if ' ' in first['B']:
mw2.append(first['B'])
i+=1
if request.args.get('text'):
text = request.args.get('text').lower()
first={}
for i in mw2:
if i in text:
i2 = i.replace(' ', '_')
text = text.replace(i, i2)
token = word_tokenize(text)
for i in range(len(data)):
first=list(data.values())[i]['stories'][0]
for j in range(len(token)):
if '_' not in token[j]:
if token[j]==first['A'] or token[j]==first['B']:
token[j]=first['frab']
collec.append(token[j])
elif '_' in token[j]:
token[j]=token[j].replace('_', ' ')
if token[j]==first['A'] or token[j]==first['B']:
token[j]=first['frab']
collec.append(token[j])
i+=1
print(token)
str1 = ' '.join(token)
# if str1 == '':
# str1 = text
# else:
# str1 = ' '.join(token)
# print(str1)
lan=["af", "ar", "bg", "bn", "bs", "ca", "cs", "da", "de", "el", "en", "es", "et", "fi", "fr", "gu", "hi", "hr", "hu", "id", "is", "it", "ja", "jw", "km", "kn", "ko", "la", "lv", "ml", "mr", "my", "ne", "nl", "no", "pl", "pt", "ro", "ru", "si", "sk", "sq", "sr", "su", "sv", "sw", "ta", "te", "th", "tl", "tr", "uk", "ur", "vi", "zh"]
la=random.choice(lan)
print(la)
tts = gTTS(str1, lang=la, tld='com.au')
tts.save('hello3.mp3')
# if " ." or " ," or " !" or " ?" or " '" or " :" or " ;" in str1:
# str1=str1.replace(" .", ".")
# str1=str1.replace(" ,", ",")
# str1=str1.replace(" !", "!")
# str1=str1.replace(" ?", "?")
# str1=str1.replace(" '", "'")
# str1=str1.replace(" :", ":")
# str1=str1.replace(" ;", ";")s
return render_template('transform.html', data=data, text=text, str1=str1, collec=collec, token=token)
@app.route('/submit/', methods =['GET','POST'])
def register():
if request.method == 'GET':
return render_template("submit.html")
else:
d={}
tagtag=''
tagtag2=''
example=""
time=""
tz_Amsterdam = pytz.timezone('Europe/Amsterdam')
datetime_Amsterdam = datetime.now(tz_Amsterdam)
time=datetime_Amsterdam.strftime("%d/%m/%Y %H:%M:%S") + "(Amsterdam time)"
name = request.form.get('name')
w1 = request.form.get('w1').lower()
w2 = request.form.get('w2').lower()
story = request.form.get('story')
d['User']=name
d['A']=w1
d['B']=w2
d['story']=story
d['Time']=time
#Making Frabjousish word
SSP = SyllableTokenizer()
word1 = SSP.tokenize(w1)
word2 = SSP.tokenize(w2)
remove1 = []
remove2 = []
print("word1", word1, len(word1), type(word1))
print("word2", word2, len(word2), type(word2))
# word1 ['screw', 'dri', 'ver']
# word2 ['dri', 'ver']
for i in range(len(word1)):
print(i)
print(word1[i])
if word1[i] in word2:
remove1.append(word1[i])
remove2.append(word1[i])
print("remove1", remove1)
print("remove2", remove2)
for j in remove1:
word1.remove(j)
for k in remove1:
word2.remove(k)
print("word1", word1)
print("word2", word2)
# word2.remove(word1[i])
# word1.remove(word1[i])
if not len(word1)==0:
frab1=word1[0]
else:
frab1=""
if not len(word2)==0:
frab2=word2[-1]
else:
frab2=""
frab = frab1 + frab2
d['frab']=frab
#example line (with wordnet -> not enough examples :()
# if wn.synsets(w1):
# selec=''
# line = wn.synsets(w1)[0].examples()
# #check if the example key includes the word
# for x in line:
# if w1 in x:
# selec=x
# break
# else:
# selec = selec
# line2 = selec.replace(w1, frab)
# d['example'] = line2
# else:
# d['example'] = ''
#example line with beautifulsoup
w3=''
if ' ' in w1:
w3=w1.replace(" ","%20")
else:
w3=w1
url = "https://lengusa.com/sentence-examples/" + w3
example = requests.get(url)
html = example.content
try:
scraped = BeautifulSoup(html, 'html.parser')
p_tag = scraped.find_all("p", class_="text-black mt-1 font-serif")[0].get_text()
p_tag2 = scraped.find_all("p", class_="text-black mt-1 font-serif")[1].get_text()
p_tag3 = scraped.find_all("p", class_="text-black mt-1 font-serif")[2].get_text()
if w1 in p_tag:
tagtag = p_tag.replace(w1, frab)
d['example']=tagtag
elif w1.capitalize() in p_tag:
tagtag = p_tag.replace(w1.capitalize(), frab)
d['example']=tagtag
elif w1 in p_tag2:
tagtag = p_tag2.replace(w1, frab)
d['example']=tagtag
elif w1.capitalize() in p_tag2:
tagtag = p_tag2.replace(w1.capitalize(), frab)
d['example']=tagtag
elif w1 in p_tag3:
tagtag = p_tag3.replace(w1, frab)
d['example']=tagtag
elif w1.capitalize() in p_tag3:
tagtag = p_tag3.replace(w1.capitalize(), frab)
d['example']=tagtag
else:
d['example']=''
except Exception as e:
print("1st", e,"word is not found!")
d['example']=''
#second example line with beautifulsoup
w4=''
if ' ' in w2:
w4=w2.replace(" ","%20")
else:
w4=w2
url2 = "https://lengusa.com/sentence-examples/" + w4
example2 = requests.get(url2)
html2 = example2.content
try:
scraped2 = BeautifulSoup(html2, 'html.parser')
p_tag4 = scraped2.find_all("p", class_="text-black mt-1 font-serif")[0].get_text()
p_tag5 = scraped2.find_all("p", class_="text-black mt-1 font-serif")[1].get_text()
p_tag6 = scraped2.find_all("p", class_="text-black mt-1 font-serif")[2].get_text()
if w2 in p_tag4:
tagtag2 = p_tag4.replace(w2, frab)
d['example2']=tagtag2
elif w2.capitalize() in p_tag4:
tagtag2 = p_tag4.replace(w2.capitalize(), frab)
d['example2']=tagtag2
elif w2 in p_tag5:
tagtag2 = p_tag5.replace(w2, frab)
d['example2']=tagtag2
elif w2.capitalize() in p_tag5:
tagtag2 = p_tag5.replace(w2.capitalize(), frab)
d['example2']=tagtag2
elif w2 in p_tag6:
tagtag2 = p_tag6.replace(w2, frab)
d['example2']=tagtag2
elif w2.capitalize() in p_tag6:
tagtag2 = p_tag6.replace(w2.capitalize(), frab)
d['example2']=tagtag2
else:
d['example2']=''
except Exception as e:
print("2nd", e ,"word is not found!")
d['example2']=''
if not (name and w1 and w2 and story and time) :
return "Please write everyting"
else:
with open("database.json", "r+") as jsonFile:
data = json.load(jsonFile)
if frab not in data:
data[frab] = {
"stories" : []
}
data[frab]["stories"].append(d)
#data.update(set)
with open("database.json", "w") as jsonFile:
json.dump(data, jsonFile, indent=2) #shift + tap -> further function appears
return render_template("thanks.html")
@app.route('/', methods =['GET','POST'])
def first():
return render_template("index.html")
@app.route('/letter/')
def letter():
return render_template("letter.html")
@app.route('/g/')
def gamemenu():
return render_template("g.html")
if __name__ == "__main__":
app.run(debug=True, port=5006)

201
main/templates/desktop.css
Unescape Escape View File

@ -0,0 +1,201 @@
@font-face {
font-family: 'jgs7';
src: url("https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/jgs7.ttf");
}
body{
font-family: 'jgs7', monospace;
background-color: green;
font-size: 1.1rem;
color: green;
margin-top: 0;
}
button{
background-color: green;
margin-left: 0.3rem;
margin-bottom: 0.5rem;
padding: 0.5rem 1rem;
border: 2px solid green;
font-size: 1.1rem;
color: white;
cursor: pointer;
font-family: 'jgs7', monospace;
}
button:hover{
background-color: white;
color: green;
}
button:active {
background-color: #f44082;
color: white;
border-color: #f44082;
}
a{
font-family: 'jgs7', monospace;
text-decoration: none;
color: white;
}
pre{
font-family: 'jgs7', monospace;
margin-top: 0;
line-height: 1.1rem;
text-align: left;
}
.input{
height: 1.1rem;
font-family: "jgs7";
}
input[type=submit]{
background-color: white;
margin-left: 5px;
margin-bottom: 5px;
padding: 5px 15px;
border: 2px solid green;
font-size: 1.1rem;
color: green;
cursor: pointer;
font-family: "jgs7";
}
/* .box{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
*/
.box{
position: relative;
margin: 0 auto;
}
.cnt{
position: absolute;
top: 0%;
left: 50%;
transform:translate(-50%, 0);
background-color: white;
padding: 3% 5%;
min-height: 1200px;
}
.txt{
line-height: 1.8rem;
/* width: 60%;
margin-left: 10%;
margin-top: 5%; */
text-align: center;
max-width: 836px;
}
.letter{
line-height: 1.5rem;
}
.left{
color: white;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 15%;
padding: 3%;
max-width: 476.05px;
}
.right{
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 15%;
padding: 3%;
}
.right p{
position: fixed;
top: 90%;
right: 3%;
}
.left pre:hover{
cursor: pointer;
}
.left pre:hover > .petit{
color: #f44082;
}
.left pre:active > .grr{
color: green;
}
.left pre:active {
transform: translateY(10px) translateX(10px);
}
@media only screen and (max-width: 600px) {
body {
width: 90%;
font-size: 2vw;
}
button{
font-size: 2vw;
padding: 1vw 1vw;
margin-bottom: 0.3rem;
margin-left: 0.2rem;
/*margin: 1vw;*/
/*padding: 1vw;*/
}
table, th, td{
border: 1px solid green;
padding: 1vw;
text-align: center;
}
table{
width: 12rem;
}
.cnt {
width: 100%;
margin-left: 0;
}
.txt{
margin: 5%;
line-height: 3vw;
}
.right{
display: none;
}
.left{
display: none;
}
}

201
main/templates/first.html
Unescape Escape View File

@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/desktop.css">
<style>
.colo{
display:none;
}
@media print {
@page {
size: landscape;
margin-top: 20%;
}
body{
color: black;
font-size: 2rem;
line-height: 2.2rem;
}
pre{
font-size: 1.5rem;
line-height: 1.5rem;
}
.left{
display: none;
}
.right{
display: none;
}
.last{
display: none;
}
.cnt{
width: 100%;
margin: 0;
min-height: unset;
}
button{
border: none;
}
.txt{
display: none;
}
.colo{
display: block;
}
}
</style>
<title>Frabjousish Dictionary</title>
</head>
<body>
<div class="left">
<a href="../"><pre>
____________
| |<span class="grr">\</span>
| <span class="petit">MAIN</span> |<span class="grr">░</span>
|____________|<span class="grr">░</span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre></a>
<pre onClick="window.print()">
____________
| |<span class="grr">\</span>
| <span class="petit">Print</span> |<span class="grr">░</span>
|____________|<span class="grr">░</span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre>
</div>
<div class="right">
<p>(C)eunalee</p>
</div>
<div class="box">
<div class="cnt">
<pre class="cut">
______________________________________________________________________________________________
______________________________________________________________________________________________
. . .
. . . . . .
. ____ ____ __ ____ __ __ _ _ ____ __ ____ _ _
( __)( _ \ / _\ ( _ \ _( ) / \ / )( \/ ___)( )/ ___)/ )( \
) _) ) // \ ) _ (/ \) \( O )) \/ (\___ \ )( \___ \) __ ( . .
. (__). (__\_)\_/\_/(____/\____/ \__/ \____/(____/(__)(____/\_)(_/
. ____ __ ___ ____ __ .__ __ _ __ ____ _ _ .
( \( )/ __)(_ _)( )/ \ ( ( \ / _\ ( _ \( \/ ) .
. ) D ( )(( (__ )( )(( O )/ // \ ) / ) / . .-.
(____/(__)\___) (__) (__)\__/ \_)__)\_/\_/(__\_)(__/ /o o\
. . . <span id='ascii'></span>
. . /| `=' |\/
______________________________________________________________________________m/__▒▒▒▒▒_______
___________________________________________________________________________________▒__▒_______
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::`::`:::::::
</pre>
<div class="txt">
{%for key, word in database.items()%}
{% for story in word.stories%}
<a href="?whatever={{ key }}"><button>{{key}}</button></a>
{% endfor%}
{%endfor%}
</div>
<p class="colo">
<br><br><br><br><br><br>
<em>Frabjousish Dictionary</em> has been produced in the context of the graduation project of Euna Lee(<span style="text-decoration: underline;">https://www.euna-lee.com/</span>) From the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy in the 2022 summer.
<br><br>
I kindly invite you to contribute to Frabjousish word-making and take a look at updated Frabjousish words at <span style="text-decoration: underline;">https://hub.xpub.nl/frabjousish/world/</span>.
<br><br>
Typeface: jgs7
</p>
<pre class="last">
______________________________________________________________________________________________
______________________________________________________________________________________________
</pre>
</div>
</div>
</body>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// 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 = [
" | > | m",
" | > | _",
" | > | w" ];
// 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);
}
</script>
</html>

88
main/templates/index.html
Unescape Escape View File

@ -0,0 +1,88 @@
<!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.1rem;
font-size: 1.1rem;
margin-top: 0;
background-color: green;
}
pre{
/*position: absolute;
left: 16%;
top: 10%;*/
font-family: 'jgs7', monospace;
background-color: white;
color:green;
padding: 5%;
}
.box{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
a{
color: green;
}
a:hover{
color: #f44082;
}
</style></head>
<body data-new-gr-c-s-check-loaded="14.1062.0" data-gr-ext-installed="">
<div class="box">
<pre>
This website is based on. \\/\///\\\\//\/\//\/\/\\//\\/\//\////\//\/\\\/\\//\\///\//
the graduation project of /\\\/\//\/\/\/\\\///\//////\\//\//\\///\/\//\/\//\/\/////\
<a href="https://www.euna-lee.com/">Euna Lee</a> (XPUB) in 2022. \\/\///////\\\\/\\\\\///\\\/\\\///\\\/\\//\////\/\\\\///\/
\\\/\///////\\\\/\\\\\///\\\/\\\///\\\/\\//\////\/\\\\///\
//\//\\\\/\\\/\/\\\\\\/\\\\/\\\/\/\//\\/\\\///////\//\/\//\////\/\//\\\\//\///\////\/\\\/\\\\\\//\\\
///\///\\/\/\\//\\//\/\\//\\/\//\\\\\\//\\//////\\///\/\/////\/\//\\/\///\\///\\///\//\////\/\\/\/\/
\/\\\///\\\/\/\\///\\/\/\\\/\//\\//\/\//\/\//////\\/\\/\////\\\\/\//\///\\\\\//\\//\\//\///\//\//\/\
///\/\/\\\\\\\\//\///\\\///\///\/\//\\/\\/\\\\\//\\\/\\\/\///\//\\/\\\///////\/\\//\\\/\\\\\\\//\\//
/\/\\/\\//\\//\\\/\\//\/\/\\///\///\\\/\\\/\///\/////\/\\/\//\\///\/\/\\\\\////\/\\\///\\\\////\\//\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\//// ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\//// WELCOME to the ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\/
///\//\///\\\\\\\/\/////\\\\//\/\\\/ LOOKING-SCREEN WORLD /\//\\\\/\///\///\//////\/\/\\\/////\
//\\\\///\\\/\\\\\/\//\/\/\\/\\\\\// \//\\//\\///\\\//\//\\/\///\\\//\//\/
\\/\///\\///\\/\/\\/\/\\\/\/\///\/\/ ○ <a href="letter/">Read me</a> /\\\/\\\//\\//////\/\/\\\///\\\//\/\/
//\\\//\//\////\////\\/\///\\\\\//// ○ <a href="submit/">Submit</a> \//\//\/\\//\//\//////\\/\\\\////\//\
/\\\\\\/\\//\\\\\/\///\\\//\//\\//// ○ <a href="response/">Dictionary</a> \\///\\//\/\\\\\/\/\//\\\\/\///\\/\/\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\/\\/ ○ <a href="trad/">Translate</a> ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\//// ○ <a href="g/">Game</a> ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\//// ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\\
\/\//\///\\/\//\\\////\\/\/\/\\/\\\/\//\/\\\/\\//\\\\\\/\//\//\/\\/\/\///\\\\\/\///\/\//\\/\/\\//\\\
/\\\/\\//\\//\\\\\/\/\/\\/\/////\//\///\//\/\\\\\\\/\/\////\//\\/\\//\\/\////\\/\/\\\\\/\//\\//\//\\
//\\//\\\\\//\\///\\\/\\\/\\\\/\\\\//\//\//\\/////\\\\/\\/\\/\\\///\\\\\/\\////\\\//\\//\\\\\\///\//
///\\\//\\\/\\/\/\/\\\/\//\\//\//\/\\/\\/\\//\\\/\\//\////\\/\/\//\///\/\\\\\\\\//\/\\/\\//\\///\/\\
//\\/\////\\/\\\\///\/\\\\//\\\\/\/\/\\/\\\\\/\\//\/\//////\/\\\\/\//\\/////\\/\//\\//\/\\///\\/\/\/
/\/\\//\\///\///\\\\/\\//\\/\\\//\\\\\\\//\\\\\\/\\\/\\//\//\\/\//////\\\\/\\//\\/\/\/\\\\/\///\/\\/
\//\//\\\/\//\//\\/\\\///\\/\\//\\\//\\\/////\\//\//\/\////\\\\\///////\//\/\////\/\\\\/\//\////\/\/
/\/\//\////\/\//\/\////\\///\///\\/\/\//\/////\\/\/\//\\//\/\///\\\/\\\\//\\/\//\\\//\/\\\\/\\/\\\/\
//\/\\\\\/\\/\\/////\\\/\/\/\///\/\\/\/\///\//\\//\\//\\//\\/\///\/////\\\\/\\\//\//\\/\\///\/\/\\/\
</pre>
</div>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

BIN
main/templates/jgs7.ttf
View File

Binary file not shown.

190
main/templates/letter.html
Unescape Escape View File

@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/desktop.css">
<style>
@media print {
@page {
margin-top: 5%;
}
.left{
display: none;
}
.right{
display: none;
}
.cnt{
width: 75%;
margin: 0;
}
}
</style>
<title>Frabjousish Dictionary</title>
</head>
<body>
<div class="left">
<a href="../"><pre>
____________
| |<span class="grr">\</span>
| <span class="petit">MAIN</span> |<span class="grr">░</span>
|____________|<span class="grr">░</span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre></a>
<pre onClick="window.print()">
____________
| |<span class="grr">\</span>
| <span class="petit">Print</span> |<span class="grr">░</span>
|____________|<span class="grr">░</span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre>
</div>
<div class="right">
<p>(C)eunalee</p>
</div>
<div class="box">
<div class="cnt">
<pre>
______________________________________________________________________________________________
______________________________________________________________________________________________
. . . . . . . .
. ____ _ _ _ _ ____ ____ . __ ____ ____ _____ _ _
(_ _)( \( )( \/ )(_ _)(_ _) /__\ (_ _)(_ _)( _ )( \( ) . .
. _)(_ ) ( \ / _)(_ )( /(__)\ )( ._)(_ )(_)( ) ( .
(____)(_)\_) \/ (____) (__)(__)(__)(__) (____)(_____)(_)\_)
. __ ____ ____ ____ ____ ____ . .
. . ( ) ( ___)(_ _)(_ _)( ___)( _ \ . .
. )(__ )__) )( )( . )__) ) /
. (____)(____) (__) (__) (____)(_)\_) .
. . . . ._.
. . . . <span id='ascii'></span>
_________________________________________________________________________________\_|_≤___|____
______________________________________________________________________________________________
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<span class="letter">
Hello my friend on the other side of the screen!
When communicating in a second language, you may have accidentally made a slip
of the tongue that made people laugh, feel embarrassed, or enraged! As my mother tongue is
Korean and I learned English and French in Korea, I have experienced those situations.
Once, I proposed an "unanimous" vote instead of an "anonymous" vote and sometimes, I struggle
to pronounce “sheet” and “shit” differently. And even yesterday, Grammarly sentenced me a
red dotted underline. According to the AI , I should've not use the word "humour", because
it doesn't suit me. Do I deserve to be blamed? Do I have to be ashamed of these errors?
At first, does the "correct" language exist? Does anyone deserve to convict me as
a "linguistic criminal"? I confess, "I was and I believed so" before I discovered
the 'Looking-Screen World', a digital universe inspired by the looking-mirror world
in <em>Through the Looking-Glass</em> by Lewis Carroll.
The first time I came here, every Frabjousish* welcomed me with open arms. Figuring out
that I’m from the “Real-world”, they asked me with a twinkle in their eyes, if I've
experienced a slip of tongue, which is an urban legend** for Frabjousish. As soon as
I finished my several anecdotes, a Frabjousish*** stepped up. "When I use a word," she said
in rather a scornful tone, "it means just what I choose it to mean- neither more nor less.”
We, as I am one of them by now, don't obey linguistic rules, but we all are the creator
of our language. For us, speaking or writing in an unknown way is a moment of growth
of Frabjousish. We register it on the Frabjousish Dictionary*** and from that moment, we
chat, read and make a poem in that way!
This is why I'm writing this invitation to you. On behalf of Frabjousish, I kindly ask
you to come here, contribute to our language and to savour it together! You don't need
to worry if we don't like you. Your color, gender, political orientation, MBTI type, pet
or else don't matter to us. On the contrary, we are always seeking diversity and warmly
welcome anyone as they are. We look forward to meeting you here:
https://hub.xpub.nl/sandbot/~eunalee/flask/,
Hug,
Your sincere friend from the Looking-Screen World,
Euna
* A compound word of Frabjous(invented word by Lewis Carroll, fair + fabulous +joyous)
and ish(suffix meaning relating to)
** A steady seller in the Looking-screen world, "Urban legendarium Tome 1" is
about the language in other worlds. As the "correct" nor "wrong" language does not exist
in Frabjousish, the word "Slip of tongue", "pidgin", "rectify", "red underline",
"Grammarly" and others make Frabjousish tremble.
*** She was an egg-shape person and sat on a wall.
**** A ring bound book. Since Frabjousish never stops adding a new page, the bookmaker
refuses to bind with glue or thread.
</span>
______________________________________________________________________________________________
______________________________________________________________________________________________
</pre>
</div>
</div>
</body>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 4;
// 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 = [
"[] /. .\\ .",
"{} /. .\\ .",
"[] /. .\\ ." ];
// 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);
}
</script>
</html>

232
main/templates/response.html
Unescape Escape View File

@ -0,0 +1,232 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/desktop.css">
<style>
table, th, td{
border: 2px solid green;
padding: 0.7rem;
text-align: center;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 90%;
margin: 1rem ;
}
@media print {
@page {
size: landscape;
margin-top: 10%;
}
body{
color: black;
font-size: 2rem;
}
.left{
display: none;
}
.right{
display: none;
}
pre{
display: none;
}
.bt{
display: none;
}
.cnt{
width: 90%;
margin: 0;
min-height: unset;
}
table, th, td{
border: 1px solid black;
}
#no{
display: none;
}
}
</style>
<title>Frabjousish Dictionary</title>
</head>
<body>
<div class="left">
<a href="../"><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="https://hub.xpub.nl/sandbot/~eunalee/flask/response/"><pre>
____________
| |<span class="grr">\</span>
| <span class="petit">Index</span> |<span class="grr">░</span>
|____________|<span class="grr">░</span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre></a>
<pre onClick="window.print()">
____________
| |<span class="grr">\</span>
| <span class="petit">Print</span> |<span class="grr">░</span>
|____________|<span class="grr">░</span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre>
</div>
<div class="right">
<p>(C)eunalee</p>
</div>
<div class="box">
<div class="cnt">
<pre>______________________________________________________________________________________________
______________________________________________________________________________________________
. . . . . .
. . . . . . .
____ ____ __ ____ . __ __ _ _ ____ __ ____ _ _ .
. ( __)( _ \ / _\ ( _ \ _( ) / \ / )( \/ ___)( )/ ___)/ )( \ .
. ) _) ) // \ ) _ (/ \) \( O )) \/ (\___ \ )( \___ \) __ ( .
(__) (__\_)\_/\_/(____/\____/ \__/ \____/(____/(__)(____/\_)(_/ .
____ .__ ___ ____ __ __ . __ _ __ ____ _ _
. ( \( )/ __)(_ _)( )/ \ ( ( \ / _\ ( _ \( \/ ) . . .
. ) D ( )(( (__ . )( )(( O )/ // \ ) / ) / .-.
(____/(__)\___) (__) (__)\__/ \_)__)\_/\_/(__\_)(__/ /<span id="ascii"></span>\
. . . . | > |
. . . . /| `=' |\
______________________________________________________________________________m/__▒▒▒▒▒__\m___
___________________________________________________________________________________▒__▒_______
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::`::`:::::::</pre>
<div class="txt" style="text-align: left; margin-left: 2%;">
<h1>{{frab}}</h1>
<em>{{pick}}</em>
<br><br>
{% for story in stories%}
○ Definition: {{story.A}} and {{story.B}}
<br>
<table>
<tr>
<td>{{story.A}}</td>
<td>{{word1[0]}}</td>
<td> </td>
</tr>
<tr>
<td>{{story.B}}</td>
<td> </td>
<td>{{word2[-1]}}</td>
</tr>
</table>
○ Etymology: {{story.story}} <em>said {{story.User}} at {{story.Time}}.</em>
<br>
<br>
○ Example 1: {{story.example}}<br><br>
○ Example 2: {{story.example2}}
<br>
</div>
{% endfor%}
<pre>
______________________________________________________________________________________________
______________________________________________________________________________________________
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
</pre>
<div class="txt bt" id="no">
{%for key, word in database.items()%}
{% for story in word.stories%}
<a href="?whatever={{ key }}"><button>{{key}}</button></a>
{% endfor%}
{%endfor%}
</div>
<pre>
______________________________________________________________________________________________
______________________________________________________________________________________________
</pre>
</div>
</div>
</body>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// 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 = [
"O .",
"o o",
". 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);
}
</script>
</html>

199
main/templates/secondgame1.html
Unescape Escape View File

@ -0,0 +1,199 @@
<!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;
}
.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;
}
textarea {
background-color: green;
color: white;
border: 2px dotted white;
outline: none;
resize: none
}
textarea:focus {
border: 2px dotted white;
resize: 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="../"><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>Guess this frabjousish word!</h3>
<p style="width:50%; margin-left: 25%;">
All the English words are portmanteau, a word blending the sounds and combining the meanings of two others, for example, motel or brunch. Guess the two words which are used to make the word below.</p>
<br>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<br>
<form action="https://hub.xpub.nl/sandbot/~eunalee/flask/game2/?whatever={{ frab }}" method="POST" autocomplete="off">
<h1>{{frab}}</h1>
example 1: {{example}}<br>
example 2: {{example2}}
<br><br>
<textarea name="guess1"></textarea>
<textarea name="guess2"></textarea><br><br>
<input type="submit" value="submit">
</form>
<br>
<pre>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%</pre>
</div>
</div>
</div>
</body></html>

289
main/templates/secondgame2.html
Unescape Escape View File

@ -0,0 +1,289 @@
<!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;
}
.txt{
width: 60%;
margin-left: 20%;
line-height: 1.8rem;
display: grid;
grid-template-areas:
"txt1 txt2 txt3"
"txt4 txt5 txt6";
grid-gap: 2px;
padding: 2px;
background-color: green;
}
.txt1{
grid-area: txt1;
}
.txt2{
grid-area: txt2;
}
.txt3{
grid-area: txt3;
}
.txt4{
grid-area: txt4;
}
.txt5{
grid-area: txt5;
}
.txt6{
grid-area: txt6;
}
.txt > div{
background-color: white;
color: green;
}
.table{
width: 50%;
}
.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;
}
.vert{
color: green;
text-decoration: underline;
}
.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;
}
textarea {
background-color: green;
color: white;
border: 2px dotted white;
outline: none;
resize: none
}
textarea:focus {
border: 2px dotted white;
resize: 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="../"><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>
<br>
<h3>You gueessed this portmanteau word!</h3>
<div class="txt">
<div class="txt1">{{guess1}}</div>
<div class="txt2">{{frab1}}</div>
<div class="txt3">&nbsp;</div>
<div class="txt4">{{guess2}}</div>
<div class="txt5">&nbsp;</div>
<div class="txt6">{{frab2}}</div>
</div><br>
Your Frabjousish word:
<h3>{{newfrab}}</h3>Originally, <em>{{frab}}</em> is made <a href="https://hub.xpub.nl/sandbot/~eunalee/flask/response/?whatever={{frab}}" class="petit vert" target="_blank" rel="noopener noreferrer">so</a>!
<pre>
<span id="ascii"></span>
\/o o\/ \/o o\/
\___/ \___/
| | | |
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
</pre>
</div>
</div>
</div>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// 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 = [
"* .-. * * .-. *",
"* .-. . . .-. *",
". .-. . . .-. .",
];
// 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);
}
</script>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

143
main/templates/submit.html
Unescape Escape View File

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://hub.xpub.nl/sandbot/~eunalee/flaskplay/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{
text-align: center;
}
</style>
<title>Submit</title>
</head>
<body>
<div class="left">
<a href="../"><pre>
____________
| |<span class="grr">\</span>
| <span class="petit">MAIN</span> |<span class="grr">░</span>
|____________|<span class="grr">░</span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre></a>
<pre>
____________
| |<span class="grr">\</span>
| <span class="petit">About</span> |<span class="grr">░</span>
|____________|<span class="grr">░</span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre>
</div>
<div class="right">
<p>(C)eunalee</p>
</div>
<div class="box">
<div class="cnt">
<pre>
______________________________________________________________________________________________
______________________________________________________________________________________________
.
. . . .
___ __ __ ____ __ __ ____ ____
/ __)( )( )( _ \( \/ )(_ _)(_ _)
. \__ \ )(__)( ) _ < ) ( _)(_ )( .
(___/(______)(____/(_/\/\_)(____) (__) .
. .
Have you ever committed a slip of the tongue?
. . . . .
Did you think "A" but say "B" instead?
. Did you mean "A" type "B" instead?
Did you hear "A" but understand it as "B"? .
._. ._.
w /o o\ w . Please tell us bit more! w /o o\ w
\_| > |_/ We need your story to make our language, Frabjousish! \_| < |_/
|<span id='ascii'></span> .
******* . *******
| | . | |
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
</pre>
<div class="txt">
<form action="https://hub.xpub.nl/sandbot/~eunalee/flask/submit/" method="POST" autocomplete="off">
<p>Your name? <br><textarea cols="45" name="name"/></textarea></p>
<p>A? <br><textarea cols="45" name="w1"/></textarea></p>
<p>B? <br><textarea cols="45" name="w2"/></textarea></p>
<p>STORY? <br><textarea cols="45" rows="8" name="story"/></textarea></p>
<p><input type="submit" value="submit"></p>
</form>
</div>
<pre>
______________________________________________________________________________________________
______________________________________________________________________________________________
</pre>
</div>
</div>
</body>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// 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 = [
" `=' | . | u |",
" `-' | . | U |",
" `=' | . | u |" ];
// 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);
}
</script>
</html>

88
main/templates/thanks.html
Unescape Escape View File

@ -0,0 +1,88 @@
<!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.1rem;
font-size: 1.1rem;
margin-top: 0;
background-color: green;
}
pre{
/*position: absolute;
left: 16%;
top: 10%;*/
font-family: 'jgs7', monospace;
background-color: white;
color:green;
padding: 5%;
}
.box{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
a{
color: green;
}
a:hover{
color: #f44082;
}
</style></head>
<body data-new-gr-c-s-check-loaded="14.1062.0" data-gr-ext-installed="">
<div class="box">
<pre>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::· · · · · · · · · · · ·:::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::·· · · · · · · · · ··::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· THANK YOU! ·:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· You just contributed ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· to making a new ·:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· Frabjousish word:) ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· ·:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· Please Enjoy ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· ○ <a href="https://hub.xpub.nl/sandbot/~eunalee/flask/response/">THE DICTIONARY</a> ·:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· ○ <a href="https://hub.xpub.nl/sandbot/~eunalee/flask/">OTHER ACTIVITIES</a> ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· ·:::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::· . . . . . . . . · ·:::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::· . . . . . . . . . . ·:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
</pre>
</div>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

213
main/templates/transform.html
Unescape Escape View File

@ -0,0 +1,213 @@
<!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/flaskplay/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;
}
}
</style>
<title>Frabjousish Translator</title>
</head>
<body>
<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>
<pre onClick="window.print()">
____________
| |<span class="grr">\</span>
| <span class="petit">Print</span> |<span class="grr">░</span>
|____________|<span class="grr">░</span>
<span class="grr">\░░░░░░░░░░░░\;</span>
</pre>
</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>
</p>
<form>
<textarea cols="45" rows="8" name="text"></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/response/?whatever={{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/flaskplay/hello3.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);
}
</script>
</html>

39
record_main/frabjousish.json
Unescape Escape View File

@ -0,0 +1,39 @@
{
"frabjousish": [
"frabjousish",
"frabjousish",
"2022-06-12T11:47:29.814Z.wav",
"flazusish",
"2022-06-12T11:58:20.903Z.wav",
"plabjausi",
"2022-06-12T12:11:30.242Z.wav",
"vlabjaous",
"2022-06-13T19:11:20.473Z.wav",
"blabjaz",
"2022-06-13T19:15:51.208Z.wav",
"Blapjass",
"2022-06-13T20:22:26.755Z.wav",
"blapchas",
"2022-06-19T10:41:18.123Z.wav",
"vrabje",
"2022-06-19T11:27:47.470Z.wav",
"test",
"2022-06-20T08:18:07.137Z.wav",
"test",
"2022-06-20T08:34:42.840Z.wav",
"a",
"2022-06-20T08:37:46.430Z.wav",
"2022-06-20T08:38:52.738Z.wav",
"aaaaa",
"2022-06-20T08:49:05.421Z.wav",
"yes",
"2022-06-20T08:52:09.665Z.wav",
"ah",
"2022-06-20T08:53:30.908Z.wav",
"dfdf",
"2022-06-20T08:54:30.414Z.wav",
"as",
"2022-06-20T08:55:27.381Z.wav",
""
]
}

237
record_main/game.py
Unescape Escape View File

@ -0,0 +1,237 @@
from flask import Flask, render_template, request, redirect
import os
import json
from datetime import datetime
import pytz
app = Flask(__name__)
datap = ""
@app.route('/r1/')
def game_r1():
with open("frabjousish.json", "r") as f:
json_file = f.read()
database = json.loads(json_file)
response = database["frabjousish"]
return render_template("index3.html", response = response)
@app.route('/r2/')
def game_r2():
with open("shusho.json", "r") as f:
json_file = f.read()
database = json.loads(json_file)
response = database["shusho"]
return render_template("index5.html", response = response)
@app.route('/r3/')
def game_r3():
with open("t offut.json", "r") as f:
json_file = f.read()
database = json.loads(json_file)
response = database["t offut"]
return render_template("index7.html", response = response)
@app.route("/", methods=['POST', 'GET'])
def game():
print("frabjousish.json")
print(os.path.exists("frabjousish.json"))
if not os.path.exists("frabjousish.json"):
with open("frabjousish.json", "w") as fra:
frab = {
"frabjousish": ["frabjousish", "frabjousish"]
}
json.dump(frab, fra, indent=1)
with open("frabjousish.json", "r") as fra:
json_file = fra.read()
data2 = json.loads(json_file)
datap = data2["frabjousish"][-1]
datap2 = data2["frabjousish"][-2]
# type(datap)
if request.method == 'GET':
return render_template("index2.html", datap=datap, datap2=datap2)
else:
if ".wav" in datap:
spel = request.form.get('spel')
with open("frabjousish.json", "r+") as jsonFile:
data = json.load(jsonFile)
data["frabjousish"].append(spel)
with open("frabjousish.json", "w") as jsonFile:
json.dump(data, jsonFile, indent=1)
with open("frabjousish.json", "r") as f:
json_file = f.read()
database = json.loads(json_file)
response = database["frabjousish"]
return render_template("index3.html", database = database, response = response, datap=datap, data2=data2)
# else:
# if request.method == "POST":
# f = request.files['audio_data']
# filename = f.filename
# with open(f'{ filename }.wav', 'wb') as audio:
# f.save(audio)
# print(f'file uploaded successfully: { filename }.wav')
# with open("frabjousish.json", "r+") as jsonFile:
# data = json.load(jsonFile)
# data["frabjousish"].append(filename+".wav")
# with open("frabjousish.json", "w") as jsonFile:
# json.dump(data, jsonFile, indent=1)
# return render_template('index3.html', datap=datap)
# else:
# return render_template("index3.html")
@app.route("/upload/", methods=['POST'])
def game_post():
if request.method == "POST":
f = request.files['audio_data']
filename = f.filename
with open(f'{ filename }.wav', 'wb') as audio:
f.save(audio)
print(f'file uploaded successfully: { filename }.wav')
with open("frabjousish.json", "r+") as jsonFile:
data = json.load(jsonFile)
data["frabjousish"].append(filename+".wav")
with open("frabjousish.json", "w") as jsonFile:
json.dump(data, jsonFile, indent=1)
return "uploaded"
@app.route("/g1/", methods=['POST', 'GET'])
def game2():
print("shusho.json")
print(os.path.exists("shusho.json"))
if not os.path.exists("shusho.json"):
with open("shusho.json", "w") as fra:
frab = {
"shusho": ["shusho", "shusho"]
}
json.dump(frab, fra, indent=1)
with open("shusho.json", "r") as fra:
json_file = fra.read()
data2 = json.loads(json_file)
datap = data2["shusho"][-1]
datap2 = data2["shusho"][-2]
# type(datap)
if request.method == 'GET':
return render_template("index4.html", datap=datap, datap2=datap2)
else:
if ".wav" in datap:
spel = request.form.get('spel')
with open("shusho.json", "r+") as jsonFile:
data = json.load(jsonFile)
data["shusho"].append(spel)
with open("shusho.json", "w") as jsonFile:
json.dump(data, jsonFile, indent=1)
with open("shusho.json", "r") as f:
json_file = f.read()
database = json.loads(json_file)
response = database["shusho"]
return render_template("index5.html", database = database, response = response, datap=datap, data2=data2)
else:
if request.method == "POST":
f = request.files['audio_data']
filename = f.filename
with open(f'{ filename }.wav', 'wb') as audio:
f.save(audio)
print(f'file uploaded successfully: { filename }.wav')
with open("shusho.json", "r+") as jsonFile:
data = json.load(jsonFile)
data["shusho"].append(filename+".wav")
with open("shusho.json", "w") as jsonFile:
json.dump(data, jsonFile, indent=1)
return render_template('index5.html', request="POST", datap=datap)
else:
return render_template("index5.html")
@app.route("/g2/", methods=['POST', 'GET'])
def game3():
print("t offut.json")
print(os.path.exists("t offut.json"))
if not os.path.exists("t offut.json"):
with open("t offut.json", "w") as fra:
frab = {
"t offut": ["t offut", "t offut"]
}
json.dump(frab, fra, indent=1)
with open("t offut.json", "r") as fra:
json_file = fra.read()
data2 = json.loads(json_file)
datap = data2["t offut"][-1]
datap2 = data2["t offut"][-2]
# type(datap)
if request.method == 'GET':
return render_template("index6.html", datap=datap, datap2=datap2)
else:
if ".wav" in datap:
spel = request.form.get('spel')
with open("t offut.json", "r+") as jsonFile:
data = json.load(jsonFile)
data["t offut"].append(spel)
with open("t offut.json", "w") as jsonFile:
json.dump(data, jsonFile, indent=1)
with open("t offut.json", "r") as f:
json_file = f.read()
database = json.loads(json_file)
response = database["t offut"]
return render_template("index7.html", database = database, response = response, datap=datap, data2=data2)
else:
if request.method == "POST":
f = request.files['audio_data']
filename = f.filename
with open(f'{ filename }.wav', 'wb') as audio:
f.save(audio)
print(f'file uploaded successfully: { filename }.wav')
with open("t offut.json", "r+") as jsonFile:
data = json.load(jsonFile)
data["t offut"].append(filename+".wav")
with open("t offut.json", "w") as jsonFile:
json.dump(data, jsonFile, indent=1)
return render_template('index7.html', request="POST", datap=datap)
else:
return render_template("index7.html")
if __name__ == "__main__":
app.run(debug=True, port=5050)

19
record_main/shusho.json
Unescape Escape View File

@ -0,0 +1,19 @@
{
"shusho": [
"shusho",
"shusho",
"2022-06-13T19:12:24.264Z.wav",
"chouchau",
"2022-06-13T19:24:45.263Z.wav",
"Chocho",
"2022-06-13T19:44:02.689Z.wav",
"chocho",
"2022-06-13T22:35:12.067Z.wav",
"chock chock",
"2022-06-13T22:35:12.067Z.wav",
"tchotchop",
"2022-06-19T12:03:18.841Z.wav",
"peuzau",
"2022-06-20T08:58:28.203Z.wav"
]
}

174
record_main/static/js/app.js
Unescape Escape View File

@ -0,0 +1,174 @@
// Source: https://stackoverflow.com/questions/60032983/record-voice-with-recorder-js-and-upload-it-to-python-flask-server-but-wav-file
//webkitURL is deprecated but nevertheless
URL = window.URL || window.webkitURL;
var gumStream; //stream from getUserMedia()
var rec; //Recorder.js object
var input; //MediaStreamAudioSourceNode we'll be recording
// shim for AudioContext when it's not avb.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext //audio context to help us record
var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");
var pauseButton = document.getElementById("pauseButton");
//add events to those 2 buttons
recordButton.addEventListener("click", startRecording);
stopButton.addEventListener("click", stopRecording);
pauseButton.addEventListener("click", pauseRecording);
function startRecording() {
console.log("recordButton clicked");
/*
Simple constraints object, for more advanced audio features see
https://addpipe.com/blog/audio-constraints-getusermedia/
*/
var constraints = { audio: true, video:false }
/*
Disable the record button until we get a success or fail from getUserMedia()
*/
recordButton.disabled = true;
stopButton.disabled = false;
pauseButton.disabled = false
/*
We're using the standard promise based getUserMedia()
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
*/
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
/*
create an audio context after getUserMedia is called
sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
the sampleRate defaults to the one set in your OS for your playback device
*/
audioContext = new AudioContext();
//update the format
//document.getElementById("formats").innerHTML="Format: 1 channel pcm @ "+audioContext.sampleRate/1000+"kHz"
/* assign to gumStream for later use */
gumStream = stream;
/* use the stream */
input = audioContext.createMediaStreamSource(stream);
/*
Create the Recorder object and configure to record mono sound (1 channel)
Recording 2 channels will double the file size
*/
rec = new Recorder(input,{numChannels:1})
//start the recording process
rec.record()
console.log("Recording started");
}).catch(function(err) {
//enable the record button if getUserMedia() fails
recordButton.disabled = false;
stopButton.disabled = true;
pauseButton.disabled = true
});
}
function pauseRecording(){
console.log("pauseButton clicked rec.recording=",rec.recording );
if (rec.recording){
//pause
rec.stop();
pauseButton.innerHTML="Resume";
}else{
//resume
rec.record()
pauseButton.innerHTML="Pause";
}
}
function stopRecording() {
console.log("stopButton clicked");
//disable the stop button, enable the record too allow for new recordings
stopButton.disabled = true;
recordButton.disabled = false;
pauseButton.disabled = true;
//reset button just in case the recording is stopped while paused
pauseButton.innerHTML="Pause";
//tell the recorder to stop the recording
rec.stop();
//stop microphone access
gumStream.getAudioTracks()[0].stop();
//create the wav blob and pass it on to createDownloadLink
rec.exportWAV(createDownloadLink);
}
function createDownloadLink(blob) {
var url = URL.createObjectURL(blob);
var au = document.createElement('audio');
var li = document.createElement('li');
var link = document.createElement('a');
//name of .wav file to use during upload and download (without extendion)
var filename = new Date().toISOString();
console.log('filename', filename)
//add controls to the <audio> element
au.controls = true;
au.src = url;
//save to disk link
link.href = url;
link.download = filename+".wav"; //download forces the browser to donwload the file using the filename
//link.innerHTML = "Save to disk";
//add the new audio element to li
li.appendChild(au);
//add the filename to the li
//li.appendChild(document.createTextNode(filename+".wav "))
//add the save to disk link to li
//li.appendChild(link);
//upload link
var upload = document.createElement('a');
upload.href="#";
upload.innerHTML = "Done";
upload.addEventListener("click", function(event){
var xhr=new XMLHttpRequest();
xhr.onload=function(e) {
if(this.readyState === 4) {
console.log("Server returned: ",e.target.responseText);
}
};
xhr.onreadystatechange = function() { // listen for state changes
if (xhr.readyState == 4 && xhr.status == 200) { // when completed we can move away
window.location = "https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/r1/";
}}
var fd=new FormData(); // https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
fd.append("audio_data", blob, filename);
xhr.open("POST","https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/upload/",true);
xhr.send(fd);
})
li.appendChild(document.createTextNode (" "))//add a space in between
li.appendChild(upload)//add the upload link to li
//add the li element to the ol
recordingsList.appendChild(li);
}

357
record_main/static/js/recorder.js
Unescape Escape View File

@ -0,0 +1,357 @@
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Recorder = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
module.exports = require("./recorder").Recorder;
},{"./recorder":2}],2:[function(require,module,exports){
'use strict';
var _createClass = (function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
}
}return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
};
})();
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Recorder = undefined;
var _inlineWorker = require('inline-worker');
var _inlineWorker2 = _interopRequireDefault(_inlineWorker);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Recorder = exports.Recorder = (function () {
function Recorder(source, cfg) {
var _this = this;
_classCallCheck(this, Recorder);
this.config = {
bufferLen: 4096,
numChannels: 2,
mimeType: 'audio/wav'
};
this.recording = false;
this.callbacks = {
getBuffer: [],
exportWAV: []
};
Object.assign(this.config, cfg);
this.context = source.context;
this.node = (this.context.createScriptProcessor || this.context.createJavaScriptNode).call(this.context, this.config.bufferLen, this.config.numChannels, this.config.numChannels);
this.node.onaudioprocess = function (e) {
if (!_this.recording) return;
var buffer = [];
for (var channel = 0; channel < _this.config.numChannels; channel++) {
buffer.push(e.inputBuffer.getChannelData(channel));
}
_this.worker.postMessage({
command: 'record',
buffer: buffer
});
};
source.connect(this.node);
this.node.connect(this.context.destination); //this should not be necessary
var self = {};
this.worker = new _inlineWorker2.default(function () {
var recLength = 0,
recBuffers = [],
sampleRate = undefined,
numChannels = undefined;
self.onmessage = function (e) {
switch (e.data.command) {
case 'init':
init(e.data.config);
break;
case 'record':
record(e.data.buffer);
break;
case 'exportWAV':
exportWAV(e.data.type);
break;
case 'getBuffer':
getBuffer();
break;
case 'clear':
clear();
break;
}
};
function init(config) {
sampleRate = config.sampleRate;
numChannels = config.numChannels;
initBuffers();
}
function record(inputBuffer) {
for (var channel = 0; channel < numChannels; channel++) {
recBuffers[channel].push(inputBuffer[channel]);
}
recLength += inputBuffer[0].length;
}
function exportWAV(type) {
var buffers = [];
for (var channel = 0; channel < numChannels; channel++) {
buffers.push(mergeBuffers(recBuffers[channel], recLength));
}
var interleaved = undefined;
if (numChannels === 2) {
interleaved = interleave(buffers[0], buffers[1]);
} else {
interleaved = buffers[0];
}
var dataview = encodeWAV(interleaved);
var audioBlob = new Blob([dataview], { type: type });
self.postMessage({ command: 'exportWAV', data: audioBlob });
}
function getBuffer() {
var buffers = [];
for (var channel = 0; channel < numChannels; channel++) {
buffers.push(mergeBuffers(recBuffers[channel], recLength));
}
self.postMessage({ command: 'getBuffer', data: buffers });
}
function clear() {
recLength = 0;
recBuffers = [];
initBuffers();
}
function initBuffers() {
for (var channel = 0; channel < numChannels; channel++) {
recBuffers[channel] = [];
}
}
function mergeBuffers(recBuffers, recLength) {
var result = new Float32Array(recLength);
var offset = 0;
for (var i = 0; i < recBuffers.length; i++) {
result.set(recBuffers[i], offset);
offset += recBuffers[i].length;
}
return result;
}
function interleave(inputL, inputR) {
var length = inputL.length + inputR.length;
var result = new Float32Array(length);
var index = 0,
inputIndex = 0;
while (index < length) {
result[index++] = inputL[inputIndex];
result[index++] = inputR[inputIndex];
inputIndex++;
}
return result;
}
function floatTo16BitPCM(output, offset, input) {
for (var i = 0; i < input.length; i++, offset += 2) {
var s = Math.max(-1, Math.min(1, input[i]));
output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
}
}
function writeString(view, offset, string) {
for (var i = 0; i < string.length; i++) {
view.setUint8(offset + i, string.charCodeAt(i));
}
}
function encodeWAV(samples) {
var buffer = new ArrayBuffer(44 + samples.length * 2);
var view = new DataView(buffer);
/* RIFF identifier */
writeString(view, 0, 'RIFF');
/* RIFF chunk length */
view.setUint32(4, 36 + samples.length * 2, true);
/* RIFF type */
writeString(view, 8, 'WAVE');
/* format chunk identifier */
writeString(view, 12, 'fmt ');
/* format chunk length */
view.setUint32(16, 16, true);
/* sample format (raw) */
view.setUint16(20, 1, true);
/* channel count */
view.setUint16(22, numChannels, true);
/* sample rate */
view.setUint32(24, sampleRate, true);
/* byte rate (sample rate * block align) */
view.setUint32(28, sampleRate * 4, true);
/* block align (channel count * bytes per sample) */
view.setUint16(32, numChannels * 2, true);
/* bits per sample */
view.setUint16(34, 16, true);
/* data chunk identifier */
writeString(view, 36, 'data');
/* data chunk length */
view.setUint32(40, samples.length * 2, true);
floatTo16BitPCM(view, 44, samples);
return view;
}
}, self);
this.worker.postMessage({
command: 'init',
config: {
sampleRate: this.context.sampleRate,
numChannels: this.config.numChannels
}
});
this.worker.onmessage = function (e) {
var cb = _this.callbacks[e.data.command].pop();
if (typeof cb == 'function') {
cb(e.data.data);
}
};
}
_createClass(Recorder, [{
key: 'record',
value: function record() {
this.recording = true;
}
}, {
key: 'stop',
value: function stop() {
this.recording = false;
}
}, {
key: 'clear',
value: function clear() {
this.worker.postMessage({ command: 'clear' });
}
}, {
key: 'getBuffer',
value: function getBuffer(cb) {
cb = cb || this.config.callback;
if (!cb) throw new Error('Callback not set');
this.callbacks.getBuffer.push(cb);
this.worker.postMessage({ command: 'getBuffer' });
}
}, {
key: 'exportWAV',
value: function exportWAV(cb, mimeType) {
mimeType = mimeType || this.config.mimeType;
cb = cb || this.config.callback;
if (!cb) throw new Error('Callback not set');
this.callbacks.exportWAV.push(cb);
this.worker.postMessage({
command: 'exportWAV',
type: mimeType
});
}
}], [{
key: 'forceDownload',
value: function forceDownload(blob, filename) {
var url = (window.URL || window.webkitURL).createObjectURL(blob);
var link = window.document.createElement('a');
link.href = url;
link.download = filename || 'output.wav';
var click = document.createEvent("Event");
click.initEvent("click", true, true);
link.dispatchEvent(click);
}
}]);
return Recorder;
})();
exports.default = Recorder;
},{"inline-worker":3}],3:[function(require,module,exports){
"use strict";
module.exports = require("./inline-worker");
},{"./inline-worker":4}],4:[function(require,module,exports){
(function (global){
"use strict";
var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
var WORKER_ENABLED = !!(global === global.window && global.URL && global.Blob && global.Worker);
var InlineWorker = (function () {
function InlineWorker(func, self) {
var _this = this;
_classCallCheck(this, InlineWorker);
if (WORKER_ENABLED) {
var functionBody = func.toString().trim().match(/^function\s*\w*\s*\([\w\s,]*\)\s*{([\w\W]*?)}$/)[1];
var url = global.URL.createObjectURL(new global.Blob([functionBody], { type: "text/javascript" }));
return new global.Worker(url);
}
this.self = self;
this.self.postMessage = function (data) {
setTimeout(function () {
_this.onmessage({ data: data });
}, 0);
};
setTimeout(function () {
func.call(self);
}, 0);
}
_createClass(InlineWorker, {
postMessage: {
value: function postMessage(data) {
var _this = this;
setTimeout(function () {
_this.self.onmessage({ data: data });
}, 0);
}
}
});
return InlineWorker;
})();
module.exports = InlineWorker;
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[1])(1)
});

170
record_main/static/js2/app.js
Unescape Escape View File

@ -0,0 +1,170 @@
// Source: https://stackoverflow.com/questions/60032983/record-voice-with-recorder-js-and-upload-it-to-python-flask-server-but-wav-file
//webkitURL is deprecated but nevertheless
URL = window.URL || window.webkitURL;
var gumStream; //stream from getUserMedia()
var rec; //Recorder.js object
var input; //MediaStreamAudioSourceNode we'll be recording
// shim for AudioContext when it's not avb.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext //audio context to help us record
var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");
var pauseButton = document.getElementById("pauseButton");
//add events to those 2 buttons
recordButton.addEventListener("click", startRecording);
stopButton.addEventListener("click", stopRecording);
pauseButton.addEventListener("click", pauseRecording);
function startRecording() {
console.log("recordButton clicked");
/*
Simple constraints object, for more advanced audio features see
https://addpipe.com/blog/audio-constraints-getusermedia/
*/
var constraints = { audio: true, video:false }
/*
Disable the record button until we get a success or fail from getUserMedia()
*/
recordButton.disabled = true;
stopButton.disabled = false;
pauseButton.disabled = false
/*
We're using the standard promise based getUserMedia()
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
*/
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
/*
create an audio context after getUserMedia is called
sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
the sampleRate defaults to the one set in your OS for your playback device
*/
audioContext = new AudioContext();
//update the format
//document.getElementById("formats").innerHTML="Format: 1 channel pcm @ "+audioContext.sampleRate/1000+"kHz"
/* assign to gumStream for later use */
gumStream = stream;
/* use the stream */
input = audioContext.createMediaStreamSource(stream);
/*
Create the Recorder object and configure to record mono sound (1 channel)
Recording 2 channels will double the file size
*/
rec = new Recorder(input,{numChannels:1})
//start the recording process
rec.record()
console.log("Recording started");
}).catch(function(err) {
//enable the record button if getUserMedia() fails
recordButton.disabled = false;
stopButton.disabled = true;
pauseButton.disabled = true
});
}
function pauseRecording(){
console.log("pauseButton clicked rec.recording=",rec.recording );
if (rec.recording){
//pause
rec.stop();
pauseButton.innerHTML="Resume";
}else{
//resume
rec.record()
pauseButton.innerHTML="Pause";
}
}
function stopRecording() {
console.log("stopButton clicked");
//disable the stop button, enable the record too allow for new recordings
stopButton.disabled = true;
recordButton.disabled = false;
pauseButton.disabled = true;
//reset button just in case the recording is stopped while paused
pauseButton.innerHTML="Pause";
//tell the recorder to stop the recording
rec.stop();
//stop microphone access
gumStream.getAudioTracks()[0].stop();
//create the wav blob and pass it on to createDownloadLink
rec.exportWAV(createDownloadLink);
}
function createDownloadLink(blob) {
var url = URL.createObjectURL(blob);
var au = document.createElement('audio');
var li = document.createElement('li');
var link = document.createElement('a');
//name of .wav file to use during upload and download (without extendion)
var filename = new Date().toISOString();
console.log('filename', filename)
//add controls to the <audio> element
au.controls = true;
au.src = url;
//save to disk link
link.href = url;
link.download = filename+".wav"; //download forces the browser to donwload the file using the filename
//link.innerHTML = "Save to disk";
//add the new audio element to li
li.appendChild(au);
//add the filename to the li
//li.appendChild(document.createTextNode(filename+".wav "))
//add the save to disk link to li
//li.appendChild(link);
//upload link
var upload = document.createElement('a');
upload.href="#";
upload.innerHTML = "Upload";
upload.addEventListener("click", function(event){
var xhr=new XMLHttpRequest();
xhr.onload=function(e) {
if(this.readyState === 4) {
console.log("Server returned: ",e.target.responseText);
}
};
var fd=new FormData(); // https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
fd.append("audio_data", blob, filename);
xhr.open("POST","https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/g1/",true);
xhr.send(fd);
})
li.appendChild(document.createTextNode (" "))//add a space in between
li.appendChild(upload)//add the upload link to li
//add the li element to the ol
recordingsList.appendChild(li);
}

357
record_main/static/js2/recorder.js
Unescape Escape View File

@ -0,0 +1,357 @@
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Recorder = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
module.exports = require("./recorder").Recorder;
},{"./recorder":2}],2:[function(require,module,exports){
'use strict';
var _createClass = (function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
}
}return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
};
})();
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Recorder = undefined;
var _inlineWorker = require('inline-worker');
var _inlineWorker2 = _interopRequireDefault(_inlineWorker);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Recorder = exports.Recorder = (function () {
function Recorder(source, cfg) {
var _this = this;
_classCallCheck(this, Recorder);
this.config = {
bufferLen: 4096,
numChannels: 2,
mimeType: 'audio/wav'
};
this.recording = false;
this.callbacks = {
getBuffer: [],
exportWAV: []
};
Object.assign(this.config, cfg);
this.context = source.context;
this.node = (this.context.createScriptProcessor || this.context.createJavaScriptNode).call(this.context, this.config.bufferLen, this.config.numChannels, this.config.numChannels);
this.node.onaudioprocess = function (e) {
if (!_this.recording) return;
var buffer = [];
for (var channel = 0; channel < _this.config.numChannels; channel++) {
buffer.push(e.inputBuffer.getChannelData(channel));
}
_this.worker.postMessage({
command: 'record',
buffer: buffer
});
};
source.connect(this.node);
this.node.connect(this.context.destination); //this should not be necessary
var self = {};
this.worker = new _inlineWorker2.default(function () {
var recLength = 0,
recBuffers = [],
sampleRate = undefined,
numChannels = undefined;
self.onmessage = function (e) {
switch (e.data.command) {
case 'init':
init(e.data.config);
break;
case 'record':
record(e.data.buffer);
break;
case 'exportWAV':
exportWAV(e.data.type);
break;
case 'getBuffer':
getBuffer();
break;
case 'clear':
clear();
break;
}
};
function init(config) {
sampleRate = config.sampleRate;
numChannels = config.numChannels;
initBuffers();
}
function record(inputBuffer) {
for (var channel = 0; channel < numChannels; channel++) {
recBuffers[channel].push(inputBuffer[channel]);
}
recLength += inputBuffer[0].length;
}
function exportWAV(type) {
var buffers = [];
for (var channel = 0; channel < numChannels; channel++) {
buffers.push(mergeBuffers(recBuffers[channel], recLength));
}
var interleaved = undefined;
if (numChannels === 2) {
interleaved = interleave(buffers[0], buffers[1]);
} else {
interleaved = buffers[0];
}
var dataview = encodeWAV(interleaved);
var audioBlob = new Blob([dataview], { type: type });
self.postMessage({ command: 'exportWAV', data: audioBlob });
}
function getBuffer() {
var buffers = [];
for (var channel = 0; channel < numChannels; channel++) {
buffers.push(mergeBuffers(recBuffers[channel], recLength));
}
self.postMessage({ command: 'getBuffer', data: buffers });
}
function clear() {
recLength = 0;
recBuffers = [];
initBuffers();
}
function initBuffers() {
for (var channel = 0; channel < numChannels; channel++) {
recBuffers[channel] = [];
}
}
function mergeBuffers(recBuffers, recLength) {
var result = new Float32Array(recLength);
var offset = 0;
for (var i = 0; i < recBuffers.length; i++) {
result.set(recBuffers[i], offset);
offset += recBuffers[i].length;
}
return result;
}
function interleave(inputL, inputR) {
var length = inputL.length + inputR.length;
var result = new Float32Array(length);
var index = 0,
inputIndex = 0;
while (index < length) {
result[index++] = inputL[inputIndex];
result[index++] = inputR[inputIndex];
inputIndex++;
}
return result;
}
function floatTo16BitPCM(output, offset, input) {
for (var i = 0; i < input.length; i++, offset += 2) {
var s = Math.max(-1, Math.min(1, input[i]));
output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
}
}
function writeString(view, offset, string) {
for (var i = 0; i < string.length; i++) {
view.setUint8(offset + i, string.charCodeAt(i));
}
}
function encodeWAV(samples) {
var buffer = new ArrayBuffer(44 + samples.length * 2);
var view = new DataView(buffer);
/* RIFF identifier */
writeString(view, 0, 'RIFF');
/* RIFF chunk length */
view.setUint32(4, 36 + samples.length * 2, true);
/* RIFF type */
writeString(view, 8, 'WAVE');
/* format chunk identifier */
writeString(view, 12, 'fmt ');
/* format chunk length */
view.setUint32(16, 16, true);
/* sample format (raw) */
view.setUint16(20, 1, true);
/* channel count */
view.setUint16(22, numChannels, true);
/* sample rate */
view.setUint32(24, sampleRate, true);
/* byte rate (sample rate * block align) */
view.setUint32(28, sampleRate * 4, true);
/* block align (channel count * bytes per sample) */
view.setUint16(32, numChannels * 2, true);
/* bits per sample */
view.setUint16(34, 16, true);
/* data chunk identifier */
writeString(view, 36, 'data');
/* data chunk length */
view.setUint32(40, samples.length * 2, true);
floatTo16BitPCM(view, 44, samples);
return view;
}
}, self);
this.worker.postMessage({
command: 'init',
config: {
sampleRate: this.context.sampleRate,
numChannels: this.config.numChannels
}
});
this.worker.onmessage = function (e) {
var cb = _this.callbacks[e.data.command].pop();
if (typeof cb == 'function') {
cb(e.data.data);
}
};
}
_createClass(Recorder, [{
key: 'record',
value: function record() {
this.recording = true;
}
}, {
key: 'stop',
value: function stop() {
this.recording = false;
}
}, {
key: 'clear',
value: function clear() {
this.worker.postMessage({ command: 'clear' });
}
}, {
key: 'getBuffer',
value: function getBuffer(cb) {
cb = cb || this.config.callback;
if (!cb) throw new Error('Callback not set');
this.callbacks.getBuffer.push(cb);
this.worker.postMessage({ command: 'getBuffer' });
}
}, {
key: 'exportWAV',
value: function exportWAV(cb, mimeType) {
mimeType = mimeType || this.config.mimeType;
cb = cb || this.config.callback;
if (!cb) throw new Error('Callback not set');
this.callbacks.exportWAV.push(cb);
this.worker.postMessage({
command: 'exportWAV',
type: mimeType
});
}
}], [{
key: 'forceDownload',
value: function forceDownload(blob, filename) {
var url = (window.URL || window.webkitURL).createObjectURL(blob);
var link = window.document.createElement('a');
link.href = url;
link.download = filename || 'output.wav';
var click = document.createEvent("Event");
click.initEvent("click", true, true);
link.dispatchEvent(click);
}
}]);
return Recorder;
})();
exports.default = Recorder;
},{"inline-worker":3}],3:[function(require,module,exports){
"use strict";
module.exports = require("./inline-worker");
},{"./inline-worker":4}],4:[function(require,module,exports){
(function (global){
"use strict";
var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
var WORKER_ENABLED = !!(global === global.window && global.URL && global.Blob && global.Worker);
var InlineWorker = (function () {
function InlineWorker(func, self) {
var _this = this;
_classCallCheck(this, InlineWorker);
if (WORKER_ENABLED) {
var functionBody = func.toString().trim().match(/^function\s*\w*\s*\([\w\s,]*\)\s*{([\w\W]*?)}$/)[1];
var url = global.URL.createObjectURL(new global.Blob([functionBody], { type: "text/javascript" }));
return new global.Worker(url);
}
this.self = self;
this.self.postMessage = function (data) {
setTimeout(function () {
_this.onmessage({ data: data });
}, 0);
};
setTimeout(function () {
func.call(self);
}, 0);
}
_createClass(InlineWorker, {
postMessage: {
value: function postMessage(data) {
var _this = this;
setTimeout(function () {
_this.self.onmessage({ data: data });
}, 0);
}
}
});
return InlineWorker;
})();
module.exports = InlineWorker;
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[1])(1)
});

170
record_main/static/js3/app.js
Unescape Escape View File

@ -0,0 +1,170 @@
// Source: https://stackoverflow.com/questions/60032983/record-voice-with-recorder-js-and-upload-it-to-python-flask-server-but-wav-file
//webkitURL is deprecated but nevertheless
URL = window.URL || window.webkitURL;
var gumStream; //stream from getUserMedia()
var rec; //Recorder.js object
var input; //MediaStreamAudioSourceNode we'll be recording
// shim for AudioContext when it's not avb.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext //audio context to help us record
var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");
var pauseButton = document.getElementById("pauseButton");
//add events to those 2 buttons
recordButton.addEventListener("click", startRecording);
stopButton.addEventListener("click", stopRecording);
pauseButton.addEventListener("click", pauseRecording);
function startRecording() {
console.log("recordButton clicked");
/*
Simple constraints object, for more advanced audio features see
https://addpipe.com/blog/audio-constraints-getusermedia/
*/
var constraints = { audio: true, video:false }
/*
Disable the record button until we get a success or fail from getUserMedia()
*/
recordButton.disabled = true;
stopButton.disabled = false;
pauseButton.disabled = false
/*
We're using the standard promise based getUserMedia()
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
*/
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
/*
create an audio context after getUserMedia is called
sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
the sampleRate defaults to the one set in your OS for your playback device
*/
audioContext = new AudioContext();
//update the format
//document.getElementById("formats").innerHTML="Format: 1 channel pcm @ "+audioContext.sampleRate/1000+"kHz"
/* assign to gumStream for later use */
gumStream = stream;
/* use the stream */
input = audioContext.createMediaStreamSource(stream);
/*
Create the Recorder object and configure to record mono sound (1 channel)
Recording 2 channels will double the file size
*/
rec = new Recorder(input,{numChannels:1})
//start the recording process
rec.record()
console.log("Recording started");
}).catch(function(err) {
//enable the record button if getUserMedia() fails
recordButton.disabled = false;
stopButton.disabled = true;
pauseButton.disabled = true
});
}
function pauseRecording(){
console.log("pauseButton clicked rec.recording=",rec.recording );
if (rec.recording){
//pause
rec.stop();
pauseButton.innerHTML="Resume";
}else{
//resume
rec.record()
pauseButton.innerHTML="Pause";
}
}
function stopRecording() {
console.log("stopButton clicked");
//disable the stop button, enable the record too allow for new recordings
stopButton.disabled = true;
recordButton.disabled = false;
pauseButton.disabled = true;
//reset button just in case the recording is stopped while paused
pauseButton.innerHTML="Pause";
//tell the recorder to stop the recording
rec.stop();
//stop microphone access
gumStream.getAudioTracks()[0].stop();
//create the wav blob and pass it on to createDownloadLink
rec.exportWAV(createDownloadLink);
}
function createDownloadLink(blob) {
var url = URL.createObjectURL(blob);
var au = document.createElement('audio');
var li = document.createElement('li');
var link = document.createElement('a');
//name of .wav file to use during upload and download (without extendion)
var filename = new Date().toISOString();
console.log('filename', filename)
//add controls to the <audio> element
au.controls = true;
au.src = url;
//save to disk link
link.href = url;
link.download = filename+".wav"; //download forces the browser to donwload the file using the filename
//link.innerHTML = "Save to disk";
//add the new audio element to li
li.appendChild(au);
//add the filename to the li
//li.appendChild(document.createTextNode(filename+".wav "))
//add the save to disk link to li
//li.appendChild(link);
//upload link
var upload = document.createElement('a');
upload.href="#";
upload.innerHTML = "Upload";
upload.addEventListener("click", function(event){
var xhr=new XMLHttpRequest();
xhr.onload=function(e) {
if(this.readyState === 4) {
console.log("Server returned: ",e.target.responseText);
}
};
var fd=new FormData(); // https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
fd.append("audio_data", blob, filename);
xhr.open("POST","https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/g2/",true);
xhr.send(fd);
})
li.appendChild(document.createTextNode (" "))//add a space in between
li.appendChild(upload)//add the upload link to li
//add the li element to the ol
recordingsList.appendChild(li);
}

357
record_main/static/js3/recorder.js
Unescape Escape View File

@ -0,0 +1,357 @@
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Recorder = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
module.exports = require("./recorder").Recorder;
},{"./recorder":2}],2:[function(require,module,exports){
'use strict';
var _createClass = (function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
}
}return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
};
})();
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Recorder = undefined;
var _inlineWorker = require('inline-worker');
var _inlineWorker2 = _interopRequireDefault(_inlineWorker);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Recorder = exports.Recorder = (function () {
function Recorder(source, cfg) {
var _this = this;
_classCallCheck(this, Recorder);
this.config = {
bufferLen: 4096,
numChannels: 2,
mimeType: 'audio/wav'
};
this.recording = false;
this.callbacks = {
getBuffer: [],
exportWAV: []
};
Object.assign(this.config, cfg);
this.context = source.context;
this.node = (this.context.createScriptProcessor || this.context.createJavaScriptNode).call(this.context, this.config.bufferLen, this.config.numChannels, this.config.numChannels);
this.node.onaudioprocess = function (e) {
if (!_this.recording) return;
var buffer = [];
for (var channel = 0; channel < _this.config.numChannels; channel++) {
buffer.push(e.inputBuffer.getChannelData(channel));
}
_this.worker.postMessage({
command: 'record',
buffer: buffer
});
};
source.connect(this.node);
this.node.connect(this.context.destination); //this should not be necessary
var self = {};
this.worker = new _inlineWorker2.default(function () {
var recLength = 0,
recBuffers = [],
sampleRate = undefined,
numChannels = undefined;
self.onmessage = function (e) {
switch (e.data.command) {
case 'init':
init(e.data.config);
break;
case 'record':
record(e.data.buffer);
break;
case 'exportWAV':
exportWAV(e.data.type);
break;
case 'getBuffer':
getBuffer();
break;
case 'clear':
clear();
break;
}
};
function init(config) {
sampleRate = config.sampleRate;
numChannels = config.numChannels;
initBuffers();
}
function record(inputBuffer) {
for (var channel = 0; channel < numChannels; channel++) {
recBuffers[channel].push(inputBuffer[channel]);
}
recLength += inputBuffer[0].length;
}
function exportWAV(type) {
var buffers = [];
for (var channel = 0; channel < numChannels; channel++) {
buffers.push(mergeBuffers(recBuffers[channel], recLength));
}
var interleaved = undefined;
if (numChannels === 2) {
interleaved = interleave(buffers[0], buffers[1]);
} else {
interleaved = buffers[0];
}
var dataview = encodeWAV(interleaved);
var audioBlob = new Blob([dataview], { type: type });
self.postMessage({ command: 'exportWAV', data: audioBlob });
}
function getBuffer() {
var buffers = [];
for (var channel = 0; channel < numChannels; channel++) {
buffers.push(mergeBuffers(recBuffers[channel], recLength));
}
self.postMessage({ command: 'getBuffer', data: buffers });
}
function clear() {
recLength = 0;
recBuffers = [];
initBuffers();
}
function initBuffers() {
for (var channel = 0; channel < numChannels; channel++) {
recBuffers[channel] = [];
}
}
function mergeBuffers(recBuffers, recLength) {
var result = new Float32Array(recLength);
var offset = 0;
for (var i = 0; i < recBuffers.length; i++) {
result.set(recBuffers[i], offset);
offset += recBuffers[i].length;
}
return result;
}
function interleave(inputL, inputR) {
var length = inputL.length + inputR.length;
var result = new Float32Array(length);
var index = 0,
inputIndex = 0;
while (index < length) {
result[index++] = inputL[inputIndex];
result[index++] = inputR[inputIndex];
inputIndex++;
}
return result;
}
function floatTo16BitPCM(output, offset, input) {
for (var i = 0; i < input.length; i++, offset += 2) {
var s = Math.max(-1, Math.min(1, input[i]));
output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
}
}
function writeString(view, offset, string) {
for (var i = 0; i < string.length; i++) {
view.setUint8(offset + i, string.charCodeAt(i));
}
}
function encodeWAV(samples) {
var buffer = new ArrayBuffer(44 + samples.length * 2);
var view = new DataView(buffer);
/* RIFF identifier */
writeString(view, 0, 'RIFF');
/* RIFF chunk length */
view.setUint32(4, 36 + samples.length * 2, true);
/* RIFF type */
writeString(view, 8, 'WAVE');
/* format chunk identifier */
writeString(view, 12, 'fmt ');
/* format chunk length */
view.setUint32(16, 16, true);
/* sample format (raw) */
view.setUint16(20, 1, true);
/* channel count */
view.setUint16(22, numChannels, true);
/* sample rate */
view.setUint32(24, sampleRate, true);
/* byte rate (sample rate * block align) */
view.setUint32(28, sampleRate * 4, true);
/* block align (channel count * bytes per sample) */
view.setUint16(32, numChannels * 2, true);
/* bits per sample */
view.setUint16(34, 16, true);
/* data chunk identifier */
writeString(view, 36, 'data');
/* data chunk length */
view.setUint32(40, samples.length * 2, true);
floatTo16BitPCM(view, 44, samples);
return view;
}
}, self);
this.worker.postMessage({
command: 'init',
config: {
sampleRate: this.context.sampleRate,
numChannels: this.config.numChannels
}
});
this.worker.onmessage = function (e) {
var cb = _this.callbacks[e.data.command].pop();
if (typeof cb == 'function') {
cb(e.data.data);
}
};
}
_createClass(Recorder, [{
key: 'record',
value: function record() {
this.recording = true;
}
}, {
key: 'stop',
value: function stop() {
this.recording = false;
}
}, {
key: 'clear',
value: function clear() {
this.worker.postMessage({ command: 'clear' });
}
}, {
key: 'getBuffer',
value: function getBuffer(cb) {
cb = cb || this.config.callback;
if (!cb) throw new Error('Callback not set');
this.callbacks.getBuffer.push(cb);
this.worker.postMessage({ command: 'getBuffer' });
}
}, {
key: 'exportWAV',
value: function exportWAV(cb, mimeType) {
mimeType = mimeType || this.config.mimeType;
cb = cb || this.config.callback;
if (!cb) throw new Error('Callback not set');
this.callbacks.exportWAV.push(cb);
this.worker.postMessage({
command: 'exportWAV',
type: mimeType
});
}
}], [{
key: 'forceDownload',
value: function forceDownload(blob, filename) {
var url = (window.URL || window.webkitURL).createObjectURL(blob);
var link = window.document.createElement('a');
link.href = url;
link.download = filename || 'output.wav';
var click = document.createEvent("Event");
click.initEvent("click", true, true);
link.dispatchEvent(click);
}
}]);
return Recorder;
})();
exports.default = Recorder;
},{"inline-worker":3}],3:[function(require,module,exports){
"use strict";
module.exports = require("./inline-worker");
},{"./inline-worker":4}],4:[function(require,module,exports){
(function (global){
"use strict";
var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
var WORKER_ENABLED = !!(global === global.window && global.URL && global.Blob && global.Worker);
var InlineWorker = (function () {
function InlineWorker(func, self) {
var _this = this;
_classCallCheck(this, InlineWorker);
if (WORKER_ENABLED) {
var functionBody = func.toString().trim().match(/^function\s*\w*\s*\([\w\s,]*\)\s*{([\w\W]*?)}$/)[1];
var url = global.URL.createObjectURL(new global.Blob([functionBody], { type: "text/javascript" }));
return new global.Worker(url);
}
this.self = self;
this.self.postMessage = function (data) {
setTimeout(function () {
_this.onmessage({ data: data });
}, 0);
};
setTimeout(function () {
func.call(self);
}, 0);
}
_createClass(InlineWorker, {
postMessage: {
value: function postMessage(data) {
var _this = this;
setTimeout(function () {
_this.self.onmessage({ data: data });
}, 0);
}
}
});
return InlineWorker;
})();
module.exports = InlineWorker;
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[1])(1)
});

18
record_main/t offut.json
Unescape Escape View File

@ -0,0 +1,18 @@
{
"t offut": [
"t offut",
"t offut",
"2022-06-12T13:01:22.435Z.wav",
"taufuit",
"2022-06-13T19:17:39.344Z.wav",
"daoffut",
"2022-06-13T19:47:39.931Z.wav",
"paufoot",
"2022-06-13T21:26:27.653Z.wav",
"tappou",
"2022-06-19T11:34:31.505Z.wav",
"kaapou",
"2022-06-20T08:08:02.210Z.wav",
"lalala"
]
}

201
record_main/templates/desktop.css
Unescape Escape View File

@ -0,0 +1,201 @@
@font-face {
font-family: 'jgs7';
src: url("https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/jgs7.ttf");
}
body{
font-family: 'jgs7', monospace;
background-color: green;
font-size: 1.1rem;
color: green;
margin-top: 0;
}
button{
background-color: green;
margin-left: 0.3rem;
margin-bottom: 0.5rem;
padding: 0.5rem 1rem;
border: 2px solid green;
font-size: 1.1rem;
color: white;
cursor: pointer;
font-family: 'jgs7', monospace;
}
button:hover{
background-color: white;
color: green;
}
button:active {
background-color: #f44082;
color: white;
border-color: #f44082;
}
a{
font-family: 'jgs7', monospace;
text-decoration: none;
color: white;
}
pre{
font-family: 'jgs7', monospace;
margin-top: 0;
line-height: 1.1rem;
text-align: left;
}
.input{
height: 1.1rem;
font-family: "jgs7";
}
input[type=submit]{
background-color: white;
margin-left: 5px;
margin-bottom: 5px;
padding: 5px 15px;
border: 2px solid green;
font-size: 1.1rem;
color: green;
cursor: pointer;
font-family: "jgs7";
}
/* .box{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
*/
.box{
position: relative;
margin: 0 auto;
}
.cnt{
position: absolute;
top: 0%;
left: 50%;
transform:translate(-50%, 0);
background-color: white;
padding: 3% 5%;
min-height: 1200px;
}
.txt{
line-height: 1.8rem;
/* width: 60%;
margin-left: 10%;
margin-top: 5%; */
text-align: center;
max-width: 836px;
}
.letter{
line-height: 1.5rem;
}
.left{
color: white;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 15%;
padding: 3%;
max-width: 476.05px;
}
.right{
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 15%;
padding: 3%;
}
.right p{
position: fixed;
top: 90%;
right: 3%;
}
.left pre:hover{
cursor: pointer;
}
.left pre:hover > .petit{
color: #f44082;
}
.left pre:active > .grr{
color: green;
}
.left pre:active {
transform: translateY(10px) translateX(10px);
}
@media only screen and (max-width: 600px) {
body {
width: 90%;
font-size: 2vw;
}
button{
font-size: 2vw;
padding: 1vw 1vw;
margin-bottom: 0.3rem;
margin-left: 0.2rem;
/*margin: 1vw;*/
/*padding: 1vw;*/
}
table, th, td{
border: 1px solid green;
padding: 1vw;
text-align: center;
}
table{
width: 12rem;
}
.cnt {
width: 100%;
margin-left: 0;
}
.txt{
margin: 5%;
line-height: 3vw;
}
.right{
display: none;
}
.left{
display: none;
}
}

248
record_main/templates/index2.html
Unescape Escape View File

@ -0,0 +1,248 @@
<!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/" 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>
{% endif%}
<br><br>
<pre>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%</pre>
</div>
</div>
</div>
<script src="https://hub.xpub.nl/sandbot/~eunalee/record/static/js/recorder.js"></script>
<script src="https://hub.xpub.nl/sandbot/~eunalee/record/static/js/app.js"></script>
</body></html>

313
record_main/templates/index3.html
Unescape Escape View File

@ -0,0 +1,313 @@
<!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;
}
.txt{
width: 60%;
margin-left: 20%;
line-height: 1.8rem;
display: grid;
grid-template-areas:
"txt1 txt2 txt3"
"txt4 txt5 txt6";
grid-gap: 2px;
padding: 2px;
background-color: green;
}
.txt1{
grid-area: txt1;
}
.txt2{
grid-area: txt2;
}
.txt3{
grid-area: txt3;
}
.txt4{
grid-area: txt4;
}
.txt5{
grid-area: txt5;
}
.txt6{
grid-area: txt6;
}
.txt > div{
background-color: white;
color: green;
}
.table{
width: 50%;
}
.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;
}
.vert{
color: green;
}
.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;
}
button a{
color: green;
}
textarea {
background-color: green;
color: white;
border: 2px dotted white;
outline: none;
resize: none
}
textarea:focus {
border: 2px dotted white;
resize: 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>
<h1>frabjousish</h1>
<p style="width:50%; margin-left: 25%;">
is a compound word of <em>Frabjous</em> (an invented word by Lewis Carroll; fair, fabulous and joyous) and <em>-ish</em> (suffix meaning relating to).<br><br>
It is a common language of the <em>Looking-Screen World</em>where the distinction between "correct" and "wrong" language does not exist.<br><br>
Frabjousish is a gesture of so-called linguistic criminals, in reality, to promote language equality and resist the violence of Standard language.<br>
</p>
<br>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<br><br>
<h3>frabjousish can also be spelled and pronounced like:</h3>
{% for x in response %}
{% if ".wav" in x %}
<audio controls><source src="https://hub.xpub.nl/sandbot/~eunalee/record/{{x}}" type="audio/wav"></audio><br>▼<br>
{% else %}
{{x}}<br>▼<br>
{% endif %}
{% endfor %}
<br><br>
<button><a href="https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/g1/">Next</a></button>
<pre>
<span id="ascii"></span>
\/o o\/ \/o o\/
\___/ \___/
| | | |
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
</pre>
</div>
</div>
</div>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// 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 = [
"* .-. * * .-. *",
"* .-. . . .-. *",
". .-. . . .-. .",
];
// 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);
}
</script>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

247
record_main/templates/index4.html
Unescape Escape View File

@ -0,0 +1,247 @@
<!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/g1/" 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/r2/" style="color: green;">result</a></button>
{% endif%}
<br><br>
<pre>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%</pre>
</div>
</div>
</div>
<script src="https://hub.xpub.nl/sandbot/~eunalee/record/static/js2/recorder.js"></script>
<script src="https://hub.xpub.nl/sandbot/~eunalee/record/static/js2/app.js"></script>
</body></html>

313
record_main/templates/index5.html
Unescape Escape View File

@ -0,0 +1,313 @@
<!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;
}
.txt{
width: 60%;
margin-left: 20%;
line-height: 1.8rem;
display: grid;
grid-template-areas:
"txt1 txt2 txt3"
"txt4 txt5 txt6";
grid-gap: 2px;
padding: 2px;
background-color: green;
}
.txt1{
grid-area: txt1;
}
.txt2{
grid-area: txt2;
}
.txt3{
grid-area: txt3;
}
.txt4{
grid-area: txt4;
}
.txt5{
grid-area: txt5;
}
.txt6{
grid-area: txt6;
}
.txt > div{
background-color: white;
color: green;
}
.table{
width: 50%;
}
.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;
}
.vert{
color: green;
}
.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;
}
button a{
color: green;
}
textarea {
background-color: green;
color: white;
border: 2px dotted white;
outline: none;
resize: none
}
textarea:focus {
border: 2px dotted white;
resize: 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>
<h1>shusho</h1>
<p style="width:50%; margin-left: 25%;">
is a compound word of <em>get off</em> and <em>get out</em>.<br>
<a href="https://hub.xpub.nl/sandbot/~eunalee/flask/response/?whatever=shusho" style="color: green; text-decoration: underline;" target="_blank" rel="noopener noreferrer">t offut on Frabjousish Dictionary</a><br>
</p>
<br>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<br><br>
<h3>Shusho can also be spelled and pronounced like:</h3>
{% for x in response %}
{% if ".wav" in x %}
<audio controls><source src="https://hub.xpub.nl/sandbot/~eunalee/record/{{x}}" type="audio/wav"></audio><br>▼<br>
{% else %}
{{x}}<br>▼<br>
{% endif %}
{% endfor %}
<br><br>
<button><a href="https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/g2/">Next</a></button>
<pre>
<span id="ascii"></span>
\/o o\/ \/o o\/
\___/ \___/
| | | |
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
</pre>
</div>
</div>
</div>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// 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 = [
"* .-. * * .-. *",
"* .-. . . .-. *",
". .-. . . .-. .",
];
// 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);
}
</script>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

248
record_main/templates/index6.html
Unescape Escape View File

@ -0,0 +1,248 @@
<!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>

290
record_main/templates/index7.html
Unescape Escape View File

@ -0,0 +1,290 @@
<!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;
}
.txt{
width: 60%;
margin-left: 20%;
line-height: 1.8rem;
display: grid;
grid-template-areas:
"txt1 txt2 txt3"
"txt4 txt5 txt6";
grid-gap: 2px;
padding: 2px;
background-color: green;
}
.txt1{
grid-area: txt1;
}
.txt2{
grid-area: txt2;
}
.txt3{
grid-area: txt3;
}
.txt4{
grid-area: txt4;
}
.txt5{
grid-area: txt5;
}
.txt6{
grid-area: txt6;
}
.txt > div{
background-color: white;
color: green;
}
.table{
width: 50%;
}
.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;
}
.vert{
color: green;
}
.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;
}
textarea {
background-color: green;
color: white;
border: 2px dotted white;
outline: none;
resize: none
}
textarea:focus {
border: 2px dotted white;
resize: 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>
<h1>t offut</h1>
<p style="width:50%; margin-left: 25%;">
is a compound word of <em>get off</em> and <em>get out</em>.<br>
<a href="https://hub.xpub.nl/sandbot/~eunalee/flask/response/?whatever=t%20offut" style="color: green; text-decoration: underline;" target="_blank" rel="noopener noreferrer">t offut on Frabjousish Dictionary</a><br>
</p>
<br>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<br><br>
<h3>t offut can also be spelled and pronounced like:</h3>
{% for x in response %}
{% if ".wav" in x %}
<audio controls><source src="https://hub.xpub.nl/sandbot/~eunalee/record/{{x}}" type="audio/wav"></audio><br>▼<br>
{% else %}
{{x}}<br>▼<br>
{% endif %}
{% endfor %}
<pre>
<span id="ascii"></span>
\/o o\/ \/o o\/
\___/ \___/
| | | |
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
</pre>
</div>
</div>
</div>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// 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 = [
"* .-. * * .-. *",
"* .-. . . .-. *",
". .-. . . .-. .",
];
// 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);
}
</script>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>
Write Preview
Loading…
Cancel
Save