index.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Wiki-Bot Settings</title>
  6. <link rel="shortcut icon" href="https://cdn.discordapp.com/avatars/461189216198590464/f69cdc197791aed829882b64f9760dbb.png?size=64">
  7. <meta name="description" content="Wiki-Bot is a bot with the purpose to easily search for and link to wiki pages. Wiki-Bot shows short descriptions and additional info about pages and is able to resolve redirects and follow interwiki links.">
  8. <meta property="og:image" content="https://cdn.discordapp.com/avatars/461189216198590464/f69cdc197791aed829882b64f9760dbb.png?size=1024">
  9. <meta property="og:title" content="Wiki-Bot Settings">
  10. <meta property="og:site_name" content="Wiki-Bot Settings">
  11. <meta itemprop="author" content="MarkusRost">
  12. <style>
  13. html {
  14. height: calc(100% - 48px);
  15. }
  16. body {
  17. font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
  18. text-rendering: optimizeLegibility;
  19. background: #36393f;
  20. color: #dcddde;
  21. position: relative;
  22. min-height: 100%;
  23. margin: 0;
  24. }
  25. a {
  26. text-decoration: none;
  27. color: inherit;
  28. }
  29. .text a {
  30. color: #00b0f4;
  31. }
  32. .text a:hover {
  33. text-decoration: underline;
  34. }
  35. .text {
  36. position: relative;
  37. padding: 8px;
  38. width: calc(100% - 88px);
  39. top: 48px;
  40. left: 72px;
  41. }
  42. .notice {
  43. padding: 5px 10px;
  44. line-height: 1.6;
  45. text-align: center;
  46. margin: 0 auto 1em;
  47. width: fit-content;
  48. background: #200;
  49. border: 2px solid #500;
  50. }
  51. .navbar {
  52. background: #2f3136;
  53. position: fixed;
  54. top: 0;
  55. left: 72px;
  56. right: 0;
  57. display: flex;
  58. align-items: center;
  59. justify-content: space-between;
  60. height: 48px;
  61. padding: 0 0 0 8px;
  62. font-size: 16px;
  63. line-height: 20px;
  64. font-weight: bold;
  65. }
  66. .navbar a {
  67. display: flex;
  68. align-items: center;
  69. height: 100%;
  70. padding-left: 10px;
  71. }
  72. .navbar a:hover {
  73. background: #202225;
  74. }
  75. .navbar .avatar {
  76. width: 32px;
  77. height: 32px;
  78. }
  79. .navbar span {
  80. padding: 0 10px;
  81. }
  82. .sidebar {
  83. background: #202225;
  84. position: absolute;
  85. top: 0;
  86. left: 0;
  87. min-height: calc(100% + 48px);
  88. width: 72px;
  89. display: flex;
  90. }
  91. .guildlist {
  92. padding: 12px 0;
  93. position: relative;
  94. flex: 1 1 auto;
  95. }
  96. .guild {
  97. margin: 0 0 8px;
  98. position: relative;
  99. display: flex;
  100. justify-content: center;
  101. }
  102. .avatar {
  103. border-radius: 50%;
  104. width: 48px;
  105. height: 48px;
  106. display: flex;
  107. align-items: center;
  108. justify-content: center;
  109. font-weight: 500;
  110. line-height: 1.2em;
  111. white-space: nowrap;
  112. overflow: hidden;
  113. color: #dcddde;
  114. font-weight: bold;
  115. }
  116. .navbar a:hover .avatar,
  117. .guild.selected .avatar,
  118. .guild:hover .avatar {
  119. border-radius: 30%;
  120. color: #ffffff;
  121. }
  122. .noicon {
  123. width: 48px;
  124. height: 48px;
  125. background: #36393f;
  126. }
  127. .guild.selected .noicon,
  128. .guild:hover .noicon {
  129. background-color: #7289da;
  130. }
  131. .svg-avatar {
  132. color: #43b581;
  133. background: #36393f;
  134. }
  135. .guild:hover .svg-avatar {
  136. color: #ffffff;
  137. background-color: #43b581;
  138. }
  139. .separator {
  140. height: 2px;
  141. width: 32px;
  142. border-radius: 1px;
  143. background-color: rgba(255,255,255,0.06);;
  144. }
  145. .bar {
  146. position: absolute;
  147. left: 0;
  148. top: 0;
  149. display: block;
  150. width: 8px;
  151. border-radius: 0 4px 4px 0;
  152. margin-left: -4px;
  153. background-color: #ffffff;
  154. }
  155. .guild:hover .bar {
  156. margin-top: 14px;
  157. height: 20px;
  158. }
  159. .guild.selected .bar {
  160. margin-top: 4px;
  161. height: 40px;
  162. }
  163. a[alt]:hover:after {
  164. content: attr(alt);
  165. position: absolute;
  166. background: #000000;
  167. color: #dcddde;
  168. font-weight: bold;
  169. font-size: 90%;
  170. white-space: nowrap;
  171. border-radius: 4px;
  172. padding: 8px;
  173. }
  174. .guild a[alt]:hover:after {
  175. top: 20%;
  176. left: 72px;
  177. }
  178. .navbar a[alt]:hover:after {
  179. top: 48px;
  180. }
  181. </style>
  182. </head>
  183. <body class="settings">
  184. <div class="text">
  185. <replace id="notice">Some text here</replace>
  186. <replace id="text">Some text here</replace>
  187. </div>
  188. <div class="navbar">
  189. <div style="width: 150px;"></div>
  190. <a id="support" href="https://discord.gg/v77RTk5" target="_blank" alt="Support server">
  191. <img class="avatar" src="https://cdn.discordapp.com/avatars/461189216198590464/f69cdc197791aed829882b64f9760dbb.png?size=64" alt="Support server" width="32" height="32">
  192. <span>Support server</span>
  193. </a>
  194. <a id="logout" href="/logout" alt="Logout">
  195. <img class="avatar" src="https://cdn.discordapp.com/avatars/461189216198590464/f69cdc197791aed829882b64f9760dbb.png?size=64" alt="Logout" width="32" height="32">
  196. <span>MarkusRost #1234</span>
  197. </a>
  198. </div>
  199. <div class="sidebar">
  200. <div class="guildlist">
  201. <div class="guild" id="invite">
  202. <div class="bar"></div>
  203. <a href="https://discord.com/oauth2/authorize?client_id=461189216198590464&permissions=939912256&scope=bot" alt="Invite Wiki-Bot">
  204. <div class="avatar svg-avatar">
  205. <svg width="24" height="24" viewBox="0 0 24 24">
  206. <path fill="currentColor" d="M20 11.1111H12.8889V4H11.1111V11.1111H4V12.8889H11.1111V20H12.8889V12.8889H20V11.1111Z"></path>
  207. </svg>
  208. </div>
  209. </a>
  210. </div>
  211. <replace id="guilds">List of guilds here</replace>
  212. <div class="guild">
  213. <div class="separator"></div>
  214. </div>
  215. <div class="guild" id="refresh">
  216. <div class="bar"></div>
  217. <a href="/refresh" alt="Refresh guild list">
  218. <div class="avatar svg-avatar">
  219. <svg width="20" height="23" viewBox="0 1.35 17.3 20" style="overflow: visible;">
  220. <path fill="currentColor" d="M8.6,2.7V0.4c0-0.4-0.4-0.5-0.7-0.3L4.2,3.9C4,4,4,4.3,4.2,4.4l3.7,3.7c0.3,0.3,0.7,0.1,0.7-0.3V5.6c3.4,0,6.1,2.9,5.7,6.4 c-0.3,2.6-2.4,4.8-5.1,5.1c-3.5,0.4-6.4-2.3-6.4-5.7c0-1.1,0.3-2.1,0.8-2.9c0.1-0.2,0.1-0.4-0.1-0.5L2.1,6.5 C1.9,6.3,1.6,6.3,1.5,6.5C0.5,8-0.1,9.8,0,11.8c0.2,4.4,3.8,8.1,8.3,8.2c4.9,0.2,9-3.7,9-8.6C17.3,6.6,13.4,2.7,8.6,2.7z"></path>
  221. </svg>
  222. </div>
  223. </a>
  224. </div>
  225. </div>
  226. </div>
  227. </body>
  228. </html>