index.templ 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. package web
  2. import (
  3. "fmt"
  4. "github.com/TecharoHQ/anubis"
  5. "github.com/TecharoHQ/anubis/lib/config"
  6. "github.com/TecharoHQ/anubis/lib/localization"
  7. "github.com/TecharoHQ/anubis/xess"
  8. "github.com/google/uuid"
  9. )
  10. templ base(title string, body templ.Component, impressum *config.Impressum, challenge any, ogTags map[string]string, localizer *localization.SimpleLocalizer) {
  11. <!DOCTYPE html>
  12. <html lang={ localizer.GetLang() }>
  13. <head>
  14. <title>{ title }</title>
  15. <link rel="stylesheet" href={ anubis.BasePrefix + xess.URL }/>
  16. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  17. <meta name="robots" content="noindex,nofollow"/>
  18. for key, value := range ogTags {
  19. <meta property={ key } content={ value }/>
  20. }
  21. <style>
  22. body,
  23. html {
  24. height: 100%;
  25. display: flex;
  26. justify-content: center;
  27. align-items: center;
  28. margin-left: auto;
  29. margin-right: auto;
  30. }
  31. .centered-div {
  32. text-align: center;
  33. }
  34. #status {
  35. font-variant-numeric: tabular-nums;
  36. }
  37. #progress {
  38. display: none;
  39. width: 90%;
  40. width: min(20rem, 90%);
  41. height: 2rem;
  42. border-radius: 1rem;
  43. overflow: hidden;
  44. margin: 1rem 0 2rem;
  45. outline-offset: 2px;
  46. outline: #b16286 solid 4px;
  47. }
  48. .bar-inner {
  49. background-color: #b16286;
  50. height: 100%;
  51. width: 0;
  52. transition: width 0.25s ease-in;
  53. }
  54. </style>
  55. @templ.JSONScript("anubis_version", anubis.Version)
  56. @templ.JSONScript("anubis_challenge", challenge)
  57. @templ.JSONScript("anubis_base_prefix", anubis.BasePrefix)
  58. @templ.JSONScript("anubis_public_url", anubis.PublicUrl)
  59. </head>
  60. <body id="top">
  61. @honeypotLink(anubis.BasePrefix + fmt.Sprintf("%shoneypot/%s/init", anubis.APIPrefix, uuid.NewString()))
  62. <main>
  63. <h1 id="title" class="centered-div">{ title }</h1>
  64. @body
  65. <footer>
  66. <div class="centered-div">
  67. <p>
  68. { localizer.T("protected_by") } <a href="https://github.com/TecharoHQ/anubis">Anubis</a> { localizer.T("protected_from") } <a
  69. href="https://techaro.lol"
  70. >Techaro</a>. { localizer.T("made_with") }.
  71. </p>
  72. <p>{ localizer.T("mascot_design") } <a href="https://bsky.app/profile/celphase.bsky.social">{ localizer.T("celphase") }</a>.</p>
  73. if impressum != nil {
  74. <p>
  75. @templ.Raw(impressum.Footer)
  76. -- <a href={ templ.SafeURL(anubis.BasePrefix + fmt.Sprintf("%simprint", anubis.APIPrefix)) }>Imprint</a>
  77. </p>
  78. }
  79. <p>{ localizer.T("version_info") } <code>{ anubis.Version }</code>.</p>
  80. </div>
  81. </footer>
  82. </main>
  83. </body>
  84. </html>
  85. }
  86. templ errorPage(message, mail, code string, localizer *localization.SimpleLocalizer) {
  87. <div class="centered-div">
  88. <img id="image" alt="Sad Anubis" style="width:100%;max-width:256px;" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/reject.webp?cacheBuster=" + anubis.Version }/>
  89. <p>{ message }.</p>
  90. if code != "" {
  91. <code><pre>{ code }</pre></code>
  92. }
  93. if mail != "" {
  94. <p>
  95. <a href="/">{ localizer.T("go_home") }</a> { localizer.T("contact_webmaster") }
  96. <a href={ "mailto:" + templ.SafeURL(mail) }>
  97. { mail }
  98. </a>
  99. </p>
  100. } else {
  101. <p><a href="/">{ localizer.T("go_home") }</a></p>
  102. }
  103. </div>
  104. }
  105. templ StaticHappy(localizer *localization.SimpleLocalizer) {
  106. <div class="centered-div">
  107. <img
  108. style="display:none;"
  109. style="width:100%;max-width:256px;"
  110. src={ "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" +
  111. anubis.Version }
  112. />
  113. <p>{ localizer.T("static_check_endpoint") }</p>
  114. </div>
  115. }
  116. templ bench(localizer *localization.SimpleLocalizer) {
  117. <div style="height:20rem;display:flex">
  118. <table style="margin-top:1rem;display:grid;grid-template:auto 1fr/auto auto;gap:0 0.5rem">
  119. <thead
  120. style="border-bottom:1px solid black;padding:0.25rem 0;display:grid;grid-template:1fr/subgrid;grid-column:1/-1"
  121. >
  122. <tr id="table-header" style="display:contents">
  123. <th style="width:4.5rem">{ localizer.T("time") }</th>
  124. <th style="width:4rem">{ localizer.T("iters") }</th>
  125. </tr>
  126. <tr id="table-header-compare" style="display:none">
  127. <th style="width:4.5rem">{ localizer.T("time_a") }</th>
  128. <th style="width:4rem">{ localizer.T("iters_a") }</th>
  129. <th style="width:4.5rem">{ localizer.T("time_b") }</th>
  130. <th style="width:4rem">{ localizer.T("iters_b") }</th>
  131. </tr>
  132. </thead>
  133. <tbody
  134. id="results"
  135. style="padding-top:0.25rem;display:grid;grid-template-columns:subgrid;grid-auto-rows:min-content;grid-column:1/-1;row-gap:0.25rem;overflow-y:auto;font-variant-numeric:tabular-nums"
  136. ></tbody>
  137. </table>
  138. <div class="centered-div">
  139. <img id="image" style="width:100%;max-width:256px;" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" + anubis.Version }/>
  140. <p id="status" style="max-width:256px">{ localizer.T("loading") }</p>
  141. <script async type="module" src={ anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/js/bench.mjs?cacheBuster=" + anubis.Version }></script>
  142. <div id="sparkline"></div>
  143. <noscript>
  144. <p>{ localizer.T("benchmark_requires_js") }</p>
  145. </noscript>
  146. </div>
  147. </div>
  148. <form id="controls" style="position:fixed;top:0.5rem;right:0.5rem">
  149. <div style="display:flex;justify-content:end">
  150. <label for="difficulty-input" style="margin-right:0.5rem">{ localizer.T("difficulty") }</label>
  151. <input id="difficulty-input" type="number" name="difficulty" style="width:3rem"/>
  152. </div>
  153. <div style="margin-top:0.25rem;display:flex;justify-content:end">
  154. <label for="algorithm-select" style="margin-right:0.5rem">{ localizer.T("algorithm") }</label>
  155. <select id="algorithm-select" name="algorithm"></select>
  156. </div>
  157. <div style="margin-top:0.25rem;display:flex;justify-content:end">
  158. <label for="compare-select" style="margin-right:0.5rem">{ localizer.T("compare") }</label>
  159. <select id="compare-select" name="compare">
  160. <option value="NONE">-</option>
  161. </select>
  162. </div>
  163. </form>
  164. }