|
|
@@ -0,0 +1,142 @@ |
|
|
|
<!DOCTYPE html> |
|
|
|
<head> |
|
|
|
<title>Lakeside server - overdrivenetworks</title> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
|
<link rel="icon" href="favicon.ico" type="image/ico"> |
|
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Ranga" rel="stylesheet"> |
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.5/css/fork-awesome.min.css" integrity="sha256-P64qV9gULPHiZTdrS1nM59toStkgjM0dsf5mK/UwBV4=" crossorigin="anonymous"> |
|
|
|
<style> |
|
|
|
body { |
|
|
|
text-align: center; |
|
|
|
margin-top: 5%; |
|
|
|
/* |
|
|
|
background-image: url("Lakeside.png"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: cover; |
|
|
|
*/ |
|
|
|
background-color: #050505; |
|
|
|
|
|
|
|
color: white; |
|
|
|
font-family: sans-serif; |
|
|
|
font-size: large; |
|
|
|
} |
|
|
|
|
|
|
|
body, html { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.main { |
|
|
|
z-index: 1; |
|
|
|
position: sticky; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
h1 { |
|
|
|
font-family: Ranga, sans-serif; |
|
|
|
font-weight: normal; |
|
|
|
margin: 0; |
|
|
|
font-size: 350%; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
color: lightblue; |
|
|
|
} |
|
|
|
a:hover { |
|
|
|
color: #cee7ef; |
|
|
|
} |
|
|
|
|
|
|
|
a:visited { |
|
|
|
color: pink; |
|
|
|
} |
|
|
|
a:visited:hover { |
|
|
|
color: #ffd6dd; |
|
|
|
} |
|
|
|
|
|
|
|
#canvas { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
z-index: 0; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
function randInt(min, max) { |
|
|
|
return Math.floor(Math.random() * (max - min)) + min; |
|
|
|
} |
|
|
|
|
|
|
|
var STEP_SIZE = 20; |
|
|
|
var RECT_HEIGHT = 10; |
|
|
|
var SHAKE_MAX = 20; |
|
|
|
var START_OFFSET = 0.6; |
|
|
|
|
|
|
|
function makeHill(ctx, width, height, color) { |
|
|
|
ctx.strokeStyle = ctx.fillStyle = color; |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.moveTo(0, height * START_OFFSET); |
|
|
|
|
|
|
|
var j = height * START_OFFSET; |
|
|
|
var i = 0; |
|
|
|
for (; i < (width+STEP_SIZE)/2; i+=STEP_SIZE) { |
|
|
|
j += randInt(-SHAKE_MAX, SHAKE_MAX) |
|
|
|
ctx.lineTo(i, j); |
|
|
|
} |
|
|
|
for (; i < (width+STEP_SIZE) && j <= height; i+=STEP_SIZE) { |
|
|
|
j += randInt(0, SHAKE_MAX) |
|
|
|
ctx.lineTo(i, j); |
|
|
|
} |
|
|
|
// include bottom left, bottom right pts |
|
|
|
ctx.lineTo(width, height); |
|
|
|
ctx.lineTo(0, height); |
|
|
|
ctx.closePath(); |
|
|
|
ctx.fill(); |
|
|
|
} |
|
|
|
|
|
|
|
function makeSea(ctx, width, height, color) { |
|
|
|
ctx.strokeStyle = ctx.fillStyle = color; |
|
|
|
ctx.beginPath(); |
|
|
|
var sea_offset_start = randInt(60, 80) / 100; |
|
|
|
var sea_offset_end = sea_offset_start + (randInt(-5, 5) / 100); |
|
|
|
ctx.moveTo(0, height * sea_offset_start); |
|
|
|
ctx.lineTo(width, height * sea_offset_end); |
|
|
|
ctx.lineTo(width, height); |
|
|
|
ctx.lineTo(0, height); |
|
|
|
ctx.closePath(); |
|
|
|
ctx.fill(); |
|
|
|
} |
|
|
|
|
|
|
|
function draw() { |
|
|
|
canvas = document.getElementById("canvas"); |
|
|
|
// resize as needed |
|
|
|
var width = canvas.clientWidth; |
|
|
|
var height = canvas.clientHeight; |
|
|
|
canvas.width = width; |
|
|
|
canvas.height = height; |
|
|
|
|
|
|
|
if (canvas.getContext) { |
|
|
|
var ctx = canvas.getContext('2d'); |
|
|
|
makeSea(ctx, width, height, 'blue'); |
|
|
|
makeHill(ctx, width, height, 'goldenrod'); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body onload="draw();" onresize="draw()";> |
|
|
|
<canvas id="canvas" onclick="draw()";></canvas> |
|
|
|
|
|
|
|
<div class="main"> |
|
|
|
<h1>Lakeside server</h1> |
|
|
|
<p><i class="fa fa-globe-w" aria-hidden="true"></i> Chicago, Illinois</a></p> |
|
|
|
<p><i class="fa fa-building" aria-hidden="true"></i> <a href="https://hosthatch.com/">HostHatch</a></p> |
|
|
|
</div> |
|
|
|
</body> |
|
|
|
</html> |