no_interfaceing.html 4.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <html>
  2. <head>
  3. <title>No Access Interface</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  6. <link rel="stylesheet" href="../../script/semantic/semantic.css">
  7. <script type="application/javascript" src="../../script/jquery.min.js"></script>
  8. <script type="application/javascript" src="../../script/semantic/semantic.js"></script>
  9. <style>
  10. #game{
  11. border: 1px solid black;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <br><br>
  17. <div class="ui text container">
  18. <div class="ui text container">
  19. <div class="ui stackable grid">
  20. <div class="eight wide column" style="margin-top:8rem;">
  21. <h2 class="ui header">
  22. <i class="remove icon"></i>
  23. <div class="content">
  24. Invalid Interface Module
  25. <div class="sub header">No worry, your files are still here.</div>
  26. </div>
  27. </h2>
  28. <div class="ui divider"></div>
  29. <p>
  30. You are seeing this message because the administrator of this system has removed all your interfacing modules.
  31. Please contact technical support and show them this page.
  32. </p>
  33. <br>
  34. </div>
  35. <div class="eight wide column">
  36. <div id="errorpic" class="ui text container">
  37. <img class="ui image" src="../../img/public/errors/no_interface_module.png">
  38. </div>
  39. </div>
  40. </div>
  41. <!--
  42. <div class="ui divider"></div>
  43. <p>In the mean time, have some break and play some snakes?</p>
  44. <div align="center" style="width:100%;">
  45. <canvas width="400" height="400" id="game"></canvas>
  46. </div>
  47. -->
  48. <br><br>
  49. <div class="ui divider"></div>
  50. ERROR: INVALID-INTERFACE-MODULE-SETTINGS
  51. </div>
  52. <script>
  53. //Basic snake game, minified version of https://gist.github.com/straker/ff00b4b49669ad3dec890306d348adc4
  54. //var canvas=document.getElementById("game"),context=canvas.getContext("2d"),grid=16,count=0,snake={x:160,y:160,dx:grid,dy:0,cells:[],maxCells:4},apple={x:320,y:320};function getRandomInt(e,n){return Math.floor(Math.random()*(n-e))+e}function loop(){requestAnimationFrame(loop),++count<4||(count=0,context.clearRect(0,0,canvas.width,canvas.height),snake.x+=snake.dx,snake.y+=snake.dy,snake.x<0?snake.x=canvas.width-grid:snake.x>=canvas.width&&(snake.x=0),snake.y<0?snake.y=canvas.height-grid:snake.y>=canvas.height&&(snake.y=0),snake.cells.unshift({x:snake.x,y:snake.y}),snake.cells.length>snake.maxCells&&snake.cells.pop(),context.fillStyle="#4287f5",context.fillRect(apple.x,apple.y,grid-1,grid-1),context.fillStyle="#cccccc",snake.cells.forEach(function(e,n){context.fillRect(e.x,e.y,grid-1,grid-1),e.x===apple.x&&e.y===apple.y&&(snake.maxCells++,apple.x=getRandomInt(0,25)*grid,apple.y=getRandomInt(0,25)*grid);for(var a=n+1;a<snake.cells.length;a++)e.x===snake.cells[a].x&&e.y===snake.cells[a].y&&(snake.x=160,snake.y=160,snake.cells=[],snake.maxCells=4,snake.dx=grid,snake.dy=0,apple.x=getRandomInt(0,25)*grid,apple.y=getRandomInt(0,25)*grid)}))}document.addEventListener("keydown",function(e){37===e.which&&0===snake.dx?(snake.dx=-grid,snake.dy=0):38===e.which&&0===snake.dy?(snake.dy=-grid,snake.dx=0):39===e.which&&0===snake.dx?(snake.dx=grid,snake.dy=0):40===e.which&&0===snake.dy&&(snake.dy=grid,snake.dx=0)}),requestAnimationFrame(loop);
  55. $(window).on("resize", function(){
  56. if (window.innerHeight > window.innerWidth){
  57. $("#errorpic").attr("align","center");
  58. }else{
  59. $("#errorpic").attr("align","left");
  60. }
  61. })
  62. </script>
  63. </body>
  64. </html>