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;
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper4788 = function(arg0, arg1, arg2) {
const ret = makeClosure(arg0, arg1, 624, __wbg_adapter_42);
imports.wbg.__wbindgen_closure_wrapper4869 = function(arg0, arg1, arg2) {
const ret = makeClosure(arg0, arg1, 653, __wbg_adapter_42);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper6487 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 794, __wbg_adapter_45);
imports.wbg.__wbindgen_closure_wrapper6568 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 823, __wbg_adapter_45);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper6791 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 819, __wbg_adapter_48);
imports.wbg.__wbindgen_closure_wrapper6872 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 848, __wbg_adapter_48);
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 name="viewport" content="width=device-width, initial-scale=1">
<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="preload" href="/digitaler-frieden-a46945b7af60aeea_bg.wasm" crossorigin="anonymous" integrity="sha384-U/7UNFoZnY+Sr8vCGT6tdip1lM96wbG2Y1WpnzK8l6gTBDM2ozTmHrjFOVC05D9j" as="fetch" type="application/wasm">
<link rel="modulepreload" href="/digitaler-frieden-a46945b7af60aeea.js" crossorigin="anonymous" integrity="sha384-l/ijXtqMmltzylPhQmf23Bw4ACa18XnhwHhNVn6FJhHWESm5iOvZ9LA7dEJw3gNf"></head>
<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-9a1d4250dfda5ac0.js" crossorigin="anonymous" integrity="sha384-5owiTz49KdxhXPCnfR2GokkJnFqa++HeraekuGgskT+OizWrNTANvcXzigi62YCH"></head>
<body class="bg-black text-white ">
<script type="module">
import init, * as bindings from '/digitaler-frieden-a46945b7af60aeea.js';
init('/digitaler-frieden-a46945b7af60aeea_bg.wasm');
import init, * as bindings from '/digitaler-frieden-9a1d4250dfda5ac0.js';
init('/digitaler-frieden-9a1d4250dfda5ac0_bg.wasm');
window.wasmBindings = bindings;
</script><script>"use strict";

63
dist/public/styles.css vendored
View File

@ -594,6 +594,10 @@ video {
margin-bottom: 0.75rem;
}
.mb-32 {
margin-bottom: 8rem;
}
.mb-4 {
margin-bottom: 1rem;
}
@ -610,6 +614,10 @@ video {
margin-bottom: 2rem;
}
.ms-2 {
margin-inline-start: 0.5rem;
}
.mt-12 {
margin-top: 3rem;
}
@ -658,6 +666,10 @@ video {
height: 4rem;
}
.h-4 {
height: 1rem;
}
.h-full {
height: 100%;
}
@ -686,6 +698,10 @@ video {
width: 6rem;
}
.w-4 {
width: 1rem;
}
.w-8 {
width: 2rem;
}
@ -722,15 +738,6 @@ video {
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-direction: column;
}
@ -877,6 +884,40 @@ video {
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 {
position: relative;
display: inline-block;
@ -919,6 +960,10 @@ video {
border-color: rgba(51,217,178,1.0);
}
.accent-primary {
accent-color: rgba(51, 217, 178,1.0);
}
.text-primary {
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;
}
.mb-32 {
margin-bottom: 8rem;
}
.mb-4 {
margin-bottom: 1rem;
}
@ -610,6 +614,10 @@ video {
margin-bottom: 2rem;
}
.ms-2 {
margin-inline-start: 0.5rem;
}
.mt-12 {
margin-top: 3rem;
}
@ -658,6 +666,10 @@ video {
height: 4rem;
}
.h-4 {
height: 1rem;
}
.h-full {
height: 100%;
}
@ -686,6 +698,10 @@ video {
width: 6rem;
}
.w-4 {
width: 1rem;
}
.w-8 {
width: 2rem;
}
@ -722,15 +738,6 @@ video {
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-direction: column;
}
@ -877,6 +884,40 @@ video {
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 {
position: relative;
display: inline-block;
@ -919,6 +960,10 @@ video {
border-color: rgba(51,217,178,1.0);
}
.accent-primary {
accent-color: rgba(51, 217, 178,1.0);
}
.text-primary {
color: rgba(51, 217, 178,1.0);
}

27
input.css
View File

@ -2,6 +2,29 @@
@tailwind components;
@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 {
@apply inline-block relative;
}
@ -43,6 +66,10 @@
border-color: rgba(51,217,178,1.0);
}
.accent-primary {
accent-color: rgba(51, 217, 178,1.0);
}
.text-primary {
color: rgba(51, 217, 178,1.0);
}

63
public/styles.css
View File

@ -594,6 +594,10 @@ video {
margin-bottom: 0.75rem;
}
.mb-32 {
margin-bottom: 8rem;
}
.mb-4 {
margin-bottom: 1rem;
}
@ -610,6 +614,10 @@ video {
margin-bottom: 2rem;
}
.ms-2 {
margin-inline-start: 0.5rem;
}
.mt-12 {
margin-top: 3rem;
}
@ -658,6 +666,10 @@ video {
height: 4rem;
}
.h-4 {
height: 1rem;
}
.h-full {
height: 100%;
}
@ -686,6 +698,10 @@ video {
width: 6rem;
}
.w-4 {
width: 1rem;
}
.w-8 {
width: 2rem;
}
@ -722,15 +738,6 @@ video {
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-direction: column;
}
@ -877,6 +884,40 @@ video {
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 {
position: relative;
display: inline-block;
@ -919,6 +960,10 @@ video {
border-color: rgba(51,217,178,1.0);
}
.accent-primary {
accent-color: rgba(51, 217, 178,1.0);
}
.text-primary {
color: rgba(51, 217, 178,1.0);
}

3
src/pages.rs
View File

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

41
src/pages/clues.rs
View File

@ -97,7 +97,7 @@ pub fn Clues() -> Html {
</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">
<h3 class="font-bold text-2xl ">{ "Telefonnummern" }</h3>
@ -144,25 +144,26 @@ pub fn Clues() -> Html {
</div>
<div class="flex justify-center max-w-lg 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",
"max-w-sm",
"rounded-md",
"text-black",
"text-center",
"w-full",
"min-h-16",
"h-16",
"flex",
"justify-center",
"items-center",
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" }

8
src/pages/deceased.rs
View File

@ -117,10 +117,10 @@ pub fn Deceased() -> Html {
to={Route::Clues}
classes={yew::classes!(
"bg-primary",
"hover",":bg-primary-dark",
"hover",":text-white",
"hover",":-translate-y-1",
"hover",":cursor-pointer",
"hover:bg-primary-dark",
"hover:text-white",
"hover:-translate-y-1",
"hover:cursor-pointer",
"transition", "duration-150",
"font-bold", "text-xl",
"max-w-sm",

8
src/pages/register.rs
View File

@ -110,10 +110,10 @@ pub fn Register() -> Html {
to={Route::Deceased}
classes={classes!(
"bg-primary",
"hover",":bg-primary-dark",
"hover",":text-white",
"hover",":-translate-y-1",
"hover",":cursor-pointer",
"hover:bg-primary-dark",
"hover:text-white",
"hover:-translate-y-1",
"hover:cursor-pointer",
"transition", "duration-150",
"font-bold", "text-xl",
"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>>
</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>
to={Route::Verify}
classes={classes!(
"bg-primary",
"hover",":bg-primary-dark",
"hover",":text-white",
"hover",":-translate-y-1",
"hover",":cursor-pointer",
"transition", "duration-150",
"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",
@ -102,7 +85,6 @@ pub fn SignUp() -> Html {
>
{ "Weiter" }
</Link<Route>>
</div>
</div>
</div>
</div>

8
src/pages/verify.rs
View File

@ -58,10 +58,10 @@ pub fn Verify() -> Html {
to={Route::Register}
classes={classes!(
"bg-primary",
"hover",":bg-primary-dark",
"hover",":text-white",
"hover",":-translate-y-1",
"hover",":cursor-pointer",
"hover:bg-primary-dark",
"hover:text-white",
"hover:-translate-y-1",
"hover:cursor-pointer",
"transition", "duration-150",
"font-bold", "text-xl",
"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_router::prelude::*;
@ -17,6 +17,8 @@ pub enum Route {
Clues,
#[at("/register")]
Register,
#[at("/relationship")]
Relationship,
}
fn route(routes: Route) -> Html {
@ -24,6 +26,10 @@ fn route(routes: Route) -> Html {
Route::Home => {
html! { <Home /> }
}
Route::Relationship => {
html! { <Relationship /> }
}
Route::SignUp => {
html! { <SignUp /> }
}