Containr/site/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Containr - Self-hosted platform for containerized services</title>
<meta name="description" content="Containr turns any Docker host into a full deployment platform. Visual project canvases, git-push builds, managed databases, preview environments, and HA failover on your own hardware.">
<meta property="og:title" content="Containr">
<meta property="og:description" content="Railway-style project canvases on your own hardware. Open source, MIT licensed.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://containr-lyart.vercel.app/">
<meta property="og:image" content="https://containr-lyart.vercel.app/screenshots/canvas.png">
<link rel="canonical" href="https://containr-lyart.vercel.app/">
<meta name="theme-color" content="#0c0d0f">
<link rel="icon" type="image/svg+xml" href="containr.svg">
<script>document.documentElement.classList.add('js');</script>
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
  <div class="wrap nav-inner">
    <a href="#" class="brand">
      <img src="containr.svg" alt="Containr logo">
      contain<em>r</em>
    </a>
    <div class="nav-links">
      <a href="#features">Features</a>
      <a href="#product">Product</a>
      <a href="templates.html">Templates</a>
      <a href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Docs</a>
    </div>
    <div class="nav-right">
      <a class="gh-link" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener" aria-label="Containr on GitHub">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
      </a>
      <a class="btn btn-primary" href="https://containr-app.vercel.app/projects">Live demo</a>
    </div>
  </div>
</nav>

<header class="hero">
  <div class="wrap">
    <span class="pill">
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><rect x="3" y="7" width="18" height="12" rx="2"/><path d="M8 7v12M13 7v12M18 7v12M6 22h12"/></svg>
      Self-hosted PaaS · MIT license
    </span>
    <h1>Deploy containers on <em>your own cloud</em></h1>
    <p class="sub">Containr turns a Docker host into a full deployment platform. Git builds, managed databases, previews, failover.</p>
    <div class="hero-cta">
      <a class="btn btn-primary" href="https://containr-app.vercel.app/projects">
        Explore the live demo
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </a>
      <a class="btn btn-ghost" href="#install">Get started</a>
    </div>

    <div class="shot-frame reveal">
      <div class="shot-bar"><span class="addr">containr-app.vercel.app/projects/demo-project-core</span></div>
      <img src="screenshots/canvas.png" alt="Containr fullscreen project canvas with connected services" fetchpriority="high">
    </div>
  </div>
</header>

<div class="install" id="install">
  <div class="wrap">
    <div class="install-inner reveal">
      <div class="install-copy">
        <h2>One command, running stack</h2>
        <p>Requires Docker and openssl. Installs into ./containr, never overwrites your .env. <a href="https://containr-app.vercel.app/projects" style="color: var(--accent);">Or explore the hosted demo first &rarr;</a></p>
      </div>
      <div class="cmd">
        <code id="install-cmd">curl -fsSL https://raw.githubusercontent.com/Dvorinka/Containr/main/install.sh | bash</code>
        <button class="copy-btn" id="copy-btn" aria-label="Copy install command">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
        </button>
      </div>
    </div>
  </div>
</div>

<section id="features">
  <div class="wrap">
    <div class="sec-head reveal">
      <h2>A control plane, not a pile of YAML</h2>
      <p>Everything a deployment platform needs, running on hardware you already own. One install, one dashboard.</p>
    </div>
    <div class="bento">
      <div class="cell wide reveal">
        <div>
          <div class="icon">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><path d="M10 6.5h5.5a2 2 0 0 1 2 2V14M6.5 10v5.5a2 2 0 0 0 2 2H14"/></svg>
          </div>
          <h3>Visual project canvas</h3>
          <p>Services appear as nodes on a Railway-style canvas. Drag, group, and wire them together; connections and shared variables are inferred automatically. Start, stop, restart, or roll back with a right-click.</p>
        </div>
        <div class="cell-media"><img src="screenshots/service-detail.png" alt="Service view with metrics, logs, and configuration tabs" loading="lazy"></div>
      </div>
      <div class="cell tinted reveal">
        <div class="icon">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg>
        </div>
        <h3>Managed databases</h3>
        <p>Provision engines from the dashboard, with backups and restore built in.</p>
        <div class="chips">
          <span>PostgreSQL</span><span>MySQL</span><span>MariaDB</span><span>MongoDB</span><span>Redis</span><span>Dragonfly</span><span>ClickHouse</span>
        </div>
      </div>
      <div class="cell reveal">
        <div class="icon">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M8 7.5 10.5 16M16 7.5 13.5 16M8.5 6h7"/></svg>
        </div>
        <h3>Private networking</h3>
        <p>Every project gets an isolated Docker network. Services reach each other by name.</p>
        <div class="snippet">web:3000 <b>&#8594;</b> ${{service.KEY}}</div>
      </div>
      <div class="cell reveal">
        <div class="icon">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v12"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="6" r="2.5"/><path d="M18 8.5a5 5 0 0 1-5 5H9"/></svg>
        </div>
        <h3>Git-push deploys</h3>
        <p>Connect GitHub, GitLab, Bitbucket, or Gitea. Builds, history, and image rollback included.</p>
      </div>
      <div class="cell reveal">
        <div class="icon">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>
        </div>
        <h3>HA and autoscaling</h3>
        <p>Failover policies, health checks, node agents, and metric-driven replica scaling.</p>
      </div>
      <div class="cell reveal">
        <div class="icon">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.4 8.6 8 10 4.6-1.4 8-5 8-10V6l-8-4Z"/><path d="m9 12 2 2 4-4"/></svg>
        </div>
        <h3>Admin and audit</h3>
        <p>Approval console, user management, audit logs, and vulnerability scans behind sign-in.</p>
      </div>
    </div>
  </div>
</section>

<section id="product">
  <div class="wrap">
    <div class="sec-head reveal">
      <h2>The whole fleet on one screen</h2>
      <p>Logs, metrics, builds, and rollbacks without leaving the dashboard. Host telemetry included.</p>
    </div>
    <div class="gallery reveal">
      <div class="shot-tabs" role="tablist" aria-label="Product screenshots">
        <button class="shot-tab on" role="tab" aria-selected="true" data-shot="dashboard" data-cap="Projects dashboard with host CPU, memory, and disk telemetry.">Dashboard</button>
        <button class="shot-tab" role="tab" aria-selected="false" data-shot="canvas" data-cap="Visual service canvas with auto-inferred connections.">Canvas</button>
        <button class="shot-tab" role="tab" aria-selected="false" data-shot="service-detail" data-cap="Service detail with metrics, logs, and config tabs.">Service detail</button>
        <button class="shot-tab" role="tab" aria-selected="false" data-shot="databases" data-cap="Managed databases with backup and restore.">Databases</button>
      </div>
      <img id="gallery-img" src="screenshots/dashboard.png" alt="Containr dashboard" loading="lazy">
      <p class="cap" id="gallery-cap">Projects dashboard with host CPU, memory, and disk telemetry.</p>
      <p class="cap"><a href="https://containr-app.vercel.app/projects/demo-project-core" style="color: var(--accent);">Try the canvas live &rarr;</a></p>
    </div>
  </div>
</section>

<section id="templates">
  <div class="wrap">
    <div class="sec-head reveal">
      <h2>A catalog worth browsing</h2>
      <p>Thirty official templates plus community presets. <a href="templates.html" style="color: var(--accent);">Browse the full catalog</a>, <a href="https://containr-app.vercel.app/templates" style="color: var(--accent);">open it in the app</a>, or publish your own.</p>
    </div>
    <div class="marquee reveal" aria-label="Template catalog">
      <div class="marquee-track" id="marquee-track">
        <span class="tpl"><img src="https://cdn.simpleicons.org/n8n/8b919e" alt="" loading="lazy" onerror="this.remove()">n8n</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/nextcloud/8b919e" alt="" loading="lazy" onerror="this.remove()">Nextcloud</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/immich/8b919e" alt="" loading="lazy" onerror="this.remove()">Immich</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/vaultwarden/8b919e" alt="" loading="lazy" onerror="this.remove()">Vaultwarden</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/grafana/8b919e" alt="" loading="lazy" onerror="this.remove()">Grafana</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/supabase/8b919e" alt="" loading="lazy" onerror="this.remove()">Supabase</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/gitea/8b919e" alt="" loading="lazy" onerror="this.remove()">Gitea</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/uptimekuma/8b919e" alt="" loading="lazy" onerror="this.remove()">Uptime Kuma</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/pihole/8b919e" alt="" loading="lazy" onerror="this.remove()">Pi-hole</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/jellyfin/8b919e" alt="" loading="lazy" onerror="this.remove()">Jellyfin</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/meilisearch/8b919e" alt="" loading="lazy" onerror="this.remove()">Meilisearch</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/mastodon/8b919e" alt="" loading="lazy" onerror="this.remove()">Mastodon</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/homeassistant/8b919e" alt="" loading="lazy" onerror="this.remove()">Home Assistant</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/plausibleanalytics/8b919e" alt="" loading="lazy" onerror="this.remove()">Plausible</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/minio/8b919e" alt="" loading="lazy" onerror="this.remove()">MinIO</span>
        <span class="tpl"><img src="https://cdn.simpleicons.org/appwrite/8b919e" alt="" loading="lazy" onerror="this.remove()">Appwrite</span>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="sec-head reveal">
      <h2>Open for visitors, locked for owners</h2>
      <p>The platform doubles as a public showcase. Approved projects are browsable anonymously; secrets never are.</p>
    </div>
    <div class="access reveal">
      <div>
        <h3>Anonymous</h3>
        <ul>
          <li>Browse approved projects</li>
          <li>Template catalog and docs</li>
          <li>HA status overview</li>
        </ul>
      </div>
      <div>
        <h3>Signed in</h3>
        <ul>
          <li>Projects, services, databases</li>
          <li>Logs, variables, builds, deploys</li>
          <li>Custom templates</li>
        </ul>
      </div>
      <div>
        <h3>Admin</h3>
        <ul>
          <li>Project approval and moderation</li>
          <li>User flags and agent tokens</li>
          <li>Platform settings</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<div class="cta">
  <div class="wrap reveal">
    <h2>Run your own cloud.</h2>
    <p>One Docker host is all it takes. Free, open source, and yours to keep.</p>
    <div class="hero-cta">
      <a class="btn btn-primary" href="#install">
        Get started
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </a>
      <a class="btn btn-ghost" href="https://containr-app.vercel.app/projects">Live demo</a>
    </div>
  </div>
</div>

<footer>
  <div class="wrap foot">
    <span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
    <nav>
      <a href="https://containr-app.vercel.app/projects">Live demo</a>
      <a href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">GitHub</a>
      <a href="https://github.com/Dvorinka/Containr/tree/main/docs" target="_blank" rel="noopener">Docs</a>
      <a href="https://github.com/Dvorinka/Containr/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a>
      <a href="https://github.com/Dvorinka/Containr/blob/main/SECURITY.md" target="_blank" rel="noopener">Security</a>
    </nav>
  </div>
</footer>

<script>
  // Copy install command
  document.getElementById('copy-btn').addEventListener('click', async (e) => {
    const cmd = document.getElementById('install-cmd').textContent;
    try {
      await navigator.clipboard.writeText(cmd);
    } catch {
      const r = document.createRange();
      r.selectNodeContents(document.getElementById('install-cmd'));
      const s = getSelection();
      s.removeAllRanges();
      s.addRange(r);
    }
    const btn = e.currentTarget;
    btn.style.color = 'var(--accent)';
    setTimeout(() => (btn.style.color = ''), 1200);
  });

  // Screenshot gallery tabs
  const img = document.getElementById('gallery-img');
  const cap = document.getElementById('gallery-cap');
  document.querySelectorAll('.shot-tab').forEach((tab) => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('.shot-tab').forEach((t) => {
        t.classList.remove('on');
        t.setAttribute('aria-selected', 'false');
      });
      tab.classList.add('on');
      tab.setAttribute('aria-selected', 'true');
      img.src = 'screenshots/' + tab.dataset.shot + '.png';
      img.alt = 'Containr ' + tab.textContent.trim() + ' screenshot';
      cap.textContent = tab.dataset.cap;
    });
  });

  // Duplicate marquee track for seamless loop
  const track = document.getElementById('marquee-track');
  track.innerHTML += track.innerHTML;

  // Scroll reveal
  const io = new IntersectionObserver(
    (entries) => entries.forEach((en) => en.isIntersecting && en.target.classList.add('in')),
    { threshold: 0.12 }
  );
  document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
</script>
</body>
</html>