index.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!doctype html>
  2. </style>
  3. <title>Generatore di volantini</title>
  4. <head>
  5. <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }} ">
  6. <title>gancio flyers</title>
  7. </head>
  8. <body>
  9. <h3> Generatore di volantini per balotta.org</h3>
  10. <div>
  11. Scegli gli eventi che vuoi mettere nel volantino e premi genera.
  12. <br>
  13. Per stampare fai "File >> Stampa" Scegli come destinazione "Salva come PDF", seleziona il giusto formato di carta (A3) e ricordati di selezionare anche "Print background".
  14. <br>
  15. L'attuale layout può contenere fino a <span id="maxEvents"></span> eventi.
  16. </div>
  17. <br>
  18. <form action="/flyer" target="_blank">
  19. <label for="template">Scegli un template: </label>
  20. <select onchange="templateSelected(this.value)" id="template" name="template">
  21. {% for template in templates %}
  22. <option value="{{template.name}}">{{template.name}}</option>
  23. {% endfor %}
  24. </select>
  25. <br><br>
  26. {% for event in events %}
  27. <input type="checkbox" id="{{event.id}}" name="events" value="{{event.id}}">
  28. <label for="{{event.id}}"> {{loop.index}} [ {{event.when}} ] {{ event.title }}</label><br>
  29. {% endfor %}
  30. <br>
  31. <input type="submit" value="Genera il volantino">
  32. </form>
  33. <script>
  34. const templates={{templates|tojson}}
  35. function templateSelected(templateName) {
  36. const template = templates.find((t) => t.name == templateName)
  37. const events = document.querySelectorAll("[name=events]")
  38. document.querySelector("#maxEvents").innerHTML = template.maxEvents
  39. var maxEvents = template.maxEvents
  40. events.forEach((e) => {
  41. e.checked = maxEvents > 0
  42. maxEvents--
  43. })
  44. }
  45. document.querySelector("#template").value = "{{default_template}}"
  46. templateSelected("{{default_template}}")
  47. </script>
  48. </body>
  49. </html>