old and new
parent
b14ef3a384
commit
0708f434ef
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
|
||||
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
||||
crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
|
||||
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
|
||||
crossorigin=""></script>
|
||||
<script src="./leaflet-hash/leaflet-hash.js" type="text/javascript"></script>
|
||||
<style>
|
||||
html, body, #mapid {
|
||||
height:100%;
|
||||
width:100%;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
text-align:center;
|
||||
vertical-align: middle;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mapid"></div>
|
||||
<script type="text/javascript" src="text.js"></script>
|
||||
<script type="text/javascript">
|
||||
var mymap = L.map('mapid', {
|
||||
maxZoom: 2,
|
||||
minZoom: 0,
|
||||
zoom: 0,
|
||||
crs: L.CRS.Simple,
|
||||
center: new L.LatLng(-100,300),
|
||||
|
||||
}); //.setView([0, 0], 25);
|
||||
|
||||
// L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
|
||||
// attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
// maxZoom: 100,
|
||||
// id: 'mapbox.streets',
|
||||
// accessToken: 'your.mapbox.access.token'
|
||||
// }).addTo(mymap);
|
||||
|
||||
L.GridLayer.DebugCoords = L.GridLayer.extend({
|
||||
createTile: function (coords) {
|
||||
var tile = document.createElement('div');
|
||||
var tileSize = this.getTileSize();
|
||||
tile.setAttribute('width', '500px');
|
||||
tile.setAttribute('height', tileSize.y);
|
||||
|
||||
// setTimeout(function () {
|
||||
// done(null, tile); // Syntax is 'done(error, tile)'
|
||||
// }, 500 + Math.random() * 1500);
|
||||
|
||||
|
||||
function popWindow1() {
|
||||
setTimeout(function() {
|
||||
var myWindow = window.open("", "MyText", "height=230, width=390, left=100, top=100, resizable=no, scrollbars=no, toolbar=no, menubar=no, directories=no, status=yes");
|
||||
myWindow.document.write('<!DOCTYPE html><html><head><title>DOM Annihilator - example</title></head><style type="text/css">body{background-color: red;font-family: "Lucida Console", Monaco, monospace;color: black;}</style><body><img src="https://simplemaps.com/static/img/frog.png" style="width: 75px" /><p>The subject of this project is not the void exactly, but rather what there is round about or inside it. To start with, then, there isnt very much: nothingness, the impalpable, the virtually immaterial; extension, the external, what is external to us, what we move about in the midst of, our ambient milieu, the space around us.</p><input type="button" value="Close this window" onclick="self.close()"></body></html>')
|
||||
// setTimeout(function() {
|
||||
// myWindow.close();
|
||||
// }, 3000);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function popWindow2() {
|
||||
setTimeout(function() {
|
||||
var myWindow = window.open("", "MyText", "height=230, width=390, left=100, top=100, resizable=no, scrollbars=no, toolbar=no, menubar=no, directories=no, status=yes");
|
||||
myWindow.document.write('<h1>ciao!</h1>')
|
||||
setTimeout(function() {
|
||||
myWindow.close();
|
||||
}, 3000);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
|
||||
if (coords.x == 0 && coords.y == 0){
|
||||
tile.innerHTML = '<p style="width:510px;">'+ text[coords.z] + '</p>' ;
|
||||
}else{};
|
||||
|
||||
if (coords.z == 1 ){popWindow1();}else if (coords.z == 2 ){popWindow2();}else{}
|
||||
|
||||
return tile;
|
||||
}
|
||||
});
|
||||
|
||||
L.gridLayer.debugCoords = function(opts) {
|
||||
return new L.GridLayer.DebugCoords(opts);
|
||||
};
|
||||
|
||||
mymap.addLayer( L.gridLayer.debugCoords() );
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,15 @@
|
||||
Your realm ends here and mine begins.
|
||||
From now on the laws are mine.
|
||||
So be it,
|
||||
|
||||
|
||||
|
||||
He sat under palm trees and knew that he had entered the Garden.
|
||||
|
||||
This was his own realm restored.
|
||||
|
||||
There is nothing wrong with this place, is there? Does it lack? You know it doesn't lack; it is Paradise.
|
||||
|
||||
Is the Paradise that you created and I will show you
|
||||
something better.
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html >
|
||||
<!-- There is nothing wrong with this place, is there? Does it lack? -->
|
||||
<!-- You know it doesnt lack; it is Paradise. -->
|
||||
<!-- Is the Paradise that I created and I will show you things you know nothing about. Come. -->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
alert('press ctrl+shift+i if you want to continue')
|
||||
setTimeout(function() {
|
||||
setTimeout(function() {
|
||||
var myWindow = window.open("", "MyText", "height=100, width=1000, left=100, top=100, resizable=no, scrollbars=no, toolbar=no, menubar=no, directories=no, status=yes");
|
||||
myWindow.document.write('<!DOCTYPE html><html><head><title>DOM Annihilator - example</title></head><style type="text/css"> body{background-color: red;font-family: "Lucida Console", Monaco, monospace;color: black;}</style><body><p>This is the doorway. We can enter here; it is as good as any. <br>Here, in this world you are not a child I know you. For you any shape is possible.</p></body></html>');
|
||||
setTimeout(function() {
|
||||
myWindow.close();
|
||||
}, 10000);
|
||||
}, 13000);
|
||||
|
||||
|
||||
setTimeout(function() {
|
||||
var newWindow = window.open("", "MyText", "height=100, width=1000, left=100, top=500, resizable=no, scrollbars=no, toolbar=no, menubar=no, directories=no, status=yes");
|
||||
newWindow.document.write('<!DOCTYPE html><html><head><title>DOM Annihilator - example</title></head><style type="text/css"> body{background-color: red;font-family: "Lucida Console", Monaco, monospace;color: black;}</style><body><p>You know nothing! Now shut up. My time and my realm have come. I am your guide and this is a route that you do not know. You will have to trust me. You will trust your guide as Dante trusted his guide, through the realms, up and up. </p></body></html>');
|
||||
setTimeout(function() {
|
||||
newWindow.close();
|
||||
}, 10000);
|
||||
}, 25000);
|
||||
|
||||
setTimeout(function() {
|
||||
document.write('<style type="text/css">body{background-color: red;font-family: "Lucida Console", Monaco, monospace;color: black;}</style>');
|
||||
document.write('You are free to roam my land; you are free here, entirely.<br>');
|
||||
document.write('I give you my word.<br>');
|
||||
document.write('Gradually I will unfold my realm to you, and, when I am done, you will know.<br>');
|
||||
}, 35000);
|
||||
|
||||
setTimeout(function() {
|
||||
document.write('<a id="redirect" href="./beginning.html">SHOW ME</a>');
|
||||
}, 50000);
|
||||
|
||||
}, 1000);
|
||||
setTimeout(function() {
|
||||
document.documentElement.remove();
|
||||
}, 500);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
|
||||
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
||||
crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
|
||||
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
|
||||
crossorigin=""></script>
|
||||
<script src="./leaflet-hash/leaflet-hash.js" type="text/javascript"></script>
|
||||
<style>
|
||||
html, body, #mapid {
|
||||
position: relative;
|
||||
height:100%;
|
||||
width:100%;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.redirect {
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
/* margin-left: 50%;*/
|
||||
margin-top: 300px;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
text-align:center;
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span id="bttn"></span>
|
||||
<div id="mapid"></div>
|
||||
<script type="text/javascript"> function redirect(){
|
||||
var url = "./example.html";
|
||||
window.location(url);
|
||||
}</script>
|
||||
<script type="text/javascript" src="text2.js"></script>
|
||||
<script type="text/javascript" src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,74 @@
|
||||
alert('Your realm ends here and mine begins.');
|
||||
|
||||
var mymap = L.map('mapid', {
|
||||
maxZoom: 2,
|
||||
minZoom: 0,
|
||||
zoom: 0,
|
||||
crs: L.CRS.Simple,
|
||||
center: new L.LatLng(-100,300),
|
||||
|
||||
}); //.setView([0, 0], 25);
|
||||
|
||||
// L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
|
||||
// attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
// maxZoom: 100,
|
||||
// id: 'mapbox.streets',
|
||||
// accessToken: 'your.mapbox.access.token'
|
||||
// }).addTo(mymap);
|
||||
|
||||
L.GridLayer.DebugCoords = L.GridLayer.extend({
|
||||
createTile: function (coords) {
|
||||
var tile = document.createElement('div');
|
||||
var tileSize = this.getTileSize();
|
||||
tile.setAttribute('width', '500px');
|
||||
tile.setAttribute('height', tileSize.y);
|
||||
var openpop = false;
|
||||
|
||||
// setTimeout(function () {
|
||||
// done(null, tile); // Syntax is 'done(error, tile)'
|
||||
// }, 500 + Math.random() * 1500);
|
||||
|
||||
|
||||
if (coords.x == 0 && coords.y == 0){
|
||||
tile.innerHTML = '<p style="width:510px;">'+ text2[coords.z] + '</p>' ;
|
||||
}else{};
|
||||
|
||||
if (coords.z == 2 ){
|
||||
openpop = true;
|
||||
//}else if (coords.z == 2 ){popWindow2();
|
||||
}else{};
|
||||
|
||||
|
||||
|
||||
if (openpop == true) {
|
||||
setTimeout(function() {
|
||||
// var myWindow = window.open("", "MyText", "height=230, width=390, left=100, top=100, resizable=no, scrollbars=no, toolbar=no, menubar=no, directories=no, status=yes");
|
||||
// myWindow.document.write('<style type="text/css">body{background-color: red;font-family: "Lucida Console", Monaco, monospace;color: black;}</style>');
|
||||
// myWindow.document.write('<style>function openClose(){window.open("https://www.youraddress.com","_parent")}</style>')
|
||||
// myWindow.document.write('<p>The subject of this project is not the space exactly, but rather what there is round about or inside it. To start with, then, there is already very much: nothingness, the impalpable, the virtually immaterial; extension, the external, what is external to us, what we move about in the midst of, our ambient milieu, the void around us.</p>');
|
||||
// myWindow.document.write('<button onclick="self.close();">close</button>')
|
||||
setTimeout(function() {document.getElementById('bttn').innerHTML = '<a class="redirect" href="./example.html" style="margin-left:10%;">Show me</a>';}, 1000);
|
||||
setTimeout(function() {document.getElementById('bttn').innerHTML = '<a class="redirect" href="./example.html" style="margin-left:15%;">Show me</a>';}, 1100);
|
||||
setTimeout(function() {document.getElementById('bttn').innerHTML = '<a class="redirect" href="./example.html" style="margin-left:20%;">Show me</a>';}, 1200);
|
||||
setTimeout(function() {document.getElementById('bttn').innerHTML = '<a class="redirect" href="./example.html" style="margin-left:35%;">Show me</a>';}, 1300);
|
||||
setTimeout(function() {document.getElementById('bttn').innerHTML = '<a class="redirect" href="./example.html" style="margin-left:40%;">Show me</a>';}, 1400);
|
||||
setTimeout(function() {document.getElementById('bttn').innerHTML = '<a class="redirect" href="./example.html" style="margin-left:55%;">Show me</a>';}, 1500);
|
||||
setTimeout(function() {document.getElementById('bttn').innerHTML = '<a class="redirect" href="./example.html" style="margin-left:50%;">Show me</a>';}, 1600);
|
||||
|
||||
|
||||
}, 1000);
|
||||
|
||||
}else{};
|
||||
|
||||
return tile;
|
||||
}
|
||||
});
|
||||
|
||||
function closeOpen(){
|
||||
|
||||
}
|
||||
L.gridLayer.debugCoords = function(opts) {
|
||||
return new L.GridLayer.DebugCoords(opts);
|
||||
};
|
||||
|
||||
mymap.addLayer( L.gridLayer.debugCoords() );
|
||||
@ -0,0 +1,3 @@
|
||||
var text= ["Your realm ends here and mine begins.",
|
||||
"From now on the laws are mine.",
|
||||
"So be it,",];
|
||||
@ -0,0 +1,3 @@
|
||||
var text2 = ["Good morning,",
|
||||
"Do you know what does it mean?",
|
||||
"Then we shall begin",];
|
||||
Loading…
Reference in New Issue