377 lines
9.4 KiB
TypeScript
377 lines
9.4 KiB
TypeScript
import * as plugins from '../plugins.js';
|
|
|
|
import {
|
|
customElement,
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
type TemplateResult,
|
|
css,
|
|
cssManager,
|
|
query,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import { commitinfo } from '../../ts/00_commitinfo_data.js';
|
|
import { IdpState } from '../states/idp.state.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'idp-centercontainer': IdpCenterContainer;
|
|
}
|
|
}
|
|
|
|
@customElement('idp-centercontainer')
|
|
export class IdpCenterContainer extends DeesElement {
|
|
public static demo = () => html`<idp-centercontainer></idp-centercontainer>`;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
--background: hsl(240 10% 3.9%);
|
|
--foreground: hsl(0 0% 98%);
|
|
--muted: hsl(240 3.7% 15.9%);
|
|
--muted-foreground: hsl(240 5% 64.9%);
|
|
--border: hsl(240 3.7% 15.9%);
|
|
--card: hsl(240 6% 6%);
|
|
|
|
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--background);
|
|
}
|
|
|
|
.split-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 45% 55%;
|
|
}
|
|
|
|
/* Left Panel - Branding */
|
|
.brand-panel {
|
|
background: #09090B;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 48px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.brand-panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse at 50% -10%, rgb(110 91 230 / 0.18) 0%, transparent 58%),
|
|
radial-gradient(circle at 2px 2px, rgb(255 255 255 / 0.04) 1px, transparent 0) 0 0 / 32px 32px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.brand-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.logo {
|
|
font-family: 'Cal Sans', 'Geist Sans', sans-serif;
|
|
font-size: clamp(44px, 6vw, 72px);
|
|
font-weight: 900;
|
|
color: var(--foreground);
|
|
margin: 0 0 8px 0;
|
|
letter-spacing: -0.05em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 18px;
|
|
color: var(--muted-foreground);
|
|
margin: 0 0 44px 0;
|
|
line-height: 1.65;
|
|
max-width: 420px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
margin-bottom: 28px;
|
|
padding: 5px 12px;
|
|
border: 1px solid rgb(255 255 255 / 0.1);
|
|
border-radius: 999px;
|
|
background: rgb(255 255 255 / 0.05);
|
|
color: rgb(255 255 255 / 0.5);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.badge-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: #16A34A;
|
|
}
|
|
|
|
.features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 28px;
|
|
}
|
|
|
|
.feature {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: rgb(255 255 255 / 0.045);
|
|
border: 1px solid rgb(255 255 255 / 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.feature-icon idp-icon {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.feature-text h3 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--foreground);
|
|
margin: 0 0 4px 0;
|
|
}
|
|
|
|
.feature-text p {
|
|
font-size: 14px;
|
|
color: var(--muted-foreground);
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.learn-more {
|
|
margin-top: 48px;
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Right Panel - Form */
|
|
.form-panel {
|
|
background: linear-gradient(-255deg, #06152280 -3.35%, #939eff38 32.79%, #22578480 67.41%, #06152280 97.48%), #212121;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 48px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 32px;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
|
transform: translateY(8px);
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-content.show {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.form-footer {
|
|
position: absolute;
|
|
bottom: 24px;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.form-footer a {
|
|
color: var(--muted-foreground);
|
|
text-decoration: none;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.form-footer a:hover {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.form-footer .separator {
|
|
margin: 0 8px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.version {
|
|
margin-top: 8px;
|
|
font-size: 11px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 900px) {
|
|
.split-container {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
.brand-panel {
|
|
padding: 32px 24px;
|
|
min-height: auto;
|
|
}
|
|
|
|
.brand-content {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.features {
|
|
display: none;
|
|
}
|
|
|
|
.form-panel {
|
|
padding: 32px 24px;
|
|
}
|
|
|
|
.form-content {
|
|
padding: 24px;
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
render() {
|
|
return html`
|
|
<div class="split-container">
|
|
<!-- Left: Branding Panel -->
|
|
<div class="brand-panel">
|
|
<div class="brand-content">
|
|
<h1 class="logo">idp.global</h1>
|
|
<div class="badge"><span class="badge-dot"></span>Open identity infrastructure</div>
|
|
<p class="tagline">One Identity. Any Scale. Yours Forever.</p>
|
|
|
|
<div class="features">
|
|
<div class="feature">
|
|
<div class="feature-icon">
|
|
<idp-icon name="globe" size="18"></idp-icon>
|
|
</div>
|
|
<div class="feature-text">
|
|
<h3>Open Source</h3>
|
|
<p>Fully transparent, community-driven, no vendor lock-in</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature">
|
|
<div class="feature-icon">
|
|
<idp-icon name="shield" size="18"></idp-icon>
|
|
</div>
|
|
<div class="feature-text">
|
|
<h3>Always Free</h3>
|
|
<p>Free for individuals and organizations. Paid support available for SLAs</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature">
|
|
<div class="feature-icon">
|
|
<idp-icon name="key" size="18"></idp-icon>
|
|
</div>
|
|
<div class="feature-text">
|
|
<h3>Permanent Identity</h3>
|
|
<p>One identity across all your applications</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="learn-more">
|
|
<idp-button
|
|
variant="outline"
|
|
@click=${() => window.open('https://about.idp.global', '_blank')}
|
|
>Learn more</idp-button>
|
|
<idp-button
|
|
variant="ghost"
|
|
@click=${() => window.open('https://code.foss.global/idp.global/app', '_blank')}
|
|
>Source code</idp-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Form Panel -->
|
|
<div class="form-panel">
|
|
<div class="form-content">
|
|
<slot></slot>
|
|
</div>
|
|
<footer class="form-footer">
|
|
<a href="https://legal.task.vc/" target="_blank">Legal</a>
|
|
<span class="separator">·</span>
|
|
<a href="https://task.vc/" target="_blank">Company</a>
|
|
<span class="separator">·</span>
|
|
<a href="https://support.task.vc/" target="_blank">Support</a>
|
|
<div class="version">v${commitinfo.version}</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public async show() {
|
|
await this.updateComplete;
|
|
const domtoolsInstance = await this.domtoolsPromise;
|
|
const done = plugins.smartpromise.defer();
|
|
requestAnimationFrame(async () => {
|
|
this.shadowRoot.querySelector('.form-content').classList.add('show');
|
|
await domtoolsInstance.convenience.smartdelay.delayFor(350);
|
|
done.resolve();
|
|
});
|
|
return done.promise;
|
|
}
|
|
|
|
public async hide() {
|
|
await this.updateComplete;
|
|
const domtoolsInstance = await this.domtoolsPromise;
|
|
const done = plugins.smartpromise.defer();
|
|
requestAnimationFrame(async () => {
|
|
this.shadowRoot.querySelector('.form-content').classList.remove('show');
|
|
await domtoolsInstance.convenience.smartdelay.delayFor(350);
|
|
done.resolve();
|
|
});
|
|
return done.promise;
|
|
}
|
|
}
|