<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorials and Documentation - Aropha AI</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
/* General Styles */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background: #ffffff;
color: #222a35;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
border-radius: 15px;
padding: 20px;
margin-top: 140px;
}
.top-bar {
background: #222a35;
color: #ffffff;
padding: 15px 0;
text-align: center;
font-weight: bold;
font-size: 1.5em;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.logo-container {
display: flex;
justify-content: center;
width: 100%;
padding: 10px 0;
}
.top-bar img.logo {
height: 50px;
}
.nav-container {
display: flex;
justify-content: center;
width: 100%;
padding: 10px 0;
}
.button-container {
display: flex;
gap: 20px;
align-items: center;
}
.btn {
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: normal;
transition: all 0.3s ease;
padding: 5px 10px;
}
.btn:hover {
color: #66ccff;
}
.btn.active {
color: #66ccff;
}
/* dropdown style */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 5px;
margin-top: 5px;
}
.dropdown-content a {
color: #222a35;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 14px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color: #66ccff;
}
.dropdown-content a.active {
color: #66ccff;
}
/* Content Styles */
.content {
padding: 20px 40px;
text-align: left;
}
section {
margin-bottom: 40px;
padding: 20px;
border-radius: 10px;
background: #eeeeee;
color: #222a35;
}
h1 {
text-align: center;
color: #222a35;
font-size: 2.5em;
margin-bottom: 40px;
}
h2 {
color: #222a35;
border-bottom: 2px solid #66ccff;
padding-bottom: 8px;
}
p { line-height: 1.6; }
.img-center {
display: block;
margin: 0 auto;
}
/* Table styles */
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #222a35;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
footer {
text-align: center;
padding: 20px 0;
background: #222a35;
color: #ffffff;
margin-top: 40px;
}
footer a {
color: #66ccff;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
/* D3.js Flowchart Styles */
.node rect {
fill: #f5f5f5;
stroke: #222a35;
stroke-width: 2px;
rx: 10px;
ry: 10px;
transition: all 0.3s ease;
}
.node.decision rect {
fill: #222a35;
stroke: #66ccff;
}
.node.engine rect {
fill: #ECF5FF;
stroke: #66ccff;
stroke-width: 3px;
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.2));
}
.node text {
font-size: 14px;
text-anchor: middle;
dominant-baseline: middle;
font-family: 'Roboto', sans-serif;
}
.node.decision text {
fill: #ffffff;
}
.node.engine text {
font-weight: bold;
font-style: italic;
fill: #222a35;
}
.link {
stroke: #222a35;
stroke-width: 2px;
fill: none;
}
.link-label {
font-size: 12px;
font-family: 'Roboto', sans-serif;
fill: #666666;
}
.node:hover rect {
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3));
cursor: pointer;
}
</style>
</head>
<body>
<div class="top-bar">
<div class="logo-container">
<img src="https://www.users.aropha.com/static/assets/img/logo-rectangular.png" alt="Aropha Logo" class="logo">
</div>
<div class="nav-container">
<div class="button-container">
<a href="/home.html" class="btn">Home</a>
<a href="/user_registration.html" class="btn">User Registration</a>
<div class="dropdown">
<a href="/tutorials.html" class="btn active">Tutorials and Documentations</a>
<div class="dropdown-content">
<a href="#ai-engines" onclick="scrollToSection('ai-engines')" class="active">AI Engines</a>
<a href="#material-morphology" onclick="scrollToSection('material-morphology')">Material Morphology</a>
<a href="#method" onclick="scrollToSection('method')">Method</a>
</div>
</div>
<a href="/activate_free_trial.html" class="btn">Activate Free Trial</a>
<a href="/aropha_data_submission.html" class="btn">Data Processing and Credits</a>
<a href="/Biodegrability_screening_case_study.html" class="btn">Biodegradability Case Study</a>
<a href="/purchase_ai_engine_credits.html" class="btn">Purchase Credits</a>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<section>
<h2>Chemical Data Entry</h2>
<p>Chemical data can be provided in one of three ways:</p>
<ul>
<li>Full SMILES notation of the substance</li>
<li>in-silico Polymer Synthesis from Monomer Units</li>
<li>IR Data Entry</li>
</ul>
<img src="images/image 7.png" alt="Chemical Data Entry" class="img-center" style="max-width:90%;">
</section>
<section id="ai-engines">
<h2>AI Engines</h2>
<p>Our intelligent engine selection system helps you choose the perfect AI model for your specific needs. Follow the flowchart below to identify the most suitable engine for your material:</p>
<div style="background: #ffffff; padding: 20px; border-radius: 10px;">
<svg width="1000" height="500"></svg>
</div>
<div class="table-container">
<h3>Engine Specifications</h3>
<table>
<thead>
<tr>
<th>AI Engine</th>
<th>Chemical Space</th>
<th>Degree of Polymerization</th>
<th>Suggested MW for small molecules</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aropha Former</td>
<td>Small Molecule + Macromolecular Polymer</td>
<td>≤ 100</td>
<td>≤ 1000</td>
</tr>
<tr>
<td>ArophaGrapher</td>
<td>Small Molecule + Macromolecular Polymer</td>
<td>≤ 2000</td>
<td>≥ 1000</td>
</tr>
<tr>
<td>ArophaPolyformer</td>
<td>Macromolecular Polymer</td>
<td>Custom</td>
<td>N/A</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="material-morphology">
<h2>Material Morphology</h2>
<p>
We consider the impact of material morphology. Please select the shape type that best matches your material from our list and provide the relevant parameters.
</p>
<img src="images/image 5.png" alt="Material Morphology" class="img-center" style="max-width:70%;">
</section>
<section id="method">
<h2>Method</h2>
<p>
You can choose from 60 standard methods for your experiment or design a customized method tailored to specific environmental conditions.
</p>
<img src="images/image 6.png" alt="Method" class="img-center" style="max-width:70%;">
</section>
</div>
</div>
<footer>
<p>
Follow us on <a href="https://www.linkedin.com/company/aropha/">LinkedIn</a> | © 2025 Aropha Inc. All Rights Reserved.
</p>
</footer>
<script>
// navagate
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
if (section) {
const topOffset = section.offsetTop - 150;
window.scrollTo({
top: topOffset,
behavior: 'smooth'
});
}
}
// dropdown menu activated
document.querySelectorAll('.dropdown-content a').forEach(link => {
link.addEventListener('click', (e) => {
document.querySelectorAll('.dropdown-content a').forEach(a => a.classList.remove('active'));
e.target.classList.add('active');
});
});
// D3.js flowchart
const data = {
nodes: [
{ id: "Small\nMolecule", x: 100, y: 100, type: "default" },
{ id: "Polymer", x: 100, y: 350, type: "default" },
{ id: "Molecular\nWeight", x: 300, y: 100, type: "decision" },
{ id: "Degree of\nPolymerization", x: 300, y: 350, type: "decision" },
{ id: "Aropha\nFormer", x: 600, y: 100, type: "engine" },
{ id: "Aropha\nGrapher", x: 600, y: 250, type: "engine" },
{ id: "Aropha\nPolyformer", x: 600, y: 400, type: "engine" }
],
links: [
{ source: "Small\nMolecule", target: "Molecular\nWeight", label: "" },
{ source: "Molecular\nWeight", target: "Aropha\nFormer", label: "MW ≤ 1000" },
{ source: "Molecular\nWeight", target: "Aropha\nGrapher", label: "MW > 1000" },
{ source: "Polymer", target: "Degree of\nPolymerization", label: "" },
{ source: "Degree of\nPolymerization", target: "Aropha\nFormer", label: "DP ≤ 100" },
{ source: "Degree of\nPolymerization", target: "Aropha\nGrapher", label: "100 < DP ≤ 2000" },
{ source: "Degree of\nPolymerization", target: "Aropha\nPolyformer", label: "Custom DP" }
]
};
const svg = d3.select("svg");
const g = svg.append("g");
// Create arrow marker
svg.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("viewBox", "-0 -5 10 10")
.attr("refX", 20)
.attr("refY", 0)
.attr("orient", "auto")
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.append("path")
.attr("d", "M 0,-5 L 10,0 L 0,5")
.attr("fill", "#222a35");
// Create links
const linkGroup = g.append("g").attr("class", "links");
const link = linkGroup.selectAll(".link")
.data(data.links)
.enter()
.append("g");
link.append("path")
.attr("class", "link")
.attr("marker-end", "url(#arrowhead)")
.attr("d", d => {
const sourceNode = data.nodes.find(n => n.id === d.source);
const targetNode = data.nodes.find(n => n.id === d.target);
return `M ${sourceNode.x + 80} ${sourceNode.y}
L ${targetNode.x - 80} ${targetNode.y}`;
});
link.append("text")
.attr("class", "link-label")
.attr("x", d => {
const sourceNode = data.nodes.find(n => n.id === d.source);
const targetNode = data.nodes.find(n => n.id === d.target);
return (sourceNode.x + targetNode.x) / 2;
})
.attr("y", d => {
const sourceNode = data.nodes.find(n => n.id === d.source);
const targetNode = data.nodes.find(n => n.id === d.target);
return (sourceNode.y + targetNode.y) / 2 - 10;
})
.text(d => d.label)
.attr("text-anchor", "middle");
// Create nodes
const nodeGroup = g.append("g").attr("class", "nodes");
const node = nodeGroup.selectAll(".node")
.data(data.nodes)
.enter()
.append("g")
.attr("class", d => `node ${d.type}`)
.attr("transform", d => `translate(${d.x - 60},${d.y - 25})`);
node.append("rect")
.attr("width", 120)
.attr("height", 50);
node.append("text")
.attr("x", 60)
.attr("y", 25)
.text(d => d.id)
.each(function(d) {
const text = d3.select(this);
const words = d.id.split('\n');
text.text('');
words.forEach((word, i) => {
text.append("tspan")
.attr("x", 60)
.attr("dy", i ? "1.2em" : "-0.6em")
.text(word);
});
});
// Add zoom behavior
const zoom = d3.zoom()
.scaleExtent([0.5, 2])
.on("zoom", (event) => {
g.attr("transform", event.transform);
});
svg.call(zoom);
</script>
</body>
</html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter