index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <!DOCTYPE html>
  2. <head>
  3. <title>Apiote: Contact</title>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <script src="/js/jquery.min.js"
  7. integrity="sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg=="
  8. crossorigin="anonymous"></script>
  9. <script src="/js/openpgp.min.js"
  10. integrity="sha512-CMshKwcY9hEAPeQNNt1dV5atD1xp8jZZmyNmnvf8u6T06IARhQNi6ZgSU8XxRR/9NAN4oLkspsnOFX3/4uO5hA=="
  11. crossorigin="anonymous"></script>
  12. <script src="/js/js-yaml.min.js"
  13. integrity="sha512-55KnQjtPrGi70932464nQmzH0PA64NirgYFQiT019lp2Fo7IvNEtaR4e8VUjZ4OokOT3JXcFNZn+1Sy/rcEcNw=="
  14. crossorigin="anonymous"></script>
  15. <link rel="stylesheet" href="/styles/material-components-web.css"
  16. integrity="sha512-xKSgTutWqX2F22Uxywtig03sHCUxl4pJw2dzeIxH1EDvbEwhg5M1/KBUvrxNDiTe5HSjHRLdaW6XBhuYawROQw=="
  17. crossorigin="anonymous">
  18. <link rel="stylesheet" href="/styles/fira.min.css"
  19. integrity="sha512-jEf2ipTyK37+rvwmgG9886e/Joq2bqciYEXUAZyHmx86yoLxyhX2DO/w7TvykReRK4yOJteokVn1DLHytAsvzQ=="
  20. crossorigin="anonymous">
  21. <link rel="stylesheet" href="/styles/plex.min.css"
  22. integrity="sha512-3MJpT2GuM1SLjy9T9gSOWBl3cWJpuRABFapfiubH6XuK2jLawq8h5h3cSjyU2Ezc9attdv7jO4TpSpREPA6eHQ=="
  23. crossorigin="anonymous">
  24. <link rel="stylesheet" href="/styles/material-icons.min.css"
  25. integrity="sha512-0oMXNxqi/ASlhfm2fCxg2wCl8Wo8HgL7fOgNOIz8P3nwbIe/VBeaC0h8lVz1NH3T4litHeGjshwUZx790RqJqQ=="
  26. crossorigin="anonymous">
  27. <link rel="stylesheet" href="/styles/main.css"
  28. integrity="sha512-djKhjK/Sdfon9o4t/hrscsou5arv5NzRQHRvLf7A+fe+5AzHJR82tjhkXd/ZPu0JssOd6W3N19nD0ntST+4kuw=="
  29. crossorigin="anonymous">
  30. <link rel="stylesheet" href="/styles/form.css"
  31. integrity="sha512-kLO67TyPVKw8e076G3iUrGFN7ivuVQbvHzpJJ5inM52q2Ql+EnLL0O5nE+xrZQvS0in+CHS/MaylnDJT6YwNGA=="
  32. crossorigin="anonymous">
  33. <meta name="theme-color" content="#911f1b">
  34. <link rel="shortcut icon" href="/img/favicon/favicon.ico">
  35. <link rel="icon" sizes="16x16 32x32 64x64" href="/img/favicon/favicon.ico">
  36. <link rel="icon" type="image/png" sizes="196x196" href="/img/favicon/favicon-192.png">
  37. <link rel="icon" type="image/png" sizes="160x160" href="/img/favicon/favicon-160.png">
  38. <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96.png">
  39. <link rel="icon" type="image/png" sizes="64x64" href="/img/favicon/favicon-64.png">
  40. <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png">
  41. <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png">
  42. <link rel="apple-touch-icon" href="/img/favicon/favicon-57.png">
  43. <link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/favicon-114.png">
  44. <link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/favicon-72.png">
  45. <link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/favicon-144.png">
  46. <link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/favicon-60.png">
  47. <link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/favicon-120.png">
  48. <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/favicon-76.png">
  49. <link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/favicon-152.png">
  50. <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/favicon-180.png">
  51. <meta name="msapplication-TileColor" content="#911f1b">
  52. <meta name="msapplication-TileImage" content="/img/favicon/favicon-144.png">
  53. <meta name="msapplication-config" content="/img/favicon/browserconfig.xml">
  54. </head>
  55. <body>
  56. <div class="drawer-container-flex">
  57. <aside class="mdc-drawer mdc-drawer--permanent mdc-typography">
  58. <nav class="mdc-drawer__drawer">
  59. <header class="mdc-drawer__header">
  60. <div class="mdc-drawer__header-content">
  61. Where now?
  62. </div>
  63. </header>
  64. <nav class="mdc-drawer__content mdc-list">
  65. <a class="mdc-list-item" href="/">
  66. <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>Home
  67. </a>
  68. <a class="mdc-list-item" href="/about">
  69. <i class="material-icons mdc-list-item__graphic" aria-hidden="true">person</i>About
  70. </a>
  71. <a class="mdc-list-item" href="/donate">
  72. <i class="material-icons mdc-list-item__graphic" aria-hidden="true">attach_money</i>Donate
  73. </a>
  74. <a class="mdc-list-item" href="/manifestos/">
  75. <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>Manifestos
  76. </a>
  77. <!-- tod padding
  78. <nav class="mdc-drawer__content mdc-list">
  79. <a class="mdc-list-item" href="/manifestos/privacy">
  80. <i class="material-icons mdc-list-item__graphic" aria-hidden="true"></i>Privacy
  81. </a>
  82. </nav>
  83. -->
  84. <a class="mdc-list-item" href="/programs/">
  85. <i class="material-icons mdc-list-item__graphic" aria-hidden="true">devices</i>Programs
  86. </a>
  87. <a class="mdc-list-item" href="/credits/">
  88. <i class="material-icons mdc-list-item__graphic" aria-hidden="true">copyright</i>Credits and legal
  89. </a>
  90. <a class="mdc-list-item mdc-list-item--activated" href="/contact/">
  91. <i class="material-icons mdc-list-item__graphic" aria-hidden="true">contact_support</i>Contact
  92. </a>
  93. <div class="drawer-bottom">
  94. <div class="mdc-drawer__toolbar-spacer"></div>
  95. <a href="/about/js.html" data-jslicense="1">
  96. JavaScript license information
  97. </a>
  98. </div>
  99. </nav>
  100. </nav>
  101. </aside>
  102. <header class="mdc-top-app-bar">
  103. <div class="mdc-top-app-bar__row">
  104. <section class="top-bar-menu-button mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
  105. <i class="material-icons mdc-top-app-bar__navigation-icon">menu</i>
  106. <span class="mdc-top-app-bar__title">Contact</span>
  107. </section>
  108. </div>
  109. </header>
  110. <main class="mdc-top-app-bar--fixed-adjust">
  111. <div class="mdc-layout-grid">
  112. <div class="mdc-layout-grid__inner">
  113. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1-tablet mdc-layout-grid__cell--span-1-mobile mdc-layout-grid__cell--span-3-desktop">
  114. </div>
  115. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10-tablet mdc-layout-grid__cell--span-10-mobile mdc-layout-grid__cell--span-6-desktop">
  116. <div class="mdc-card no-js-card">
  117. <h2>JavaScript is off</h2>
  118. <p>Encryption requires that JavaScript be on. It’s <a href="https://notabug.org/apiote/website">Software Libre.</a></p>
  119. </div>
  120. <div class="mdc-card contact-card">
  121. <div class="mdc-text-field mdc-text-field--with-leading-icon">
  122. <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">person</i>
  123. <input type="text" id="name" class="mdc-text-field__input">
  124. <label class="mdc-floating-label" for="name">Name</label>
  125. <div class="mdc-line-ripple"></div>
  126. </div>
  127. <div class="mdc-text-field mdc-text-field--with-leading-icon">
  128. <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">email</i>
  129. <input type="text" id="email" class="mdc-text-field__input">
  130. <label class="mdc-floating-label" for="email">Email address</label>
  131. <div class="mdc-line-ripple"></div>
  132. </div>
  133. <div class="mdc-text-field mdc-text-field--textarea">
  134. <textarea id="message" class="mdc-text-field__input" required rows="8" cols="80"></textarea>
  135. <label for="message" class="mdc-floating-label">Message</label>
  136. </div>
  137. <div class="bots mdc-text-field">
  138. <input type="text" id="hidden" class="mdc-text-field__input">
  139. <label for="hidden" class="mdc-floating-label">Leave this blank</label>
  140. <div class="mdc-line-ripple"></div>
  141. </div>
  142. <div class='do-button'>
  143. <button class="mdc-button mdc-button--raised">
  144. <i class="material-icons mdc-button__icon" aria-hidden="true">send</i>
  145. send
  146. </button>
  147. </div>
  148. <hr class="note-separator"/>
  149. <p class="note">While name and email address are not required, mind that I won’t be able to respond if You don’t provide them</p>
  150. <p class="note">All of the fields are encrypted locally with my public key so only whoever holds my private key (hopefully, that’s me) will be able to decrypt Your name, email address, and the message.</p>
  151. </div>
  152. <div class="mdc-card contact-card-sent">
  153. <h1>Thank You!</h1>
  154. <h2>Your message has been sent</h2>
  155. </div>
  156. </div>
  157. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1-tablet mdc-layout-grid__cell--span-1-mobile mdc-layout-grid__cell--span-3-desktop">
  158. </div>
  159. </div>
  160. </div>
  161. <div class="mdc-snackbar"
  162. aria-live="assertive"
  163. aria-atomic="true"
  164. aria-hidden="true">
  165. <div class="mdc-snackbar__text"></div>
  166. <div class="mdc-snackbar__action-wrapper" style="display: none">
  167. <button type="button" class="mdc-snackbar__action-button"></button>
  168. </div>
  169. </div>
  170. </main>
  171. </div>
  172. <script src="/js/material-components-web.js"
  173. integrity="sha512-fzmFt2MbZhS3Cwv9gSX+jRqpfUdaKupP0WbJyaK09Och9eMm8n1ol1fnh8EEJ1sH5HzG16etbpejWBEMvXV5ow=="
  174. crossorigin="anonymous"></script>
  175. <script>
  176. // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt GNU-AGPL-v3.0
  177. $('.no-js-card').css('display', 'none')
  178. $('.contact-card').css('display', 'block')
  179. window.mdc.autoInit();
  180. const topAppBarElement = document.querySelector('.mdc-top-app-bar');
  181. let topAppBar = new mdc.topAppBar.MDCTopAppBar(topAppBarElement);
  182. textFields = document.querySelectorAll('.mdc-text-field')
  183. for (i in textFields) {
  184. if (isNaN(i)) {
  185. continue;
  186. }
  187. new mdc.textField.MDCTextField(textFields[i]);
  188. }
  189. new mdc.ripple.MDCRipple(document.querySelector('.mdc-button'));
  190. $('.top-bar-menu-button').css('display', 'initial');
  191. $('.mdc-drawer--permanent').removeClass("mdc-drawer--permanent").addClass("mdc-drawer--temporary");
  192. $('.drawer-bottom').css('width', '25%');
  193. let drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
  194. document.querySelector('.mdc-top-app-bar__navigation-icon').addEventListener('click', () => drawer.open = true);
  195. // @license-end
  196. </script>
  197. </body>
  198. </html>