diff --git a/db.js b/db.js
index a0abcae..f3d9a03 100644
--- a/db.js
+++ b/db.js
@@ -2,7 +2,7 @@ const mysql = require('mysql');
 const vars = require('./vars');
 
 const logcon = mysql.createConnection({
-    host: 'localhost',
+    host: 'db',
     user: 'user',
     password: 'user',
     database: 'users'
diff --git a/func.js b/func.js
index 26243d7..b5d5a12 100644
--- a/func.js
+++ b/func.js
@@ -24,29 +24,29 @@ module.exports.sendfile = (fileName, response) => {
     });
 }
 
-module.exports.check_sid = (Cookies, callback) =>{
-    let uuid = Cookies["uuid"];
-    let sid = Cookies["sid"];
-    // console.log(uuid,sid);
-    db.gv("users","uuid",`'${uuid}'`,(udata)=>{ udata = udata[0];
-        // console.log(udata);
-        db.gv("sids","uid",udata["id"],(rdata)=>{
-            let valid = "";
-            rdata.forEach(rec => {
-                if (rec["sid"] == sid){
-                    valid = rec["sid"];
-                    return;
-                }
-            });
-            if(valid != ""){
-                callback(true,udata);
-            }
-            else{
-                callback(false,udata);
-            }
-        });
-    })
-}
+// module.exports.check_sid = (Cookies, callback) =>{
+//     let uuid = Cookies["uuid"];
+//     let sid = Cookies["sid"];
+//     // console.log(uuid,sid);
+//     db.gv("users","uuid",`'${uuid}'`,(udata)=>{ udata = udata[0];
+//         // console.log(udata);
+//         db.gv("sids","uid",udata["id"],(rdata)=>{
+//             let valid = "";
+//             rdata.forEach(rec => {
+//                 if (rec["sid"] == sid){
+//                     valid = rec["sid"];
+//                     return;
+//                 }
+//             });
+//             if(valid != ""){
+//                 callback(true,udata);
+//             }
+//             else{
+//                 callback(false,udata);
+//             }
+//         });
+//     })
+// }
 
 module.exports.sid = (cook,res,callback,auto = true)=>{
     let uuid = cook["uuid"];
@@ -61,24 +61,26 @@ module.exports.sid = (cook,res,callback,auto = true)=>{
                     }
                     else{
                         if(auto) res.send({out:"bad",err:"wrong"});
-                        callback(false);
+                        if(!auto) callback(false);
                     }
                 });
             }
             else{
                 if(auto) res.send({out:"bad",err:"expired"});
-                callback(false);
+                if(!auto) callback(false);
             }
         });
     }else{
         if(auto) res.send({out:"bad",err:"nocr"});
-        callback(false);
+        if(!auto) callback(false);
     }
 }
 
-module.exports.log = (comment) =>{
-    var date = moment().format('YYYY-MM-DD_hh:mm')
-    console.log(`${date}|${comment}`);
+module.exports.log = (message) =>{
+    var date = moment().format('YYYY-MM-DD')
+    var time = moment().format('hh:mm:ss')
+    console.log(`${date}_${time}|${message}`);
+    db.nr("logs","`date`,`time`,`log`",`'${date}','${time}','${message}'`);
 }
 
 
@@ -87,13 +89,13 @@ module.exports.get_uuid = () =>{
     return unid;
 }
 
-module.exports.encrypt = (password,uuid) => {
+module.exports.encrypt = (text,cipher) => {
     // return bcrypt.hashSync(password,bcrypt.genSaltSync());
-    return cryptojs.AES.encrypt(password,uuid).toString();
+    return cryptojs.AES.encrypt(text,cipher).toString();
 }
 
-module.exports.decrypt = (password,uuid) =>{
-    const en = cryptojs.AES.decrypt(password,uuid);
+module.exports.decrypt = (text,cipher) =>{
+    const en = cryptojs.AES.decrypt(text,cipher);
     const de = en.toString(cryptojs.enc.Utf8);
     // console.log(de + "-dec");
     return de;
diff --git a/index.js b/index.js
index 2b949e3..9399bc8 100644
--- a/index.js
+++ b/index.js
@@ -26,7 +26,7 @@ const app = express();
 // const { mainModule } = require('process');
 // const { name } = require('ejs');
 
-const maxRequestBodySize = '50mb';
+const maxRequestBodySize = '20mb';
 app.set('view engine', 'ejs');
 app.use(express.urlencoded({
     extended: false,
@@ -79,7 +79,6 @@ app.post("/get_cr_uuid", (req,res) => {
 app.post("/save_proj", (req,res) => {
     let inp = req.body;
     let cook = req.cookies;
-    // func.log(inp["img"]);
     func.sid(cook,res,()=>{
         proj.save(inp,cook,res);
     })
diff --git a/public/img/shadow-energy.gif b/public/img/shadow-energy.gif
new file mode 100644
index 0000000..dde7285
Binary files /dev/null and b/public/img/shadow-energy.gif differ
diff --git a/public/lib/fn.js b/public/lib/fn.js
index ce5d4c0..15f9d05 100644
--- a/public/lib/fn.js
+++ b/public/lib/fn.js
@@ -7,11 +7,6 @@ function get_from_uuid(callback){
             // console.log("good");
             callback(res["body"])
         }
-        else if (res["out"] == bad){
-            if (res["body"] == "expired"){
-                logout(true);
-            }
-        }
     });
 }
 
@@ -19,37 +14,40 @@ function log_by_sid() {
     // const uuid = $.cookie("uuid");
     // const sid = $.cookie("sid");
     // console.log("log");
-    if($.cookie('uuid') == null && $.cookie('sid') == null){
+    if($.cookie('sid') == null){
         // get_sid(location.hostname);
         get_sid();
-    }else if ($.cookie('sid') != null && $.cookie('uuid') != null){
-    $.post( "/sid_log")
-    .done(function( res ) {
-        console.log("ping");
-        if(res["out"] == "good"){
-            goto(res["url"]);
-        }
-        else if (res["out"] == "bad"){
-            clear_ck(false);
-        }
-    })}
+    }
+    // else if ($.cookie('sid') != null && $.cookie('uuid') != null){
+    // $.post( "/sid_log")
+    // .done(function( res ) {
+    //     console.log("ping");
+    //     if(res["out"] == "good"){
+    //         goto(res["url"]);
+    //     }
+    //     else if (res["out"] == "bad"){
+    //         clear_ck(false);
+    //     }
+    // })}
 }
 
 function clear_ck(redirect = true){
+    let uuid = $.cookie("uuid");
+    let sid = $.cookie("sid");
+    $.removeCookie("uuid");
+    $.removeCookie('sid');    
     console.log("sid");
-    $.post( "/clear_sid")
-    .done(function( res ) {
-        console.log("sid");
-        $.cookie("uuid",null);
-        $.cookie("sid",null);
-        $.removeCookie("uuid");
-        $.removeCookie('sid');    
-        console.log("clear");
-        get_sid();
-        if(res["out"] == "good"){
-            if (redirect) goto("/login");
-        }
-    })
+    setTimeout(()=>{
+        $.post( "/clear_sid",{uuid:uuid,sid:sid})
+        .done(function( res ) {
+            console.log("sid");
+            if(res["out"] == "good"){
+                // get_sid();
+                if (redirect) goto("/login");
+            }
+            console.log("clear");
+        })
+    },100)
 }
 
 
diff --git a/public/lib/inter.js b/public/lib/inter.js
index 2c00d8b..3638fd0 100644
--- a/public/lib/inter.js
+++ b/public/lib/inter.js
@@ -1,12 +1,7 @@
 window.dragMoveListener = dragMoveListener;
 let root = document.getElementById("drags");
 let objs = { height:"2",width:"4"};
-
-function get_count(clas){
-    if (objs[clas] == null) objs[clas] = {};
-    let count = Object.keys(objs[clas]).length;
-    return count;
-}
+let objs_store = {};
 
 function create(clas,x,y,body,id,size){
     let main_clas = clas.split(" ")[0];
@@ -18,20 +13,39 @@ function create(clas,x,y,body,id,size){
     clas.forEach(cl => {
         obj.classList.add(cl);
     });
-    load_obj(main_clas,"`img`,`name`,`description`,`width`,`height`",(db_data)=>{
-        if (db_data == null) {
-            delete objs[main_clas][id];
-            save(()=>{
-                goto("/proj/"+proj_name);
-            });
+    get_obj(main_clas,(db_data)=>{
+        if ($.cookie("cache") == "true"){
+            if (localStorage.getItem(`${main_clas}`) == null){
+                load_obj(main_clas,"`img`",(odata)=>{
+                    localStorage.setItem(main_clas,odata["img"]);
+                    make(odata["img"]);
+                })
+            }
+            else{
+                make(localStorage.getItem(main_clas))
+            }
         }
-        else if (db_data != null){
-            obj.src = db_data["img"];
-            obj.title = `${db_data["name"]}\n${db_data["description"]}\nwidth:${db_data["width"]}см height:${db_data["height"]}см`;
-            // drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * 2} ${db_data["height"] * 2})`;
-            if(size){
-                obj.style.width = `${db_data["width"] * 2}px`;
-                obj.style.height = `${db_data["height"] * 2}px`;
+        else{
+            load_obj(main_clas,"`img`",(odata)=>{
+                localStorage.setItem(main_clas,odata["img"]);
+                make(odata["img"]);
+            })
+        }
+        function make(img){
+            if (db_data == null) {
+                delete objs[main_clas][id];
+                save(()=>{
+                    goto("/proj/"+proj_name);
+                });
+            }
+            else if (db_data != null){
+                obj.src = img;
+                obj.title = `${db_data["name"]}\n${db_data["description"]}\nwidth:${db_data["width"]}см height:${db_data["height"]}см`;
+                // drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * 2} ${db_data["height"] * 2})`;
+                if(size){
+                    obj.style.width = `${db_data["width"] * 2}px`;
+                    obj.style.height = `${db_data["height"] * 2}px`;
+                }
             }
         }
     })
@@ -40,6 +54,12 @@ function create(clas,x,y,body,id,size){
     set_pos(obj,x,y);
 }
 
+function resize_drags(){
+    document.getElementById('drags').style.left = $('.dropzone')[0].getBoundingClientRect().x;
+    document.getElementById('drags').style.width = $('.dropzone')[0].style.width;
+    drag_start();
+}
+
 function wall_size_change(type,value){
     let wall = document.getElementsByClassName("wall")[0];
     let scroll;
@@ -47,7 +67,7 @@ function wall_size_change(type,value){
         if (value == null) scroll = document.getElementById("wall_width").value;
         else scroll = value;
         // document.getElementById("wall_width_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
-        document.getElementById("wall_width_value").innerHTML = scroll;
+        document.getElementById("wall_width_value").innerHTML = `${scroll}м`;
 
         // console.log(scroll);
         wall.style.width = `${scroll * 200}px`;
@@ -57,7 +77,7 @@ function wall_size_change(type,value){
         if (value == null) scroll = document.getElementById("wall_height").value;
         else scroll = value;        
         // document.getElementById("wall_height_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
-        document.getElementById("wall_height_value").innerHTML = scroll;
+        document.getElementById("wall_height_value").innerHTML = `${scroll}м`;
         
         // console.log(scroll);
         wall.style.height = `${scroll * 200}px`;
@@ -65,7 +85,7 @@ function wall_size_change(type,value){
     }            
 }
 
-function load_local(objss){
+function load(objss){
     // objs = JSON.parse($.cookie("objs"));
     // console.log(objs);
     objs = objss;
@@ -92,7 +112,9 @@ function load_local(objss){
     drag_start();
 }
 
-function load_proj(){
+function load_proj_cloud(){
+    document.getElementById("drags").innerHTML = "";
+    document.getElementById("top_panel_center").innerText = `loading ${proj_name} from cloud`;
     $.post( "/load_proj",{name:proj_name})
     .done(function( res ) {
         if(res["out"] == "good"){
@@ -100,7 +122,8 @@ function load_proj(){
             // console.log(JSON.parse(`'${res["body"]}'`));
             // console.log(JSON.parse(res["body"]));
             // $.cookie("objs",res["body"]);
-            load_local(JSON.parse(res["body"]));
+            load(JSON.parse(res["body"]));
+            document.getElementById("top_panel_center").innerText = `${proj_name} (cloud)`;
         }
         else if(res["out"] == "bad proj"){
             console.log("bad");
@@ -111,12 +134,28 @@ function load_proj(){
     })
 }
 
+function load_proj_local(){
+    // document.getElementById("top_panel_center").innerText = `loading ${proj_name} from local storage`;
+    if(localStorage.getItem(proj_name) == null){
+        save_local()
+    }
+    document.getElementById("top_panel_center").innerText = `${proj_name} (local)`;
+    document.getElementById("drags").innerHTML = "";
+    load(JSON.parse(localStorage.getItem(proj_name)));
+}
+
+function save_local(){
+    // console.log(objs);
+    localStorage.setItem(proj_name,JSON.stringify(objs));
+}
+
 function save(callback){
     // console.log(objs);
-    html2canvas(document.querySelector("body"),{height: 500, width:(window.innerWidth /1.65),x:(window.innerWidth / 5), y:250}).then(canvas => {
+    html2canvas(document.querySelector("body"),{height: document.getElementById("wall").style.height.split("p")[0], width:document.getElementById("wall").style.width.split("p")[0], y:document.getElementById("wall").getBoundingClientRect().top,x:document.getElementById("wall").getBoundingClientRect().left}).then(canvas => {
         let scr = "";
         console.log(canvas.toDataURL().length);
-        if (canvas.toDataURL().length < 120000) scr = canvas.toDataURL()
+        scr = canvas.toDataURL();
+        // if (canvas.toDataURL().length < 120000) scr = canvas.toDataURL()
         // console.log(scr);
         $.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name,img:scr})
         .done(function( res ) {
@@ -134,11 +173,25 @@ function load_objs(callback){
     .done(function( res ) {
         if(res["out"] == "good"){
             // console.log(res["body"]);
+            res["body"].forEach(element => {
+                objs_store[`${element["name"]}`] = {description:element["description"],height:element["height"],width:element["width"],id:element["id"],name:element["name"]}
+            });
             callback(res["body"]);
         }
     });
 }
 
+function get_obj(clas,callback){
+    if(objs_store != null && objs_store[clas] != null){
+        callback(objs_store[clas]);
+    }
+    else{
+        load_objs(()=>{
+            callback(objs_store[clas]);
+        })
+    }
+}
+
 function load_obj(name,key,callback){
     $.post( "/get_obj",{name:name,key:key})
     .done(function( res ) {
@@ -233,11 +286,11 @@ interact('.createzone').dropzone({
         var drag = event.relatedTarget;
         var zone = event.target;
         if(drag.classList[1] == "spawn" && drag.classList[0] == zone.classList[0]){
-            load_obj(drag.classList[0],"`height`, `width`",(db_data)=>{
+            get_obj(drag.classList[0],(db_data)=>{
                 // drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * 2} ${db_data["height"] * 2})`;
                 drag.style.width = `${db_data["width"] * 2}px`;
                 drag.style.height = `${db_data["height"] * 2}px`;
-                console.log(db_data);
+                // console.log(db_data);
             })
             let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
             let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
@@ -251,6 +304,10 @@ interact('.createzone').dropzone({
 })
 
 function drag_start() {
+    let spawns = document.getElementsByClassName("spawn");
+    Object.entries(spawns).forEach(([key, spawn]) => {
+        spawn.parentElement.removeChild(spawn);
+    });
     let zones = document.getElementsByClassName("createzone");
     Object.entries(zones).forEach(([key, zone]) => {
         let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
diff --git a/user.js b/user.js
index b603b51..84be3a5 100644
--- a/user.js
+++ b/user.js
@@ -12,18 +12,27 @@ module.exports.login = (inp,cook,res)=>{
         }
         else if (login != null){
             db.gv("users","login",`'${ilogin}'`,(udata)=>{udata = udata[0];
-                if(ipass == udata["pass"]){
-                    func.log("good boy "+udata["uuid"]+" logged in by login & pass from "+cook["sid"]);
-                    res.cookie("uuid",udata["uuid"],{maxAge:vars.week,path:"/;SameSite=Strict"});
+                db.ggv("sids","`sid`","uid",udata["id"],(sdata)=>{sdata = sdata[0];
+                    // console.log(sdata);
+                    if(ipass == udata["pass"]){
+                        if (sdata != null){
+                            // res.send({out:"logged",sid:sdata["sid"]});
+                            // console.log(sdata);
+                            db.dl("sids","uid",`'${udata["id"]}'`,() =>{});
 
-                    // db.sv("users","sids",sids += inp["sid"]+";","uuid",udata["uuid"],()=>{}); 
-                    db.nr("sids",'`sid`,`uid`',`'${cook["sid"]}','${udata["id"]}'`);
-                    res.send({out:"goto",url:"/main"});
+                        }
+                        func.log("good boy "+udata["uuid"]+" logged in by login & pass from "+cook["sid"]);
+                        res.cookie("uuid",udata["uuid"],{maxAge:vars.week,path:"/;SameSite=Strict"});
+    
+                        // db.sv("users","sids",sids += inp["sid"]+";","uuid",udata["uuid"],()=>{}); 
+                        db.nr("sids",'`sid`,`uid`',`'${cook["sid"]}','${udata["id"]}'`);
+                        res.send({out:"goto",url:"/main"});
+                    }
+                    else{
+                        res.status(210).send({out:"bad", err:"pass"});
+                    }
 
-                }
-                else{
-                    res.status(210).send({out:"bad", err:"pass"});
-                }
+                })
             });
         }
     })
@@ -83,10 +92,29 @@ module.exports.get_cr = (inp,cook,res)=>{
 }
 
 module.exports.clear_sid = (inp,cook,res)=>{
-    if(cook["sid"] != null){
+    if(inp["sid"] != null){
         // res.send({out:"good"});
-        func.log("good boy"+cook["uuid"] + " logged out from "+cook["sid"]);
-        db.dl("sids","sid",`'${cook["sid"]}'`,() =>{});
+        db.dl("sids","sid",`'${inp["sid"]}'`,() =>{
+            func.log("good boy "+inp["uuid"] + " logged out from "+inp["sid"]);
+        });
+        // db.ggv("sids","id","sid",`'${cook["sid"]}'`,(sids)=>{
+        //     Object.entries(sids).forEach(([key,value])=>{
+        //         db.dl("sids","id",`'${value["id"]}'`,() =>{});
+        //     })
+        // })
+    }
+    else if(inp["uuid"] != null){
+        // res.send({out:"good"});
+        db.ggv("users","id","uuid",`'${inp["uuid"]}'`,(udata)=>{udata = udata[0]
+            db.dl("sids","uid",`'${udata["id"]}'`,() =>{
+                func.log("good boy "+inp["uuid"] + " logged out from "+inp["sid"]);
+            });
+        //     db.ggv("sids","id","uid",`'${udata["id"]}'`,(sids)=>{
+        //         Object.entries(sids).forEach(([key,value])=>{
+        //             db.dl("sids","id",`'${value["id"]}'`,() =>{});
+        //         })
+        //     })
+        });
     }
     res.send({out:"good"});
 }
@@ -94,12 +122,12 @@ module.exports.clear_sid = (inp,cook,res)=>{
 module.exports.sid_log=(inp,cook,res,req)=>{
     func.sid(cook,res,(include) => {
         if (include){
-            if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") func.log("good boy "+ id["uuid"]+" logged in by sid logs from " + id["sid"]);
             res.send({out:"good",url:"/main"});
+            if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") func.log("good boy "+ id["uuid"]+" logged in by sid logs from " + id["sid"]);
         }
         else if (!include){
-            if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") func.log("bad boy "+ id["uuid"]+" tried to login by sid but sid expired from " + id["sid"]);
             res.send({out:"bad"});
+            if(req.headers.referer.split("http://n0rsrv2:3002/")[1] == "login") func.log("bad boy "+ id["uuid"]+" tried to login by sid but sid expired from " + id["sid"]);
         }
     },false)   
 }
\ No newline at end of file
diff --git a/views/header.ejs b/views/header.ejs
index 9fda58c..47c5d77 100644
--- a/views/header.ejs
+++ b/views/header.ejs
@@ -11,13 +11,15 @@
         /* float: right; */
         justify-content: space-between;
         display: flex;
-        width: 20vw;
+        cursor: pointer;
+        /* width: 20vw; */
     }
     #top_panel_left{
         /* float: left; */
         justify-content: space-between;
+        cursor: pointer;
         display: flex;
-        width: 20vw;
+        /* width: 20vw; */
     }
     #top_panel{
         height: 20px;
@@ -25,59 +27,85 @@
     /* button{
         /* margin-inline: 5px; */
     /* } */
-    #ctxmenu {
-    position: fixed;
-    background: ghostwhite;
-    color: black;
-    cursor: pointer;
-    border: 1px black solid
-    }
 
-    #ctxmenu > p {
-    padding: 0 1rem;
-    margin: 0
-    }
 
-    #ctxmenu > p:hover {
-    background: black;
-    color: ghostwhite
+    .menu_btn{
+        background: ghostwhite;
+        cursor: pointer;
+        border: 1px black dashed;
+        padding: 5px;
+    }
+    .cmenu{
+        position: fixed;
+        display: block;
+        background: ghostwhite;
+        color: black;
+        cursor: pointer;
+        border: 1px black solid;
     }
 </style>
+
+
 <header id="top_panel">
     <!-- <div id="user_name"></div> -->
     <div id="proj_top_panel">
         <div id="top_panel_left"></div>
-        <!-- <div>puzzle</div> -->
+        <div id="top_panel_center"></div>
         <div id="top_panel_right"></div>
-    </div>
-    <!-- <div><button onclick="logout();">logout</button></div> -->
+    </div>        <!-- <div><button onclick="logout();">logout</button></div> -->
 </header>
+<div id="user_menu" class="cmenu"></div>
+
+
 
 <script>get_from_uuid((res)=>{
     let uname = document.getElementById("user_name"); 
+    let menu = document.getElementById("user_menu"); 
     let header = document.getElementById("top_panel"); 
     let right = document.getElementById("top_panel_right"); 
     let left = document.getElementById("top_panel_left"); 
     
-    if(document.title != "main") left.innerHTML += `<button onclick="goto('/');">main page</button>`;
-    left.innerHTML += `<div id="user_name">${res["login"]}</div>`;
+    if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');">main page</button> <br>`;
+    right.innerHTML += `<div id="user_name" class="menu_btn">${res["login"]}</div>`;
     
     if (res["admin"] == true){
-        right.innerHTML += `<button onclick='goto("/admin")'>admin panel</button>`;
+        menu.innerHTML += `<button onclick='goto("/admin")'>admin panel</button><br>`;
     }
-    right.innerHTML += "<button onclick='logout();'>logout</button>";
+    menu.innerHTML += "<button onclick='logout();'>logout</button><br>";
 });
 
-oncontextmenu = (e) => {
-  e.preventDefault()
-//   console.log(e);
-  if(e.target.id == "user_name"){
-    let menu = document.createElement("div")
-    menu.id = "ctxmenu"
-    menu.style = `top:${e.pageY+20}px;left:${e.pageX-40}px`
-    menu.onmouseleave = () => ctxmenu.outerHTML = ''
-    menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
-    document.body.appendChild(menu)
-  }
+onclick = (e) => {
+    e.preventDefault()
+    //   console.log(e);
+    //   console.log(document.getElementById(e.target.id).parentElement);
+      if(e.target.onclick != null){
+        if(document.title == "login"){
+            console.log(document.title);
+            log_by_sid();
+        }else if(document.title != "login"){
+            check_sid(true);
+            console.log("check");
+        }
+      }
+    if(e.target.id == "user_name"){
+        hide_menus();
+        let menu = document.getElementById("user_menu");
+        menu.style.display = 'block';
+        menu.style = `top:${e.target.getBoundingClientRect().top+30}px;left:${e.target.getBoundingClientRect().left}px`
+        // menu.onmouseleave = () => menu.style.display = 'none';
+        // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
+        // document.body.appendChild(menu)
+    }else if(e.target.id == "proj_menu"){
+        hide_menus();
+        let menu = document.getElementById("project_menu");
+        menu.style.display = 'block';
+        menu.style = `top:${e.target.getBoundingClientRect().top+30}px;left:${e.target.getBoundingClientRect().left}px`
+            // menu.onmouseleave = () => menu.style.display = 'none';
+            // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
+            // document.body.appendChild(menu)
+    }
+    else{
+        hide_menus();
+    }
 }
 </script>
\ No newline at end of file
diff --git a/views/login.ejs b/views/login.ejs
index dbcb3f5..9ebc734 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -10,21 +10,18 @@
     }
 </style>
 
-<form action="" method="post" id="log_form">
-    <div class="login-page">
-        <input name="login" type="text" id="login" required>
-        <label for="login">login</label>
-    </div>
-    <div class="pass-page">
-        <input name="pass" type="password" id="pass" value="" required>
-        <label for="pass">password</label>
-    </div>
+<div class="login-page">
+    <input name="login" type="text" id="login" required>
+    <label for="login">login</label>
+</div>
+<div class="pass-page">
+    <input name="pass" type="password" id="pass" value="" required>
+    <label for="pass">password</label>
+</div>
 
-    <button type="button" id="log_btn" onclick="log(document.getElementById('login').value,document.getElementById('pass').value);">login</button>
-    <!-- <input type="submit" value=""  hidden> -->
-    <div id="res"></div>
-     
-</form>
+<button type="button" id="log_btn" onclick="log(document.getElementById('login').value,document.getElementById('pass').value);">login</button>
+<!-- <input type="submit" value=""  hidden> -->
+<div id="res"></div>
 
 <%- include('./static/end.ejs') %>
 
@@ -32,9 +29,9 @@
     // console.log($.cookie("uuid"));
     // log_by_sid();
 
-    function log(nlogin,npass){
-        const login = CryptoJS.AES.encrypt(nlogin,$.cookie("sid")).toString();
-        const pass = CryptoJS.AES.encrypt(npass,$.cookie("sid")).toString();
+    function log(){
+        const login = CryptoJS.AES.encrypt(document.getElementById('login').value,$.cookie("sid")).toString();
+        const pass = CryptoJS.AES.encrypt(document.getElementById('pass').value,$.cookie("sid")).toString();
         const sid = $.cookie("sid");
         $.post( "/back_login", { login:login,pass:pass,sid:sid })
         .done(function( res ) {
@@ -49,6 +46,10 @@
                     // postForm(res["url"], res["args"]);
                     goto(res["url"]);
                 }
+                // if(res["out"] == "logged"){
+                //     // postForm(res["url"], res["args"]);
+                //     // document.querySelector("#res").innerHTML = `<p>user already logged in from sid - ${res["sid"]}</p> <br> <button onclick="$.cookie('sid','${res["sid"]}');clear_ck();">log him out</button>`;
+                // }
             }
         });
     }
diff --git a/views/project.ejs b/views/project.ejs
index 438d5fc..4e39a9f 100644
--- a/views/project.ejs
+++ b/views/project.ejs
@@ -87,6 +87,7 @@
         margin: auto;
         padding-block: 20px;
         padding-bottom: 0px;
+        margin-top: 50px;
     }
 
     .wall{
@@ -115,12 +116,8 @@
 <div id="drags">
     <!-- <div class="cube drag spawn" id="cube_0" style="transform: translate(197.7px, 57.8667px);" data-x="197.6999969482422" data-y="57.866668701171875" >cube</div>     -->
 </div>
-<section class="main">
-    <div id="proj_top">
-        <button id="proj_save_btn" onclick="document.getElementById('proj_save_btn').innerHTML='saving';save((res)=>{document.getElementById('proj_save_btn').innerHTML='saved';setTimeout((res)=>{document.getElementById('proj_save_btn').innerHTML='save'},3000)})">save</button>  
-        <input id="proj_name"></input>
-    </div>
-</section>
+
+<div id="project_menu" class="cmenu"></div>
 
     
     <!-- <div class="dropzone"></div> -->
@@ -139,7 +136,7 @@
                 <label for="wall_width">width</label>
                 <div id="wall_width_value">0</div>
             </div>
-            <input type="range" step="0.1" min="0" max="7" id="wall_width" value="4" oninput="wall_size_change('width')"> 
+            <input type="range" step="0.1" min="0" max="7" id="wall_width" value="4" oninput="wall_size_change('width')" onchange="resize_drags()"> 
         </div>
     </div>
     <div class="czones">
@@ -154,33 +151,34 @@
         <div class="buble createzone"></div>
         <div class="buble createzone"></div> -->
     </div>
-    <img class="trash" style="height: 100px; width: 100px;" src="https://media.tenor.com/9Ec_X487U1kAAAAj/shadow-energy.gif" alt="black hole">
+    <img class="trash" style="height: 100px; width: 100px;" src="/img/shadow-energy.gif" alt="black hole">
 </div>
 
 <div class="wall dropzone" id="wall"></div>
 
 <script src="/lib/inter.js"></script>
+<%- include('./static/end.ejs') %>
 <script>
-    function scree(){
-
-
-        html2canvas(document.querySelector("body"),{height: 1000,y:100}).then(canvas => {
-            let scr = canvas.toDataURL();
-            let img = document.createElement("img");
-            img.src = scr;
-            document.body.append(img);
-            // return canvas;
-            // console.log(scr)
-        });
+    // function scree(){
+    //     // console.log(document.getElementById("wall").style.height.split("p")[0]);
+    //     html2canvas(document.querySelector("body"),{height: document.getElementById("wall").style.height.split("p")[0], width:document.getElementById("wall").style.width.split("p")[0], y:255}).then(canvas => {
+    //         console.log(canvas.toDataURL().length);
+    //         let scr = canvas.toDataURL();
+    //         let img = document.createElement("img");
+    //         img.src = scr;
+    //         document.body.append(img);
+    //         // return canvas;
+    //         // console.log(scr)
+    //     });
 
 
 
-        // html2canvas(document.querySelector("#drags")).then(canvas => {
-        //     document.body.appendChild(canvas)
-        // });
+    //     // html2canvas(document.querySelector("#drags")).then(canvas => {
+    //     //     document.body.appendChild(canvas)
+    //     // });
 
 
-    }
+    // }
     load_objs((data)=>{
         data.forEach(value => {
             // console.log(value);
@@ -190,13 +188,53 @@
             czone.classList.add("createzone");
             czones.append(czone)
         });
-        load_proj();
+        load_proj_cloud();
     })
 </script>
 <script>
     let proj_name = "<%= proj_name %>";
+    if($.cookie("cache") ==null)$.cookie("cache","true",{path:"/proj;SameSite=Strict"});
     // console.log(proj_name);
-    document.getElementById("proj_name").value = proj_name;
+    let menu = document.getElementById("project_menu");
+    document.getElementById("top_panel_left").innerHTML = `<div id='proj_menu' class="menu_btn">file</div>`;
+    menu.innerHTML += "<button id='proj_csave_btn' onclick='save_proj()'>save to cloud</button> <br>";
+    menu.innerHTML += "<button id='proj_cload_btn' onclick='load_proj_cloud()'>load from cloud</button> <br>";
+    menu.innerHTML += "<button id='proj_lsave_btn' onclick='save_proj_local()'>save to local storage</button> <br>";
+    menu.innerHTML += "<button id='proj_lload_btn' onclick='load_proj_local()'>load from local storage</button> <br>";
+    if ($.cookie("cache") == "false") menu.innerHTML += "<div id='cache_switch' title='if its on browser will stop large data in local storage (better performance)'><button onclick='cache_change(true);'>cache is off</button></div>";
+    else if ($.cookie("cache") == "true") menu.innerHTML += "<div id='cache_switch' title='if its on browser will stop large data in local storage (better performance)'><button onclick='cache_change(false);'>cache is on</button></div>";
+
+
+    function cache_change(to){
+        let cache_switch = document.getElementById("cache_switch");
+        if(to) {cache_switch.innerHTML = "<button onclick='cache_change(false);' title='if its on browser will stop large data in local storage (better performance)'>cache is on</button></div>";$.cookie("cache","true",{path:"/proj;SameSite=Strict"});}
+        else if(!to) {cache_switch.innerHTML = "<button onclick='cache_change(true);' title='if its on browser will stop large data in local storage (better performance)'>cache is off</button></div>";$.cookie("cache","false",{path:"/proj;SameSite=Strict"});}
+    }
+    function save_proj(type){
+        document.getElementById('top_panel_center').innerHTML=`saving ${proj_name}`;
+        save((res)=>{
+            document.getElementById('top_panel_center').innerHTML=`saved ${proj_name} to cloud`;
+            setTimeout((res)=>{
+                document.getElementById("top_panel_center").innerText = `${proj_name} (cloud)`;
+
+            },3000)
+        })
+    }
+
+    function save_proj_local(type){
+        document.getElementById('top_panel_center').innerHTML=`saving ${proj_name}`;
+        save_local();
+        document.getElementById('top_panel_center').innerHTML=`saved ${proj_name} to local storage`;
+        setTimeout((res)=>{
+            document.getElementById("top_panel_center").innerText = `${proj_name} (local)`;
+        },3000)
+    }
+    
     // drag_start();
-</script>
-<%- include('./static/end.ejs') %>
\ No newline at end of file
+    // console.log(px_ratio);
+    $(window).resize(function(){isZooming();});
+
+    function isZooming(){
+        resize_drags();
+    }
+</script>
\ No newline at end of file
diff --git a/views/static/end.ejs b/views/static/end.ejs
index 59212f1..8e8cd28 100644
--- a/views/static/end.ejs
+++ b/views/static/end.ejs
@@ -1,48 +1,23 @@
-<div class="scale_block">
-   <div>
-    oh no html breaking! <br>
-    please don't use custom scale for this window 
-   </div>
-</div>
 </body>
 </html>
 <script>
-    if(document.title == "login"){
-        console.log(document.title);
-        log_by_sid();
-    }else if(document.title != "login"){
-        check_sid(true);
-        console.log("check");
+    function hide_menus(){
+        let menus = document.getElementsByClassName("cmenu");
+        Object.entries(menus).forEach(([key,menu]) => {
+            menu.style.display = "none";
+        });
     }
-</script>
-<script>
-    px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
-    // console.log(px_ratio);
-    isZooming();
-    $(window).resize(function(){isZooming();});
-
-    function isZooming(){
-        var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
-        if(newPx_ratio != px_ratio){
-            px_ratio = newPx_ratio;
-            // console.log(px_ratio);
-            if (px_ratio != 1){
-                // console.log("zooming");
-                document.getElementsByClassName("scale_block")[0].style.display = "block";
-            }
-            else{
-                document.getElementsByClassName("scale_block")[0].style.display = "none";
-            }
-            return true;
-        }else{
-            // console.log("just resizing");
-            if (px_ratio != 1){
-                document.getElementsByClassName("scale_block")[0].style.display = "block";
-            }
-            else{
-                document.getElementsByClassName("scale_block")[0].style.display = "none";
-            }
-            return false;
-        }
+    hide_menus();
+    oncontextmenu = (e) => {
+            e.preventDefault()
     }
+    $(window).focus(function(){
+        if(document.title == "login"){
+            console.log(document.title);
+            log_by_sid();
+        }else if(document.title != "login"){
+            check_sid(true);
+            console.log("check");
+        }    
+    });
 </script>
\ No newline at end of file
diff --git a/views/static/start.ejs b/views/static/start.ejs
index 648e512..ae06637 100644
--- a/views/static/start.ejs
+++ b/views/static/start.ejs
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <script src="/lib/fn.js"></script>
     <!-- <script src="/lib/interact.min.js"></script> -->
     <script src="/lib/jquery.js"></script>
     <script src="/lib/jquery.cookie.js"></script>
-    <script src="/lib/fn.js"></script>
     <script src="/lib/ejs.js"></script>
     <script src="/lib/aes.js"></script>
     <meta charset="UTF-8">
@@ -19,29 +19,15 @@
         html{
             background-color:aliceblue;
         }
-        .scale_block{
-            display: none;
-            top: 0px;
-            left: 0px;
-            background-color:rgb(47, 47, 47);
-            width: 100vw;
-            height: 100vh;
-            /* line-height: 100vh; */
-            text-align: center;
-            position: absolute;
-            z-index: 100;
-            font-size: 4vw;
-            filter: opacity(99.8%);
-            /* filter: blur(1px); */
-            backdrop-filter: blur(10px);
-        }
-        .scale_block div{
-            position: absolute;
-            top: 50vh;
-            left: 50vw;
-            transform: translate(-50%, -50%);
-            width: 100vw;
-        }
     </style>
+    <script>
+        if(document.title == "login"){
+            console.log(document.title);
+            log_by_sid();
+        }else if(document.title != "login"){
+            check_sid(true);
+            console.log("check");
+        }
+    </script>
 </head>
 <body>