Mildly interesting splash sites for my servers.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 3.2KB

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