fx/removes overflow|ft/adds animation|ft/adds sections
This commit is contained in:
parent
1f77b370f0
commit
0eed063478
Binary file not shown.
10
dist/index.html
vendored
10
dist/index.html
vendored
@ -2,19 +2,19 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Digitaler Frieden</title>
|
<title>Digitaler Frieden</title>
|
||||||
<link rel="stylesheet" href="/styles-dc44ed5cde15170.css" integrity="sha384-SOaE2ELbvnK3hgeOgdjq8nfXzXbcTKN1zIetkIpE3I5wjJOpYD3XfDiTymcvW0+7">
|
<link rel="stylesheet" href="/styles-77b8acd4b2c98b3f.css" integrity="sha384-WRHf7LqMXC3eYO3NWTkTOsiSr1uYbFjoizeyxYZImrp6DVo8O/Kg51vIIY8M8Roj">
|
||||||
<link rel="icon" href="/favicon-928ba63f33046eed.ico" integrity="sha384-Neq57jnFrTfqAN1JvKAVVVcH1EW3//cZHmK2NRXRlNrxAZR6ErTvXzbOLSyHzkA4">
|
<link rel="icon" href="/favicon-928ba63f33046eed.ico" integrity="sha384-Neq57jnFrTfqAN1JvKAVVVcH1EW3//cZHmK2NRXRlNrxAZR6ErTvXzbOLSyHzkA4">
|
||||||
|
|
||||||
|
|
||||||
<link rel="preload" href="/digitaler-frieden-28a0e60b94264a4e_bg.wasm" crossorigin="anonymous" integrity="sha384-8T2wZPlTwECUJCK4A7oRPYvCw/xySRaTfDZqfu9kc0379hN0BSRWkURe6T5TOuTD" as="fetch" type="application/wasm">
|
<link rel="preload" href="/digitaler-frieden-41eb229f6c516288_bg.wasm" crossorigin="anonymous" integrity="sha384-Q0T2T56iiwSG02s/4mtEOdpxvjBQbyYxts2yi95aI8YYmrLSsFL7e/o4rGVHjMSm" as="fetch" type="application/wasm">
|
||||||
<link rel="modulepreload" href="/digitaler-frieden-28a0e60b94264a4e.js" crossorigin="anonymous" integrity="sha384-5owiTz49KdxhXPCnfR2GokkJnFqa++HeraekuGgskT+OizWrNTANvcXzigi62YCH"></head>
|
<link rel="modulepreload" href="/digitaler-frieden-41eb229f6c516288.js" crossorigin="anonymous" integrity="sha384-5owiTz49KdxhXPCnfR2GokkJnFqa++HeraekuGgskT+OizWrNTANvcXzigi62YCH"></head>
|
||||||
<body class="bg-black text-white ">
|
<body class="bg-black text-white ">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import init, * as bindings from '/digitaler-frieden-28a0e60b94264a4e.js';
|
import init, * as bindings from '/digitaler-frieden-41eb229f6c516288.js';
|
||||||
init('/digitaler-frieden-28a0e60b94264a4e_bg.wasm');
|
init('/digitaler-frieden-41eb229f6c516288_bg.wasm');
|
||||||
window.wasmBindings = bindings;
|
window.wasmBindings = bindings;
|
||||||
|
|
||||||
</script><script>"use strict";
|
</script><script>"use strict";
|
||||||
|
|||||||
1
dist/public/mail.svg
vendored
Normal file
1
dist/public/mail.svg
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>
|
||||||
|
After Width: | Height: | Size: 279 B |
1
dist/public/paper_plane.svg
vendored
Normal file
1
dist/public/paper_plane.svg
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
|
||||||
|
After Width: | Height: | Size: 194 B |
126
dist/public/styles.css
vendored
126
dist/public/styles.css
vendored
@ -574,6 +574,10 @@ video {
|
|||||||
top: 1rem;
|
top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.m-0 {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-1 {
|
.mb-1 {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -586,6 +590,10 @@ video {
|
|||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mb-2 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-20 {
|
.mb-20 {
|
||||||
margin-bottom: 5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
@ -618,22 +626,10 @@ video {
|
|||||||
margin-inline-start: 0.5rem;
|
margin-inline-start: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-12 {
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-16 {
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-20 {
|
.mt-20 {
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-24 {
|
|
||||||
margin-top: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-4 {
|
.mt-4 {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
@ -642,10 +638,6 @@ video {
|
|||||||
margin-top: 16rem;
|
margin-top: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-8 {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -666,6 +658,10 @@ video {
|
|||||||
height: 4rem;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-24 {
|
||||||
|
height: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
.h-4 {
|
.h-4 {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
}
|
}
|
||||||
@ -726,6 +722,10 @@ video {
|
|||||||
max-width: 9rem;
|
max-width: 9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.max-w-56 {
|
||||||
|
max-width: 14rem;
|
||||||
|
}
|
||||||
|
|
||||||
.max-w-lg {
|
.max-w-lg {
|
||||||
max-width: 32rem;
|
max-width: 32rem;
|
||||||
}
|
}
|
||||||
@ -774,6 +774,12 @@ video {
|
|||||||
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
|
margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
|
margin-bottom: calc(4rem * var(--tw-space-y-reverse));
|
||||||
|
}
|
||||||
|
|
||||||
.space-y-24 > :not([hidden]) ~ :not([hidden]) {
|
.space-y-24 > :not([hidden]) ~ :not([hidden]) {
|
||||||
--tw-space-y-reverse: 0;
|
--tw-space-y-reverse: 0;
|
||||||
margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
|
margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
@ -817,9 +823,9 @@ video {
|
|||||||
padding-right: 3rem;
|
padding-right: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-6 {
|
.px-8 {
|
||||||
padding-left: 1.5rem;
|
padding-left: 2rem;
|
||||||
padding-right: 1.5rem;
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
@ -918,6 +924,74 @@ video {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mail-animation {
|
||||||
|
position:relative;
|
||||||
|
animation:mail-animation 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
@keyframes mail-animation {
|
||||||
|
0%, 10%{
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
transform: rotate(15deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
55% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-20deg);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top:-15%;
|
||||||
|
left:70%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
@keyframes mail-animation {
|
||||||
|
0% {
|
||||||
|
left: -20%;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
70%{
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
80%{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100%{
|
||||||
|
left: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cx-date-picker {
|
.cx-date-picker {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -1035,12 +1109,12 @@ video {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.md\:mt-24 {
|
.md\:mb-12 {
|
||||||
margin-top: 6rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:mt-32 {
|
.md\:mb-32 {
|
||||||
margin-top: 8rem;
|
margin-bottom: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:flex {
|
.md\:flex {
|
||||||
@ -1078,3 +1152,9 @@ video {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.lg\:mb-0 {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -574,6 +574,10 @@ video {
|
|||||||
top: 1rem;
|
top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.m-0 {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-1 {
|
.mb-1 {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -586,6 +590,10 @@ video {
|
|||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mb-2 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-20 {
|
.mb-20 {
|
||||||
margin-bottom: 5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
@ -618,22 +626,10 @@ video {
|
|||||||
margin-inline-start: 0.5rem;
|
margin-inline-start: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-12 {
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-16 {
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-20 {
|
.mt-20 {
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-24 {
|
|
||||||
margin-top: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-4 {
|
.mt-4 {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
@ -642,10 +638,6 @@ video {
|
|||||||
margin-top: 16rem;
|
margin-top: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-8 {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -666,6 +658,10 @@ video {
|
|||||||
height: 4rem;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-24 {
|
||||||
|
height: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
.h-4 {
|
.h-4 {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
}
|
}
|
||||||
@ -726,6 +722,10 @@ video {
|
|||||||
max-width: 9rem;
|
max-width: 9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.max-w-56 {
|
||||||
|
max-width: 14rem;
|
||||||
|
}
|
||||||
|
|
||||||
.max-w-lg {
|
.max-w-lg {
|
||||||
max-width: 32rem;
|
max-width: 32rem;
|
||||||
}
|
}
|
||||||
@ -774,6 +774,12 @@ video {
|
|||||||
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
|
margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
|
margin-bottom: calc(4rem * var(--tw-space-y-reverse));
|
||||||
|
}
|
||||||
|
|
||||||
.space-y-24 > :not([hidden]) ~ :not([hidden]) {
|
.space-y-24 > :not([hidden]) ~ :not([hidden]) {
|
||||||
--tw-space-y-reverse: 0;
|
--tw-space-y-reverse: 0;
|
||||||
margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
|
margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
@ -817,9 +823,9 @@ video {
|
|||||||
padding-right: 3rem;
|
padding-right: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-6 {
|
.px-8 {
|
||||||
padding-left: 1.5rem;
|
padding-left: 2rem;
|
||||||
padding-right: 1.5rem;
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
@ -918,6 +924,74 @@ video {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mail-animation {
|
||||||
|
position:relative;
|
||||||
|
animation:mail-animation 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
@keyframes mail-animation {
|
||||||
|
0%, 10%{
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
transform: rotate(15deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
55% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-20deg);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top:-15%;
|
||||||
|
left:70%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
@keyframes mail-animation {
|
||||||
|
0% {
|
||||||
|
left: -20%;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
70%{
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
80%{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100%{
|
||||||
|
left: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cx-date-picker {
|
.cx-date-picker {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -1035,12 +1109,12 @@ video {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.md\:mt-24 {
|
.md\:mb-12 {
|
||||||
margin-top: 6rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:mt-32 {
|
.md\:mb-32 {
|
||||||
margin-top: 8rem;
|
margin-bottom: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:flex {
|
.md\:flex {
|
||||||
@ -1078,3 +1152,9 @@ video {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.lg\:mb-0 {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
64
input.css
64
input.css
@ -25,6 +25,70 @@ opacity:0
|
|||||||
left:-200%;
|
left:-200%;
|
||||||
opacity:1}
|
opacity:1}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mail-animation {
|
||||||
|
position:relative;
|
||||||
|
animation:mail-animation 2s infinite;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
@keyframes mail-animation {
|
||||||
|
0%, 10%{
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
transform: rotate(15deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
55% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-20deg);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top:-15%;
|
||||||
|
left:70%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
@keyframes mail-animation {
|
||||||
|
0% {
|
||||||
|
left: -20%;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
70%{
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
80%{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
left: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cx-date-picker {
|
.cx-date-picker {
|
||||||
@apply inline-block relative;
|
@apply inline-block relative;
|
||||||
}
|
}
|
||||||
|
|||||||
1
public/mail.svg
Normal file
1
public/mail.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>
|
||||||
|
After Width: | Height: | Size: 279 B |
1
public/paper_plane.svg
Normal file
1
public/paper_plane.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
|
||||||
|
After Width: | Height: | Size: 194 B |
@ -574,6 +574,10 @@ video {
|
|||||||
top: 1rem;
|
top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.m-0 {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-1 {
|
.mb-1 {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -586,6 +590,10 @@ video {
|
|||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mb-2 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-20 {
|
.mb-20 {
|
||||||
margin-bottom: 5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
@ -618,22 +626,10 @@ video {
|
|||||||
margin-inline-start: 0.5rem;
|
margin-inline-start: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-12 {
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-16 {
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-20 {
|
.mt-20 {
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-24 {
|
|
||||||
margin-top: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-4 {
|
.mt-4 {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
@ -642,10 +638,6 @@ video {
|
|||||||
margin-top: 16rem;
|
margin-top: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-8 {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -666,6 +658,10 @@ video {
|
|||||||
height: 4rem;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-24 {
|
||||||
|
height: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
.h-4 {
|
.h-4 {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
}
|
}
|
||||||
@ -726,6 +722,10 @@ video {
|
|||||||
max-width: 9rem;
|
max-width: 9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.max-w-56 {
|
||||||
|
max-width: 14rem;
|
||||||
|
}
|
||||||
|
|
||||||
.max-w-lg {
|
.max-w-lg {
|
||||||
max-width: 32rem;
|
max-width: 32rem;
|
||||||
}
|
}
|
||||||
@ -774,6 +774,12 @@ video {
|
|||||||
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
|
margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
|
margin-bottom: calc(4rem * var(--tw-space-y-reverse));
|
||||||
|
}
|
||||||
|
|
||||||
.space-y-24 > :not([hidden]) ~ :not([hidden]) {
|
.space-y-24 > :not([hidden]) ~ :not([hidden]) {
|
||||||
--tw-space-y-reverse: 0;
|
--tw-space-y-reverse: 0;
|
||||||
margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
|
margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
@ -817,9 +823,9 @@ video {
|
|||||||
padding-right: 3rem;
|
padding-right: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-6 {
|
.px-8 {
|
||||||
padding-left: 1.5rem;
|
padding-left: 2rem;
|
||||||
padding-right: 1.5rem;
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
@ -918,6 +924,74 @@ video {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mail-animation {
|
||||||
|
position:relative;
|
||||||
|
animation:mail-animation 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
@keyframes mail-animation {
|
||||||
|
0%, 10%{
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
transform: rotate(15deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
55% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-20deg);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
left:22%;
|
||||||
|
top:15%;
|
||||||
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top:-15%;
|
||||||
|
left:70%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
@keyframes mail-animation {
|
||||||
|
0% {
|
||||||
|
left: -20%;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
70%{
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
80%{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100%{
|
||||||
|
left: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cx-date-picker {
|
.cx-date-picker {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -1035,12 +1109,12 @@ video {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.md\:mt-24 {
|
.md\:mb-12 {
|
||||||
margin-top: 6rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:mt-32 {
|
.md\:mb-32 {
|
||||||
margin-top: 8rem;
|
margin-bottom: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:flex {
|
.md\:flex {
|
||||||
@ -1078,3 +1152,9 @@ video {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.lg\:mb-0 {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -6,8 +6,8 @@ use crate::router::Route;
|
|||||||
#[function_component]
|
#[function_component]
|
||||||
pub fn Clues() -> Html {
|
pub fn Clues() -> Html {
|
||||||
html! {
|
html! {
|
||||||
<div class="px-6 mt-4 md:mt-24">
|
<div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
|
||||||
<section id="navigation">
|
<section id="navigation" class="mb-12">
|
||||||
<h3
|
<h3
|
||||||
class="text-primary
|
class="text-primary
|
||||||
hover:bg-text-dark
|
hover:bg-text-dark
|
||||||
@ -16,10 +16,8 @@ pub fn Clues() -> Html {
|
|||||||
hover:cursor-pointer
|
hover:cursor-pointer
|
||||||
transition duration-150
|
transition duration-150
|
||||||
font-bold text-xl
|
font-bold text-xl
|
||||||
max-w-xl
|
|
||||||
rounded-md
|
rounded-md
|
||||||
text-black
|
text-black
|
||||||
w-full
|
|
||||||
absolute
|
absolute
|
||||||
top-4
|
top-4
|
||||||
left-4
|
left-4
|
||||||
@ -46,8 +44,8 @@ pub fn Clues() -> Html {
|
|||||||
class="absolute top-4 right-4 md:min-w-56 md:w-56 w-0"
|
class="absolute top-4 right-4 md:min-w-56 md:w-56 w-0"
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section class="fade-in" id="content">
|
<section class="fade-in w-full max-w-lg" id="content">
|
||||||
<div class="mt-16 md:mt-32 flex flex-col items-center justify-between">
|
<div class="flex flex-col items-center justify-between">
|
||||||
<div class="flex flex-col items-start">
|
<div class="flex flex-col items-start">
|
||||||
<h3 class="text-3xl font-bold mb-4">{ "Spurhinweise hinzufügen" }</h3>
|
<h3 class="text-3xl font-bold mb-4">{ "Spurhinweise hinzufügen" }</h3>
|
||||||
<p class="mb-6">
|
<p class="mb-6">
|
||||||
@ -100,7 +98,7 @@ pub fn Clues() -> Html {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col justify-center items-center w-full mb-32 space-y-4 md:space-y-4"
|
class="flex flex-col justify-center items-center w-full mb-6 space-y-4 md:space-y-4"
|
||||||
>
|
>
|
||||||
<div class="flex justify-between w-full relative">
|
<div class="flex justify-between w-full relative">
|
||||||
<h3 class="font-bold text-2xl ">{ "Telefonnummern" }</h3>
|
<h3 class="font-bold text-2xl ">{ "Telefonnummern" }</h3>
|
||||||
@ -145,7 +143,10 @@ pub fn Clues() -> Html {
|
|||||||
<p class="text-md">{ "+49 9876 543 210" }</p>
|
<p class="text-md">{ "+49 9876 543 210" }</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-center max-w-lg w-full mb-6">
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="next" class="fade-in w-full flex justify-center max-w-lg mb-4">
|
||||||
<Link<Route>
|
<Link<Route>
|
||||||
to={Route::Relationship}
|
to={Route::Relationship}
|
||||||
classes={classes!("bg-primary",
|
classes={classes!("bg-primary",
|
||||||
@ -167,14 +168,12 @@ pub fn Clues() -> Html {
|
|||||||
"flex",
|
"flex",
|
||||||
"justify-center",
|
"justify-center",
|
||||||
"items-center",
|
"items-center",
|
||||||
|
"mb-12",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{ "Weiter" }
|
{ "Weiter" }
|
||||||
</Link<Route>>
|
</Link<Route>>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,120 +6,121 @@ use crate::router::Route;
|
|||||||
#[function_component]
|
#[function_component]
|
||||||
pub fn Deceased() -> Html {
|
pub fn Deceased() -> Html {
|
||||||
html! {
|
html! {
|
||||||
<div class="px-6 mt-20">
|
<div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
|
||||||
<section id="navigation">
|
<section id="navigation" class="mb-2 md:mb-12 lg:mb-0">
|
||||||
<h3
|
<h3
|
||||||
class="text-primary
|
class="text-primary
|
||||||
hover:bg-text-dark
|
hover:bg-text-dark
|
||||||
hover:text-white
|
hover:text-white
|
||||||
hover:-translate-y-1
|
hover:-translate-y-1
|
||||||
hover:cursor-pointer
|
hover:cursor-pointer
|
||||||
transition duration-150
|
transition duration-150
|
||||||
font-bold text-xl
|
font-bold text-xl
|
||||||
max-w-xl
|
|
||||||
rounded-md
|
rounded-md
|
||||||
text-black
|
text-black
|
||||||
w-full
|
|
||||||
absolute
|
absolute
|
||||||
top-4
|
top-4
|
||||||
left-4
|
left-4
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<Link<Route> to={Route::Register}>
|
<Link<Route> to={Route::Register}>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<svg
|
<svg
|
||||||
class="w-8 "
|
class="w-8 "
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
>
|
>
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
<path d="M0 0h24v24H0z" fill="none" />
|
||||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
||||||
</svg>
|
</svg>
|
||||||
{ "Zurück" }
|
{ "Zurück" }
|
||||||
</div>
|
</div>
|
||||||
</Link<Route>>
|
</Link<Route>>
|
||||||
</h3>
|
</h3>
|
||||||
<img
|
<img
|
||||||
src="public/digitaler-frieden_logo.jpg"
|
src="public/digitaler-frieden_logo.jpg"
|
||||||
alt="logo digitaler frieden"
|
alt="logo digitaler frieden"
|
||||||
class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"
|
class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section class="fade-in" id="content">
|
<section class="fade-in w-full max-w-lg" id="content">
|
||||||
<div class="-height mt-12 flex flex-col items-center">
|
<div class="flex flex-col justify-between items-start">
|
||||||
<h3 class="text-3xl font-bold mb-6">{ "Verstorbene Person" }</h3>
|
<h3 class="text-3xl font-bold mb-6">{ "Verstorbene Person" }</h3>
|
||||||
<div class="group max-w-xl w-full mb-4">
|
<div class="group w-full mb-4">
|
||||||
<p class="text-start text-md mb-1">{ "Vorname" }</p>
|
<p class="text-start text-md mb-1">{ "Vorname" }</p>
|
||||||
<input
|
<input
|
||||||
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="group max-w-xl w-full mb-4">
|
<div class="group w-full mb-4">
|
||||||
<p class="text-start text-md mb-1">{ "Nachname" }</p>
|
<p class="text-start text-md mb-1">{ "Nachname" }</p>
|
||||||
<input
|
<input
|
||||||
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="group max-w-xl w-full mb-4">
|
<div class="group w-full mb-4">
|
||||||
<div class="flex justify-between space-x-4">
|
<div class="flex justify-between space-x-4">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<p class="text-start text-md mb-1">{ "Straße" }</p>
|
<p class="text-start text-md mb-1">{ "Straße" }</p>
|
||||||
<input
|
<input
|
||||||
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-24">
|
<div class="w-24">
|
||||||
<p class="text-start text-md mb-1 w-16">{ "Nr." }</p>
|
<p class="text-start text-md mb-1 w-16">{ "Nr." }</p>
|
||||||
<input
|
<input
|
||||||
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="group w-full mb-4">
|
||||||
|
<p class="text-start text-md mb-1">{ "Postleitzahl" }</p>
|
||||||
|
<input
|
||||||
|
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="group w-full mb-4">
|
||||||
|
<p class="text-start text-md mb-1">{ "Ort" }</p>
|
||||||
|
<input
|
||||||
|
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="group w-full mb-4">
|
||||||
|
<p class="text-start text-md mb-1">{ "Geburtsort" }</p>
|
||||||
|
<input
|
||||||
|
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="group w-full mb-4">
|
||||||
|
<p class="text-start text-md mb-1">{ "Geburtstag" }</p>
|
||||||
|
<input
|
||||||
|
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md cx-date-picker"
|
||||||
|
type="date"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="group w-full mb-5">
|
||||||
|
<p class="text-start text-md mb-1">{ "Todestag" }</p>
|
||||||
|
<input
|
||||||
|
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md cx-date-picker"
|
||||||
|
type="date"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="group max-w-xl w-full mb-4">
|
</section>
|
||||||
<p class="text-start text-md mb-1">{ "Postleitzahl" }</p>
|
<section id="next" class="w-full fade-in flex justify-center max-w-lg ">
|
||||||
<input
|
|
||||||
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="group max-w-xl w-full mb-4">
|
|
||||||
<p class="text-start text-md mb-1">{ "Ort" }</p>
|
|
||||||
<input
|
|
||||||
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="group max-w-xl w-full mb-4">
|
|
||||||
<p class="text-start text-md mb-1">{ "Geburtsort" }</p>
|
|
||||||
<input
|
|
||||||
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="group max-w-xl w-full mb-4">
|
|
||||||
<p class="text-start text-md mb-1">{ "Geburtstag" }</p>
|
|
||||||
<input
|
|
||||||
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md cx-date-picker"
|
|
||||||
type="date"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="group max-w-xl w-full mb-5">
|
|
||||||
<p class="text-start text-md mb-1">{ "Todestag" }</p>
|
|
||||||
<input
|
|
||||||
class="duration-700 font-bold text-md transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-b text-center focus-within:text-black w-full h-10 rounded-md cx-date-picker"
|
|
||||||
type="date"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Link<Route>
|
<Link<Route>
|
||||||
to={Route::Clues}
|
to={Route::Clues}
|
||||||
classes={yew::classes!(
|
classes={yew::classes!(
|
||||||
"bg-primary",
|
"bg-primary",
|
||||||
"hover:bg-primary-dark",
|
"hover:bg-primary-dark",
|
||||||
"hover:text-white",
|
"hover:text-white",
|
||||||
"hover:-translate-y-1",
|
"hover:-translate-y-1",
|
||||||
@ -132,13 +133,13 @@ pub fn Deceased() -> Html {
|
|||||||
"text-center",
|
"text-center",
|
||||||
"w-full",
|
"w-full",
|
||||||
"h-16",
|
"h-16",
|
||||||
"mt-8", "flex", "justify-center", "items-center",
|
"flex", "justify-center", "items-center",
|
||||||
|
"mb-12",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{ "Weiter" }
|
{ "Weiter" }
|
||||||
</Link<Route>>
|
</Link<Route>>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,8 +6,8 @@ use crate::router::Route;
|
|||||||
#[function_component]
|
#[function_component]
|
||||||
pub fn Register() -> Html {
|
pub fn Register() -> Html {
|
||||||
html! {
|
html! {
|
||||||
<div class="px-6 mt-20">
|
<div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
|
||||||
<section id="navigation">
|
<section id="navigation" class="mb-2 md:mb-12 lg:mb-0">
|
||||||
<h3
|
<h3
|
||||||
class="text-primary
|
class="text-primary
|
||||||
hover:bg-text-dark
|
hover:bg-text-dark
|
||||||
@ -16,10 +16,8 @@ pub fn Register() -> Html {
|
|||||||
hover:cursor-pointer
|
hover:cursor-pointer
|
||||||
transition duration-150
|
transition duration-150
|
||||||
font-bold text-xl
|
font-bold text-xl
|
||||||
max-w-xl
|
|
||||||
rounded-md
|
rounded-md
|
||||||
text-black
|
text-black
|
||||||
w-full
|
|
||||||
absolute
|
absolute
|
||||||
top-4
|
top-4
|
||||||
left-4
|
left-4
|
||||||
@ -46,8 +44,8 @@ pub fn Register() -> Html {
|
|||||||
class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"
|
class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section id="content" class="fade-in">
|
<section id="content" class="fade-in w-full max-w-lg">
|
||||||
<div class="-height mt-12 flex flex-col items-center">
|
<div class="flex flex-col items-start">
|
||||||
<h3 class="text-3xl font-bold mb-6">{ "Registrierung abschließen" }</h3>
|
<h3 class="text-3xl font-bold mb-6">{ "Registrierung abschließen" }</h3>
|
||||||
<div class="group max-w-xl w-full mb-4">
|
<div class="group max-w-xl w-full mb-4">
|
||||||
<p class="text-start text-md mb-1">{ "Vorname" }</p>
|
<p class="text-start text-md mb-1">{ "Vorname" }</p>
|
||||||
|
|||||||
@ -8,8 +8,8 @@ pub fn Relationship() -> Html {
|
|||||||
let classes = classes!("fade-in");
|
let classes = classes!("fade-in");
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<div class="px-6 mt-4 md:mt-24 ">
|
<div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
|
||||||
<section id="navigation">
|
<section id="navigation" class="mb-2 md:mb-32">
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
<h3
|
<h3
|
||||||
class="text-primary
|
class="text-primary
|
||||||
@ -19,11 +19,10 @@ pub fn Relationship() -> Html {
|
|||||||
hover:cursor-pointer
|
hover:cursor-pointer
|
||||||
transition duration-150
|
transition duration-150
|
||||||
font-bold text-xl
|
font-bold text-xl
|
||||||
max-w-xl
|
|
||||||
rounded-md
|
rounded-md
|
||||||
text-black
|
text-black
|
||||||
w-full
|
|
||||||
absolute
|
absolute
|
||||||
|
text-center
|
||||||
top-4
|
top-4
|
||||||
left-4
|
left-4
|
||||||
"
|
"
|
||||||
@ -51,8 +50,8 @@ pub fn Relationship() -> Html {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="content" class={classes}>
|
<section id="content" class={classes}>
|
||||||
<div class="mt-24 md:mt-32 flex flex-col items-center ">
|
<div class="flex flex-col items-center ">
|
||||||
<h3 class="text-3xl font-bold mb-6">
|
<h3 class="text-3xl font-bold mb-6 text-center">
|
||||||
{ "In welcher Beziehung stehst du zu der verstorbenen Person?" }
|
{ "In welcher Beziehung stehst du zu der verstorbenen Person?" }
|
||||||
</h3>
|
</h3>
|
||||||
<div class="flex flex-col items-start min-w-72 md:w-auto mb-32">
|
<div class="flex flex-col items-start min-w-72 md:w-auto mb-32">
|
||||||
|
|||||||
@ -6,8 +6,9 @@ use crate::router::Route;
|
|||||||
#[function_component]
|
#[function_component]
|
||||||
pub fn SignUp() -> Html {
|
pub fn SignUp() -> Html {
|
||||||
html! {
|
html! {
|
||||||
<div class="h-full px-6 mt-4">
|
<div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
|
||||||
<section id="navigation">
|
<section id="navigation" class="mb-12">
|
||||||
|
|
||||||
<h3
|
<h3
|
||||||
class="text-primary
|
class="text-primary
|
||||||
hover:bg-text-dark
|
hover:bg-text-dark
|
||||||
@ -16,10 +17,8 @@ pub fn SignUp() -> Html {
|
|||||||
hover:cursor-pointer
|
hover:cursor-pointer
|
||||||
transition duration-150
|
transition duration-150
|
||||||
font-bold text-xl
|
font-bold text-xl
|
||||||
max-w-xl
|
|
||||||
rounded-md
|
rounded-md
|
||||||
text-black
|
text-black
|
||||||
w-full
|
|
||||||
top-4
|
top-4
|
||||||
left-4
|
left-4
|
||||||
absolute
|
absolute
|
||||||
@ -46,7 +45,7 @@ pub fn SignUp() -> Html {
|
|||||||
class="top-4 right-4 absolute md:min-w-56 md:w-56 w-0"
|
class="top-4 right-4 absolute md:min-w-56 md:w-56 w-0"
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section id="content" class="fade-in">
|
<section id="content" class="w-full fade-in">
|
||||||
<div class="min-height mt-64 md:flex md:flex-col md:items-center">
|
<div class="min-height mt-64 md:flex md:flex-col md:items-center">
|
||||||
<h3 class="text-3xl font-bold mb-6">{ "Jetzt registrieren" }</h3>
|
<h3 class="text-3xl font-bold mb-6">{ "Jetzt registrieren" }</h3>
|
||||||
<p>{ "Gib deine E-Mail Adresse ein." }</p>
|
<p>{ "Gib deine E-Mail Adresse ein." }</p>
|
||||||
|
|||||||
@ -6,93 +6,94 @@ use crate::router::Route;
|
|||||||
#[function_component]
|
#[function_component]
|
||||||
pub fn Verify() -> Html {
|
pub fn Verify() -> Html {
|
||||||
html! {
|
html! {
|
||||||
<div class="px-6 mt-4 md:mt-24">
|
<div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
|
||||||
<section id="navigation">
|
<section id="navigation" class="mb-2 md:mb-12 lg:mb-0">
|
||||||
<h3
|
<h3
|
||||||
class="text-primary
|
class="text-primary
|
||||||
hover:bg-text-dark
|
hover:bg-text-dark
|
||||||
hover:text-white
|
hover:text-white
|
||||||
hover:-translate-y-1
|
hover:-translate-y-1
|
||||||
hover:cursor-pointer
|
hover:cursor-pointer
|
||||||
transition duration-150
|
transition duration-150
|
||||||
font-bold text-xl
|
font-bold text-xl
|
||||||
max-w-xl
|
|
||||||
rounded-md
|
rounded-md
|
||||||
text-black
|
text-black
|
||||||
w-full
|
|
||||||
absolute
|
absolute
|
||||||
top-4
|
top-4
|
||||||
left-4
|
left-4
|
||||||
"
|
"
|
||||||
>
|
|
||||||
<Link<Route> to={Route::SignUp}>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<svg
|
|
||||||
class="w-8 "
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
|
||||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
|
||||||
</svg>
|
|
||||||
{ "Zurück" }
|
|
||||||
</div>
|
|
||||||
</Link<Route>>
|
|
||||||
</h3>
|
|
||||||
<img
|
|
||||||
src="public/digitaler-frieden_logo.jpg"
|
|
||||||
alt="logo digitaler frieden"
|
|
||||||
class="absolute top-4 right-4 md:min-w-56 md:w-56 w-0"
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
<section id="content" class="fade-in">
|
|
||||||
<div class="mt-64 flex flex-col items-center">
|
|
||||||
<h3 class="text-3xl font-bold mb-6">{ "Verifizieren" }</h3>
|
|
||||||
<div class="flex flex-col items-start min-w-72 md:w-auto">
|
|
||||||
<p class="mb-3">{ "Bitte verifiziere deine E-Mail Adresse." }</p>
|
|
||||||
<p class="mb-12">{ "Wir haben dir eine E-Mail geschickt." }</p>
|
|
||||||
<p class="mb-8">{ "Dann geht es hier weiter." }</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center max-w-xl w-full mb-6">
|
|
||||||
<Link<Route>
|
|
||||||
to={Route::Register}
|
|
||||||
classes={classes!(
|
|
||||||
"bg-primary",
|
|
||||||
"hover:bg-primary-dark",
|
|
||||||
"hover:text-white",
|
|
||||||
"hover:-translate-y-1",
|
|
||||||
"hover:cursor-pointer",
|
|
||||||
"transition", "duration-150",
|
|
||||||
"font-bold", "text-xl",
|
|
||||||
"rounded-md",
|
|
||||||
"text-black",
|
|
||||||
"text-center",
|
|
||||||
"max-w-sm",
|
|
||||||
"w-full",
|
|
||||||
"min-h-12",
|
|
||||||
"h-12",
|
|
||||||
"flex", "justify-center", "items-center",
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{ "Weiter" }
|
<Link<Route> to={Route::SignUp}>
|
||||||
</Link<Route>>
|
<div class="flex items-center">
|
||||||
</div>
|
<svg
|
||||||
<div class="flex flex-col items-start min-w-72 md:w-auto">
|
class="w-8 "
|
||||||
<p class="mb-1">{ "Noch keine E-Mail erhalten?" }</p>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<p class="mb-4">{ "Spam Ordner schon überprüft?" }</p>
|
viewBox="0 0 24 24"
|
||||||
<div
|
fill="currentColor"
|
||||||
class="text-primary hover:text-white
|
>
|
||||||
|
<path d="M0 0h24v24H0z" fill="none" />
|
||||||
|
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
||||||
|
</svg>
|
||||||
|
{ "Zurück" }
|
||||||
|
</div>
|
||||||
|
</Link<Route>>
|
||||||
|
</h3>
|
||||||
|
<img
|
||||||
|
src="public/digitaler-frieden_logo.jpg"
|
||||||
|
alt="logo digitaler frieden"
|
||||||
|
class="absolute top-4 right-4 md:min-w-56 md:w-56 w-0"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
<section id="content" class="fade-in">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<h3 class="text-3xl font-bold mb-6">{ "Verifizieren" }</h3>
|
||||||
|
<div class="flex flex-col items-start min-w-72 md:w-auto">
|
||||||
|
<p class="mb-3">{ "Bitte verifiziere deine E-Mail Adresse." }</p>
|
||||||
|
<p class="mb-8">{ "Wir haben dir eine E-Mail geschickt." }</p>
|
||||||
|
<div class="h-24 w-full">
|
||||||
|
<svg class="mail-animation mb-12 w-16 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
|
||||||
|
</div>
|
||||||
|
<p class="mb-8">{ "Dann geht es hier weiter." }</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center max-w-56 w-full mb-6">
|
||||||
|
<Link<Route>
|
||||||
|
to={Route::Register}
|
||||||
|
classes={classes!(
|
||||||
|
"bg-primary",
|
||||||
|
"hover:bg-primary-dark",
|
||||||
|
"hover:text-white",
|
||||||
|
"hover:-translate-y-1",
|
||||||
|
"hover:cursor-pointer",
|
||||||
|
"transition", "duration-150",
|
||||||
|
"font-bold", "text-xl",
|
||||||
|
"rounded-md",
|
||||||
|
"text-black",
|
||||||
|
"text-center",
|
||||||
|
"max-w-sm",
|
||||||
|
"w-full",
|
||||||
|
"min-h-12",
|
||||||
|
"h-12",
|
||||||
|
"flex", "justify-center", "items-center",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{ "Weiter" }
|
||||||
|
</Link<Route>>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-start min-w-72 md:w-auto">
|
||||||
|
<p class="mb-1">{ "Noch keine E-Mail erhalten?" }</p>
|
||||||
|
<p class="mb-4">{ "Spam Ordner schon überprüft?" }</p>
|
||||||
|
<div
|
||||||
|
class="text-primary hover:text-white
|
||||||
hover:-translate-y-1
|
hover:-translate-y-1
|
||||||
hover:cursor-pointer
|
hover:cursor-pointer
|
||||||
transition duration-150
|
transition duration-150
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<Link<Route> to={Route::SignUp}>{ "Erneut senden" }</Link<Route>>
|
<Link<Route> to={Route::SignUp}>{ "Erneut senden" }</Link<Route>>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user