index.php 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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="hide"><span class="iconify" data-icon="mdi-reload"></span>&nbsp;+&nbsp;&uarr;&uarr;&darr;&darr;&larr;&rarr;&larr;&rarr;BA</div>
  46. </div>
  47. <div>
  48. Coucou
  49. </div>
  50. <script src="js/cmd.js"></script>
  51. <script src="js/konami.js"></script>
  52. <script src="js/loaded.js"></script>
  53. <script type="text/javascript">
  54. function fullscreen(closeBtn = true) {
  55. const pos = $('#' + windowMode).position();
  56. if (!$('#' + windowMode).hasClass('fullscreen')) {
  57. $('#' + windowMode).css('top', Math.trunc(pos.top) + 'px');
  58. $('#' + windowMode).css('left', Math.trunc(pos.left) + 'px');
  59. $('#' + windowMode).css('position', 'fixed');
  60. localStorage.setItem('show-page', false);
  61. } else {
  62. $('#' + windowMode).one('transitionend', function() {
  63. $('#' + windowMode).css('top', '');
  64. $('#' + windowMode).css('left', '');
  65. $('#' + windowMode).css('position', '');
  66. });
  67. localStorage.setItem('show-page', true);
  68. }
  69. $('#' + windowMode).toggleClass('fullscreen');
  70. if (closeBtn) $('#close-fs').toggleClass('hide');
  71. }
  72. function show() {
  73. if ($('#' + windowMode).hasClass('pasla')) {
  74. $('#' + windowMode).css('height', '');
  75. } else {
  76. $('#' + windowMode).css('height', '0');
  77. }
  78. $('#' + windowMode).toggleClass('pasla');
  79. }
  80. function remove() {
  81. $('#' + windowMode).css('height', '0');
  82. setTimeout(() => {
  83. $('#konami-helper').removeClass('hide');
  84. }, 74);
  85. setTimeout(() => {
  86. $('.window').remove();
  87. }, 148);
  88. }
  89. </script>
  90. </body>
  91. </html>