tutorials_ver4
Thu Feb 13 2025 23:35:31 GMT+0000 (Coordinated Universal Time)
Saved by @emma1314
<!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>
<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;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({
theme: 'default',
securityLevel: 'loose',
startOnLoad: true
});
</script>
</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 class="mermaid">
graph LR
SM[Small Molecule] --> Q1{Molecular Weight?}
Poly[Polymer] --> Q2{Known Degree of Polymerization?}
Q1 -->|MW ≤ 1000| Former[Aropha Former]
Q1 -->|MW ≥ 1000| Grapher[ArophaGrapher]
Q2 -->|No, or DP ≤ 100| Former
Q2 -->|Yes, DP ≤ 2000| Grapher
Q2 -->|Custom| ArophaPolyformer[ArophaPolyformer]
classDef default fill:#ffffff,stroke:#222a35,stroke-width:2px,color:#222a35
classDef decision fill:#222a35,stroke:#66ccff,stroke-width:2px,color:#ffffff
class SM,Poly,Former,Grapher,ArophaPolyformer default
class Q1,Q2 decision
</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>
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
if (section) {
const topOffset = section.offsetTop - 150; // Adjust for fixed header
window.scrollTo({
top: topOffset,
behavior: 'smooth'
});
}
}
// Add click event listeners to dropdown items
document.querySelectorAll('.dropdown-content a').forEach(link => {
link.addEventListener('click', (e) => {
// Remove active class from all links
document.querySelectorAll('.dropdown-content a').forEach(a => a.classList.remove('active'));
// Add active class to clicked link
e.target.classList.add('active');
});
});
</script>
</body>
</html>
Comments