index.php 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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. <script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
  12. </head>
  13. <body>
  14. <?= file_get_contents('src/splash.html') ?>
  15. <span id="close-fs" role="button" class="hide" onclick="fullscreen()">X</span>
  16. <div id="header">
  17. <h1>Hello</h1>
  18. </div>
  19. <div id="home" class="container">
  20. <div id="download" class="grid">
  21. <div><span role="button" data-tooltip="Télécharger les CV en PDF"><span class="iconify" data-icon="mdi-file-pdf-box"></span></span></div>
  22. <div><span role="button" data-tooltip="Formulaire de contact"><span class="iconify" data-icon="mdi-contact"></span></span></div>
  23. <div><span role="button" data-tooltip="Télécharger les CV en CMD"><span class="iconify" data-icon="mdi-console"></span></span></div>
  24. </div>
  25. <div class="window">
  26. <div class="window-toolbar">
  27. <div class="window-toolbar-left">
  28. <span class="iconify" data-icon="mdi-console-line"></span>
  29. </div>
  30. <div class="window-toolbar-center">
  31. Loquicom terminal
  32. </div>
  33. <div class="window-toolbar-right">
  34. <span class="window-dot" onclick="show()" style="background:#5AC05A;"></span>
  35. <span class="window-dot" onclick="fullscreen()" style="background:#FDD800;"></span>
  36. <span class="window-dot" onclick="remove()" style="background:#ED594A;"></span>
  37. </div>
  38. </div>
  39. <div id="cmd">
  40. </div>
  41. <div id="pico" class="none">
  42. <iframe src="./src/pico8.html" title="Pico 8 game"></iframe>
  43. </div>
  44. </div>
  45. <div id="konami-helper" class="secret hide"><span class="iconify" data-icon="mdi-reload"></span>&nbsp;+&nbsp;&uarr;&uarr;&darr;&darr;&larr;&rarr;&larr;&rarr;BA</div>
  46. <div id="hint" class="secret hide">Close to the secret</div>
  47. </div>
  48. <div>
  49. Coucou
  50. </div>
  51. <script src="js/cmd.js"></script>
  52. <script src="js/konami.js"></script>
  53. <script src="js/loaded.js"></script>
  54. <script type="text/javascript">
  55. function fullscreen(closeBtn = true) {
  56. const pos = $('#' + windowMode).position();
  57. if (!$('#' + windowMode).hasClass('fullscreen')) {
  58. $('#' + windowMode).css('top', Math.trunc(pos.top) + 'px');
  59. $('#' + windowMode).css('left', Math.trunc(pos.left) + 'px');
  60. $('#' + windowMode).css('position', 'fixed');
  61. localStorage.setItem('show-page', false);
  62. } else {
  63. $('#' + windowMode).one('transitionend', function() {
  64. $('#' + windowMode).css('top', '');
  65. $('#' + windowMode).css('left', '');
  66. $('#' + windowMode).css('position', '');
  67. });
  68. localStorage.setItem('show-page', true);
  69. }
  70. $('#' + windowMode).toggleClass('fullscreen');
  71. if (closeBtn) $('#close-fs').toggleClass('hide');
  72. }
  73. function show() {
  74. if ($('#' + windowMode).hasClass('pasla')) {
  75. $('#' + windowMode).css('height', '');
  76. setTimeout(() => {
  77. $('#hint').addClass('hide');
  78. }, 74);
  79. } else {
  80. $('#' + windowMode).css('height', '0');
  81. setTimeout(() => {
  82. $('#hint').removeClass('hide');
  83. }, 74);
  84. }
  85. $('#' + windowMode).toggleClass('pasla');
  86. }
  87. function remove() {
  88. $('#' + windowMode).css('height', '0');
  89. setTimeout(() => {
  90. $('#hint').addClass('hide');
  91. $('#konami-helper').removeClass('hide');
  92. }, 74);
  93. setTimeout(() => {
  94. $('.window').remove();
  95. }, 148);
  96. }
  97. </script>
  98. </body>
  99. </html>