Massiv +
This commit is contained in:
42
backend/static/assets/location-map-preview.svg
Normal file
42
backend/static/assets/location-map-preview.svg
Normal file
@@ -0,0 +1,42 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 700" role="img" aria-label="Kartenvorschau">
|
||||
<defs>
|
||||
<linearGradient id="land" x1="0" x2="1" y1="0" y2="1">
|
||||
<stop offset="0" stop-color="#d8e6de" />
|
||||
<stop offset="1" stop-color="#cadcd2" />
|
||||
</linearGradient>
|
||||
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#1f2a24" flood-opacity="0.16"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="1600" height="700" fill="url(#land)"/>
|
||||
|
||||
<path d="M0 420 C120 380, 200 420, 300 390 C420 360, 530 440, 670 410 C770 390, 860 350, 980 380 C1110 420, 1210 370, 1330 410 C1430 440, 1500 410, 1600 430 L1600 700 L0 700 Z" fill="#b8d2c2" opacity="0.8"/>
|
||||
|
||||
<path d="M40 80 L520 560" stroke="#f5f5f2" stroke-width="28" stroke-linecap="round"/>
|
||||
<path d="M580 50 L980 650" stroke="#f7f7f4" stroke-width="26" stroke-linecap="round"/>
|
||||
<path d="M1050 70 L1540 520" stroke="#f4f5f2" stroke-width="24" stroke-linecap="round"/>
|
||||
<path d="M160 640 L620 170" stroke="#f2f4ef" stroke-width="20" stroke-linecap="round"/>
|
||||
|
||||
<path d="M30 120 L500 590" stroke="#9eb8aa" stroke-width="5" stroke-dasharray="12 14"/>
|
||||
<path d="M600 90 L1000 670" stroke="#9fb9ab" stroke-width="5" stroke-dasharray="12 14"/>
|
||||
<path d="M1070 100 L1555 540" stroke="#9db6a8" stroke-width="5" stroke-dasharray="12 14"/>
|
||||
<path d="M180 655 L640 185" stroke="#9db7a9" stroke-width="5" stroke-dasharray="12 14"/>
|
||||
|
||||
<circle cx="1080" cy="240" r="55" fill="#b0cbba" opacity="0.9"/>
|
||||
<circle cx="1200" cy="500" r="48" fill="#abc6b5" opacity="0.85"/>
|
||||
<circle cx="860" cy="540" r="45" fill="#aec8b8" opacity="0.88"/>
|
||||
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="105" y="78" width="560" height="168" rx="16" fill="#ffffff" opacity="0.96"/>
|
||||
<text x="135" y="125" font-size="34" font-family="Arial, Helvetica, sans-serif" fill="#20372d" font-weight="700">Klostermühle Kiedrich</text>
|
||||
<text x="135" y="168" font-size="30" font-family="Arial, Helvetica, sans-serif" fill="#385246">An d. Klostermühle 3, 65399 Kiedrich</text>
|
||||
<text x="135" y="210" font-size="28" font-family="Arial, Helvetica, sans-serif" fill="#4f6a5d">Kartenvorschau</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(980 320)">
|
||||
<circle cx="0" cy="0" r="34" fill="#c83c38"/>
|
||||
<circle cx="0" cy="0" r="14" fill="#f8d9d7"/>
|
||||
<path d="M0 34 L-17 98 L17 98 Z" fill="#c83c38"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -55,6 +55,8 @@ h3 {
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -185,6 +187,89 @@ input[type="file"]:focus {
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
border: 1px solid rgba(39, 66, 53, 0.14);
|
||||
border-radius: 14px;
|
||||
padding: 0.9rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
margin: 0 0 0.45rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.member-choice-row {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.member-age-wrap {
|
||||
display: none;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.member-age-wrap.is-visible {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.member-age-wrap small {
|
||||
color: rgba(31, 31, 31, 0.68);
|
||||
}
|
||||
|
||||
.upload-card {
|
||||
max-width: 760px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.upload-intro {
|
||||
margin-top: -0.15rem;
|
||||
margin-bottom: 0.3rem;
|
||||
color: rgba(31, 31, 31, 0.82);
|
||||
}
|
||||
|
||||
.upload-picker {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
border: 1px dashed rgba(39, 66, 53, 0.35);
|
||||
border-radius: 14px;
|
||||
padding: 0.9rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
|
||||
}
|
||||
|
||||
.upload-picker:hover {
|
||||
border-color: rgba(39, 66, 53, 0.55);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.upload-picker:focus-within {
|
||||
border-color: rgba(184, 145, 76, 0.88);
|
||||
box-shadow: 0 0 0 3px rgba(184, 145, 76, 0.18);
|
||||
}
|
||||
|
||||
.upload-picker-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.upload-picker-subtitle {
|
||||
color: rgba(31, 31, 31, 0.66);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
margin: -0.2rem 0 0.1rem;
|
||||
color: rgba(31, 31, 31, 0.72);
|
||||
@@ -193,6 +278,7 @@ input[type="file"]:focus {
|
||||
|
||||
#extra-file-inputs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
@@ -200,17 +286,61 @@ input[type="file"]:focus {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.upload-add-wrap {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.upload-add-wrap.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-count {
|
||||
margin: 0.2rem 0 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.upload-ready {
|
||||
margin: -0.2rem 0 0;
|
||||
color: rgba(39, 66, 53, 0.88);
|
||||
font-weight: 600;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-ready.is-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload-file-list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: rgba(31, 31, 31, 0.82);
|
||||
max-height: 9rem;
|
||||
max-height: 10rem;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.upload-file-list li {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.42rem;
|
||||
border: 1px solid rgba(39, 66, 53, 0.2);
|
||||
border-radius: 999px;
|
||||
padding: 0.32rem 0.68rem;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.upload-file-remove {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: rgba(39, 66, 53, 0.82);
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -233,6 +363,14 @@ input[type="file"]:focus {
|
||||
box-shadow: 0 10px 24px rgba(39, 66, 53, 0.2);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
cursor: not-allowed;
|
||||
background: rgba(39, 66, 53, 0.45);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
color: var(--forest);
|
||||
background: transparent;
|
||||
@@ -250,6 +388,16 @@ input[type="file"]:focus {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toolbar-nav-btn {
|
||||
padding: 0.42rem 0.62rem;
|
||||
}
|
||||
|
||||
.toolbar-nav-btn svg {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.flash {
|
||||
padding: 0.7rem 0.9rem;
|
||||
border-radius: 10px;
|
||||
@@ -501,6 +649,80 @@ input[type="file"]:focus {
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
.map-consent {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
padding: 0.9rem;
|
||||
border: 1px solid rgba(39, 66, 53, 0.14);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.map-consent p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.map-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 7;
|
||||
min-height: 0;
|
||||
border: 1px solid rgba(39, 66, 53, 0.16);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
background-color: rgba(221, 230, 225, 0.95);
|
||||
background-image:
|
||||
linear-gradient(180deg, rgba(28, 45, 37, 0.22), rgba(28, 45, 37, 0.22)),
|
||||
var(--map-preview-image);
|
||||
background-size: contain;
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1rem;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
|
||||
}
|
||||
|
||||
.map-preview:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 24px rgba(39, 66, 53, 0.14);
|
||||
filter: brightness(1.02);
|
||||
}
|
||||
|
||||
.map-preview-overlay {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: rgba(39, 66, 53, 0.9);
|
||||
border-radius: 999px;
|
||||
padding: 0.48rem 0.82rem;
|
||||
}
|
||||
|
||||
.map-embed-target:not(:empty) {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.location-actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 0.55rem;
|
||||
gap: 0.55rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.location-actions .btn {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
padding: 0.58rem 0.88rem;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.location-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid rgba(39, 66, 53, 0.12);
|
||||
background: rgba(255, 255, 255, 0.64);
|
||||
|
||||
Reference in New Issue
Block a user