up

db.json

@@ -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"]}}

static/app.js

@@ -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"});
+        })
+    }
+    
+});

static/pagedjs/interface.css

@@ -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); }
+

static/print.css

@@ -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;
+    }
+    
+}

static/style.css

@@ -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;
+    
+}
+
+
+

templates/index copy 2.html

@@ -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>

templates/index copy.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"
+  
+  -->

templates/index.html

@@ -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>

templates/old.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>

templates/prin.html

@@ -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>