Преглед изворни кода

lakeside: first version

master
James Lu пре 3 месеци
родитељ
комит
8a82ab4698
1 измењених фајлова са 142 додато и 0 уклоњено
  1. 142
    0
      lakeside/index.html

+ 142
- 0
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>

Loading…
Откажи
Сачувај