index.php 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <!doctype html>
  2. <html <?php language_attributes(); ?>>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <?php wp_head(); ?>
  7. <style>
  8. span[class^="dot-"]{
  9. opacity: 0;
  10. }
  11. .dot-one{
  12. animation: dot-one 2s infinite linear
  13. }
  14. .dot-two{
  15. animation: dot-two 2s infinite linear
  16. }
  17. .dot-three{
  18. animation: dot-three 2s infinite linear
  19. }
  20. @keyframes dot-one{
  21. 0%{
  22. opacity: 0;
  23. }
  24. 15%{
  25. opacity: 0;
  26. }
  27. 25%{
  28. opacity: 1;
  29. }
  30. 100%{
  31. opacity: 1;
  32. }
  33. }
  34. @keyframes dot-two{
  35. 0%{
  36. opacity: 0;
  37. }
  38. 25%{
  39. opacity: 0;
  40. }
  41. 50%{
  42. opacity: 1;
  43. }
  44. 100%{
  45. opacity: 1;
  46. }
  47. }
  48. @keyframes dot-three{
  49. 0%{
  50. opacity: 0;
  51. }
  52. 50%{
  53. opacity: 0;
  54. }
  55. 75%{
  56. opacity: 1;
  57. }
  58. 100%{
  59. opacity: 1;
  60. }
  61. }
  62. </style>
  63. </head>
  64. <body <?php body_class(); ?> style="background-color: #010d19;">
  65. <?php wp_body_open(); ?>
  66. <?php do_action('get_header'); ?>
  67. <div id="app" class="banner bg-jlg-dark-blue text-jlg-white font-authentic flex w-full flex-col justify-center items-center" style="opacity: 0; transition: opacity 0.2s ease-out;">
  68. <?php echo view(app('sage.view'), app('sage.data'))->render(); ?>
  69. </div>
  70. <div id="loading" style="
  71. width: 100vw;
  72. height: 100vh;
  73. background-color: #010d19;
  74. z-index: 9999;
  75. position: fixed;
  76. top: 0;
  77. left: 0;
  78. display: flex;
  79. justify-content: center;
  80. align-items: center;
  81. font-family: sans-serif;
  82. color: white;
  83. opacity: 1;
  84. transition: opacity 0.2s ease-out;
  85. ">
  86. <p>
  87. Chargement
  88. <span class="dot-one">.</span>
  89. <span class="dot-two">.</span>
  90. <span class="dot-three">.</span>
  91. </p>
  92. </div>
  93. <script>
  94. document.addEventListener('DOMContentLoaded', function () {
  95. }, false);
  96. </script>
  97. <?php do_action('get_footer'); ?>
  98. <?php wp_footer(); ?>
  99. </body>
  100. </html>