puzzle/views/main.ejs
2023-07-14 10:47:53 +05:00

82 lines
2.1 KiB
Plaintext

<%- include('./static/start.ejs',{name:'main',async: true}) %>
<%- include('./header.ejs') %>
<style>
.drag{
height: 50px;
width: 50px;
position: absolute;
text-align: center;
}
.dropzone {
background-color: #bfe4ff;
border: dashed 4px transparent;
border-radius: 4px;
height: 140px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.trash {
background-color: #bfe4ff;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
height: 50px;
width: 50px;
transition: background-color 0.3s;
z-index: -1;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
img{
pointer-events: none;
}
</style>
<!-- <script src="/lib/interact.min.js"></script> -->
<section class="main">
<button onclick="new_proj()">создать новый проект</button>
<div id="projs_div"></div>
</section>
<!-- <script src="/lib/inter.js"></script> -->
<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("please enter project name");
if(name != null && name!= "" && name!=" " && typeof name != "undefined" && name!="undefined"){
goto(`/proj/${name}`);
}
}
load_projs((projs)=>{
projs.forEach(proj => {
// console.log(proj);
let div = document.getElementById("projs_div");
div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')">${proj["name"]}<br><img height="200" width="290" src='${proj["img"]}' alt='${proj["name"]}'></img></button>`;
});
});
</script>
<%- include('./static/end.ejs') %>