Browse Source

lakeside: first version

master
James Lu 2 months ago
parent
commit
8a82ab4698
1 changed files with 142 additions and 0 deletions
  1. 142
    0
      lakeside/index.html

+ 142
- 0
lakeside/index.html View File

@@ -0,0 +1,142 @@
1
+<!DOCTYPE html>
2
+<head>
3
+<title>Lakeside server - overdrivenetworks</title>
4
+<meta name="viewport" content="width=device-width, initial-scale=1">
5
+<link rel="icon" href="favicon.ico" type="image/ico">
6
+
7
+<link href="https://fonts.googleapis.com/css?family=Ranga" rel="stylesheet">
8
+<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">
9
+<style>
10
+body {
11
+    text-align: center;
12
+    margin-top: 5%;
13
+    /*
14
+    background-image: url("Lakeside.png");
15
+    background-repeat: no-repeat;
16
+    background-size: cover;
17
+    */
18
+    background-color: #050505;
19
+
20
+    color: white;
21
+    font-family: sans-serif;
22
+    font-size: large;
23
+}
24
+
25
+body, html {
26
+    width: 100%;
27
+    height: 100%;
28
+    overflow: hidden;
29
+}
30
+
31
+.main {
32
+    z-index: 1;
33
+    position: sticky;
34
+    display: block;
35
+}
36
+
37
+h1 {
38
+    font-family: Ranga, sans-serif;
39
+    font-weight: normal;
40
+    margin: 0;
41
+    font-size: 350%;
42
+}
43
+
44
+a {
45
+    color: lightblue;
46
+}
47
+a:hover {
48
+    color: #cee7ef;
49
+}
50
+
51
+a:visited {
52
+    color: pink;
53
+}
54
+a:visited:hover {
55
+    color: #ffd6dd;
56
+}
57
+
58
+#canvas {
59
+    position: fixed;
60
+    top: 0;
61
+    left: 0;
62
+    width: 100%;
63
+    height: 100%;
64
+    z-index: 0;
65
+    cursor: pointer;
66
+}
67
+
68
+</style>
69
+
70
+<script>
71
+
72
+function randInt(min, max) {
73
+  return Math.floor(Math.random() * (max - min)) + min;
74
+}
75
+
76
+var STEP_SIZE = 20;
77
+var RECT_HEIGHT = 10;
78
+var SHAKE_MAX = 20;
79
+var START_OFFSET = 0.6;
80
+
81
+function makeHill(ctx, width, height, color) {
82
+    ctx.strokeStyle = ctx.fillStyle = color;
83
+    ctx.beginPath();
84
+    ctx.moveTo(0, height * START_OFFSET);
85
+
86
+    var j = height * START_OFFSET;
87
+    var i = 0;
88
+    for (; i < (width+STEP_SIZE)/2; i+=STEP_SIZE) {
89
+        j += randInt(-SHAKE_MAX, SHAKE_MAX)
90
+        ctx.lineTo(i, j);
91
+    }
92
+    for (; i < (width+STEP_SIZE) && j <= height; i+=STEP_SIZE) {
93
+        j += randInt(0, SHAKE_MAX)
94
+        ctx.lineTo(i, j);
95
+    }
96
+    // include bottom left, bottom right pts
97
+    ctx.lineTo(width, height);
98
+    ctx.lineTo(0, height);
99
+    ctx.closePath();
100
+    ctx.fill();
101
+}
102
+
103
+function makeSea(ctx, width, height, color) {
104
+    ctx.strokeStyle = ctx.fillStyle = color;
105
+    ctx.beginPath();
106
+    var sea_offset_start = randInt(60, 80) / 100;
107
+    var sea_offset_end = sea_offset_start + (randInt(-5, 5) / 100);
108
+    ctx.moveTo(0, height * sea_offset_start);
109
+    ctx.lineTo(width, height * sea_offset_end);
110
+    ctx.lineTo(width, height);
111
+    ctx.lineTo(0, height);
112
+    ctx.closePath();
113
+    ctx.fill();
114
+}
115
+
116
+function draw() {
117
+    canvas = document.getElementById("canvas");
118
+    // resize as needed
119
+    var width = canvas.clientWidth;
120
+    var height = canvas.clientHeight;
121
+    canvas.width = width;
122
+    canvas.height = height;
123
+
124
+    if (canvas.getContext) {
125
+        var ctx = canvas.getContext('2d');
126
+        makeSea(ctx, width, height, 'blue');
127
+        makeHill(ctx, width, height, 'goldenrod');
128
+    }
129
+}
130
+</script>
131
+</head>
132
+
133
+<body onload="draw();" onresize="draw()";>
134
+<canvas id="canvas" onclick="draw()";></canvas>
135
+
136
+<div class="main">
137
+    <h1>Lakeside server</h1>
138
+    <p><i class="fa fa-globe-w" aria-hidden="true"></i> Chicago, Illinois</a></p>
139
+    <p><i class="fa fa-building" aria-hidden="true"></i> <a href="https://hosthatch.com/">HostHatch</a></p>
140
+</div>
141
+</body>
142
+</html>

Loading…
Cancel
Save