mirror of
https://github.com/Dvorinka/Containr.git
synced 2026-10-28 07:41:27 +00:00
feat(site): drop live demo, add Railway-style canvas preview
Remove all links to the deleted containr-app deployment and replace the static hero screenshot with a CSS/HTML product mockup: a project canvas with five icon-branded service nodes, connected edges (one animated deploying edge), env/zoom/minimap pills, status dots, domains, and image tags. Mobile gets a two-column layout with its own edge paths. Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
1 parent
e825eb0d7c
commit
894192bf9b
3 files changed
+247
-16
No files matched your search
+90
-11
@@ -34,7 +34,7 @@
|
|||||||
<a class="gh-link" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener" aria-label="Containr on GitHub">
|
<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>
|
<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>
|
||||||
<a class="btn btn-primary" href="https://containr-app.vercel.app/projects">Live demo</a>
|
<a class="btn btn-primary" href="#install">Get started</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -48,16 +48,97 @@
|
|||||||
<h1>Deploy containers on <em>your own cloud</em></h1>
|
<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>
|
<p class="sub">Containr turns a Docker host into a full deployment platform. Git builds, managed databases, previews, failover.</p>
|
||||||
<div class="hero-cta">
|
<div class="hero-cta">
|
||||||
<a class="btn btn-primary" href="https://containr-app.vercel.app/projects">
|
<a class="btn btn-primary" href="#install">
|
||||||
Explore the live demo
|
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>
|
<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>
|
||||||
<a class="btn btn-ghost" href="#install">Get started</a>
|
<a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">View on GitHub</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="shot-frame reveal">
|
<div class="shot-frame reveal">
|
||||||
<div class="shot-bar"><span class="addr">containr-app.vercel.app/projects/demo-project-core</span></div>
|
<div class="shot-bar"><span class="addr">containr › core-platform › canvas</span></div>
|
||||||
<img src="screenshots/canvas.png" alt="Containr fullscreen project canvas with connected services" fetchpriority="high">
|
<div class="cv" aria-label="Containr project canvas preview">
|
||||||
|
<div class="cv-top">
|
||||||
|
<span class="cv-back">
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
|
||||||
|
Projects
|
||||||
|
</span>
|
||||||
|
<b>Core Platform</b>
|
||||||
|
<span class="cv-meta">5 services · 4 running</span>
|
||||||
|
<span class="cv-tabs">
|
||||||
|
<i class="on">Canvas</i><i>Observability</i><i>Logs</i><i>Settings</i>
|
||||||
|
</span>
|
||||||
|
<span class="cv-active">● ACTIVE</span>
|
||||||
|
</div>
|
||||||
|
<div class="cv-stage">
|
||||||
|
<svg class="cv-edges" viewBox="0 0 1000 360" preserveAspectRatio="none" aria-hidden="true">
|
||||||
|
<path d="M 222 101 C 287 101 287 177 358 177" />
|
||||||
|
<path class="live" d="M 222 238 C 287 238 287 177 358 177" />
|
||||||
|
<path d="M 536 168 C 618 168 618 83 706 83" />
|
||||||
|
<path d="M 536 195 C 618 195 618 216 706 216" />
|
||||||
|
</svg>
|
||||||
|
<svg class="cv-edges-m" viewBox="0 0 1000 360" preserveAspectRatio="none" aria-hidden="true">
|
||||||
|
<path d="M 468 105 C 494 105 494 185 520 185" />
|
||||||
|
<path class="live" d="M 468 278 C 494 278 494 185 520 185" />
|
||||||
|
<path d="M 949 62 C 985 62 985 155 949 155" />
|
||||||
|
<path d="M 949 300 C 985 300 985 215 949 215" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="cv-pill env"><i></i>production<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></div>
|
||||||
|
|
||||||
|
<div class="cv-node cv-n1">
|
||||||
|
<div class="cv-row">
|
||||||
|
<span class="cv-ic" style="background:rgba(97,218,251,.14);color:#61dafb"><img src="https://cdn.simpleicons.org/react/61dafb" alt="" onerror="this.replaceWith('R')"></span>
|
||||||
|
<div><h4>Web Frontend</h4><p>web</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg><span>web.containr.local</span></div>
|
||||||
|
<div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>ghcr.io/web:v42</code></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cv-node cv-n2">
|
||||||
|
<div class="cv-row">
|
||||||
|
<span class="cv-ic" style="background:rgba(180,227,74,.14);color:var(--accent)"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 17 6-6-6-6M12 19h8"/></svg></span>
|
||||||
|
<div><h4>Queue Worker</h4><p>worker</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 9 6 6M15 9l-6 6"/></svg><span>queue-worker</span></div>
|
||||||
|
<div class="cv-foot"><span class="cv-st dep"></span><em style="color:#f2c94c">deploying</em><code>worker:edge</code></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cv-node sel cv-n3">
|
||||||
|
<div class="cv-row">
|
||||||
|
<span class="cv-ic" style="background:rgba(0,173,216,.14);color:#00add8"><img src="https://cdn.simpleicons.org/go/00add8" alt="" onerror="this.replaceWith('G')"></span>
|
||||||
|
<div><h4>API Gateway</h4><p>web · 2 replicas</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg><span>api.containr.local</span></div>
|
||||||
|
<div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>api:v2.4.1</code></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cv-node cv-n4">
|
||||||
|
<div class="cv-row">
|
||||||
|
<span class="cv-ic" style="background:rgba(65,105,225,.16);color:#7ab8ff"><img src="https://cdn.simpleicons.org/postgresql/7ab8ff" alt="" onerror="this.replaceWith('P')"></span>
|
||||||
|
<div><h4>Postgres</h4><p>database</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="cv-addr"><svg width="10" height="10" 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"/></svg><span>postgres:5432</span></div>
|
||||||
|
<div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>postgres:16</code></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cv-node cv-n5">
|
||||||
|
<div class="cv-row">
|
||||||
|
<span class="cv-ic" style="background:rgba(255,68,68,.13);color:#ff6b6b"><img src="https://cdn.simpleicons.org/redis/ff6b6b" alt="" onerror="this.replaceWith('R')"></span>
|
||||||
|
<div><h4>Redis Cache</h4><p>database</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="cv-addr"><svg width="10" height="10" 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"/></svg><span>redis:6379</span></div>
|
||||||
|
<div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>dragonfly:1</code></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cv-pill zoom">
|
||||||
|
<span>−</span><b>100%</b><span>+</span><i></i>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 15-4.5 4.5M9 15l6-6M8 4l.9 2.6L11.5 8 9 9.5 6.4 8 8 5.4zM19 13l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7zM13 3l.6 1.7L15.3 5l-1.7.6L13 7.3 12.4 5.6 10.7 5l1.7-.6z"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="cv-minimap"><i style="left:6%;top:14%"></i><i style="left:6%;top:52%"></i><i style="left:38%;top:35%"></i><i style="left:72%;top:9%"></i><i style="left:72%;top:46%"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -67,7 +148,7 @@
|
|||||||
<div class="install-inner reveal">
|
<div class="install-inner reveal">
|
||||||
<div class="install-copy">
|
<div class="install-copy">
|
||||||
<h2>One command, running stack</h2>
|
<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 →</a></p>
|
<p>Requires Docker and openssl. Installs into ./containr, never overwrites your .env.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="cmd">
|
<div class="cmd">
|
||||||
<code id="install-cmd">curl -fsSL https://raw.githubusercontent.com/Dvorinka/Containr/main/install.sh | bash</code>
|
<code id="install-cmd">curl -fsSL https://raw.githubusercontent.com/Dvorinka/Containr/main/install.sh | bash</code>
|
||||||
@@ -154,7 +235,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<img id="gallery-img" src="screenshots/dashboard.png" alt="Containr dashboard" loading="lazy">
|
<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" 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 →</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -163,7 +243,7 @@
|
|||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="sec-head reveal">
|
<div class="sec-head reveal">
|
||||||
<h2>A catalog worth browsing</h2>
|
<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>
|
<p>Thirty official templates plus community presets. <a href="templates.html" style="color: var(--accent);">Browse the full catalog</a> or publish your own.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="marquee reveal" aria-label="Template catalog">
|
<div class="marquee reveal" aria-label="Template catalog">
|
||||||
<div class="marquee-track" id="marquee-track">
|
<div class="marquee-track" id="marquee-track">
|
||||||
@@ -232,7 +312,7 @@
|
|||||||
Get started
|
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>
|
<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>
|
||||||
<a class="btn btn-ghost" href="https://containr-app.vercel.app/projects">Live demo</a>
|
<a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">Star on GitHub</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -241,7 +321,6 @@
|
|||||||
<div class="wrap foot">
|
<div class="wrap foot">
|
||||||
<span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
|
<span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
|
||||||
<nav>
|
<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" 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/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/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a>
|
||||||
|
|||||||
+156
@@ -464,3 +464,159 @@
|
|||||||
.cell, .cell.wide { grid-column: span 1; }
|
.cell, .cell.wide { grid-column: span 1; }
|
||||||
.install-inner { padding: 20px; }
|
.install-inner { padding: 20px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------- hero canvas mockup ---------- */
|
||||||
|
.cv { background: #0a0b0d; }
|
||||||
|
.cv-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 9px 16px;
|
||||||
|
border-bottom: 1px solid var(--border-subtle);
|
||||||
|
background: #101216;
|
||||||
|
}
|
||||||
|
.cv-back { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-tertiary); }
|
||||||
|
.cv-top b { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
|
||||||
|
.cv-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-tertiary); }
|
||||||
|
.cv-tabs {
|
||||||
|
margin-left: auto;
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 2px;
|
||||||
|
background: var(--bg-void);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
.cv-tabs i { font-style: normal; font-size: 10.5px; color: var(--text-tertiary); padding: 4px 11px; border-radius: 999px; }
|
||||||
|
.cv-tabs i.on { color: var(--text-primary); background: var(--surface-muted); }
|
||||||
|
.cv-active { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: #5ee6a0; }
|
||||||
|
|
||||||
|
.cv-stage {
|
||||||
|
position: relative;
|
||||||
|
height: 380px;
|
||||||
|
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
|
||||||
|
background-size: 22px 22px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.cv-edges, .cv-edges-m { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||||
|
.cv-edges-m { display: none; }
|
||||||
|
.cv-edges path, .cv-edges-m path {
|
||||||
|
fill: none;
|
||||||
|
stroke: rgba(180, 227, 74, 0.42);
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: round;
|
||||||
|
filter: drop-shadow(0 0 4px rgba(180, 227, 74, 0.25));
|
||||||
|
}
|
||||||
|
.cv-edges .live, .cv-edges-m .live { stroke-dasharray: 7 9; animation: cv-dash 1.1s linear infinite; }
|
||||||
|
@keyframes cv-dash { to { stroke-dashoffset: -16; } }
|
||||||
|
|
||||||
|
.cv-node {
|
||||||
|
position: absolute;
|
||||||
|
width: 200px;
|
||||||
|
background: var(--surface-card);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 12px 12px 10px;
|
||||||
|
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
.cv-node:hover { border-color: var(--border-default); }
|
||||||
|
.cv-node.sel {
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 0 1px var(--accent), 0 16px 44px rgba(0, 0, 0, 0.55);
|
||||||
|
}
|
||||||
|
.cv-n1 { left: 3.2%; top: 12%; }
|
||||||
|
.cv-n2 { left: 3.2%; top: 50%; }
|
||||||
|
.cv-n3 { left: 35.2%; top: 33%; }
|
||||||
|
.cv-n4 { left: 70%; top: 7%; }
|
||||||
|
.cv-n5 { left: 70%; top: 44%; }
|
||||||
|
.cv-row { display: flex; align-items: center; gap: 10px; }
|
||||||
|
.cv-ic {
|
||||||
|
width: 34px; height: 34px;
|
||||||
|
border-radius: 9px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-weight: 800; font-size: 14px;
|
||||||
|
}
|
||||||
|
.cv-ic img { width: 18px; height: 18px; }
|
||||||
|
.cv-node h4 { font-size: 12.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
|
||||||
|
.cv-row p { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
|
||||||
|
.cv-addr {
|
||||||
|
display: flex; align-items: center; gap: 6px;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 5px 8px;
|
||||||
|
background: rgba(26, 29, 34, 0.55);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: 7px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
.cv-addr span {
|
||||||
|
font-family: var(--mono); font-size: 9.5px; color: var(--text-secondary);
|
||||||
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||||
|
}
|
||||||
|
.cv-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
|
||||||
|
.cv-st { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
||||||
|
.cv-st.run { background: #5ee6a0; }
|
||||||
|
.cv-st.dep { background: #f2c94c; animation: cv-pulse 1.4s ease-in-out infinite; }
|
||||||
|
@keyframes cv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
|
||||||
|
.cv-foot em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5ee6a0; }
|
||||||
|
.cv-foot code {
|
||||||
|
margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--text-tertiary);
|
||||||
|
max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-pill {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-flex; align-items: center; gap: 7px;
|
||||||
|
background: rgba(19, 21, 24, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border: 1px solid var(--border-default);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-family: var(--mono); font-size: 10px; color: var(--text-secondary);
|
||||||
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
.cv-pill.env { left: 14px; top: 14px; }
|
||||||
|
.cv-pill.env i { width: 6px; height: 6px; border-radius: 50%; background: #5ee6a0; }
|
||||||
|
.cv-pill.env svg { color: var(--text-tertiary); }
|
||||||
|
.cv-pill.zoom { left: 14px; bottom: 14px; padding: 5px 11px; gap: 9px; }
|
||||||
|
.cv-pill.zoom b { font-weight: 500; font-size: 10px; }
|
||||||
|
.cv-pill.zoom i { width: 1px; height: 12px; background: var(--border-subtle); }
|
||||||
|
.cv-pill.zoom svg { color: var(--text-tertiary); }
|
||||||
|
.cv-chip {
|
||||||
|
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
|
||||||
|
font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
|
||||||
|
color: var(--accent); background: var(--accent-dim);
|
||||||
|
border: 1px solid rgba(180, 227, 74, 0.3);
|
||||||
|
border-radius: 999px; padding: 4px 10px;
|
||||||
|
}
|
||||||
|
.cv-minimap {
|
||||||
|
position: absolute; right: 14px; bottom: 14px;
|
||||||
|
width: 112px; height: 68px;
|
||||||
|
border: 1px solid var(--border-default); border-radius: 8px;
|
||||||
|
background: #0e1013; overflow: hidden;
|
||||||
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
.cv-minimap i { position: absolute; width: 15px; height: 10px; border-radius: 2px; background: rgba(180, 227, 74, 0.45); }
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.cv-stage { height: 360px; }
|
||||||
|
.cv-edges { display: none; }
|
||||||
|
.cv-edges-m { display: block; }
|
||||||
|
.cv-node { width: 150px; padding: 9px 9px 8px; border-radius: 11px; }
|
||||||
|
.cv-node h4 { font-size: 11px; }
|
||||||
|
.cv-ic { width: 27px; height: 27px; border-radius: 7px; }
|
||||||
|
.cv-ic img { width: 14px; height: 14px; }
|
||||||
|
.cv-addr span { font-size: 8.5px; }
|
||||||
|
.cv-foot code { display: none; }
|
||||||
|
.cv-n1 { left: 4%; top: 14%; }
|
||||||
|
.cv-n2 { left: 4%; top: 62%; }
|
||||||
|
.cv-n3 { left: 52%; top: 36%; }
|
||||||
|
.cv-n4 { left: 52%; top: 2%; }
|
||||||
|
.cv-n5 { left: 52%; top: 68%; }
|
||||||
|
.cv-back, .cv-meta, .cv-minimap, .cv-pill.zoom { display: none; }
|
||||||
|
.cv-tabs i:not(.on) { display: none; }
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.cv-edges .live, .cv-st.dep { animation: none; }
|
||||||
|
}
|
||||||
+1
-5
@@ -317,7 +317,7 @@
|
|||||||
<a class="gh-link" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener" aria-label="Containr on GitHub">
|
<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>
|
<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>
|
||||||
<a class="btn btn-primary" href="https://containr-app.vercel.app/projects">Live demo</a>
|
<a class="btn btn-primary" href="index.html#install">Get started</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -370,7 +370,6 @@
|
|||||||
<svg width="13" height="13" 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>
|
<svg width="13" height="13" 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>
|
||||||
Copy template JSON
|
Copy template JSON
|
||||||
</button>
|
</button>
|
||||||
<a class="btn btn-ghost" id="m-open" href="https://containr-app.vercel.app/templates" target="_blank" rel="noopener">Open in demo app</a>
|
|
||||||
<a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Deploy guide</a>
|
<a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Deploy guide</a>
|
||||||
</div>
|
</div>
|
||||||
<p class="hint">In your instance: <code>Templates → New template → Upload .json</code> (or paste the copied JSON). Deploy it to any project from there.</p>
|
<p class="hint">In your instance: <code>Templates → New template → Upload .json</code> (or paste the copied JSON). Deploy it to any project from there.</p>
|
||||||
@@ -381,7 +380,6 @@
|
|||||||
<div class="wrap foot">
|
<div class="wrap foot">
|
||||||
<span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
|
<span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
|
||||||
<nav>
|
<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" 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/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/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a>
|
||||||
@@ -395,7 +393,6 @@
|
|||||||
// Point it at an instance once with ?api=https://host (persisted in
|
// Point it at an instance once with ?api=https://host (persisted in
|
||||||
// localStorage); with no instance configured the bundled official
|
// localStorage); with no instance configured the bundled official
|
||||||
// snapshot renders immediately.
|
// snapshot renders immediately.
|
||||||
const APP_BASE = 'https://containr-app.vercel.app';
|
|
||||||
const params = new URLSearchParams(location.search);
|
const params = new URLSearchParams(location.search);
|
||||||
const paramApi = params.get('api');
|
const paramApi = params.get('api');
|
||||||
if (paramApi) localStorage.setItem('containr-api', paramApi.replace(/\/$/, ''));
|
if (paramApi) localStorage.setItem('containr-api', paramApi.replace(/\/$/, ''));
|
||||||
@@ -541,7 +538,6 @@
|
|||||||
document.getElementById('m-badges').innerHTML =
|
document.getElementById('m-badges').innerHTML =
|
||||||
badge(t) + `<span class="badge" style="background:var(--surface-muted);color:var(--text-tertiary)">${esc(t.category || 'custom')}</span>`;
|
badge(t) + `<span class="badge" style="background:var(--surface-muted);color:var(--text-tertiary)">${esc(t.category || 'custom')}</span>`;
|
||||||
document.getElementById('m-desc').textContent = t.description || 'No description.';
|
document.getElementById('m-desc').textContent = t.description || 'No description.';
|
||||||
document.getElementById('m-open').href = `${APP_BASE}/templates?template=${encodeURIComponent(t.id)}`;
|
|
||||||
|
|
||||||
const c = cfg(t);
|
const c = cfg(t);
|
||||||
const meta = [];
|
const meta = [];
|
||||||
|
|||||||
Reference in new issue
Block a user