n0rdye/puzzle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code optimization, new log system, appp optimizawion

Browse Source
This commit is contained in:
N0rdye
2023-07-03 00:05:13 +05:00
parent af8e44d1ce
commit 3583e5e588
19 changed files with 681 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
views/admin.ejs
View File

@ -3,6 +3,31 @@
display: flex;
justify-content: space-between;
margin: auto;
/* margin-bottom: 50px; */
}
#img_file{
text-overflow:ellipsis;
max-width:100px;
}
.img_preview{
/* width: 50px;
height: 20px; */
display: flex;
}
#img_prev{
height: 200px;
width: 200px;
}
</style>
<style>
.main_sec{
margin: auto;
/* display: flex; */
text-align: center;
}
#reg_form{
width: 80vw;
margin: auto;
}
</style>
@ -12,89 +37,148 @@
<section class="main">
<h1>hello admin</h1>
<div class="nobj">
<div class="img_preview">
<label for="img_file">max size 2mb</label><br>
<input type="file" id="img_file" onchange="previewFile()" accept="image/*" value="" maxlength="1"><br>
<img src="" height="100" alt="Image preview...">
<div>
<div class="img_preview">
<label for="img_file">max size 2mb</label><br>
<input type="file" id="img_file" onchange="previewFile()" accept="image/*" value="" maxlength="1"><br>
</div>
<div style="width: 200px; height: 200px;">
<img src="" id="img_prev" height="100" alt="Image preview...">
</div>
</div>
<textarea name="" id="nobj_description" cols="30" rows="5" placeholder="object description"></textarea>
<div>
<div class="nobj_options">
<input type="text" id="nobj_name" placeholder="object name">
<button onclick="create_obj()">create object</button>
<div id="obj_resp"></div>
</div>
<div id="obj_input">
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="obj_height">height </label>
<div id="obj_height_value">100см</div>
</div>
<input type="range" step="0.1" min="1" max="100" id="obj_height" value="100" oninput="obj_size_change('height')">
</div>
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="obj_width">width</label>
<div id="obj_width_value">100см</div>
</div>
<input type="range" step="0.1" min="1" max="100" id="obj_width" value="100" oninput="obj_size_change('width')">
</div>
</div>
</div>
</div>
</section>
<script>
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
<form action="" method="get" onsubmit="return false;" id="reg_form">
<h1>user registration</h1>
<section class="main_sec">
<div>
<input type="text" id="login" name="login" placeholder="login">
<input type="password" id="pass" name="pass" placeholder="password">
<button onclick='reg();'>reg</button>
</div>
<div>
<label for="admin_check">admin</label>
<input type="checkbox" name="admin" value='false' id="admin_check">
</div>
<div id="reg_response"></div>
</section>
</form>
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
<%- include('./static/end.ejs') %>
<script>
function reg(){
console.log("reg");
let login = document.getElementById("login").value;
let pass = document.getElementById("pass").value;
let admin = document.getElementById("admin_check").checked;
// console.log(login,pass,admin);
// console.log("cl reg");
$.post( "/reg_user", { login:login,pass:pass,admin:admin })
.done(function( res ) {
// console.log("serv reg");
if(res["out"] == "good"){
// console.log(res["body"]);
document.getElementById("reg_response").innerHTML = `user ${login} successfully registered `;
}
else if (res["out"] == "bad"){
document.getElementById("reg_response").innerHTML = "cannot register user "+login+" already in use";
}
});
}
</script>
<script>
function obj_size_change(type){
if(type == "height"){
let img = document.getElementById('img_prev');
let range = document.getElementById('obj_height');
let text = document.getElementById('obj_height_value');
img.style.height = `${range.value * 2}px`;
text.innerHTML = `${range.value}см`;
}else if (type == "width"){
let img = document.getElementById('img_prev');
let range = document.getElementById('obj_width');
let text = document.getElementById('obj_width_value');
img.style.width = `${range.value * 2}px`;
text.innerHTML = `${range.value}см`;
}
}
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
// async function toblob(callback){
// var preview = document.querySelector('img').src;
// // console.log(preview);
// fetch(preview)
// .then(res => res.blob())
// .then(blob => {
// // let dataUrl = blobToDataUrl(blob);
// console.log(blob)
// callback(blob);
// // console.log(dataUrl)
// })
// }
function create_obj(){
let name = document.getElementById("nobj_name").value;
let description = document.getElementById("nobj_description").value;
var img = document.querySelector('img').src;
name = name.replace(" ","_");
if (img != "http://n0rsrv2:3002/admin"){
document.getElementById("obj_resp").innerHTML = "creating object";
new_obj(name,img,0,0,description,(res)=>{
if(res["out"] == "bad" && res["err"] == "name"){
document.getElementById("obj_resp").innerHTML = "object already exist";
}
else if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "object created";
}
});
}
else{
document.getElementById("obj_resp").innerHTML = "image not selected";
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
// load_obj("asd",(data)=>{
// console.log(data);
// // let dataUrl = blobToDataUrl(data["img"]);
// // console.log(data["img"]["data"].getBlob());
// console.
// // document.querySelector('img').src = data["img"];
// })
function new_obj(name,img,height,width,description,callback){
$.post( "/new_obj", { name:name,img:img,desc:description,height:height,width:width })
.done(function( res ) {
// if(res["out"] == "good"){
// console.log(res["body"]);
// }
callback(res);
});
}
// function blobToDataUrl(blob) {
// let reader = new FileReader()
// reader.readAsDataURL(blob)
// reader.onload = function(){
// dataUrl = reader.result
// // console.log(dataUrl) //DataURL
// return dataUrl;
// }
// }
</script>
<!-- <iframe src="/reg" frameborder="0"></iframe> -->
<%- include('./reg.ejs') %>
function create_obj(){
let name = document.getElementById("nobj_name").value;
let description = document.getElementById("nobj_description").value;
let height = document.getElementById("obj_height").value;
let width = document.getElementById("obj_width").value;
var img = document.querySelector('img').src;
name = name.replace(" ","_");
if (img != "http://n0rsrv2:3002/admin"){
document.getElementById("obj_resp").innerHTML = "creating object";
new_obj(name,img,height,width,description,(res)=>{
if(res["out"] == "bad" && res["err"] == "name"){
document.getElementById("obj_resp").innerHTML = "object already exist";
}
else if(res["out"] == "good"){
document.getElementById("obj_resp").innerHTML = "object created";
}
});
}
else{
document.getElementById("obj_resp").innerHTML = "image not selected";
}
}
<%- include('./static/end.ejs') %>
</script>

33
views/header.ejs
View File

@ -27,21 +27,6 @@
/* } */
</style>
<header id="top_panel">
<script>get_from_uuid((res)=>{
let uname = document.getElementById("user_name");
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 (res["admin"] == true){
right.innerHTML += `<button onclick='goto("/admin")'>admin panel</button>`;
}
right.innerHTML += "<button onclick='logout();'>logout</button>";
});
</script>
<!-- <div id="user_name"></div> -->
<div id="proj_top_panel">
<div id="top_panel_left"></div>
@ -49,4 +34,20 @@
<div id="top_panel_right"></div>
</div>
<!-- <div><button onclick="logout();">logout</button></div> -->
</header>
</header>
<script>get_from_uuid((res)=>{
let uname = document.getElementById("user_name");
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 (res["admin"] == true){
right.innerHTML += `<button onclick='goto("/admin")'>admin panel</button>`;
}
right.innerHTML += "<button onclick='logout();'>logout</button>";
});
</script>

51
views/login.ejs
View File

@ -1,4 +1,4 @@
<%- include('./static/start.ejs',{name:'login',async: true,sid_check:"yes"}) %>
<%- include('./static/start.ejs',{name:'login',async: true}) %>
<style>
* {
@ -20,23 +20,44 @@
<label for="pass">password</label>
</div>
<button type="button" id="log_btn" onclick="blogin()">login</button>
<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>
<script>
// console.log($.cookie("uuid"));
// log_by_sid();
var input = document.getElementById("pass");
input.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("log_btn").click();
}
});
</script>
</form>
<%- include('./static/end.ejs') %>
<script>
// 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();
const sid = $.cookie("sid");
$.post( "/back_login", { login:login,pass:pass,sid:sid })
.done(function( res ) {
if (res["out"] == "bad"){
console.log(res["err"]);
if (res["err"] == "user" || res["err"] == "pass"){
document.querySelector("#res").innerHTML = "<p>wrong password or login</p>";
}
}
else{
if(res["out"] == "goto"){
// postForm(res["url"], res["args"]);
goto(res["url"]);
}
}
});
}
var input = document.getElementById("pass");
input.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("log_btn").click();
}
});
</script>

17
views/main.ejs
View File

@ -49,7 +49,19 @@
<div id="projs_div"></div>
</section>
<!-- <script src="/lib/inter.js"></script> -->
<%- include('./static/end.ejs') %>
<script>
function load_projs(callback){
$.post( "/get_projs")
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
callback(res["body"]);
}
});
}
function new_proj(){
let name = ask();
if(name != null && name!= "" && name!=" " && typeof name != "undefined" && name!="undefined"){
@ -63,7 +75,4 @@
div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')"><img height="200" width="290" src='${proj["img"]}' alt='${proj["name"]}'></img> <br>${proj["name"]}</button>`;
});
});
</script>
<!-- <script src="/lib/inter.js"></script> -->
<%- include('./static/end.ejs') %>
</script>

22
views/project.ejs
View File

@ -8,24 +8,32 @@
z-index: 10;
}
#drags{
position: absolute;
margin: auto;
}
.dropzone {
background-color: #bfe4ff;
border: dashed 4px transparent;
border-radius: 4px;
height: 140px;
margin: 10px auto 30px;
padding: 10px;
/* padding: 10px; */
width: 80%;
transition: background-color 0.3s;
position: absolute;
inset: 0px;
margin: 250px auto;
}
.createzone {
background-color: #bfe4ff;
border: dashed 4px transparent;
border-radius: 4px;
height: 10px;
height: 22px;
width: 22px;
margin: 10px;
padding: 10px;
width: 10px;
transition: background-color 0.3s;
}
@ -34,7 +42,7 @@
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
/* padding: 10px; */
height: 50px;
width: 50px;
transition: background-color 0.3s;
@ -124,14 +132,14 @@
<label for="wall_height">height </label>
<div id="wall_height_value">0</div>
</div>
<input type="range" step="0.1" min="0" max="4.9" id="wall_height" value="1.9" oninput="wall_size_change('height')">
<input type="range" step="0.1" min="0" max="5" id="wall_height" value="2" oninput="wall_size_change('height')">
</div>
<div>
<div style="display: flex;width: 150px;justify-content: space-between;">
<label for="wall_width">width</label>
<div id="wall_width_value">0</div>
</div>
<input type="range" step="0.1" min="0" max="6.9" id="wall_width" value="3.9" 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')">
</div>
</div>
<div class="czones">
@ -146,7 +154,7 @@
<div class="buble createzone"></div>
<div class="buble createzone"></div> -->
</div>
<div class="trash">trash bin</div>
<img class="trash" style="height: 100px; width: 100px;" src="https://media.tenor.com/9Ec_X487U1kAAAAj/shadow-energy.gif" alt="black hole">
</div>
<div class="wall dropzone" id="wall"></div>

53
views/reg.ejs
View File

@ -1,53 +0,0 @@
<style>
.main_sec{
margin: auto;
/* display: flex; */
text-align: center;
}
#reg_form{
width: 80vw;
margin: auto;
}
</style>
<%- include('./static/start.ejs',{name:"reg",async: true}) %>
<form action="" method="get" onsubmit="return false;" id="reg_form">
<h1>user registration</h1>
<section class="main_sec">
<div>
<input type="text" id="login" name="login" placeholder="login">
<input type="password" id="pass" name="pass" placeholder="password">
<button onclick='reg();'>reg</button>
</div>
<div>
<label for="admin_check">admin</label>
<input type="checkbox" name="admin" value='false' id="admin_check">
</div>
<div id="reg_response"></div>
</section>
<script>
function reg(){
console.log("reg");
let login = document.getElementById("login").value;
let pass = document.getElementById("pass").value;
let admin = document.getElementById("admin_check").checked;
// console.log(login,pass,admin);
// console.log("cl reg");
$.post( "/reg_user", { login:login,pass:pass,admin:admin })
.done(function( res ) {
// console.log("serv reg");
if(res["out"] == "good"){
// console.log(res["body"]);
document.getElementById("reg_response").innerHTML = `user ${login} successfully registered `;
}
else if (res["out"] == "bad"){
document.getElementById("reg_response").innerHTML = "cannot register user "+login+" already in use";
}
});
}
</script>
<!-- <input type="submit" value=""> -->
<!-- <script>test();</script> -->
<!-- <iframe id="reg_out" frameborder="0"></iframe> -->
</form>

41
views/static/end.ejs
View File

@ -1,3 +1,11 @@
<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);
@ -7,5 +15,34 @@
console.log("check");
}
</script>
</body>
</html>
<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;
}
}
</script>

25
views/static/start.ejs
View File

@ -8,10 +8,8 @@
<script src="/lib/ejs.js"></script>
<script src="/lib/aes.js"></script>
<meta charset="UTF-8">
<!-- <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> <%= name %> </title>
<!-- <script> document.querySelector("title").innerHTML += $.cookie("uuid"); </script> -->
<style>
.main{
width: 80vw;
@ -21,6 +19,29 @@
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>
</head>
<body>