index.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>Agora Web Client</title>
  6. <link rel="stylesheet" type="text/css" href="css/semantic.min.css">
  7. <!-- <script integrity="sha284-HkipI22XmPfYh/sTVk+3rOcb4Gtfhu5oMP6n/ksrA/VA54SFDBrQcqUfy7+9j5CR%" src="js/webcomponents/webcomponents-loader.js"></script> -->
  8. <script src="http://storage.sakuradesigner.microclimat.com/apps/html5/js/CustomElements.min.js" charset="utf-8"></script>
  9. <script src="js/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="></script>
  10. <script src="js/semantic.min.js"></script>
  11. <script src="js/main.js"></script>
  12. <style media="screen">
  13. @keyframes divide {
  14. from {width: 99vw;}
  15. to {width: 50vw;}
  16. }
  17. body {
  18. overflow: hidden;
  19. }
  20. .sections-row {
  21. display: flex;
  22. width: 150%;
  23. height: inherit;
  24. }
  25. .background {
  26. height: inherit;
  27. background-image: url('assets/backround0.jpg');
  28. background-size: cover;
  29. filter: blur(10px);
  30. }
  31. .division {
  32. animation-name: divide;
  33. animation-duration: 3s;
  34. animation-iteration-count: 1;
  35. animation-timing-function: ease;
  36. width: 50vw;
  37. }
  38. section {
  39. overflow: hidden;
  40. width: 100vw;
  41. height: 100vh;
  42. }
  43. #section2 {
  44. width: 50vw;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div class="sections-row">
  50. <section id="section1">
  51. <div class="background">
  52. <beartek-comps-animated_gradient></beartek-comps-animated_gradient>
  53. </div>
  54. <beartek-comps-loader id="loader"></beartek-comps-loader>
  55. <beartek-comps-enter id="enter" on-click="beartek.agora.client.web.Main._instance.split()" hidden="true"></beartek-comps-enter>
  56. </section>
  57. <section id="section2" hidden="true">
  58. <beartek-comps-login_form submit="beartek.agora.client.web.Main._instance.login(this);"></beartek-comps-login_form>
  59. </section>
  60. </div>
  61. <script>
  62. window.addEventListener('WebComponentsReady', function() {
  63. beartek.agora.client.web.Main.init();
  64. });
  65. </script>
  66. </body>
  67. </html>