dec17
This commit is contained in:
Xsivax
parent
4ce38f93a9
commit
623e130a5d
10 changed files with 277 additions and 112 deletions
|
|
@ -133,5 +133,31 @@ pub async fn off( req: HttpRequest ) -> Result<HttpResponse, Error> {
|
||||||
).await
|
).await
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// test
|
||||||
|
// load info template when click on link in svg
|
||||||
|
|
||||||
|
pub async fn robot( req: HttpRequest ) -> Result<HttpResponse, Error> {
|
||||||
|
// 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
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,9 +12,6 @@ pub struct TplIndex<'a> {
|
||||||
pub lang: &'a str,
|
pub lang: &'a str,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#[derive(Template)]
|
#[derive(Template)]
|
||||||
// define path to use template in
|
// define path to use template in
|
||||||
#[template(path="hemp.html")]
|
#[template(path="hemp.html")]
|
||||||
|
|
@ -55,6 +52,18 @@ pub struct TplOff<'a> {
|
||||||
pub lang: &'a str,
|
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
|
// linked to error template
|
||||||
#[derive(Template)]
|
#[derive(Template)]
|
||||||
#[template(path="error.html")]
|
#[template(path="error.html")]
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,10 @@ async fn main() -> std::io::Result<()> {
|
||||||
.route("/kaoscube", web::get().to(route::cube))
|
.route("/kaoscube", web::get().to(route::cube))
|
||||||
.route("/cyberpreneur", web::get().to(route::cyber))
|
.route("/cyberpreneur", web::get().to(route::cyber))
|
||||||
.route("/offgrid", web::get().to(route::off))
|
.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")?
|
.bind("0.0.0.0:5000")?
|
||||||
.run()
|
.run()
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,176 @@
|
||||||
.box {
|
/* Test */
|
||||||
z-index: 1000;
|
/* only load with child template */
|
||||||
position: fixed;
|
|
||||||
max-height: 60vh;
|
.mobile_placeholder {
|
||||||
max-width: 80vw;
|
|
||||||
top: 680px;
|
|
||||||
left: 155px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0;
|
justify-content: center;
|
||||||
background-color: fuchsia;
|
|
||||||
opacity: 85%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -107,6 +107,8 @@
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
top: unset;
|
||||||
|
left: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation input:checked ~ .hamburger {
|
.navigation input:checked ~ .hamburger {
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ svg {
|
||||||
}
|
}
|
||||||
|
|
||||||
.nodes {
|
.nodes {
|
||||||
stroke: #afb3b6;
|
stroke: #8693AB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nodes:active, .nodes:hover {
|
.nodes:active, .nodes:hover {
|
||||||
|
|
@ -35,7 +35,7 @@ svg {
|
||||||
@keyframes svg_pulse {
|
@keyframes svg_pulse {
|
||||||
0% {
|
0% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
stroke: #00ffef;
|
stroke: #8693AB;
|
||||||
}
|
}
|
||||||
|
|
||||||
20% {
|
20% {
|
||||||
|
|
@ -44,7 +44,7 @@ svg {
|
||||||
|
|
||||||
80% {
|
80% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
stroke: #7df9ff;
|
stroke: #BDD4E7;
|
||||||
}
|
}
|
||||||
|
|
||||||
80% {
|
80% {
|
||||||
|
|
@ -53,7 +53,7 @@ svg {
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
stroke: #00ffef;
|
stroke: #8693AB;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -149,81 +149,24 @@ svg {
|
||||||
|
|
||||||
@keyframes glowing {
|
@keyframes glowing {
|
||||||
0% {
|
0% {
|
||||||
stroke: #00ffef;
|
stroke: #8693AB;
|
||||||
|
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
stroke: #7df9ff;
|
stroke: #BDD4E7;
|
||||||
|
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
stroke: #00ffef;
|
stroke: #8693AB;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Test */
|
@media (min-width: 768px) {
|
||||||
|
svg {
|
||||||
|
max-height: 100vh;
|
||||||
|
max-width: 65vw;
|
||||||
|
|
||||||
.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');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -242,3 +185,5 @@ input:hover ~ .close {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
BIN
templates/assets/img/spider_out_bw.webp
Normal file
BIN
templates/assets/img/spider_out_bw.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
|
|
@ -13,7 +13,9 @@
|
||||||
<link rel="stylesheet" href="/assets/css/nav.css" />
|
<link rel="stylesheet" href="/assets/css/nav.css" />
|
||||||
<link rel="stylesheet" href="/assets/css/footer.css" />
|
<link rel="stylesheet" href="/assets/css/footer.css" />
|
||||||
<link rel="stylesheet" href="/assets/css/nojs_net.css" />
|
<link rel="stylesheet" href="/assets/css/nojs_net.css" />
|
||||||
<title>Cannabinieri</title>
|
|
||||||
|
<link rel="stylesheet" href="/assets/css/box.css"/>
|
||||||
|
<title>Cyberpreneur</title>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -50,8 +50,8 @@
|
||||||
<g class="group_1">
|
<g class="group_1">
|
||||||
<path id="edge_1" class="edges" d="m33.037 28.44c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.6458"/>
|
<path id="edge_1" class="edges" d="m33.037 28.44c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.6458"/>
|
||||||
<path id="edge_2" class="edges" d="m21.599 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
|
<path id="edge_2" class="edges" d="m21.599 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
|
||||||
|
<!-- on click open info template -->
|
||||||
<a href="/spider_info">
|
<a href="/robot">
|
||||||
<ellipse id="circle_one" class="nodes" cx="35" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#spiderpi)"/>
|
<ellipse id="circle_one" class="nodes" cx="35" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#spiderpi)"/>
|
||||||
</a>
|
</a>
|
||||||
</g>
|
</g>
|
||||||
|
|
@ -90,28 +90,8 @@
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div class="mobile_placeholder">
|
{% block child %} {% endblock %}
|
||||||
<!--info windows-->
|
|
||||||
|
|
||||||
<input type="checkbox" class="toggle_info">
|
|
||||||
<svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="myGradient" gradientTransform="rotate(90)">
|
|
||||||
<stop offset="5%" stop-color="#8693AB" />
|
|
||||||
<stop offset="95%" stop-color="#BDD4E7" />
|
|
||||||
</linearGradient>
|
|
||||||
|
|
||||||
<linearGradient id="myGradient2" gradientTransform="rotate(45)">
|
|
||||||
<stop offset="5%" stop-color="#BDD4E7" />
|
|
||||||
<stop offset="95%" stop-color="#8693AB" />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
||||||
</svg>
|
|
||||||
<div class="open"></div>
|
|
||||||
{# {% block child %} {% endblock %} #}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Get requests, load templates, inherit index.html, alt Post and foregnelement form in svg -->
|
<!-- Get requests, load templates, inherit index.html, alt Post and foregnelement form in svg -->
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,41 @@
|
||||||
{% extends "index.html" %}
|
{% extends "index.html" %}
|
||||||
{% block head %}
|
|
||||||
{{ super() }}
|
<!-- load into index template -->
|
||||||
<link rel="stylesheet" href="box.css"/>
|
|
||||||
{% endbock%}
|
|
||||||
{% block child %}
|
{% block child %}
|
||||||
<h1>Hello from child template 1 !</h1>
|
<div class="mobile_placeholder">
|
||||||
|
<form action="/" method="get">
|
||||||
|
<input type="submit">
|
||||||
|
<svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="myGradient" gradientTransform="rotate(90)">
|
||||||
|
<stop offset="5%" stop-color="#8693AB" />
|
||||||
|
<stop offset="95%" stop-color="#BDD4E7" />
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<linearGradient id="myGradient2" gradientTransform="rotate(45)">
|
||||||
|
<stop offset="5%" stop-color="#BDD4E7" />
|
||||||
|
<stop offset="95%" stop-color="#8693AB" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||||
|
</svg>
|
||||||
|
</form>
|
||||||
|
<div class="open">
|
||||||
|
{# Test - add language handling#}
|
||||||
|
<div class="box">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Tekla</h2>
|
||||||
|
<h3>Automatic Biodynamic Gardening for Everyone</h3>
|
||||||
|
<p>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.
|
||||||
|
</p>
|
||||||
|
<a href="/spider">MORE</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
{% endblock%}
|
{% endblock%}
|
||||||
Loading…
Reference in a new issue