Da die Seite der Stadt München um zu Prüfen ob man seinen Ausweisabholen kann sehr bescheiden aussieht dachte ich mir ich frage Chat GPT einmal für eine Bessere Version des HTML Codes
Das war die Antwort darauf:
Natürlich, hier ist eine überarbeitete Version deines HTML-Formulars mit einigen stilistischen Verbesserungen:
Natürlich kann der Code nicht eins zu eins übernommen werden dennoch wäre denke ich der erste Anhalspunkt da wie man die Seite User freundlicher machen könnte.
| <!DOCTYPE html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Einwohnermeldewesen - Passwesen - Dokumentensuche</title> | |
| <link rel="stylesheet" href="/css/kvr/kvr.css"> | |
| <style> | |
| body { | |
| background-color: #FFFFFF; | |
| color: #000000; | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| width: 600px; | |
| margin: 20px auto; | |
| padding: 20px; | |
| border: 1px solid #C0C0C0; | |
| border-radius: 10px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .title { | |
| font-size: 20px; | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| } | |
| .subtitle { | |
| font-size: 16px; | |
| margin-bottom: 10px; | |
| } | |
| .error-message { | |
| color: red; | |
| font-size: 14px; | |
| margin-bottom: 10px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| font-size: 14px; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| input[type="text"] { | |
| width: 100%; | |
| padding: 8px; | |
| font-size: 14px; | |
| border: 1px solid #C0C0C0; | |
| border-radius: 5px; | |
| } | |
| input[type="submit"] { | |
| padding: 10px 20px; | |
| font-size: 14px; | |
| background-color: #C0C0C0; | |
| color: #FFFFFF; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| input[type="submit"]:hover { | |
| background-color: #808080; | |
| } | |
| .info { | |
| font-size: 14px; | |
| margin-top: 20px; | |
| } | |
| .footer { | |
| font-size: 12px; | |
| margin-top: 20px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="title">Informationen zur Beantragung eines Personalausweises, Reisepasses</div> | |
| <div class="subtitle">Auskunft über beantragte Dokumente</div> | |
| <div class="error-message">Fehler: Bitte geben Sie eine Ausweisnummer ein!</div> | |
| <form name="f1" action="/Passverfolgung/" id="f1" method="POST"> | |
| <div class="form-group"> | |
| <label for="ifNummer">Ausweisnummer:</label> | |
| <input name="ifNummer" id="ifNummer" type="text" oninput="this.value = this.value.toUpperCase()" required> | |
| </div> | |
| <div class="form-group"> | |
| <input name="pbAbfragen" type="submit" value="Abfragen"> | |
| <input name="pbReset" type="reset" value="Zurücksetzen"> | |
| </div> | |
| </form> | |
| <div class="info">Ihre Ausweisnummer finden Sie auf dem bei der Beantragung ausgehändigten Informationsblatt.</div> | |
| <div class="footer">IT@M - Dienstleister für Informations- und Telekommunikationstechnik V 2.3.2 vom 05.06.2019</div> | |
| </div> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Einwohnermeldewesen - Passwesen - Dokumentensuche</title> | |
| <link rel="stylesheet" href="/css/kvr/kvr.css"> | |
| <style> | |
| body { | |
| background-color: #FFFFFF; | |
| color: #000000; | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| width: 600px; | |
| margin: 20px auto; | |
| padding: 20px; | |
| border: 1px solid #C0C0C0; | |
| border-radius: 10px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .title { | |
| font-size: 20px; | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| } | |
| .subtitle { | |
| font-size: 16px; | |
| margin-bottom: 10px; | |
| } | |
| .status { | |
| font-size: 16px; | |
| margin-bottom: 10px; | |
| color: green; | |
| } | |
| .location { | |
| font-size: 14px; | |
| margin-bottom: 10px; | |
| } | |
| .note { | |
| font-size: 14px; | |
| margin-top: 20px; | |
| font-style: italic; | |
| } | |
| .footer { | |
| font-size: 12px; | |
| margin-top: 20px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="title">Informationen zur Beantragung eines Personalausweises, Reisepasses</div> | |
| <div class="subtitle">Auskunft über beantragte Dokumente</div> | |
| <div class="status">Das beantragte Dokument (Reisepass) liegt zur Abholung bereit.</div> | |
| <div class="location"> | |
| Abholort:<br> | |
| Bürgerbüro Pasing<br> | |
| Landsberger Straße 486 | |
| </div> | |
| <div class="note">Für die Abholung benötigen Sie KEINEN Termin.</div> | |
| <div class="footer">IT@M - Dienstleister für Informations- und Telekommunikationstechnik V 2.3.2 vom 05.06.2019</div> | |
| </div> | |
| </body> | |
| </html> |