itsscb/digitaler-frieden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ft/adds relationship page

Browse Source 
fx/repairs button hover animation

ft/adds fade-in animation #TODO: other pages #TODO:fade-out
This commit is contained in:
itsscb 2024-04-21 23:25:21 +02:00
parent 5fa942d916
commit 5ab66cb4eb
15 changed files with 380 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dist/digitaler-frieden-a46945b7af60aeea.js → dist/digitaler-frieden-9a1d4250dfda5ac0.js vendored
View File

@ -910,16 +910,16 @@ function __wbg_get_imports() {
const ret = wasm.memory; const ret = wasm.memory;
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper4788 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper4869 = function(arg0, arg1, arg2) {
const ret = makeClosure(arg0, arg1, 624, __wbg_adapter_42); const ret = makeClosure(arg0, arg1, 653, __wbg_adapter_42);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper6487 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper6568 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 794, __wbg_adapter_45); const ret = makeMutClosure(arg0, arg1, 823, __wbg_adapter_45);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper6791 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper6872 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 819, __wbg_adapter_48); const ret = makeMutClosure(arg0, arg1, 848, __wbg_adapter_48);
return addHeapObject(ret); return addHeapObject(ret);
}; };

BIN
dist/digitaler-frieden-a46945b7af60aeea_bg.wasm → dist/digitaler-frieden-9a1d4250dfda5ac0_bg.wasm vendored
View File

Binary file not shown.

10
dist/index.html vendored
View File

@ -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-790afe2a8448ce4f.css" integrity="sha384-EsXQBT2+XeCh0YQ1OnhHBfYI32w+oQI1i6OEuKzRm3gHDlbFTi/vIhK8XOpPrW0t"> <link rel="stylesheet" href="/styles-2a228ed339d2e32b.css" integrity="sha384-fplUaLfyn3FCBU/L25RKdw1k2Z0dOTOB6QsY1SHW4hOF22SNeu5eKT5XtDBQiXzI">
<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-a46945b7af60aeea_bg.wasm" crossorigin="anonymous" integrity="sha384-U/7UNFoZnY+Sr8vCGT6tdip1lM96wbG2Y1WpnzK8l6gTBDM2ozTmHrjFOVC05D9j" as="fetch" type="application/wasm"> <link rel="preload" href="/digitaler-frieden-9a1d4250dfda5ac0_bg.wasm" crossorigin="anonymous" integrity="sha384-YLHBTB17zAWUG2FevMs+gJC2CKO3NxDUi8dgdd0OUeu31NL19P/5uvoZbtJ5VtmP" as="fetch" type="application/wasm">
<link rel="modulepreload" href="/digitaler-frieden-a46945b7af60aeea.js" crossorigin="anonymous" integrity="sha384-l/ijXtqMmltzylPhQmf23Bw4ACa18XnhwHhNVn6FJhHWESm5iOvZ9LA7dEJw3gNf"></head> <link rel="modulepreload" href="/digitaler-frieden-9a1d4250dfda5ac0.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-a46945b7af60aeea.js'; import init, * as bindings from '/digitaler-frieden-9a1d4250dfda5ac0.js';
init('/digitaler-frieden-a46945b7af60aeea_bg.wasm'); init('/digitaler-frieden-9a1d4250dfda5ac0_bg.wasm');
window.wasmBindings = bindings; window.wasmBindings = bindings;
</script><script>"use strict"; </script><script>"use strict";

63
dist/public/styles.css vendored
View File

@ -594,6 +594,10 @@ video {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.mb-32 {
margin-bottom: 8rem;
}
.mb-4 { .mb-4 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -610,6 +614,10 @@ video {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.ms-2 {
margin-inline-start: 0.5rem;
}
.mt-12 { .mt-12 {
margin-top: 3rem; margin-top: 3rem;
} }
@ -658,6 +666,10 @@ video {
height: 4rem; height: 4rem;
} }
.h-4 {
height: 1rem;
}
.h-full { .h-full {
height: 100%; height: 100%;
} }
@ -686,6 +698,10 @@ video {
width: 6rem; width: 6rem;
} }
.w-4 {
width: 1rem;
}
.w-8 { .w-8 {
width: 2rem; width: 2rem;
} }
@ -722,15 +738,6 @@ video {
max-width: 36rem; max-width: 36rem;
} }
.-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
@ -877,6 +884,40 @@ video {
transition-duration: 700ms; transition-duration: 700ms;
} }
.fade-in{
position:relative;
animation:fadein 1s
}
@keyframes fadein{
from{
left:200%;
opacity:0;
}
to{
left:0;
opacity:1
}
}
.fade-out{
position:relative;
animation:fadeout 1s
}
@keyframes fadeout{
from{
left:0;
opacity:0
}
to{
left:-200%;
opacity:1
}
}
.cx-date-picker { .cx-date-picker {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -919,6 +960,10 @@ video {
border-color: rgba(51,217,178,1.0); border-color: rgba(51,217,178,1.0);
} }
.accent-primary {
accent-color: rgba(51, 217, 178,1.0);
}
.text-primary { .text-primary {
color: rgba(51, 217, 178,1.0); color: rgba(51, 217, 178,1.0);
} }

63
dist/styles-790afe2a8448ce4f.css → dist/styles-2a228ed339d2e32b.css vendored
View File

@ -594,6 +594,10 @@ video {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.mb-32 {
margin-bottom: 8rem;
}
.mb-4 { .mb-4 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -610,6 +614,10 @@ video {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.ms-2 {
margin-inline-start: 0.5rem;
}
.mt-12 { .mt-12 {
margin-top: 3rem; margin-top: 3rem;
} }
@ -658,6 +666,10 @@ video {
height: 4rem; height: 4rem;
} }
.h-4 {
height: 1rem;
}
.h-full { .h-full {
height: 100%; height: 100%;
} }
@ -686,6 +698,10 @@ video {
width: 6rem; width: 6rem;
} }
.w-4 {
width: 1rem;
}
.w-8 { .w-8 {
width: 2rem; width: 2rem;
} }
@ -722,15 +738,6 @@ video {
max-width: 36rem; max-width: 36rem;
} }
.-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
@ -877,6 +884,40 @@ video {
transition-duration: 700ms; transition-duration: 700ms;
} }
.fade-in{
position:relative;
animation:fadein 1s
}
@keyframes fadein{
from{
left:200%;
opacity:0;
}
to{
left:0;
opacity:1
}
}
.fade-out{
position:relative;
animation:fadeout 1s
}
@keyframes fadeout{
from{
left:0;
opacity:0
}
to{
left:-200%;
opacity:1
}
}
.cx-date-picker { .cx-date-picker {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -919,6 +960,10 @@ video {
border-color: rgba(51,217,178,1.0); border-color: rgba(51,217,178,1.0);
} }
.accent-primary {
accent-color: rgba(51, 217, 178,1.0);
}
.text-primary { .text-primary {
color: rgba(51, 217, 178,1.0); color: rgba(51, 217, 178,1.0);
} }

27
input.css
View File

@ -2,6 +2,29 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.fade-in{
position:relative;
animation:fadein 1s}
@keyframes fadein{
from{
left:200%;
opacity:0;
} to{
left:0;
opacity:1}
}
.fade-out{
position:relative;
animation:fadeout 1s}
@keyframes fadeout{
from{
left:0;
opacity:0
} to{
left:-200%;
opacity:1}
}
.cx-date-picker { .cx-date-picker {
@apply inline-block relative; @apply inline-block relative;
} }
@ -43,6 +66,10 @@
border-color: rgba(51,217,178,1.0); border-color: rgba(51,217,178,1.0);
} }
.accent-primary {
accent-color: rgba(51, 217, 178,1.0);
}
.text-primary { .text-primary {
color: rgba(51, 217, 178,1.0); color: rgba(51, 217, 178,1.0);
} }

63
public/styles.css
View File

@ -594,6 +594,10 @@ video {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.mb-32 {
margin-bottom: 8rem;
}
.mb-4 { .mb-4 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -610,6 +614,10 @@ video {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.ms-2 {
margin-inline-start: 0.5rem;
}
.mt-12 { .mt-12 {
margin-top: 3rem; margin-top: 3rem;
} }
@ -658,6 +666,10 @@ video {
height: 4rem; height: 4rem;
} }
.h-4 {
height: 1rem;
}
.h-full { .h-full {
height: 100%; height: 100%;
} }
@ -686,6 +698,10 @@ video {
width: 6rem; width: 6rem;
} }
.w-4 {
width: 1rem;
}
.w-8 { .w-8 {
width: 2rem; width: 2rem;
} }
@ -722,15 +738,6 @@ video {
max-width: 36rem; max-width: 36rem;
} }
.-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
@ -877,6 +884,40 @@ video {
transition-duration: 700ms; transition-duration: 700ms;
} }
.fade-in{
position:relative;
animation:fadein 1s
}
@keyframes fadein{
from{
left:200%;
opacity:0;
}
to{
left:0;
opacity:1
}
}
.fade-out{
position:relative;
animation:fadeout 1s
}
@keyframes fadeout{
from{
left:0;
opacity:0
}
to{
left:-200%;
opacity:1
}
}
.cx-date-picker { .cx-date-picker {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -919,6 +960,10 @@ video {
border-color: rgba(51,217,178,1.0); border-color: rgba(51,217,178,1.0);
} }
.accent-primary {
accent-color: rgba(51, 217, 178,1.0);
}
.text-primary { .text-primary {
color: rgba(51, 217, 178,1.0); color: rgba(51, 217, 178,1.0);
} }

3
src/pages.rs
View File

@ -10,6 +10,9 @@ pub use deceased::Deceased;
mod clues; mod clues;
pub use clues::Clues; pub use clues::Clues;
mod relationship;
pub use relationship::Relationship;
mod register; mod register;
pub use register::Register; pub use register::Register;

41
src/pages/clues.rs
View File

@ -97,7 +97,7 @@ pub fn Clues() -> Html {
</div> </div>
</div> </div>
<div <div
class="flex flex-col justify-center items-center w-full mb-10 space-y-4 md:space-y-4" class="flex flex-col justify-center items-center w-full mb-32 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>
@ -144,25 +144,26 @@ pub fn Clues() -> Html {
</div> </div>
<div class="flex justify-center max-w-lg w-full mb-6"> <div class="flex justify-center max-w-lg w-full mb-6">
<Link<Route> <Link<Route>
to={Route::Register} to={Route::Relationship}
classes={classes!( classes={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", "hover:cursor-pointer",
"hover",":cursor-pointer", "transition",
"transition", "duration-150", "duration-150",
"font-bold", "text-xl", "font-bold",
"max-w-sm", "text-xl",
"rounded-md", "max-w-xl",
"text-black", "rounded-md",
"text-center", "text-black",
"w-full", "text-center",
"min-h-16", "w-full",
"h-16", "min-h-16",
"flex", "h-16",
"justify-center", "flex",
"items-center", "justify-center",
"items-center",
)} )}
> >
{ "Weiter" } { "Weiter" }

8
src/pages/deceased.rs
View File

@ -117,10 +117,10 @@ pub fn Deceased() -> Html {
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",
"hover",":cursor-pointer", "hover:cursor-pointer",
"transition", "duration-150", "transition", "duration-150",
"font-bold", "text-xl", "font-bold", "text-xl",
"max-w-sm", "max-w-sm",

8
src/pages/register.rs
View File

@ -110,10 +110,10 @@ pub fn Register() -> Html {
to={Route::Deceased} to={Route::Deceased}
classes={classes!( classes={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",
"hover",":cursor-pointer", "hover:cursor-pointer",
"transition", "duration-150", "transition", "duration-150",
"font-bold", "text-xl", "font-bold", "text-xl",
"max-w-sm", "max-w-sm",

132
src/pages/relationship.rs Normal file
View File

@ -0,0 +1,132 @@
use yew::{classes, function_component, html, Html};
use yew_router::components::Link;
use crate::router::Route;
#[function_component]
pub fn Relationship() -> Html {
let classes = classes!("fade-in");
html! {
<div class="px-6 mt-4 md:mt-24 ">
<section id="navigation">
<div class="flex justify-between">
<h3
class="text-primary
hover:bg-text-dark
hover:text-white
hover:-translate-y-1
hover:cursor-pointer
transition duration-150
font-bold text-xl
max-w-xl
rounded-md
text-black
w-full
absolute
top-4
left-4
"
>
<Link<Route> to={Route::Clues}>
<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"
/>
</div>
</section>
<section id="content" class={classes}>
<div class="mt-24 md:mt-32 flex flex-col items-center ">
<h3 class="text-3xl font-bold mb-6">
{ "In welcher Beziehung stehen Sie zu der verstorbenen Person?" }
</h3>
<div class="flex flex-col items-start min-w-72 md:w-auto mb-32">
<div class="flex items-center mb-4">
<input
id="relationship-widow"
type="radio"
value=""
name="relationship"
class="w-4 h-4 accent-primary"
/>
<label for="relationship-widow" class="ms-2 ">
{ "Ich bin die Witwe / der Witwer der verstorbenen Person" }
</label>
</div>
<div class="flex items-center mb-4">
<input
id="relationship-soleheir"
type="radio"
value=""
name="relationship"
class="w-4 h-4 text-primary accent-primary"
/>
<label for="relationship-soleheir" class="ms-2">
<p>
{ "Ich bin notarielle " }
<u>
<strong>{ "Alleinerbin" }</strong>
</u>
</p>
</label>
</div>
<div class="flex items-center mb-4">
<input
id="relationship-child"
type="radio"
value=""
name="relationship"
class="w-4 h-4 accent-primary"
/>
<label for="relationship-child" class="ms-2">
{ "Ich bin ein Kind der verstorbenen Person" }
</label>
</div>
</div>
<div class="flex justify-center max-w-xl w-full mb-6">
<Link<Route>
to={Route::Relationship}
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",
"max-w-xl",
"rounded-md",
"text-black",
"text-center",
"w-full",
"min-h-16",
"h-16",
"flex",
"justify-center",
"items-center",
)}
>
{ "Weiter" }
</Link<Route>>
</div>
</div>
</section>
</div>
}
}

28
src/pages/signup.rs
View File

@ -63,32 +63,15 @@ pub fn SignUp() -> Html {
> >
<Link<Route> to={Route::SignUp}>{ "Stattdessen anmelden" }</Link<Route>> <Link<Route> to={Route::SignUp}>{ "Stattdessen anmelden" }</Link<Route>>
</div> </div>
<div
class="bg-primary
hover:bg-primary-dark
hover:text-white
hover:-translate-y-1
hover:cursor-pointer
transition duration-150
font-bold text-xl
max-w-36
rounded-md
text-black
text-center
w-full
min-h-12
h-12
flex justify-center items-center"
>
<Link<Route> <Link<Route>
to={Route::Verify} to={Route::Verify}
classes={classes!( classes={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",
"hover",":cursor-pointer", "hover:cursor-pointer",
"transition", "duration-150", "transition", "duration-150",
"font-bold", "text-xl", "font-bold", "text-xl",
"max-w-36", "max-w-36",
"rounded-md", "rounded-md",
@ -102,7 +85,6 @@ pub fn SignUp() -> Html {
> >
{ "Weiter" } { "Weiter" }
</Link<Route>> </Link<Route>>
</div>
</div> </div>
</div> </div>
</div> </div>

8
src/pages/verify.rs
View File

@ -58,10 +58,10 @@ pub fn Verify() -> Html {
to={Route::Register} to={Route::Register}
classes={classes!( classes={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",
"hover",":cursor-pointer", "hover:cursor-pointer",
"transition", "duration-150", "transition", "duration-150",
"font-bold", "text-xl", "font-bold", "text-xl",
"rounded-md", "rounded-md",

8
src/router.rs
View File

@ -1,4 +1,4 @@
use crate::pages::{Clues, Deceased, Home, Register, SignUp, Verify}; use crate::pages::{Clues, Deceased, Home, Register, Relationship, SignUp, Verify};
use yew::{function_component, html, Html}; use yew::{function_component, html, Html};
use yew_router::prelude::*; use yew_router::prelude::*;
@ -17,6 +17,8 @@ pub enum Route {
Clues, Clues,
#[at("/register")] #[at("/register")]
Register, Register,
#[at("/relationship")]
Relationship,
} }
fn route(routes: Route) -> Html { fn route(routes: Route) -> Html {
@ -24,6 +26,10 @@ fn route(routes: Route) -> Html {
Route::Home => { Route::Home => {
html! { <Home /> } html! { <Home /> }
} }
Route::Relationship => {
html! { <Relationship /> }
}
Route::SignUp => { Route::SignUp => {
html! { <SignUp /> } html! { <SignUp /> }
} }