Pictures!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 1.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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>Slides</title>
  7. <style>
  8. html, body {
  9. margin: 0px;
  10. padding: 0px;
  11. height: 100%;
  12. overflow: hidden;
  13. }
  14. #overlay,
  15. #main {
  16. width: 100%;
  17. height: 100%;
  18. position: absolute;
  19. top: 0px;
  20. left: 0px;
  21. cursor: none;
  22. -moz-user-select: none;
  23. -ms-user-select: none;
  24. -webkit-user-select: none;
  25. user-select: none;
  26. }
  27. #overlay {
  28. z-index: 2;
  29. will-change: opacity;
  30. }
  31. #main {
  32. z-index: 1;
  33. }
  34. #msg {
  35. z-index: 3;
  36. position: absolute;
  37. top: 6px;
  38. right: 6px;
  39. backgrounud: white;
  40. display: none;
  41. font-size: 15px;
  42. }
  43. #msg.active {
  44. display: block;
  45. }
  46. #overlay {
  47. transition: opacity <<transition_time>>s, transform <<transition_time>>s;
  48. opacity: 1;
  49. }
  50. #overlay.hidden {
  51. opacity: 0;
  52. transform: scale(1.1);
  53. }
  54. #hideCursor {
  55. position: absolute;
  56. top: 0px;
  57. left: 0px;
  58. bottom: 0px;
  59. right: 0px;
  60. cursor: none;
  61. z-index: 3;
  62. }
  63. </style>
  64. </head>
  65. <body>
  66. <iframe id="main"></iframe>
  67. <iframe id="overlay"></iframe>
  68. <div id="msg"></div>
  69. <div id="hideCursor"></div>
  70. <script src="/polyfills.js"></script>
  71. <script src="script.js"></script>
  72. </body>
  73. </html>