You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
7.2 KiB
236 lines
7.2 KiB
<!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="" />
|
|
<!-- <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> -->
|
|
</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">eheh megastudio etcetc...</div>
|
|
|
|
<button id="output">PRINT!</button>
|
|
|
|
<button id="nav_button"></button>
|
|
<button id="show_button"></button>
|
|
|
|
<div class="slider">
|
|
<input type="range" min="0" max="100" value="75" oninput="scivolo(this.value)">
|
|
<!-- <p id="rangeValue">100</p> -->
|
|
</div>
|
|
|
|
<div id="navbar">
|
|
<!-- <div>
|
|
<button>O</button>
|
|
</div> -->
|
|
{% for key in data %}
|
|
<ul>
|
|
<li><a href="#{{key}}">{{key}}</a></li>
|
|
<ul>
|
|
{% for z in data[key]%}
|
|
<li><a href="{{folder}}{{key}}/{{z}}" download>{{z}}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</ul>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% for key in data %}
|
|
<div class="container">
|
|
|
|
<input type="checkbox" name="test" value="0">
|
|
|
|
<div class="showbar {{key}}">
|
|
<img src="{{folder}}{{key}}/{{z}}">
|
|
</div>
|
|
|
|
<div class="box {{key}}" id="{{key}}">
|
|
{% for z in data[key]%}
|
|
<img src="{{folder}}{{key}}/{{z}}">
|
|
<!-- <span>{{key}}</span> -->
|
|
{% endfor %}
|
|
</div>
|
|
<span class="title">{{key}}</span>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
// let test = {
|
|
// "Commensality": [
|
|
// "DSC_1068.JPG",
|
|
// "blossom-in-the-dark_DSC5208-20.jpg",
|
|
// "habitat-scansioni 19.png",
|
|
// "punkerotti.jpeg",
|
|
// "001386250014.jpeg",
|
|
// "elena_mappa.jpeg",
|
|
// "ricetta-focaccia-dj-rou.jpeg",
|
|
// "000036.JPG",
|
|
// "2021-11-05 10.31.05.jpg",
|
|
// "cc-35mm-epson-v850-habitat-portra-400-roll-01-28.tif",
|
|
// "matteo-viviani-conviviality.jpeg",
|
|
// "habitat-scansioni 18.jpeg",
|
|
// "DSC_1042.JPG",
|
|
// "band back certificate.jpg",
|
|
// "Broadcast 1.jpeg"
|
|
// ],
|
|
// "box3": [
|
|
// "6.jpg",
|
|
// "7.jpg",
|
|
// "4.jpg",
|
|
// "10.jpg",
|
|
// "12.jpg",
|
|
// "3.jpg",
|
|
// "dfg,mb eflven\ndlvjkndvj\n\ndvojenvojdbvieb",
|
|
// "8.jpg",
|
|
// "11.jpg",
|
|
// "0.jpg",
|
|
// "9.jpg",
|
|
// "1.jpg",
|
|
// "2.jpg",
|
|
// "5.jpg",
|
|
// "4:2.jpg"
|
|
// ],
|
|
// "structure": [
|
|
// "6..png",
|
|
// "9.png",
|
|
// "2.png",
|
|
// "11.png",
|
|
// "1.png",
|
|
// "10.png",
|
|
// "7.png",
|
|
// "4.png",
|
|
// "13.png",
|
|
// "<h1>This is a Markdown</h1>\n<p>let's try</p>\n<p>con markdown puoi fare <strong>cos\u00ec</strong> ma anche <em>cos\u00ec</em></p>\n<p>e facciamo</p>\n<ul>\n<li>le</li>\n<li>liste\n** opl\u00e0</li>\n<li>eh gi\u00e0</li>\n</ul>\n<p>#uno\n#dueo</p>\n",
|
|
// "3.png",
|
|
// "8.png",
|
|
// "14.png",
|
|
// "5.png",
|
|
// "12.png"
|
|
// ],
|
|
// "cover": [
|
|
// "spiral-cover.png",
|
|
// "spiral-cover2.png"
|
|
// ],
|
|
// "materisl": [
|
|
// "kitchen stillife ira 4.jpg",
|
|
// "kitchen stillife ira 9.jpg",
|
|
// "kitchen stillife ira 3.jpg",
|
|
// "kitchen stillife ira 6.jpg",
|
|
// "kitchen stillife ira 7.jpg",
|
|
// "kitchen stillife ira 2.jpg",
|
|
// "kitchen stillife ira 1.jpg",
|
|
// "kitchen stillife ira 5.jpg",
|
|
// "kitchen stillife ira 8.jpg"
|
|
// ],
|
|
// "_frames": [
|
|
// "frame_1.svg",
|
|
// "frame_3.svg",
|
|
// "frame_2.svg"
|
|
// ]
|
|
// }
|
|
|
|
|
|
var boxes = [...document.getElementsByClassName("box")];
|
|
boxes.forEach(box => {
|
|
let key = box.className.split(" ")
|
|
let lista = test[key[1]]
|
|
// console.log(key[1])
|
|
// document.getElementById(key).style.color = "red"
|
|
|
|
let table = ''
|
|
lista.forEach(li => {
|
|
// box.addEventListener("mouseover", function () { document.querySelector(`.showbar`).style.display = "none"; document.querySelector(`.showbar .${li}`).style.display = "block" })
|
|
|
|
console.log(li)
|
|
if (li.endsWith("jpg") || li.endsWith("jpeg") || li.endsWith("png") || li.endsWith("JPG") || li.endsWith("svg")) {
|
|
// console.log('ciao')
|
|
table += "<img src='"
|
|
table += "./static/assets/" + key[1] + '/' + li
|
|
table += "'><br>"
|
|
} else {
|
|
table += "<span>"
|
|
table += li
|
|
table += "'</span><br>"
|
|
}
|
|
}
|
|
);
|
|
|
|
|
|
function showBar() {
|
|
if (document.getElementById("showbar").style.display == "block") {
|
|
document.getElementById("showbar").innerHTML = table
|
|
}
|
|
console.log(`o${key}`)
|
|
|
|
|
|
//document.getElementById("fs").className = ".current"
|
|
|
|
// }
|
|
// function lessBar() {
|
|
// document.getElementById("showbar").innerHTML = ""
|
|
// document.getElementById("showbar").style.display = "none"
|
|
// }
|
|
box.addEventListener("mouseover", function () { document.getElementById("showbar").innerHTML = table })
|
|
// box.addEventListener("mouseover", function () {
|
|
// console.log(`${key[1]}`)
|
|
// // let iddi = `o${key[1]}`
|
|
// document.getElementById(`${key[1]}`).click();
|
|
// // window.location.href = `https://platform.habitattt.it/#o${key[1]}`;
|
|
|
|
|
|
// })
|
|
});
|
|
|
|
function scivolo(value) {
|
|
console.log(value)
|
|
document.getElementById("showbar").style.width = ((100 - value) - 2) + '%'
|
|
var container = [...document.getElementsByClassName("container")]
|
|
container.forEach(current => {
|
|
current.style.width = value + '%';
|
|
|
|
});
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="/static/app.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
<!--
|
|
foreach folders:
|
|
make a div class="box"
|
|
|
|
--> |