💄 Restyle quickly the page

This commit is contained in:
Rodolphe Houdas 2021-09-04 00:34:36 +01:00
parent b0ce61087e
commit ecdd850791
2 changed files with 31 additions and 32 deletions

View file

@ -17,5 +17,17 @@
}
.disabled div {
background-color: gray !important;
opacity: 40%;
}
.idealgray {
color: #545454;
}
.f1.shadow, footer {
text-shadow: 2px 2px 4px rgba( 0, 0, 0, 0.3 );
}
#three-container canvas {
border-radius: .5rem;
}

View file

@ -8,10 +8,11 @@
<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>
<div class="mw5 mw7-ns center bg-light-gray pa3 ph5-ns shadow-2 avenir">
<h1 class="f1">OpenSCAD Remote</h1>
<body class="bg-blue">
<header class="center white avenir 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">
<form id="files-form" enctype="multipart/form-data">
<h2 class="f4">Main SCAD file</h2>
@ -19,11 +20,6 @@
<input class="clip" type=file name="main-file" id="fileForUpload" accept=".scad" required>
<label class="f6 pointer dim blue ba b--dark-blue w-100 ph3 pv2 link mr0 ml0 dib" for="fileForUpload"><i class="fa fa-upload" aria-hidden="true"></i> Choose a file to upload (.scad)</label>
</div>
<div class="w-100">
<div class="w-100 bb b--black-30 pb3"></div>
<div class="pt2"></div>
</div>
<h2 class="f4">Parameters JSON file</h2>
@ -32,36 +28,27 @@
<label class="f6 pointer dim blue ba b--dark-blue w-100 ph3 pv2 link mr0 ml0 dib" for="paramFile"><i class="fa fa-upload" aria-hidden="true"></i> Choose a file to upload (.json)</label>
</div>
<div class="w-100">
<div class="w-100 bb b--black-30 pb3"></div>
<div class="pt2"></div>
</div>
<div class="flex items-center">
<h3 class="f4 w-100">Extra files</h3>
<button type="button" id="add-file-button" class="f6 w5 h2 white bg-blue ba b--dark-blue ph3 pv2 db br-pill shadow-2 grow"><i class="fa fa-plus" aria-hidden="true"></i> Add a file</button>
<button type="button" id="add-file-button" class="f6 w5 h2 white bg-blue ba b--dark-blue ph3 pv2 db br-pill shadow-1 grow"><i class="fa fa-plus" aria-hidden="true"></i> Add a file</button>
</div>
<div class="flex flex-column" id="extra-files-list"></div>
<div class="w-100">
<div class="w-100 bb b--black-30 pb3"></div>
<div class="pt2"></div>
</div>
<button type="submit" class="f4 white bg-green ba b--dark-green mt2 ph4 pv3 center mw5 db shadow-2 grow" id="send-buttonbak"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send</button>
<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">
<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
</div>
</a>
<div id="three-container" class="w-100 center h-100 br3"></div>
</div>
</div>
<div id="result-viewer" class="mw5 mw7-ns center bg-light-gray shadow-2 avenir pt3 mt3">
<h3 class="f3 mr3 ml3 mr5-ns ml5-ns">Result</h3>
<div id="three-container" class="w-100 center h6"></div>
<a id="dl-link" class="center no-underline db mw5 disabled">
<div class="f4 white bg-green ba b--dark-green mt2 flex items-center justify-center pv3 center db shadow-2 grow">
<i class="fa fa-download mr2" aria-hidden="true"></i>Download
</div>
</a>
</div>
<footer class="mt3 mb3 center white avenir tc">
Made with <i class="fa fa-heart" aria-hidden="true"></i> by me.
</footer>
<script type="module">
import {
STLViewer,