diff --git a/src/build_actix/route.rs b/src/build_actix/route.rs index ce34bdd..de96d4b 100644 --- a/src/build_actix/route.rs +++ b/src/build_actix/route.rs @@ -133,5 +133,31 @@ pub async fn off( req: HttpRequest ) -> Result { ).await } +// test +// load info template when click on link in svg + +pub async fn robot( req: HttpRequest ) -> Result { + // if response Ok return HttpResponseBuilder + HttpResponse::Ok() + // set response content type html + .content_type("text/html") + // set response body to template context + .body( + // render template context + template::TplRobot { + // lang to value of Accept-Language header + lang : &template::get_lang(&req), + } + + // render template context into String + .render() + .map_err( |e| { + eprintln!("error_tplrender : {}", e ); + error::crash( template::get_lang(&req), "error_tplrender" ) + })?, + ).await +} + + diff --git a/src/build_actix/template.rs b/src/build_actix/template.rs index 1297f85..9155890 100644 --- a/src/build_actix/template.rs +++ b/src/build_actix/template.rs @@ -12,9 +12,6 @@ pub struct TplIndex<'a> { pub lang: &'a str, } - - - #[derive(Template)] // define path to use template in #[template(path="hemp.html")] @@ -55,6 +52,18 @@ pub struct TplOff<'a> { pub lang: &'a str, } + +// test +// info template within index.html + +#[derive(Template)] +#[template(path="info.html")] +pub struct TplRobot<'a> { + pub lang: &'a str, +} + + + // linked to error template #[derive(Template)] #[template(path="error.html")] diff --git a/src/main.rs b/src/main.rs index 714b377..3e8e7dc 100644 --- a/src/main.rs +++ b/src/main.rs @@ -23,6 +23,10 @@ async fn main() -> std::io::Result<()> { .route("/kaoscube", web::get().to(route::cube)) .route("/cyberpreneur", web::get().to(route::cyber)) .route("/offgrid", web::get().to(route::off)) + + // test + // route of link in svg in index.html + .route("/robot", web::get().to(route::robot)) }) .bind("0.0.0.0:5000")? .run() diff --git a/templates/assets/css/box.css b/templates/assets/css/box.css index f5de7e1..bf5e860 100644 --- a/templates/assets/css/box.css +++ b/templates/assets/css/box.css @@ -1,12 +1,176 @@ -.box { - z-index: 1000; + /* Test */ + /* only load with child template */ + + .mobile_placeholder { + display: flex; + justify-content: center; +} + +.open { + position: fixed; + height: 70vh; + width: 90vw; + background-color: #fff; + top: 25vh; + display: grid; + grid-template-rows: repeat(4, 1fr); + border-style: solid; + border-image: linear-gradient(#BDD4E7, #8693AB) 30; +} + +.open .box { + /* background-image: url('/assets/img/spider_out_bw.webp'); */ + background-size: cover; + background-repeat: no-repeat; + height: inherit; + width: inherit; + opacity: 20%; + grid-row: 1/5; +} + +.content { + height: inherit; + width: inherit; + display: grid; + grid-template-rows: .5fr .25fr 1fr .45fr; +} + +.content h2 { + grid-row: 1; + display: grid; + justify-content: center; + align-items: center; + text-transform: uppercase; + font-size: 6.5vh; + margin: 6vh 0 4vh 0; +} + +.content h3 { + grid-row: 2; + display: grid; + text-transform: uppercase; + font-size: 3vh; + margin: 0; + line-height: 5vh; + text-align: center; +} + +.content p { + font-size: 1.5vh; + text-align: center; + line-height: 3.5vh; + margin-top: 2vh; +} + +.content a { + grid-row: 4; + display: grid; + justify-items: center; + align-items: center; + height: 4vh; + width: 10vw; + width: 30vw; + border: .5vw solid #000; + justify-self: center; + align-self: center; + margin-top: 2vh; + color: #000; + font-size: 1.95vh; + cursor: pointer; + z-index: 2; + background-position: right bottom; + transition: all .75s ease-out; +} + +.content a:hover { + background: linear-gradient(to right, #8693AB 5%, #BDD4E7 95%); + background-size: 200% 100%; + background-position: left bottom; + border: .5vw solid #8693AB; +} + + + +.close { + height: 10vh; + width: auto; + align-self: flex-start; + color: #e5e7e6; + position: fixed; + top: 15vh; + left: 80vw; +} + +input { + height: 20vw; + width: 20vh; + z-index: 200; + opacity: 0%; + cursor: pointer; position: fixed; + top: 15vh; + left: 80vw; +} + +input:checked ~ .open { + display: none; +} + +input:checked ~ .close { + display: none; +} + +input:hover ~ .close { + animation: shine 4s ease-in forwards; + +} + +@keyframes shine { + 0% { + stroke: url('#myGradient'); + + + } + 50% { + stroke: url('#myGradient2'); + + } + 100% { + stroke: url('#myGradient'); + } +} + +@media (min-height: 750px) { + .open { max-height: 60vh; - max-width: 80vw; - top: 680px; - left: 155px; - display: flex; - margin: 0; - background-color: fuchsia; - opacity: 85%; -} \ No newline at end of file + } +} + +@media (min-height: 800px) { + .open { + max-height: 55vh; + } +} + +@media (min-height: 880px) { + .open { + max-height: 45vh; + } +} + +@media (min-height: 1000px) { + .open { + max-height: 40vh; + } +} + + +@media (min-height: 1070px) { + .open { + max-height: 35vh; + } +} + + + + diff --git a/templates/assets/css/nav.css b/templates/assets/css/nav.css index 4b03d4d..342bef0 100644 --- a/templates/assets/css/nav.css +++ b/templates/assets/css/nav.css @@ -107,6 +107,8 @@ z-index: 3; cursor: pointer; opacity: 0; + top: unset; + left: unset; } .navigation input:checked ~ .hamburger { diff --git a/templates/assets/css/nojs_net.css b/templates/assets/css/nojs_net.css index f1d37a9..9df04cc 100644 --- a/templates/assets/css/nojs_net.css +++ b/templates/assets/css/nojs_net.css @@ -19,7 +19,7 @@ svg { } .nodes { - stroke: #afb3b6; + stroke: #8693AB; } .nodes:active, .nodes:hover { @@ -35,7 +35,7 @@ svg { @keyframes svg_pulse { 0% { transform: scale(1); - stroke: #00ffef; + stroke: #8693AB; } 20% { @@ -44,7 +44,7 @@ svg { 80% { transform: scale(1); - stroke: #7df9ff; + stroke: #BDD4E7; } 80% { @@ -53,7 +53,7 @@ svg { 100% { transform: scale(1); - stroke: #00ffef; + stroke: #8693AB; } } @@ -149,83 +149,28 @@ svg { @keyframes glowing { 0% { - stroke: #00ffef; + stroke: #8693AB; } 50% { - stroke: #7df9ff; + stroke: #BDD4E7; } 100% { - stroke: #00ffef; + stroke: #8693AB; } } - /* Test */ - - .mobile_placeholder { - display: flex; - justify-content: center; - } - - .open { - position: fixed; - height: 50vh; - width: 70vw; - background: #e5e7e6; - top: 25vh; - display: flex; - } - - .close { - height: 10vh; - width: auto; - align-self: flex-start; - color: #e5e7e6; - position: fixed; - top: 15vh; - } - - - - input { - height: 20vw; - width: 20vh; - z-index: 200; - opacity: 0%; - cursor: pointer; - position: fixed; - top: 15vh; - } - - input:checked ~ .open { - display: none; - } - - input:checked ~ .close { - display: none; -} - -input:hover ~ .close { - animation: shine 4s ease-in forwards; - -} - -@keyframes shine { - 0% { - stroke: url('#myGradient'); - - - } - 50% { - stroke: url('#myGradient2'); - - } - 100% { - stroke: url('#myGradient'); +@media (min-width: 768px) { + svg { + max-height: 100vh; + max-width: 65vw; + } } + + diff --git a/templates/assets/img/spider_out_bw.webp b/templates/assets/img/spider_out_bw.webp new file mode 100644 index 0000000..96ab7f5 Binary files /dev/null and b/templates/assets/img/spider_out_bw.webp differ diff --git a/templates/base.html b/templates/base.html index 5b5d54e..7e440d1 100644 --- a/templates/base.html +++ b/templates/base.html @@ -13,7 +13,9 @@ - Cannabinieri + + + Cyberpreneur {% endblock %} diff --git a/templates/index.html b/templates/index.html index 8d532e1..7f83f66 100644 --- a/templates/index.html +++ b/templates/index.html @@ -50,8 +50,8 @@ - - + + @@ -90,29 +90,9 @@ -
- - - - - - - - - - - - - - - - - -
- {# {% block child %} {% endblock %} #} +{% block child %} {% endblock %}
- diff --git a/templates/info.html b/templates/info.html index ca3f2a4..df2ece3 100644 --- a/templates/info.html +++ b/templates/info.html @@ -1,8 +1,41 @@ {% extends "index.html" %} -{% block head %} -{{ super() }} - -{% endbock%} + + {% block child %} -

Hello from child template 1 !

+
+
+ + + + + + + + + + + + + + + +
+
+ {# Test - add language handling#} +
+
+
+

Tekla

+

Automatic Biodynamic Gardening for Everyone

+

Tekla is a garden robot that makes automatic and biodynamic farming accessible for everyone. + The low-tech robot gathers informational and relational data in natural environments. + Communicating with the TeklApp it determines which organisms work best together in any given environment. + All Spiders communicate trough the network the Kaos Cube spins. + Tekla monitors the plants and takes care of their needs until it's time for it to harvest the free organic and local crops. +

+ MORE +
+
+ +
{% endblock%} \ No newline at end of file