From 9d0cc095bcf2d998e3a0d8ef284e071115b2a5a5 Mon Sep 17 00:00:00 2001 From: itsscb <dev@itsscb.de> Date: Sat, 20 Apr 2024 22:18:10 +0200 Subject: [PATCH] ch/pretty formats code --- src/lib.rs | 2 +- src/pages/clues.rs | 192 +++++++++++++++++++++++++++++++----------- src/pages/deceased.rs | 109 +++++++++++++++++------- src/pages/home.rs | 34 +++++--- src/pages/register.rs | 98 +++++++++++++++------ src/pages/signup.rs | 63 +++++++++----- src/pages/verify.rs | 86 +++++++++++-------- src/router.rs | 15 ++-- 8 files changed, 412 insertions(+), 187 deletions(-) diff --git a/src/lib.rs b/src/lib.rs index c3058b7..ae0b06d 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,2 +1,2 @@ -pub mod router; pub mod pages; +pub mod router; diff --git a/src/pages/clues.rs b/src/pages/clues.rs index 27be3a9..d1e4508 100644 --- a/src/pages/clues.rs +++ b/src/pages/clues.rs @@ -6,8 +6,9 @@ use crate::router::Route; #[function_component] pub fn Clues() -> Html { html! { - <div class="px-6 mt-4 md:mt-24"> - <h3 class="text-primary + <div class="px-6 mt-4 md:mt-24"> + <h3 + class="text-primary hover:bg-text-dark hover:text-white hover:-translate-y-1 @@ -21,52 +22,143 @@ pub fn Clues() -> Html { absolute top-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> + <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>> </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="flex flex-col items-start"> - <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> - <div class="flex flex-col justify-between 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 ">{"E-Mail Adressen"}</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">{"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 + <div class="flex flex-col items-start"> + <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> + <div + class="flex flex-col justify-between 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 ">{ "E-Mail Adressen" }</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">{ "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:text-white hover:-translate-y-1 @@ -81,14 +173,12 @@ pub fn Clues() -> Html { min-h-16 h-16 flex justify-center items-center mb-16" - > - <Link<Route> to={Route::Register}> - {"Weiter"} - </Link<Route>> + > + <Link<Route> to={Route::Register}>{ "Weiter" }</Link<Route>> + </div> + </div> </div> - </div> - </div> </div> - </div> + </div> } } diff --git a/src/pages/deceased.rs b/src/pages/deceased.rs index d81c2d8..6fe747a 100644 --- a/src/pages/deceased.rs +++ b/src/pages/deceased.rs @@ -6,9 +6,10 @@ use crate::router::Route; #[function_component] pub fn Deceased() -> Html { html! { - <div class="px-6 mt-20"> - <h3 class="text-primary - hover:bg-text-dark + <div class="px-6 mt-20"> + <h3 + class="text-primary + hover:bg-text-dark hover:text-white hover:-translate-y-1 hover:cursor-pointer @@ -21,55 +22,101 @@ pub fn Deceased() -> Html { absolute top-4 left-4 - "> + " + > <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>> </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"> - <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"> - <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"/> + <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" + /> </div> <div class="group max-w-xl w-full mb-4"> - <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"/> + <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" + /> </div> <div class="group max-w-xl w-full mb-4"> <div class="flex justify-between space-x-4"> <div class="w-full"> - <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"/> + <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" + /> </div> <div class="w-24"> - <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"/> + <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" + /> </div> </div> </div> <div class="group max-w-xl 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"/> + <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 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"/> + <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"/> + <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" /> + <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-4"> - <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 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> - <div class="bg-primary + <div + class="bg-primary hover:bg-primary-dark hover:text-white hover:-translate-y-1 @@ -83,12 +130,10 @@ pub fn Deceased() -> Html { w-full h-16 mt-8 flex justify-center items-center " - > - <Link<Route> to={Route::Clues}> - {"Weiter"} - </Link<Route>> + > + <Link<Route> to={Route::Clues}>{ "Weiter" }</Link<Route>> + </div> </div> </div> - </div> } } diff --git a/src/pages/home.rs b/src/pages/home.rs index 6455dcd..9c5d990 100644 --- a/src/pages/home.rs +++ b/src/pages/home.rs @@ -3,17 +3,25 @@ use yew_router::prelude::Link; use crate::router::Route; - #[function_component] pub fn Home() -> 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 space-y-4"> - <img src="public/digitaler-frieden_logo.jpg" 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> + <img + src="public/digitaler-frieden_logo.jpg" + 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 class="bg-primary + <div + class="bg-primary hover:bg-primary-dark hover:text-white hover:-translate-y-1 @@ -29,17 +37,19 @@ pub fn Home() -> Html { h-16 flex justify-center items-center" > - <Link<Route> to={Route::SignUp}> - {"Weiter"} - </Link<Route>> + <Link<Route> to={Route::SignUp}>{ "Weiter" }</Link<Route>> </div> <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"> - <a class="text-primary italic" href="#">{"Allgemeine Geschäftsbedingungen"}</a> - <a class="text-primary italic" href="#">{"Datenschutzerklärung"}</a> + <a class="text-primary italic" href="#"> + { "Allgemeine Geschäftsbedingungen" } + </a> + <a class="text-primary italic" href="#">{ "Datenschutzerklärung" }</a> </div> </div> </div> - } + } } diff --git a/src/pages/register.rs b/src/pages/register.rs index bd0c2e5..6b3b6d0 100644 --- a/src/pages/register.rs +++ b/src/pages/register.rs @@ -6,8 +6,9 @@ use crate::router::Route; #[function_component] pub fn Register() -> Html { html! { - <div class="px-6 mt-20"> - <h3 class="text-primary + <div class="px-6 mt-20"> + <h3 + class="text-primary hover:bg-text-dark hover:text-white hover:-translate-y-1 @@ -21,51 +22,94 @@ pub fn Register() -> Html { absolute top-4 left-4 - "> + " + > <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>> </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"> - <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"> - <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"/> + <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" + /> </div> <div class="group max-w-xl w-full mb-4"> - <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"/> + <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" + /> </div> <div class="group max-w-xl w-full mb-4"> <div class="flex justify-between space-x-4"> <div class="w-full"> - <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"/> + <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" + /> </div> <div class="w-24"> - <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"/> + <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" + /> </div> </div> </div> <div class="group max-w-xl 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"/> + <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 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"/> + <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">{"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"/> + <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" + /> </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"/> + <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="bg-primary + <div + class="bg-primary hover:bg-primary-dark hover:text-white hover:-translate-y-1 @@ -79,12 +123,10 @@ pub fn Register() -> Html { w-full h-16 mt-20 flex justify-center items-center " - > - <Link<Route> to={Route::Deceased}> - {"Weiter"} - </Link<Route>> + > + <Link<Route> to={Route::Deceased}>{ "Weiter" }</Link<Route>> + </div> </div> </div> - </div> } } diff --git a/src/pages/signup.rs b/src/pages/signup.rs index 6556c3b..5963288 100644 --- a/src/pages/signup.rs +++ b/src/pages/signup.rs @@ -6,8 +6,9 @@ use crate::router::Route; #[function_component] pub fn SignUp() -> Html { html! { - <div class="h-full px-6 mt-4"> - <h3 class="text-primary + <div class="h-full px-6 mt-4"> + <h3 + class="text-primary hover:bg-text-dark hover:text-white hover:-translate-y-1 @@ -21,29 +22,51 @@ pub fn SignUp() -> Html { top-4 left-4 absolute - "> + " + > <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>> </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"> - <h3 class="text-3xl font-bold mb-6">{"Jetzt registrieren"}</h3> - <p>{"Gib deine E-Mail Adresse ein."}</p> + <h3 class="text-3xl font-bold mb-6">{ "Jetzt registrieren" }</h3> + <p>{ "Gib deine E-Mail Adresse ein." }</p> <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 class="flex justify-between max-w-xl w-full"> - <div class="text-primary hover:text-white + <div class="flex justify-between max-w-xl w-full"> + <div + class="text-primary hover:text-white hover:-translate-y-1 hover:cursor-pointer transition duration-150 - "> - <Link<Route> to={Route::SignUp}> - {"Stattdessen anmelden"} - </Link<Route>> - </div> - <div class="bg-primary + " + > + <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 @@ -58,12 +81,10 @@ pub fn SignUp() -> Html { min-h-12 h-12 flex justify-center items-center" - > - <Link<Route> to={Route::Verify}> - {"Weiter"} - </Link<Route>> - </div> + > + <Link<Route> to={Route::Verify}>{ "Weiter" }</Link<Route>> </div> + </div> </div> </div> } diff --git a/src/pages/verify.rs b/src/pages/verify.rs index 201a46b..0b6ed0f 100644 --- a/src/pages/verify.rs +++ b/src/pages/verify.rs @@ -6,9 +6,10 @@ use crate::router::Route; #[function_component] pub fn Verify() -> Html { html! { - <div class="px-6 mt-4 md:mt-24"> - <div class="flex justify-between"> - <h3 class="text-primary + <div class="px-6 mt-4 md:mt-24"> + <div class="flex justify-between"> + <h3 + class="text-primary hover:bg-text-dark hover:text-white hover:-translate-y-1 @@ -22,22 +23,41 @@ pub fn Verify() -> Html { absolute top-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>> - </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> + " + > + <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>> + </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"> - <h3 class="text-3xl font-bold mb-6">{"Verifizieren"}</h3> - <div class="flex flex-col items-start"> - <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"> - <div class="bg-primary + <h3 class="text-3xl font-bold mb-6">{ "Verifizieren" }</h3> + <div class="flex flex-col items-start"> + <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"> + <div + class="bg-primary hover:bg-primary-dark hover:text-white hover:-translate-y-1 @@ -52,26 +72,24 @@ pub fn Verify() -> Html { min-h-12 h-12 flex justify-center items-center mb-16" - > - <Link<Route> to={Route::Register}> - {"Weiter"} - </Link<Route>> + > + <Link<Route> to={Route::Register}>{ "Weiter" }</Link<Route>> + </div> </div> - </div> - <div class="flex flex-col items-start"> - <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 + <div class="flex flex-col items-start"> + <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:cursor-pointer transition duration-150 - "> - <Link<Route> to={Route::SignUp}> - {"Erneut senden"} - </Link<Route>> - </div> + " + > + <Link<Route> to={Route::SignUp}>{ "Erneut senden" }</Link<Route>> + </div> + </div> </div> - </div> - </div> + </div> } } diff --git a/src/router.rs b/src/router.rs index aa0027d..19826ba 100644 --- a/src/router.rs +++ b/src/router.rs @@ -1,7 +1,7 @@ use crate::pages::{Clues, Deceased, Home, Register, SignUp, Verify}; -use yew_router::prelude::*; use yew::{function_component, html, Html}; +use yew_router::prelude::*; #[derive(Clone, Routable, PartialEq)] pub enum Route { #[at("/")] @@ -23,22 +23,22 @@ fn route(routes: Route) -> Html { match routes { Route::Home => { html! { <Home /> } - }, + } Route::SignUp => { html! { <SignUp /> } - }, + } Route::Verify => { html! { <Verify /> } - }, + } Route::Clues => { html! { <Clues /> } - }, + } Route::Deceased => { html! { <Deceased /> } - }, + } Route::Register => { html! { <Register /> } - }, + } } } @@ -50,4 +50,3 @@ pub fn app() -> Html { </BrowserRouter> } } -