Replace the static placeholder with the OpenMLRL organization card

index.html

@@ -1,19 +1,39 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="OpenMLRL: open-source frameworks and tools for multi-LLM reinforcement learning.">
+  <title>OpenMLRL — Multi-LLM Reinforcement Learning</title>
+  <link rel="stylesheet" href="style.css">
+  <base target="_blank">
+</head>
+<body>
+  <main>
+    <header>
+      <h1>OpenMLRL</h1>
+      <h3>Multi-LLM Reinforcement Learning</h3>
+      <p>We build open-source frameworks and tools for training language models to work together. Our research explores cooperative reinforcement learning, preference learning, multi-turn interaction, and decentralized multi-agent systems.</p>
+      <p class="links"><a href="https://openmlrl.github.io/">Website</a> · <a href="https://github.com/OpenMLRL">GitHub</a> · <a href="https://openmlrl.github.io/research/">Research</a> · <a href="mailto:liu.shuo2@northeastern.edu">Contact</a></p>
+    </header>
+    <section>
+      <h2>CoMLRL</h2>
+      <p><a href="https://github.com/OpenMLRL/CoMLRL">Cooperative Multi-LLM Reinforcement Learning (CoMLRL)</a> is our library for training teams of language models with multi-agent reinforcement learning. It provides policy-gradient, actor-critic, and preference-based methods, with support for decentralized agents and centralized alternatives.</p>
+      <p class="links"><a href="https://openmlrl.github.io/CoMLRL/">Read the documentation</a> · <a href="https://github.com/OpenMLRL/CoMLRL">Explore the code</a></p>
+    </section>
+    <section>
+      <h2>Environments</h2>
+      <ul>
+        <li><strong><a href="https://github.com/OpenMLRL/LLM_Collab_Writing">Writing</a></strong> — Collaborative summarization and article writing.</li>
+        <li><strong><a href="https://github.com/OpenMLRL/LLM_Collab_Code_Generation">Coding</a></strong> — Cooperative code generation.</li>
+        <li><strong><a href="https://github.com/OpenMLRL/LLM_Collab_Travel">Travel</a></strong> — Travel planning under user constraints.</li>
+        <li><strong><a href="https://github.com/OpenMLRL/LLM_Collab_BFCL">Tool Use</a></strong> — Collaborative function calling with BFCL v4.</li>
+      </ul>
+    </section>
+    <section>
+      <h2>Get involved</h2>
+      <p>Explore our <a href="https://huggingface.co/OpenMLRL/datasets">datasets</a>, read our <a href="https://openmlrl.github.io/research/">research</a>, or contribute through <a href="https://github.com/OpenMLRL">GitHub</a>. For research inquiries, contact <a href="mailto:liu.shuo2@northeastern.edu">liu.shuo2@northeastern.edu</a>.</p>
+    </section>
+  </main>
+</body>
 </html>

style.css

@@ -1,28 +1,17 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+:root { color-scheme: light dark; --text: #263244; --muted: #596579; --link: #3262a8; --line: #e5e9ef; --background: #ffffff; }
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--background); color: var(--text); font: 15px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+main { max-width: 860px; margin: 0 auto; padding: 28px 32px; }
+h1 { margin: 0 0 2px; font-size: 32px; line-height: 1.25; letter-spacing: -0.7px; }
+h3 { margin: 0 0 16px; font-size: 17px; font-weight: 500; color: var(--muted); }
+h2 { margin: 22px 0 8px; font-size: 20px; line-height: 1.4; }
+p { margin: 9px 0; }
+a { color: var(--link); text-decoration: none; }
+a:hover { text-decoration: underline; }
+a:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
+.links { margin-top: 14px; }
+header { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
+ul { margin: 8px 0; padding-left: 22px; }
+li { margin: 4px 0; }
+@media (max-width: 520px) { main { padding: 20px 18px; } h1 { font-size: 28px; } }
+@media (prefers-color-scheme: dark) { :root { --text: #e1e6ee; --muted: #a6b0c1; --link: #99bdf4; --line: #30394a; --background: #111827; } }