Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -23,7 +23,6 @@ DEBUG = os.getenv("DJANGO_DEBUG", "true").lower() == "true"
|
||||
ALLOWED_HOSTS = [
|
||||
"127.0.0.1",
|
||||
"localhost",
|
||||
"testserver",
|
||||
os.getenv("HOST_FQDN", ""),
|
||||
]
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,18 +1,3 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from .models import PostizInstallBrief
|
||||
|
||||
|
||||
@admin.register(PostizInstallBrief)
|
||||
class PostizInstallBriefAdmin(admin.ModelAdmin):
|
||||
list_display = (
|
||||
"title",
|
||||
"public_url",
|
||||
"node_version",
|
||||
"package_manager",
|
||||
"ready_services_count",
|
||||
"updated_at",
|
||||
)
|
||||
list_filter = ("node_version", "package_manager", "email_provider", "upload_strategy")
|
||||
search_fields = ("title", "public_url", "notes")
|
||||
readonly_fields = ("created_at", "updated_at", "readiness_percent", "status_label")
|
||||
# Register your models here.
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
from django import forms
|
||||
|
||||
from .models import PostizInstallBrief
|
||||
|
||||
|
||||
class PostizInstallBriefForm(forms.ModelForm):
|
||||
class Meta:
|
||||
model = PostizInstallBrief
|
||||
fields = [
|
||||
"title",
|
||||
"public_url",
|
||||
"node_version",
|
||||
"package_manager",
|
||||
"postgres_ready",
|
||||
"redis_ready",
|
||||
"temporal_ready",
|
||||
"email_provider",
|
||||
"upload_strategy",
|
||||
"notes",
|
||||
]
|
||||
widgets = {
|
||||
"title": forms.TextInput(
|
||||
attrs={
|
||||
"class": "form-control form-control-lg",
|
||||
"placeholder": "Hosted Postiz workspace",
|
||||
}
|
||||
),
|
||||
"public_url": forms.URLInput(
|
||||
attrs={
|
||||
"class": "form-control form-control-lg",
|
||||
"placeholder": "https://your-machine.example.com",
|
||||
}
|
||||
),
|
||||
"node_version": forms.Select(attrs={"class": "form-select"}),
|
||||
"package_manager": forms.Select(attrs={"class": "form-select"}),
|
||||
"email_provider": forms.Select(attrs={"class": "form-select"}),
|
||||
"upload_strategy": forms.Select(attrs={"class": "form-select"}),
|
||||
"notes": forms.Textarea(
|
||||
attrs={
|
||||
"class": "form-control",
|
||||
"rows": 5,
|
||||
"placeholder": "Optional notes about ports, reverse proxy decisions, or missing credentials.",
|
||||
}
|
||||
),
|
||||
"postgres_ready": forms.CheckboxInput(attrs={"class": "form-check-input"}),
|
||||
"redis_ready": forms.CheckboxInput(attrs={"class": "form-check-input"}),
|
||||
"temporal_ready": forms.CheckboxInput(attrs={"class": "form-check-input"}),
|
||||
}
|
||||
help_texts = {
|
||||
"title": "A friendly name for this VM install brief.",
|
||||
"public_url": "Use the public URL already attached to this machine.",
|
||||
"node_version": "Postiz development requires Node.js 18 or newer.",
|
||||
"package_manager": "pnpm is the default workflow in the development guide.",
|
||||
"postgres_ready": "Check this if PostgreSQL is already available on the VM.",
|
||||
"redis_ready": "Check this if Redis is already available on the VM.",
|
||||
"temporal_ready": "Check this if the Temporal stack is already reachable.",
|
||||
"email_provider": "Pick the first email path you expect to configure.",
|
||||
"upload_strategy": "Choose how uploaded files should be stored initially.",
|
||||
}
|
||||
|
||||
def clean_title(self):
|
||||
title = self.cleaned_data["title"].strip()
|
||||
if len(title) < 3:
|
||||
raise forms.ValidationError("Use at least 3 characters so the brief is recognizable.")
|
||||
return title
|
||||
|
||||
def clean_public_url(self):
|
||||
public_url = self.cleaned_data["public_url"].strip()
|
||||
if not public_url.startswith(("http://", "https://")):
|
||||
raise forms.ValidationError("Include http:// or https:// so the reverse-proxy target is unambiguous.")
|
||||
return public_url
|
||||
@ -1,35 +0,0 @@
|
||||
# Generated by Django 5.2.7 on 2026-04-15 14:17
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
initial = True
|
||||
|
||||
dependencies = [
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.CreateModel(
|
||||
name='PostizInstallBrief',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('title', models.CharField(max_length=120)),
|
||||
('public_url', models.URLField(help_text='Public URL where the reverse proxy will expose Postiz.')),
|
||||
('node_version', models.CharField(choices=[('18 LTS', '18 LTS'), ('20 LTS', '20 LTS'), ('22 Current', '22 Current')], default='20 LTS', max_length=20)),
|
||||
('package_manager', models.CharField(choices=[('pnpm', 'pnpm'), ('npm', 'npm')], default='pnpm', max_length=10)),
|
||||
('postgres_ready', models.BooleanField(default=False)),
|
||||
('redis_ready', models.BooleanField(default=False)),
|
||||
('temporal_ready', models.BooleanField(default=False)),
|
||||
('email_provider', models.CharField(choices=[('none', 'Skip for now'), ('resend', 'Resend'), ('smtp', 'SMTP / Nodemailer')], default='none', max_length=20)),
|
||||
('upload_strategy', models.CharField(choices=[('local', 'Local uploads'), ('r2', 'Cloudflare R2'), ('later', 'Decide later')], default='local', max_length=20)),
|
||||
('notes', models.TextField(blank=True)),
|
||||
('created_at', models.DateTimeField(auto_now_add=True)),
|
||||
('updated_at', models.DateTimeField(auto_now=True)),
|
||||
],
|
||||
options={
|
||||
'ordering': ['-updated_at'],
|
||||
},
|
||||
),
|
||||
]
|
||||
Binary file not shown.
@ -1,80 +1,3 @@
|
||||
from django.db import models
|
||||
from django.urls import reverse
|
||||
|
||||
|
||||
class PostizInstallBrief(models.Model):
|
||||
PACKAGE_MANAGER_CHOICES = [
|
||||
("pnpm", "pnpm"),
|
||||
("npm", "npm"),
|
||||
]
|
||||
NODE_VERSION_CHOICES = [
|
||||
("18 LTS", "18 LTS"),
|
||||
("20 LTS", "20 LTS"),
|
||||
("22 Current", "22 Current"),
|
||||
]
|
||||
EMAIL_PROVIDER_CHOICES = [
|
||||
("none", "Skip for now"),
|
||||
("resend", "Resend"),
|
||||
("smtp", "SMTP / Nodemailer"),
|
||||
]
|
||||
UPLOAD_STRATEGY_CHOICES = [
|
||||
("local", "Local uploads"),
|
||||
("r2", "Cloudflare R2"),
|
||||
("later", "Decide later"),
|
||||
]
|
||||
|
||||
title = models.CharField(max_length=120)
|
||||
public_url = models.URLField(help_text="Public URL where the reverse proxy will expose Postiz.")
|
||||
node_version = models.CharField(max_length=20, choices=NODE_VERSION_CHOICES, default="20 LTS")
|
||||
package_manager = models.CharField(max_length=10, choices=PACKAGE_MANAGER_CHOICES, default="pnpm")
|
||||
postgres_ready = models.BooleanField(default=False)
|
||||
redis_ready = models.BooleanField(default=False)
|
||||
temporal_ready = models.BooleanField(default=False)
|
||||
email_provider = models.CharField(max_length=20, choices=EMAIL_PROVIDER_CHOICES, default="none")
|
||||
upload_strategy = models.CharField(max_length=20, choices=UPLOAD_STRATEGY_CHOICES, default="local")
|
||||
notes = models.TextField(blank=True)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
ordering = ["-updated_at"]
|
||||
|
||||
def __str__(self):
|
||||
return self.title
|
||||
|
||||
def get_absolute_url(self):
|
||||
return reverse("brief_detail", args=[self.pk])
|
||||
|
||||
@property
|
||||
def ready_services_count(self):
|
||||
return sum([self.postgres_ready, self.redis_ready, self.temporal_ready])
|
||||
|
||||
@property
|
||||
def readiness_percent(self):
|
||||
return int((self.ready_services_count / 3) * 100)
|
||||
|
||||
@property
|
||||
def status_label(self):
|
||||
if self.ready_services_count == 3:
|
||||
return "Ready for repo bootstrap"
|
||||
if self.ready_services_count == 0:
|
||||
return "Blocked by missing services"
|
||||
return "Infrastructure in progress"
|
||||
|
||||
@property
|
||||
def status_tone(self):
|
||||
if self.ready_services_count == 3:
|
||||
return "success"
|
||||
if self.ready_services_count == 0:
|
||||
return "danger"
|
||||
return "warning"
|
||||
|
||||
@property
|
||||
def next_milestone(self):
|
||||
if self.ready_services_count == 3:
|
||||
return "Clone the Postiz repository and run the first development boot commands."
|
||||
if not self.postgres_ready:
|
||||
return "Provision PostgreSQL and capture DATABASE_URL for the .env file."
|
||||
if not self.redis_ready:
|
||||
return "Bring Redis online so background queues can start locally."
|
||||
return "Prepare Temporal and point TEMPORAL_ADDRESS at the stack."
|
||||
# Create your models here.
|
||||
|
||||
@ -1,77 +1,25 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}Postiz Native Setup Studio{% endblock %}</title>
|
||||
<meta name="description" content="{% block meta_description %}Plan a native Postiz development install, track prerequisites, and keep the hosted setup visible from one polished control room.{% endblock %}">
|
||||
<title>{% block title %}Knowledge Base{% endblock %}</title>
|
||||
{% if project_description %}
|
||||
<meta name="description" content="{{ project_description }}">
|
||||
<meta property="og:description" content="{{ project_description }}">
|
||||
<meta property="twitter:description" content="{{ project_description }}">
|
||||
{% endif %}
|
||||
{% if project_image_url %}
|
||||
<meta property="og:image" content="{{ project_image_url }}">
|
||||
<meta property="twitter:image" content="{{ project_image_url }}">
|
||||
{% endif %}
|
||||
<meta property="og:title" content="{% block og_title %}Postiz Native Setup Studio{% endblock %}">
|
||||
<meta property="og:description" content="{% block og_description %}Plan a native Postiz development install, track prerequisites, and keep the hosted setup visible from one polished control room.{% endblock %}">
|
||||
<meta property="twitter:title" content="{% block twitter_title %}Postiz Native Setup Studio{% endblock %}">
|
||||
<meta property="twitter:description" content="{% block twitter_description %}Plan a native Postiz development install, track prerequisites, and keep the hosted setup visible from one polished control room.{% endblock %}">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{% block body_class %}app-shell{% endblock %}">
|
||||
<div class="bg-orb bg-orb-one"></div>
|
||||
<div class="bg-orb bg-orb-two"></div>
|
||||
<header class="site-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-3">
|
||||
<div class="container-xxl">
|
||||
<a class="navbar-brand d-flex align-items-center gap-3" href="{% url 'home' %}">
|
||||
<span class="brand-mark">P</span>
|
||||
<span>
|
||||
<span class="brand-title">Postiz Native Setup Studio</span>
|
||||
<span class="brand-subtitle d-block">Hosted dev workflow for this VM</span>
|
||||
</span>
|
||||
</a>
|
||||
<button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav" aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="primaryNav">
|
||||
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
|
||||
<li class="nav-item"><a class="nav-link" href="{% url 'home' %}">Overview</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="{% url 'brief_list' %}">Install briefs</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="{% url 'brief_create' %}">New brief</a></li>
|
||||
<li class="nav-item ms-lg-2"><a class="btn btn-highlight" href="/admin/">Admin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="page-shell pb-5">
|
||||
<div class="container-xxl">
|
||||
{% if messages %}
|
||||
<div class="toast-stack">
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags|default:'info' }} glass-alert" role="alert">{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer py-4">
|
||||
<div class="container-xxl d-flex flex-column flex-lg-row justify-content-between gap-2 text-white-50 small">
|
||||
<span>{{ project_name }} · Django {{ django_version }} · Python {{ python_version }}</span>
|
||||
<span>Last render: {{ current_time|date:"Y-m-d H:i" }} UTC</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<body>
|
||||
{% block content %}{% endblock %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
<form method="post" class="glass-panel setup-form" novalidate>
|
||||
{% csrf_token %}
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6">
|
||||
<label class="form-label" for="{{ form.title.id_for_label }}">Workspace label</label>
|
||||
{{ form.title }}
|
||||
{% if form.title.help_text %}<div class="form-hint">{{ form.title.help_text }}</div>{% endif %}
|
||||
{% for error in form.title.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<label class="form-label" for="{{ form.public_url.id_for_label }}">Public URL</label>
|
||||
{{ form.public_url }}
|
||||
{% if form.public_url.help_text %}<div class="form-hint">{{ form.public_url.help_text }}</div>{% endif %}
|
||||
{% for error in form.public_url.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="{{ form.node_version.id_for_label }}">Node target</label>
|
||||
{{ form.node_version }}
|
||||
<div class="form-hint">{{ form.node_version.help_text }}</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="{{ form.package_manager.id_for_label }}">Package manager</label>
|
||||
{{ form.package_manager }}
|
||||
<div class="form-hint">{{ form.package_manager.help_text }}</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label" for="{{ form.email_provider.id_for_label }}">Email path</label>
|
||||
{{ form.email_provider }}
|
||||
<div class="form-hint">{{ form.email_provider.help_text }}</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="service-readiness-grid">
|
||||
<div class="service-toggle">
|
||||
<div>
|
||||
<label class="form-check-label" for="{{ form.postgres_ready.id_for_label }}">PostgreSQL ready</label>
|
||||
<div class="form-hint">{{ form.postgres_ready.help_text }}</div>
|
||||
</div>
|
||||
<div class="form-check form-switch m-0">{{ form.postgres_ready }}</div>
|
||||
</div>
|
||||
<div class="service-toggle">
|
||||
<div>
|
||||
<label class="form-check-label" for="{{ form.redis_ready.id_for_label }}">Redis ready</label>
|
||||
<div class="form-hint">{{ form.redis_ready.help_text }}</div>
|
||||
</div>
|
||||
<div class="form-check form-switch m-0">{{ form.redis_ready }}</div>
|
||||
</div>
|
||||
<div class="service-toggle">
|
||||
<div>
|
||||
<label class="form-check-label" for="{{ form.temporal_ready.id_for_label }}">Temporal ready</label>
|
||||
<div class="form-hint">{{ form.temporal_ready.help_text }}</div>
|
||||
</div>
|
||||
<div class="form-check form-switch m-0">{{ form.temporal_ready }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label class="form-label" for="{{ form.upload_strategy.id_for_label }}">Upload strategy</label>
|
||||
{{ form.upload_strategy }}
|
||||
<div class="form-hint">{{ form.upload_strategy.help_text }}</div>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<label class="form-label" for="{{ form.notes.id_for_label }}">Notes</label>
|
||||
{{ form.notes }}
|
||||
{% for error in form.notes.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% if form.non_field_errors %}
|
||||
<div class="field-error mt-3">{{ form.non_field_errors }}</div>
|
||||
{% endif %}
|
||||
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3 mt-4">
|
||||
<p class="helper-copy mb-0">Saving a brief generates a live detail page with prerequisite status, env variables, and boot commands.</p>
|
||||
<button class="btn btn-highlight btn-lg" type="submit">{{ submit_label|default:"Save install brief" }}</button>
|
||||
</div>
|
||||
</form>
|
||||
@ -1,93 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ brief.title }} · Install blueprint{% endblock %}
|
||||
{% block meta_description %}Review the generated Postiz install blueprint for {{ brief.title }}, including prerequisite readiness, env placeholders, and bootstrap commands.{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="inner-hero py-5">
|
||||
<div class="row g-4 align-items-center">
|
||||
<div class="col-lg-7">
|
||||
<div class="eyebrow-chip">Install blueprint</div>
|
||||
<h1 class="page-title mt-3">{{ brief.title }}</h1>
|
||||
<p class="hero-copy mt-3">{{ brief.next_milestone }}</p>
|
||||
<div class="d-flex flex-wrap gap-3 mt-4">
|
||||
<span class="status-pill status-{{ brief.status_tone }}">{{ brief.status_label }}</span>
|
||||
<span class="info-chip">{{ brief.public_url }}</span>
|
||||
<span class="info-chip">{{ brief.node_version }} · {{ brief.package_manager }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<div class="glass-panel summary-card h-100">
|
||||
<div class="panel-label">Readiness</div>
|
||||
<div class="readiness-ring progress-{{ brief.ready_services_count }} mt-3">
|
||||
<div class="readiness-ring-inner">
|
||||
<strong>{{ brief.readiness_percent }}%</strong>
|
||||
<span>service readiness</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="hero-copy small mt-4 mb-0">{{ brief.ready_services_count }} of 3 prerequisite services are marked ready for the initial development boot.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row g-4 pb-5">
|
||||
<div class="col-xl-5">
|
||||
<div class="glass-panel section-panel h-100">
|
||||
<div class="section-heading-wrap">
|
||||
<div>
|
||||
<span class="section-kicker">Prerequisites</span>
|
||||
<h2 class="section-title">Service checklist</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="checklist-grid mt-4">
|
||||
{% for item in blueprint.prerequisites %}
|
||||
<article class="checklist-item {% if item.ready %}is-ready{% endif %}">
|
||||
<div class="checklist-dot"></div>
|
||||
<div>
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.detail }}</p>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if brief.notes %}
|
||||
<div class="note-panel mt-4">
|
||||
<span class="section-kicker">Notes</span>
|
||||
<p class="mb-0 mt-2">{{ brief.notes }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-7">
|
||||
<div class="glass-panel section-panel mb-4">
|
||||
<div class="section-heading-wrap">
|
||||
<div>
|
||||
<span class="section-kicker">Environment</span>
|
||||
<h2 class="section-title">Suggested .env starting point</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-panel mt-4">
|
||||
<code>{% for line in blueprint.env_lines %}{{ line }}{% if not forloop.last %}<br>{% endif %}{% endfor %}</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-panel section-panel">
|
||||
<div class="section-heading-wrap">
|
||||
<div>
|
||||
<span class="section-kicker">Bootstrap</span>
|
||||
<h2 class="section-title">Suggested command path</h2>
|
||||
</div>
|
||||
<a class="text-link" href="{% url 'brief_list' %}">Back to briefs</a>
|
||||
</div>
|
||||
<div class="command-list mt-4">
|
||||
{% for command in blueprint.command_plan %}
|
||||
<div class="command-row">
|
||||
<span class="command-index">0{{ forloop.counter }}</span>
|
||||
<code>{{ command }}</code>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@ -1,34 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Create install brief · Postiz Native Setup Studio{% endblock %}
|
||||
{% block meta_description %}Create a hosted Postiz install brief, capture the public URL, and save prerequisite readiness for this VM.{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="inner-hero py-5">
|
||||
<div class="row g-4 align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="eyebrow-chip">Create install brief</div>
|
||||
<h1 class="page-title mt-3">Capture the first hosted Postiz setup plan.</h1>
|
||||
<p class="hero-copy mt-3">Tell the app which URL, Node target, and prerequisite services you expect. After saving, you will land on a generated detail page with next actions, env placeholders, and command prompts.</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="info-rail">
|
||||
<div class="info-rail-card">
|
||||
<span class="stack-title">Tracked now</span>
|
||||
<strong>Public URL + service readiness</strong>
|
||||
<p>Keep one source of truth while the VM is being prepared.</p>
|
||||
</div>
|
||||
<div class="info-rail-card">
|
||||
<span class="stack-title">After save</span>
|
||||
<strong>Confirmation + detail blueprint</strong>
|
||||
<p>Jump directly into the generated install checklist and command sequence.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pb-5">
|
||||
{% include "core/_brief_form.html" with submit_label="Generate install blueprint" %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
@ -1,52 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Install briefs · Postiz Native Setup Studio{% endblock %}
|
||||
{% block meta_description %}Browse saved Postiz install briefs, compare service readiness, and reopen any setup blueprint for this VM.{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="inner-hero py-5 pb-4">
|
||||
<div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3">
|
||||
<div>
|
||||
<div class="eyebrow-chip">Install briefs</div>
|
||||
<h1 class="page-title mt-3">Saved setup plans for this hosted environment.</h1>
|
||||
<p class="hero-copy mt-3">Every brief keeps the public URL, infrastructure readiness, and next milestone visible so you can iterate without losing context.</p>
|
||||
</div>
|
||||
<a class="btn btn-highlight btn-lg" href="{% url 'brief_create' %}">Create another brief</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pb-5">
|
||||
{% if briefs %}
|
||||
<div class="row g-4">
|
||||
{% for brief in briefs %}
|
||||
<div class="col-lg-6 col-xl-4">
|
||||
<article class="glass-panel brief-card h-100">
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<div>
|
||||
<h2 class="card-title">{{ brief.title }}</h2>
|
||||
<p class="card-subtitle">{{ brief.public_url }}</p>
|
||||
</div>
|
||||
<span class="status-pill status-{{ brief.status_tone }}">{{ brief.status_label }}</span>
|
||||
</div>
|
||||
<div class="progress-track progress-{{ brief.ready_services_count }} mt-4"><span></span></div>
|
||||
<div class="progress-copy mt-2">{{ brief.ready_services_count }}/3 infrastructure services ready</div>
|
||||
<ul class="detail-list mt-4">
|
||||
<li><span>Node</span><strong>{{ brief.node_version }}</strong></li>
|
||||
<li><span>Package manager</span><strong>{{ brief.package_manager }}</strong></li>
|
||||
<li><span>Email</span><strong>{{ brief.get_email_provider_display }}</strong></li>
|
||||
</ul>
|
||||
<p class="next-copy mt-4">{{ brief.next_milestone }}</p>
|
||||
<a class="btn btn-outline-light mt-4" href="{% url 'brief_detail' brief.pk %}">Open blueprint</a>
|
||||
</article>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-card text-center py-5">
|
||||
<h2>No install briefs yet</h2>
|
||||
<p>Start with one brief so the app can generate the first Postiz setup blueprint for this VM.</p>
|
||||
<a class="btn btn-highlight" href="{% url 'brief_create' %}">Create the first brief</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
@ -1,112 +1,145 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Postiz Native Setup Studio · Overview{% endblock %}
|
||||
{% block meta_description %}Design the first native Postiz install plan for this VM, track service readiness, and jump into the next development steps from one polished landing page.{% endblock %}
|
||||
{% block title %}{{ project_name }}{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color-start: #6a11cb;
|
||||
--bg-color-end: #2575fc;
|
||||
--text-color: #ffffff;
|
||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M-10 10L110 10M10 -10L10 110' stroke-width='1' stroke='rgba(255,255,255,0.05)'/></svg>");
|
||||
animation: bg-pan 20s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes bg-pan {
|
||||
0% {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg-color);
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem 2rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
|
||||
font-weight: 700;
|
||||
margin: 0 0 1.2rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin: 1.5rem auto;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.25);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.runtime code {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 0.15rem 0.45rem;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.75;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="hero-section py-5 py-lg-6">
|
||||
<div class="row align-items-center g-5">
|
||||
<div class="col-lg-7">
|
||||
<div class="eyebrow-chip">Hosted Postiz development workflow</div>
|
||||
<h1 class="display-title mt-3">Plan a native Postiz development install without losing sight of the public URL, services, or next commands.</h1>
|
||||
<p class="hero-copy mt-4">This first slice turns the blank starter into a Postiz setup cockpit: a polished landing page, install brief workflow, generated prerequisite summary, and a detail view you can revisit while you wire the VM.</p>
|
||||
<div class="d-flex flex-column flex-sm-row gap-3 mt-4">
|
||||
<a class="btn btn-highlight btn-lg" href="{% url 'brief_create' %}">Create install brief</a>
|
||||
<a class="btn btn-outline-light btn-lg" href="{% url 'brief_list' %}">View install briefs</a>
|
||||
</div>
|
||||
<div class="metric-row mt-5">
|
||||
<article class="metric-card">
|
||||
<span class="metric-value">{{ brief_stats.total }}</span>
|
||||
<span class="metric-label">Saved briefs</span>
|
||||
</article>
|
||||
<article class="metric-card">
|
||||
<span class="metric-value">{{ brief_stats.ready }}</span>
|
||||
<span class="metric-label">Ready to bootstrap</span>
|
||||
</article>
|
||||
<article class="metric-card">
|
||||
<span class="metric-value">3</span>
|
||||
<span class="metric-label">Core services tracked</span>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<div class="glass-panel hero-panel p-4 p-xl-5">
|
||||
<div class="panel-label">First delivery included</div>
|
||||
<div class="stack-preview mt-3">
|
||||
<div class="stack-preview-card">
|
||||
<span class="stack-title">Runtime</span>
|
||||
<strong>Node 18+</strong>
|
||||
<p>Choose the Node target and package manager before the repo bootstrap.</p>
|
||||
</div>
|
||||
<div class="stack-preview-card">
|
||||
<span class="stack-title">Local services</span>
|
||||
<strong>Postgres · Redis · Temporal</strong>
|
||||
<p>Mark what is already available on the VM and see the gaps instantly.</p>
|
||||
</div>
|
||||
<div class="stack-preview-card">
|
||||
<span class="stack-title">Public entrypoint</span>
|
||||
<strong>Reverse-proxied URL</strong>
|
||||
<p>Keep the exposed hostname visible in every install brief and detail page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<div class="card">
|
||||
<h1>Analyzing your requirements and generating your app…</h1>
|
||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||
<span class="sr-only">Loading…</span>
|
||||
</div>
|
||||
<p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
|
||||
<p class="hint">This page will refresh automatically as the plan is implemented.</p>
|
||||
<p class="runtime">
|
||||
Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
|
||||
— UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row g-4 align-items-stretch pb-5">
|
||||
<div class="col-xl-7">
|
||||
<div class="glass-panel section-panel h-100">
|
||||
<div class="section-heading-wrap">
|
||||
<div>
|
||||
<span class="section-kicker">Workflow</span>
|
||||
<h2 class="section-title">How the thin slice works</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="roadmap-grid mt-4">
|
||||
{% for step in setup_steps %}
|
||||
<article class="roadmap-card">
|
||||
<span class="roadmap-index">0{{ forloop.counter }}</span>
|
||||
<h3>{{ step.title }}</h3>
|
||||
<p>{{ step.description }}</p>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-5">
|
||||
<div class="glass-panel section-panel h-100">
|
||||
<div class="section-heading-wrap">
|
||||
<div>
|
||||
<span class="section-kicker">Recent activity</span>
|
||||
<h2 class="section-title">Install brief snapshot</h2>
|
||||
</div>
|
||||
<a class="text-link" href="{% url 'brief_list' %}">See all</a>
|
||||
</div>
|
||||
{% if recent_briefs %}
|
||||
<div class="brief-list-preview mt-4">
|
||||
{% for brief in recent_briefs %}
|
||||
<a class="brief-preview-card" href="{% url 'brief_detail' brief.pk %}">
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<div>
|
||||
<h3>{{ brief.title }}</h3>
|
||||
<p>{{ brief.public_url }}</p>
|
||||
</div>
|
||||
<span class="status-pill status-{{ brief.status_tone }}">{{ brief.status_label }}</span>
|
||||
</div>
|
||||
<div class="progress-track progress-{{ brief.ready_services_count }} mt-3"><span></span></div>
|
||||
<div class="progress-copy mt-2">{{ brief.readiness_percent }}% of required services marked ready</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-card mt-4">
|
||||
<h3>No install briefs yet</h3>
|
||||
<p>Create the first brief to generate a hosted Postiz setup blueprint for this machine.</p>
|
||||
<a class="btn btn-highlight" href="{% url 'brief_create' %}">Start the first brief</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
|
||||
</footer>
|
||||
{% endblock %}
|
||||
@ -1,38 +1,3 @@
|
||||
from django.test import TestCase
|
||||
from django.urls import reverse
|
||||
|
||||
from .models import PostizInstallBrief
|
||||
|
||||
|
||||
class PostizPagesTests(TestCase):
|
||||
def test_home_page_loads(self):
|
||||
response = self.client.get(reverse("home"))
|
||||
self.assertEqual(response.status_code, 200)
|
||||
self.assertContains(response, "Plan a native Postiz development install")
|
||||
|
||||
def test_create_brief_flow(self):
|
||||
response = self.client.post(
|
||||
reverse("brief_create"),
|
||||
{
|
||||
"title": "Primary VM",
|
||||
"public_url": "https://postiz.example.com",
|
||||
"node_version": "20 LTS",
|
||||
"package_manager": "pnpm",
|
||||
"postgres_ready": "on",
|
||||
"redis_ready": "on",
|
||||
"temporal_ready": "on",
|
||||
"email_provider": "smtp",
|
||||
"upload_strategy": "local",
|
||||
"notes": "Ready to bootstrap.",
|
||||
},
|
||||
follow=True,
|
||||
)
|
||||
self.assertEqual(response.status_code, 200)
|
||||
self.assertEqual(PostizInstallBrief.objects.count(), 1)
|
||||
brief = PostizInstallBrief.objects.get()
|
||||
self.assertContains(response, brief.title)
|
||||
self.assertContains(response, "Ready for repo bootstrap")
|
||||
|
||||
def test_brief_list_empty_state(self):
|
||||
response = self.client.get(reverse("brief_list"))
|
||||
self.assertContains(response, "No install briefs yet")
|
||||
# Create your tests here.
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
from django.urls import path
|
||||
|
||||
from .views import brief_create, brief_detail, brief_list, home
|
||||
from .views import home
|
||||
|
||||
urlpatterns = [
|
||||
path("", home, name="home"),
|
||||
path("briefs/", brief_list, name="brief_list"),
|
||||
path("briefs/new/", brief_create, name="brief_create"),
|
||||
path("briefs/<int:pk>/", brief_detail, name="brief_detail"),
|
||||
]
|
||||
|
||||
138
core/views.py
138
core/views.py
@ -2,44 +2,18 @@ import os
|
||||
import platform
|
||||
|
||||
from django import get_version as django_version
|
||||
from django.contrib import messages
|
||||
from django.db.models import Count, Q
|
||||
from django.shortcuts import get_object_or_404, redirect, render
|
||||
from django.shortcuts import render
|
||||
from django.utils import timezone
|
||||
|
||||
from .forms import PostizInstallBriefForm
|
||||
from .models import PostizInstallBrief
|
||||
|
||||
|
||||
SETUP_STEPS = [
|
||||
{
|
||||
"title": "Install the runtime",
|
||||
"description": "Get Node.js and the selected package manager onto the VM before cloning Postiz.",
|
||||
},
|
||||
{
|
||||
"title": "Wire prerequisite services",
|
||||
"description": "Confirm PostgreSQL, Redis, and Temporal are reachable before the first app boot.",
|
||||
},
|
||||
{
|
||||
"title": "Bootstrap the repository",
|
||||
"description": "Fill the .env file, install packages, push Prisma schema changes, and start the dev processes.",
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
def base_context(request):
|
||||
def home(request):
|
||||
"""Render the landing screen with loader and environment details."""
|
||||
host_name = request.get_host().lower()
|
||||
agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
|
||||
now = timezone.now()
|
||||
stats = PostizInstallBrief.objects.aggregate(
|
||||
total=Count("id"),
|
||||
ready=Count(
|
||||
"id",
|
||||
filter=Q(postgres_ready=True, redis_ready=True, temporal_ready=True),
|
||||
),
|
||||
)
|
||||
return {
|
||||
"project_name": "Postiz Native Setup Studio",
|
||||
|
||||
context = {
|
||||
"project_name": "New Style",
|
||||
"agent_brand": agent_brand,
|
||||
"django_version": django_version(),
|
||||
"python_version": platform.python_version(),
|
||||
@ -47,105 +21,5 @@ def base_context(request):
|
||||
"host_name": host_name,
|
||||
"project_description": os.getenv("PROJECT_DESCRIPTION", ""),
|
||||
"project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
|
||||
"brief_stats": stats,
|
||||
"setup_steps": SETUP_STEPS,
|
||||
}
|
||||
|
||||
|
||||
def build_blueprint(brief):
|
||||
prerequisites = [
|
||||
{
|
||||
"title": "Node runtime",
|
||||
"ready": True,
|
||||
"detail": f"Use {brief.node_version} with {brief.package_manager} for dependency management.",
|
||||
},
|
||||
{
|
||||
"title": "PostgreSQL",
|
||||
"ready": brief.postgres_ready,
|
||||
"detail": "Prepare DATABASE_URL before copying .env.example to .env.",
|
||||
},
|
||||
{
|
||||
"title": "Redis",
|
||||
"ready": brief.redis_ready,
|
||||
"detail": "Queue workers expect REDIS_URL on the VM.",
|
||||
},
|
||||
{
|
||||
"title": "Temporal stack",
|
||||
"ready": brief.temporal_ready,
|
||||
"detail": "Point TEMPORAL_ADDRESS at the Temporal service before starting dev workflows.",
|
||||
},
|
||||
]
|
||||
|
||||
env_lines = [
|
||||
'DATABASE_URL="postgresql://postiz-user:password@localhost:5432/postiz-db-local"',
|
||||
'REDIS_URL="redis://localhost:6379"',
|
||||
'TEMPORAL_ADDRESS="localhost:7233"',
|
||||
f'FRONTEND_URL="{brief.public_url}"',
|
||||
'NEXT_PUBLIC_BACKEND_URL="http://127.0.0.1:3000"',
|
||||
'BACKEND_INTERNAL_URL="http://127.0.0.1:3000"',
|
||||
]
|
||||
|
||||
command_plan = [
|
||||
"git clone https://github.com/gitroomhq/postiz-app.git",
|
||||
"pnpm install",
|
||||
"pnpm run prisma-db-push",
|
||||
"pnpm run dev",
|
||||
]
|
||||
|
||||
return {
|
||||
"prerequisites": prerequisites,
|
||||
"env_lines": env_lines,
|
||||
"command_plan": command_plan,
|
||||
}
|
||||
|
||||
|
||||
def home(request):
|
||||
context = base_context(request)
|
||||
context.update(
|
||||
{
|
||||
"recent_briefs": PostizInstallBrief.objects.all()[:3],
|
||||
}
|
||||
)
|
||||
return render(request, "core/index.html", context)
|
||||
|
||||
|
||||
def brief_create(request):
|
||||
if request.method == "POST":
|
||||
form = PostizInstallBriefForm(request.POST)
|
||||
if form.is_valid():
|
||||
brief = form.save()
|
||||
messages.success(request, "Install brief saved. Review the generated blueprint below.")
|
||||
return redirect("brief_detail", pk=brief.pk)
|
||||
else:
|
||||
form = PostizInstallBriefForm()
|
||||
|
||||
context = base_context(request)
|
||||
context.update(
|
||||
{
|
||||
"form": form,
|
||||
}
|
||||
)
|
||||
return render(request, "core/brief_form.html", context)
|
||||
|
||||
|
||||
def brief_list(request):
|
||||
context = base_context(request)
|
||||
context.update(
|
||||
{
|
||||
"briefs": PostizInstallBrief.objects.all(),
|
||||
}
|
||||
)
|
||||
return render(request, "core/brief_list.html", context)
|
||||
|
||||
|
||||
def brief_detail(request, pk):
|
||||
brief = get_object_or_404(PostizInstallBrief, pk=pk)
|
||||
blueprint = build_blueprint(brief)
|
||||
context = base_context(request)
|
||||
context.update(
|
||||
{
|
||||
"brief": brief,
|
||||
"blueprint": blueprint,
|
||||
}
|
||||
)
|
||||
return render(request, "core/brief_detail.html", context)
|
||||
|
||||
@ -1 +0,0 @@
|
||||
Subproject commit 386fc7b049737d5047bc83c6c19dd291e22eb28c
|
||||
@ -1,722 +1,4 @@
|
||||
/* Postiz Native Setup Studio */
|
||||
:root {
|
||||
--bg-main: #081220;
|
||||
--bg-panel: rgba(9, 19, 36, 0.72);
|
||||
--bg-panel-strong: rgba(11, 24, 44, 0.92);
|
||||
--line-soft: rgba(167, 243, 208, 0.14);
|
||||
--line-strong: rgba(167, 243, 208, 0.22);
|
||||
--text-main: #f8fafc;
|
||||
--text-soft: #bfd1e3;
|
||||
--text-muted: #8ca0b8;
|
||||
--primary: #0f766e;
|
||||
--primary-strong: #14b8a6;
|
||||
--secondary: #132238;
|
||||
--accent: #f97316;
|
||||
--accent-soft: #fed7aa;
|
||||
--success: #34d399;
|
||||
--danger: #fb7185;
|
||||
--warning: #fbbf24;
|
||||
--shadow-soft: 0 30px 80px rgba(3, 10, 20, 0.45);
|
||||
--radius-xl: 28px;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 16px;
|
||||
--spacing-section: clamp(3rem, 7vw, 5.5rem);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body.app-shell {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: var(--text-main);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(20, 184, 166, 0.24), transparent 32%),
|
||||
radial-gradient(circle at 85% 18%, rgba(249, 115, 22, 0.18), transparent 24%),
|
||||
linear-gradient(180deg, #0b1322 0%, #08111f 48%, #060d19 100%);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body.app-shell::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
|
||||
background-size: 42px 42px;
|
||||
mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 78%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bg-orb {
|
||||
position: fixed;
|
||||
border-radius: 999px;
|
||||
filter: blur(24px);
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bg-orb-one {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 6rem;
|
||||
right: -6rem;
|
||||
background: linear-gradient(135deg, rgba(20, 184, 166, 0.28), rgba(52, 211, 153, 0.14));
|
||||
}
|
||||
|
||||
.bg-orb-two {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
bottom: 8rem;
|
||||
left: -5rem;
|
||||
background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(254, 215, 170, 0.12));
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1,
|
||||
.display-title,
|
||||
.page-title,
|
||||
.section-title,
|
||||
.brand-title {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
label,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
background: rgba(6, 13, 25, 0.52);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--text-main);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-strong));
|
||||
box-shadow: 0 14px 30px rgba(15, 118, 110, 0.32);
|
||||
font-weight: 800;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-soft) !important;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1rem !important;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus-visible {
|
||||
color: #ffffff !important;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-section,
|
||||
.inner-hero {
|
||||
padding-top: var(--spacing-section);
|
||||
}
|
||||
|
||||
.py-lg-6 {
|
||||
padding-top: var(--spacing-section) !important;
|
||||
padding-bottom: var(--spacing-section) !important;
|
||||
}
|
||||
|
||||
.eyebrow-chip,
|
||||
.panel-label,
|
||||
.section-kicker,
|
||||
.info-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 999px;
|
||||
padding: 0.55rem 0.9rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
background: rgba(167, 243, 208, 0.08);
|
||||
color: #dffdf3;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.display-title,
|
||||
.page-title {
|
||||
font-size: clamp(2.75rem, 5vw, 4.8rem);
|
||||
line-height: 0.96;
|
||||
margin: 0;
|
||||
max-width: 12ch;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: clamp(2.3rem, 4vw, 3.6rem);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 60ch;
|
||||
color: var(--text-soft);
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero-copy.small {
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 16px;
|
||||
padding: 0.88rem 1.3rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.btn-highlight {
|
||||
color: #081220;
|
||||
background: linear-gradient(135deg, #5eead4, #facc15);
|
||||
border: none;
|
||||
box-shadow: 0 18px 35px rgba(94, 234, 212, 0.22);
|
||||
}
|
||||
|
||||
.btn-highlight:hover,
|
||||
.btn-highlight:focus-visible {
|
||||
color: #081220;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 24px 45px rgba(94, 234, 212, 0.28);
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
color: var(--text-main);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.btn-outline-light:hover,
|
||||
.btn-outline-light:focus-visible {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: linear-gradient(180deg, rgba(10, 20, 38, 0.86), rgba(6, 15, 29, 0.92));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: var(--shadow-soft);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hero-panel,
|
||||
.section-panel,
|
||||
.brief-card,
|
||||
.summary-card,
|
||||
.setup-form {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-panel::after,
|
||||
.section-panel::after,
|
||||
.setup-form::after,
|
||||
.summary-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto -20% -30% auto;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: radial-gradient(circle, rgba(20, 184, 166, 0.18), transparent 68%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.metric-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.metric-card,
|
||||
.stack-preview-card,
|
||||
.roadmap-card,
|
||||
.brief-preview-card,
|
||||
.info-rail-card,
|
||||
.empty-card,
|
||||
.note-panel,
|
||||
.checklist-item,
|
||||
.command-row {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 1.15rem 1.2rem;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metric-label,
|
||||
.progress-copy,
|
||||
.card-subtitle,
|
||||
.form-hint,
|
||||
.helper-copy,
|
||||
.next-copy,
|
||||
.text-link,
|
||||
.card-subtitle,
|
||||
.stack-preview-card p,
|
||||
.roadmap-card p,
|
||||
.brief-preview-card p,
|
||||
.info-rail-card p,
|
||||
.checklist-item p,
|
||||
.note-panel p {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stack-preview,
|
||||
.info-rail,
|
||||
.roadmap-grid,
|
||||
.brief-list-preview,
|
||||
.checklist-grid,
|
||||
.command-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stack-preview-card,
|
||||
.roadmap-card,
|
||||
.brief-preview-card,
|
||||
.info-rail-card,
|
||||
.empty-card,
|
||||
.note-panel,
|
||||
.checklist-item,
|
||||
.command-row {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.stack-title,
|
||||
.roadmap-index,
|
||||
.command-index {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 3rem;
|
||||
min-height: 3rem;
|
||||
border-radius: 14px;
|
||||
background: rgba(20, 184, 166, 0.12);
|
||||
color: #d7fff7;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stack-preview-card strong,
|
||||
.info-rail-card strong,
|
||||
.card-title,
|
||||
.brief-preview-card h3,
|
||||
.roadmap-card h3,
|
||||
.checklist-item h3,
|
||||
.section-title {
|
||||
display: block;
|
||||
margin: 0.8rem 0 0.5rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.section-heading-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.brief-preview-card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.brief-preview-card:hover,
|
||||
.brief-preview-card:focus-visible,
|
||||
.brief-card:hover,
|
||||
.brief-card:focus-within {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(94, 234, 212, 0.3);
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.8rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background: rgba(52, 211, 153, 0.14);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background: rgba(251, 191, 36, 0.14);
|
||||
color: #fde68a;
|
||||
}
|
||||
|
||||
.status-danger {
|
||||
background: rgba(251, 113, 133, 0.14);
|
||||
color: #fda4af;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-track span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #5eead4, #facc15);
|
||||
}
|
||||
|
||||
.progress-0 span {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.progress-1 span {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.progress-2 span {
|
||||
width: 67%;
|
||||
}
|
||||
|
||||
.progress-3 span {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-rail,
|
||||
.stack-preview,
|
||||
.brief-list-preview,
|
||||
.command-list,
|
||||
.checklist-grid,
|
||||
.roadmap-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.setup-form .form-control,
|
||||
.setup-form .form-select {
|
||||
min-height: 3.5rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ffffff;
|
||||
padding: 0.85rem 1rem;
|
||||
}
|
||||
|
||||
.setup-form textarea.form-control {
|
||||
min-height: 11rem;
|
||||
}
|
||||
|
||||
.setup-form .form-control::placeholder {
|
||||
color: rgba(191, 209, 227, 0.55);
|
||||
}
|
||||
|
||||
.setup-form .form-control:focus,
|
||||
.setup-form .form-select:focus,
|
||||
.form-check-input:focus,
|
||||
.btn:focus-visible,
|
||||
.nav-link:focus-visible,
|
||||
.text-link:focus-visible {
|
||||
box-shadow: 0 0 0 0.25rem rgba(94, 234, 212, 0.18);
|
||||
border-color: rgba(94, 234, 212, 0.45);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-label,
|
||||
.form-check-label {
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.55rem;
|
||||
}
|
||||
|
||||
.form-hint,
|
||||
.helper-copy {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: #fecaca;
|
||||
font-size: 0.93rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.service-readiness-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.service-toggle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.1rem;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: 3rem;
|
||||
height: 1.6rem;
|
||||
margin-top: 0;
|
||||
background-color: rgba(255, 255, 255, 0.16);
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: var(--primary-strong);
|
||||
border-color: var(--primary-strong);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.35rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.detail-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.next-copy {
|
||||
line-height: 1.7;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.readiness-ring {
|
||||
margin-inline: auto;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.readiness-ring.progress-0 {
|
||||
background: conic-gradient(#5eead4 0deg, #5eead4 29deg, rgba(255, 255, 255, 0.08) 29deg);
|
||||
}
|
||||
|
||||
.readiness-ring.progress-1 {
|
||||
background: conic-gradient(#5eead4 0deg, #5eead4 120deg, rgba(255, 255, 255, 0.08) 120deg);
|
||||
}
|
||||
|
||||
.readiness-ring.progress-2 {
|
||||
background: conic-gradient(#5eead4 0deg, #5eead4 240deg, rgba(255, 255, 255, 0.08) 240deg);
|
||||
}
|
||||
|
||||
.readiness-ring.progress-3 {
|
||||
background: conic-gradient(#5eead4 0deg, #5eead4 360deg, rgba(255, 255, 255, 0.08) 360deg);
|
||||
}
|
||||
|
||||
.readiness-ring-inner {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: rgba(7, 16, 30, 0.94);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.readiness-ring-inner strong {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 2.4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.readiness-ring-inner span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.checklist-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
background: rgba(251, 113, 133, 0.55);
|
||||
box-shadow: 0 0 0 8px rgba(251, 113, 133, 0.08);
|
||||
margin-top: 0.45rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checklist-item.is-ready .checklist-dot {
|
||||
background: rgba(52, 211, 153, 0.85);
|
||||
box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.08);
|
||||
}
|
||||
|
||||
.code-panel {
|
||||
padding: 1.25rem;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(4, 10, 20, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.code-panel code,
|
||||
.command-row code {
|
||||
color: #ccfbf1;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.9;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.command-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: #bffef1;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.text-link:hover,
|
||||
.text-link:focus-visible {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.toast-stack {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.glass-alert {
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(11, 24, 44, 0.86);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.metric-row,
|
||||
.service-readiness-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.display-title,
|
||||
.page-title {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.glass-panel {
|
||||
padding: 1.4rem;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.hero-section,
|
||||
.inner-hero,
|
||||
.py-lg-6 {
|
||||
padding-top: 2.5rem !important;
|
||||
padding-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.section-heading-wrap {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.command-row {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* Custom styles for the application */
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
@ -1,722 +1,21 @@
|
||||
/* Postiz Native Setup Studio */
|
||||
|
||||
:root {
|
||||
--bg-main: #081220;
|
||||
--bg-panel: rgba(9, 19, 36, 0.72);
|
||||
--bg-panel-strong: rgba(11, 24, 44, 0.92);
|
||||
--line-soft: rgba(167, 243, 208, 0.14);
|
||||
--line-strong: rgba(167, 243, 208, 0.22);
|
||||
--text-main: #f8fafc;
|
||||
--text-soft: #bfd1e3;
|
||||
--text-muted: #8ca0b8;
|
||||
--primary: #0f766e;
|
||||
--primary-strong: #14b8a6;
|
||||
--secondary: #132238;
|
||||
--accent: #f97316;
|
||||
--accent-soft: #fed7aa;
|
||||
--success: #34d399;
|
||||
--danger: #fb7185;
|
||||
--warning: #fbbf24;
|
||||
--shadow-soft: 0 30px 80px rgba(3, 10, 20, 0.45);
|
||||
--radius-xl: 28px;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 16px;
|
||||
--spacing-section: clamp(3rem, 7vw, 5.5rem);
|
||||
--bg-color-start: #6a11cb;
|
||||
--bg-color-end: #2575fc;
|
||||
--text-color: #ffffff;
|
||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body.app-shell {
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: var(--text-main);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(20, 184, 166, 0.24), transparent 32%),
|
||||
radial-gradient(circle at 85% 18%, rgba(249, 115, 22, 0.18), transparent 24%),
|
||||
linear-gradient(180deg, #0b1322 0%, #08111f 48%, #060d19 100%);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body.app-shell::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
|
||||
background-size: 42px 42px;
|
||||
mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 78%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bg-orb {
|
||||
position: fixed;
|
||||
border-radius: 999px;
|
||||
filter: blur(24px);
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bg-orb-one {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 6rem;
|
||||
right: -6rem;
|
||||
background: linear-gradient(135deg, rgba(20, 184, 166, 0.28), rgba(52, 211, 153, 0.14));
|
||||
}
|
||||
|
||||
.bg-orb-two {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
bottom: 8rem;
|
||||
left: -5rem;
|
||||
background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(254, 215, 170, 0.12));
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1,
|
||||
.display-title,
|
||||
.page-title,
|
||||
.section-title,
|
||||
.brand-title {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
label,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
background: rgba(6, 13, 25, 0.52);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--text-main);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-strong));
|
||||
box-shadow: 0 14px 30px rgba(15, 118, 110, 0.32);
|
||||
font-weight: 800;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-soft) !important;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1rem !important;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus-visible {
|
||||
color: #ffffff !important;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-section,
|
||||
.inner-hero {
|
||||
padding-top: var(--spacing-section);
|
||||
}
|
||||
|
||||
.py-lg-6 {
|
||||
padding-top: var(--spacing-section) !important;
|
||||
padding-bottom: var(--spacing-section) !important;
|
||||
}
|
||||
|
||||
.eyebrow-chip,
|
||||
.panel-label,
|
||||
.section-kicker,
|
||||
.info-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 999px;
|
||||
padding: 0.55rem 0.9rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
background: rgba(167, 243, 208, 0.08);
|
||||
color: #dffdf3;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.display-title,
|
||||
.page-title {
|
||||
font-size: clamp(2.75rem, 5vw, 4.8rem);
|
||||
line-height: 0.96;
|
||||
margin: 0;
|
||||
max-width: 12ch;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: clamp(2.3rem, 4vw, 3.6rem);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 60ch;
|
||||
color: var(--text-soft);
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero-copy.small {
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 16px;
|
||||
padding: 0.88rem 1.3rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.btn-highlight {
|
||||
color: #081220;
|
||||
background: linear-gradient(135deg, #5eead4, #facc15);
|
||||
border: none;
|
||||
box-shadow: 0 18px 35px rgba(94, 234, 212, 0.22);
|
||||
}
|
||||
|
||||
.btn-highlight:hover,
|
||||
.btn-highlight:focus-visible {
|
||||
color: #081220;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 24px 45px rgba(94, 234, 212, 0.28);
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
color: var(--text-main);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.btn-outline-light:hover,
|
||||
.btn-outline-light:focus-visible {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: linear-gradient(180deg, rgba(10, 20, 38, 0.86), rgba(6, 15, 29, 0.92));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: var(--shadow-soft);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hero-panel,
|
||||
.section-panel,
|
||||
.brief-card,
|
||||
.summary-card,
|
||||
.setup-form {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-panel::after,
|
||||
.section-panel::after,
|
||||
.setup-form::after,
|
||||
.summary-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto -20% -30% auto;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: radial-gradient(circle, rgba(20, 184, 166, 0.18), transparent 68%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.metric-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.metric-card,
|
||||
.stack-preview-card,
|
||||
.roadmap-card,
|
||||
.brief-preview-card,
|
||||
.info-rail-card,
|
||||
.empty-card,
|
||||
.note-panel,
|
||||
.checklist-item,
|
||||
.command-row {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 1.15rem 1.2rem;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metric-label,
|
||||
.progress-copy,
|
||||
.card-subtitle,
|
||||
.form-hint,
|
||||
.helper-copy,
|
||||
.next-copy,
|
||||
.text-link,
|
||||
.card-subtitle,
|
||||
.stack-preview-card p,
|
||||
.roadmap-card p,
|
||||
.brief-preview-card p,
|
||||
.info-rail-card p,
|
||||
.checklist-item p,
|
||||
.note-panel p {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stack-preview,
|
||||
.info-rail,
|
||||
.roadmap-grid,
|
||||
.brief-list-preview,
|
||||
.checklist-grid,
|
||||
.command-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stack-preview-card,
|
||||
.roadmap-card,
|
||||
.brief-preview-card,
|
||||
.info-rail-card,
|
||||
.empty-card,
|
||||
.note-panel,
|
||||
.checklist-item,
|
||||
.command-row {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.stack-title,
|
||||
.roadmap-index,
|
||||
.command-index {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 3rem;
|
||||
min-height: 3rem;
|
||||
border-radius: 14px;
|
||||
background: rgba(20, 184, 166, 0.12);
|
||||
color: #d7fff7;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stack-preview-card strong,
|
||||
.info-rail-card strong,
|
||||
.card-title,
|
||||
.brief-preview-card h3,
|
||||
.roadmap-card h3,
|
||||
.checklist-item h3,
|
||||
.section-title {
|
||||
display: block;
|
||||
margin: 0.8rem 0 0.5rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.section-heading-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.brief-preview-card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.brief-preview-card:hover,
|
||||
.brief-preview-card:focus-visible,
|
||||
.brief-card:hover,
|
||||
.brief-card:focus-within {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(94, 234, 212, 0.3);
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.8rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background: rgba(52, 211, 153, 0.14);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background: rgba(251, 191, 36, 0.14);
|
||||
color: #fde68a;
|
||||
}
|
||||
|
||||
.status-danger {
|
||||
background: rgba(251, 113, 133, 0.14);
|
||||
color: #fda4af;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-track span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #5eead4, #facc15);
|
||||
}
|
||||
|
||||
.progress-0 span {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.progress-1 span {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.progress-2 span {
|
||||
width: 67%;
|
||||
}
|
||||
|
||||
.progress-3 span {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-rail,
|
||||
.stack-preview,
|
||||
.brief-list-preview,
|
||||
.command-list,
|
||||
.checklist-grid,
|
||||
.roadmap-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.setup-form .form-control,
|
||||
.setup-form .form-select {
|
||||
min-height: 3.5rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ffffff;
|
||||
padding: 0.85rem 1rem;
|
||||
}
|
||||
|
||||
.setup-form textarea.form-control {
|
||||
min-height: 11rem;
|
||||
}
|
||||
|
||||
.setup-form .form-control::placeholder {
|
||||
color: rgba(191, 209, 227, 0.55);
|
||||
}
|
||||
|
||||
.setup-form .form-control:focus,
|
||||
.setup-form .form-select:focus,
|
||||
.form-check-input:focus,
|
||||
.btn:focus-visible,
|
||||
.nav-link:focus-visible,
|
||||
.text-link:focus-visible {
|
||||
box-shadow: 0 0 0 0.25rem rgba(94, 234, 212, 0.18);
|
||||
border-color: rgba(94, 234, 212, 0.45);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-label,
|
||||
.form-check-label {
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.55rem;
|
||||
}
|
||||
|
||||
.form-hint,
|
||||
.helper-copy {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: #fecaca;
|
||||
font-size: 0.93rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.service-readiness-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.service-toggle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.1rem;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: 3rem;
|
||||
height: 1.6rem;
|
||||
margin-top: 0;
|
||||
background-color: rgba(255, 255, 255, 0.16);
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: var(--primary-strong);
|
||||
border-color: var(--primary-strong);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.35rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.detail-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.next-copy {
|
||||
line-height: 1.7;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.readiness-ring {
|
||||
margin-inline: auto;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.readiness-ring.progress-0 {
|
||||
background: conic-gradient(#5eead4 0deg, #5eead4 29deg, rgba(255, 255, 255, 0.08) 29deg);
|
||||
}
|
||||
|
||||
.readiness-ring.progress-1 {
|
||||
background: conic-gradient(#5eead4 0deg, #5eead4 120deg, rgba(255, 255, 255, 0.08) 120deg);
|
||||
}
|
||||
|
||||
.readiness-ring.progress-2 {
|
||||
background: conic-gradient(#5eead4 0deg, #5eead4 240deg, rgba(255, 255, 255, 0.08) 240deg);
|
||||
}
|
||||
|
||||
.readiness-ring.progress-3 {
|
||||
background: conic-gradient(#5eead4 0deg, #5eead4 360deg, rgba(255, 255, 255, 0.08) 360deg);
|
||||
}
|
||||
|
||||
.readiness-ring-inner {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: rgba(7, 16, 30, 0.94);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.readiness-ring-inner strong {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 2.4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.readiness-ring-inner span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.checklist-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
background: rgba(251, 113, 133, 0.55);
|
||||
box-shadow: 0 0 0 8px rgba(251, 113, 133, 0.08);
|
||||
margin-top: 0.45rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checklist-item.is-ready .checklist-dot {
|
||||
background: rgba(52, 211, 153, 0.85);
|
||||
box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.08);
|
||||
}
|
||||
|
||||
.code-panel {
|
||||
padding: 1.25rem;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(4, 10, 20, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.code-panel code,
|
||||
.command-row code {
|
||||
color: #ccfbf1;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.9;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.command-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: #bffef1;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.text-link:hover,
|
||||
.text-link:focus-visible {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.toast-stack {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.glass-alert {
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(11, 24, 44, 0.86);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.metric-row,
|
||||
.service-readiness-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.display-title,
|
||||
.page-title {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.glass-panel {
|
||||
padding: 1.4rem;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.hero-section,
|
||||
.inner-hero,
|
||||
.py-lg-6 {
|
||||
padding-top: 2.5rem !important;
|
||||
padding-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.section-heading-wrap {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.command-row {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user