Skip to content

Commit

Permalink
deploy: 7f6ee67
Browse files Browse the repository at this point in the history
  • Loading branch information
@Luthaf
Luthaf committed Oct 15, 2024
0 parents commit 1e4c506
Show file tree
Hide file tree
Showing 793 changed files with 43,220 additions and 0 deletions.
Empty file added .nojekyll
Empty file.
99 changes: 99 additions & 0 deletions 3dmol-example.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Structure widget example</title>

<!-- jquery -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM="
crossorigin="anonymous"
></script>

<!-- bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>

<!-- The code for molecule-viewer -->
<script type="text/javascript" src="molecule-viewer.min.js"></script>

<style>
.description {
width: 600px;
margin: 1em auto 1em auto;
padding: 8px;
}

.viewer {
width: 600px;
height: 400px;
margin: auto;
border: 1px solid black;
}
</style>
</head>

<body>
<h1 style="text-align: center; margin-bottom: 1em">3Dmol widget example</h1>

<div style="width: 600px; margin: auto">
<h4>Crystal with environments</h4>
</div>
<div id="crystal" class="viewer"></div>
<div class="card description">Example of a crystal structure (see the options related to the unit cell) with atom centered environments.</div>

<div style="width: 600px; margin: auto">
<h4>Simple molecule</h4>
</div>
<div id="molecule" class="viewer"></div>
<div class="card description">Example of a single molecule, without unit cell or environments.</div>
</body>

<script type="text/javascript">
// prettier-ignore
const crystalData = {
size: 8,
names: ["C", "C", "C", "C", "C", "C", "C", "C"],
x: [0.39589082, 0.39589082, 1.63234082, 1.63234082, 0.39589082, 0.39589082, 1.63234082, 1.63234082],
y: [1.56386071, 3.06796929, 4.50090951, 0.13092049, 0.84082421, 3.79100579, 1.18871093, 3.44311907],
z: [4.50090951, 0.13092049, 3.06796929, 1.56386071, 1.18871093, 3.44311907, 3.79100579, 0.84082421],
cell: [2.4729, 2.8361778918473426e-16, 2.8361778918473426e-16, 0.0, 4.63183, 2.8361778918473426e-16, 0.0, 0.0, 4.63183],
};

// prettier-ignore
const moleculeData = {
size: 35,
names: ["C", "C", "O", "H", "H", "H", "N", "C", "C", "O", "H", "H", "C", "C", "C", "N", "C", "N", "N", "H", "H", "H", "H", "H", "H", "H", "H", "H", "H", "N", "C", "H", "H", "H", "H"],
x: [-1.8, -1.4, -0.5, -2.1, -2.6, -0.9, -2.0, -1.6, -1.4, -2.1, -2.6, -0.6, -2.6, -2.7, -1.5, -0.2, 0.7, 1.6, 0.7, -2.4, -3.6, -3.6, -2.7, -1.5, -1.8, -0.1, 2.2, 1.2, 0.0, -0.5, -0.2, -0.0, -0.8, -0.5, 0.9],
y: [3.7, 3.0, 3.5, 4.7, 3.1, 3.8, 1.8, 1.0, -0.4, -0.9, 1.4, 1.4, 1.0, 2.3, 2.5, 2.7, 1.7, 2.1, 0.5, 0.2, 0.8, 2.3, 3.2, 1.6, 3.3, 3.6, 1.4, 2.7, 0.3, -1.1, -2.5, -0.7, -2.8, -3.2, -2.7],
z: [0.6, 1.9, 2.6, 0.8, 0.1, -0.1, 2.2, 3.3, 2.8, 1.8, 1.5, 3.6, 4.5, 5.3, 6.3, 5.8, 5.4, 4.4, 5.8, 5.1, 4.0, 5.9, 4.6, 7.0, 7.0, 5.3, 4.1, 3.7, 6.6, 3.5, 3.2, 4.3, 2.3, 4.1, 3.0],
};

document.addEventListener('DOMContentLoaded', () => {
const crystal = new Chemiscope.MoleculeViewer('crystal');
crystal.load(crystalData, {
supercell: [2, 2, 2],
environments: Array(8).fill({ cutoff: 2.5 }),
});
crystal.highlight(2);
crystal.onselect = (index) => crystal.highlight(index);

const molecule = new Chemiscope.MoleculeViewer('molecule');
molecule.load(moleculeData);
});
</script>
</html>
1 change: 1 addition & 0 deletions CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
chemiscope.org
193 changes: 193 additions & 0 deletions app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
:root {
--header-height: 48px;
--footer-height: 30px;
}

html {
position: relative;
min-height: 100%;
}

body {
margin-bottom: 30px;
}

.footer {
position: absolute;
bottom: 0;
width: 100%;
height: var(--footer-height);
padding-top: 7px;
background-color: #2c3e50;
color: white;
font-size: 0.8rem;
}

.footer .container {
max-width: 1140px;
}

.footer a {
color: inherit;
text-decoration: underline;
}

header {
background-color: #2c3e50;
width: 100%;
height: var(--header-height);
}

.navbar {
max-width: 1100px;
margin-bottom: 1em;
z-index: 999;
background-color: inherit;
}

.references a {
color: grey;
}

#loading {
font-size: 6em;
margin: auto;
text-align: center;
color: grey;
position: absolute;
z-index: 100000;
left: 50%;
}

main.container-fluid {
margin: 1.5em 0em calc(1.5em + var(--header-height)) 0em;
width: 100%;
}

@media screen and (min-width: 900px) {
main.container-fluid {
margin: 2em 2em calc(2em + var(--header-height)) 2em;
width: calc(100% - 4em);
}
}

@media screen and (min-width: 1200px) {
main.container-fluid {
margin: 2em auto calc(2em + var(--header-height)) auto;
width: 1200px;
}
}

main .ratio {
margin: auto;
width: 90%;
}

main .ratio > * {
display: flex;
flex-flow: column;
}

.ratio-5x7 {
overflow-y: hidden;
overflow-x: hidden;
}

.ratio-5x7::before {
padding-top: 140%;
}

@media screen and (min-width: 768px) {
.ratio-5x7 {
max-height: calc(100vh - 2em - var(--header-height) - var(--footer-height));
}

main .ratio {
/* set the width to fit the vertical space, and the height will be set automatically */
max-width: calc(100vh - 2em - var(--header-height) - var(--footer-height));
width: 100%;
}
}

.clickable {
cursor: pointer;
}

.pop-on-top {
z-index: 100;
position: absolute;
width: 80%;
left: 50%;
margin-left: -40%;
}

#chemiscope-meta {
width: max-content;
height: max-content;
position: absolute;
top: 0;
left: 2em;
font-size: 16pt;
}

#chemiscope-map {
display: block;
}

#chemiscope-structure {
flex: 1 1 auto;
}

#chemiscope-info {
flex: 0 1 auto;
width: 100%;
}

#upload {
width: 280px;
}

#open-save-menu {
background-color: #e2e6ea;
border-color: #ced4da;
}

#open-save-menu:hover {
background-color: #f8f9fa;
}

.grid-1-1 {
display: grid;
align-items: center;
justify-content: center;
align-content: start;
grid-gap: 1em;
grid-template-columns: 1fr 1fr;
}

.grid-1-1-1 {
display: grid;
align-items: center;
justify-content: center;
align-content: start;
grid-gap: 1em;
grid-template-columns: 1fr 1fr 1fr;
}

.width-10em {
width: 10em;
}

.btn-outline-secondary-less-hover:hover {
color: inherit;
background-color: #f2f2f2;
}

.hidden-input-file {
position: absolute;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 100%;
}
Loading

0 comments on commit 1e4c506

Please sign in to comment.