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

my first push

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

22
record_show/frabjousish.json
Unescape Escape View File

@ -0,0 +1,22 @@
{
"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-21T12:45:55.996Z.wav",
"t"
]
}

235
record_show/game.py
Unescape Escape View File

@ -0,0 +1,235 @@
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)
@app.route("/upload2/", methods=['POST'])
def game2_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("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 "uploaded"
@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)
@app.route("/upload3/", methods=['POST'])
def game3_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("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 "uploaded"
if __name__ == "__main__":
app.run(debug=True, port=5050)

21
record_show/shusho.json
Unescape Escape View File

@ -0,0 +1,21 @@
{
"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",
"lei zaaar",
"2022-06-21T12:47:24.960Z.wav"
]
}

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

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

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

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

174
record_show/static/js2/app.js
Unescape Escape View File

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

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

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

174
record_show/static/js3/app.js
Unescape Escape View File

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

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

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

17
record_show/t offut.json
Unescape Escape View File

@ -0,0 +1,17 @@
{
"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-21T12:47:44.999Z.wav"
]
}

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

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

235
record_show/templates/index2.html
Unescape Escape View File

@ -0,0 +1,235 @@
<!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: 23.5%;
padding: 3%;
}
.right{
background-color: green;
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 23.5%;
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">
</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_show/{{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>Please 'Record' how you pronounce this word:</p>
<h2>{{datap}}</h2>
<p>Then, push the 'Stop' button and 'Done'</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_show/static/js/recorder.js"></script>
<script src="https://hub.xpub.nl/sandbot/~eunalee/record_show/static/js/app.js"></script>
</body></html>

306
record_show/templates/index3.html
Unescape Escape View File

@ -0,0 +1,306 @@
<!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: 23.5%;
padding: 3%;
}
.right{
background-color: green;
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 23.5%;
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">
</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>
<button><a href="https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/g1/">Next</a></button>
<br><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_show/{{x}}" type="audio/wav"></audio><br>▼<br>
{% else %}
{{x}}<br>▼<br>
{% endif %}
{% endfor %}
<br><br>
<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>

246
record_show/templates/index4.html
Unescape Escape View File

@ -0,0 +1,246 @@
<!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: 23.5%;
padding: 3%;
}
.right{
background-color: green;
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 23.5%;
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_show/{{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>Please 'Record' how you pronounce this word:</p>
<h2>{{datap}}</h2>
<p>Then, push the 'Stop' button and 'Done'</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_show/static/js2/recorder.js"></script>
<script src="https://hub.xpub.nl/sandbot/~eunalee/record_show/static/js2/app.js"></script>
</body></html>

303
record_show/templates/index5.html
Unescape Escape View File

@ -0,0 +1,303 @@
<!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: 23.5%;
padding: 3%;
}
.right{
background-color: green;
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 23.5%;
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">
</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>shut down</em> and <em>shot down</em>.<br>
Euna at 31/05/2022 17:16:33(Amsterdam time) said, I supposed to write "sudo shutdown -h now". But I wrote, "shot down, shoot down, shout down."
<br>
</p>
<button><a href="https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/g2/">Next</a></button>
<br><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_show/{{x}}" type="audio/wav"></audio><br>▼<br>
{% else %}
{{x}}<br>▼<br>
{% endif %}
{% endfor %}
<br><br>
<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>

246
record_show/templates/index6.html
Unescape Escape View File

@ -0,0 +1,246 @@
<!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: 23.5%;
padding: 3%;
}
.right{
background-color: green;
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 23.5%;
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_show/{{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>Please 'Record' how you pronounce this word:</p>
<h2>{{datap}}</h2>
<p>Then, push the 'Stop' button and 'Done'</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_show/static/js3/recorder.js"></script>
<script src="https://hub.xpub.nl/sandbot/~eunalee/record_show/static/js3/app.js"></script>
</body></html>

303
record_show/templates/index7.html
Unescape Escape View File

@ -0,0 +1,303 @@
<!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/show/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: 23.5%;
padding: 3%;
}
.right{
background-color: green;
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 23.5%;
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">
</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>
<br>
Chung at 10/12/2021 12:33:39(Amsterdam time) said, once on a bus, I said to my friend "You should get out here" and he said "off".
<br>
</p>
<button><a href="https://hub.xpub.nl/sandbot/~eunalee/flask/game2/">Next</a></button>
<br><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_show/{{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>

1488
show/database.json
View File

File diff suppressed because it is too large Load Diff

461
show/show.py
Unescape Escape View File

@ -0,0 +1,461 @@
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("/dictionary/")
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("word"):
response = None
clicked_word = request.args.get("word")
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)
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)
if not len(word1)==0:
frab1=word1[0]
else:
frab1=""
if not len(word2)==0:
frab2=word2[-1]
else:
frab2=""
frab = frab1 + frab2
return render_template("sh_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("sh_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)
if request.method == 'GET':
bunch = list(chosenword.keys())
ranword = random.choice(bunch)
response = None
print(ranword)
if ranword in chosenword:
response = chosenword[ranword]
stories = response["stories"]
print(stories)
a=stories[0]["A"]
b=stories[0]["B"]
print(a, b)
frab=stories[0]["frab"]
example=stories[0]["example"]
example2=stories[0]["example2"]
return render_template("sh_secondgame1.html", stories=stories, example=example, frab=frab, ranword=ranword, example2=example2, a=a, b=b)
else:
frab = request.args.get("word")
a= request.args.get("a")
b= request.args.get("b")
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
print(a, b)
return render_template("sh_secondgame2.html", guess1=guess1, guess2=guess2, frab1=frab1, frab2=frab2, newfrab=newfrab, frab=frab, a=a, b=b)
@app.route('/translation/', methods =['GET', 'POST'])
def trad():
if os.path.exists("voice.mp3"):
os.remove("voice.mp3")
text = None
str1=''
la=''
token=[]
collec=[]
mw=''
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]
mw = mw + first['A'] + ", " + first['B'] + ", "
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)
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('voice.mp3')
return render_template('sh_transform.html', data=data, text=text, str1=str1, collec=collec, token=token, mw=mw)
@app.route('/submit/', methods =['GET','POST'])
def register():
if request.method == 'GET':
return render_template("sh_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("sh_thanks.html")
@app.route('/game_end/')
def end():
return render_template("sh_thanks2.html")
@app.route('/game/')
def gamemenu():
return render_template("sh_g.html")
if __name__ == "__main__":
app.run(debug=True, port=5006)

202
show/templates/desktop.css
Unescape Escape View File

@ -0,0 +1,202 @@
@font-face {
font-family: 'jgs7';
src: url("https://hub.xpub.nl/sandbot/~eunalee/show/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: 1400px;
}
.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: 5%;
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;
}
}

BIN
show/templates/jgs7.ttf
View File

Binary file not shown.

185
show/templates/sh_first.html
Unescape Escape View File

@ -0,0 +1,185 @@
<!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/show/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">
</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="?word={{ key }}"><button>{{key}}</button></a>
{% endfor%}
{%endfor%}
</div>
<p class="colo">
<br><br><br><br><br><br>
<em>Frabjousish Dictionary</em> has been produced in the context of the graduation project of Euna Lee(<span style="text-decoration: underline;">https://www.euna-lee.com/</span>) From the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy in the 2022 summer.
<br><br>
I kindly invite you to contribute to Frabjousish word-making and take a look at updated Frabjousish words at <span style="text-decoration: underline;">https://hub.xpub.nl/frabjousish/world/</span>.
<br><br>
Typeface: jgs7
</p>
<pre class="last">
______________________________________________________________________________________________
______________________________________________________________________________________________
</pre>
</div>
</div>
</body>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// The ID of the HTML element you wish to update
var elementID = "ascii";
// The array (list) of things you want to cycle through. To escape special characters like \, ', " etc use a \ before them. To do a newline use <br />. All HTML tags are valid.
var ASCIIs = [
" | > | m",
" | > | _",
" | > | w" ];
// On window load, start the update cylce function
window.onload = function() {
update(0);
}
// Update cylce function takes the index (where it is in the array)
function update(index){
// Update the element id of elementID to have the index-th ASCII array entry in it. (Note: arrays start at 0)
document.getElementById(elementID).innerHTML = ASCIIs[index];
// Call the update function after 1 second / frequency (Hz).
setTimeout(function(){
// Pass the update function the index that it was called with this time, plus 1.
// % means modulus (remainder when divided by)
// This way, it doesnt' try to look for the 1000th element which doesn't exist
update((index+1)%ASCIIs.length);
}, 1000/frequency);
}
</script>
</html>

88
show/templates/sh_g.html
Unescape Escape View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<!-- saved from url=(0043)https://hub.xpub.nl/sandbot/~eunalee/flask/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
@font-face {
font-family: 'jgs7';
src: url("https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/jgs7.ttf");
}
body{
font-family: 'jgs7', monospace;
color: green;
line-height: 1.1rem;
font-size: 1.1rem;
margin-top: 0;
background-color: green;
}
pre{
/*position: absolute;
left: 16%;
top: 10%;*/
font-family: 'jgs7', monospace;
background-color: white;
color:green;
padding: 5%;
}
.box{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
a{
color: green;
}
a:hover{
color: #f44082;
}
</style></head>
<body data-new-gr-c-s-check-loaded="14.1062.0" data-gr-ext-installed="">
<div class="box">
<pre>
╚║╚═║═════╚║╗║╗═╚╗══╚║╚╗╗╗║═╗╚║╗═╗══╚═║╗╗╗╚══╗║╚║═╚═╚╗╗═╗║╗╚║╚║╚═╚═║║╗╗╚║╚╗╚═╚════╚╚═╚╗═╚╚║═╗═╗═║║══
══╚║╚╚══╚╗╗╚╚║═╗═╗║║╗╚══╚║║╚═════╗╗══╗╚║╗╗╚╗╚╗╚╚═╗═╗║══╚║╗╗╚╚╗║╗╚╚╗╚╚╚╗╚╗╗║╗╗║╗║╗═║═║╗╚╚╚╚║║══╗║╗╚═╚
╗═║╗═║══╗═║╗╗═╚║╚╗║║║╗║╗╗╗══║╚║╚╗╚═╚═╗╚╚═╚══╚╗═╚╚║║╗═║═══╚╚╗╚╚║║╚╚╚║╚╚══║╗╚╗║══╚╗╚║║║═╚╗╗╗╗═╗╗╚║╗╗╗═
══╗═╗╗═╚═╗╗╗╚║╗═╚╗╚═╗║╗╗═╗╗══║╚║║══║╚║╚═╗║══║║║║║║╚╚╗╗═║╚═╗╚══╗║╗╚╚║║║╚║╚║╚═║╚══╚╗║╚║║║║║╗╗╚║══╗═║║╗
║╚═╚╗║╗╚═╚══╚╗═╗║║╗╚║║╚╚╚╚╗║║═╗╚║══╗╗║║╗╚═╗══║═══╚╗╗║╗║╚╚╚╚║╚══╗═╗╚╗╚═║╗║══╚═║║╗═╚║║╗══║╗╚═══╗╗╚╗║║╚
║╗║╗╚╚╗╗╗╚╚╚╗═║║╚═║║╚╚║═║╚║║══╗╚║╗╚╚║║═║═╚═║══╗══║╗╚║║╗╗╚═╗══╚║║╚═║═║╗═╗╗║║║═╗╗║═╗╚║║═╗╗═╗╗║║═╗╚╚║╗╚
║║╚═║╗╗╗═╚║══╗══║╚═══║═║═╚║╚═╗╚╚║═══╚╗═══╚╗╗╗║╗╗╚║║╚╚╗╚╗══╗║╚╗═║║╚╚╗╚╚╗║╗║╚╚╗═╚║═║════╚║╚╗╚╚═║╚║║╚╚╚
║╚╚║║═╚║═╚╗╗║║═══║╚╗╚╚╚═╚═╚╗╗╗╗═╗══╚╗╚╗╗╚╚╗╗╗╗═║╗═╗║═╗╗║║═╚║╚╗╚╚║╚══╚╗═║║═╗║║╗╚╗║╗═║╗╗╗║╚╚║╗╚╚═║═╗╚╗
╗╚═╗╚══║║╗╗║║══║╚╚╗╚║═╚║║╗╚═║║═╗══╗╚║║═╚║╗╚╗╚║╗═╚║══╗║║═║═╚║╗║╚╚╗╚╚╗╚║═║╗╚═║╚╗╚╗╗╚╗╗═╗╚══╚╗╚╗╗═║╗═╗╗
║╚╚║║╚║╚═║║═╗╗═║╚═╗╚╗═╗═╚╚╗╗╚═╚║╗══║ ║╚║═╚═══╚╗╗╗║══║║═║║╚═╗║═══╗═══║║═╚╚║
═╚║╚╗══╗╚╚╗║═╗║╚═══╚║║╗╗╗║╗╗╚═╚║╗║══ ═║╗╗║║╗║║═══║╚═║╚╚╚╗╗╗║═╚╗╗╗╚╗╗╚╚╚╚═╚
═══╗╚║║╚═║║╗═╗╗║║╚╗╚═║╗║╗╚║═║═╗═║╚═╚ <em>FRABJOUSISH GAME</em> ═╗╚╗╗╗║╚═╗═╚╗╚╗╗╗╚╗══║╚║╚═══╚╚═║║═║╚║
╚╗║╗╚║═║╚╚═║╚║║═║╚═╚═╗╗═╗╚║╚║║══║╚╗╗ ║╚╗║╚╚╗║╗╚╚═╚╗║╚║╗║╚╗║╗═╚╚╗══║╗╚║║╚═╗
╚╚═╗═══╚═║╗═║══╚═║╗══║╚╗═╚║╚╗╚╗═╚║║╚ You will play 4 ╗ ╗═╗══╗══║═║╗╗╗╚╚║║╚╗╗═╚══╚═╗╗║║═╚║═
╚═╚══╗║═╚╗║╗║══║╗║╗╚══╗║═║══║╗╗║║═══ frabjousish round ╚╚═║══╗╚╗║╚╗╚╚╚║═╚╗║═╚╚══╗║╗╗═║║╚╗╚║╚
║╗╚║╚║╗║║═╗╗║╗╗║═╗╗╚═║║║═╗╗═║╗══║╗╗╗ ═║╗╚╗╗═╗║║║╚║╗═╗╗╚╚══║═╚╚║╗══╚╚══║═║╚
╗╚╚║╗║║╚║═╗║══╗╚═║╚║╗╗║═╚║║╚╗═╗║║═╗═ ○ <a href='https://hub.xpub.nl/sandbot/~eunalee/karaoke/flask/'>START</a> ╗╚╗═╚╚═╚║═╗╚║═║╚║╗║║║══║╚╗║╚║║╗║╗══║╚
╚╗║╚╚══╚║║╗╚╗╚═╗═║╚═╗║═══║╗═╗╚╗║╚═╗═ ╗═╚╚═║║║║╚══╗║═╚╚═╗═══║║║╗╗══║═╚╚║╚╚═
╚╚═║║║═║═╗═║╗═╚║╗═║║╚═╚╚╚║║═║║═╚║║║║ ║╚╗══╗╗╗╚══╚═╗║═╚╗╚═║═║║═══╚║╗╚╚╚═╚║╗
╗═══║╗╚╗╗╗╚║║╚╗╚═╚║║║║╚║═║╚║╗═╚═║╚═╚╗╚╗║║╗╚═╚║║╚╗═╚╚║═╚╗══╗╚╗╚╗╚╚║╚║╗═║═╚╗║╗║║═╗╚╚═║═║╗═╚╚║║╚═║╗╗║║╚
╚╗╚╚═║║═║║╗╚║═╗╚╗║╗╗══╚║═╚═╗║╗═╗╗╗═╗╚║╗═══╗╚║═╗╗╗══╚╗║╚╚╚╚║║╗═║╗╗║═║╚╚║═╚╗═║═║║╗║╚═║╚╗╚══║║╗╗╚╗╚╗═║═
══║╗╚╗══╚╗╚╚╗╗╚╗═║╗═║═║╗╗═══╚╚╚═╚═╚══╚╚║║║╗╚╗╗╗╚║╚═╚═║║╗╚║═╚╗═║╚╚╚║║╗╚╗═║╚╗║║═╚╚╚╗║║╚╚║╚║╚╚╚║══╗═╗║
═╗═╚╗╗╚║╗═║╚═║═╗═╚╗╗╚╚║╗═╚║╚║║║╚╗═╗╚║═╗╚══║╚═══╗═╗╗╗╚═╚═║═║╗║╚══╗╚║║═══╚╗═╚╗═║║╗╚╗═║╗══╚╗║═╗╚╚╗═╗║═║
║╗╗╚╗║║║═╗╗╗╗╚╗╗╚═╚══╚╗║═╚╗═╚═╚╚══╗║╚╗║╗╗║═╚╗╗╚╗═╚║║║╗╗╚═║╗╗╗╗║║═║╗══╗╚╚╚╚║║═╚╚╗═╗═╚═╗════╗║╚╚╚══║║╗
╗╗╚╗╗╗╚╚╚╗═║╗╚║╗╗║╚═╗╗══╚╚╗║╗╚║═╗╚╚╗╗═╚═║╗║╗╗╗╚╗║═╚║══╚╚═╚══╗║══║══╚═║╚╗═║═║╗║╚║╚╗╚║╗╗╗╗═║══║╚═╗═╚╗║
╚╚═║║╚║═║═╗══╗╗║══║╚╚╚║║║╚╚═║╗╚╗═║╚╚║║║╗║╗═╗═║═╚╗╚╚╚║══╗╚╗═║╗╗╚╗║══╗╗╗╚═══╗║║║╗╚══║═╚╗╚╚══╚╗╗═╚╚╚╗║║
══╗║═║═╗═║╚╚═║╚║║╗╗╚║║═║║║╗║╚╚║═╚═╗═╚║╗╗═╗╗══╚╗═╚═║═║═╗║║═╚║╗╚╗╚║╚═╚═║║╚╚╗═║╗═╚╚╗║║═╚║═║══╗╗╚╗╗╚║═╚║
╚╚╚╗║║╗╚╗═╗═╚═║╚║║╚═╗╗═╚═╗╗═╚╗╚═══╚║═╗═╗╚╗║╗║║═╚═╚║═╗╚║═╚═══╗══║║║══╚═╗║══║╚║═╗╚║═║║║═║╗║║╗═╗═╗╗═╚║╗
</pre>
</div>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

173
show/templates/sh_response.html
Unescape Escape View File

@ -0,0 +1,173 @@
<!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/show/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 ;
}
</style>
<title>Frabjousish Dictionary</title>
</head>
<body>
<div class="left">
<a href="https://hub.xpub.nl/sandbot/~eunalee/flask/dictionary/"><pre>
________________
| |<span class="grr">\</span>
| <span class="petit">Index</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="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="?word={{ 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>

238
show/templates/sh_secondgame1.html
Unescape Escape View File

@ -0,0 +1,238 @@
<!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%;
max-width: 60%;
}
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: 23.5%;
padding: 3%;
}
.right{
background-color: green;
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 23.5%;
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">
</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 Frabjousish 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>
<div style="width:50%; margin-left: 25%;">
<form action="https://hub.xpub.nl/sandbot/~eunalee/flask/game2/?word={{ frab }}&a={{a}}&b={{b}}" 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>
</div>
<br>
<pre>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%</pre>
</div>
</div>
</div>
</body></html>

296
show/templates/sh_secondgame2.html
Unescape Escape View File

@ -0,0 +1,296 @@
<!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;
}
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;
}
}
button{
background-color: white;
margin-left: 0.3rem;
margin-bottom: 0.5rem;
padding: 0.5rem 1rem;
border: 2px solid green;
font-size: 1.1rem;
color: green;
cursor: pointer;
font-family: 'jgs7', monospace;
}
.whatever{
color: green;
}
.whatever:hover {
color: #f44082;
}
</style></head>
<body data-new-gr-c-s-check-loaded="14.1062.0" data-gr-ext-installed="">
<div class="left">
</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 by the combination<br>
of <em>{{a}}</em> and <em>{{b}}</em>!
<br><br>
<button><a href="https://hub.xpub.nl/sandbot/~eunalee/flask/game_end/" class="whatever">Finsh</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>

129
show/templates/sh_submit.html
Unescape Escape View File

@ -0,0 +1,129 @@
<!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/show/templates/desktop.css">
<style>
textarea {
background-color: green;
color: white;
border: 2px dotted white;
outline: none;
resize: none
}
textarea:focus {
border: 2px dotted white;
resize: none
}
form{
text-align: center;
}
</style>
<title>Submit</title>
</head>
<body>
<div class="left">
</div>
<div class="right">
<p>(C)eunalee</p>
</div>
<div class="box">
<div class="cnt">
<pre>
______________________________________________________________________________________________
______________________________________________________________________________________________
.
. . . .
___ __ __ ____ __ __ ____ ____
/ __)( )( )( _ \( \/ )(_ _)(_ _)
. \__ \ )(__)( ) _ < ) ( _)(_ )( .
(___/(______)(____/(_/\/\_)(____) (__) .
. .
Have you ever committed a slip of the tongue?
. . . . .
Did you think "A" but say "B" instead?
. Did you mean "A" type "B" instead?
Did you hear "A" but understand it as "B"? .
._. ._.
w /o o\ w . Please tell us bit more! w /o o\ w
\_| > |_/ We need your story to make our language, Frabjousish! \_| < |_/
|<span id='ascii'></span> .
******* . *******
| | . | |
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
</pre>
<div class="txt">
<form action="https://hub.xpub.nl/sandbot/~eunalee/flask/submit/" method="POST" autocomplete="off">
<p>Your name? <br><textarea cols="45" name="name"/></textarea></p>
<p>A? <br><textarea cols="45" name="w1"/></textarea></p>
<p>B? <br><textarea cols="45" name="w2"/></textarea></p>
<p>STORY? <br><textarea cols="45" rows="8" name="story"/></textarea></p>
<p><input type="submit" value="submit"></p>
</form>
</div>
<pre>
______________________________________________________________________________________________
______________________________________________________________________________________________
</pre>
</div>
</div>
</body>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// The ID of the HTML element you wish to update
var elementID = "ascii";
// The array (list) of things you want to cycle through. To escape special characters like \, ', " etc use a \ before them. To do a newline use <br />. All HTML tags are valid.
var ASCIIs = [
" `=' | . | u |",
" `-' | . | U |",
" `=' | . | u |" ];
// On window load, start the update cylce function
window.onload = function() {
update(0);
}
// Update cylce function takes the index (where it is in the array)
function update(index){
// Update the element id of elementID to have the index-th ASCII array entry in it. (Note: arrays start at 0)
document.getElementById(elementID).innerHTML = ASCIIs[index];
// Call the update function after 1 second / frequency (Hz).
setTimeout(function(){
// Pass the update function the index that it was called with this time, plus 1.
// % means modulus (remainder when divided by)
// This way, it doesnt' try to look for the 1000th element which doesn't exist
update((index+1)%ASCIIs.length);
}, 1000/frequency);
}
</script>
</html>

88
show/templates/sh_thanks.html
Unescape Escape View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<!-- saved from url=(0043)https://hub.xpub.nl/sandbot/~eunalee/flask/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
@font-face {
font-family: 'jgs7';
src: url("https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/jgs7.ttf");
}
body{
font-family: 'jgs7', monospace;
color: green;
line-height: 1.1rem;
font-size: 1.1rem;
margin-top: 0;
background-color: green;
}
pre{
/*position: absolute;
left: 16%;
top: 10%;*/
font-family: 'jgs7', monospace;
background-color: white;
color:green;
padding: 5%;
}
.box{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
a{
color: green;
}
a:hover{
color: #f44082;
}
</style></head>
<body data-new-gr-c-s-check-loaded="14.1062.0" data-gr-ext-installed="">
<div class="box">
<pre>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::· · · · · · · · · · · ·:::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::·· · · · · · · · · ··::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· ·:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· THANK YOU! ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· ·:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· You contributed to ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· to making a new ·:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· Frabjousish word! ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· ·:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::·· ○ <a href='https://hub.xpub.nl/sandbot/~eunalee/flask/submit/'>BACK</a> ··:::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::· ·:::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::· . . . . . . . . · ·:::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::· . . . . . . . . . . ·:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
</pre>
</div>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

88
show/templates/sh_thanks2.html
Unescape Escape View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<!-- saved from url=(0043)https://hub.xpub.nl/sandbot/~eunalee/flask/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
@font-face {
font-family: 'jgs7';
src: url("https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/jgs7.ttf");
}
body{
font-family: 'jgs7', monospace;
color: green;
line-height: 1.1rem;
font-size: 1.1rem;
margin-top: 0;
background-color: green;
}
pre{
/*position: absolute;
left: 16%;
top: 10%;*/
font-family: 'jgs7', monospace;
background-color: white;
color:green;
padding: 5%;
}
.box{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
a{
color: green;
}
a:hover{
color: #f44082;
}
</style></head>
<body data-new-gr-c-s-check-loaded="14.1062.0" data-gr-ext-installed="">
<div class="box">
<pre>
\\\/\\//\\\\\/\///\\\////\//\/\//\////\/\//\\/\///\\\\//\/\//\/\/\\//\\/\//\////\//\/\\\/\\//\\///\/
\\\\\\\\//\////\\\///\\\\\/\\////\\\//\\//\\/\\\/\//\/\/\/\\\///\//////\\//\//\\///\/\//\/\//\/\////
\\\/\\//\\//\\\\\/\/\/\\/\/////\//\///\\//\\/\///////\\\\/\\\\\///\\\/\\\///\\\/\\//\////\/\\\\///\/
/////\//\///\//\/\\\\\\\/\/\////\//\\/\\//\\\/\///////\\\\/\\\\\///\\\/\\\///\\\/\\//\////\/\\\\///\
//\//\\\\/\\\/\/\\\\\\/\\\\/\\\/\/\//\\/\\\///////\//\/\//\////\/\//\\\\//\///\////\/\\\/\\\\\\//\\\
///\///\\/\/\\//\\//\/\\//\\/\//\\\\\\//\\//////\\///\/\/////\/\//\\/\///\\///\\///\//\////\/\\/\/\/
\/\\\///\\\/\/\\///\\/\/\\\/\//\\//\/\//\/\//////\\/\\/\////\\\\/\//\///\\\\\//\\//\\//\///\//\//\/\
///\/\/\\\\\\\\//\///\\\///\///\/\//\\/\\/\\\\\//\\\/\\\/\///\//\\/\\\///////\/\\//\\\/\\\\\\\//\\//
/\/\\/\\//\\//\\\/\\//\/\/\\///\///\\\/\\\/\///\/////\/\\/\//\\///\/\/\\\\\////\/\\\///\\\\////\\//\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\//// ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\//// WOOHOOO! ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\/
///\//\///\\\\\\\/\/////\\\\//\/\\\/ Thanks for playing /\//\\\\/\///\///\//////\/\/\\\/////\
//\\\\///\\\/\\\\\/\//\/\/\\/\\\\\// Frabjousish Game! \//\\//\\///\\\//\//\\/\///\\\//\//\/
\\/\///\\///\\/\/\\/\/\\\/\/\///\/\/ /\\\/\\\//\\//////\/\/\\\///\\\//\/\/
//\\\//\//\////\////\\/\///\\\\\//// Plz click back for \//\//\/\\//\//\//////\\/\\\\////\//\
/\\\\\\/\\//\\\\\/\///\\\//\//\\//// the next person :) \\///\\//\/\\\\\/\/\//\\\\/\///\\/\/\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\/\\/ ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\//// ○ <a href="g/">Back</a> ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\\
/\\\\\\/\\//\\\\\/\\\\\\\//\//\\//// ///\\//\/\\\\\/\/\//\\\\/\///\\/\/\\\
\/\//\///\\/\//\\\////\\/\/\/\\/\\\/\//\/\\\/\\//\\\\\\/\//\//\/\\/\/\///\\\\\/\///\/\//\\/\/\\//\\\
/\\\/\\//\\//\\\\\/\/\/\\/\/////\//\///\//\/\\\\\\\/\/\////\//\\/\\//\\/\////\\/\/\\\\\/\//\\//\//\\
//\\//\\\\\//\\///\\\/\\\/\\\\/\\\\//\//\//\\/////\\\\/\\/\\/\\\///\\\\\/\\////\\\//\\//\\\\\\///\//
///\\\//\\\/\\/\/\/\\\/\//\\//\//\/\\/\\/\\//\\\/\\//\////\\/\/\//\///\/\\\\\\\\//\/\\/\\//\\///\/\\
//\\/\////\\/\\\\///\/\\\\//\\\\/\/\/\\/\\\\\/\\//\/\//////\/\\\\/\//\\/////\\/\//\\//\/\\///\\/\/\/
/\/\\//\\///\///\\\\/\\//\\/\\\//\\\\\\\//\\\\\\/\\\/\\//\//\\/\//////\\\\/\\//\\/\/\/\\\\/\///\/\\/
\//\//\\\/\//\//\\/\\\///\\/\\//\\\//\\\/////\\//\//\/\////\\\\\///////\//\/\////\/\\\\/\//\////\/\/
/\/\//\////\/\//\/\////\\///\///\\/\/\//\/////\\/\/\//\\//\/\///\\\/\\\\//\\/\//\\\//\/\\\\/\\/\\\/\
//\/\\\\\/\\/\\/////\\\/\/\/\///\/\\/\/\///\//\\//\\//\\//\\/\///\/////\\\\/\\\//\//\\/\\///\/\/\\/\
</pre>
</div>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

239
show/templates/sh_transform.html
Unescape Escape View File

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