Skip to content

Openhcs website #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
popjell wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Openhcs website #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
23f602e
Create globals.css
popjell Jun 16, 2026
3225977
Add rest of website files
popjell Jun 16, 2026
2b9d1be
small css refactor
popjell Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 116 additions & 0 deletions website/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
/* Minimal reset (meyer-reset v2 inlined to eliminate extra request) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

:root {
color-scheme: dark;
--color-bg-page: #11131b;
--color-bg-dark: #0c0e16;
--color-bg-card: #282a3280;
--color-bg-section: #191b2380;
--color-bg-terminal-head: #32343d;
--color-bg-overlay: #b4c5ff1a;
--color-bg-btn: #2563eb;
--color-bg-btn-hover: #1d4ed8;
--color-text-primary: #e1e2ed;
--color-text-secondary: #c3c6d7;
--color-text-accent: #b4c5ff;
--color-text-btn: #eeefff;
--color-text-terminal-blue: #0267b8;
--color-border: #434655;
--color-border-nav: #4346554c;
--color-border-footer: #43465533;
--color-dot-red: #ffb4ab;
--color-dot-orange: #ffb596;
--color-dot-blue: #a4c9ff;
--color-gradient-start: rgba(180,197,255,1);
--color-gradient-end: rgba(255,181,150,1);
--font-body: "Geist", Helvetica;
--font-heading: "Space Grotesk", Helvetica;
--font-mono: "JetBrains Mono", Helvetica;
--font-label: "42dot Sans", Helvetica;
--radius-btn: 12px;
--radius-card: 16px;
--radius-full: 9999px;
--content-max: 1280px;
--content-narrow: 896px;
--transition-fast: 160ms ease;
}

* {
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

html, body {
margin: 0px;
height: 100%;
}

button:focus-visible {
outline: 2px solid #4a90e2;
outline-offset: 2px;
}

a {
text-decoration: none;
}

.skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 100;
padding: 8px 16px;
background: var(--color-bg-btn);
color: var(--color-text-btn);
font-family: var(--font-body);
font-size: 14px;
text-decoration: none;
transition: top 160ms ease;
}
.skip-link:focus {
top: 0;
}
267 changes: 267 additions & 0 deletions website/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="OpenHCS — The open-standard framework for high-content screening. Transform raw multi-well plate data from ImageXpress and Opera Phenix into actionable biological insights."/>
<meta name="color-scheme" content="dark"/>
<meta property="og:title" content="OpenHCS"/>
<meta property="og:description" content="The open-standard framework for high-content screening. Transform raw multi-well plate data into actionable biological insights."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://openhcs.dev"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="OpenHCS"/>
<meta name="twitter:description" content="The open-standard framework for high-content screening."/>
<title>OpenHCS</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%232563eb'/%3E%3Ctext x='50' y='65' font-family='system-ui,sans-serif' font-size='40' font-weight='bold' fill='white' text-anchor='middle'%3EOH%3C/text%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;600&family=Space+Grotesk:wght@300;400;700&family=42dot+Sans:wght@400&family=JetBrains+Mono:wght@400&display=swap">
<link rel="stylesheet" href="globals.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<div class="html-body">
<header class="top-navigation-bar">
<div class="container-20">
<div class="div-2">
<a href="#" class="text-5" aria-label="OpenHCS home">OpenHCS</a>
</div>
<nav class="container-21" aria-label="Primary">
<input type="checkbox" id="nav-toggle" class="nav-toggle" aria-hidden="true">
<label for="nav-toggle" class="hamburger" aria-label="Toggle navigation menu" tabindex="0">
<span></span>
<span></span>
<span></span>
</label>
<div class="nav-links">
<div class="div-2">
<a href="#platform" class="text-6">Platform</a>
</div>
<div class="link-margin">
<a href="#features" class="text-wrapper-2">Features</a>
</div>
<div class="link-margin">
<a href="https://openhcs.readthedocs.io/en/latest/" class="text-wrapper-2" target="_blank" rel="noopener">Docs</a>
</div>
</div>
</nav>
</div>
</header>
<main id="main-content" class="main">
<section class="hero-section" aria-labelledby="hero-title">
<div class="overlay-blur" aria-hidden="true"></div>
<div class="div">
<h1 id="hero-title" class="text-wrapper-3">OpenHCS</h1>
</div>
<div class="container">
<p class="text">The open-standard framework for high-content screening. Transform raw multi-well plate<br/>data from ImageXpress and Opera Phenix into actionable biological insights.</p>
</div>
<div class="container-2">
<button class="button" type="button" aria-label="Get Started">
<span class="text-wrapper">Get Started</span>
</button>
<a class="div-wrapper" href="https://openhcs.readthedocs.io/en/latest/" target="_blank" rel="noopener" aria-label="View Docs">
<span class="text-2">View Docs</span>
</a>
</div>
</section>
<section class="section-capabilities" id="platform" aria-labelledby="platform-title">
<div class="container-3">
<div class="container-4">
<div class="div-wrapper-2">
<h2 id="platform-title" class="unified-bioimaging">Unified Bioimaging<br/>Workflow</h2>
</div>
<div class="div-wrapper-2">
<p class="p">OpenHCS is a bioimage analysis platform for high-content screening datasets. It provides unified access to Python image processing libraries with automatic GPU acceleration and memory management for large-scale microscopy data analysis</p>
</div>
<div class="container-5">
<div class="container-6">
<article class="div-2">
<div class="div-wrapper-2">
<h3 class="text-3">Visual Pipeline Editor</h3>
</div>
<div class="div-wrapper-2">
<p class="text-wrapper-2">Construct complex analysis pipelines with a simple no-code interface.</p>
</div>
</article>
</div>
<div class="container-6">
<article class="div-2">
<div class="div-wrapper-2">
<h3 class="text-3">570+ Analysis Functions</h3>
</div>
<div class="div-wrapper-2">
<p class="all-the-industry">All the industry standards from scikit-image analysis to full CellProfiler <br/>pipelines</p>
</div>
</article>
</div>
</div>
</div>
<div class="container-7">
<div class="gradient-blur" aria-hidden="true"></div>
<img class="background-border" src="https://placehold.co/600x400/0c0e16/b4c5ff?text=Bioimaging+Workflow&font=inter" alt="Bioimaging workflow visualization" loading="lazy">
</div>
</div>
</section>
<section class="section-feature-demo" id="features" aria-labelledby="features-title">
<div class="div">
<h2 id="features-title" class="text-wrapper-3">Complete Analysis Toolkit In One App</h2>
</div>
<div class="container-8">
<article class="image-viewer">
<div class="horizontal-border">
<div class="div-wrapper-2">
<h3 class="text-wrapper-4">High-Resolution Image Viewer</h3>
</div>
<div class="div-wrapper-2">
<p class="text-wrapper-5">Handle multi-terabyte datasets with multi-level tiling and real-time panning.</p>
</div>
</div>
<img class="background" src="https://placehold.co/800x429/0c0e16/b4c5ff?text=Image+Viewer&font=inter" alt="High-resolution image viewer interface" loading="lazy">
</article>
<article class="real-time">
<div class="horizontal-border">
<div class="div-wrapper-2">
<h3 class="text-wrapper-4">Real-time Pipelines</h3>
</div>
<div class="div-wrapper-2">
<p class="visualize-every-step">Visualize every step of your image<br/>transformation pipeline as it happens.</p>
</div>
</div>
<div class="container-wrapper">
<img class="container-9" src="https://placehold.co/800x360/0c0e16/b4c5ff?text=Real-time+Pipelines&font=inter" alt="Real-time pipeline visualization" loading="lazy">
</div>
</article>
<article class="history-slider">
<div class="container-10">
<div class="div-2">
<div class="div-wrapper-2">
<h3 class="text-4">Analysis History Slider</h3>
</div>
<div class="div-wrapper-2">
<p class="text-wrapper-2">Compare results across different pipeline versions and time points for fast iteration and troubleshooting.</p>
</div>
</div>
</div>
<img class="background-2" src="https://placehold.co/1200x403/0c0e16/b4c5ff?text=History+Slider&font=inter" alt="Analysis history comparison view" loading="lazy">
</article>
</div>
</section>
<section class="professional" id="installation" aria-labelledby="installation-title">
<div class="container-11">
<div class="div">
<h2 id="installation-title" class="text-wrapper-3">Installation</h2>
</div>
<div class="div">
<p class="text-wrapper-6">Get started in seconds with pip</p>
</div>
</div>
<div class="overlay-shadow" role="region" aria-label="Installation terminal">
<div class="terminal-header">
<div class="container-12" aria-hidden="true">
<div class="terminal-dot"></div>
<div class="terminal-dot"></div>
<div class="terminal-dot"></div>
</div>
<div class="div-2">
<div class="text-wrapper-7">Python 3.11</div>
</div>
</div>
<div class="terminal-body">
<div class="container-6">
<div class="container-13"><div class="text-wrapper-8">1</div></div>
<div class="container-14"><p class="text-wrapper-9"># Basic installation with GUI, visualizers and GPU support</p></div>
</div>
<div class="container-6">
<div class="container-13"><div class="text-wrapper-8">2</div></div>
<div class="container-14">
<pre><p class="pip-install-openhcs"><span class="span">pip</span> <span class="text-wrapper-10">install openhcs[gui,viz,gpu]</span></p></pre>
</div>
</div>
<div class="container-6">
<div class="container-13"><div class="text-wrapper-8">3</div></div>
</div>
<div class="container-6">
<div class="container-13"><div class="text-wrapper-8">1</div></div>
<div class="container-14"><div class="text-wrapper-9"># Launch the application</div></div>
</div>
<div class="container-6">
<div class="container-13"><div class="text-wrapper-8">2</div></div>
<div class="container-14"><div class="text-wrapper-11">openhcs</div></div>
</div>
<div class="container-6">
<div class="container-13"><div class="text-wrapper-8">3</div></div>
</div>
</div>
</div>
<div class="container-15">
<section class="requirements" aria-labelledby="requirements-title">
<div class="heading">
<h3 id="requirements-title" class="text-wrapper-12">Requirements</h3>
</div>
<div class="python-or-higher-wrapper">
<p class="text-wrapper-13">Python 3.8 or higher<br/>Optional: CUDA-compatible GPU for acceleration<br/>Supported OS: Windows, macOS, Linux</p>
</div>
</section>
<section class="requirements-2" aria-labelledby="quick-start-title">
<div class="heading">
<h3 id="quick-start-title" class="text-wrapper-12">Quick Start</h3>
</div>
<div class="install-openhcs-wrapper">
<p class="text-wrapper-13">Install OpenHCS using pip (above)<br/>Launch the GUI: openhcs<br/>Load your microscopy images and start building pipelines</p>
</div>
</section>
</div>
</section>
<section class="get-in-touch-section" aria-labelledby="contact-title">
<div class="div">
<h2 id="contact-title" class="text-wrapper-3">Get in Touch</h2>
</div>
<div class="container-16">
<p class="text-wrapper-6">For technical inquiries, academic licensing, or collaboration requests, please use the channels below.</p>
</div>
<address class="overlay-border">
<div class="link-wrapper">
<a class="link" href="mailto:tristan.simas@mail.mcgill.ca" aria-label="Send email to OpenHCS">
<span class="text-wrapper-14">tristan.simas@mail.mcgill.ca</span>
</a>
</div>
<div class="vertical-divider" aria-hidden="true"></div>
<div class="link-wrapper">
<a class="link" href="https://github.com/OpenHCSDev/openhcs" aria-label="Visit github.com/OpenHCSDev/openhcs">
<span class="text-wrapper-14">github.com/OpenHCSDev/openhcs</span>
</a>
</div>
</address>
</section>
</main>
<footer class="footer">
<div class="container-17">
<div class="container-18">
<div class="div-wrapper-2">
<div class="text-wrapper-15">OpenHCS</div>
</div>
<div class="div-wrapper-2">
<div class="text-wrapper-16">MIT License</div>
</div>
</div>
<nav class="container-19" aria-label="Footer resources">
<div class="div-wrapper-2">
<div class="text-wrapper-17">Resources</div>
</div>
<div class="list">
<div class="div-wrapper-2"><a href="https://openhcs.readthedocs.io/en/latest/" class="text-wrapper-5" target="_blank" rel="noopener">Documentation</a></div>
<div class="div-wrapper-2"><a href="https://github.com/OpenHCSDev/openhcs" class="text-wrapper-5">GitHub Repository</a></div>
<div class="div-wrapper-2"><a href="https://openhcs.readthedocs.io/en/latest/api/index.html" class="text-wrapper-5" target="_blank" rel="noopener">API Reference</a></div>
</div>
</nav>
</div>
</footer>
</div>
</body>
</html>
Loading
Loading