Invario/Key-service-Server
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance package card styling and improve chat responsiveness

Browse Source
This commit is contained in:
AIIrondev
2026-05-06 17:23:08 +02:00
parent 56182e0a24
commit dd092b65bc
3 changed files with 68 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Website/templates/appointments.html
+47 -4
View File
@@ -204,21 +204,64 @@
margin-top: 0.4rem; margin-top: 0.4rem;
} }
/* Highlight für Premium/Schulträger Angebot */
.package-card--highlight {
border: 2px solid #1a748c;
background: linear-gradient(180deg, #ffffff 0%, #f4fafb 100%);
box-shadow: 0 20px 48px rgba(26, 116, 140, 0.12);
transform: scale(1.01);
}
.package-card--highlight:hover {
border-color: #135567;
box-shadow: 0 24px 54px rgba(26, 116, 140, 0.18);
transform: translateY(-3px) scale(1.01);
}
.package-card--highlight .package-card__tag {
background: #1a748c;
color: #ffffff;
}
@media (max-width: 760px) { @media (max-width: 760px) {
.booking-hero { .booking-hero {
padding: 1.6rem; padding: 1.5rem 1.2rem;
border-radius: 18px;
}
.booking-hero h1 {
font-size: 1.8rem;
}
.packages-grid {
grid-template-columns: 1fr;
gap: 1.2rem;
} }
.package-card { .package-card {
padding: 1.4rem; padding: 1.4rem 1.2rem;
border-radius: 18px;
gap: 1rem;
} }
.package-card__header { .package-card__header {
align-items: stretch; flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
} }
.package-card__price { .package-card__price {
justify-content: flex-start; justify-content: flex-start;
margin-top: 0.2rem;
}
.package-card__price span {
font-size: 2.2rem;
}
.btn {
padding: 1rem 1.2rem;
font-size: 1.05rem;
} }
} }
</style> </style>
@@ -291,7 +334,7 @@
</div> </div>
</article> </article>
<article class="package-card"> <article class="package-card package-card--highlight">
<div class="package-card__header"> <div class="package-card__header">
<div> <div>
<span class="package-card__tag">Premium</span> <span class="package-card__tag">Premium</span>
Website/templates/base.html
+10 -1
View File
@@ -3,7 +3,7 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
@@ -45,10 +45,19 @@
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
/* Verhinderung von iOS Auto-Zoom bei Inputs */
input, textarea, select, button {
font-family: inherit;
font-size: 16px;
}
html, html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
min-height: 100%; min-height: 100%;
font-family: "Public Sans", system-ui, sans-serif; font-family: "Public Sans", system-ui, sans-serif;
color: var(--text-main); color: var(--text-main);
Website/templates/chat.html
+11 -4
View File
@@ -28,16 +28,23 @@
<style> <style>
.panel { margin-bottom: 1rem; } .panel { margin-bottom: 1rem; }
.chat-box { background: #efeae2; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; } .chat-box { background: #efeae2; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; }
.messages { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; max-height: 440px; overflow-y: auto; padding: 1rem 0; } .messages { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; max-height: 50vh; overflow-y: auto; padding: 1rem 0; -webkit-overflow-scrolling: touch; }
.message { max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 10px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); word-wrap: break-word; } .message { max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 10px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); word-wrap: break-word; }
.message.admin { align-self: flex-start; background: #ffffff; border-top-left-radius: 0; } .message.admin { align-self: flex-start; background: #ffffff; border-top-left-radius: 0; }
.message.user { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; } .message.user { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; }
.message strong { display: block; font-size: 0.85rem; color: #075e54; margin-bottom: 0.2rem; } .message strong { display: block; font-size: 0.85rem; color: #075e54; margin-bottom: 0.2rem; }
.message p { margin: 0; font-size: 0.95rem; line-height: 1.4; } .message p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.message small { display: block; text-align: right; font-size: 0.7rem; color: #888; margin-top: 0.3rem; } .message small { display: block; text-align: right; font-size: 0.7rem; color: #888; margin-top: 0.3rem; }
.composer { display: flex; gap: 0.6rem; align-items: flex-end; } .composer { display: flex; gap: 0.6rem; align-items: flex-end; }
textarea { flex-grow: 1; border: 1px solid #c9d8e3; border-radius: 20px; padding: 0.7rem 1rem; font: inherit; resize: none; background: #ffffff; } textarea { flex-grow: 1; border: 1px solid #c9d8e3; border-radius: 20px; padding: 0.7rem 1rem; font: inherit; resize: none; background: #ffffff; font-size: 16px; }
button { flex-shrink: 0; width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 700; height: fit-content; margin-bottom: 0.2rem; } button { flex-shrink: 0; width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 700; height: fit-content; margin-bottom: 0.2rem; }
@media (max-width: 600px) {
.composer { flex-direction: column; align-items: stretch; }
textarea { width: 100%; border-radius: 16px; }
button { width: 100%; padding: 0.8rem; }
.chat-box { padding: 0.8rem; border-radius: 12px; }
}
</style> </style>
{% endblock %} {% endblock %}