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.

349 lines
15 KiB

2 years 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. width: 725px;
  24. grid-gap: 25px;
  25. }
  26. .grid-container2 {
  27. display: grid;
  28. grid-template-columns: auto auto auto;
  29. width: 532px;
  30. grid-gap: 35px;
  31. }
  32. @media only screen and (max-width: 768px) {
  33. /* For mobile phones: */
  34. [class*="grid-container"] {
  35. grid-template-columns: auto;
  36. max-width: 100%;
  37. justify-content: center;
  38. }
  39. [class*="grid-container2"] {
  40. grid-template-columns: auto;
  41. max-width: 100%;
  42. justify-content: center;
  43. grid-gap: 20px;
  44. }
  45. [class*="item2"] {
  46. grid-template-columns: auto;
  47. max-width: 100%;
  48. align-items: center;
  49. }
  50. }
  51. .div_120 {
  52. flex-basis: 100%;
  53. height: 120px;
  54. }
  55. .div_60 {
  56. flex-basis: 100%;
  57. height: 60px;
  58. }
  59. .div_45 {
  60. flex-basis: 100%;
  61. height: 45px;
  62. }
  63. .div_35 {
  64. flex-basis: 100%;
  65. height: 35px;
  66. }
  67. .div_25 {
  68. flex-basis: 100%;
  69. height: 25px;
  70. }
  71. .div_10 {
  72. flex-basis: 100%;
  73. height: 10px;
  74. }
  75. .item1 {
  76. width: 350px;
  77. height: 200px;
  78. display: flex;
  79. justify-content: center;
  80. align-items: center;
  81. }
  82. .item2 {
  83. width: 350px;
  84. height: 200px;
  85. #display: flex;
  86. #justify-content: center;
  87. #align-items: center;
  88. }
  89. .h3 {
  90. font-size: 20pt;
  91. }
  92. h2 {
  93. font-size: 30pt;
  94. }
  95. .a1 {
  96. font-size: 20pt;
  97. }
  98. p {
  99. font-size: 14pt;
  100. }
  101. p1 {
  102. font-size: 20pt;
  103. }
  104. .downDC {
  105. height: 90px;
  106. padding: 10px;
  107. }
  108. .c-img-shadow {
  109. height: 200px;
  110. max-width: 100%;
  111. box-shadow: 0 0 5px rgba(0, 0, 0, 0.18),0 5px 5px rgba(0, 0, 0, 0.18);
  112. border-radius: 2px;
  113. }
  114. </style>
  115. <noscript><style> .jsonly { display: none } </style></noscript>
  116. <script>
  117. window.onload = function() {
  118. // retrieved from server-side template
  119. let csrf_token = "{{ csrf_token }}";
  120. let lang = "{{ lang }}";
  121. document.getElementById('langs').value=lang;
  122. document.getElementById('new_link_button1').addEventListener('click', function () {
  123. new_link(csrf_token);
  124. });
  125. document.getElementById('new_link_button2').addEventListener('click', function () {
  126. new_link(csrf_token);
  127. });
  128. }
  129. function getSelectedOption(sel) {
  130. var opt;
  131. for ( var i = 0, len = sel.options.length; i < len; i++ ) {
  132. opt = sel.options[i];
  133. if ( opt.selected === true ) {
  134. break;
  135. }
  136. }
  137. return opt;
  138. }
  139. function new_link(csrf) {
  140. var sel = document.getElementById('langs');
  141. let opt = getSelectedOption(sel);
  142. let lang = opt.value;
  143. document.getElementById('langs').value = lang;
  144. document.getElementById("link_lang").value = lang;
  145. document.getElementById("csrf_token").value = csrf;
  146. document.getElementById('new_link').submit();
  147. document.getElementById('new_link_button').classList.add("hidden");
  148. document.getElementById('loading_ring').classList.remove("hidden");
  149. }
  150. </script>
  151. </head>
  152. <body>
  153. <div class="container ombre">
  154. <header role="banner" class="clearfix">
  155. <form method="get" action="/" class="hidden-print">
  156. <div class="input-group input-group-sm pull-right col-xs-12 col-sm-2 langs" style="margin-right: 8px">
  157. <select id="langs" name="lang" class="form-control" title="Select language" >
  158. <option lang="fr" value="fr">Fran&ccedil;ais</option>
  159. <option lang="en" selected value="en">English</option>
  160. <option lang="oc" value="oc">Occitan</option>
  161. <option lang="es" value="es">Espa&ntilde;ol</option>
  162. <option lang="de" value="de">Deutsch</option>
  163. <option lang="nl" value="nl">Dutch</option>
  164. <option lang="it" value="it">Italiano</option>
  165. <option lang="br" value="br">Brezhoneg</option>
  166. </select>
  167. <span class="input-group-btn">
  168. <button type="submit" id="language_button" class="btn btn-default btn-sm language_button" title="Change language">OK</button>
  169. </span>
  170. </div>
  171. </form>
  172. <a href="https&colon;&sol;&sol;foorms&period;digitalcourage&period;de&sol;" title="Home - foorms" style="margin-left: 8px" >
  173. <img src="/assets/foorms_logo_beta.svg" alt="foorms" class="" height="58vh" />
  174. </a>
  175. <h2 class="lead col-xs-12"></h2> <div class="trait col-xs-12" role="presentation"></div>
  176. </header>
  177. <main role="main">
  178. <div class="div_10"></div>
  179. <div class="div_10"></div>
  180. <div class="div_10"></div>
  181. <div class="flex has-text-centered">
  182. <p>
  183. <div>
  184. <h2 class="title">{{ "index_title2"|tr(lang) }}</h2>
  185. </div>
  186. <br/>
  187. <div class="break"></div>
  188. </div>
  189. <div class="div_25"></div>
  190. <div class="flex has-text-centered">
  191. <div>
  192. <h3 class="title">{{ "index_description"|tr(lang) }}</h3>
  193. </div>
  194. <div class="break"></div>
  195. <div>
  196. <h3 class="title">{{ "index_description2"|tr(lang) }}</h3>
  197. </div>
  198. </div>
  199. </p>
  200. <div class="div_60"></div>
  201. <div class="flex has-text-centered">
  202. <div class=" flex">
  203. <noscript>
  204. <a class="ncstyle-button">{{ "index_nojs"|tr(lang) }}</a>
  205. </noscript>
  206. <form id="new_link" action="/link" method="post">
  207. <input id="csrf_token" name="csrf_token" type="text" class="hidden">
  208. <input id="link_lang" name="link_lang" type="text" class="hidden">
  209. <a id="new_link_button1" class="c-button ncstyle-button" >{{ "index_createform_button"|tr(lang) }}</a> </form>
  210. <div id="loading_ring" class="hidden lds-ring"><div></div><div></div><div></div><div></div></div>
  211. </div>
  212. </div>
  213. <div class="break"></div>
  214. <div class="div_120"></div>
  215. <div class="has-text-centered">
  216. <h2>{{ "index_panel1_title"|tr(lang) }}</h2>
  217. </div>
  218. <div class="div_25"></div>
  219. <center>
  220. <div class="grid-container">
  221. <div class="item1">
  222. <a target="_blank" href="/assets/screen/{{ "lang_code"|tr(lang) }}/fields.png" width="350px" height="200px"><img class="c-img-shadow" alt="" src="/assets/screen/{{ "lang_code"|tr(lang) }}/fields.png" height="200px" width="350px" /></a>
  223. </div>
  224. <div class= "item2">
  225. <h3 id="item2_header">{{ "index_panel2_title"|tr(lang) }}</h3>
  226. <p class="item2_paragraph">{{ "index_panel2_desc1"|tr(lang) }}</p><p class="item2_paragraph">{{ "index_panel2_desc2"|tr(lang) }}<a href="https://github.com/nextcloud/forms/issues?q=is%3Aissue+is%3Aopen+label%3A%22feature%3A+%E2%9D%93+question+types%22">{{ "index_panel2_desc2_link"|tr(lang) }}</a>.</p>
  227. </div>
  228. </div>
  229. </br>
  230. <div class="grid2gridspace"></div>
  231. <div class="grid-container">
  232. <div class="item1">
  233. <a target="_blank" href="/assets/screen/{{ "lang_code"|tr(lang) }}/responses.png" height="200px" width="350px"><img class="c-img-shadow" alt="" src="/assets/screen/{{ "lang_code"|tr(lang) }}/responses.png" height="200px" width="350px" /></a>
  234. </div>
  235. <div class="item2">
  236. <h3>{{ "index_panel3_title"|tr(lang) }}</h3>
  237. <p>{{ "index_panel3_desc1"|tr(lang) }}</p>
  238. </div>
  239. </div>
  240. </br>
  241. <div class="grid-container">
  242. <div class="item1">
  243. <a target="_blank" href="/assets/screen/{{ "lang_code"|tr(lang) }}/responses-export.png" height="200px" width="350px"><img class="c-img-shadow" alt="" src="/assets/screen/{{ "lang_code"|tr(lang) }}/responses-export.png" height="200px" width="350px" /></a>
  244. </div>
  245. <div class="item2">
  246. <h3>{{ "index_panel4_title"|tr(lang) }}</h3>
  247. <p>{{ "index_panel4_desc1"|tr(lang) }}</p>
  248. </div>
  249. </div>
  250. </br>
  251. <div class="grid-container">
  252. <div class="item1">
  253. <a target="_blank" href="/assets/screen/{{ "lang_code"|tr(lang) }}/params.png" height="200px" width="350px"><img class="c-img-shadow" alt="" src="/assets/screen/{{ "lang_code"|tr(lang) }}/params.png"height="200px" width="350px" /></a>
  254. </div>
  255. <div class="item2">
  256. <h3>{{ "index_panel5_title"|tr(lang) }}</h3>
  257. <p>{{ "index_panel5_desc1"|tr(lang) }}</p>
  258. <p>{{ "index_panel5_desc2"|tr(lang) }}</p>
  259. </div>
  260. </div>
  261. </br>
  262. <div class="grid-container">
  263. <div class="item1">
  264. <a target="_blank" href="/assets/screen/{{ "lang_code"|tr(lang) }}/formslist.png"><img class="c-img-shadow" alt="" src="/assets/screen/{{ "lang_code"|tr(lang) }}/formslist.png" height="200px" width="350px" /></a>
  265. </div>
  266. <div class="item2">
  267. <h3>{{ "index_panel6_title"|tr(lang) }}</h3>
  268. <p>{{ "index_panel5_desc1"|tr(lang) }}</p>
  269. </div>
  270. </div>
  271. <div class="div_60"></div>
  272. <div class="flex has-text-centered">
  273. <div class=" flex">
  274. <noscript>
  275. <a class="ncstyle-button">{{ "index_nojs"|tr(lang) }}</a>
  276. </noscript>
  277. <form id="new_link" action="/link" method="post">
  278. <input id="csrf_token" name="csrf_token" type="text" class="hidden">
  279. <input id="link_lang" name="link_lang" type="text" class="hidden">
  280. <a id="new_link_button2" class="c-button ncstyle-button" >{{ "index_createform_button"|tr(lang) }}</a> </form>
  281. <div id="loading_ring" class="hidden lds-ring"><div></div><div></div><div></div><div></div></div>
  282. </div>
  283. </div>
  284. <div class="div_120"></div>
  285. <p>
  286. <div class="flex has-text-centered">
  287. <div>
  288. <h2 class="title">{{ "index_disclaimer_title"|tr(lang) }}</h2>
  289. </div>
  290. <div class="break"></div>
  291. <div class="div_25"></div>
  292. <div>
  293. <p1 class="title">{{ "index_disclaimer1"|tr(lang) }}</p1>
  294. <a href="https://www.digitalcourage.de" class="a1">{{ "index_disclaimer2_link_org"|tr(lang) }}</a1>
  295. <p1 class="title">{{ "index_disclaimer2"|tr(lang) }}</p1>
  296. </div>
  297. <br>
  298. <div class="break"></div>
  299. <div>
  300. <p1 class="title">{{ "index_disclaimer2_but"|tr(lang) }}</p1>
  301. <a href="https://www.digitalcourage.de" class="a1">{{ "index_disclaimer2_link_don"|tr(lang) }}</a>
  302. </div>
  303. <br>
  304. <div class="break"></div>
  305. <div>
  306. <p1 class="title">{{ "index_disclaimer3"|tr(lang) }}</p1>
  307. <a href="https://www.digitalcourage.de" class="a1">{{ "index_disclaimer3_link"|tr(lang) }}</a>
  308. <p1 class="title">{{ "index_disclaimer4"|tr(lang) }}</p1>
  309. </div>
  310. </div>
  311. </p>
  312. <div class="div_120"></div>
  313. <div class="c-blue grid-container2">
  314. <a href="https://42l.fr/Rapport-technique" style="font-size:15px" class="c-button" target="_blank">{{ "index_bottom_docs"|tr(lang) }}</a>
  315. <a href="https://git.42l.fr/neil/sncf" style="font-size:15px;" class="c-button" target="_blank">{{ "index_bottom_source"|tr(lang) }}</a>
  316. <a href="https://git.42l.fr/neil/sncf/src/branch/root/LICENSE" style="font-size:15px;" class="c-button" target="_blank">{{ "index_bottom_lic"|tr(lang) }}</a>
  317. </div>
  318. <div class="div_10"></div>
  319. </center>
  320. </main>
  321. </div> <!-- .container -->
  322. <div class="container ombre downDC" style="display:flex;align-items:center;">
  323. <h2 class="lead"><a target="_blank" href="https://digitalcourage.de/">Digitalcourage</a> | <a target="_blank" href="https://digitalcourage.de/newsletter">Newsletter</a> | <a target="_blank" href="https://digitalcourage.de/spenden">{{ "impressum_donations"|tr(lang) }}</a> | <a target="_blank" href="https://digitalcourage.de/en">Impressum</a> | <a target="_blank" href="https://digitalcourage.de/en">{{ "impressum_privacy"|tr(lang) }}</a> </h2>
  324. </div>
  325. </body>
  326. </html>