You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

296 lines
7.1 KiB
HTML

3 years ago
<!DOCTYPE html>
<!-- saved from url=(0043)https://hub.xpub.nl/sandbot/~eunalee/flask/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
@font-face {
font-family: 'jgs7';
src: url("https://hub.xpub.nl/sandbot/~eunalee/flaskplay/templates/jgs7.ttf");
}
body{
font-family: 'jgs7', monospace;
color: green;
line-height: 1.8rem;
font-size: 1.1rem;
margin-top: 0;
background-color: green;
}
pre{
font-family: 'jgs7', monospace;
margin-top: 0;
line-height: 1.1rem;
}
.txt{
width: 60%;
margin-left: 20%;
line-height: 1.8rem;
display: grid;
grid-template-areas:
"txt1 txt2 txt3"
"txt4 txt5 txt6";
grid-gap: 2px;
padding: 2px;
background-color: green;
}
.txt1{
grid-area: txt1;
}
.txt2{
grid-area: txt2;
}
.txt3{
grid-area: txt3;
}
.txt4{
grid-area: txt4;
}
.txt5{
grid-area: txt5;
}
.txt6{
grid-area: txt6;
}
.txt > div{
background-color: white;
color: green;
}
.table{
width: 50%;
}
.box{
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
.content{
background-color: white;
color:green;
padding: 5%;
}
a{
font-family: 'jgs7' monospace;
text-decoration: none;
color: white;
}
.vert{
color: green;
text-decoration: underline;
}
.left{
background-color: green;
color: white;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 10%;
padding: 3%;
}
.right{
background-color: green;
color: white;
position: fixed;
right:0;
top:0;
height: 100%;
width: 10%;
padding: 3%;
}
.right p{
position: fixed;
top: 90%;
right: 3%;
}
.left pre:hover > .petit{
color: #f44082;
}
.left pre:active > .grr{
color: green;
}
.left pre:active {
transform: translateY(10px) translateX(10px);
}
input[type=submit]{
background-color: white;
margin-left: 5px;
margin-bottom: 5px;
padding: 5px 15px;
border: 2px solid green;
font-size: 1.1rem;
font-family: 'jgs7';
color: green;
cursor: pointer;
}
textarea {
background-color: green;
color: white;
border: 2px dotted white;
outline: none;
resize: none
}
textarea:focus {
border: 2px dotted white;
resize: none
}
@media only screen and (max-width: 600px) {
body {
width: 90%;
font-size: 2vw;
}
.right{
display: none;
}
.left{
display: none;
}
}
button{
background-color: white;
margin-left: 0.3rem;
margin-bottom: 0.5rem;
padding: 0.5rem 1rem;
border: 2px solid green;
font-size: 1.1rem;
color: green;
cursor: pointer;
font-family: 'jgs7', monospace;
}
.whatever{
color: green;
}
.whatever:hover {
color: #f44082;
}
</style></head>
<body data-new-gr-c-s-check-loaded="14.1062.0" data-gr-ext-installed="">
<div class="left">
</div>
<div class="right">
<p>(C)eunalee</p>
</div>
<div class="box">
<div class="content">
<pre>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%</pre>
<br>
<h3>You gueessed this portmanteau word!</h3>
<div class="txt">
<div class="txt1">{{guess1}}</div>
<div class="txt2">{{frab1}}</div>
<div class="txt3">&nbsp;</div>
<div class="txt4">{{guess2}}</div>
<div class="txt5">&nbsp;</div>
<div class="txt6">{{frab2}}</div>
</div><br>
Your Frabjousish word:
<h3>{{newfrab}}</h3>Originally, <em>{{frab}}</em> is made by the combination<br>
of <em>{{a}}</em> and <em>{{b}}</em>!
<br><br>
<button><a href="https://hub.xpub.nl/sandbot/~eunalee/flask/game_end/" class="whatever">Finsh</a></button>
<pre>
<span id="ascii"></span>
\/o o\/ \/o o\/
\___/ \___/
| | | |
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
</pre>
</div>
</div>
</div>
<script>
// Define global variables for the function of the code
// Frequncy in Hz
var frequency = 10;
// The ID of the HTML element you wish to update
var elementID = "ascii";
// The array (list) of things you want to cycle through. To escape special characters like \, ', " etc use a \ before them. To do a newline use <br />. All HTML tags are valid.
var ASCIIs = [
"* .-. * * .-. *",
"* .-. . . .-. *",
". .-. . . .-. .",
];
// On window load, start the update cylce function
window.onload = function() {
update(0);
}
// Update cylce function takes the index (where it is in the array)
function update(index){
// Update the element id of elementID to have the index-th ASCII array entry in it. (Note: arrays start at 0)
document.getElementById(elementID).innerHTML = ASCIIs[index];
// Call the update function after 1 second / frequency (Hz).
setTimeout(function(){
// Pass the update function the index that it was called with this time, plus 1.
// % means modulus (remainder when divided by)
// This way, it doesnt' try to look for the 1000th element which doesn't exist
update((index+1)%ASCIIs.length);
}, 1000/frequency);
}
</script>
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>