refreshing.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'>
  5. <title>Refreshing - Yesod devel</title>
  6. <style>
  7. body {
  8. background: #e6e6e6;
  9. color: #444;
  10. text-shadow: 1px 1px 1px #ffffff;
  11. font-size: 30px;
  12. font-family: georgia, serif;
  13. }
  14. .wrap {
  15. margin: auto;
  16. width: 25em;
  17. }
  18. h1 {
  19. margin-bottom: 0;
  20. }
  21. h2 {
  22. margin-top: 0;
  23. font-size: 1em;
  24. font-style: italic;
  25. color: #546369;
  26. }
  27. header {
  28. margin-top: 1em;
  29. padding-bottom: 0.25em;
  30. border-bottom: 1px solid #ccc;
  31. color: #1a6e8e;
  32. }
  33. footer {
  34. margin-top: 3em;
  35. padding-top: 0.25em;
  36. border-top: 1px solid #ccc;
  37. color: #666;
  38. font-size: 0.8em;
  39. }
  40. .msgs {
  41. font-size: 0.9em;
  42. }
  43. .msgs p {
  44. margin-bottom: 0.5em;
  45. }
  46. .msgs ul {
  47. margin-top: 0;
  48. line-height: 1.7em;
  49. }
  50. .msgs li {
  51. padding-left: 0.5em;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div class="wrap">
  57. <header><small>Yesod Devel</small></header>
  58. <h1>The application isn’t built</h1>
  59. <h2>We’ll keep trying to refresh every second</h2>
  60. <div class="msgs">
  61. <script> document.getElementsByClassName("msgs")[0].style.display = "none"; </script>
  62. <p>Meanwhile, here is a motivational message:</p>
  63. <ul>
  64. <li>You are a beautiful person making a beautiful web site.</li>
  65. <li>Keep going, you’ve nearly fixed the bug!</li>
  66. <li>Check your posture, don’t lean over too much.</li>
  67. <li>Get a glass of water, keep hydrated.</li>
  68. </ul>
  69. </div>
  70. <script>
  71. var msg = document.getElementsByClassName("msgs")[0];
  72. var lis = Array.prototype.slice.call(msg.querySelectorAll("li"));
  73. lis.forEach(function(li){ li.style.display = "none"; });
  74. lis[Math.floor(Math.random() * lis.length)].style.display = "block";
  75. msg.style.display = "block";
  76. </script>
  77. <footer>
  78. <small>
  79. <script>
  80. document.write(new Date())
  81. </script>
  82. </small>
  83. </footer>
  84. </div>
  85. </body>
  86. </html>