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