You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
6.4 KiB
HTML
209 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>MEGASTUDIO 🎯</title>
|
|
<link rel="stylesheet" type="text/css" href="/static/style.css" />
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<meta name="description" content="" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="layer_dark"></div>
|
|
|
|
<button id="close_all">X</button>
|
|
|
|
<button id="instruction_button">INSTRUCTION</button>
|
|
<div class="popup" id="instruction">dai è semplice, prova</div>
|
|
|
|
<button id="info_button">INFO</button>
|
|
<div class="popup" id="info">{{stack|safe}}</div>
|
|
|
|
|
|
<!-- <form action="/print" method="POST">
|
|
<input id="output" type="submit" value="PRINT"/>
|
|
</form> -->
|
|
<input id="output" type="submit" form="2print" value="PRINT" />
|
|
|
|
|
|
<button id="nav_button"></button>
|
|
<button id="custom_button"></button>
|
|
|
|
<div class="slider">
|
|
<input type="range" min="0" max="100" oninput="scivolo(this.value)">
|
|
<!-- <p id="rangeValue">100</p> -->
|
|
</div>
|
|
|
|
<div id="customizer">
|
|
<button id="darkbck">Dark</button>
|
|
<button onclick="">tema</button>
|
|
<button onclick="">tema</button>
|
|
<button onclick="">tema</button>
|
|
<button onclick="">tema</button>
|
|
</div>
|
|
|
|
|
|
<div id="navbar">
|
|
{% for key in data %}
|
|
<ul>
|
|
<li><a href="#{{key}}">{{key}}</a></li>
|
|
<ul>
|
|
<li>Box</li>
|
|
<ul>
|
|
{% for z in data[key][box]%}
|
|
<li><a href="{{rut}}{{key}}/{{box}}/{{z}}" download>{{z}}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</ul>
|
|
<ul>
|
|
<li>Showbar</li>
|
|
<ul>
|
|
{% for z in data[key][box]%}
|
|
<li><a href="{{rut}}{{key}}/{{showbar}}/{{z}}" download>{{z}}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</ul>
|
|
</ul>
|
|
{% endfor %}
|
|
|
|
<ul>
|
|
<li><a href="#(DE)Tour">(DE)Tour</a></li>
|
|
{% for key in dataDetour %}
|
|
<ul>
|
|
<li>{{key}}</li>
|
|
<ul>
|
|
<li>Box</li>
|
|
<ul>
|
|
{% for z in dataDetour[key][box]%}
|
|
<li><a href="{{rutDetour}}{{key}}/{{box}}/{{z}}" download>{{z}}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</ul>
|
|
<ul>
|
|
<li>Showbar</li>
|
|
<ul>
|
|
{% for z in dataDetour[key][box]%}
|
|
<li><a href="{{rutDetour}}{{key}}/{{showbar}}/{{z}}" download>{{z}}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</ul>
|
|
</ul>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<form action="/print/" id="2print" method="POST">
|
|
</form>
|
|
|
|
<div class="container">
|
|
<input class="selector2print" type="checkbox" name="test" form="2print" value="(DE)Tour">
|
|
<input class="sliderLayout" id="(DE)TourL" type="range" name="(DE)Tour" form="2print" min="0" max="4" value="0"
|
|
oninput="layout(this.value,this.id)">
|
|
|
|
<div class="box (DE)Tour" id="(DE)Tour">
|
|
{% for key in dataDetour %}
|
|
{% for z in dataDetour[key][box]%}
|
|
{% if z.endswith("jpg") or z.endswith("jpeg") or z.endswith("png") or z.endswith("JPG") or z.endswith("JPEG") %}
|
|
<img src="{{rutDetour}}{{key}}/{{box}}/{{z}}">
|
|
{% elif z.endswith("tif")%}
|
|
<span></span>
|
|
{% else %}
|
|
<div>{{z|safe}}</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% for key in data %}
|
|
<div class="container">
|
|
|
|
<input class="selector2print" type="checkbox" name="test" form="2print" value="{{key}}">
|
|
<input class="sliderLayout" id="{{key}}L" type="range" name="{{key}}" form="2print" min="0" max="4" value="0" oninput="layout(this.value,this.id)">
|
|
|
|
|
|
<div class="showbar {{key}}">
|
|
{% for z in data[key][showbar]%}
|
|
{% if z.endswith("jpg") or z.endswith("jpeg") or z.endswith("png") or z.endswith("JPG") or z.endswith("JPEG") %}
|
|
<img src="{{rut}}{{key}}/{{showbar}}/{{z}}">
|
|
{% elif z.endswith("tif")%}
|
|
<span></span>
|
|
{% else %}
|
|
<div>{{z|safe}}</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="box {{key}}" id="{{key}}">
|
|
{% for z in data[key][box]%}
|
|
{% if z.endswith("jpg") or z.endswith("jpeg") or z.endswith("png") or z.endswith("JPG") or z.endswith("JPEG") %}
|
|
<img src="{{rut}}{{key}}/{{box}}/{{z}}">
|
|
{% elif z.endswith("tif")%}
|
|
<span></span>
|
|
{% else %}
|
|
<div>{{z|safe}}</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
|
|
<span class="title">{{key}}</span>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<script>
|
|
var container = [...document.getElementsByClassName("container")]
|
|
var showbar = [...document.getElementsByClassName("showbar")];
|
|
let slider = ''
|
|
|
|
if (localStorage.getItem("slider")){
|
|
storedValue = localStorage.getItem("slider")
|
|
slider = storedValue
|
|
document.querySelector(".showbar.Commensality").style.display = "block"
|
|
scivolo(slider)
|
|
|
|
}
|
|
else {
|
|
slider = 75
|
|
document.querySelector(".showbar.Commensality").style.display = "block"
|
|
scivolo(slider)
|
|
}
|
|
|
|
document.querySelector(".slider input").value = slider
|
|
|
|
function scivolo(value) {
|
|
localStorage.setItem('slider', value)
|
|
// console.log(value)
|
|
showbar.forEach(bar => {
|
|
bar.style.width = (100 - value) + '%'
|
|
});
|
|
container.forEach(current => {
|
|
current.style.width = value + '%';
|
|
});
|
|
}
|
|
|
|
function layout(val,which){
|
|
let currentClass = " containers"+val
|
|
let currentEl = which.slice(0, which.length - 1)
|
|
document.getElementById(currentEl).className = currentClass + ' box ' + currentEl
|
|
localStorage.setItem(currentEl, currentClass + ' box ' + currentEl)
|
|
|
|
console.log(which)
|
|
console.log(val)
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<script src="/static/app.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |