404: add page

src/main.rs

@@ -1,4 +1,4 @@
-use agahnim_web_v2::templates::index::home;
+use agahnim_web_v2::templates::{index::home, notfound::notfound};
 use axum::{Router, routing::get};
 use tower_http::services::ServeDir;
 #[cfg(debug_assertions)]
@@ -8,7 +8,8 @@ use tower_livereload::LiveReloadLayer;
 async fn main() {
     let app = Router::new()
         .route("/", get(home))
-        .nest_service("/static", ServeDir::new("static"));
+        .nest_service("/static", ServeDir::new("static"))
+        .fallback(notfound);
 
     // We need to include this flag so that the live reload layer isn't included when the server is built
     #[cfg(debug_assertions)]

src/templates/mod.rs

@@ -1 +1,2 @@
 pub mod index;
+pub mod notfound;

src/templates/notfound.rs

@@ -0,0 +1,10 @@
+use askama::Template;
+use axum::response::{Html, IntoResponse};
+
+#[derive(Template)]
+#[template(path = "notfound.html")]
+struct NotfoundTemplate;
+
+pub async fn notfound() -> impl IntoResponse {
+    Html(NotfoundTemplate.render().unwrap())
+}

static/style.css

@@ -81,3 +81,23 @@ home-content {
   justify-content: center;
   align-items: center;
 }
+
+/* 404 */
+katcenkat {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    transition: opacity 5s ease, transform 5s ease-out;
+    opacity: 1;
+    transform: translateY(0px);
+
+    @starting-style {
+      opacity: 0;
+      transform: translateY(500px);
+    }
+  }
+}

templates/notfound.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+
+{% block content %}
+<katcenkat>
+  <img src="/static/assets/images/notfound.webp" />
+  <img src="/static/assets/images/leuf.webp" />
+</katcenkat>
+{% endblock %}