mirror of
https://github.com/Dvorinka/Containr.git
synced 2026-10-28 07:41:27 +00:00
New logo + full auth redesign
- Replace purple isometric illustration with a flat brand mark: pink gradient tile, ribbed container glyph, ground rail — reads at 32px - Favicon now uses containr.svg instead of vite.svg - Auth: drop the split panel for a centered layout — dot-grid, ambient pink glow, logo + wordmark above a compact card, real Google mark, labeled OAuth divider 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
99761437a5
commit
04d91bd69a
4 files changed
+51
-414
No files matched your search
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en" class="dark">
|
<html lang="en" class="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/containr.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>containr</title>
|
<title>containr</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,172 +1,14 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
|
|
||||||
<!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8) -->
|
|
||||||
<defs>
|
<defs>
|
||||||
<style>
|
<linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
|
||||||
.st0 {
|
<stop offset="0" stop-color="#f4497f"/>
|
||||||
fill: #877cd6;
|
<stop offset="1" stop-color="#cf1d5b"/>
|
||||||
}
|
|
||||||
|
|
||||||
.st1 {
|
|
||||||
fill: #6e65d8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st2 {
|
|
||||||
fill: url(#linear-gradient2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.st3 {
|
|
||||||
fill: #6e63d7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st4 {
|
|
||||||
fill: #b1abf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st5 {
|
|
||||||
fill: url(#linear-gradient1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.st6 {
|
|
||||||
fill: #a39ae9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st7 {
|
|
||||||
fill: #8476d5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st8 {
|
|
||||||
fill: #aaa2eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st9 {
|
|
||||||
fill: #675bd2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st10 {
|
|
||||||
fill: #b9b4f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st11 {
|
|
||||||
fill: #5449b9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st12 {
|
|
||||||
fill: #655acd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st13 {
|
|
||||||
fill: #b6b1f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st14 {
|
|
||||||
fill: #9e93eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st15 {
|
|
||||||
fill: #a298e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st16 {
|
|
||||||
fill: #4239a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st17 {
|
|
||||||
fill: #b0a9ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st18 {
|
|
||||||
fill: #3d35a1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st19 {
|
|
||||||
fill: #8f80e4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st20 {
|
|
||||||
fill: #9186f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st21 {
|
|
||||||
fill: #5a4ec2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st22 {
|
|
||||||
fill: #423aa4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st23 {
|
|
||||||
fill: #8e81dc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st24 {
|
|
||||||
fill: url(#linear-gradient);
|
|
||||||
}
|
|
||||||
|
|
||||||
.st25 {
|
|
||||||
fill: #594ec0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st26 {
|
|
||||||
fill: #9487e7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<linearGradient id="linear-gradient" x1="945.85" y1="1577.02" x2="761.14" y2="1748.14" gradientTransform="translate(-268 -1012)" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0" stop-color="#7367dc"/>
|
|
||||||
<stop offset="1" stop-color="#4e44b1"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="linear-gradient1" x1="722.68" y1="1595.53" x2="596.26" y2="1731.01" gradientTransform="translate(-268 -1012)" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0" stop-color="#5b53c3"/>
|
|
||||||
<stop offset="1" stop-color="#392e91"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="linear-gradient2" x1="948.55" y1="1362.8" x2="635.29" y2="1790.01" gradientTransform="translate(-268 -1012)" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0" stop-color="#887ded"/>
|
|
||||||
<stop offset="1" stop-color="#342a89"/>
|
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<polygon class="st20" points="681.31 447.54 681.31 467.16 481.77 437.1 483.48 417.01 681.31 447.54"/>
|
<rect width="64" height="64" rx="15" fill="url(#bg)"/>
|
||||||
<path class="st18" d="M555.67,521.86c4.67-.95,15.46,7.01,23.68,7.48,10.63.6,19.08-6.88,26.17-5.47,5.58,1.11,5.41,7.21,2.27,10.95-11.39,13.58-43.92,11.42-55.13-1.69-3.59-4.2-2.96-10.06,3-11.27Z"/>
|
<g fill="none" stroke="#ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<circle class="st16" cx="528.3" cy="506.02" r="13.52"/>
|
<rect x="15" y="18" width="34" height="26" rx="4"/>
|
||||||
<circle class="st22" cx="632.44" cy="508.64" r="13.43"/>
|
<path d="M23 18v26M31 18v26M39 18v26"/>
|
||||||
<g>
|
<path d="M20 51h24"/>
|
||||||
<path class="st24" d="M712.92,596.88v110.09l-234.36,18.53c-1.16-49.03-1.16-98.08,0-147.15.23-.82-.31-2.2.05-3.19,21.9,1.33,43.96,3.31,65.89,5.38,7.24.68,14.5,1.49,21.8,2.18,48.86,4.63,97.74,9.75,146.62,14.16Z"/>
|
|
||||||
<g>
|
|
||||||
<path class="st3" d="M712.92,706.97v-110.09,110.09Z"/>
|
|
||||||
<path class="st4" d="M684.58,612.14c1.03,24.3,1.03,48.64,0,73.03-.26,1.25.34,2.95-.05,4.3-7.86,1.68-15.92,1.09-23.93,1.16v-81.75c4.86,1.32,21.04.41,23.98,3.27Z"/>
|
|
||||||
<path class="st17" d="M531.97,596.88v68.67c-.15.54-.33,1.07-.6,1.55-1.78,3.15-25.19-1.98-24.47-9.18v-62.13c2.91-2.93,19.92,2.34,25.07,1.09Z"/>
|
|
||||||
<path class="st13" d="M583.21,602.33c1.01,21.29,1.14,42.65.39,64.08l-1.56.27c-6.01-4.73-13.02-8.71-20.97-7.04l-1.85-1.71v-57.77c.85-.85,22.56,1.51,23.98,2.18Z"/>
|
|
||||||
<path class="st10" d="M634.44,606.69v52.32l-2.45.71c-5.32-4.68-12.12-9.52-19.58-7.78l-1.95-1.65v-45.78l23.98,2.18Z"/>
|
|
||||||
<path class="st8" d="M634.44,659.01v32.7l-23.98,1.09v-42.51c8.78-3.35,17.83,2.97,23.98,8.72Z"/>
|
|
||||||
<path class="st6" d="M572.31,694.98l-13.63.35.55-37.41c7.76-2.78,18.95,1.52,23.97,7.63v-63.22c4.08,1.92-.83,79.47,1.1,89.93-.76,4.34-8.2,2.64-11.99,2.72Z"/>
|
|
||||||
<path class="st15" d="M531.97,665.55c.59,10.18.59,20.36,0,30.52-.66,2.02-12.84.95-15.85,1.04-2.38.07-8.37,2.53-9.22.05v-39.24c5.92,5.49,17.26,8.87,25.07,7.63Z"/>
|
|
||||||
<path class="st12" d="M559.23,657.92c.05,12.34-.04,24.73,0,37.07,4.35-.07,8.74.09,13.09,0l-14.18,1.1,1.1-95.93c.06,19.24-.08,38.53,0,57.77Z"/>
|
|
||||||
<path class="st12" d="M506.9,657.92c.05,13.06-.04,26.18,0,39.24v-101.37c.06,20.69-.08,41.44,0,62.13Z"/>
|
|
||||||
<path class="st12" d="M531.97,696.07c1.19-3.63-.03-24.65,0-30.52.14-22.87-.1-45.8,0-68.67v99.19Z"/>
|
|
||||||
<path class="st3" d="M610.46,650.29c.05,14.15-.04,28.36,0,42.51v-88.29c.04,15.24-.05,30.54,0,45.78Z"/>
|
|
||||||
<path class="st3" d="M634.44,691.71c.02-10.88-.03-21.82,0-32.7.05-17.42-.03-34.9,0-52.32v85.02Z"/>
|
|
||||||
<path class="st3" d="M684.58,685.17v-73.03c.86.84,1.32,1.19,1.15,2.61-2.14,21.8,3.15,49.6-1.15,70.42Z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
<g>
|
</svg>
|
||||||
<polygon class="st5" points="453.49 725.5 306.33 705.88 306.28 601.87 453.49 573.99 453.49 725.5"/>
|
|
||||||
<g>
|
|
||||||
<path class="st23" d="M408.8,608.87c2.53-2.96,13.34-2.52,17.43-4.36.24,7.3.9,14.48,1.1,21.8l-.66,68.12-8.06-.54c-2.16.07-4.37.04-6.54,0l-3.11-.93c-.93-27.55-1.62-56.31-.16-84.09Z"/>
|
|
||||||
<path class="st0" d="M387,611.05v80.66c-3.62-2.19-15.34.22-16.96-2.11l-.33-74.59c.96-2.88,13.95-2.4,17.29-3.96Z"/>
|
|
||||||
<polygon class="st7" points="348.85 617.59 348.85 688.44 332.5 687.35 332.5 619.77 348.85 617.59"/>
|
|
||||||
<path class="st11" d="M408.8,608.87l-.09,82.37,3.36,2.65c-1.45-.03-2.92.04-4.37,0,1.53-10.81-2.44-80.9,1.1-85.03Z"/>
|
|
||||||
<path class="st11" d="M427.33,626.31c.63,22.84-.47,45.83,0,68.68l-8.73-1.09c2.53-.08,5.1.06,7.64,0l1.08-67.59Z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path class="st2" d="M336.86,517.31c.08-12.89-1.57-31.04-.06-43.12.15-1.2-.08-2.43,1.14-3.22l129.72-55.03,1.08,123.49,39.25,13.84c-16.1,1.65-32.37,1.74-48.49,3.29-54.98,5.3-109.8,17.26-163.87,27.97-2.52-.29-5.64,5.91-5.64,7.44v106.28c-44.32-.62-86.36-25.78-106.3-65.38-37.11-73.67,8.88-159.45,89.48-171.08,5.05-70.54,77.25-114.81,143.6-93.75,29.07-38.59,75.03-64,123.39-68.73,87.07-8.53,171.01,51.08,190.76,136.23,1.53,6.58,5.31,22.98,4.99,28.91-.31,5.95-8.43,6.69-11,11.42,76.86-14.03,142.15,54.55,125.94,130.85-11.63,54.71-59.12,92.08-115.04,91.52l-1.09-119.9-68.67-12c.38-2.1,2.28-1.8,3.76-2.22,3.68-1.06,27.53-4.67,27.91-6.07l-.04-116.53c-.1-3.45-2.21-6.47-5.46-7.62l-217.45-34.36c-50.26,17.71-99.5,38.5-149.08,58.09-3.38,1.55-4.24,4.11-5.18,7.35-1.1,30.52-1.1,61.04,0,91.56,1,1.09.36,1.02,2.17.66,1.57-.31,12.26-3.46,13.09-3.93,1.12-11.83,1.48-23.82,1.09-35.97Z"/>
|
|
||||||
<g>
|
|
||||||
<path class="st1" d="M735.81,698.25l-1.09-119.9,1.09,119.9Z"/>
|
|
||||||
<path class="st25" d="M320.51,556.55c-.76-.83-1.38-1.13-1.15-2.62,2.09-27.37-2.57-58.33-.02-85.26.21-2.19.83-2.53,1.17-3.69v91.56Z"/>
|
|
||||||
<path class="st14" d="M441.5,456.26v85.02c-2.84,1.69-12.57,1.65-16.35,2.18v-81.21c3.7-2.31,9.24-5.16,13.35-6.37,1.09-.32,2.59-1.31,3,.37Z"/>
|
|
||||||
<path class="st26" d="M404.44,470.43v76.3c-5.3,1.35-10.21.87-15.26,3.27v-75.21c5.46-.27,9.78-4.76,15.26-4.36Z"/>
|
|
||||||
<path class="st19" d="M370.65,552.19c-3.11,1.45-9.5.64-13.08,2.18v-66.49c0-.61,10.85-4.28,11.46-4.36,2.82-.39,1.19,1.72,1.62,3.27,1.04,21.85,1.04,43.65,0,65.4Z"/>
|
|
||||||
<path class="st9" d="M441.5,541.29v-85.02,85.02Z"/>
|
|
||||||
<path class="st21" d="M370.65,552.19v-65.4c4.6,16.83-1.22,44.53,1.15,62.76-.16,1.29.36,1.94-1.15,2.64Z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 582 B |
@@ -2,8 +2,7 @@ import { useMemo, useState } from 'react';
|
|||||||
import type { FormEvent } from 'react';
|
import type { FormEvent } from 'react';
|
||||||
import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
|
import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
import { AlertCircle, ArrowRight, Github, Globe, Layers, Loader2, Mail, ScrollText, User2, Zap } from 'lucide-react';
|
import { AlertCircle, ArrowRight, Github, Loader2, Mail, User2 } from 'lucide-react';
|
||||||
import { LineAreaChart, DonutChart } from '@/shared/components';
|
|
||||||
import {
|
import {
|
||||||
AuthError,
|
AuthError,
|
||||||
getAuthBootstrap,
|
getAuthBootstrap,
|
||||||
@@ -32,67 +31,14 @@ function buildOAuthCallbackURL(path: string): string {
|
|||||||
return `${window.location.origin}${cleanPath}`;
|
return `${window.location.origin}${cleanPath}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function AuthCanvas() {
|
function GoogleMark() {
|
||||||
const features = [
|
|
||||||
{ icon: Zap, title: 'Instant deploys', body: 'Images or Git repositories to running containers.' },
|
|
||||||
{ icon: Globe, title: 'Domains & routing', body: 'Traefik-managed endpoints per service.' },
|
|
||||||
{ icon: ScrollText, title: 'Logs & metrics', body: 'Live container telemetry and log streams.' },
|
|
||||||
{ icon: Layers, title: 'Project canvas', body: 'Services, groups, and dependencies on one map.' },
|
|
||||||
];
|
|
||||||
const previewSparkline = [18, 22, 19, 31, 28, 42, 38, 51, 47, 58, 52, 64];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative hidden border-r border-[var(--border-subtle)] bg-[var(--bg-base)]/70 backdrop-blur-2xl xl:flex xl:w-[46%]">
|
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
<div className="absolute inset-0 bg-[#e8316a]/10" />
|
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z"/>
|
||||||
<div className="relative z-10 flex h-full w-full flex-col justify-between p-10">
|
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"/>
|
||||||
<div>
|
<path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84Z"/>
|
||||||
<div className="flex items-center gap-3">
|
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.46 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.3 9.14 5.38 12 5.38Z"/>
|
||||||
<img src="/containr.svg" alt="Containr" className="h-9 w-9" />
|
</svg>
|
||||||
<span className="text-lg font-bold tracking-tight text-[var(--text-primary)]">Containr</span>
|
|
||||||
</div>
|
|
||||||
<h1 className="mt-8 font-headline text-4xl font-semibold leading-tight text-[var(--text-primary)]">
|
|
||||||
Your containers,
|
|
||||||
<br />
|
|
||||||
one platform.
|
|
||||||
</h1>
|
|
||||||
<p className="mt-4 max-w-md text-sm leading-relaxed text-[var(--text-secondary)]">
|
|
||||||
Self-hosted deployment platform. Projects, services, builds, and live telemetry — owned end to end.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-8 grid grid-cols-2 gap-3">
|
|
||||||
{features.map((feature) => (
|
|
||||||
<div key={feature.title} className="flex items-start gap-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-card)]/60 p-3">
|
|
||||||
<div className="card-icon shrink-0" style={{ width: 30, height: 30 }}>
|
|
||||||
<feature.icon size={14} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-semibold text-[var(--text-primary)]">{feature.title}</p>
|
|
||||||
<p className="mt-0.5 text-[11px] leading-snug text-[var(--text-tertiary)]">{feature.body}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="panel p-5">
|
|
||||||
<div className="mb-4 flex items-center justify-between">
|
|
||||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--text-muted)]">Platform Preview</p>
|
|
||||||
<span className="badge-active"><span className="live-dot" />Active</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-end gap-5">
|
|
||||||
<div className="flex-1">
|
|
||||||
<p className="text-2xl font-black tracking-tight text-[var(--text-primary)]">api-gateway</p>
|
|
||||||
<p className="mb-2 text-xs text-[var(--text-tertiary)]">3 instances · deployed 4m ago</p>
|
|
||||||
<LineAreaChart data={previewSparkline} color="#e8316a" height={64} />
|
|
||||||
</div>
|
|
||||||
<div className="shrink-0 pb-1">
|
|
||||||
<DonutChart percentage={64} color="#9c7ef0" size={110} thickness={12} animated={false} />
|
|
||||||
<p className="-mt-1 text-center text-[10px] uppercase tracking-wide text-[var(--text-muted)]">Memory</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -106,28 +52,35 @@ function AuthCard({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="w-full max-w-[460px] rounded-[var(--radius-xl)] border border-[var(--border-subtle)] bg-[var(--surface-card)]/92 p-7 shadow-2xl shadow-black/35 backdrop-blur-xl md:p-8">
|
<div className="w-full max-w-[400px]">
|
||||||
<div className="mb-7">
|
<div className="rounded-[var(--radius-xl)] border border-[var(--border-subtle)] bg-[var(--surface-card)]/95 p-8 shadow-2xl shadow-black/50 backdrop-blur-xl">
|
||||||
<div className="mb-5 flex items-center gap-2.5 xl:hidden">
|
<h2 className="font-headline text-xl font-semibold text-[var(--text-primary)]">{title}</h2>
|
||||||
<img src="/containr.svg" alt="Containr" className="h-8 w-8" />
|
<p className="mb-6 mt-1.5 text-sm text-[var(--text-secondary)]">{subtitle}</p>
|
||||||
<span className="text-base font-bold tracking-tight text-[var(--text-primary)]">Containr</span>
|
{children}
|
||||||
</div>
|
|
||||||
<p className="hidden text-xs font-semibold uppercase tracking-[0.2em] text-[var(--text-muted)] xl:block">Containr</p>
|
|
||||||
<h2 className="mt-2 font-headline text-2xl font-semibold text-[var(--text-primary)]">{title}</h2>
|
|
||||||
<p className="mt-2 text-sm text-[var(--text-secondary)]">{subtitle}</p>
|
|
||||||
</div>
|
</div>
|
||||||
{children}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AuthLayout({ children }: { children: React.ReactNode }) {
|
function AuthLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[var(--bg-void)]">
|
<div className="relative min-h-screen overflow-hidden bg-[var(--bg-void)]">
|
||||||
|
<div className="subtle-grid absolute inset-0" />
|
||||||
<div className="ambient-glow" />
|
<div className="ambient-glow" />
|
||||||
<div className="relative flex min-h-screen">
|
<div
|
||||||
<AuthCanvas />
|
className="absolute left-1/2 top-0 h-[420px] w-[720px] -translate-x-1/2 -translate-y-1/2 rounded-full"
|
||||||
<div className="flex w-full items-center justify-center px-5 py-8 md:px-8">{children}</div>
|
style={{ background: 'radial-gradient(ellipse at center, rgba(232,49,106,0.16) 0%, transparent 65%)' }}
|
||||||
|
/>
|
||||||
|
<div className="relative flex min-h-screen flex-col items-center justify-center px-5 py-10">
|
||||||
|
<div className="mb-8 flex flex-col items-center">
|
||||||
|
<img src="/containr.svg" alt="Containr" className="h-14 w-14" />
|
||||||
|
<span className="mt-4 font-headline text-2xl font-bold tracking-tight text-[var(--text-primary)]">Containr</span>
|
||||||
|
<span className="mt-1 text-xs text-[var(--text-muted)]">Self-hosted container platform</span>
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
<p className="mt-8 text-center text-[11px] text-[var(--text-muted)]">
|
||||||
|
Sessions are cookie-based · first account becomes platform owner
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -278,7 +231,7 @@ export function SignInPage() {
|
|||||||
onClick={() => void signInWithGoogleProvider()}
|
onClick={() => void signInWithGoogleProvider()}
|
||||||
className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--border-default)]"
|
className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--border-default)]"
|
||||||
>
|
>
|
||||||
<span className="text-sm font-semibold">G</span>
|
<GoogleMark />
|
||||||
Google
|
Google
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+10
-168
@@ -1,172 +1,14 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
|
|
||||||
<!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8) -->
|
|
||||||
<defs>
|
<defs>
|
||||||
<style>
|
<linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
|
||||||
.st0 {
|
<stop offset="0" stop-color="#f4497f"/>
|
||||||
fill: #877cd6;
|
<stop offset="1" stop-color="#cf1d5b"/>
|
||||||
}
|
|
||||||
|
|
||||||
.st1 {
|
|
||||||
fill: #6e65d8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st2 {
|
|
||||||
fill: url(#linear-gradient2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.st3 {
|
|
||||||
fill: #6e63d7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st4 {
|
|
||||||
fill: #b1abf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st5 {
|
|
||||||
fill: url(#linear-gradient1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.st6 {
|
|
||||||
fill: #a39ae9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st7 {
|
|
||||||
fill: #8476d5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st8 {
|
|
||||||
fill: #aaa2eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st9 {
|
|
||||||
fill: #675bd2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st10 {
|
|
||||||
fill: #b9b4f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st11 {
|
|
||||||
fill: #5449b9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st12 {
|
|
||||||
fill: #655acd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st13 {
|
|
||||||
fill: #b6b1f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st14 {
|
|
||||||
fill: #9e93eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st15 {
|
|
||||||
fill: #a298e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st16 {
|
|
||||||
fill: #4239a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st17 {
|
|
||||||
fill: #b0a9ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st18 {
|
|
||||||
fill: #3d35a1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st19 {
|
|
||||||
fill: #8f80e4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st20 {
|
|
||||||
fill: #9186f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st21 {
|
|
||||||
fill: #5a4ec2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st22 {
|
|
||||||
fill: #423aa4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st23 {
|
|
||||||
fill: #8e81dc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st24 {
|
|
||||||
fill: url(#linear-gradient);
|
|
||||||
}
|
|
||||||
|
|
||||||
.st25 {
|
|
||||||
fill: #594ec0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.st26 {
|
|
||||||
fill: #9487e7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<linearGradient id="linear-gradient" x1="945.85" y1="1577.02" x2="761.14" y2="1748.14" gradientTransform="translate(-268 -1012)" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0" stop-color="#7367dc"/>
|
|
||||||
<stop offset="1" stop-color="#4e44b1"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="linear-gradient1" x1="722.68" y1="1595.53" x2="596.26" y2="1731.01" gradientTransform="translate(-268 -1012)" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0" stop-color="#5b53c3"/>
|
|
||||||
<stop offset="1" stop-color="#392e91"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="linear-gradient2" x1="948.55" y1="1362.8" x2="635.29" y2="1790.01" gradientTransform="translate(-268 -1012)" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop offset="0" stop-color="#887ded"/>
|
|
||||||
<stop offset="1" stop-color="#342a89"/>
|
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<polygon class="st20" points="681.31 447.54 681.31 467.16 481.77 437.1 483.48 417.01 681.31 447.54"/>
|
<rect width="64" height="64" rx="15" fill="url(#bg)"/>
|
||||||
<path class="st18" d="M555.67,521.86c4.67-.95,15.46,7.01,23.68,7.48,10.63.6,19.08-6.88,26.17-5.47,5.58,1.11,5.41,7.21,2.27,10.95-11.39,13.58-43.92,11.42-55.13-1.69-3.59-4.2-2.96-10.06,3-11.27Z"/>
|
<g fill="none" stroke="#ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<circle class="st16" cx="528.3" cy="506.02" r="13.52"/>
|
<rect x="15" y="18" width="34" height="26" rx="4"/>
|
||||||
<circle class="st22" cx="632.44" cy="508.64" r="13.43"/>
|
<path d="M23 18v26M31 18v26M39 18v26"/>
|
||||||
<g>
|
<path d="M20 51h24"/>
|
||||||
<path class="st24" d="M712.92,596.88v110.09l-234.36,18.53c-1.16-49.03-1.16-98.08,0-147.15.23-.82-.31-2.2.05-3.19,21.9,1.33,43.96,3.31,65.89,5.38,7.24.68,14.5,1.49,21.8,2.18,48.86,4.63,97.74,9.75,146.62,14.16Z"/>
|
|
||||||
<g>
|
|
||||||
<path class="st3" d="M712.92,706.97v-110.09,110.09Z"/>
|
|
||||||
<path class="st4" d="M684.58,612.14c1.03,24.3,1.03,48.64,0,73.03-.26,1.25.34,2.95-.05,4.3-7.86,1.68-15.92,1.09-23.93,1.16v-81.75c4.86,1.32,21.04.41,23.98,3.27Z"/>
|
|
||||||
<path class="st17" d="M531.97,596.88v68.67c-.15.54-.33,1.07-.6,1.55-1.78,3.15-25.19-1.98-24.47-9.18v-62.13c2.91-2.93,19.92,2.34,25.07,1.09Z"/>
|
|
||||||
<path class="st13" d="M583.21,602.33c1.01,21.29,1.14,42.65.39,64.08l-1.56.27c-6.01-4.73-13.02-8.71-20.97-7.04l-1.85-1.71v-57.77c.85-.85,22.56,1.51,23.98,2.18Z"/>
|
|
||||||
<path class="st10" d="M634.44,606.69v52.32l-2.45.71c-5.32-4.68-12.12-9.52-19.58-7.78l-1.95-1.65v-45.78l23.98,2.18Z"/>
|
|
||||||
<path class="st8" d="M634.44,659.01v32.7l-23.98,1.09v-42.51c8.78-3.35,17.83,2.97,23.98,8.72Z"/>
|
|
||||||
<path class="st6" d="M572.31,694.98l-13.63.35.55-37.41c7.76-2.78,18.95,1.52,23.97,7.63v-63.22c4.08,1.92-.83,79.47,1.1,89.93-.76,4.34-8.2,2.64-11.99,2.72Z"/>
|
|
||||||
<path class="st15" d="M531.97,665.55c.59,10.18.59,20.36,0,30.52-.66,2.02-12.84.95-15.85,1.04-2.38.07-8.37,2.53-9.22.05v-39.24c5.92,5.49,17.26,8.87,25.07,7.63Z"/>
|
|
||||||
<path class="st12" d="M559.23,657.92c.05,12.34-.04,24.73,0,37.07,4.35-.07,8.74.09,13.09,0l-14.18,1.1,1.1-95.93c.06,19.24-.08,38.53,0,57.77Z"/>
|
|
||||||
<path class="st12" d="M506.9,657.92c.05,13.06-.04,26.18,0,39.24v-101.37c.06,20.69-.08,41.44,0,62.13Z"/>
|
|
||||||
<path class="st12" d="M531.97,696.07c1.19-3.63-.03-24.65,0-30.52.14-22.87-.1-45.8,0-68.67v99.19Z"/>
|
|
||||||
<path class="st3" d="M610.46,650.29c.05,14.15-.04,28.36,0,42.51v-88.29c.04,15.24-.05,30.54,0,45.78Z"/>
|
|
||||||
<path class="st3" d="M634.44,691.71c.02-10.88-.03-21.82,0-32.7.05-17.42-.03-34.9,0-52.32v85.02Z"/>
|
|
||||||
<path class="st3" d="M684.58,685.17v-73.03c.86.84,1.32,1.19,1.15,2.61-2.14,21.8,3.15,49.6-1.15,70.42Z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
<g>
|
</svg>
|
||||||
<polygon class="st5" points="453.49 725.5 306.33 705.88 306.28 601.87 453.49 573.99 453.49 725.5"/>
|
|
||||||
<g>
|
|
||||||
<path class="st23" d="M408.8,608.87c2.53-2.96,13.34-2.52,17.43-4.36.24,7.3.9,14.48,1.1,21.8l-.66,68.12-8.06-.54c-2.16.07-4.37.04-6.54,0l-3.11-.93c-.93-27.55-1.62-56.31-.16-84.09Z"/>
|
|
||||||
<path class="st0" d="M387,611.05v80.66c-3.62-2.19-15.34.22-16.96-2.11l-.33-74.59c.96-2.88,13.95-2.4,17.29-3.96Z"/>
|
|
||||||
<polygon class="st7" points="348.85 617.59 348.85 688.44 332.5 687.35 332.5 619.77 348.85 617.59"/>
|
|
||||||
<path class="st11" d="M408.8,608.87l-.09,82.37,3.36,2.65c-1.45-.03-2.92.04-4.37,0,1.53-10.81-2.44-80.9,1.1-85.03Z"/>
|
|
||||||
<path class="st11" d="M427.33,626.31c.63,22.84-.47,45.83,0,68.68l-8.73-1.09c2.53-.08,5.1.06,7.64,0l1.08-67.59Z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path class="st2" d="M336.86,517.31c.08-12.89-1.57-31.04-.06-43.12.15-1.2-.08-2.43,1.14-3.22l129.72-55.03,1.08,123.49,39.25,13.84c-16.1,1.65-32.37,1.74-48.49,3.29-54.98,5.3-109.8,17.26-163.87,27.97-2.52-.29-5.64,5.91-5.64,7.44v106.28c-44.32-.62-86.36-25.78-106.3-65.38-37.11-73.67,8.88-159.45,89.48-171.08,5.05-70.54,77.25-114.81,143.6-93.75,29.07-38.59,75.03-64,123.39-68.73,87.07-8.53,171.01,51.08,190.76,136.23,1.53,6.58,5.31,22.98,4.99,28.91-.31,5.95-8.43,6.69-11,11.42,76.86-14.03,142.15,54.55,125.94,130.85-11.63,54.71-59.12,92.08-115.04,91.52l-1.09-119.9-68.67-12c.38-2.1,2.28-1.8,3.76-2.22,3.68-1.06,27.53-4.67,27.91-6.07l-.04-116.53c-.1-3.45-2.21-6.47-5.46-7.62l-217.45-34.36c-50.26,17.71-99.5,38.5-149.08,58.09-3.38,1.55-4.24,4.11-5.18,7.35-1.1,30.52-1.1,61.04,0,91.56,1,1.09.36,1.02,2.17.66,1.57-.31,12.26-3.46,13.09-3.93,1.12-11.83,1.48-23.82,1.09-35.97Z"/>
|
|
||||||
<g>
|
|
||||||
<path class="st1" d="M735.81,698.25l-1.09-119.9,1.09,119.9Z"/>
|
|
||||||
<path class="st25" d="M320.51,556.55c-.76-.83-1.38-1.13-1.15-2.62,2.09-27.37-2.57-58.33-.02-85.26.21-2.19.83-2.53,1.17-3.69v91.56Z"/>
|
|
||||||
<path class="st14" d="M441.5,456.26v85.02c-2.84,1.69-12.57,1.65-16.35,2.18v-81.21c3.7-2.31,9.24-5.16,13.35-6.37,1.09-.32,2.59-1.31,3,.37Z"/>
|
|
||||||
<path class="st26" d="M404.44,470.43v76.3c-5.3,1.35-10.21.87-15.26,3.27v-75.21c5.46-.27,9.78-4.76,15.26-4.36Z"/>
|
|
||||||
<path class="st19" d="M370.65,552.19c-3.11,1.45-9.5.64-13.08,2.18v-66.49c0-.61,10.85-4.28,11.46-4.36,2.82-.39,1.19,1.72,1.62,3.27,1.04,21.85,1.04,43.65,0,65.4Z"/>
|
|
||||||
<path class="st9" d="M441.5,541.29v-85.02,85.02Z"/>
|
|
||||||
<path class="st21" d="M370.65,552.19v-65.4c4.6,16.83-1.22,44.53,1.15,62.76-.16,1.29.36,1.94-1.15,2.64Z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 582 B |
Reference in new issue
Block a user