copious-transitions
Version:
Framework for working with frameworks
835 lines (717 loc) • 21.1 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="Richard Leddy" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta id="theme-color" name="theme-color" content="#452770">
<link rel="canonical" href="http://www.copious.world">
<title>Copious World</title>
<meta name="description" content="An entry point into the our world of AI, IoT, and Communities built around songs, etc.">
<style>
/*csslint important:false*/
/* ==========================================================================
Pure Base Extras
========================================================================== */
/**
* Extra rules that Pure adds on top of Normalize.css
html {
}
*/
/**
* Always hide an element when it has the `hidden` HTML attribute.
*/
.hidden,
[hidden] {
display: none ;
}
/**
* Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
* aspect ratio.
*/
.pure-img {
max-width: 100%;
height: auto;
display: block;
}
.items {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-top: -10px;
}
.items .item {
flex: 1 0 300px;
box-sizing: border-box;
background: -webkit-linear-gradient(to right, rgba(242, 242, 210, 0.3), white));
background: linear-gradient(to right, rgba(242, 242, 210, 0.3), white );
color: #171e42;
padding: 10px;
margin-left: 10px;
margin-top: 0px;
}
.items .extra-i {
padding-left: 10%;
padding-bottom: 4px;
padding-right: 12px;
font-size: 110%;
font-family: sans-serif;
}
.middleBanner {
text-align: 'center';
padding-left: 10%;
padding-right: 10%;
font-weight:bold;
color: darkgreen;
padding-top:4%;
overflow:auto;
}
.applink {
padding:3px;
background-color: cornsilk;
width:inherit;
min-height: 100%;
color:darkolivegreen;
font-weight: bolder;
}
.extraBanner {
text-align: 'center';
padding-left: 10%;
padding-right: 10%;
font-weight:bold;
color: #FF4400;
padding-top:4%;
}
.fillLowerWrap {
width: 66%;
margin-left:0px;
margin-right:0px;
padding: 8px;
margin-top:8px;
background: -webkit-linear-gradient(to right, white, #FAFAFF);
background: linear-gradient(to right, white, #FAFAFF );
margin-left: 10px;
}
.fitMenuLower {
width: 95%;
height: 50%;
margin-left:0px;
margin-right:0px;
padding: 8px;
margin-top:8px;
background: -webkit-linear-gradient(to right, white, #FAFAFF);
background: linear-gradient(to right, white, #FAFAFF );
margin-left: 10px;
}
#squashMenu:hover {
border: 1px solid rgb(230,230,240,0.4);
padding-top:4px;
background-color: #EFEFEF;
}
#squashMenuContainer {
position:absolute;
visibility:hidden;
top : 0; left : 0;
height:100%;
width: 55%;
z-index:100;
border: rgba(252, 190, 190, 0.4) 2px solid;
background-color: white;
}
.fade_able {
position:absolute;
visibility:hidden;
top : 10px; left : 10px;
height:80%;
width: 40%;
z-index:101;
border: rgba(252, 190, 190, 0.4) 2px solid;
background-color: white;
overflow:hidden;
}
.solid_able {
position:absolute;
visibility:hidden;
top : 10px; left : 10px;
height:80%;
width: 40%;
z-index:111;
border: rgba(252, 190, 190, 0.4) 2px solid;
background-color: white;
overflow: hidden;
}
@media screen and (max-width: 950px) {
.solid_able {
width: 90%;
}
}
#thankyou_box {
position:absolute;
visibility:hidden;
top : 25%; left : 25%;
height:50%;
width: 50%;
z-index:150;
border: rgba(100, 5, 5, 0.6) 2px solid;
background-color: lightgoldenrodyellow;
overflow: auto;
}
@media screen and (max-width: 1040px) {
.fade_able {
width: 60%;
}
}
@media screen and (max-width: 600px) {
.fade_able {
width: 90%;
}
}
.fade_able_content {
height:100%;
width: 100%;
overflow:auto;
}
.togglebar {
height:20px;
visibility:inherit;
background-color: navy;
text-align:right;
}
.closer_x {
padding:2px;
color:purple;
font-weight:bolder;
border: solid 1px red;
cursor:pointer;
}
@media (max-width: 1225px) {
.fillLowerWrap {
visibility : "none";
height : 0px;
}
}
.fillLower {
border: darkred 2px solid;
height: 96%;
width: 96%;
margin-left: 10px;
padding:8px;
background: -webkit-linear-gradient(to right, rgba(252, 252, 240, 0.4), #FEFEFE);
background: linear-gradient(to right, rgba(252, 252, 240, 0.4), #FEFEFE );
}
button {
cursor: pointer;
font-size: 101%;
font-weight: bold;
color: darkblue;
margin: 2px;
width:120px;
}
button:hover {
background-color : #CACAFF;
color: darkred;
}
@media screen and (max-width: 390px) {
.items .extra-i {
padding-left: 1%;
}
}
@media screen and (max-width: 600px) {
.items .extra-i {
padding-left: 3%;
}
}
.longviz {
visibility : "visibile";
height: 10px;
background-color:inherit;
}
@media (max-width: 1040px) {
.longviz {
visibility : "none";
height : 0px;
}
}
.shortviz {
visibility : "none";
height:0px;
margin-top:6px;
}
@media (max-width: 620px) {
.shortviz {
visibility : "visible";
height:2px;
background-color:darkgreen;
margin-bottom:12px;
}
}
@media (min-width: 1040px) {
.shortviz {
visibility : "visible";
height:120px;
border: 2px darkblue solid;
background-color:#FFFFF6;
margin-bottom:30px;
margin-top:5px;
}
}
@media (min-width: 380px) {
.items .item {
max-width: calc(100% - 20px);
}
.items .extra-i {
padding-left: 3%;
}
}
@media (min-width: 410px) {
.items .item {
max-width: calc(100% - 10px);
}
}
@media (min-width: 620px) {
.items .item {
max-width: calc(50% - 10px);
}
}
@media (min-width: 830px) {
.items .item {
max-width: calc(50% - 10px);
}
}
@media (min-width: 1040px) {
.items .item {
max-width: calc(33.33333% - 10px);
}
}
@media (min-width: 1250px) {
.items .item {
max-width: calc(25%- 10px);
}
}
@media (min-width: 1460px) {
.items .item {
max-width: calc(20% - 10px);
}
}
@media (min-width: 1670px) {
.items .item {
min-width: calc(16.66667% - 10px);
}
}
body {
border: 1px solid black;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (orientation: portrait) {
#mainNav {
width: 100%;
}
}
@media screen and (orientation: landscape) {
#mainNav {
width: 100%;
}
}
main {
border-left: solid 3px navy;
border-top: solid 1px #8833BB;
padding : 4px;
}
#mainNav {
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
background: blue;
border-left: solid 3px navy;
border-top: solid 3px navy;
border-bottom: solid 3px rgba(252,252,255,0.7);
min-height: 90px
padding: 20px
background: -webkit-linear-gradient(to left, rgba(242, 242, 210, 0.3), white);
background: linear-gradient(to left, rgba(242, 242, 210, 0.3), white );
}
#mainNav table {
padding-left: 3%;
}
#mainNav table a:focus { outline: none; }
#mainNav table .navbar-brand {
font-size: 1.1rem;
color: white;
}
#mainNav table .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
color: white;
}
#mainNav table .navbar-nav {
letter-spacing: 1px; }
#mainNav table .navbar-nav li.nav-item {
display:inline;
}
#mainNav table .navbar-nav li.nav-item a.nav-link {
color: darkgreen;
text-decoration: none;
vertical-align: top;
padding-right: 10px;
}
#mainNav table .navbar-nav li.nav-item a.nav-link:hover {
color: #18BC9C;
outline: none;
}
#mainNav table .navbar-nav a.nav-text {
background-color : rgba(242,222,255,0.6);
border-radius: 25px;
margin-bottom: 9px;
margin-right: 6px;
white-space: nowrap;
}
#mainNav table .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus { color: white; }
.footer-list li {
list-style-type: none;
}
.footer-list li a:hover { color: gold; }
.hover_group {
cursor:pointer;
}
.hover_group rect {
fill:#e6e6e6;
}
.hover_group:hover rect {
fill: #F6F6e6;
}
footer {
padding:10px;
background: -webkit-linear-gradient(to left, rgba(252,252,255,0.5), #fffbe2 );
background: linear-gradient(to left, rgba(252,252,255,0.5), #fffbe2 );
text-align: center;
font-size: 0.85em;
}
footer a {
text-decoration:none;
color:darkgreen;
font-weight:bold;
font-style: italic;
}
.copiouslink:hover {
fill:navy;
}
.copiouslink {
fill:black;
}
* {margin: 0; padding: 0; box-sizing: border-box}
.PhIOtjDr_0 {
fill:none;
stroke:#1c1448;
stroke-width:4.59875107;
stroke-miterlimit:4;
stroke-dasharray: 2948 2950;
stroke-dashoffset: 2949;
animation: PhIOtjDr_draw 6666ms ease-in forwards;
}
@keyframes PhIOtjDr_draw {
100% {stroke-dashoffset: 0}
}
@keyframes PhIOtjDr_fade {
0% {stroke-opacity: 1}
97.1830985915493% {stroke-opacity: 1}
100% {stroke-opacity: 0}
}
.form_el {
border:lightgray solid 1px;
padding:6px;
margin:2px;
width:80%;
}
.form_el_inner {
border:lightgray solid 1px;
padding:6px;
margin:2px;
width:100%;
}
label {
font-weight:bold;
color:darkgreen;
width:35%;
}
.field_el {
width:65%;
}
@media (max-width: 1040px) {
.field_el {
width:94%;
margin-left:3%;
margin-right:3%;
}
}
#contact_box {
background: -webkit-linear-gradient(to right, rgba(252, 252, 240, 1.0), #FEFEFE));
background: linear-gradient(to right, rgba(252, 252, 240, 1.0), #FEFEFE );
}
.textarea_field_el {
width: 94%;
margin:3%;
}
.error-message {
visibility:hidden;
width:75%;
font-weight:bolder;
color:red;
background-color:white;
border: solid 1px orange;
padding:2px;
margin:3px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: relative; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: inherit;
top: 0;
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 18px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #4ca85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
margin-bottom: 20px;
background-color: darkgreen;
color: white;
}
/* Add Animation */
@-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
@keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
@-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
@keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
#logout-control-top {
visibility: hidden;
display: none;
}
</style>
</head>
<script>
var g_siteURL = window.location.host;
var g_finalizers = []
var g_loginStateViewHolders = {}
</script>
<body>
<nav id="mainNav">
<table style="width:100%">
<tr>
<td style="width:62;height:63">
<a class="nav-link" href="/">
<svg version="1.0" width="60" height="60" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet" id="logo" >
<defs id="defs10"/>
<path class="PhIOtjDr_0" id="path6" d="m 30.107062,7.4672872 c 4.67725,2.6985208 8.37554,8.6930958 12.94402,20.5087688 7.17904,19.072767 24.58277,67.337762 29.69511,82.950634 l 5.32989,15.9502 -13.70543,-0.25058 -10.468161,2.57106 -8.132079,2.99946 -4.78602,5.90784 0.76141,-6.91979 c 0.65264,-6.50536 0.32632,-7.85462 -5.43866,-25.31791 C 27.822822,80.549048 20.535012,60.127019 12.703332,40.215781 5.4155222,21.730904 4.4365622,15.57249 7.8085322,10.503124 11.941922,4.43145 22.384152,2.9954505 30.107062,7.4672872 Z M 238.08162,22.742849 c 3.69828,2.110631 6.52639,6.669206 6.52639,10.379672 0,1.686578 -2.93688,12.740881 -6.63517,24.469814 -19.68797,64.138095 -30.34775,107.931245 -30.34775,124.806655 0,4.6453 -1.08775,7.68113 -18.60024,50.80931 l -4.35093,10.79409 -67.76577,0 -67.765758,0 -14.35808,-35.35063 -14.35808,-35.3603 17.62128,-20.75934 17.5125,-20.75935 29.36879,0 c 32.631998,0 5.455822,5.28877 29.390108,7.16797 -3.81133,6.98972 7.16732,11.29772 7.16732,11.29772 l 2.51778,3.43975 c -1.74038,3.20932 -4.92039,6.69891 -9.3801,9.5709 l -3.2632,2.11064 -9.78959,-2.62144 c -8.593088,-2.27446 -11.312428,-2.61179 -22.080978,-2.61179 -13.0528,-0.0964 -14.35808,0.2506 -14.35808,4.29837 0,2.70817 3.15443,3.63336 12.72648,3.63336 21.42834,0 38.723308,8.01847 47.533928,22.10863 3.58951,5.73436 7.17904,15.86345 7.17904,20.50876 0,2.86236 4.45971,5.05973 7.50536,3.79721 2.82811,-1.09868 2.93687,-4.64531 0.65264,-14.01306 -2.28424,-9.36772 -7.83169,-17.88734 -15.77214,-24.29632 -5.32988,-4.30799 -6.30884,-5.49342 -5.11233,-6.24517 1.19649,-0.76135 2.06669,-0.51077 4.0246,1.08906 6.30885,5.23321 19.03534,7.00654 27.73719,3.88395 5.87377,-2.11064 11.85631,-7.17036 15.11951,-12.74088 1.52281,-2.53468 5.98253,-16.03694 9.89835,-29.9536 10.98611,-38.396111 22.08098,-72.320389 30.13021,-92.665317 5.54744,-14.176879 12.40016,-19.737762 23.16871,-18.812555 2.93688,0.250577 6.63517,1.175785 8.15801,2.023891 z m -126.72091,50.03831 c 2.28424,0.510792 5.76499,2.11063 7.72291,3.633367 5.87375,4.558576 6.20008,7.257098 3.80705,29.278954 -1.1965,10.71701 -1.94404,26.93071 -2.27035,27.1042 -0.32632,0.25057 -8.38942,-6.50868 -17.41761,-6.25812 l -16.533538,0.42407 0.65264,-6.66922 c 0.32632,-3.62372 1.19651,-13.83956 1.84915,-22.619385 0.65264,-9.19425 1.74037,-17.125977 2.50179,-18.561977 3.2632,-5.907835 10.550998,-8.269041 19.687958,-6.331889 z m 48.5129,9.454465 c 2.06668,1.011946 4.56848,3.209314 5.54744,4.89589 1.84914,2.871998 1.84914,4.22126 -0.8702,33.750816 -1.52282,17.04886 -3.37196,32.575 -4.24216,35.02295 -3.15442,8.51961 -9.13695,13.07819 -18.16513,13.67573 -4.78601,0.25056 -6.41762,0 -9.46327,-1.69622 -5.87376,-3.12256 -6.41764,-4.29838 -2.93689,-7.42094 6.20008,-5.744 4.00097,-11.09854 1.92352,-15.89687 0,0 -0.33391,-1.79223 -2.65798,-4.24016 l -2.01123,-1.92782 3.94219,-26.79768 c 1.95792,-22.869967 2.17547,-23.795174 5.11237,-26.667174 4.89478,-4.89589 16.96861,-6.24515 23.82134,-2.698522 z" />
<rect style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4.80000019;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect4169" width="68.005806" height="55.413109" x="62.964886" y="157.3824"/>
<rect style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.60000002;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect4170" width="39.957146" height="46.691494" x="105.05587" y="172.33051"/>
<rect style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect4172" width="134.35677" height="7.9790406" x="49.16119" y="238.93228"/>
<text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:184.28874207px;line-height:125%;font-family:'Arial Rounded MT Bold';-inkscape-font-specification:'Arial Rounded MT Bold, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#0000ff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="6.6644416" y="260.41125" id="text4161" transform="scale(1.041834,0.95984582)"><tspan id="tspan4163" x="6.6644416" y="260.41125">C</tspan></text>
<text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:28.53204727px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="90" y="175.07523" id="text4165" transform="scale(0.90874022,1.1004245)"><tspan id="tspan4167" x="90" y="175.07523">opious</tspan></text>
</svg>
</a>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</nav>
<main>
<div class="items">
<div class="item">
$$BODY_INSERT
</div>
</div>
</main>
<footer>
<ul class="footer-list">
<li>
<a href="http://www.copious.world">copyright © 2020 copious.world</a>
</li>
</ul>
</footer>
</body>
</html>
<script>
let asset_secondary = "secondary/guarded"
let transition_secondary = "secondary/transition"
let click_paths = {
//
"login" : {
"method" : "GET",
"path" : "static/login"
},
"register" : {
"method" : "GET",
"path" : "static/register"
},
"forgetful" : {
"method" : "GET",
"path" : "static/forgetful"
},
"forgetful" : {
"method" : "GET",
"path" : "static/forgetful"
},
"easter_egg" : {
"method" : "POST",
"path" : "/guarded/static/easter_egg"
},
"tell-time" : {
"method" : "POST",
"path" : "/guarded/dynamic/tell-time"
},
"captcha" : {
"method" : "POST",
"path" : {
"asset" : "/guarded/dynamic/captcha",
"transition" : "/transition/captcha",
}
},
"chocolate" : {
"method" : "POST",
"path" : "/guarded/dynamic/chocolate"
},
"password-reset" : {
"method" : "POST",
"path" : "/guarded/dynamic/password-reset"
},
"contact" : {
"method" : "POST",
"path" : "/transition/contact"
},
"login" : {
"method" : "POST",
"path" : "/users/login"
},
"logout" : {
"method" : "POST",
"path" : "/users/logout"
},
"register" : {
"method" : "POST",
"path" : "/users/register"
},
"forgot" : {
"method" : "POST",
"path" : "/users/forgot"
}
//
}
async function postData(url = '', data = {}, creds = 'omit', do_stringify = true) {
// Default options are marked with *
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: creds, // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *client
body: (do_stringify ? JSON.stringify(data) : data) // body data type must match "Content-Type" header
});
if ( response.ok == false ) {
console.log(response.status + ': ' + response.statusText)
}
return await response.json(); // parses JSON response into native JavaScript objects
}
function hide_interface_box() {
let display = document.getElementById('interface-box')
if ( display ) {
display.style.visibility = "hidden"
display.style.display = "none"
}
}
function hide_box(bxname) {
let display = document.getElementById(bxname)
if ( display ) {
display.style.visibility = "hidden"
display.style.display = "none"
}
}
function show_box(bxname) {
let display = document.getElementById(bxname)
if ( display ) {
display.style.visibility = "visible"
display.style.display = "block"
}
}
hide_box('error-box')
hide_box('success-box')
async function post_submit(fields) {
let bdy = {}
fields.forEach(element => {
let fld = document.getElementById(element)
if ( fld ) {
bdy[element] = fld.value
}
});
let url = bdy.post_url
if ( url ) {
delete bdy.post_url
//
let resp = await postData(url, bdy)
//
if ( resp ) hide_interface_box()
if ( resp && (resp.OK === 'true') ) {
show_box('success-box')
} else {
show_box('error-box')
}
}
}
</script>