преди 3 месеца · 8a82ab4698
--- a/lakeside/index.html
+++ b/lakeside/index.html
@@ -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>