bostame/workdock-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot: preserve trial lifecycle and product-grade expiry UX

Browse Source
This commit is contained in:
Md Bayazid Bostame
2026-03-26 14:43:10 +01:00
parent 8821a7943b
commit 811bcd8745
24 changed files with 1196 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
backend/workflows/static/workflows/css/admin_tools.css
View File

@@ -32,6 +32,82 @@ h1 { margin: 12px 0 6px; color: #000078; }
.branding-preview-footer-main { color: #20385f; font-size: 11px; font-weight: 700; line-height: 1.35; }
.branding-preview-footer-legal { margin-top: 4px; color: #6c7f99; font-size: 10px; line-height: 1.4; }
.backup-grid { grid-template-columns: minmax(280px, 720px); }
.trial-overview { padding-bottom: 12px; }
.trial-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; }
.trial-summary-card { border: 1px solid #d9e4f1; border-radius: 14px; background: rgba(255,255,255,0.86); padding: 12px; display: grid; gap: 6px; }
.trial-summary-label { color: #60738d; font-size: 12px; font-weight: 700; }
.trial-summary-value { color: #17345e; font-size: 16px; line-height: 1.2; }
.trial-summary-value.is-active { color: #166534; }
.trial-summary-value.is-warn { color: #8a5a00; }
.trial-summary-value.is-inactive { color: #7a1f1f; }
.trial-summary-value.is-expired { color: #9f1d1d; }
.trial-expired-shell { padding: 28px 24px 36px; }
.trial-expired-card {
max-width: 900px;
margin: 0 auto;
border: 1px solid #e7d1d1;
border-radius: 24px;
background:
radial-gradient(circle at top right, rgba(201, 68, 68, 0.12), transparent 24%),
linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,247,247,0.96));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.94),
0 18px 36px rgba(16, 32, 57, 0.08);
padding: 24px;
}
.trial-expired-card h1 { margin: 10px 0 8px; color: #7f1d1d; }
.trial-expired-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 11px;
border-radius: 999px;
border: 1px solid rgba(159, 29, 29, 0.14);
background: rgba(255,255,255,0.75);
color: #9f1d1d;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.trial-expired-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.trial-expired-panel {
border: 1px solid #ead9d9;
border-radius: 16px;
background: rgba(255,255,255,0.82);
padding: 14px;
display: grid;
gap: 6px;
}
.trial-expired-label {
color: #8e5a5a;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.trial-expired-panel strong {
color: #6f1d1d;
font-size: 15px;
line-height: 1.25;
}
.trial-expired-panel p {
margin: 0;
color: #805c5c;
font-size: 13px;
line-height: 1.5;
}
.trial-expired-contact {
margin-top: 14px;
color: #7a5252;
font-size: 13px;
font-weight: 700;
}
label { display: block; margin-bottom: 4px; font-size: 12px; color: #334155; font-weight: 700; }
input, select, textarea { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 9px; background: #fff; transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
@@ -111,6 +187,10 @@ th { background: #f6f9ff; color: #334155; }
.actions { white-space: nowrap; }
@media (max-width: 760px) {
.grid { grid-template-columns: 1fr; }
.trial-summary-grid { grid-template-columns: 1fr 1fr; }
.trial-expired-shell { padding: 20px 16px 28px; }
.trial-expired-card { padding: 18px; }
.trial-expired-grid { grid-template-columns: 1fr; }
.branding-preview-header { flex-direction: column; align-items: flex-start; }
.branding-preview-band { flex-wrap: wrap; }
.app-registry-filters { grid-template-columns: 1fr; }

104
backend/workflows/static/workflows/css/app_chrome.css
View File

@@ -29,6 +29,110 @@
background-color var(--motion-base) var(--motion-ease);
}
.app-trial-banner {
width: min(var(--app-shell-width), 100%);
margin: 0 auto 12px;
padding: 0 10px;
}
.app-trial-banner-inner {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
padding: 10px 12px;
border: 1px solid #e9d4a2;
border-radius: 18px;
background:
radial-gradient(circle at top right, rgba(255, 206, 112, 0.22), transparent 28%),
linear-gradient(180deg, rgba(255,251,243,0.98), rgba(255,244,222,0.94));
color: #875400;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.88),
0 10px 20px rgba(16, 32, 57, 0.05);
}
.app-trial-banner.is-expired .app-trial-banner-inner {
border-color: #efc2c2;
background:
radial-gradient(circle at top right, rgba(222, 92, 92, 0.16), transparent 28%),
linear-gradient(180deg, rgba(255,248,248,0.98), rgba(255,238,238,0.94));
color: #9f1d1d;
}
.app-trial-banner-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 11px;
border-radius: 999px;
border: 1px solid rgba(135, 84, 0, 0.16);
background: rgba(255,255,255,0.72);
color: inherit;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.app-trial-banner.is-expired .app-trial-banner-chip {
border-color: rgba(159, 29, 29, 0.18);
}
.app-trial-banner-copy {
display: grid;
gap: 2px;
flex: 1 1 440px;
min-width: 240px;
}
.app-trial-banner-title {
color: #4b3710;
font-size: 13px;
line-height: 1.2;
}
.app-trial-banner.is-expired .app-trial-banner-title {
color: #7f1d1d;
}
.app-trial-banner-text {
color: #7f6540;
font-size: 12px;
line-height: 1.45;
}
.app-trial-banner.is-expired .app-trial-banner-text {
color: #8f3a3a;
}
.app-trial-banner-meta {
display: grid;
gap: 2px;
padding: 6px 10px;
border-left: 1px solid rgba(135, 84, 0, 0.14);
min-width: 120px;
}
.app-trial-banner.is-expired .app-trial-banner-meta {
border-left-color: rgba(159, 29, 29, 0.16);
}
.app-trial-banner-meta-label {
color: #8a6c42;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.app-trial-banner-meta strong {
color: inherit;
font-size: 12px;
line-height: 1.3;
}
.app-header-in-shell {
box-sizing: border-box;
width: 100%;