💄 Make the page more static
This commit is contained in:
parent
ecdd850791
commit
3ea25b63f9
|
|
@ -30,4 +30,25 @@
|
|||
|
||||
#three-container canvas {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.bg-black-o-30 {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
animation: rotation 2s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@ class STLViewer {
|
|||
1,
|
||||
1000
|
||||
);
|
||||
this.camera.position.set(10, 10, 10);
|
||||
this.camera.position.set(100, 100, 100);
|
||||
|
||||
// Renderer
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
|
|
@ -27,19 +27,24 @@ class STLViewer {
|
|||
|
||||
// World
|
||||
this.scene = new THREE.Scene();
|
||||
this.scene.background = new THREE.Color( 0xdddddd );
|
||||
//scene.fog = new THREE.Fog(0xdddddd, 10, 100);
|
||||
this.scene.background = new THREE.Color(0xefefef);
|
||||
|
||||
// Ground
|
||||
const plane = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry( 1000, 1000 ),
|
||||
new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
|
||||
);
|
||||
plane.rotation.x = - Math.PI / 2;
|
||||
plane.position.y = - 0.5;
|
||||
this.scene.add( plane );
|
||||
const axes = new THREE.AxesHelper(100);
|
||||
this.scene.add(axes);
|
||||
|
||||
plane.receiveShadow = true;
|
||||
const gridXZ = new THREE.GridHelper(100, 10, new THREE.Color(0x006600));
|
||||
gridXZ.position.set(0, 0, 0);
|
||||
this.scene.add(gridXZ);
|
||||
|
||||
const gridXY = new THREE.GridHelper(100, 10, new THREE.Color(0x000066));
|
||||
gridXY.position.set(0, 0, 0);
|
||||
gridXY.rotation.x = Math.PI/2;
|
||||
this.scene.add(gridXY);
|
||||
|
||||
const gridYZ = new THREE.GridHelper(100, 10, new THREE.Color(0x660000));
|
||||
gridYZ.position.set(0, 0, 0);
|
||||
gridYZ.rotation.z = Math.PI/2;
|
||||
this.scene.add(gridYZ);
|
||||
|
||||
// Lights
|
||||
this.scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
|
||||
|
|
|
|||
|
|
@ -2,17 +2,19 @@
|
|||
<html>
|
||||
<head lang="en">
|
||||
<title>Generate a model with OpenSCAD Remote</title>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||||
<meta content="utf-8" http-equiv="encoding">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="css/tachyons-4.12.0.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body class="bg-blue">
|
||||
<header class="center white avenir tc">
|
||||
<body class="bg-blue avenir">
|
||||
<header class="center white tc">
|
||||
<h1 class="f1 shadow">OpenSCAD Remote</h1>
|
||||
</header>
|
||||
<div class="br3 b--white mw5 mw7-ns center bg-white dark-gray pa3 ph5-ns shadow-3 avenir">
|
||||
<div class="br3 b--white w-90 mw5-m mw7-ns center bg-white dark-gray pa3 ph5-ns shadow-3 avenir">
|
||||
<form id="files-form" enctype="multipart/form-data">
|
||||
<h2 class="f4">Main SCAD file</h2>
|
||||
|
||||
|
|
@ -38,6 +40,16 @@
|
|||
<button type="submit" class="br2 f4 white bg-green ba b--dark-green mt2 ph4 pv3 center mw5 db shadow-1 grow" id="send-buttonbak"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send</button>
|
||||
</form>
|
||||
<div class="w-100 center h6 relative mt4 br3">
|
||||
<div id="empty" class="flex items-center justify-center white br3 w-100 h-100 bg-black-o-30 absolute">
|
||||
<div>
|
||||
Please add a .scad file and press "Send" to view your model
|
||||
</div>
|
||||
</div>
|
||||
<div id="loading" class="dn flex items-center justify-center white br3 w-100 h-100 bg-black-o-30 absolute">
|
||||
<div class="rotate">
|
||||
Loading
|
||||
</div>
|
||||
</div>
|
||||
<a id="dl-link" class="w5 no-underline db disabled absolute bottom-1 right-1 br2">
|
||||
<div class="w-100 f4 white bg-green ba b--dark-green flex items-center justify-center pv3 center db shadow-1 grow br2">
|
||||
<i class="fa fa-download mr2" aria-hidden="true"></i>Download
|
||||
|
|
@ -46,7 +58,7 @@
|
|||
<div id="three-container" class="w-100 center h-100 br3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="mt3 mb3 center white avenir tc">
|
||||
<footer class="mt3 mb3 center white tc">
|
||||
Made with <i class="fa fa-heart" aria-hidden="true"></i> by me.
|
||||
</footer>
|
||||
<script type="module">
|
||||
|
|
@ -87,6 +99,8 @@
|
|||
|
||||
const send_form = document.getElementById("files-form");
|
||||
send_form.addEventListener("submit", (event) => {
|
||||
document.getElementById("empty").classList.add("dn");
|
||||
document.getElementById("loading").classList.remove("dn");
|
||||
fetch(Configuration.url, {
|
||||
method: "POST",
|
||||
body: new FormData(event.target)
|
||||
|
|
@ -112,6 +126,7 @@
|
|||
dl_link.classList.remove("disabled");
|
||||
|
||||
stlviewer.loadSTLBlob(blob);
|
||||
document.getElementById("loading").classList.add("dn");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue