main
parent
452cee1914
commit
2d87fc16e3
@ -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'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"]}} |
||||
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'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…
Reference in new issue