1 files changed, 61 insertions, 5 deletions

diff --git a/src/story.rs b/src/story.rs
index c5371ee..716b4ae 100644
--- a/src/story.rs
+++ b/src/story.rs
@@ -1,6 +1,6 @@
 use crate::page;
 use anyhow::Result;
-use maud::{html, Markup};
+use maud::{html, Markup, PreEscaped};
 use serde::Deserialize;
 use toml::value::Date;
 
@@ -11,8 +11,24 @@ impl page::Page for Vec<Story> {
 
     fn render_content(&self) -> Markup {
         html!(
-            @for story in self {
-                (story.render_as_card())
+            section class="stories" {
+                div class="stories-filter" {
+                    label for="all" {
+                        input type="radio" id="all" name="language" checked;
+                        "All"
+                    }
+                    label for="de" {
+                        input type="radio" id="de" name="language";
+                        "German"
+                    }
+                    label for="en" {
+                        input type="radio" id="en" name="language";
+                        "English"
+                    }
+                }
+                @for story in self {
+                    (story.render_as_card())
+                }
             }
         )
     }
@@ -31,7 +47,8 @@ impl page::Page for Vec<Story> {
 
     fn content_style() -> Markup {
         html!(
-        """
+            (PreEscaped(
+                r#"
 h2 {
     font-size: 1.8rem;
     margin-bottom: 2rem;
@@ -88,7 +105,46 @@ hr {
         width: fit-content;
     }
 }
-        """
+
+.stories:has(input:checked) .story-card {
+    display: none;
+}
+
+.stories:has(#all:checked) .story-card,
+.stories:has(#de:checked) .story-card[lang="de"],
+.stories:has(#en:checked) .story-card[lang="en"] {
+    display: block;
+}
+
+.stories-filter {
+  display: flex;
+  align-items: center;
+  border: .1rem dotted #000;
+  margin: 3rem;
+  width: fit-content;
+  border:.1rem dotted #000;
+  label {
+    margin: 0.8rem;
+    padding: .8rem;
+  }
+  input {
+    margin-right: 0.5rem;
+    appearance: none;
+  }
+
+  label:hover {
+    cursor: pointer;
+    color: #11396A;
+  }
+
+  label:has(input:checked) {
+    color: #FFD1A3;
+    background-color: #11396A;
+    #background-color: #2F3C57;
+  }
+}
+"#
+            ))
         )
     }
 }