fix: enhance response template styling and structure for improved readability and mobile responsiveness

yannicktrinh · yannicktrinh · commit 33e21a44305d · 2025-07-03T14:18:53.000+02:00
diff --git a/Resources/responseTemplate.html b/Resources/responseTemplate.html
@@ -13,19 +13,88 @@
  -->
 <html>
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title><!--#4DTEXT $1-->&nbsp;</title>
+<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
 <style>
-	body { margin: 0px; padding: 0px; font: 90% "Lucida Grande", Lucida, Verdana, sans-serif; }
-	div { padding: 20px; }
-	div#title { background-color: #2c4b79; padding: 15px 15px 15px 20px; margin: 0px; }
-	h2 { color: #fff; font-size: 1.3em; margin: 0; padding: 0; }
-	p { padding: 0px; margin: 0px; }
+    body {
+        margin: 0;
+        padding: 0;
+        background: linear-gradient(135deg, #2c4b79 0%, #4e7ad2 100%);
+        font-family: 'Roboto', Arial, sans-serif;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .container {
+        background: #fff;
+        border-radius: 18px;
+        box-shadow: 0 6px 32px rgba(44,75,121,0.13), 0 2px 8px rgba(44,75,121,0.10);
+        max-width: 600px;
+        width: 95%;
+        padding: 40px 36px 28px 36px;
+        box-sizing: border-box;
+        text-align: center;
+        animation: fadeIn 0.7s;
+    }
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(30px);}
+        to   { opacity: 1; transform: translateY(0);}
+    }
+    #title {
+        background: linear-gradient(90deg, #2c4b79 60%, #4e7ad2 100%);
+        border-radius: 12px 12px 0 0;
+        padding: 22px 0 14px 0;
+        margin: -40px -36px 28px -36px;
+    }
+    h2 {
+        color: #fff;
+        font-size: 2em;
+        margin: 0;
+        letter-spacing: 0.5px;
+        font-weight: 700;
+    }
+    #message p {
+        color: #2c4b79;
+        font-size: 1.18em;
+        margin: 0 0 22px 0;
+        font-weight: 500;
+    }
+    #details {
+        background: #f4f6fa;
+        border-radius: 8px;
+        padding: 14px;
+        margin-top: 14px;
+        font-size: 1em;
+        color: #4e7ad2;
+        word-break: break-all;
+    }
+    #details code, #details p {
+        background: none;
+        color: inherit;
+        padding: 0;
+        margin: 0;
+        font-family: 'Roboto Mono', monospace, monospace;
+    }
+    @media (max-width: 700px) {
+        .container {
+            padding: 18px 6px 12px 6px;
+            max-width: 99vw;
+        }
+        #title {
+            margin: -18px -6px 18px -6px;
+            padding: 12px 0 8px 0;
+        }
+    }
 </style>
 </head>
 <body>
-<div id="title"><h2><!--#4DTEXT $1--></h2></div>
-<div id="message"><p><!--#4DHTML $2--></p></div>
-<div id="details"><code><p><!--#4DTEXT $3--></p></code></div>
+<div class="container">
+    <div id="title"><h2><!--#4DTEXT $1--></h2></div>
+    <div id="message"><p><!--#4DHTML $2--></p></div>
+    <div id="details"><code><p><!--#4DTEXT $3--></p></code></div>
+</div>
 </body>
-</html>
+</html>
