M .gitignore → .gitignore

@@ -0,0 +1,2 @@
+*.lock
+target

A Cargo.toml

@@ -0,0 +1,10 @@
+[package]
+name = "breadsite"
+version = "0.1.0"
+edition = "2024"
+
+[dependencies]
+maud = { version = "*", features = ["actix-web"] }
+actix-web = "*"
+actix-files = "*"
+chrono = "*"

A src/main.rs

@@ -0,0 +1,87 @@
+use actix_web::{get, App, HttpServer, Result as AwResult};
+use actix_files::Files;
+use maud::{DOCTYPE, html, Markup};
+use std::io;
+use chrono::Local;
+
+fn head(page_title: &str) -> Markup {
+    html! {
+        (DOCTYPE)
+        head {
+            meta charset="utf-8";
+            title { (page_title) }
+            link rel="stylesheet" href="static/style.css";
+        }
+    }
+}
+
+fn segment_bar(count: i32, progress: i32) -> Markup {
+    html!(
+        div.segments {
+            @for i in 0..count {
+                @if i >= progress {
+                    (segment(false))
+                } @else {
+                    (segment(true))
+                }
+            }
+        }
+    )
+}
+
+fn segment(activated: bool) -> Markup {
+    html! {
+        @if activated {
+            div.segment.activated{}
+        } @else {
+            div.segment{}
+        }
+    }
+}
+
+fn container(content: Markup) -> Markup {
+    html! {
+        div.container {
+            ( content )
+        }
+    }
+}
+
+fn layout() -> Markup {
+    let time = Local::now();
+    html! {
+        (container(html!(
+            h1 { (time) }
+            h2 { (time) }
+            h3 { (time) }
+            ( segment_bar(10, 4) )
+        )))
+    }
+}
+
+fn page() -> Markup {
+    html! {
+        (head("breadsite"))
+        body {
+            (layout())
+        }
+    }
+}
+
+#[get("/")]
+async fn index() -> AwResult<Markup> {
+    Ok(html! {
+        (page())
+    })
+}
+
+#[actix_web::main]
+async fn main() -> io::Result<()> {
+    HttpServer::new(|| App::new()
+        .service(index)
+        .service(Files::new("/static", "./static"))
+    )
+        .bind(("localhost", 8080))?
+        .run()
+        .await
+}

A static/style.css

@@ -0,0 +1,51 @@
+:root {
+    --text: #000;
+    --background: #fff;
+    --primary: #0f0;
+    --secondary: #f0f;
+    --cell: #ff0;
+    --activated: #0ff;
+}
+
+body {
+    background-color: var(--background);
+    color: var(--text);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+}
+
+* {
+    overflow: hidden;
+    /* border: 1px solid var(--text); */
+}
+
+.container {
+    width: 90vh;
+    height: 90vh;
+    margin: auto;
+    background-color: var(--primary);
+    border-radius: 5%;
+}
+
+.segments {
+    display: flex;
+    gap: 1%;
+    height: 3%;
+    width: auto;
+}
+
+.segment {
+    border-radius: 10%;
+    width: 100%;
+    height: 100%;
+    background: var(--cell);
+}
+
+.activated {
+    background: var(--activated);
+}