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
|
||||
}
|
||||
|
||||
// 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,
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#[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")]
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -1,12 +1,176 @@
|
|||
.box {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
max-height: 60vh;
|
||||
max-width: 80vw;
|
||||
top: 680px;
|
||||
left: 155px;
|
||||
/* Test */
|
||||
/* only load with child template */
|
||||
|
||||
.mobile_placeholder {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
background-color: fuchsia;
|
||||
opacity: 85%;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
top: unset;
|
||||
left: unset;
|
||||
}
|
||||
|
||||
.navigation input:checked ~ .hamburger {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
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/footer.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 %}
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@
|
|||
<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_2" class="edges" d="m21.599 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
|
||||
|
||||
<a href="/spider_info">
|
||||
<!-- on click open info template -->
|
||||
<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)"/>
|
||||
</a>
|
||||
</g>
|
||||
|
|
@ -90,28 +90,8 @@
|
|||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="mobile_placeholder">
|
||||
<!--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>
|
||||
{% block child %} {% endblock %}
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Get requests, load templates, inherit index.html, alt Post and foregnelement form in svg -->
|
||||
|
|
|
|||
|
|
@ -1,8 +1,41 @@
|
|||
{% extends "index.html" %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="box.css"/>
|
||||
{% endbock%}
|
||||
|
||||
<!-- load into index template -->
|
||||
{% 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%}
|
||||
Loading…
Reference in a new issue