this is main flask pages :)

main/fll2.py

@@ -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)
+    
+    

main/templates/desktop.css

@@ -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;
+    }
+    
+
+
+    }

main/templates/first.html

@@ -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>

main/templates/index.html

@@ -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>

main/templates/letter.html

@@ -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>

main/templates/response.html

@@ -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>

main/templates/secondgame1.html

@@ -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>

main/templates/secondgame2.html

@@ -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>

main/templates/submit.html

@@ -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>
+

main/templates/thanks.html

@@ -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>

main/templates/transform.html

@@ -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>

record_main/frabjousish.json

@@ -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",
+  ""
+ ]
+}

record_main/game.py

@@ -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)
+    
+    

record_main/shusho.json

@@ -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"
+ ]
+}

record_main/static/js/app.js

@@ -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);
+}

record_main/static/js/recorder.js

@@ -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)
+});

record_main/static/js2/app.js

@@ -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);
+}

record_main/static/js2/recorder.js

@@ -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)
+});

record_main/static/js3/app.js

@@ -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);
+}

record_main/static/js3/recorder.js

@@ -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)
+});

record_main/t offut.json

@@ -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"
+ ]
+}

record_main/templates/desktop.css

@@ -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;
+    }
+    
+
+
+    }

record_main/templates/index2.html

@@ -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>

record_main/templates/index3.html

@@ -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>

record_main/templates/index4.html

@@ -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>

record_main/templates/index5.html

@@ -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>

record_main/templates/index6.html

@@ -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>

record_main/templates/index7.html

@@ -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>