Monotone Arbeit nervt!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

284 lines
10 KiB

1 year ago
  1. <div id="container">
  2. <!doctype html>
  3. <html lang="{{ "lang_code"|tr(lang) }}">
  4. <head>
  5. <title>{{ "index_title"|tr(lang) }} – {{ "index_description"|tr(lang) }}</title>
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <meta name="description" content="{{ "meta_description"|tr(lang) }}" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon.svg" />
  11. <link rel="stylesheet" href="/assets/index.css?v=1.2" />
  12. <link rel="stylesheet" href="/assets/cloud.css?v=1.0" />
  13. <link rel="stylesheet" href="/assets/digitalcourage.css" />
  14. <link rel="stylesheet" href="/assets/bootstrap.min.css" />
  15. <style>
  16. .break {
  17. flex-basis: 100%;
  18. height: 0;
  19. }
  20. .grid-container {
  21. display: grid;
  22. grid-template-columns: auto auto;
  23. grid-gap: 5vw;
  24. }
  25. .grid-container2 {
  26. display: grid;
  27. grid-template-columns: auto auto auto;
  28. width: 532px;
  29. grid-gap: 35px;
  30. }
  31. @media only screen and (max-width: 768px) {
  32. /* For mobile phones: */
  33. [class*="grid-container"] {
  34. grid-template-columns: auto;
  35. max-width: 100%;
  36. justify-content: center;
  37. }
  38. [class*="grid-container2"] {
  39. grid-template-columns: auto;
  40. max-width: 100%;
  41. justify-content: center;
  42. grid-gap: 20px;
  43. }
  44. [class*="item1"] {
  45. grid-template-columns: auto;
  46. max-width: 100%;
  47. align-items: center;
  48. width: 80vw;
  49. }
  50. [class*="item2"] {
  51. grid-template-columns: auto;
  52. max-width: 100%;
  53. align-items: center;
  54. width: 80vw;
  55. }
  56. }
  57. .div_120 {
  58. flex-basis: 100%;
  59. height: 120px;
  60. }
  61. .div_60 {
  62. flex-basis: 100%;
  63. height: 60px;
  64. }
  65. .div_45 {
  66. flex-basis: 100%;
  67. height: 45px;
  68. }
  69. .div_35 {
  70. flex-basis: 100%;
  71. height: 35px;
  72. }
  73. .div_25 {
  74. flex-basis: 100%;
  75. height: 25px;
  76. }
  77. .div_10 {
  78. flex-basis: 100%;
  79. height: 10px;
  80. }
  81. .h3 {
  82. font-size: 20pt;
  83. }
  84. h2 {
  85. font-size: 30pt;
  86. }
  87. .a1 {
  88. font-size: 20pt;
  89. }
  90. p {
  91. font-size: 14pt;
  92. }
  93. p1 {
  94. font-size: 20pt;
  95. }
  96. .downDC {
  97. height: 90px;
  98. padding: 10px;
  99. }
  100. .c-img-shadow {
  101. height: 200px;
  102. max-width: 100%;
  103. box-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);
  104. border-radius: 2px;
  105. }
  106. </style>
  107. <noscript><style> .jsonly { display: none } </style></noscript>
  108. <script>
  109. window.onload = function() {
  110. // retrieved from server-side template
  111. let lang = "{{ lang }}";
  112. document.getElementById('langs').value=lang;
  113. document.getElementById("send-text").style.display = "unset";
  114. let btn2 = document.getElementById("send-text-btn");
  115. btn2.style.cursor = "pointer";
  116. btn2.addEventListener('click', function() {
  117. var text = document.getElementById("datextarea").value;
  118. console.log(text);
  119. var xhr1=new XMLHttpRequest();
  120. xhr1.open("POST",'link/text', true);
  121. xhr1.setRequestHeader('Content-Type', 'application/json');
  122. const json = {
  123. "Text": text
  124. };
  125. xhr1.send(JSON.stringify(json));
  126. document.getElementById("datextarea").value = "...";
  127. xhr1.onreadystatechange = function () {
  128. if (xhr1.readyState == 4) {
  129. result = xhr1.response.split('?&?&')
  130. document.getElementById("output1").value = result[0].substring(3, result[0].length);
  131. // document.getElementById("output2").value = result[1].substring(0, result[1].length - 3);
  132. document.getElementById("datextarea").value = text;
  133. };
  134. };
  135. document.getElementById("datextarea").value = "...";
  136. });
  137. }
  138. </script>
  139. </head>
  140. <body>
  141. <div class="container ombre">
  142. <header role="banner" class="clearfix">
  143. <form method="get" action="/" class="hidden-print">
  144. <div class="input-group input-group-sm pull-right col-xs-12 col-sm-2 langs" style="margin-right: 8px">
  145. <select id="langs" name="lang" class="form-control" title="Select language" >
  146. <option lang="fr" value="fr">Fran&ccedil;ais</option>
  147. <option lang="en" selected value="en">English</option>
  148. <option lang="de" value="de">Deutsch</option>
  149. <option lang="it" value="it">Italiano</option>
  150. </select>
  151. <span class="input-group-btn">
  152. <button type="submit" id="language_button" class="btn btn-default btn-sm language_button" title="Change language">OK</button>
  153. </span>
  154. </div>
  155. </form>
  156. <a href="https&colon;&sol;&sol;www&period;basabuuka&period;org&sol;" title="Home - basabuuka" style="margin-left: 8px" >
  157. <img src="/assets/babelfish_logo.webp" alt="basabuuka" class="" height="95vh" />
  158. </a>
  159. <h2 class="lead col-xs-12"></h2> <div class="trait col-xs-12" role="presentation"></div>
  160. </header>
  161. <main role="main">
  162. <div class="div_10"></div>
  163. <div class="div_10"></div>
  164. <div class="div_10"></div>
  165. <center>
  166. <div>
  167. <h2 class="title">{{ "index_title2"|tr(lang) }}</h2>
  168. </div>
  169. <br/>
  170. <div class="div_25"></div>
  171. <div class="flex has-text-centered">
  172. <div>
  173. <p1 class="title">{{ "index_description"|tr(lang) }}</p1>
  174. </div>
  175. </div>
  176. </center>
  177. <div class="div_60"></div>
  178. <center>
  179. <textarea id="datextarea" placeholder="{{"index_description2"|tr(lang)}}" style="font-size:18px; outline:none; resize: none; overflow:auto; width:80vw; height:40vh; border-width:2vw border-width: 2vw; border-style:solid"></textarea>
  180. <div class="div_10"></div>
  181. <div id="send-text">
  182. <a style="width: 50vw;" id="send-text-btn" class="ncstyle-button margin-bottom">{{ "index_search_button"|tr(lang) }}</a>
  183. </div>
  184. <div class="div_10"></div>
  185. <div class="grid-container">
  186. <div class="item1">
  187. <textarea id="output1" placeholder="{{"index_description3"|tr(lang)}}" style="font-size:18px; outline:none; resize: none; overflow:auto; width:38vw; height:55vh; border-width:2vw border-width: 2vw; border-style:solid"></textarea>
  188. </div>
  189. <div class="item2">
  190. <textarea id="output2" placeholder="{{"index_description4"|tr(lang)}}" style="font-size:18px; outline:none; resize: none; overflow:auto; width:38vw; height:55vh; border-width:2vw border-width: 2vw; border-style:solid"></textarea>
  191. </div>
  192. <div id="previous-text">
  193. <a style="width: 20vw;" id="previous-text-btn" class="ncstyle-button margin-bottom"><<</a>
  194. </div>
  195. <div id="next-text">
  196. <a style="width: 20vw;" id="next-text-btn" class="ncstyle-button margin-bottom">>></a>
  197. </div>
  198. </div>
  199. <div class="div_10"></div>
  200. </center>
  201. <div class="break"></div>
  202. <div class="div_120"></div>
  203. <center>
  204. <div class="div_60"></div>
  205. <div class="flex has-text-centered">
  206. <div class=" flex">
  207. <noscript>
  208. <a class="ncstyle-button">{{ "index_nojs"|tr(lang) }}</a>
  209. </noscript>
  210. </div>
  211. </div>
  212. <div class="div_120"></div>
  213. <p>
  214. <div class="flex has-text-centered">
  215. <div>
  216. <h2 class="title">{{ "index_disclaimer_title"|tr(lang) }}</h2>
  217. </div>
  218. <div class="break"></div>
  219. <div class="div_25"></div>
  220. <div>
  221. <p1 class="title">{{ "index_disclaimer1"|tr(lang) }}</p1>
  222. <a href="https://www.basabuuka.org" class="a1">{{ "index_disclaimer2_link_org"|tr(lang) }}</a1>
  223. <p1 class="title">{{ "index_disclaimer2"|tr(lang) }}</p1>
  224. </div>
  225. <br>
  226. <div class="break"></div>
  227. <div>
  228. <p1 class="title">{{ "index_disclaimer2_but"|tr(lang) }}</p1>
  229. <a href="https://www.basabuuka.org" class="a1">{{ "index_disclaimer2_link_don"|tr(lang) }}</a>
  230. </div>
  231. <br>
  232. <div class="break"></div>
  233. <div>
  234. <p1 class="title">{{ "index_disclaimer3"|tr(lang) }}</p1>
  235. <a href="https://www.basabuuka.org" class="a1">{{ "index_disclaimer3_link"|tr(lang) }}</a>
  236. <p1 class="title">{{ "index_disclaimer4"|tr(lang) }}</p1>
  237. </div>
  238. </div>
  239. </p>
  240. <div class="div_120"></div>
  241. <div class="c-blue grid-container2">
  242. <a href="" style="font-size:15px" class="c-button" target="_blank">{{ "index_bottom_docs"|tr(lang) }}</a>
  243. <a href="https://code.basabuuka.org/alpcentaur/PluriTon" style="font-size:15px;" class="c-button" target="_blank">{{ "index_bottom_source"|tr(lang) }}</a>
  244. <a href="https://code.basabuuka.org/alpcentaur/basabuuka_prototyp/src/branch/master/LICENSE.txt" style="font-size:15px;" class="c-button" target="_blank">{{ "index_bottom_lic"|tr(lang) }}</a>
  245. </div>
  246. <div class="div_10"></div>
  247. </center>
  248. </main>
  249. </div> <!-- .container -->
  250. </body>
  251. </html>
  252. <div class="container ombre downDC" style="display:flex;align-items:center;">
  253. <h2 class="lead"><a target="_blank" href="https://www.basabuuka.org/">Basabuuka</a> | <a target="_blank" href="https://notebook.basabuuka.org">Notebook Prototyp</a> | <a target="_blank" href="">{{ "impressum_donations"|tr(lang) }}</a> | <a target="_blank" href="">Kontakt</a> | <a target="_blank" href="">{{ "impressum_privacy"|tr(lang) }}</a> </h2>
  254. </div>