Updated pages to use the changed html elements

This commit is contained in:
2025-10-06 22:32:18 +02:00
parent bcd50d3a17
commit 3e2987ad0c
4 changed files with 145 additions and 26 deletions

21
assets/css/project.css Normal file
View File

@@ -0,0 +1,21 @@
h1 {
font-family: 'Indie Flower', cursive;
font-size: 75px;
text-align: center;
color: var(--clr-primary-a60);
}
p {
font-family: Lexend, serif;
color: var(--clr-primary-a60);
width: fit-content;
margin: 8px auto 8px auto;
font-size: 24px;
}
@media (width <= 750px) {
p {
max-width: 90vw;
font-size: 20px;
}
}

View File

@@ -1,14 +1,66 @@
.project {
display: flex;
flex-direction: column;
background-color: rgba(50,50,75,0.8);
background-image: radial-gradient(circle at top left, var(--clr-primary-a10), var(--clr-primary-a50));
border-radius: 12px;
max-width: 40vw;
height: 250px;
margin: 8px auto 8px auto;
padding: 8px;
}
.project-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
margin: 0 4px 4px 4px;
}
.project > h1 {
flex-grow: 1;
color: white;
font-family: 'Indie Flower', cursive;
width: fit-content;
font-size: 40px;
margin: 8px;
}
.project-desc {
color: white;
font-family: Lexend, serif;
width: fit-content;
margin: 0;
}
.project-view {
align-self: flex-end;
width: fit-content;
font-family: Lexend, serif;
text-align: right;
}
h1 {
font-family: 'Indie Flower', cursive;
font-size: 60px;
text-align: center;
color: var(--clr-primary-a60);
}
h2 {
font-family: 'Indie Flower', cursive;
font-size: 40px;
text-align: center;
color: var(--clr-primary-a60);
}
@media (width <= 750px) {
.project {
max-width: 80vw;
height: 150px;
}
h2 {
font-size: 24px;
}
}

View File

@@ -6,33 +6,38 @@ use crate::html::{Page, Render};
use actix_web::{Responder, get};
pub(crate) struct BasePage {
page: Page
page: Page,
}
impl BasePage {
pub(crate) fn new(title: &'static str) -> Self {
pub(crate) fn new<T>(title: T) -> Self
where
T: Into<String>,
{
let mut page = Page::new(title);
// header
let mut header = div::new("header", vec!["header"]);
let name = p::new("name", vec!["name"], "AINDUSTRIES".to_string());
let name = p::new("name", vec!["name"], "AINDUSTRIES");
let mut buttons = div::new("buttons", vec!["nav-buttons"]);
let home = a::new("home", vec!["nav-button"], "/", "Home".to_string());
let projects = a::new("projects", vec!["nav-button"], "/projects", "Projects".to_string());
let home = a::new("home", vec!["nav-button"], "/", "Home");
let projects = a::new("projects", vec!["nav-button"], "/projects", "Projects");
buttons.append_element(home);
buttons.append_element(projects);
header.append_element(name);
header.append_element(buttons);
// background
let image = img::new("background", vec!["background"], "static/img/background.png");
let image = img::new(
"background",
vec!["background"],
"/static/img/background.png",
);
// css
let base = link::new("stylesheet", "static/css/base.css");
let base = link::new("stylesheet", "/static/css/base.css");
// add elements to the page in order
page.append_element_to_head(base);
page.append_element_to_body(image);
page.append_element_to_body(header);
Self {
page
}
Self { page }
}
pub(crate) fn append_element_to_head(&mut self, element: impl Render + 'static) {
@@ -54,10 +59,12 @@ async fn index() -> impl Responder {
let mut page = BasePage::new("AINDUSTRIES");
// introduction
let mut intro = div::new("intro", vec!["intro"]);
let hi = h1::new("Hello and welcome!".to_string());
let detail = h2::new("This here is a small website to show the passion I have for computers.<br>\
let hi = h1::new("Hello and welcome!");
let detail = h2::new(
"This here is a small website to show the passion I have for computers.<br>\
I have always had a good time creating and discovering new things.<br>\
Your may discover some of my projects here on this showcase.".to_string());
Your may discover some of my projects here on this showcase.",
);
intro.append_element(hi);
intro.append_element(detail);
// css

View File

@@ -1,25 +1,64 @@
use actix_web::{get, Responder};
use crate::html::elements::{div, h1, p, a, link};
use crate::html::{Render};
use super::BasePage;
use crate::html::Render;
use crate::html::elements::{a, div, h1, h2, link, p};
use actix_web::{Responder, get, web};
#[get("/projects")]
async fn projects() -> impl Responder {
let mut page = BasePage::new("Projects");
let title = h1::new("My projects");
let desc = h2::new(
"Here you will find all my projects which deserve to be shown<br>\
(I've done a lot of small projects but they are not worth it.)",
);
let mut website = div::new("project-website", vec!["project"]);
let title = h1::new("Website".to_string());
let desc = p::new("website-desc", vec!["project-desc"], "This project is the website you are currently on.".to_string());
let view = a::new("website-view", vec!["project-view"], "website" , "View More".to_string());
website.append_element(title);
website.append_element(desc);
website.append_element(view);
let website_title = h1::new("Website");
let mut info = div::new("project-website-info", vec!["project-info"]);
let website_desc = p::new(
"website-desc",
vec!["project-desc"],
"This project is the website you currently are on.",
);
let view = a::new(
"website-view",
vec!["project-view"],
"/projects/website",
"Learn More",
);
info.append_element(website_desc);
info.append_element(view);
website.append_element(website_title);
website.append_element(info);
let css = link::new("stylesheet", "/static/css/projects.css");
page.append_element_to_head(css);
page.append_element_to_body(title);
page.append_element_to_body(desc);
page.append_element_to_body(website);
page.render()
}
#[get("/projects/{project}")]
async fn project() -> impl Responder {
let page = BasePage::new("Project");
async fn project(project: web::Path<String>) -> impl Responder {
let project = project.into_inner();
let mut page = BasePage::new(format!("Project-{}", project));
match project.as_str() {
"website" => {
let title = h1::new("Website");
let desc = p::new(
"description",
vec!["description"],
"This project, the website you are on, \
is made in Rust such that all the pages are generated by code.<br>\
That is that each html element is represented by a struct which implements the Render trait (as in render the element to html).<br>\
As it is right now the system is not that impressive but I believe it can do amazing things in the futur.<br>\
<br>\
Wish to see more? Check out the gitea repository: ",
);
page.append_element_to_body(title);
page.append_element_to_body(desc);
}
_ => {}
}
let css = link::new("stylesheet", "/static/css/project.css");
page.append_element_to_head(css);
page.render()
}