first commit

app.py

@@ -0,0 +1,137 @@
+from flask import Flask, render_template, request
+import os
+import json
+import mistletoe
+import random
+
+app = Flask(__name__, static_folder='static')
+contents = []
+rut = "./static/assets/"
+rutDetour = "./static/assets_detour/"
+box = 'box'
+showbar = 'showbar'
+
+f = open('db.json',)
+data = json.load(f,)
+
+fDetour = open('dbDetour.json',)
+dataDetour = json.load(fDetour,)
+
+dictio = {}
+dictioDetour = {}
+
+folders = os.listdir(rut)
+foldersDetour = os.listdir(rutDetour)
+
+
+for folder in folders:
+    dictio[folder] = {}
+    subfolders = os.listdir(rut+folder)
+    os.system("find . -name '.DS_Store' -type f -delete")
+    for subfolder in subfolders:
+        os.system("find . -name '.DS_Store' -type f -delete")
+        if subfolder not in dictio[folder]:
+            dictio[folder][subfolder] = []
+        files = os.listdir(rut+folder+'/'+subfolder)
+        # print(files)
+        os.system("find . -name '.DS_Store' -type f -delete")
+        for file in files:
+            # print(file)
+
+            if file not in dictio[folder][subfolder]:
+                file_path = rut+folder+'/'+subfolder+'/'+file
+                # print(file_path)
+                if file.endswith("txt"):
+                    with open(file_path) as txt:
+                        output = txt.read()
+                        dictio[folder][subfolder].append(output)
+                elif file.endswith("md"):
+                    with open(file_path, 'r') as md:
+                        output = mistletoe.markdown(md)
+                        dictio[folder][subfolder].append(output)
+                else:
+                    dictio[folder][subfolder].append(file)
+
+n = 0
+
+
+coins = ['stones', 'rare stones', 'bold people',
+         'peanuts', 'wild pigs', 'Devis', 'Birbis tears']
+
+
+price = {}
+
+for keys in dataDetour:
+    price[keys] = []
+    r = random.randint(1, 140)
+    r2 = random.randint(0, (len(coins)-1))
+    price[keys] = f'{r} {coins[r2]}'
+
+
+for folderDetour in foldersDetour:
+    dictioDetour[folderDetour] = {}
+    subfoldersDetour = os.listdir(rutDetour+folderDetour)
+    os.system("find . -name '.DS_Store' -type f -delete")
+    for subfolderDetour in subfoldersDetour:
+        if subfolderDetour.startswith('.'):
+            os.remove(rutDetour+folderDetour+'/'+subfolderDetour)
+        else:
+            dictioDetour[folderDetour][subfolderDetour] = []
+            filesDetour = os.listdir(
+                rutDetour+folderDetour+'/'+subfolderDetour)
+            for fileDetour in filesDetour:
+                file_path = rutDetour+folderDetour+'/'+subfolderDetour+'/'+fileDetour
+                # print(file_path)
+                if fileDetour.endswith("txt"):
+                    with open(file_path) as txt:
+                        output = txt.read()
+                        dictioDetour[folderDetour][subfolderDetour].append(
+                            output)
+                elif fileDetour.endswith("md"):
+                    with open(file_path, 'r') as md:
+                        output = mistletoe.markdown(md)
+                        dictioDetour[folderDetour][subfolderDetour].append(
+                            output)
+                else:
+                    dictioDetour[folderDetour][subfolderDetour].append(
+                        fileDetour)
+
+
+with open("db.json", "w") as outfile:
+    json.dump(dictio, outfile)
+
+with open("dbDetour.json", "w") as outfileDetour:
+    json.dump(dictioDetour, outfileDetour)
+
+# stack tecnico compiling
+with open("./static/stack_tecnico.md", 'r') as md:
+    stack = mistletoe.markdown(md)
+
+
+# for key in data:
+#     for z in data[key][box]:
+#         print(rut+key+box+z)
+
+
+@app.route("/", methods=['GET', 'POST'])
+def platform():
+    return render_template("index.html", data=data, folder=folder, box=box, showbar=showbar, rut=rut, stack=stack, folderDetour=folderDetour, dataDetour=dataDetour, rutDetour=rutDetour, )
+
+
+@app.route('/print/', methods=['POST', 'GET'])
+def dat():
+    classes = []
+    if request.method == 'GET':
+        return f'nope, go back to home'
+    if request.method == 'POST':
+        form_data = request.form.getlist('test')
+        return render_template('prin.html', form_data=form_data, data=data, folder=folder, box=box, showbar=showbar, rut=rut)
+
+
+@app.route("/ebay/")
+def ebay():
+    return render_template("ebay.html", dataDetour=dataDetour, box=box, price=price)
+
+
+if __name__ == '__main__':
+    app.run(host="localhost", port=5173, debug=True)

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: rgba(137, 218, 185, 0.705);     --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,114 @@
+@media print {
+
+    /* Define the size of the pages and layout settings */
+    @page {
+        size: 90mm 148mm;
+        marks: crop cross;
+        margin: 15mm;
+    }
+
+    /* img{
+        width: 50%;
+    } */
+
+    h1{
+        break-before: always;
+    }
+
+    body{
+        background-color: rgba(107, 207, 107, 0.953);
+        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    }
+    
+
+/* LAYOUTS */
+
+.containers1 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    /* height: 100vh; */
+    flex-wrap: wrap;
+}
+
+.containers1>* {
+    /* font-size: 5vw */
+    margin: 10px;
+    border-radius: 3px;
+    /* background: yellowgreen; */
+    border: 5px solid black;
+    object-fit: cover;
+
+}
+
+.containers1>*:nth-child(odd) {
+    width: 10%;
+}
+
+.containers1>*:nth-child(even) {
+    width: 20%;
+}
+
+.containers1>*:nth-child(2),
+.containers1>*:nth-child(4),
+.containers1>*:nth-child(9) {
+    width: 60%;
+}
+
+
+.containers2 {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 60mm);
+        grid-gap: 10px;
+    align-items: start;
+    justify-items: center;
+    margin: auto;
+    /* width: 540px; */
+}
+
+.containers2 img {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    /* box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); */
+    max-width: 100%;
+    /* max-height: auto; */
+    object-fit: cover;
+}
+
+.containers2 img:nth-child(4) {
+    grid-column: 3 span;
+}
+
+
+.containers3 {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
+    grid-gap: 10px;
+    align-items: start;
+    justify-items: center;
+    margin: auto;
+}
+
+.containers3 img {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
+    max-width: 100%;
+    /* max-height: 75%; */
+    object-fit: cover;
+}
+
+.containers3 img:nth-child(2) {
+    grid-column: span 3;
+    grid-row: span 2;
+}
+
+.containers4 img,p{
+width: 76%;
+    margin-left: 12%;
+    margin-top: 23%;
+}
+
+.containers4 *:nth-child(odd) {
+        break-after: always;
+}
+
+}

static/stack_tecnico.md

@@ -0,0 +1,81 @@
+
+## Technic Stack
+
+The platform is used as web-container for a series of remix/alternative display of our archive's assets.
+
+You will see boxes, each box is created by a resident. 
+You will be able to generate pdf to print! You will check the checkboxes beside each box to select which one to queue and then click PRINT.
+
+For this platform2print has been used:
+
+* Flask
+* Plain JavaScript
+* Paged.js for the print-layout
+* HTML
+* CSS
+
+As rudimental CMS has been used our NextCloud instance.
+
+NextCloud, as it sounds, it's a self-hosted open-source cloud. You can store files, share them, do shared calendars and todo lists, etc...
+
+The People from [MEGASTUDIO ](https://habitattt.it/wiki/index.php?title=MEGASTUDIO)recidency could then upload in their shared folders the contents of this publication.
+
+Flask reads the path of all the folders that the users uploaded in our server to create a JSON file, a dictionary.
+
+![json.png](./static/json.png)
+
+If in the platform you open the "TREE", you will see the structure of the folders: the JSON file contains that, and Flask reads it after compiling it to create the HTML page.
+
+### Wait, what is and why Flask?
+
+First of all, who programmed this platform really likes Python (Flask is made of it) and never really tried Flask. So why not?
+
+[Flask](https://en.wikipedia.org/wiki/Flask_(web_framework)) is a web framework, so it's used to develop and deploy web stuff. \
+You install it in the server via python (see below)
+
+You can make flask perform only in the server and serves to the user static files: it is Server Side Rendering.
+
+It is definitely more ecological then make Javascript runs everything in the device of each user.
+
+So, Python compiles with Jinja a html template:
+
+Jinja is an engine to make templates, for to facilitate the compiling with Python. It comes with Flask.
+
+
+### What happens when you click "PRINT"?
+
+"Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!"
+
+So yep, after you select which boxes you want to print (and which layout you want to use, with the sliders) and click print, Flask compiles another HTML based on Paged.js
+
+### wheres code
+
+You will see the magic in the file *app.py*
+
+The code is in our GIT [git.habitattt.it/ministro/MEGASTUDIO_platform](https://git.habitattt.it/ministro/MEGASTUDIO_platform)
+
+### how to set it up?
+
+So, you have to install Python
+
+Then you create a folder, and from the terminal you go there (if you don't know what I'm talkin about, first have a look to basic commands in Terminal).
+
+Create a virtual environment with:
+
+ python3 -m venv .
+
+And activate it 
+
+ source bin/activate
+
+And then install flask
+
+ pip3 install flask
+
+To run:
+
+ flask run
+
+### Bonus
+
+The files are compressed in CLI (Command Line Interface, the terminal, directly in the server) with ImageMagick.

static/style.css

@@ -0,0 +1,331 @@
+: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;
+    box-sizing: border-box;
+}
+
+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;
+    overflow-y: auto;
+}
+
+#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;
+    z-index: 100;
+
+}
+
+
+
+#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 1px;
+    border-right: solid black 2px;
+}
+
+.container img{
+    padding-bottom: .5em;
+}
+
+
+.selector2print {
+    position: relative;
+    top: 12%;
+    /* height: 20%; */
+    left: 3.5%;
+}
+
+.sliderLayout {
+    position: relative;
+top: 50%;
+    right: 6%;
+    transform: rotate(90deg);
+}
+
+
+.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;
+}
+
+
+
+/* LAYOUTS */
+
+.containers1 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    /* height: 100vh; */
+    flex-wrap: wrap;
+}
+
+.containers1>* {
+    /* font-size: 5vw */
+    margin: 10px;
+    border-radius: 3px;
+    /* background: yellowgreen; */
+    border: 5px solid black;
+    object-fit: cover;
+
+}
+
+.containers1>*:nth-child(odd) {
+    width: 10%;
+}
+
+.containers1>*:nth-child(even) {
+    width: 20%;
+}
+
+.containers1>*:nth-child(2),
+.containers1>*:nth-child(4),
+.containers1>*:nth-child(9) {
+    width: 60%;
+}
+
+
+.containers2 {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+    grid-gap: 10px;
+    align-items: start;
+    justify-items: center;
+    margin: auto;
+    /* width: 540px; */
+}
+
+.containers2 img {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    /* box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); */
+    max-width: 100%;
+    /* max-height: auto; */
+    object-fit: cover;
+}
+
+.containers2 img:nth-child(4) {
+    grid-column: 3 span;
+}
+
+
+.containers3 {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
+    grid-gap: 10px;
+    align-items: start;
+    justify-items: center;
+    margin: auto;
+}
+
+.containers3 img {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
+    max-width: 100%;
+    /* max-height: 75%; */
+    object-fit: cover;
+}
+
+.containers3 img:nth-child(2) {
+    grid-column: span 3;
+    grid-row: span 2;
+}

templates/index.html

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

templates/prin.html

@@ -0,0 +1,79 @@
+<!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 id="{{key}}" class="boxes">
+        <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 %}
+        <p>{{z|safe}}</p>
+        {% 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 %}
+        <p>{{z|safe}}</p>
+        {% endif %}
+        {% endfor %}
+   
+    </div>
+
+
+
+
+
+
+
+
+    {% endfor %}
+
+
+
+
+</body>
+
+<script defer async>
+    let classes = document.getElementsByClassName("boxes")
+    classes = Array.prototype.slice.call(classes);
+    classes.forEach(element => {
+        if (localStorage[element.id]){
+            console.log(localStorage[element.id])
+            element.className = localStorage[element.id]
+            console.log(element)
+        }
+        // for (ls in localStorage){
+        //     if (classes.id == ls){
+        //     console.log('yeah')}
+        // }
+    });
+
+    console.log(localStorage)
+</script>
+
+</html>