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.

291 lines
79 KiB
HTML

5 years ago
<!DOCTYPE html>
<html class="gr__"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>teletext</title>
<script src="variation1_files/jquery.js"></script>
<style type="text/css">
@font-face {
font-family: teletext;
src: url(font/Modeseven-L3n5.ttf);
}
.green::-moz-selection { /* Code for Firefox */
/*color: white;*/
background: blue;
}
.green::selection {
/*color: red;*/
background: blue;
}
body{position: relative;
text-align: center;
background-color: black;
color: white;
font-family: teletext;
font-size: 25px;
}
.green {color: #6ee947;}
.white {color: #fff;}
.yellow {color: #fff841;}
.violet {color: darkviolet;}
.magenta {color: crimson;}
.mainTxt {
width: 58%;
margin-left: 21%;
margin-right: 21%;
}
.blink_me {
animation: blinker 1s step-start infinite;
}
@keyframes blinker {
50% {
color: red;
}
}
.lineH {
text-align: center;
letter-spacing: 10px;
animation: lineH 2s linear infinite;
}
@keyframes lineH {
50% {
letter-spacing: -15px;
}
}
.zigzag {letter-spacing: -5px;}
span {
cursor: pointer;
position: absolute;
font-size: 48px;
/*z-index: -1;*/
}
.bgBlack { background-color: black;}
</style>
</head>
<body data-gr-c-s-loaded="true">
<main class="mainTxt">
<h1 class="blink_me bgBlack">Introduction</h1>
<br>
<!-- -->
<div>
<p class="green bgBlack">What you are reading to can be accessed at different levels of intensity.</p>
<p class="green bgBlack">It might be helpful to think of these as options, or hatches opening along a corridor inside a maze. </p>
<p class="zigzag white bgBlack">\/<a href="#">\/</a>\/\<a href="#">/\</a>/\/<a href="#">\/</a>\/\/\/\<a href="#">/\</a>/\<a href="#">/\</a>/\/\/\/<a href="#">\/</a>\/\/\/\/\/\/\/\<a href="#">/\</a>/<a href="#">\/</a>\/\/\/\/\/\/</p>
<p class="yellow bgBlack">At degree 0</p>
<p class="lineH bgBlack"> <a href="#">"-Th.e_gat(e-"</a> </p>
<p class="yellow bgBlack">is the name on a door in a world which eventually does not, has not, and will never exist.</p>
</div>
<!-- <p class="linez">/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\</p> -->
<!-- <img src="https://cdn.lowgif.com/full/454a59780310bb83-never-ending-maze-gif-find-share-on-giphy.gif"> -->
</main>
<!-- <p>At degree 0 <a href="#">"-Th.e_gat(e-"</a> is the name on a door in a world which eventually does not, has not, and will never exist'.</p> -->
<script type="text/javascript">
var w = window.innerWidth;
var h = window.innerHeight;
function getRintw() {
var x = Math.floor(Math.random() * w) - 50;
return x
}
function getRinth() {
var y = Math.floor(Math.random() * h) - 80;
return y
}
$(document).ready(function(){
for (var i = 0; i < 300; i++) {
$("body").append(
'<span class="stars blink_me" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
);
}
for (var i = 0; i < 30; i++) {
$("body").append(
'<span class="stars violet" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
);
$("body").append(
'<span class="stars magenta" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
);
}
$(".stars").click(function(){
$(this).hide();
});
});
</script>
<span class="stars blink_me" style="top:196px; left:910px;">.</span><span class="stars blink_me" style="top:770px; left:906px;">.</span><span class="stars blink_me" style="top:363px; left:508px;">.</span><span class="stars blink_me" style="top:408px; left:1572px;">.</span><span class="stars blink_me" style="top:-77px; left:1016px;">.</span><span class="stars blink_me" style="top:-47px; left:977px;">.</span><span class="stars blink_me" style="top:640px; left:439px;">.</span><span class="stars blink_me" style="top:509px; left:909px;">.</span><span class="stars blink_me" style="top:658px; left:334px;">.</span><span class="stars blink_me" style="top:713px; left:291px;">.</span><span class="stars blink_me" style="top:459px; left:1606px;">.</span><span class="stars blink_me" style="top:214px; left:-15px;">.</span><span class="stars blink_me" style="top:439px; left:1171px;">.</span><span class="stars blink_me" style="top:154px; left:615px;">.</span><span class="stars blink_me" style="top:-5px; left:750px;">.</span><span class="stars blink_me" style="top:155px; left:473px;">.</span><span class="stars blink_me" style="top:695px; left:480px;">.</span><span class="stars blink_me" style="top:265px; left:1353px;">.</span><span class="stars blink_me" style="top:550px; left:607px;">.</span><span class="stars blink_me" style="top:171px; left:1163px;">.</span><span class="stars blink_me" style="top:-6px; left:287px;">.</span><span class="stars blink_me" style="top:626px; left:784px;">.</span><span class="stars blink_me" style="top:638px; left:1654px;">.</span><span class="stars blink_me" style="top:-9px; left:500px;">.</span><span class="stars blink_me" style="top:242px; left:185px;">.</span><span class="stars blink_me" style="top:276px; left:1834px;">.</span><span class="stars blink_me" style="top:29px; left:987px;">.</span><span class="stars blink_me" style="top:394px; left:138px;">.</span><span class="stars blink_me" style="top:833px; left:1388px;">.</span><span class="stars blink_me" style="top:633px; left:1506px;">.</span><span class="stars blink_me" style="top:-40px; left:733px;">.</span><span class="stars blink_me" style="top:488px; left:1212px;">.</span><span class="stars blink_me" style="top:114px; left:1662px;">.</span><span class="stars blink_me" style="top:331px; left:1400px;">.</span><span class="stars blink_me" style="top:297px; left:117px;">.</span><span class="stars blink_me" style="top:372px; left:896px;">.</span><span class="stars blink_me" style="top:365px; left:1519px;">.</span><span class="stars blink_me" style="top:365px; left:310px;">.</span><span class="stars blink_me" style="top:271px; left:31px;">.</span><span class="stars blink_me" style="top:361px; left:347px;">.</span><span class="stars blink_me" style="top:150px; left:1794px;">.</span><span class="stars blink_me" style="top:659px; left:138px;">.</span><span class="stars blink_me" style="top:351px; left:1465px;">.</span><span class="stars blink_me" style="top:580px; left:698px;">.</span><span class="stars blink_me" style="top:391px; left:1173px;">.</span><span class="stars blink_me" style="top:511px; left:1315px;">.</span><span class="stars blink_me" style="top:773px; left:-3px;">.</span><span class="stars blink_me" style="top:430px; left:788px;">.</span><span class="stars blink_me" style="top:352px; left:393px;">.</span><span class="stars blink_me" style="top:347px; left:1239px;">.</span><span class="stars blink_me" style="top:628px; left:-8px;">.</span><span class="stars blink_me" style="top:230px; left:167px;">.</span><span class="stars blink_me" style="top:-31px; left:498px;">.</span><span class="stars blink_me" style="top:598px; left:1679px;">.</span><span class="stars blink_me" style="top:465px; left:646px;">.</span><span class="stars blink_me" style="top:476px; left:784px;">.</span><span class="stars blink_me" style="top:621px; left:1337px;">.</span><span class="stars blink_me" style="top:137px; left:1427px;">.</span><span class="stars blink_me" style="top:53px; left:1188px;">.</span><span class="stars blink_me" style="top:70px; left:961px;">.</span><
<main class="mainTxt">
<h1 class="blink_me bgBlack">Introduction</h1>
<br>
<!-- -->
<div>
<p class="green bgBlack">What you are reading to can be accessed at different levels of intensity.</p>
<p class="green bgBlack">It might be helpful to think of these as options, or hatches opening along a corridor inside a maze. </p>
<p class="zigzag white bgBlack">\/<a href="#">\/</a>\/\<a href="#">/\</a>/\/<a href="#">\/</a>\/\/\/\<a href="#">/\</a>/\<a href="#">/\</a>/\/\/\/<a href="#">\/</a>\/\/\/\/\/\/\/\<a href="#">/\</a>/<a href="#">\/</a>\/\/\/\/\/\/</p>
<p class="yellow bgBlack">At degree 0</p>
<p class="lineH bgBlack"> <a href="#">"-Th.e_gat(e-"</a> </p>
<p class="yellow bgBlack">is the name on a door in a world which eventually does not, has not, and will never exist.</p>
</div>
<!-- <p class="linez">/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\</p> -->
<!-- <img src="https://cdn.lowgif.com/full/454a59780310bb83-never-ending-maze-gif-find-share-on-giphy.gif"> -->
</main>
<!-- <p>At degree 0 <a href="#">"-Th.e_gat(e-"</a> is the name on a door in a world which eventually does not, has not, and will never exist'.</p> -->
<script type="text/javascript">
var w = window.innerWidth;
var h = window.innerHeight;
function getRintw() {
var x = Math.floor(Math.random() * w) - 50;
return x
}
function getRinth() {
var y = Math.floor(Math.random() * h) - 80;
return y
}
$(document).ready(function(){
for (var i = 0; i < 300; i++) {
$("body").append(
'<span class="stars blink_me" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
);
}
for (var i = 0; i < 30; i++) {
$("body").append(
'<span class="stars violet" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
);
$("body").append(
'<span class="stars magenta" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
);
}
$(".stars").click(function(){
$(this).hide();
});
});
</script>
<span class="stars blink_me" style="top:196px; left:910px;">.</span><span class="stars blink_me" style="top:770px; left:906px;">.</span><span class="stars blink_me" style="top:363px; left:508px;">.</span><span class="stars blink_me" style="top:408px; left:1572px;">.</span><span class="stars blink_me" style="top:-77px; left:1016px;">.</span><span class="stars blink_me" style="top:-47px; left:977px;">.</span><span class="stars blink_me" style="top:640px; left:439px;">.</span><span class="stars blink_me" style="top:509px; left:909px;">.</span><span class="stars blink_me" style="top:658px; left:334px;">.</span><span class="stars blink_me" style="top:713px; left:291px;">.</span><span class="stars blink_me" style="top:459px; left:1606px;">.</span><span class="stars blink_me" style="top:214px; left:-15px;">.</span><span class="stars blink_me" style="top:439px; left:1171px;">.</span><span class="stars blink_me" style="top:154px; left:615px;">.</span><span class="stars blink_me" style="top:-5px; left:750px;">.</span><span class="stars blink_me" style="top:155px; left:473px;">.</span><span class="stars blink_me" style="top:695px; left:480px;">.</span><span class="stars blink_me" style="top:265px; left:1353px;">.</span><span class="stars blink_me" style="top:550px; left:607px;">.</span><span class="stars blink_me" style="top:171px; left:1163px;">.</span><span class="stars blink_me" style="top:-6px; left:287px;">.</span><span class="stars blink_me" style="top:626px; left:784px;">.</span><span class="stars blink_me" style="top:638px; left:1654px;">.</span><span class="stars blink_me" style="top:-9px; left:500px;">.</span><span class="stars blink_me" style="top:242px; left:185px;">.</span><span class="stars blink_me" style="top:276px; left:1834px;">.</span><span class="stars blink_me" style="top:29px; left:987px;">.</span><span class="stars blink_me" style="top:394px; left:138px;">.</span><span class="stars blink_me" style="top:833px; left:1388px;">.</span><span class="stars blink_me" style="top:633px; left:1506px;">.</span><span class="stars blink_me" style="top:-40px; left:733px;">.</span><span class="stars blink_me" style="top:488px; left:1212px;">.</span><span class="stars blink_me" style="top:114px; left:1662px;">.</span><span class="stars blink_me" style="top:331px; left:1400px;">.</span><span class="stars blink_me" style="top:297px; left:117px;">.</span><span class="stars blink_me" style="top:372px; left:896px;">.</span><span class="stars blink_me" style="top:365px; left:1519px;">.</span><span class="stars blink_me" style="top:365px; left:310px;">.</span><span class="stars blink_me" style="top:271px; left:31px;">.</span><span class="stars blink_me" style="top:361px; left:347px;">.</span><span class="stars blink_me" style="top:150px; left:1794px;">.</span><span class="stars blink_me" style="top:659px; left:138px;">.</span><span class="stars blink_me" style="top:351px; left:1465px;">.</span><span class="stars blink_me" style="top:580px; left:698px;">.</span><span class="stars blink_me" style="top:391px; left:1173px;">.</span><span class="stars blink_me" style="top:511px; left:1315px;">.</span><span class="stars blink_me" style="top:773px; left:-3px;">.</span><span class="stars blink_me" style="top:430px; left:788px;">.</span><span class="stars blink_me" style="top:352px; left:393px;">.</span><span class="stars blink_me" style="top:347px; left:1239px;">.</span><span class="stars blink_me" style="top:628px; left:-8px;">.</span><span class="stars blink_me" style="top:230px; left:167px;">.</span><span class="stars blink_me" style="top:-31px; left:498px;">.</span><span class="stars blink_me" style="top:598px; left:1679px;">.</span><span class="stars blink_me" style="top:465px; left:646px;">.</span><span class="stars blink_me" style="top:476px; left:784px;">.</span><span class="stars blink_me" style="top:621px; left:1337px;">.</span><span class="stars blink_me" style="top:137px; left:1427px;">.</span><span class="stars blink_me" style="top:53px; left:1188px;">.</span><span class="stars blink_me" style="top:70px; left:961px;">.</span><
<main class="mainTxt">
<h1 class="blink_me bgBlack">Introduction</h1>
<br>
<!-- -->
<div>
<p class="green bgBlack">What you are reading to can be accessed at different levels of intensity.</p>
<p class="green bgBlack">It might be helpful to think of these as options, or hatches opening along a corridor inside a maze. </p>
<p class="zigzag white bgBlack">\/<a href="#">\/</a>\/\<a href="#">/\</a>/\/<a href="#">\/</a>\/\/\/\<a href="#">/\</a>/\<a href="#">/\</a>/\/\/\/<a href="#">\/</a>\/\/\/\/\/\/\/\<a href="#">/\</a>/<a href="#">\/</a>\/\/\/\/\/\/</p>
<p class="yellow bgBlack">At degree 0</p>
<p class="lineH bgBlack"> <a href="#">"-Th.e_gat(e-"</a> </p>
<p class="yellow bgBlack">is the name on a door in a world which eventually does not, has not, and will never exist.</p>
</div>
<!-- <p class="linez">/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\</p> -->
<!-- <img src="https://cdn.lowgif.com/full/454a59780310bb83-never-ending-maze-gif-find-share-on-giphy.gif"> -->
</main>
<!-- <p>At degree 0 <a href="#">"-Th.e_gat(e-"</a> is the name on a door in a world which eventually does not, has not, and will never exist'.</p> -->
<script type="text/javascript">
var w = window.innerWidth;
var h = window.innerHeight;
function getRintw() {
var x = Math.floor(Math.random() * w) - 50;
return x
}
function getRinth() {
var y = Math.floor(Math.random() * h) - 80;
return y
}
$(document).ready(function(){
for (var i = 0; i < 300; i++) {
$("body").append(
'<span class="stars blink_me" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
);
}
for (var i = 0; i < 30; i++) {
$("body").append(
'<span class="stars violet" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
);
$("body").append(
'<span class="stars magenta" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
);
}
$(".stars").click(function(){
$(this).hide();
});
});
</script>
<span class="stars blink_me" style="top:196px; left:910px;">.</span><span class="stars blink_me" style="top:770px; left:906px;">.</span><span class="stars blink_me" style="top:363px; left:508px;">.</span><span class="stars blink_me" style="top:408px; left:1572px;">.</span><span class="stars blink_me" style="top:-77px; left:1016px;">.</span><span class="stars blink_me" style="top:-47px; left:977px;">.</span><span class="stars blink_me" style="top:640px; left:439px;">.</span><span class="stars blink_me" style="top:509px; left:909px;">.</span><span class="stars blink_me" style="top:658px; left:334px;">.</span><span class="stars blink_me" style="top:713px; left:291px;">.</span><span class="stars blink_me" style="top:459px; left:1606px;">.</span><span class="stars blink_me" style="top:214px; left:-15px;">.</span><span class="stars blink_me" style="top:439px; left:1171px;">.</span><span class="stars blink_me" style="top:154px; left:615px;">.</span><span class="stars blink_me" style="top:-5px; left:750px;">.</span><span class="stars blink_me" style="top:155px; left:473px;">.</span><span class="stars blink_me" style="top:695px; left:480px;">.</span><span class="stars blink_me" style="top:265px; left:1353px;">.</span><span class="stars blink_me" style="top:550px; left:607px;">.</span><span class="stars blink_me" style="top:171px; left:1163px;">.</span><span class="stars blink_me" style="top:-6px; left:287px;">.</span><span class="stars blink_me" style="top:626px; left:784px;">.</span><span class="stars blink_me" style="top:638px; left:1654px;">.</span><span class="stars blink_me" style="top:-9px; left:500px;">.</span><span class="stars blink_me" style="top:242px; left:185px;">.</span><span class="stars blink_me" style="top:276px; left:1834px;">.</span><span class="stars blink_me" style="top:29px; left:987px;">.</span><span class="stars blink_me" style="top:394px; left:138px;">.</span><span class="stars blink_me" style="top:833px; left:1388px;">.</span><span class="stars blink_me" style="top:633px; left:1506px;">.</span><span class="stars blink_me" style="top:-40px; left:733px;">.</span><span class="stars blink_me" style="top:488px; left:1212px;">.</span><span class="stars blink_me" style="top:114px; left:1662px;">.</span><span class="stars blink_me" style="top:331px; left:1400px;">.</span><span class="stars blink_me" style="top:297px; left:117px;">.</span><span class="stars blink_me" style="top:372px; left:896px;">.</span><span class="stars blink_me" style="top:365px; left:1519px;">.</span><span class="stars blink_me" style="top:365px; left:310px;">.</span><span class="stars blink_me" style="top:271px; left:31px;">.</span><span class="stars blink_me" style="top:361px; left:347px;">.</span><span class="stars blink_me" style="top:150px; left:1794px;">.</span><span class="stars blink_me" style="top:659px; left:138px;">.</span><span class="stars blink_me" style="top:351px; left:1465px;">.</span><span class="stars blink_me" style="top:580px; left:698px;">.</span><span class="stars blink_me" style="top:391px; left:1173px;">.</span><span class="stars blink_me" style="top:511px; left:1315px;">.</span><span class="stars blink_me" style="top:773px; left:-3px;">.</span><span class="stars blink_me" style="top:430px; left:788px;">.</span><span class="stars blink_me" style="top:352px; left:393px;">.</span><span class="stars blink_me" style="top:347px; left:1239px;">.</span><span class="stars blink_me" style="top:628px; left:-8px;">.</span><span class="stars blink_me" style="top:230px; left:167px;">.</span><span class="stars blink_me" style="top:-31px; left:498px;">.</span><span class="stars blink_me" style="top:598px; left:1679px;">.</span><span class="stars blink_me" style="top:465px; left:646px;">.</span><span class="stars blink_me" style="top:476px; left:784px;">.</span><span class="stars blink_me" style="top:621px; left:1337px;">.</span><span class="stars blink_me" style="top:137px; left:1427px;">.</span><span class="stars blink_me" style="top:53px; left:1188px;">.</span><span class="stars blink_me" style="top:70px; left:961px;">.</span><