index.php 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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. <div id="header">
  16. <h1>Hello</h1>
  17. </div>
  18. <div id="home" class="container">
  19. <div id="download" class="grid">
  20. <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>
  21. <div><span role="button" data-tooltip="Formulaire de contact"><span class="iconify" data-icon="mdi-contact"></span></span></div>
  22. <div><span role="button" data-tooltip="Télécharger les CV en CMD"><span class="iconify" data-icon="mdi-console"></span></span></div>
  23. </div>
  24. <div class="window">
  25. <span id="close-fs" role="button" class="hide" onclick="fullscreen()">X</span>
  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. //fullscreen();
  55. function fullscreen() {
  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. } else {
  62. $('#' + windowMode).one('transitionend', function() {
  63. $('#' + windowMode).css('top', '');
  64. $('#' + windowMode).css('left', '');
  65. $('#' + windowMode).css('position', '');
  66. });
  67. }
  68. $('#' + windowMode).toggleClass('fullscreen');
  69. $('#close-fs').toggleClass('hide');
  70. }
  71. function show() {
  72. if ($('#' + windowMode).hasClass('pasla')) {
  73. $('#' + windowMode).css('height', '');
  74. } else {
  75. $('#' + windowMode).css('height', '0');
  76. }
  77. $('#' + windowMode).toggleClass('pasla');
  78. }
  79. function remove() {
  80. $('#' + windowMode).css('height', '0');
  81. setTimeout(() => {
  82. $('#konami-helper').removeClass('hide');
  83. }, 74);
  84. setTimeout(() => {
  85. $('.window').remove();
  86. }, 148);
  87. }
  88. </script>
  89. </body>
  90. </html>