poni 3 years ago
parent 452cee1914
commit 2d87fc16e3
  1. 1
      db.json
  2. BIN
      static/.DS_Store
  3. 178
      static/app.js
  4. 4
      static/pagedjs/interface.css
  5. 32736
      static/pagedjs/paged.js
  6. 32782
      static/pagedjs/paged.polyfill.js
  7. 18
      static/print.css
  8. 236
      static/style.css
  9. 122
      templates/index copy 2.html
  10. 236
      templates/index copy.html
  11. 149
      templates/index.html
  12. 27
      templates/old.html
  13. 60
      templates/prin.html

@ -0,0 +1 @@
{"Commensality": {"box": ["001386250014.jpeg", "000036.JPG", "blossom-in-the-dark_DSC5208-20.jpg", "band back certificate.jpg", "2021-11-05 10.31.05.jpg"], "showbar": ["matteo-viviani-conviviality.jpeg", "habitat-scansioni 18.jpeg", "elena_mappa.jpeg", "ricetta-focaccia-dj-rou.jpeg", "cc-35mm-epson-v850-habitat-portra-400-roll-01-28.tif", "habitat-scansioni 19.png", "punkerotti.jpeg", "Broadcast 1.jpeg", "DSC_1042.JPG", "DSC_1068.JPG"]}, "box3": {"box": ["8.jpg", "9.jpg", "12.jpg", "11.jpg", "4:2.jpg", "10.jpg", "5.jpg", "7.jpg", "6.jpg"], "showbar": ["dfg,mb eflven\ndlvjkndvj\n\ndvojenvojdbvieb", "4.jpg", "2.jpg", "3.jpg", "1.jpg", "0.jpg"]}, "_frames": {"box": ["frame_2.svg", "frame_3.svg", "frame_1.svg"], "showbar": ["frame_2.svg", "frame_3.svg", "frame_1.svg"]}, "materisl": {"box": ["kitchen stillife ira 5.jpg", "kitchen stillife ira 4.jpg", "kitchen stillife ira 6.jpg", "kitchen stillife ira 3.jpg", "kitchen stillife ira 2.jpg", "kitchen stillife ira 1.jpg"], "showbar": ["kitchen stillife ira 9.jpg", "kitchen stillife ira 8.jpg", "kitchen stillife ira 7.jpg"]}, "structure": {"box": ["2.png", "1.png"], "showbar": ["<h1>This is a Markdown</h1>\n<p>let&#x27;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", "8.png", "9.png", "14.png", "12.png", "13.png", "11.png", "10.png", "4.png", "5.png", "6..png", "7.png", "3.png"]}, "cover": {"box": ["spiral-cover2.png"], "showbar": ["spiral-cover.png"]}}

BIN
static/.DS_Store vendored

Binary file not shown.

@ -0,0 +1,178 @@
let menu = 0
let show = 0
let instruction = 0
let info = 0
let colors = ['#b4bddf', '#e4cd8c', 'rgb(228, 205, 254)', "white"]
// STYLishING
document.getElementsByTagName("body")[0].addEventListener("dblclick", function () {
// alert("cane")
let r = Math.floor(Math.random() * 3)
let r2 = r + 1
console.log(r)
document.getElementsByTagName("body")[0].style.background = colors[r]
document.getElementById("navbar").style.setProperty('--navbar_back', colors[r2]);
document.getElementById("customizer").style.setProperty('--navbar_back', colors[r2]);
if (r2 == 4) {
document.getElementById("navbar").style.setProperty('--navbar_text', 'black');
}
})
let dark = 0
document.getElementById("darkbck").addEventListener("click", function(){
if (dark==0){
document.body.style.background= "black"
dark++}
else if (dark ==1){
document.body.style.background= "white"
dark--
}
})
document.getElementById("nav_button").innerHTML = "OPEN TREE"
document.getElementById("custom_button").innerHTML = "OPEN CUSTOMIZER"
document.getElementById("nav_button").addEventListener("click", function () {
if (menu == 0) {
document.getElementById("nav_button").innerHTML = "CLOSE TREE"
document.getElementById("navbar").style.display = "block"
menu++
} else if (menu == 1) {
document.getElementById("nav_button").innerHTML = "OPEN TREE"
document.getElementById("navbar").style.display = "none"
menu = 0
}
})
document.getElementById("custom_button").addEventListener("click", function () {
if (show == 0) {
document.getElementById("custom_button").innerHTML = "CLOSE CUSTOMIZER"
document.getElementById("customizer").style.display = "block"
show++
} else if (show == 1) {
document.getElementById("custom_button").innerHTML = "OPEN CUSTOMIZER"
document.getElementById("customizer").style.display = "none"
show = 0
}
})
function dark_back() { //and also close_all button
if (info == 1 || instruction == 1) {
// document.getElementById("layer_dark").style.display = "block"
document.getElementById("close_all").style.display = "block";
} else if (info == 0 && instruction == 0) {
// document.getElementById("layer_dark").style.display = "none"
document.getElementById("close_all").style.display = "none";
}
}
function infos() {
if (info == 0) {
document.getElementById("info").style.display = "block"
document.getElementById("instruction").style.display = "none"
info++
instruction = 0
} else if (info == 1) {
document.getElementById("info").style.display = "none"
info = 0
}
dark_back()
}
function instructions() {
if (instruction == 0) {
document.getElementById("instruction").style.display = "block"
document.getElementById("info").style.display = "none"
instruction++
info = 0
} else if (instruction == 1) {
document.getElementById("instruction").style.display = "none"
instruction = 0
}
dark_back()
}
function closeclose() {
document.getElementById("instruction").style.display = "none";
document.getElementById("info").style.display = "none";
info = 0
instruction = 0
dark_back()
document.getElementById("close_all").style.display = "none";
}
document.getElementById("info_button").addEventListener("click", infos)
document.getElementById("instruction_button").addEventListener("click", instructions)
document.getElementById("close_all").addEventListener("click", closeclose)
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var findMe = document.querySelectorAll('.box');
var bars = document.querySelectorAll(".showbar")
window.addEventListener('scroll', function(event) {
findMe.forEach(element => {
if (isInViewport(element)) {
let trig = element.classList[1]
console.log(trig)
if(document.querySelector(".showbar."+trig).style.display ="none"){
bars.forEach(bar => {
bar.style.display ="none"
});
document.querySelector(".showbar."+trig).style.display ="block"
}else{
console.log()
}}
});
}, false);
var links = document.querySelectorAll('a');
links = Array.prototype.slice.call(links);
links.forEach(link => {
var href = link.getAttribute('href');
if(link.getAttribute('href').startsWith('#')){
// console.log('addingClickHandler',link);
link.addEventListener('click',function(e){
e.preventDefault();
var dest = document.getElementById(href.substring(1)).parentNode;
// console.log('click', href, dest)
dest.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
})
}
});

@ -0,0 +1,4 @@
/* CSS for Paged.js interface – v0.2 */ /* Change the look */ :root { --color-background: whitesmoke; --color-pageSheet: #cfcfcf; --color-pageBox: violet; --color-paper: white; --color-marginBox: transparent; --pagedjs-crop-color: black; --pagedjs-crop-shadow: white; --pagedjs-crop-stroke: 1px; } /* To define how the book look on the screen: */ @media screen { body { background-color: var(--color-background); } .pagedjs_pages { display: flex; width: calc(var(--pagedjs-width) * 2); flex: 0; flex-wrap: wrap; margin: 0 auto; } .pagedjs_page { background-color: var(--color-paper); box-shadow: 0 0 0 1px var(--color-pageSheet); margin: 0; flex-shrink: 0; flex-grow: 0; margin-top: 10mm; } .pagedjs_first_page { margin-left: var(--pagedjs-width); } .pagedjs_page:last-of-type { margin-bottom: 10mm; } .pagedjs_pagebox{ box-shadow: 0 0 0 1px var(--color-pageBox); } .pagedjs_left_page{ z-index: 20; width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important; } .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { border-color: transparent; } .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ width: 0; } .pagedjs_right_page{ z-index: 10; position: relative; left: calc(var(--pagedjs-bleed-left)*-1); } /* show the margin-box */ .pagedjs_margin-top-left-corner-holder, .pagedjs_margin-top, .pagedjs_margin-top-left, .pagedjs_margin-top-center, .pagedjs_margin-top-right, .pagedjs_margin-top-right-corner-holder, .pagedjs_margin-bottom-left-corner-holder, .pagedjs_margin-bottom, .pagedjs_margin-bottom-left, .pagedjs_margin-bottom-center, .pagedjs_margin-bottom-right, .pagedjs_margin-bottom-right-corner-holder, .pagedjs_margin-right, .pagedjs_margin-right-top, .pagedjs_margin-right-middle, .pagedjs_margin-right-bottom, .pagedjs_margin-left, .pagedjs_margin-left-top, .pagedjs_margin-left-middle, .pagedjs_margin-left-bottom { box-shadow: 0 0 0 1px inset var(--color-marginBox); } /* uncomment this part for recto/verso book : ------------------------------------ */ /* .pagedjs_pages { flex-direction: column; width: 100%; } .pagedjs_first_page { margin-left: 0; } .pagedjs_page { margin: 0 auto; margin-top: 10mm; } .pagedjs_left_page{ width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important; } .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{ border-color: var(--pagedjs-crop-color); } .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ width: var(--pagedjs-cross-size)!important; } .pagedjs_right_page{ left: 0; } */ /*--------------------------------------------------------------------------------------*/ /* uncomment this par to see the baseline : -------------------------------------------*/ /* .pagedjs_pagebox { --pagedjs-baseline: 22px; --pagedjs-baseline-position: 5px; --pagedjs-baseline-color: cyan; background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent; background-size: 100% var(--pagedjs-baseline); background-repeat: repeat-y; background-position-y: var(--pagedjs-baseline-position); } */ /*--------------------------------------------------------------------------------------*/ } /* Marks (to delete when merge in paged.js) */ .pagedjs_marks-crop{ z-index: 999999999999; } .pagedjs_bleed-top .pagedjs_marks-crop, .pagedjs_bleed-bottom .pagedjs_marks-crop{ box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow); } .pagedjs_bleed-top .pagedjs_marks-crop:last-child, .pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{ box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow); } .pagedjs_bleed-left .pagedjs_marks-crop, .pagedjs_bleed-right .pagedjs_marks-crop{ box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow); } .pagedjs_bleed-left .pagedjs_marks-crop:last-child, .pagedjs_bleed-right .pagedjs_marks-crop:last-child{ box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow); }

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -0,0 +1,18 @@
@media print {
/* Define the size of the pages and layout settings */
@page {
size: 148mm 210mm;
marks: crop cross;
margin: 15mm;
}
img{
width: 33%;
}
h1{
break-before: always;
}
}

@ -0,0 +1,236 @@
:root {
--border: rgba(9, 30, 59, 0.699);
--navbar_back: rgb(0, 0, 255);
--navbar_bord: rgb(18, 73, 26);
--navbar_text: white;
--popup_back: rgb(49, 159, 209);
--popup_bord: rgba(0, 81, 255, 0.621);
}
* {
scroll-behavior: smooth;
}
body {
max-width: 100%;
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
#layer_dark {
background-color: rgba(0, 0, 0, 0.613);
width: 100%;
height: 100%;
position: fixed;
z-index: 11;
display: none;
}
#info,
#instruction {
display: none;
}
#info_button {
position: fixed;
z-index: 12;
bottom: 2%;
right: 1%;
}
#instruction_button {
position: fixed;
z-index: 12;
bottom: 2%;
right: 5%;
}
#output {
position: fixed;
z-index: 12;
bottom: 2%;
right: 13%;
}
.popup {
position: fixed;
z-index: 12;
/* border: solid var(--popup_bord) 5px; */
width: 50%;
height: 50%;
left: 25%;
top: 25%;
background-color: var(--popup_back);
padding: 2%;
}
#close_all {
/* border: solid 1px var(--popup_bord); */
position: fixed;
right: 17%;
top: 25%;
z-index: 12;
display: none;
}
#navbar {
height: 35%;
width: 25%;
background-color: var(--navbar_back);
/* border: solid 3px var(--navbar_bord); */
position: fixed;
padding: 1%;
/* padding-top: 3%; */
display: none;
bottom: 0;
border-top-right-radius: 3%;
/* border-bottom-right-radius: 10%; */
filter: drop-shadow(5px);
overflow-y: scroll;
font-size: 8pt;
color: var(--navbar_text);
border-top: 6mm black solid;
}
#navbar div button {
position: absolute;
top: 4%;
right: 2%;
background-color: rgba(255, 115, 0, 0.938);
border-radius: 100%;
border: solid .4px red;
}
#navbar a {
color: white
}
#nav_button {
position: fixed;
top: 1%;
left: 1%;
z-index: 60;
}
#custom_button {
position: fixed;
top: 5%;
left: 1%;
z-index: 100;
/* display: none; */
}
.container{
width: 75%;
height: 100%;
border: solid black 3px;
}
.selector2print {
position: relative;
top: 8%;
/* height: 20%; */
left: 2%;
}
.box {
width: 80%;
height: 80%;
margin-left: 10%;
margin-top: 5%;
box-shadow: 10px 11px 29px -9px var(--border);
-webkit-box-shadow: 10px 11px 29px -9px var(--border);
-moz-box-shadow: 10px 11px 29px -9px var(--border);
overflow-y: scroll;
z-index: 20;
}
.title {
margin-top: 1%;
margin-left: 10%;
}
.showbar {
width: 22.5%;
height: 100%;
position: fixed;
top: 0;
right: 0;
display: none;
overflow-y: scroll;
padding: 1%;
display: none;
}
#customizer {
display: none;
/* border: solid; */
position: fixed;
bottom: 1%;
left: 35%;
z-index: 100;
}
img {
width: 100%;
}
.slider {
position: fixed;
z-index: 50;
width: 100%;
height: 5%;
top: 2%;
right: -.5%;
}
.slider input {
background: none;
width: 100%;
margin-top: 25%;
right: 0;
cursor: ew-resize;
/* -webkit-transform: rotate(90deg); */
}
input[type='range'] {
-webkit-appearance: none !important;
/* background: red; */
height: 7px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
/* background: blue; */
height: 10px;
width: 0px;
}
button, input{
background: rgba(179, 172, 172, 0.599);
border-radius: 12px;
color: white;
}

@ -0,0 +1,122 @@
<!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">eheh megastudio etcetc...</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" value="75" oninput="scivolo(this.value)">
<!-- <p id="rangeValue">100</p> -->
</div>
<div id="customizer">
<button onclick="">tema</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>
{% for z in data[key]%}
<li></li>
<li><a href="{{rut}}{{key}}/{{z}}" download>{{z}}</a></li>
{% endfor %}
</ul>
</ul>
{% endfor %}
</div> -->
<form action="/print/" id="2print" method="POST">
</form>
{% for key in data %}
<div class="container">
<input class="selector2print" type="checkbox" name="test" form="2print" value="{{key}}">
<div class="showbar {{key}}">
{% for z in data[key]%}
{% if z.endswith("jpg") or z.endswith("jpeg") or z.endswith("png") or z.endswith("JPG") or z.endswith("JPEG") %}
<img src="{{folder}}{{key}}/{{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]%}
{% if z.endswith("jpg") or z.endswith("jpeg") or z.endswith("png") or z.endswith("JPG") or z.endswith("JPEG") %}
<img src="{{folder}}{{key}}/{{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")];
function scivolo(value) {
// console.log(value)
showbar.forEach(bar => {
bar.style.width = ((100 - value) - 2) + '%'
});
container.forEach(current => {
current.style.width = value + '%';
});
}
</script>
<script src="/static/app.js"></script>
</body>
</html>

@ -0,0 +1,236 @@
<!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&#x27;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"
-->

@ -0,0 +1,149 @@
<!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">eheh megastudio etcetc...</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 %}
</div>
<form action="/print/" id="2print" method="POST">
</form>
{% for key in data %}
<div class="container">
<input class="selector2print" type="checkbox" name="test" form="2print" value="{{key}}">
<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) - 2) + '%'
});
container.forEach(current => {
current.style.width = value + '%';
});
}
</script>
<script src="/static/app.js"></script>
</body>
</html>

@ -0,0 +1,27 @@
<!---->
<div class="container">
<input type="checkbox">
<div class="box">
<object data='./assets/box0/peggy.pdf' type="application/pdf" width="100%" height="100%">
<!-- <iframe src='../test/viewspeggy.pdf' width="500" >
<p>This browser does not support PDF!</p>
</iframe> -->
</object>
</div>
</div>
<div class="container">
<input type="checkbox">
<div class="box">
<object data='./assets/box1/peggy.pdf' type="application/pdf" width="100%" height="100%">
<!-- <iframe src='../test/viewspeggy.pdf' width="500" >
<p>This browser does not support PDF!</p>
</iframe> -->
</object>
</div>
</div>

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>MEGASTUDIO 🎯</title>
<link rel="stylesheet" type="text/css" href="/static/print.css" />
<link rel="stylesheet" type="text/css" href="/static/pagedjs/interface.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<script src="/static/pagedjs/paged.polyfill.js"></script>
</head>
<body>
{% for key in form_data %}
<div>
<h1>{{key}}</h1>
{% 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 %}
{% 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>
{% endfor %}
</body>
</html>
Loading…
Cancel
Save