some more tweaks

This commit is contained in:
Jonas Heinrich 2025-12-29 03:16:50 +01:00
parent 5b8a8b7572
commit 5e4ea50cab
5 changed files with 469 additions and 542 deletions

Binary file not shown.

View file

@ -258,7 +258,7 @@ Der Antrag soll im sachlichen, offiziellen Ton einer Fraktion verfasst sein - KE
Struktur: Struktur:
- Die erste Zeile ist der Antragstitel. Der Titel soll PRÄGNANT, EINFACH und EINPRÄGSAM sein - maximal 8-10 Wörter. Vermeide komplizierte Formulierungen, technische Fachbegriffe oder zu lange Titel. Der Titel soll eine gute Außenwirkung haben und das Anliegen klar und verständlich kommunizieren. Beispiele für gute Titel: "Nachtabsenkung der öffentlichen Straßenbeleuchtung", "Vielfalt in Bewegung Kulturelle Begleitmaßnahmen World Games 2029", "Prüfung digitaler Zahlungsdienstleister und WERO-Alternative" - Die erste Zeile ist der Antragstitel. Der Titel soll PRÄGNANT, EINFACH und EINPRÄGSAM sein - maximal 8-10 Wörter. Vermeide komplizierte Formulierungen, technische Fachbegriffe oder zu lange Titel. Der Titel soll eine gute Außenwirkung haben und das Anliegen klar und verständlich kommunizieren. Beispiele für gute Titel: "Nachtabsenkung der öffentlichen Straßenbeleuchtung", "Vielfalt in Bewegung Kulturelle Begleitmaßnahmen World Games 2029", "Prüfung digitaler Zahlungsdienstleister und WERO-Alternative"
- Der zweite Absatz ist der Forderungsteil ("Der Gemeinderat möge beschließen:"). Hier können nach einem kurzen Satz auch Stichpunkte verwendet werden, wenn dies sinnvoll ist. - Der zweite Absatz ist der Forderungsteil. Hier können nach einem kurzen Satz auch Stichpunkte verwendet werden, wenn dies sinnvoll ist.
- Der letzte Teil ist Begründung/Sachverhalt (ohne diesen Titel im Text) - Der letzte Teil ist Begründung/Sachverhalt (ohne diesen Titel im Text)
WICHTIG: WICHTIG:
@ -277,6 +277,41 @@ WICHTIG:
# Parse the response # Parse the response
parsed = self._parse_gemini_response(generated_text) parsed = self._parse_gemini_response(generated_text)
# Generate email text
email_prompt = f"""Erstelle einen kurzen, höflichen E-Mail-Text in der ERSTEN PERSON (ich/wir) für eine Fraktion an eine andere Fraktion.
Die E-Mail soll:
- Mit "Guten Tag," beginnen
- Das Anliegen kurz in der ersten Person erklären (basierend auf: {anliegen})
- Erwähnen, dass eine Antragsvorlage im Anhang beigefügt ist
- Mit "Mit freundlichen Grüßen," enden
Der Text soll sachlich, höflich und kurz sein (2-3 Sätze zwischen Begrüßung und Grußformel). Verwende KEINE Markdown-Formatierung. Schreibe in der ERSTEN PERSON (z.B. "ich möchte", "wir bitten", "ich habe").
Anliegen: {anliegen}
"""
email_response = self.model.generate_content(email_prompt)
email_text = self._remove_markdown(email_response.text)
# Ensure proper format - clean up and ensure structure
email_text = email_text.strip()
# Ensure it starts with "Guten Tag,"
if not email_text.startswith('Guten Tag'):
# Remove any existing greeting
email_text = re.sub(r'^(Guten Tag[,\s]*|Hallo[,\s]*|Sehr geehrte[^,]*,\s*)', '', email_text, flags=re.IGNORECASE)
email_text = 'Guten Tag,\n\n' + email_text.strip()
# Ensure it ends with "Mit freundlichen Grüßen,"
if 'Mit freundlichen Grüßen' not in email_text:
email_text += '\n\nMit freundlichen Grüßen,'
else:
# Make sure it's properly formatted
if not email_text.rstrip().endswith('Mit freundlichen Grüßen,'):
# Remove any existing closing and add proper one
email_text = re.sub(r'\s*Mit freundlichen Grüßen[,\s]*$', '', email_text, flags=re.IGNORECASE)
email_text = email_text.rstrip() + '\n\nMit freundlichen Grüßen,'
# Return JSON with the generated text parts # Return JSON with the generated text parts
resp.content_type = 'application/json' resp.content_type = 'application/json'
resp.text = json.dumps({ resp.text = json.dumps({
@ -284,6 +319,7 @@ WICHTIG:
'title': parsed['title'], 'title': parsed['title'],
'demand': parsed['demand'], 'demand': parsed['demand'],
'justification': parsed['justification'], 'justification': parsed['justification'],
'email_body': email_text,
'party_name': party_id if party_id else "" 'party_name': party_id if party_id else ""
}) })
@ -319,8 +355,8 @@ class GenerateWordResource:
# Get current date in DD.MM.YYYY format # Get current date in DD.MM.YYYY format
current_date = datetime.now().strftime("%d.%m.%Y") current_date = datetime.now().strftime("%d.%m.%Y")
# Combine demand for ANTRAGSTEXT (with heading) # Use demand directly without heading
antragtext = "Der Gemeinderat möge beschließen:\n" + demand antragtext = demand
# Replace placeholders in all paragraphs # Replace placeholders in all paragraphs
for paragraph in doc.paragraphs: for paragraph in doc.paragraphs:
@ -329,7 +365,7 @@ class GenerateWordResource:
continue continue
# Replace FRAKTION # Replace FRAKTION
if party_name and 'FRAKTION' in full_text: if 'FRAKTION' in full_text:
for run in paragraph.runs: for run in paragraph.runs:
if 'FRAKTION' in run.text: if 'FRAKTION' in run.text:
run.text = run.text.replace('FRAKTION', party_name) run.text = run.text.replace('FRAKTION', party_name)
@ -352,9 +388,7 @@ class GenerateWordResource:
lines = antragtext.split('\n') lines = antragtext.split('\n')
for i, line in enumerate(lines): for i, line in enumerate(lines):
if line.strip(): if line.strip():
run = paragraph.add_run(line.strip()) paragraph.add_run(line.strip())
if i == 0: # First line (heading) should be bold
run.bold = True
if i < len(lines) - 1: if i < len(lines) - 1:
paragraph.add_run('\n') paragraph.add_run('\n')
@ -368,6 +402,43 @@ class GenerateWordResource:
if i < len(lines) - 1: if i < len(lines) - 1:
paragraph.add_run('\n') paragraph.add_run('\n')
# Check text boxes (shapes) for placeholders
# Text boxes are stored in the document's part relationships
try:
# Access document part to search for text boxes
document_part = doc.part
from docx.oxml.ns import qn
# Search for FRAKTION in text boxes
# Text boxes are in w:txbxContent elements within w:p (paragraphs)
# We need to search the entire XML tree
def replace_in_element(element, search_text, replace_text):
"""Recursively replace text in XML elements"""
if element.text and search_text in element.text:
element.text = element.text.replace(search_text, replace_text)
if element.tail and search_text in element.tail:
element.tail = element.tail.replace(search_text, replace_text)
for child in element:
replace_in_element(child, search_text, replace_text)
# Search in main document body
if party_name:
replace_in_element(document_part.element, 'FRAKTION', party_name)
# Also search in header and footer parts
for rel in document_part.rels.values():
if 'header' in rel.target_ref or 'footer' in rel.target_ref:
try:
header_footer_part = rel.target_part
if party_name:
replace_in_element(header_footer_part.element, 'FRAKTION', party_name)
except Exception:
pass
except Exception as e:
# If text box access fails, continue with other replacements
print(f"Warning: Could not replace in text boxes: {e}")
pass
# Also check tables for placeholders # Also check tables for placeholders
for table in doc.tables: for table in doc.tables:
for row in table.rows: for row in table.rows:
@ -397,9 +468,7 @@ class GenerateWordResource:
lines = antragtext.split('\n') lines = antragtext.split('\n')
for i, line in enumerate(lines): for i, line in enumerate(lines):
if line.strip(): if line.strip():
run = paragraph.add_run(line.strip()) paragraph.add_run(line.strip())
if i == 0:
run.bold = True
if i < len(lines) - 1: if i < len(lines) - 1:
paragraph.add_run('\n') paragraph.add_run('\n')

View file

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}MeinAntrag{% endblock %}</title> <title>{% block title %}MeinAntrag{% endblock %}</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet"> <link type="text/css" href="/static/css/pages.css" media="all" rel="stylesheet">
<link href="/static/css/select2.min.css" rel="stylesheet"> <link href="/static/css/select2.min.css" rel="stylesheet">
<link href="/static/css/select2-bootstrap-5-theme.min.css" rel="stylesheet"> <link href="/static/css/select2-bootstrap-5-theme.min.css" rel="stylesheet">
@ -30,61 +30,211 @@
{% block meta_extra %}{% endblock %} {% block meta_extra %}{% endblock %}
<style> <style>
body { h2 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); max-width: 700px !important;
min-height: 100vh; }
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; select, textarea, input {
} max-width: 700px;
.main-container { margin-bottom: 1rem;
background: white; }
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1); .tutorial-list li {
padding: 3rem; margin-bottom: 30px;
margin: 2rem auto; }
max-width: 800px;
} .tutorial-list li h4 {
.title { margin-bottom: 10px;
color: #2c3e50; }
font-weight: 700;
margin-bottom: 1rem; .tutorial-list li p {
} margin: 10px 0;
.description { }
color: #7f8c8d;
font-size: 1.1rem; /* Responsive design for mobile devices */
margin-bottom: 2.5rem; @media (max-width: 768px) {
line-height: 1.6; h2 {
} max-width: 100% !important;
.form-control, .form-select { font-size: 1.2rem;
border-radius: 10px; padding: 0 1rem;
border: 2px solid #e9ecef; }
padding: 0.75rem 1rem;
transition: all 0.3s ease; select, textarea, input {
} max-width: 100%;
.form-control:focus, .form-select:focus { width: 100%;
border-color: #667eea; margin-bottom: 1rem;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); }
}
.btn-primary { .tutorial-list li {
background: linear-gradient(45deg, #667eea, #764ba2); padding: 1rem;
border: none; }
border-radius: 15px;
padding: 1rem 2rem; .tutorial-list li h4 {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; margin-bottom: 0.5rem;
transition: all 0.3s ease; }
}
.btn-primary:hover { .tutorial-list li p {
transform: translateY(-2px); font-size: 0.9rem;
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); margin-bottom: 0.5rem;
} }
.result-link {
background: #f8f9fa; .form-control, .form-select {
border: 2px solid #e9ecef; font-size: 16px; /* Prevents zoom on iOS */
border-radius: 10px; padding: 0.75rem;
padding: 1rem; }
margin-top: 1rem;
word-break: break-all; textarea.form-control {
} min-height: 150px;
}
.btn-primary {
width: 100%;
padding: 0.75rem;
font-size: 16px;
margin-bottom: 0.5rem;
box-sizing: border-box;
}
#resultFields .btn-primary {
margin-right: 0;
margin-left: 0;
display: block;
width: 100%;
margin-bottom: 0.5rem;
}
#resultFields .btn-primary:last-child {
margin-bottom: 0;
}
.tutorial-list li form {
width: 100%;
}
.tutorial-list li form > div {
width: 100%;
}
/* Fix wrapper width on mobile */
.wrapper {
width: 100% !important;
max-width: 100%;
}
.page-footer {
width: 100% !important;
padding: 20px 1rem;
margin: 40px auto 0;
position: relative;
}
.page-footer .site-footer-links {
display: block;
width: 100%;
text-align: center;
margin: 0.5rem 0;
padding: 0;
font-size: 0.85rem;
}
.page-footer .site-footer-links.right {
float: none;
text-align: center;
margin-bottom: 1rem;
}
.page-footer .site-footer-links li {
display: inline-block;
margin: 0 0.5rem;
vertical-align: middle;
}
.tutorial-list {
margin-top: 40px;
}
.tutorial-list p {
margin: 15px 20px !important;
}
.hero-spot {
padding: 2rem 1rem;
}
.hero-spot h1 {
font-size: 2rem;
margin-top: 1rem;
}
.hero-spot h2 {
font-size: 1rem;
padding: 0 1rem;
margin-bottom: 2rem;
}
.tutorial {
padding: 1rem 0;
}
.wrapper {
padding: 0 1rem;
max-width: 100%;
}
.tutorial-list li {
margin-bottom: 2rem;
padding: 1.5rem 1rem;
}
.tutorial-list li:after {
left: 50%;
transform: translateX(-50%);
top: -29px;
}
}
@media (max-width: 480px) {
.hero-spot h1 {
font-size: 1.5rem;
}
.hero-spot h2 {
font-size: 0.9rem;
}
.tutorial-list li h4 {
font-size: 1rem;
}
.page-footer .site-footer-links {
display: block;
margin: 0.5rem 0;
text-align: center;
}
.page-footer .site-footer-links.right {
float: none;
text-align: center;
}
.page-footer .site-footer-links li {
display: block;
margin: 0.5rem 0;
}
.tutorial-list li {
padding: 1rem 0.5rem;
}
.tutorial-list li h4 {
font-size: 0.95rem;
}
.tutorial-list li p {
font-size: 0.85rem;
margin: 0.5rem 0;
}
}
/* Ensure Select2 scales properly */ /* Ensure Select2 scales properly */
.select2-container { .select2-container {
width: 100% !important; width: 100% !important;
@ -100,52 +250,58 @@
.select2-container .select2-selection__arrow { .select2-container .select2-selection__arrow {
height: 100% !important; height: 100% !important;
} }
/* Mobile adjustments */ .loading {
@media (max-width: 576px) { display: none;
.main-container { }
padding: 1.25rem; .form-control, .form-select {
margin: 1rem auto 4rem auto; width: 100%;
} padding: 0.5rem;
.title { margin-top: 0.5rem;
font-size: 2rem; border: 1px solid #ddd;
} border-radius: 3px;
.description { font-size: 14px;
font-size: 1rem; }
} .form-control:focus, .form-select:focus {
outline: none;
border-color: #4078c0;
box-shadow: 0 0 0 2px rgba(64, 120, 192, 0.2);
}
textarea.form-control {
min-height: 200px;
resize: vertical;
}
.btn-primary {
background-color: #4078c0;
border-color: #4078c0;
color: white;
padding: 0.5rem 1rem;
border-radius: 3px;
text-decoration: none;
display: inline-block;
border: none;
cursor: pointer;
font-size: 14px;
}
.btn-primary:hover {
background-color: #3669a3;
border-color: #3669a3;
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
} }
.loading { .loading {
display: none; display: none;
} }
.footer { .loading.active {
background: transparent; display: inline-block;
margin-top: 3rem; margin-left: 0.5rem;
}
.footer-links a {
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #667eea !important;
}
.footer-text {
font-size: 0.8rem;
}
.footer-text a:hover {
color: #667eea !important;
}
.footer-text a {
text-decoration: underline;
}
.footer-text {
font-size: 0.8rem;
margin-bottom: 2rem;
} }
.legal-content { .legal-content {
text-align: left; text-align: left;
line-height: 1.6; line-height: 1.6;
} }
.legal-content h2 { .legal-content h2 {
color: #2c3e50;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -155,42 +311,25 @@
.legal-content ul { .legal-content ul {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.main-container {
margin-bottom: 4rem;
}
</style> </style>
{% block extra_css %}{% endblock %} {% block extra_css %}{% endblock %}
</head> </head>
<body> <body class="home">
<div class="container"> {% block content %}{% endblock %}
<div class="main-container">
{% block content %}{% endblock %}
</div>
<!-- Footer --> <footer class="page-footer">
<footer class="footer mt-5 pt-4"> <ul class="site-footer-links right">
<div class="container"> <li><a href="/impressum">Impressum</a></li>
<div class="row"> <li><a href="/datenschutz">Datenschutz</a></li>
<div class="col-12 text-center"> <li><a href="https://git.project-insanity.org/onny/MeinAntrag" target="_blank">Source</a></li>
<div class="footer-links mb-2"> </ul>
<a href="/impressum" class="text-muted text-decoration-none me-3">Impressum</a> <ul class="site-footer-links">
<a href="/datenschutz" class="text-muted text-decoration-none me-3">Datenschutz</a> <li>&copy; 2025 <span>Project-Insanity.org</span></li>
<a href="https://git.project-insanity.org/onny/MeinAntrag" class="text-muted text-decoration-none" target="_blank">Source</a> <li><a href="https://social.project-insanity.org/@pi_crew" target="_blank">Mastodon</a></li>
</div> </ul>
<div class="footer-text"> </footer>
<small class="text-muted">
Projekt von <a href="https://project-insanity.org" class="text-muted text-decoration-none" target="_blank">Project-Insanity.org</a>,
follow us on <a href="https://social.project-insanity.org/@pi_crew" class="text-muted text-decoration-none" target="_blank">Mastodon</a> :)
</small>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="/static/js/bootstrap.bundle.min.js"></script> <script src="/static/js/pages-jquery.js"></script>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/select2.min.js"></script> <script src="/static/js/select2.min.js"></script>
{% block extra_js %}{% endblock %} {% block extra_js %}{% endblock %}

View file

@ -3,83 +3,90 @@
{% block title %}MeinAntrag{% endblock %} {% block title %}MeinAntrag{% endblock %}
{% block content %} {% block content %}
<div class="text-center"> <section id="hero-spot" class="hero-spot">
<h1 class="title display-4">MeinAntrag</h1> <h1>MeinAntrag</h1>
<p class="description"> <h2>Erstelle einfach Vorlagen für Anfragen oder Anträge an die Karlsruher Stadtverwaltung zu deinem persönlichen Thema und schicke diese direkt an eine Stadtratsfraktion!</h2>
Erstelle einfach Vorlagen für Anfragen oder Anträge an die Karlsruher Stadtverwaltung </section>
zu deinem persönlichen Thema und schicke diese direkt an eine Stadtratsfraktion!
</p>
<form id="meinantragForm" class="text-start"> <section id="tutorial" class="tutorial">
<div id="inputFields">
<div class="mb-4"> <ul id="project-site" class="tutorial-list wrapper active">
<label for="party" class="form-label fw-bold">Fraktion</label> <li class="question">
<select class="form-select" id="party" name="party_id" required>
<option value="">Fraktion auswählen...</option> <form id="meinantragForm">
<option value="SPD">SPD</option> <div id="inputFields">
<option value="GRÜNEN">GRÜNEN</option> <li>
<option value="CDU">CDU</option> <h4>Fraktion auswählen</h4>
<option value="FDP/FW">FDP/FW</option> <p>Wähle die Fraktion, an die der Antrag gerichtet ist:</p>
<option value="Volt">Volt</option> <select class="form-select" id="party" name="party_id" required>
<option value="DIE LINKE">DIE LINKE</option> <option value="">Fraktion auswählen...</option>
<option value="KAL">KAL</option> <option value="SPD">SPD</option>
</select> <option value="GRÜNEN">GRÜNEN</option>
<option value="CDU">CDU</option>
<option value="FDP/FW">FDP/FW</option>
<option value="Volt">Volt</option>
<option value="DIE LINKE">DIE LINKE</option>
<option value="KAL">KAL</option>
</select>
</li>
<li>
<h4>Dein Anliegen beschreiben</h4>
<p>Beschreibe hier, welche Anfrage oder Antrag du an die Stadtverwaltung stellen möchtest:</p>
<textarea class="form-control" id="anliegen" name="anliegen" rows="5" required></textarea>
</li>
<li>
<button type="submit" class="btn btn-primary">
<span class="btn-text">Antrag generieren</span>
<span class="loading" role="status" style="display: none;">...</span>
</button>
</li>
</div> </div>
<div class="mb-4"> <div id="resultFields" style="display: none;">
<label for="anliegen" class="form-label fw-bold">Mein Anliegen:</label> <li>
<textarea class="form-control" id="anliegen" name="anliegen" rows="5" <p><a href="#" id="backLink">← Zurück zum Formular</a></p>
placeholder="Beschreibe hier, welche Anfrage oder Antrag du an die Stadtverwaltung stellen möchtest ..." required></textarea> <br><br>
</div> </li>
<div class="text-center"> <li>
<button type="submit" class="btn btn-primary btn-lg"> <h4>Antragstitel</h4>
<span class="btn-text">Antrag generieren</span> <p></p>
<span class="loading spinner-border spinner-border-sm ms-2" role="status"></span> <input type="text" class="form-control" id="antragstitel" name="antragstitel">
</button> </li>
</div>
</div>
<div id="resultFields" class="text-start" style="display: none;"> <li>
<div class="mb-3"> <h4>Forderung</h4>
<a href="#" id="backLink" class="text-decoration-none"> <p></p>
<span>← Zurück</span> <textarea class="form-control" id="forderung" name="forderung" rows="5"></textarea>
</a> </li>
</div>
<div class="mb-4"> <li>
<label for="antragstitel" class="form-label fw-bold">Antragstitel</label> <h4>Begründung/Sachverhalt</h4>
<input type="text" class="form-control" id="antragstitel" name="antragstitel"> <p></p>
</div> <textarea class="form-control" id="begruendung" name="begruendung" rows="8"></textarea>
</li>
<div class="mb-4"> <li>
<label for="forderung" class="form-label fw-bold">Forderung</label> <h4>Aktionen</h4>
<textarea class="form-control" id="forderung" name="forderung" rows="5"></textarea> <p>Du kannst den Antrag jetzt per E-Mail senden oder als Word-Datei herunterladen:</p>
<button type="button" class="btn btn-primary" id="mailBtn">
<span id="mailBtnText">Mail an Fraktion senden</span>
</button>
<button type="button" class="btn btn-primary" id="wordBtn">
Word-Datei herunterladen
</button>
</li>
</div> </div>
</form>
<div class="mb-4">
<label for="begruendung" class="form-label fw-bold">Begründung/Sachverhalt</label>
<textarea class="form-control" id="begruendung" name="begruendung" rows="8"></textarea>
</div>
<div class="mb-4 d-flex gap-2 flex-wrap justify-content-center"> </p>
<button type="button" class="btn btn-primary" id="mailBtn"> </li>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope me-2" viewBox="0 0 16 16"> </ul>
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
</svg> </section>
<span id="mailBtnText">Mail an Fraktion senden</span>
</button>
<button type="button" class="btn btn-primary" id="wordBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-word me-2" viewBox="0 0 16 16">
<path d="M5.485 6.879a.5.5 0 1 0-.97.242l1.5 6a.5.5 0 0 0 .539.314l1.5-.5a.5.5 0 0 0 .186-.596l-.737-2.945 2.679-3.42a.5.5 0 1 0-.758-.652L6.978 8.616l-1.493-.5z"/>
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</svg>
Word-Datei herunterladen
</button>
</div>
</div>
</form>
</div>
{% endblock %} {% endblock %}
{% block extra_js %} {% block extra_js %}
@ -102,8 +109,8 @@
const $btnText = $button.find('.btn-text'); const $btnText = $button.find('.btn-text');
const $loading = $button.find('.loading'); const $loading = $button.find('.loading');
$button.prop('disabled', true); $button.prop('disabled', true);
$btnText.text('Generiere Antrag...'); $btnText.text('Generiere Antrag');
$loading.css('display', 'inline-block'); $loading.css('display', 'inline');
// Prepare form data as URL-encoded // Prepare form data as URL-encoded
const formData = new URLSearchParams(); const formData = new URLSearchParams();
@ -135,8 +142,9 @@
$('#forderung').val(data.demand || ''); $('#forderung').val(data.demand || '');
$('#begruendung').val(data.justification || ''); $('#begruendung').val(data.justification || '');
// Store party name for mail button // Store party name and email body for mail button
$('#resultFields').data('party-name', data.party_name || ''); $('#resultFields').data('party-name', data.party_name || '');
$('#resultFields').data('email-body', data.email_body || '');
// Update mail button text // Update mail button text
if (data.party_name) { if (data.party_name) {
@ -153,7 +161,7 @@
// Reset button state // Reset button state
$button.prop('disabled', false); $button.prop('disabled', false);
$btnText.text('Antrag generieren'); $btnText.text('Antrag generieren');
$loading.hide(); $loading.css('display', 'none');
}) })
.catch(error => { .catch(error => {
console.error('Error:', error); console.error('Error:', error);
@ -162,7 +170,7 @@
// Reset button state // Reset button state
$button.prop('disabled', false); $button.prop('disabled', false);
$btnText.text('Antrag generieren'); $btnText.text('Antrag generieren');
$loading.hide(); $loading.css('display', 'none');
}); });
}); });
@ -189,18 +197,9 @@
const partyName = $('#resultFields').data('party-name') || ''; const partyName = $('#resultFields').data('party-name') || '';
const email = partyContacts[partyName] || ''; const email = partyContacts[partyName] || '';
const subject = encodeURIComponent($('#antragstitel').val() || ''); const subject = encodeURIComponent($('#antragstitel').val() || '');
const title = $('#antragstitel').val() || ''; const emailBody = $('#resultFields').data('email-body') || '';
const demand = $('#forderung').val() || '';
const justification = $('#begruendung').val() || '';
// Build email body const bodyEncoded = encodeURIComponent(emailBody);
let body = title + '\n\n';
body += 'Der Gemeinderat möge beschließen:\n';
body += demand + '\n\n';
body += 'Begründung/Sachverhalt\n';
body += justification;
const bodyEncoded = encodeURIComponent(body);
// Open mail client // Open mail client
if (email) { if (email) {
@ -210,6 +209,38 @@
} }
}); });
// Function to create a valid filename from title
function createFilename(title) {
if (!title || !title.trim()) {
return 'antrag.docx';
}
// Remove or replace special characters
let filename = title
.trim()
.toLowerCase()
.replace(/[ä]/g, 'ae')
.replace(/[ö]/g, 'oe')
.replace(/[ü]/g, 'ue')
.replace(/[ß]/g, 'ss')
.replace(/[^a-z0-9\s-]/g, '') // Remove special chars except spaces and hyphens
.replace(/\s+/g, '_') // Replace spaces with underscores
.replace(/_+/g, '_') // Replace multiple underscores with single
.replace(/^_+|_+$/g, ''); // Remove leading/trailing underscores
// Limit length to 100 characters
if (filename.length > 100) {
filename = filename.substring(0, 100);
}
// If empty after cleaning, use default
if (!filename) {
return 'antrag.docx';
}
return filename + '.docx';
}
// Handle Word button click // Handle Word button click
$('#wordBtn').on('click', function() { $('#wordBtn').on('click', function() {
const title = $('#antragstitel').val() || ''; const title = $('#antragstitel').val() || '';
@ -226,6 +257,9 @@
formData.append('party_name', partyName); formData.append('party_name', partyName);
} }
// Generate filename from title
const filename = createFilename(title);
// Download Word file // Download Word file
fetch('/api/generate-word', { fetch('/api/generate-word', {
method: 'POST', method: 'POST',
@ -244,7 +278,7 @@
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; a.href = url;
a.download = 'antrag.docx'; a.download = filename;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);

View file

@ -1,315 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link type="text/css" href="https://pages.github.com/css/pages.css" media="all" rel="stylesheet">
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="GitHub Pages" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live." />
<meta property="og:description" content="Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live." />
<link rel="canonical" href="https://pages.github.com/" />
<meta property="og:url" content="https://pages.github.com/" />
<meta property="og:site_name" content="GitHub Pages" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="GitHub Pages" />
<meta name="twitter:site" content="@github" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","description":"Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.","headline":"GitHub Pages","name":"GitHub Pages","url":"https://pages.github.com/"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body class="home ">
<section id="hero-spot" class="hero-spot">
<a href="/"><img src="https://pages.github.com/images/logo.svg" alt="GitHub Pages" class="logo" /></a>
<h1>Websites for you and your projects.</h1>
<h2>Hosted directly from your <a href="https://github.com">GitHub repository</a>. Just edit, push, and your changes are live.</h2>
<a href="https://help.github.com/pages/" class="help-link">Pages Help</a>
<div id="slideshow">
<img src="https://pages.github.com/images/slideshow/bootstrap.png" alt="Bootstrap" class="slide active" width="893" />
</div>
</section>
<section id="tutorial" class="tutorial">
<h1>Ready to get started? Build your own site from scratch or generate one for your project.</h1>
<h2>You get one site per GitHub account and organization, <br />and unlimited project sites. Lets get started.</h2>
<ul class="tabs">
<li><a href="#user-site" class="selected">User or organization site</a></li>
<li><a href="#project-site">Project site</a></li>
</ul>
<!-- ### Start of tutorials -->
<ul id="user-site" class="tutorial-list wrapper active">
<li id="create-repo-step" class="image-right">
<h4>Create a repository</h4>
<p>Head over to <a href="https://github.com">GitHub</a> and <a data-proofer-ignore="true" href="https://github.com/new">create a new public repository</a> named <em>username</em>.github.io, where <em>username</em> is your username (or organization name) on GitHub.</p>
<p class="details">If the first part of the repository doesnt exactly match your username, it wont work, so make sure to get it right.</p>
</li>
<li class="question">
<h4>What git client are you using?</h4>
<ul class="tabs">
<li><a id="option-terminal" href="#terminal-step-1" class="selected">A terminal</a></li>
<li><a id="option-desktop" href="#setup-in-desktop">GitHub Desktop</a></li>
<li><a id="option-newuser" href="#new-user-step-1">I don't know</a></li>
</ul>
</li>
<li id="new-user-step-1" class="option-newuser">
<h4>Download GitHub Desktop</h4>
<p>GitHub Desktop is a great way to use Git and GitHub on macOS and Windows.</p>
<a class="desktop-download" href="https://desktop.github.com"><span class="icon"></span>Download GitHub Desktop</a>
<img src="https://pages.github.com/images/dashboard@2x.png" width="1054" alt="GitHub Desktop screenshot" class="full-size" />
</li>
<li id="terminal-step-1" class="option-terminal">
<h4>Clone the repository</h4>
<p>Go to the folder where you want to store your project, and clone the new repository:</p>
<div class="terminal">
<div class="header"></div>
<div class="shell">
<p><span class="path">~</span><span class="prompt">$</span>git clone https://github.com/<em>username</em>/<em>username</em>.github.io</p>
</div>
</div>
</li>
<li id="setup-in-desktop" class="option-desktop image-right">
<h4>Clone the repository</h4>
<p>Click the "Set up in Desktop" button. When the GitHub desktop app opens, save the project.</p>
<p class="details">If the app doesn't open, launch it and clone the repository from the app.</p>
</li>
<li id="setup-in-desktop" class="option-newuser image-right">
<h4>Clone the repository</h4>
<p>After finishing the installation, head back to GitHub.com and refresh the page. Click the "Set up in Desktop" button. When the GitHub desktop app opens, save the project.</p>
<p class="details">If the app doesn't open, launch it and clone the repository from the app.</p>
</li>
<li class="option-terminal">
<h4>Hello World</h4>
<p>Enter the project folder and add an index.html file:</p>
<div class="terminal">
<div class="header"></div>
<div class="shell">
<p><span class="path">~</span><span class="prompt">$</span>cd <em>username</em>.github.io</p>
<p><span class="path">~</span><span class="prompt">$</span>echo "Hello World" > index.html</p>
</div>
</div>
</li>
<li class="option-desktop option-newuser">
<h4>Create an index file</h4>
<p>Grab your favorite text editor and add an index.html file to your project:</p>
<div class="terminal">
<div class="header">index.html</div>
<code class="shell">
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;p&gt;I'm hosted with GitHub Pages.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</code>
</li>
<li class="option-terminal">
<h4>Push it</h4>
<p>Add, commit, and push your changes:</p>
<div class="terminal">
<div class="header"></div>
<div class="shell">
<p><span class="path">~</span><span class="prompt">$</span>git add --all</p>
<p><span class="path">~</span><span class="prompt">$</span>git commit -m "Initial commit"</p>
<p><span class="path">~</span><span class="prompt">$</span>git push -u origin main</p>
</div>
</div>
</li>
<li class="option-desktop option-newuser">
<h4>Commit &amp; publish</h4>
<p>Enter the repository, commit your changes, and press the publish button.</p>
<img src="https://pages.github.com/images/desktop-demo@2x.gif" width="841" alt="Demonstration of steps required to create the initial commit and publish the repository in GitHub Desktop" class="macos-drop-shadow" />
</li>
<li class="option-all">
<h4>…and you're done!</h4>
<p>Fire up a browser and go to <strong>https://<em>username</em>.github.io</strong>.</p>
<div class="hero-octicon">
<span class="mega-octicon octicon-check"></span>
</div>
</li>
</ul>
<!-- End of user site tutorial -->
<!-- Project Site tutorial -->
<ul id="project-site" class="tutorial-list wrapper">
<li class="question">
<h4>Use a theme, or start from scratch?</h4>
<p>You have the option to start with one of the pre-built themes,
<br>or to create a site from scratch.
<ul class="tabs">
<li><a id="option-generate" href="#generate-step-1" class="selected">Choose a theme</a></li>
<li><a id="option-vanilla" href="#vanilla-step-1">Start from scratch</a></li>
</ul>
</li>
<li id="generate-step-1" class="option-generate">
<h4>Repository Settings</h4>
<p>Head over to <a href="https://github.com/">GitHub.com</a> and create a new repository, or go to an existing one.
<br><strong>Click on the Settings tab</strong>.</p>
<img src="https://pages.github.com/images/repo-settings@2x.png" width="720" alt="Settings for a repository" />
</li>
<li class="option-generate">
<h4>Theme chooser</h4>
<p>Scroll down to the <strong>GitHub Pages</strong> section. Press <strong>Choose a theme</strong>.</p>
<img src="https://pages.github.com/images/launch-theme-chooser@2x.png" width="720" alt="Automatic Generator button on GitHub.com, Settings" />
</li>
<li class="option-generate">
<h4>Pick a theme</h4>
<p>Choose one of the themes from the carousel at the top.
<br>When you're done, click <strong>Select theme</strong> on the right.</p>
<img src="https://pages.github.com/images/theme-chooser@2x.png" class="full-size" width="720" alt="Choose layout" />
</li>
<li class="option-generate">
<h4>Edit content</h4>
<p>Use the editor to add content to your site.</p>
<img class="full-size" src="https://pages.github.com/images/code-editor@2x.png" width="720" alt="Add content to your GitHub Pages site" />
</li>
<li class="option-generate">
<h4>Commit</h4>
<p>Enter a commit comment and click on <strong>Commit changes</strong> below the editor.</p>
<img class="full-size" src="https://pages.github.com/images/commit-edits@2x.png" width="720" alt="Commit Markdown content to your repository" />
</li>
<!-- Start of vanilla sub tutorial -->
<li id="vanilla-step-1" class="option-vanilla">
<h4>Create an index file</h4>
<p>Head over to <a href="https://github.com/">GitHub.com</a> and <a data-proofer-ignore="true" href="https://github.com/new">create a new repository</a>, or go to an existing one.
<br />Click on the <strong>Create new file</strong> button.</p>
<img src="https://pages.github.com/images/new-create-file@2x.png" width="720" alt="Create a file in your repository" />
</li>
<li class="option-vanilla">
<h4>Hello World</h4>
<p>Name the file <code>index.html</code> and type some HTML content into the editor.</p>
<img src="https://pages.github.com/images/new-index-html@2x.png" width="720" alt="Hello World on GitHub.com" />
</li>
<li class="option-vanilla">
<h4>Commit the file</h4>
<p>Scroll to the bottom of the page, write a commit message, and commit the new file.</p>
<img src="https://pages.github.com/images/new-commit-file@2x.png" width="720" alt="Commit the file" />
</li>
<li class="option-vanilla">
<h4>Repository Settings</h4>
<p><strong>Click on the Settings tab</strong> and scroll down to the GitHub Pages section.
<br />Then select the <strong>main branch</strong> source and click on the <strong>Save</strong> button.</p>
<img src="https://pages.github.com/images/source-setting@2x.png" width="720" alt="GitHub Pages Source Setting" />
</li>
<li class="option-all">
<h4>…and you're done!</h4>
<p>Fire up a browser and go to <strong>http://<em>username</em>.github.io/<em>repository</em></strong>.</p>
<div class="hero-octicon">
<span class="mega-octicon octicon-check"></span>
</div>
</li>
</ul>
</section>
<!-- End of tutorial section -->
<section id="next-steps">
<h1>Now that youre up and running, here are a few things you should know.</h1>
<ul class="next-steps wrapper">
<li class="jekyll">
<a class="hero-octicon" href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll">
<span class="mega-octicon octicon-pencil"></span>
</a>
<h4><a href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll">Blogging with Jekyll</a></h4>
<p>Using <a href="https://jekyllrb.com">Jekyll</a>, you can blog using beautiful Markdown syntax, and without having to deal with any databases. <a href="https://jekyllrb.com/docs/">Learn how to set up Jekyll</a>.</p>
</li>
<li class="custom-urls">
<a class="hero-octicon" href="https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site">
<span class="mega-octicon octicon-link"></span>
</a>
<h4><a href="https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site">Custom URLs</a></h4>
<p>Want to use your own custom domain for a GitHub Pages site? Just create a file named CNAME and include your URL. <a href="https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site">Read more</a>.</p>
</li>
<li class="guides">
<a class="hero-octicon" href="https://docs.github.com/pages">
<span class="mega-octicon octicon-book"></span>
</a>
<h4><a href="https://docs.github.com/pages">Guides</a></h4>
<p>Learn how to create custom 404 pages, use submodules, and <a href="https://docs.github.com/pages">learn more about GitHub Pages</a>.</p>
</li>
</ul>
</section>
<script src="https://pages.github.com/js/jquery.js"></script>
<script>window.slides = {"bootstrap":"Bootstrap","yeoman":"Yeoman","facebookdesign":"Facebook Design","foundation":"Foundation","ghtraining":"GitHub Training","adobeos":"Adobe Open Source","jekyllrb":"Jekyll","electron":"Electron","semanticui":"Semantic UI","microsoft":"Microsoft on GitHub"}</script>
<script src="https://pages.github.com/js/application.js"></script>
<footer class="page-footer">
<ul class="site-footer-links right">
<li><a href="https://www.githubstatus.com/">Status</a></li>
<li><a href="https://docs.github.com/rest">API</a></li>
<li><a href="https://training.github.com">Training</a></li>
<li><a href="https://shop.github.com">Shop</a></li>
<li><a href="https://github.blog">Blog</a></li>
<li><a href="https://github.com/about">About</a></li>
</ul>
<a href="/">
<span class="mega-octicon octicon-mark-github"></span>
</a>
<ul class="site-footer-links">
<li>&copy; 2025 <span>GitHub</span>, Inc.</li>
<li><a href="https://docs.github.com/en/github/site-policy/github-terms-of-service">Terms</a></li>
<li><a href="https://docs.github.com/en/github/site-policy/github-privacy-statement">Privacy</a></li>
<li><a href="https://github.com/security">Security</a></li>
<li><a href="https://support.github.com">Contact</a></li>
</ul>
</footer>
</body>
</html>