index.php 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title></title>
  7. <link rel="stylesheet" type="text/css" href="css/pico.min.css">
  8. <link rel="stylesheet" type="text/css" href="css/style.css">
  9. <link rel="stylesheet" type="text/css" href="css/cmd.min.css">
  10. <script src="js/jquery.min.js"></script>
  11. </head>
  12. <body>
  13. <?= file_get_contents('src/splash.html') ?>
  14. <h1>Hello</h1>
  15. <div class="container">
  16. <div class="window">
  17. <span id="close-fs" role="button" class="hide" onclick="fullscreen()">X</span>
  18. <div class="window-toolbar">
  19. <div class="window-toolbar-left">
  20. <span id="konami-helper">&uarr;&uarr;&darr;&darr;&larr;&rarr;&larr;&rarr;BA</span>
  21. </div>
  22. <div class="window-toolbar-center">
  23. Loquicom terminal
  24. </div>
  25. <div class="window-toolbar-right">
  26. <span class="window-dot" onclick="show()" style="background:#5AC05A;"></span>
  27. <span class="window-dot" onclick="fullscreen()" style="background:#FDD800;"></span>
  28. <span class="window-dot" onclick="remove()" style="background:#ED594A;"></span>
  29. </div>
  30. </div>
  31. <div id="cmd">
  32. </div>
  33. <div id="pico" class="none">
  34. <iframe src="./src/pico8.html" title="Pico 8 game"></iframe>
  35. </div>
  36. </div>
  37. </div>
  38. <script src="js/cmd.js"></script>
  39. <script src="js/konami.js"></script>
  40. <script src="js/loaded.js"></script>
  41. <script type="text/javascript">
  42. //fullscreen();
  43. function fullscreen() {
  44. const pos = $('#' + windowMode).position();
  45. if (!$('#' + windowMode).hasClass('fullscreen')) {
  46. $('#' + windowMode).css('top', Math.trunc(pos.top) + 'px');
  47. $('#' + windowMode).css('left', Math.trunc(pos.left) + 'px');
  48. $('#' + windowMode).css('position', 'fixed');
  49. } else {
  50. $('#' + windowMode).one('transitionend', function() {
  51. $('#' + windowMode).css('top', '');
  52. $('#' + windowMode).css('left', '');
  53. $('#' + windowMode).css('position', '');
  54. });
  55. }
  56. $('#' + windowMode).toggleClass('fullscreen');
  57. $('#close-fs').toggleClass('hide');
  58. }
  59. function show() {
  60. if ($('#' + windowMode).hasClass('pasla')) {
  61. $('#' + windowMode).css('height', '');
  62. } else {
  63. $('#' + windowMode).css('height', '0');
  64. }
  65. $('#' + windowMode).toggleClass('pasla');
  66. }
  67. function remove() {
  68. $('#' + windowMode).css('height', '0');
  69. setTimeout(() => {
  70. $('.window').remove();
  71. }, 148);
  72. }
  73. </script>
  74. </body>
  75. </html>