Cute cherry org card

index.html

@@ -1,19 +1,98 @@
 <!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">
+<title>DRUPEs</title>
+<style>
+  :root {
+    --bg: #fff7f8; --card: #ffffff; --ink: #3a1d24; --muted: #8a5a66;
+    --cherry: #d7263d; --cherry-soft: #ffe1e6; --leaf: #3fa34d; --border: #f6cdd5;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #1a0f12; --card: #24151a; --ink: #fbe9ec; --muted: #d6a3ae;
+      --cherry: #ff5a70; --cherry-soft: #3a1a22; --leaf: #6fd27b; --border: #4a2530;
+    }
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0; padding: 20px 16px; background: var(--bg); color: var(--ink);
+    font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
+    line-height: 1.5;
+  }
+  .wrap { max-width: 720px; margin: 0 auto; }
+  .hero { text-align: center; padding: 8px 0 14px; }
+  .cherries { font-size: 44px; display: inline-block; animation: bob 3s ease-in-out infinite; }
+  @keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
+  @media (prefers-reduced-motion: reduce) { .cherries { animation: none; } }
+  h1 { margin: 4px 0 2px; font-size: 30px; letter-spacing: 0.5px; color: var(--cherry); }
+  .full { font-size: 13px; color: var(--muted); margin: 0; }
+  .tag { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px;
+         background: var(--cherry-soft); color: var(--cherry); font-size: 13px; font-weight: 600; }
+  .about { text-align: center; color: var(--muted); font-size: 14px; margin: 14px auto 18px; max-width: 520px; }
+  .about b { color: var(--ink); }
+  .card {
+    display: block; text-decoration: none; color: inherit; background: var(--card);
+    border: 1.5px solid var(--border); border-radius: 18px; padding: 16px 18px; margin-bottom: 12px;
+    transition: transform .15s ease, border-color .15s ease;
+  }
+  a.card:hover { transform: translateY(-2px); border-color: var(--cherry); }
+  .row { display: flex; align-items: center; gap: 12px; }
+  .icon { font-size: 28px; flex: none; }
+  .name { font-weight: 700; font-size: 16px; }
+  .desc { font-size: 13px; color: var(--muted); }
+  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+  .chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--cherry-soft); color: var(--cherry); }
+  .chip.green { color: var(--leaf); }
+  .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 18px 4px 8px; }
+  code {
+    display: block; overflow-x: auto; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace;
+    font-size: 13px; background: var(--cherry-soft); color: var(--ink); padding: 10px 12px; border-radius: 12px;
+  }
+  .soon { font-size: 14px; }
+  .foot { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="hero">
+    <div class="cherries" aria-hidden="true">🍒</div>
+    <h1>DRUPEs</h1>
+    <p class="full">Dense Representation &amp; Unified Parameter Encoding Systems</p>
+    <span class="tag">small models with a solid little core</span>
+  </div>
+
+  <p class="about">A <b>drupe</b> is a fruit with a hard stone in the middle, like a cherry. That's our idea of a good model: <b>small, sweet, and solid at the center</b>. We make compact models that run on your own machine.</p>
+
+  <div class="label">🌱 Our models</div>
+  <a class="card" href="https://huggingface.co/DRUPEs/CherryPit-1.0-2B-GGUF" target="_blank" rel="noopener">
+    <div class="row">
+      <div class="icon" aria-hidden="true">🍒</div>
+      <div>
+        <div class="name">CherryPit-1.0-2B-GGUF</div>
+        <div class="desc">MiniCPM5-2B with better coding. Same size, same speed.</div>
+      </div>
+    </div>
+    <div class="chips">
+      <span class="chip">LiveCodeBench +1.9</span>
+      <span class="chip">MBPP+ +3.2</span>
+      <span class="chip green">128K context</span>
+      <span class="chip green">tool calling</span>
+      <span class="chip green">Q2–Q8 GGUFs</span>
+    </div>
+  </a>
+
+  <div class="label">⚡ Try it in one line</div>
+  <div class="card">
+    <code>ollama run hf.co/DRUPEs/CherryPit-1.0-2B-GGUF:Q4_K_M</code>
+    <div class="desc" style="margin-top:8px">Also works with LM Studio and llama.cpp.</div>
+  </div>
+
+  <div class="label">🗓️ Coming up</div>
+  <div class="card soon">🔓 <b>How CherryPit was made</b> — releasing at 30,000 downloads or on October 31, 2026, whichever comes first.</div>
+
+  <p class="foot">If one of our models helps you, a ❤️ on its page means a lot to us.</p>
+</div>
+</body>
 </html>