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

ch/pretty formats code

Browse Source
This commit is contained in:
itsscb 2024-04-20 22:18:10 +02:00
parent 35118a6a08
commit 9d0cc095bc
8 changed files with 412 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib.rs
View File

@ -1,2 +1,2 @@
pub mod router;
pub mod pages; pub mod pages;
pub mod router;

192
src/pages/clues.rs
View File

@ -6,8 +6,9 @@ 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="px-6 mt-4 md:mt-24">
<h3 class="text-primary <h3
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
@ -21,52 +22,143 @@ pub fn Clues() -> Html {
absolute absolute
top-4 top-4
left-4 left-4
"> "
>
<Link<Route> to={Route::SignUp}> <Link<Route> to={Route::SignUp}>
<div class="flex items-center"><svg class="w-8 " xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" 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> <div class="flex items-center">
<svg
class="w-8 "
xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
viewBox="0 0 24 24"
width="currentWidth"
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>> </Link<Route>>
</h3> </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"/> <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 class="mt-16 md:mt-32 flex flex-col items-center justify-between"> <div class="mt-16 md:mt-32 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">{"Füge alle dir bekannten E-Mail Adressen und Telefonnummern hinzu."}</p> <p class="mb-6">
<div class="flex flex-col justify-between items-center w-full mb-10 space-y-4 md:space-y-4"> { "Füge alle dir bekannten E-Mail Adressen und Telefonnummern hinzu." }
<div class="flex justify-between w-full relative"> </p>
<h3 class="font-bold text-2xl ">{"E-Mail Adressen"}</h3> <div
<svg class="text-primary w-10 absolute right-4" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> class="flex flex-col justify-between items-center w-full mb-10 space-y-4 md:space-y-4"
</div> >
<div class="flex justify-start items-center space-x-4 w-full"> <div class="flex justify-between w-full relative">
<svg class="w-10 text-danger" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> <h3 class="font-bold text-2xl ">{ "E-Mail Adressen" }</h3>
<p class="text-md">{"max.mustermann@example.com"}</p> <svg
class="text-primary w-10 absolute right-4"
</div> xmlns="http://www.w3.org/2000/svg"
<div class="flex justify-start items-center w-full space-x-4"> height="currentHeight"
viewBox="0 0 24 24"
<svg class="w-10 text-danger" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> width="currentWidth"
<p class="text-md">{"jon.doe@blub.com"}</p> fill="currentColor"
</div> >
<path d="M0 0h24v24H0z" fill="none" />
</div> <path
<div class="flex flex-col justify-center items-center w-full mb-10 space-y-4 md:space-y-4"> d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
<div class="flex justify-between w-full relative"> />
<h3 class="font-bold text-2xl ">{"Telefonnummern"}</h3> </svg>
<svg class="text-primary w-10 absolute right-4" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> </div>
</div> <div class="flex justify-start items-center space-x-4 w-full">
<div class="flex justify-start items-center space-x-4 w-full"> <svg
<svg class="w-10 text-danger" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> class="w-10 text-danger"
<p class="text-md">{"+49 1234 567 890"}</p> xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
</div> viewBox="0 0 24 24"
<div class="flex justify-start items-center w-full space-x-4"> width="currentWidth"
fill="currentColor"
<svg class="w-10 text-danger" xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> >
<p class="text-md">{"+49 9876 543 210"}</p> <path d="M0 0h24v24H0z" fill="none" />
</div> <path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
</div> />
<div class="flex justify-center max-w-xl w-full mb-6"> </svg>
<div class="bg-primary <p class="text-md">{ "max.mustermann@example.com" }</p>
</div>
<div class="flex justify-start items-center w-full space-x-4">
<svg
class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
viewBox="0 0 24 24"
width="currentWidth"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<p class="text-md">{ "jon.doe@blub.com" }</p>
</div>
</div>
<div
class="flex flex-col justify-center items-center w-full mb-10 space-y-4 md:space-y-4"
>
<div class="flex justify-between w-full relative">
<h3 class="font-bold text-2xl ">{ "Telefonnummern" }</h3>
<svg
class="text-primary w-10 absolute right-4"
xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
viewBox="0 0 24 24"
width="currentWidth"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
</div>
<div class="flex justify-start items-center space-x-4 w-full">
<svg
class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
viewBox="0 0 24 24"
width="currentWidth"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<p class="text-md">{ "+49 1234 567 890" }</p>
</div>
<div class="flex justify-start items-center w-full space-x-4">
<svg
class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
viewBox="0 0 24 24"
width="currentWidth"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<p class="text-md">{ "+49 9876 543 210" }</p>
</div>
</div>
<div class="flex justify-center max-w-xl w-full mb-6">
<div
class="bg-primary
hover:bg-primary-dark hover:bg-primary-dark
hover:text-white hover:text-white
hover:-translate-y-1 hover:-translate-y-1
@ -81,14 +173,12 @@ pub fn Clues() -> Html {
min-h-16 min-h-16
h-16 h-16
flex justify-center items-center mb-16" flex justify-center items-center mb-16"
> >
<Link<Route> to={Route::Register}> <Link<Route> to={Route::Register}>{ "Weiter" }</Link<Route>>
{"Weiter"} </div>
</Link<Route>> </div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
} }
} }

109
src/pages/deceased.rs
View File

@ -6,9 +6,10 @@ 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="px-6 mt-20">
<h3 class="text-primary <h3
hover:bg-text-dark class="text-primary
hover:bg-text-dark
hover:text-white hover:text-white
hover:-translate-y-1 hover:-translate-y-1
hover:cursor-pointer hover:cursor-pointer
@ -21,55 +22,101 @@ pub fn Deceased() -> Html {
absolute absolute
top-4 top-4
left-4 left-4
"> "
>
<Link<Route> to={Route::Home}> <Link<Route> to={Route::Home}>
<div class="flex items-center"><svg class="w-8 " xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" 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> <div class="flex items-center">
<svg
class="w-8 "
xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
viewBox="0 0 24 24"
width="currentWidth"
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>> </Link<Route>>
</h3> </h3>
<img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"/> <img
src="public/digitaler-frieden_logo.jpg"
alt="logo digitaler frieden"
class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"
/>
<div class="-height mt-12 flex flex-col items-center"> <div class="-height mt-12 flex flex-col items-center">
<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 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>
<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"/> <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>
<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">{"Nachname"}</p> <p class="text-start text-md mb-1">{ "Nachname" }</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"/> <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>
<div class="group max-w-xl w-full mb-4"> <div class="group max-w-xl 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 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"/> <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>
<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 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"/> <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>
</div> </div>
</div> </div>
<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">{"Postleitzahl"}</p> <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"/> <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>
<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">{"Ort"}</p> <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"/> <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>
<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">{"Geburtsort"}</p> <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"/> <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>
<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">{"Geburtstag"}</p> <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" /> <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 class="group max-w-xl w-full mb-4"> <div class="group max-w-xl w-full mb-5">
<p class="text-start text-md mb-1">{"Todestag"}</p> <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"/> <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 class="bg-primary <div
class="bg-primary
hover:bg-primary-dark hover:bg-primary-dark
hover:text-white hover:text-white
hover:-translate-y-1 hover:-translate-y-1
@ -83,12 +130,10 @@ pub fn Deceased() -> Html {
w-full w-full
h-16 h-16
mt-8 flex justify-center items-center " mt-8 flex justify-center items-center "
> >
<Link<Route> to={Route::Clues}> <Link<Route> to={Route::Clues}>{ "Weiter" }</Link<Route>>
{"Weiter"} </div>
</Link<Route>>
</div> </div>
</div> </div>
</div>
} }
} }

34
src/pages/home.rs
View File

@ -3,17 +3,25 @@ use yew_router::prelude::Link;
use crate::router::Route; use crate::router::Route;
#[function_component] #[function_component]
pub fn Home() -> Html { pub fn Home() -> Html {
html! { html! {
<div class="flex flex-col items-center h-full space-y-24 px-12 mt-20 mb-20"> <div class="flex flex-col items-center h-full space-y-24 px-12 mt-20 mb-20">
<div class="flex flex-col items-center space-y-4"> <div class="flex flex-col items-center space-y-4">
<img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="min-w-56 w-96"/> <img
<h3 class="text-3xl font-bold text-center ">{"Digitale Spuren entfernen per Knopfdruck"}</h3> src="public/digitaler-frieden_logo.jpg"
<p class="text-center">{"Mit uns finden Sie Ihre digitalen Spuren und können diese entfernen."}</p> alt="logo digitaler frieden"
class="min-w-56 w-96"
/>
<h3 class="text-3xl font-bold text-center ">
{ "Digitale Spuren entfernen per Knopfdruck" }
</h3>
<p class="text-center">
{ "Mit uns finden Sie Ihre digitalen Spuren und können diese entfernen." }
</p>
</div> </div>
<div class="bg-primary <div
class="bg-primary
hover:bg-primary-dark hover:bg-primary-dark
hover:text-white hover:text-white
hover:-translate-y-1 hover:-translate-y-1
@ -29,17 +37,19 @@ pub fn Home() -> Html {
h-16 h-16
flex justify-center items-center" flex justify-center items-center"
> >
<Link<Route> to={Route::SignUp}> <Link<Route> to={Route::SignUp}>{ "Weiter" }</Link<Route>>
{"Weiter"}
</Link<Route>>
</div> </div>
<div class="flex flex-col items-center space-y-4"> <div class="flex flex-col items-center space-y-4">
<p class="text-center italic">{"Mit der weiteren Nutzung stimmst du den folgenden Bedingungen zu:"}</p> <p class="text-center italic">
{ "Mit der weiteren Nutzung stimmst du den folgenden Bedingungen zu:" }
</p>
<div class="text-center flex flex-col items-cneter space-y-1"> <div class="text-center flex flex-col items-cneter space-y-1">
<a class="text-primary italic" href="#">{"Allgemeine Geschäftsbedingungen"}</a> <a class="text-primary italic" href="#">
<a class="text-primary italic" href="#">{"Datenschutzerklärung"}</a> { "Allgemeine Geschäftsbedingungen" }
</a>
<a class="text-primary italic" href="#">{ "Datenschutzerklärung" }</a>
</div> </div>
</div> </div>
</div> </div>
} }
} }

98
src/pages/register.rs
View File

@ -6,8 +6,9 @@ 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="px-6 mt-20">
<h3 class="text-primary <h3
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
@ -21,51 +22,94 @@ pub fn Register() -> Html {
absolute absolute
top-4 top-4
left-4 left-4
"> "
>
<Link<Route> to={Route::Home}> <Link<Route> to={Route::Home}>
<div class="flex items-center"><svg class="w-8 " xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" 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> <div class="flex items-center">
<svg
class="w-8 "
xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
viewBox="0 0 24 24"
width="currentWidth"
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>> </Link<Route>>
</h3> </h3>
<img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"/> <img
src="public/digitaler-frieden_logo.jpg"
alt="logo digitaler frieden"
class="absolute top-4 right-4 md:-w-56 md:w-56 md:h-auto w-0 h-0"
/>
<div class="-height mt-12 flex flex-col items-center"> <div class="-height mt-12 flex flex-col items-center">
<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>
<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"/> <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>
<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">{"Nachname"}</p> <p class="text-start text-md mb-1">{ "Nachname" }</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"/> <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>
<div class="group max-w-xl w-full mb-4"> <div class="group max-w-xl 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 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"/> <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>
<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 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"/> <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>
</div> </div>
</div> </div>
<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">{"Postleitzahl"}</p> <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"/> <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>
<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">{"Ort"}</p> <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"/> <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>
<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">{"Telefonnummer"}</p> <p class="text-start text-md mb-1">{ "Telefonnummer" }</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"/> <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>
<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">{"Geburtsort"}</p> <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"/> <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>
<div class="bg-primary <div
class="bg-primary
hover:bg-primary-dark hover:bg-primary-dark
hover:text-white hover:text-white
hover:-translate-y-1 hover:-translate-y-1
@ -79,12 +123,10 @@ pub fn Register() -> Html {
w-full w-full
h-16 h-16
mt-20 flex justify-center items-center " mt-20 flex justify-center items-center "
> >
<Link<Route> to={Route::Deceased}> <Link<Route> to={Route::Deceased}>{ "Weiter" }</Link<Route>>
{"Weiter"} </div>
</Link<Route>>
</div> </div>
</div> </div>
</div>
} }
} }

63
src/pages/signup.rs
View File

@ -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="h-full px-6 mt-4">
<h3 class="text-primary <h3
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
@ -21,29 +22,51 @@ pub fn SignUp() -> Html {
top-4 top-4
left-4 left-4
absolute absolute
"> "
>
<Link<Route> to={Route::Home}> <Link<Route> to={Route::Home}>
<div class="flex items-center"><svg class="w-8 " xmlns="http://www.w3.org/2000/svg" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" 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> <div class="flex items-center">
<svg
class="w-8 "
xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
viewBox="0 0 24 24"
width="currentWidth"
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>> </Link<Route>>
</h3> </h3>
<img src="public/digitaler-frieden_logo.jpg" alt="logo digitaler frieden" class="top-4 right-4 absolute md:min-w-56 md:w-56 w-0"/> <img
src="public/digitaler-frieden_logo.jpg"
alt="logo digitaler frieden"
class="top-4 right-4 absolute md:min-w-56 md:w-56 w-0"
/>
<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>
<div class="group max-w-xl w-full mb-4"> <div class="group max-w-xl w-full mb-4">
<input class="duration-700 font-bold text-lg transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-2 text-center text-primary focus-within:text-black w-full h-16 mt-4 rounded-md" type="text"/> <input
class="duration-700 font-bold text-lg transition group-hover:cursor-pointer bg-transparent border-white hover:border-[#33d9b2] hover:curser-pointer focus-within:bg-[#33d9b2] active:bg-[#33d9b2] border-2 text-center text-primary focus-within:text-black w-full h-16 mt-4 rounded-md"
type="text"
/>
</div> </div>
<div class="flex justify-between max-w-xl w-full"> <div class="flex justify-between max-w-xl w-full">
<div class="text-primary hover:text-white <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}> >
{"Stattdessen anmelden"} <Link<Route> to={Route::SignUp}>{ "Stattdessen anmelden" }</Link<Route>>
</Link<Route>> </div>
</div> <div
<div class="bg-primary class="bg-primary
hover:bg-primary-dark hover:bg-primary-dark
hover:text-white hover:text-white
hover:-translate-y-1 hover:-translate-y-1
@ -58,12 +81,10 @@ pub fn SignUp() -> Html {
min-h-12 min-h-12
h-12 h-12
flex justify-center items-center" flex justify-center items-center"
> >
<Link<Route> to={Route::Verify}> <Link<Route> to={Route::Verify}>{ "Weiter" }</Link<Route>>
{"Weiter"}
</Link<Route>>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
} }

86
src/pages/verify.rs
View File

@ -6,9 +6,10 @@ 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="px-6 mt-4 md:mt-24">
<div class="flex justify-between"> <div class="flex justify-between">
<h3 class="text-primary <h3
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
@ -22,22 +23,41 @@ pub fn Verify() -> Html {
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" height="currentHeight" viewBox="0 0 24 24" width="currentWidth" 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> to={Route::SignUp}>
</Link<Route>> <div class="flex items-center">
</h3> <svg
<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"/> class="w-8 "
</div> xmlns="http://www.w3.org/2000/svg"
height="currentHeight"
viewBox="0 0 24 24"
width="currentWidth"
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>
<div class="mt-24 md:mt-32 flex flex-col items-center"> <div class="mt-24 md:mt-32 flex flex-col items-center">
<h3 class="text-3xl font-bold mb-6">{"Verifizieren"}</h3> <h3 class="text-3xl font-bold mb-6">{ "Verifizieren" }</h3>
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<p class="mb-3">{"Bitte verifiziere deine E-Mail Adresse."}</p> <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-12">{ "Wir haben dir eine E-Mail geschickt." }</p>
<p class="mb-8">{"Dann geht es hier weiter."}</p> <p class="mb-8">{ "Dann geht es hier weiter." }</p>
</div> </div>
<div class="flex justify-center max-w-xl w-full mb-6"> <div class="flex justify-center max-w-xl w-full mb-6">
<div class="bg-primary <div
class="bg-primary
hover:bg-primary-dark hover:bg-primary-dark
hover:text-white hover:text-white
hover:-translate-y-1 hover:-translate-y-1
@ -52,26 +72,24 @@ pub fn Verify() -> Html {
min-h-12 min-h-12
h-12 h-12
flex justify-center items-center mb-16" flex justify-center items-center mb-16"
> >
<Link<Route> to={Route::Register}> <Link<Route> to={Route::Register}>{ "Weiter" }</Link<Route>>
{"Weiter"} </div>
</Link<Route>>
</div> </div>
</div> <div class="flex flex-col items-start">
<div class="flex flex-col items-start"> <p class="mb-1">{ "Noch keine E-Mail erhalten?" }</p>
<p class="mb-1">{"Noch keine E-Mail erhalten?"}</p> <p class="mb-4">{ "Spam Ordner schon überprüft?" }</p>
<p class="mb-4">{"Spam Ordner schon überprüft?"}</p> <div
<div class="text-primary hover:text-white 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> to={Route::SignUp}>{ "Erneut senden" }</Link<Route>>
</Link<Route>> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
} }
} }

15
src/router.rs
View File

@ -1,7 +1,7 @@
use crate::pages::{Clues, Deceased, Home, Register, SignUp, Verify}; use crate::pages::{Clues, Deceased, Home, Register, SignUp, Verify};
use yew_router::prelude::*;
use yew::{function_component, html, Html}; use yew::{function_component, html, Html};
use yew_router::prelude::*;
#[derive(Clone, Routable, PartialEq)] #[derive(Clone, Routable, PartialEq)]
pub enum Route { pub enum Route {
#[at("/")] #[at("/")]
@ -23,22 +23,22 @@ fn route(routes: Route) -> Html {
match routes { match routes {
Route::Home => { Route::Home => {
html! { <Home /> } html! { <Home /> }
}, }
Route::SignUp => { Route::SignUp => {
html! { <SignUp /> } html! { <SignUp /> }
}, }
Route::Verify => { Route::Verify => {
html! { <Verify /> } html! { <Verify /> }
}, }
Route::Clues => { Route::Clues => {
html! { <Clues /> } html! { <Clues /> }
}, }
Route::Deceased => { Route::Deceased => {
html! { <Deceased /> } html! { <Deceased /> }
}, }
Route::Register => { Route::Register => {
html! { <Register /> } html! { <Register /> }
}, }
} }
} }
@ -50,4 +50,3 @@ pub fn app() -> Html {
</BrowserRouter> </BrowserRouter>
} }
} }