2 files changed, 72 insertions(+), 12 deletions(-)

M src/bin/homepage/web/routes.rs
M src/bin/homepage/web/style.css

@@ 12,6 12,7 @@ use der_die_das::{
     nouns::{self, Article, Noun},
 };
 use maud::{html, Markup, DOCTYPE};
+use time::OffsetDateTime;
 use tracing::{debug, instrument};
 
 use super::AppState;


@@ 132,6 133,7 @@ pub async fn answer<A: attempt::Repo, N: nouns::Repo>(
     }
     Ok(quize(&noun, Some(false)))
 }
+
 #[instrument]
 pub async fn home<A: attempt::Repo, N: nouns::Repo>(
     State(storage): State<Arc<AppState<A, N>>>,


@@ 157,7 159,8 @@ pub async fn home<A: attempt::Repo, N: nouns::Repo>(
     }
     .ok_or_eyre("there are no words available for asking. Have you added some?")
     .map_err(ErrorMessage::NoWordsAvailable)?;
-    let header_generated = header();
+
+    let header_generated = header(OffsetDateTime::now_utc(), chosen.1, 10);
 
     Ok::<(StatusCode, Markup), _>((
         StatusCode::OK,


@@ 179,13 182,16 @@ pub async fn home<A: attempt::Repo, N: nouns::Repo>(
 }
 
 #[instrument]
-fn header() -> Markup {
+fn header(date: OffsetDateTime, confidence: u8, how_many_words_today: u8) -> Markup {
     html!(
         div id="header-wrapper" {
             div id="logo-wrapper" {
-                img src="/logo.svg" width="100" alt="Der Die Das" {}
+                img id="logo" src="/logo.svg" width="350" alt="Der Die Das" {}
 
             }
+
+            (info_box(date, confidence,how_many_words_today ))
+
         }
     )
 }


@@ 255,3 261,21 @@ fn base_htmz() -> Markup {
         base target="htmz"{}
     )
 }
+
+fn info_box(date: time::OffsetDateTime, confidence: u8, how_many_words_today: u8) -> Markup {
+    html!(
+        div id="statistics-box" {
+            p class="date-wrapper" {
+                (format!("Date: {}.{}.{}", date.day(), date.month(), date.year() ))
+            }
+            hr{}
+            p class="todays-word" {
+                (format!("Your {}th word today", how_many_words_today ))
+            }
+            hr{}
+            p class="confidence" {
+                (format!("Confidence for word: {}", confidence ))
+            }
+        }
+    )
+}

@@ 7,48 7,83 @@ body {
 }
 
 header,
-body,
+main,
 footer {
   padding: 1em;
   width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
 }
 
 #header-wrapper {
+  width: 70em;
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-between;
+  align-content: center;
+  align-items: center;
+  border: 1px solid rgba(139, 42, 0, 1);
+  padding: 1em;
+  border-radius: 1em;
+  max-height: 50em;
+  box-shadow: -0.1em 0.1em 0;
+}
+
+#statistics-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
   align-content: center;
   align-items: center;
   padding: 1em;
   border: 1px solid rgba(139, 42, 0, 1);
   border-radius: 1em;
+  font-size: 1.5em;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color: rgba(139, 42, 0, 1);
+  box-shadow: -0.1em 0.1em 0;
 }
 
+#statistics-box hr {
+  width: 90%;
+
+
+  color: rgba(139, 42, 0, 1);
+}
+
+
+#logo-wrapper {
+  padding: 1em;
+}
 
 #logo {
   display: flex;
-  max-width: 10%;
-  min-width: 5%;
+  object-fit: contain;
+  max-height: 340px;
+
+
 }
 
 #quiz {
-  width: 100%;
+  width: 72em;
+  max-width: none;
   display: flex;
   flex-direction: row;
-  max-width: none;
-  justify-content: stretch;
+  justify-content: space-between;
   align-content: center;
   align-items: center;
   transition: all ease 0.5s;
 }
 
 #new-day-new-word {
+  flex-grow: 102;
   display: flex;
   flex-direction: column;
   justify-items: stretch;
   align-items: center;
-
-
   column-gap: 0px;
   padding: 0.7em;
   font-size: 3.5em;


@@ 93,6 128,7 @@ footer {
   max-width: none;
   min-width: 50%;
   justify-content: space-evenly;
+  box-shadow: -0.1em 0.1em 0;
 
 }