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

Open in your IDE?
  1. <style>
  2. #expirationDate{
  3. margin-top:2vw;
  4. font-family: 'Noto Sans CJK TC';
  5. background-image:url('{{ asset('images/expirationdate_bg.png') }}');
  6. background-size: 100%;
  7. background-position: top;
  8. background-repeat: no-repeat;
  9. background-color: transparent;
  10. width: 95%;
  11. height: 24vw;
  12. margin: auto;
  13. padding-top: 11vw;
  14. font-size: 3vw;
  15. }
  16. #mission {
  17. background-image:url('{{ asset('images/mission_bg.png') }}');
  18. background-size: 95%;
  19. background-position: top;
  20. background-repeat: no-repeat;
  21. width: 95%;
  22. height: 150vw;
  23. position: absolute;
  24. margin: auto;
  25. margin-bottom: 5vw;
  26. }
  27. #missionList .missionItem,#missionBonus .missionItem {
  28. display: flex;
  29. width: 90%;
  30. position: relative;
  31. margin: auto;
  32. margin-bottom: 8vw ;
  33. justify-content: space-around;
  34. }
  36. #missionList img.missionBtn, #missionBonus img.missionBtn{
  37. width: 100%
  38. }
  39. #mission .missionDuration{
  40. margin-top: 13vw;
  41. font-family: 'Noto Sans CJK TC';
  42. color: white;
  43. font-size: 3vw;
  44. margin-bottom: 36vw;
  45. }
  46. .missionItem .bonus-date,.missionItem .mission-date{
  47. color: #FFFF00;
  48. font-family: 'Noto Sans CJK TC';
  49. font-weight: 600;
  50. font-size: 4vw;
  51. margin-bottom: 0;
  52. }
  53. .missionItem .bonus-body,.missionItem .mission-body{
  54. font-size: 3.5vw;
  55. font-family: 'Noto Sans CJK TC';
  56. margin-bottom: 0;
  57. align-content: center;
  58. }
  59. .missionItem .bonus-btn{
  60. display: flex;
  61. align-items: center;
  62. justify-content: center;
  63. }
  64. .missionItem .mission-btn{
  65. display: flex;
  66. align-items: center;
  67. justify-content: center;
  68. padding:0;
  69. background-color: transparent;
  70. border: none;
  71. }
  72. @media only screen and (min-width: 700px) {
  73. #expirationDate{
  74. height: 17vw;
  75. padding-top: 7vw;
  76. font-size: 2vw
  77. }
  78. #mission .missionDuration{
  79. margin-top: 9vw;
  80. font-size: 2vw;
  81. margin-bottom: 25vw
  82. }
  83. .missionItem .bonus-date,.missionItem .mission-date{
  84. color: #FFFF00;
  85. font-size: 2.5vw;
  86. margin-bottom: 0;
  87. }
  88. .missionItem .bonus-body,.missionItem .mission-body{
  89. font-size: 2vw;
  90. margin-bottom: 0;
  91. align-content: center;
  92. }
  93. #missionList .missionItem, #missionBonus .missionItem{
  94. margin-bottom: 6vw
  95. }
  96. #mission{
  97. height: 130vw;
  98. }
  99. }
  100. </style>
  101. <script>
  102. function monthlyReMind(){
  103. $.post("{{ path('api_month_mind', {'language': app.request.locale}) }}", {'jwt': jwt },function(){
  104. $('#myModal_mission_start').modal('show');
  105. var myModal_mission_start = $('#myModal_mission_start').offset().top;
  106. var headerOffset = 0; // Adjust this value based on your header height
  107. $('html, body').animate({
  108. scrollTop: myModal_mission_start - headerOffset
  109. }, 500);
  110. })
  111. }
  112. function gotoPage(){
  113. {% if env == 'game' %}
  114. console.log('goto Main Page');
  115. {% else %}
  116. const jsonParams = {
  117. type: "column",
  118. layout: "",
  119. sourceId: "18699"
  120. };
  121. prompt("cmhk://epg/launchPage?jsonParam=" + encodeURIComponent(JSON.stringify(jsonParams)));
  122. {% endif %}
  123. }
  124. </script>
  125. <div id="expirationDate"><p></p></div>
  126. <div id="mission">
  128. <div class="missionDuration">（ 任務期間： <span></span> ）</div>
  129. <div id="missionList"></div>
  130. <div id="missionBonus"></div>
  131. </div>