popup.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta content="text/html; charset=utf-8"/>
  5. <title title="__MSG_extensionName__">__MSG_extensionName__</title>
  6. <link rel="stylesheet" href="popup.css"/>
  7. <link rel="preconnect" href="https://fonts.googleapis.com"/>
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
  9. <link
  10. href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
  11. rel="stylesheet"
  12. />
  13. </head>
  14. <body>
  15. <center>
  16. <svg width="48" viewBox="0 0 24 24">
  17. <path
  18. d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
  19. fill="red"
  20. />
  21. <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/>
  22. </svg>
  23. <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
  24. __MSG_extensionName__
  25. </h1>
  26. <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__">
  27. __MSG_textDeveloper__
  28. </p>
  29. <button id="link_website" title="__MSG_linkWebsite__">
  30. __MSG_linkWebsite__
  31. </button>
  32. <button style="margin-top: 0.3em; background: #ff0000" id="link_donate" title="__MSG_linkDonate__">
  33. __MSG_linkDonate__
  34. </button>
  35. <button id="link_discord">Discord</button>
  36. <br/>
  37. <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">
  38. __MSG_linkFAQ__
  39. </button>
  40. <button id="link_github">GitHub</button>
  41. <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">
  42. __MSG_linkHelp__
  43. </button>
  44. <br>
  45. <button style="margin-top: 0.3em" id="link_changelog" title="__MSG_linkChangelog__">
  46. __MSG_linkChangelog__
  47. </button>
  48. <br/>
  49. <br/>
  50. <p style="display: none">API Status: <b id="status"></b></p>
  51. <img
  52. id="server-status"
  53. style="display: none; width: 0.75rem; height: 0.75rem"
  54. src="./icons/server.svg"
  55. alt=""
  56. />
  57. <br/>
  58. <br/>
  59. </center>
  60. <!-- top-right -->
  61. <button id="advancedToggle">
  62. <svg
  63. xmlns="http://www.w3.org/2000/svg"
  64. enable-background="new 0 0 24 24"
  65. height="24px"
  66. viewBox="0 0 24 24"
  67. width="24px"
  68. fill="currentColor"
  69. >
  70. <rect fill="none" height="24" width="24"/>
  71. <path
  72. d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"
  73. />
  74. </svg>
  75. </button>
  76. <!-- bottom-right -->
  77. <div id="ext">
  78. <a
  79. href="https://returnyoutubedislike.com/install"
  80. target="_blank"
  81. id="ext-update"
  82. ></a>
  83. <span id="ext-version"></span>
  84. </div>
  85. <!-- dialog box -->
  86. <fieldset id="advancedSettings">
  87. <legend id="advancedLegend" title="__MSG_legendSettings__">
  88. __MSG_legendSettings__
  89. </legend>
  90. <label class="switch" data-hover="__MSG_textSettingsHover__">
  91. <input type="checkbox" id="disable_vote_submission"/>
  92. <span class="slider"/>
  93. <span class="switchLabel" title="__MSG_textSettings__"
  94. >__MSG_textSettings__</span
  95. >
  96. </label>
  97. <br/>
  98. <label class="switch" data-hover="__MSG_textRoundingNumbersHover__">
  99. <input type="checkbox" id="number_round_down"/>
  100. <span class="slider"/>
  101. <span class="switchLabel" title="__MSG_textRoundingNumbers__"
  102. >__MSG_textRoundingNumbers__</span
  103. >
  104. </label>
  105. <br/>
  106. <label class="switch" data-hover="__MSG_textConsistentFormatHover__">
  107. <input type="checkbox" id="number_reformat_likes"/>
  108. <span class="slider"/>
  109. <span class="switchLabel" title="__MSG_textConsistentFormat__"
  110. >__MSG_textConsistentFormat__</span
  111. >
  112. </label>
  113. <br/>
  114. <div class="custom-select">
  115. <label for="number_format">"__MSG_textNumberFormat__"</label>
  116. <select name="number_format" id="number_format">
  117. <option value="compactShort" id="number_format_compactShort"></option>
  118. <option value="compactLong" id="number_format_compactLong"></option>
  119. <option value="standard" id="number_format_standard"></option>
  120. </select>
  121. </div>
  122. <br/>
  123. <div class="custom-select">
  124. <label class="switch" data-hover="__MSG_textColorizeRatioBarHover__">
  125. <input type="checkbox" id="colored_bar"/>
  126. <span class="slider"/>
  127. <span class="switchLabel" title="__MSG_textColorizeRatioBar__"
  128. >__MSG_textColorizeRatioBar__</span
  129. >
  130. </label>
  131. </div>
  132. <label class="switch" data-hover="__MSG_textColorizeThumbsHover__">
  133. <input type="checkbox" id="colored_thumbs"/>
  134. <span class="slider"/>
  135. <span class="switchLabel" title="__MSG_textColorizeThumbs__"
  136. >__MSG_textColorizeThumbs__</span
  137. >
  138. </label>
  139. <br/>
  140. <div class="custom-select">
  141. <label for="color_theme">"__MSG_textColorTheme__"</label>
  142. <select name="color_theme" id="color_theme">
  143. <option value="classic" id="color_theme_classic">"__MSG_textColorTheme1__"</option>
  144. <option value="accessible" id="color_theme_accessible">"__MSG_textColorTheme2__"</option>
  145. <option value="neon" id="color_theme_neon">"__MSG_textColorTheme3__"</option>
  146. </select>
  147. <span
  148. id="color_theme_example_like"
  149. style="
  150. display: inline-block;
  151. vertical-align: text-top;
  152. width: 1em;
  153. height: 1em;
  154. "
  155. >&nbsp;</span
  156. >
  157. <span
  158. id="color_theme_example_dislike"
  159. style="
  160. display: inline-block;
  161. vertical-align: text-top;
  162. width: 1em;
  163. height: 1em;
  164. "
  165. >&nbsp;</span
  166. >
  167. </div>
  168. </fieldset>
  169. </body>
  170. <script src="popup.js"></script>
  171. </html>