159 lines
3.9 KiB
Plaintext
159 lines
3.9 KiB
Plaintext
<style>
|
|
.drag{
|
|
height: 50px;
|
|
width: 50px;
|
|
position: absolute;
|
|
text-align: center;
|
|
margin: auto;
|
|
z-index: 10;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
body {
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
}
|
|
.createzone {
|
|
background-color: #bfe4ff;
|
|
border: dashed 4px transparent;
|
|
border-radius: 4px;
|
|
height: 10px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
width: 10px;
|
|
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; */
|
|
}
|
|
.czones{
|
|
display: flex;
|
|
margin: auto;
|
|
/* justify-content: space-around; */
|
|
flex-wrap: wrap;
|
|
width: 80%;
|
|
height: 100px;
|
|
/* overflow-x: auto; */
|
|
}
|
|
|
|
.drop-active {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
.drop-target {
|
|
background-color: #29e;
|
|
border-color: #fff;
|
|
border-style: solid;
|
|
}
|
|
|
|
#proj_top{
|
|
margin: auto;
|
|
width: 90%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
#proj_name{
|
|
background-color: #aaa;
|
|
border: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.inputs{
|
|
display: flex;
|
|
width: 80vw;
|
|
margin: auto;
|
|
padding-block: 20px;
|
|
}
|
|
|
|
.wall{
|
|
/* display: flex; */
|
|
/* position: relative; */
|
|
/* margin: 60px auto; */
|
|
width: 400px;
|
|
height: 200px;
|
|
background-color: #fff;
|
|
background-image: url("/img/bg1red.png");
|
|
background-size: 200px;
|
|
background-repeat: repeat;
|
|
background-position: bottom 0px left 0px;
|
|
border: 2px solid black;
|
|
/* overflow: visible; */
|
|
z-index: 2;
|
|
}
|
|
</style>
|
|
|
|
<%- include('./static/start.ejs',{name:proj_name,async: true}) %>
|
|
<%- include('./header.ejs') %>
|
|
<script src="/lib/interact.min.js"></script>
|
|
|
|
|
|
<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 onclick="save()">save</button>
|
|
<input id="proj_name"></input>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- <div class="dropzone"></div> -->
|
|
|
|
|
|
<div class="inputs">
|
|
<div class="czones">
|
|
<div class="cube createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
<div class="buble createzone"></div>
|
|
</div>
|
|
<div class="trash"></div>
|
|
</div>
|
|
|
|
|
|
<div id="wall_input">
|
|
<div>
|
|
<label for="wall_y">height</label> <br>
|
|
<input type="range" step="0.1" min="0" max="4" id="wall_y" oninput="wall_size_change('y')"> <br>
|
|
</div>
|
|
<div>
|
|
<label for="wall_x">width</label> <br>
|
|
<input type="range" step="0.1" min="2" max="7" id="wall_x" oninput="wall_size_change('x')"> <br>
|
|
</div>
|
|
</div>
|
|
<div class="wall dropzone"></div>
|
|
|
|
<script src="/lib/inter.js"></script>
|
|
<script>
|
|
let proj_name = "<%= proj_name %>";
|
|
// console.log(proj_name);
|
|
document.getElementById("proj_name").value = proj_name;
|
|
// drag_start();
|
|
load_proj();
|
|
</script>
|
|
<%- include('./static/end.ejs') %> |