my first push
commit
507bb63793
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -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)
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
@ -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)
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
@ -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)
|
||||
});
|
||||
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -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)
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
Binary file not shown.
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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"> </div>
|
||||
<div class="txt4">{{guess2}}</div>
|
||||
<div class="txt5"> </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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue