Skip to content

Instantly share code, notes, and snippets.

@T0biii
Created March 1, 2024 08:20
Show Gist options
  • Save T0biii/e83c16043b8539a4bc9ff3fdc5e23e6a to your computer and use it in GitHub Desktop.
Save T0biii/e83c16043b8539a4bc9ff3fdc5e23e6a to your computer and use it in GitHub Desktop.
Ausweisabholungsseite - https://www17.muenchen.de/Passverfolgung/ - New Look? ChatGPT

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:

image

image

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment