templates/frontend/default/rule.html.twig line 1

Open in your IDE?
  1. {% extends 'frontend/default/base.html.twig' %}
  3. {% block css %}
  4. <!-- custom css here -->
  5. <style>
  6. .bgbox{
  7. height: 100%;
  8. }
  9. .gamerule {
  10. width: 40%;
  11. }
  13. .btn-group-middle {
  14. position: absolute;
  15. transform: translate(-50%, 0%);
  16. width: 13%;
  17. }
  19. .rule-container {
  20. width: 90%;
  21. overflow-y: scroll;
  22. margin: 0 auto;
  23. height: 86%;
  24. font-size: 11px;
  25. text-align: left;
  26. -webkit-overflow-scrolling: touch;
  27. -webkit-overflow-scrolling: auto;
  28. height: 76%;
  29. margin-top: 2vw;
  30. padding-left: 15px;
  31. padding-right: 15px;
  32. -ms-overflow-style: none;
  33. scrollbar-width: none;
  34. word-break: break-all;
  35. }
  37. .rule-container::-webkit-scrollbar {
  38. display: none;
  39. }
  41. .frame-bg {
  42. position: relative;
  43. height: 68%;
  44. background-repeat: no-repeat;
  45. background-position: 50% 50%;
  46. background-size: 100% 100%;
  47. max-width: 600px;
  48. overflow-x: hidden;
  49. overflow-y: hidden;
  50. margin: 50% auto 0 auto;
  51. width: 90%;
  52. }
  54. .rule-container p, li {
  55. color: #FFFFFF;
  56. list-style-type: decimal;
  57. margin-bottom: 0.5rem;
  58. }
  60. .arrow-container {
  61. display: flex;
  62. justify-content: center;
  63. align-items: center;
  64. width: 100%;
  65. padding-bottom: unset;
  66. position: absolute;
  67. bottom: 7vw;
  68. }
  70. .rule-container a:link, .rule-container a:visited {
  71. /*color: white;*/
  72. color: #FFFFFF;
  73. }
  75. .header p{
  76. color: white;
  77. font-size: 4vw;
  78. text-align: center;
  79. margin: 0;
  80. padding-bottom: 0;
  81. }
  82. @media only screen and (width: 540px) and (height: 720px) {
  83. }
  85. @media only screen and (width: 280px) and (height: 653px) {
  86. }
  88. @media only screen and (min-width: 600px) {
  89. .rule-container {
  90. font-size: 18px;
  91. }
  92. }
  94. </style>
  95. {% endblock %}
  97. {% block javascript %}
  98. <!-- custom javascript here -->
  100. {% endblock %}
  103. {% block body %}
  106. <script>
  107. function gtag_action_ruleread() {
  108. gtag('event', 'Rules Read', {
  109. 'event_category': '{{ custom_data }}',
  110. 'event_label': 'Rules'
  111. });
  112. }
  115. $(function () {
  117. let elem = $('#scroll-container');
  119. if (Math.ceil(elem.innerHeight()) <= elem.prop('scrollHeight')) {
  120. elem.bind('scroll', function () {
  122. if (Math.ceil((elem.scrollTop() + elem.innerHeight())) >= elem.prop('scrollHeight')) {
  124. $('.arrow-container').css({opacity: 0.0});
  125. }
  126. else {
  127. $('.arrow-container').css({opacity: 1});
  128. }
  130. });
  131. }
  132. else {
  133. $('.arrow-container').css({opacity: 0.0});
  134. }
  136. });
  138. let jwt = localStorage.getItem('{{ localStorage_name }}');
  140. $(document).ready(function () {
  141. $("#back").click(function() {
  142. let form = jQuery('<form action="{{ app.request.headers.get('referer') }}" method="post" style="display:none;">' +
  143. '</form>');
  144. jQuery('body').append(form);
  145. form.submit();
  146. });
  148. gtag_action_ruleread();
  149. });
  150. </script>
  152. <div class="container-fluid bgbox" id="bg"
  153. style="background-image:url('{{ asset('images/tnc_bg.png') }}');background-position:0px 0px;">
  154. <div id="back" style="top:10%;right:5%;left:auto">
  155. <img class="gamerule" src="{{ asset('frontend/'~language~'/share/back.png') }}" alt="back" />
  156. </div>
  158. <div class="frame-bg"
  159. style="background-image: url({{ asset('images/tnc_column.png') }});">
  160. <div class="header">
  161. <p class="title">{{ 'Rule.title' | trans }}</p>
  162. <p>{{ 'Rule.subtitle' | trans | raw }}</p>
  163. </div>
  164. <div class="rule-container animated fadeIn" id="scroll-container">
  165. {{ tandc | raw }}
  166. </div>
  167. <div class="arrow-container">
  168. <div class="chevron"></div>
  169. <div class="chevron"></div>
  170. <div class="chevron"></div>
  171. </div>
  172. </div>
  173. </div>
  176. {% endblock %}