Initial project
This commit is contained in:
542
static/surveys/admin.css
Normal file
542
static/surveys/admin.css
Normal file
@@ -0,0 +1,542 @@
|
||||
:root {
|
||||
--font-family-primary: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
--survey-radius: 8px;
|
||||
}
|
||||
|
||||
:root,
|
||||
html[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
--primary: #0f766e;
|
||||
--secondary: #2563eb;
|
||||
--accent: #0f766e;
|
||||
--primary-fg: #ffffff;
|
||||
|
||||
--body-bg: #f4f7fb;
|
||||
--body-fg: #172033;
|
||||
--body-quiet-color: #64748b;
|
||||
--body-medium-color: #475569;
|
||||
--body-loud-color: #0f172a;
|
||||
|
||||
--header-bg: #102033;
|
||||
--header-color: #ffffff;
|
||||
--header-branding-color: #ffffff;
|
||||
--header-link-color: #dbeafe;
|
||||
|
||||
--breadcrumbs-bg: #172a3f;
|
||||
--breadcrumbs-fg: #dbeafe;
|
||||
--breadcrumbs-link-fg: #ffffff;
|
||||
|
||||
--link-fg: #0f766e;
|
||||
--link-hover-color: #2563eb;
|
||||
--link-selected-fg: #0f766e;
|
||||
|
||||
--hairline-color: #e2e8f0;
|
||||
--border-color: #cbd5e1;
|
||||
--darkened-bg: #eef3f8;
|
||||
--selected-bg: #e2f5f2;
|
||||
--selected-row: #ecfdf5;
|
||||
|
||||
--button-fg: #ffffff;
|
||||
--button-bg: #0f766e;
|
||||
--button-hover-bg: #115e59;
|
||||
--default-button-bg: #2563eb;
|
||||
--default-button-hover-bg: #1d4ed8;
|
||||
--close-button-bg: #475569;
|
||||
--close-button-hover-bg: #334155;
|
||||
--delete-button-bg: #dc2626;
|
||||
--delete-button-hover-bg: #b91c1c;
|
||||
--object-tools-fg: #ffffff;
|
||||
--object-tools-bg: #0f766e;
|
||||
--object-tools-hover-bg: #115e59;
|
||||
|
||||
--message-success-bg: #dcfce7;
|
||||
--message-warning-bg: #fef3c7;
|
||||
--message-error-bg: #fee2e2;
|
||||
--error-fg: #b91c1c;
|
||||
|
||||
--survey-surface: #ffffff;
|
||||
--survey-surface-muted: #f8fafc;
|
||||
--survey-input-bg: #ffffff;
|
||||
--survey-input-border: #cbd5e1;
|
||||
--survey-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
|
||||
--survey-focus: rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--primary: #0f766e;
|
||||
--secondary: #3b82f6;
|
||||
--accent: #2dd4bf;
|
||||
--primary-fg: #f8fafc;
|
||||
|
||||
--body-bg: #0b1020;
|
||||
--body-fg: #e5edf7;
|
||||
--body-quiet-color: #9aa8ba;
|
||||
--body-medium-color: #cbd5e1;
|
||||
--body-loud-color: #ffffff;
|
||||
|
||||
--header-bg: #0b1020;
|
||||
--header-color: #f8fafc;
|
||||
--header-branding-color: #ffffff;
|
||||
--header-link-color: #cbd5e1;
|
||||
|
||||
--breadcrumbs-bg: #111827;
|
||||
--breadcrumbs-fg: #cbd5e1;
|
||||
--breadcrumbs-link-fg: #ffffff;
|
||||
|
||||
--link-fg: #5eead4;
|
||||
--link-hover-color: #93c5fd;
|
||||
--link-selected-fg: #7dd3fc;
|
||||
|
||||
--hairline-color: #243044;
|
||||
--border-color: #334155;
|
||||
--darkened-bg: #111827;
|
||||
--selected-bg: #172033;
|
||||
--selected-row: #12342f;
|
||||
|
||||
--button-fg: #ffffff;
|
||||
--button-bg: #0f766e;
|
||||
--button-hover-bg: #0d9488;
|
||||
--default-button-bg: #2563eb;
|
||||
--default-button-hover-bg: #1d4ed8;
|
||||
--close-button-bg: #334155;
|
||||
--close-button-hover-bg: #475569;
|
||||
--delete-button-bg: #dc2626;
|
||||
--delete-button-hover-bg: #b91c1c;
|
||||
--object-tools-fg: #ffffff;
|
||||
--object-tools-bg: #0f766e;
|
||||
--object-tools-hover-bg: #0d9488;
|
||||
|
||||
--message-success-bg: #064e3b;
|
||||
--message-warning-bg: #78350f;
|
||||
--message-error-bg: #7f1d1d;
|
||||
--error-fg: #fca5a5;
|
||||
|
||||
--survey-surface: #111827;
|
||||
--survey-surface-muted: #0f172a;
|
||||
--survey-input-bg: #0b1220;
|
||||
--survey-input-border: #475569;
|
||||
--survey-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
--survey-focus: rgba(59, 130, 246, 0.28);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]),
|
||||
html[data-theme="auto"] {
|
||||
color-scheme: dark;
|
||||
--primary: #0f766e;
|
||||
--secondary: #3b82f6;
|
||||
--accent: #2dd4bf;
|
||||
--primary-fg: #f8fafc;
|
||||
--body-bg: #0b1020;
|
||||
--body-fg: #e5edf7;
|
||||
--body-quiet-color: #9aa8ba;
|
||||
--body-medium-color: #cbd5e1;
|
||||
--body-loud-color: #ffffff;
|
||||
--header-bg: #0b1020;
|
||||
--header-color: #f8fafc;
|
||||
--header-branding-color: #ffffff;
|
||||
--header-link-color: #cbd5e1;
|
||||
--breadcrumbs-bg: #111827;
|
||||
--breadcrumbs-fg: #cbd5e1;
|
||||
--breadcrumbs-link-fg: #ffffff;
|
||||
--link-fg: #5eead4;
|
||||
--link-hover-color: #93c5fd;
|
||||
--link-selected-fg: #7dd3fc;
|
||||
--hairline-color: #243044;
|
||||
--border-color: #334155;
|
||||
--darkened-bg: #111827;
|
||||
--selected-bg: #172033;
|
||||
--selected-row: #12342f;
|
||||
--button-fg: #ffffff;
|
||||
--button-bg: #0f766e;
|
||||
--button-hover-bg: #0d9488;
|
||||
--default-button-bg: #2563eb;
|
||||
--default-button-hover-bg: #1d4ed8;
|
||||
--close-button-bg: #334155;
|
||||
--close-button-hover-bg: #475569;
|
||||
--delete-button-bg: #dc2626;
|
||||
--delete-button-hover-bg: #b91c1c;
|
||||
--object-tools-fg: #ffffff;
|
||||
--object-tools-bg: #0f766e;
|
||||
--object-tools-hover-bg: #0d9488;
|
||||
--message-success-bg: #064e3b;
|
||||
--message-warning-bg: #78350f;
|
||||
--message-error-bg: #7f1d1d;
|
||||
--error-fg: #fca5a5;
|
||||
--survey-surface: #111827;
|
||||
--survey-surface-muted: #0f172a;
|
||||
--survey-input-bg: #0b1220;
|
||||
--survey-input-border: #475569;
|
||||
--survey-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
--survey-focus: rgba(59, 130, 246, 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--body-fg);
|
||||
font-family: var(--font-family-primary);
|
||||
}
|
||||
|
||||
#container,
|
||||
.main {
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
#header {
|
||||
background: var(--header-bg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
box-shadow: none;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
#branding h1,
|
||||
#branding h1 a:link,
|
||||
#branding h1 a:visited,
|
||||
#site-name,
|
||||
#site-name a:link,
|
||||
#site-name a:visited {
|
||||
color: var(--header-branding-color);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
#user-tools,
|
||||
#user-tools a,
|
||||
#logout-form button {
|
||||
color: var(--header-link-color);
|
||||
}
|
||||
|
||||
div.breadcrumbs {
|
||||
background: var(--breadcrumbs-bg);
|
||||
border: 0;
|
||||
color: var(--breadcrumbs-fg);
|
||||
}
|
||||
|
||||
div.breadcrumbs a {
|
||||
color: var(--breadcrumbs-link-fg);
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.module,
|
||||
.inline-group,
|
||||
.submit-row,
|
||||
#changelist,
|
||||
.paginator,
|
||||
fieldset.module.aligned,
|
||||
#content-related,
|
||||
#changelist-filter {
|
||||
background: var(--survey-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--survey-radius);
|
||||
box-shadow: var(--survey-shadow);
|
||||
color: var(--body-fg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.module h2,
|
||||
.module caption,
|
||||
.inline-group h2,
|
||||
#changelist-filter h2 {
|
||||
background: var(--survey-surface-muted);
|
||||
border-bottom: 1px solid var(--hairline-color);
|
||||
color: var(--body-loud-color);
|
||||
font-size: 0.86rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.35;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.module table,
|
||||
#changelist table {
|
||||
background: var(--survey-surface);
|
||||
}
|
||||
|
||||
table thead th,
|
||||
thead th,
|
||||
tfoot td {
|
||||
background: var(--survey-surface-muted);
|
||||
border-bottom: 1px solid var(--hairline-color);
|
||||
color: var(--body-medium-color);
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom-color: var(--hairline-color);
|
||||
}
|
||||
|
||||
tr.row1,
|
||||
tbody tr {
|
||||
background: var(--survey-surface);
|
||||
}
|
||||
|
||||
tr.row2,
|
||||
tbody tr:nth-child(even) {
|
||||
background: var(--survey-surface-muted);
|
||||
}
|
||||
|
||||
tbody tr:hover,
|
||||
tbody tr:focus-within {
|
||||
background: var(--selected-row);
|
||||
}
|
||||
|
||||
.form-row,
|
||||
.aligned .form-row {
|
||||
border-bottom-color: var(--hairline-color);
|
||||
padding: 14px 12px;
|
||||
}
|
||||
|
||||
label,
|
||||
.aligned label,
|
||||
.required label,
|
||||
td,
|
||||
th,
|
||||
.module p,
|
||||
.module ul,
|
||||
.module ol {
|
||||
color: var(--body-fg);
|
||||
}
|
||||
|
||||
.help,
|
||||
p.help,
|
||||
form p.help,
|
||||
div.help,
|
||||
form div.help,
|
||||
div.help li,
|
||||
.quiet,
|
||||
.small,
|
||||
.mini,
|
||||
.helptext,
|
||||
.datetime span,
|
||||
.timezonewarning,
|
||||
.deletelink-box {
|
||||
color: var(--body-quiet-color);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
textarea,
|
||||
select,
|
||||
.vTextField,
|
||||
.vURLField,
|
||||
.vIntegerField,
|
||||
.vBigIntegerField,
|
||||
.vForeignKeyRawIdAdminField,
|
||||
.vDateField,
|
||||
.vTimeField {
|
||||
background: var(--survey-input-bg);
|
||||
border: 1px solid var(--survey-input-border);
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
color: var(--body-fg);
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: var(--secondary);
|
||||
box-shadow: 0 0 0 3px var(--survey-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select option {
|
||||
background: var(--survey-input-bg);
|
||||
color: var(--body-fg);
|
||||
}
|
||||
|
||||
.button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
.submit-row input,
|
||||
a.button {
|
||||
border-radius: 6px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
.submit-row input.default,
|
||||
.button.default {
|
||||
background: var(--default-button-bg);
|
||||
color: var(--button-fg);
|
||||
}
|
||||
|
||||
input[type="submit"]:hover,
|
||||
input[type="button"]:hover,
|
||||
.submit-row input.default:hover,
|
||||
.button.default:hover {
|
||||
background: var(--default-button-hover-bg);
|
||||
}
|
||||
|
||||
.object-tools a,
|
||||
.object-tools a:link,
|
||||
.object-tools a:visited {
|
||||
background: var(--object-tools-bg);
|
||||
border-radius: 6px;
|
||||
color: var(--object-tools-fg);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.object-tools a:hover {
|
||||
background: var(--object-tools-hover-bg);
|
||||
color: var(--object-tools-fg);
|
||||
}
|
||||
|
||||
.submit-row {
|
||||
background: var(--survey-surface-muted);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.submit-row a.deletelink,
|
||||
.submit-row a.deletelink:link,
|
||||
.submit-row a.deletelink:visited {
|
||||
background: var(--delete-button-bg);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.submit-row a.deletelink:hover {
|
||||
background: var(--delete-button-hover-bg);
|
||||
}
|
||||
|
||||
#changelist-filter {
|
||||
border-left: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
#changelist-filter a,
|
||||
#changelist-filter details > summary {
|
||||
color: var(--body-medium-color);
|
||||
}
|
||||
|
||||
#changelist-filter li.selected a,
|
||||
#changelist-filter a:hover {
|
||||
color: var(--link-fg);
|
||||
}
|
||||
|
||||
#toolbar,
|
||||
#changelist-search,
|
||||
#changelist .actions {
|
||||
background: var(--survey-surface-muted);
|
||||
border-color: var(--hairline-color);
|
||||
}
|
||||
|
||||
.paginator {
|
||||
color: var(--body-medium-color);
|
||||
}
|
||||
|
||||
.messagelist li {
|
||||
border-radius: var(--survey-radius);
|
||||
box-shadow: var(--survey-shadow);
|
||||
color: var(--body-loud-color);
|
||||
}
|
||||
|
||||
ul.messagelist li.success {
|
||||
background-color: var(--message-success-bg);
|
||||
}
|
||||
|
||||
ul.messagelist li.warning {
|
||||
background-color: var(--message-warning-bg);
|
||||
}
|
||||
|
||||
ul.messagelist li.error {
|
||||
background-color: var(--message-error-bg);
|
||||
}
|
||||
|
||||
.selector,
|
||||
.selector-available,
|
||||
.selector-chosen,
|
||||
.selector-available h2,
|
||||
.selector-chosen h2,
|
||||
.calendarbox,
|
||||
.clockbox,
|
||||
.related-widget-wrapper-link,
|
||||
.datetimeshortcuts a {
|
||||
background: var(--survey-surface);
|
||||
border-color: var(--border-color);
|
||||
color: var(--body-fg);
|
||||
}
|
||||
|
||||
.calendar td,
|
||||
.calendar th,
|
||||
.calendar caption,
|
||||
.clockbox h2 {
|
||||
background: var(--survey-surface);
|
||||
color: var(--body-fg);
|
||||
}
|
||||
|
||||
.calendar td.selected a,
|
||||
.calendar td a:hover {
|
||||
background: var(--selected-row);
|
||||
}
|
||||
|
||||
body.login {
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
body.login #container {
|
||||
background: var(--body-bg);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body.login #content {
|
||||
background: var(--survey-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--survey-radius);
|
||||
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
|
||||
margin-top: 48px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
body.login #content-main,
|
||||
body.login form,
|
||||
body.login .form-row {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body.login .form-row {
|
||||
border-bottom: 0;
|
||||
padding: 0 0 18px;
|
||||
}
|
||||
|
||||
body.login .submit-row {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#content {
|
||||
padding: 18px 12px;
|
||||
}
|
||||
|
||||
.module,
|
||||
.inline-group,
|
||||
.submit-row,
|
||||
#changelist,
|
||||
#content-related,
|
||||
#changelist-filter {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
379
static/surveys/site.css
Normal file
379
static/surveys/site.css
Normal file
@@ -0,0 +1,379 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #12212f;
|
||||
--muted: #607084;
|
||||
--line: #dbe3ee;
|
||||
--panel: #ffffff;
|
||||
--soft: #f5f8fb;
|
||||
--teal: #0f766e;
|
||||
--blue: #1d4ed8;
|
||||
--gold: #f59e0b;
|
||||
--rose: #be123c;
|
||||
--shadow: 0 20px 60px rgba(18, 33, 47, 0.12);
|
||||
--font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--soft);
|
||||
color: var(--ink);
|
||||
font-family: var(--font);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-bottom: 1px solid var(--line);
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
justify-content: space-between;
|
||||
min-height: 72px;
|
||||
padding: 0 42px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.brand {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
font-weight: 800;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
align-items: center;
|
||||
background: var(--teal);
|
||||
border-radius: 8px;
|
||||
color: #ffffff;
|
||||
display: inline-flex;
|
||||
height: 34px;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.top-nav a,
|
||||
.button {
|
||||
border-radius: 8px;
|
||||
font-weight: 750;
|
||||
min-height: 40px;
|
||||
padding: 10px 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-nav a:hover,
|
||||
.button.secondary:hover {
|
||||
background: #eaf1f8;
|
||||
}
|
||||
|
||||
.top-nav .nav-action,
|
||||
.button.primary {
|
||||
background: var(--ink);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 42px;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
|
||||
min-height: 560px;
|
||||
padding: 72px 42px 54px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 740px;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.label {
|
||||
color: var(--teal);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0 0 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(3rem, 8vw, 6.5rem);
|
||||
line-height: 0.95;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-text,
|
||||
.lead {
|
||||
color: var(--muted);
|
||||
font-size: 1.18rem;
|
||||
line-height: 1.7;
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.button {
|
||||
align-items: center;
|
||||
border: 1px solid var(--line);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-band {
|
||||
background: var(--ink);
|
||||
color: #ffffff;
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.status-band div {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
padding: 24px 42px;
|
||||
}
|
||||
|
||||
.status-band .label {
|
||||
color: #93e2d7;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.status-band a {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.overview {
|
||||
padding: 72px 42px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
max-width: 780px;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.doc-content h1 {
|
||||
font-size: clamp(2.4rem, 5vw, 4.6rem);
|
||||
line-height: 1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
min-height: 230px;
|
||||
padding: 26px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-card p,
|
||||
.doc-content p,
|
||||
.doc-content li {
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.feature-number {
|
||||
color: var(--rose);
|
||||
display: block;
|
||||
font-weight: 850;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.doc-layout {
|
||||
display: grid;
|
||||
gap: 38px;
|
||||
grid-template-columns: 230px minmax(0, 900px);
|
||||
padding: 52px 42px 82px;
|
||||
}
|
||||
|
||||
.doc-toc {
|
||||
align-self: start;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 12px;
|
||||
position: sticky;
|
||||
top: 96px;
|
||||
}
|
||||
|
||||
.doc-toc a {
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
font-weight: 750;
|
||||
padding: 10px 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.doc-toc a:hover {
|
||||
background: #edf4f8;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 42px;
|
||||
}
|
||||
|
||||
.doc-content section {
|
||||
border-top: 1px solid var(--line);
|
||||
margin-top: 34px;
|
||||
padding-top: 34px;
|
||||
}
|
||||
|
||||
.doc-content h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #12212f;
|
||||
border-radius: 8px;
|
||||
color: #f8fafc;
|
||||
overflow-x: auto;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.endpoint-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.endpoint-list div {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.endpoint-list span {
|
||||
background: #dff8f3;
|
||||
border-radius: 6px;
|
||||
color: var(--teal);
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 850;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.endpoint-list code {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.site-header,
|
||||
.hero,
|
||||
.overview,
|
||||
.doc-layout {
|
||||
padding-left: 22px;
|
||||
padding-right: 22px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.status-band,
|
||||
.feature-grid,
|
||||
.doc-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.doc-toc {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.site-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
||||
.status-band div,
|
||||
.doc-content {
|
||||
padding: 22px;
|
||||
}
|
||||
}
|
||||
30
static/surveys/survey-flow.svg
Normal file
30
static/surveys/survey-flow.svg
Normal file
@@ -0,0 +1,30 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="980" height="720" viewBox="0 0 980 720" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Survey workflow</title>
|
||||
<desc id="desc">Admin creates a survey, publishes it to the API, and clients submit responses.</desc>
|
||||
<rect width="980" height="720" fill="#f8fbfd"/>
|
||||
<rect x="58" y="64" width="864" height="592" rx="24" fill="#ffffff" stroke="#dbe3ee" stroke-width="2"/>
|
||||
<rect x="108" y="118" width="230" height="150" rx="14" fill="#ecfdf5" stroke="#99f6e4" stroke-width="2"/>
|
||||
<rect x="375" y="118" width="230" height="150" rx="14" fill="#eff6ff" stroke="#bfdbfe" stroke-width="2"/>
|
||||
<rect x="642" y="118" width="230" height="150" rx="14" fill="#fff7ed" stroke="#fed7aa" stroke-width="2"/>
|
||||
<text x="138" y="160" fill="#0f766e" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="800">Admin</text>
|
||||
<text x="405" y="160" fill="#1d4ed8" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="800">Published API</text>
|
||||
<text x="672" y="160" fill="#b45309" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="800">Responses</text>
|
||||
<text x="138" y="202" fill="#334155" font-family="Inter, Arial, sans-serif" font-size="17">Create surveys</text>
|
||||
<text x="138" y="232" fill="#334155" font-family="Inter, Arial, sans-serif" font-size="17">Add questions</text>
|
||||
<text x="405" y="202" fill="#334155" font-family="Inter, Arial, sans-serif" font-size="17">Fetch schema</text>
|
||||
<text x="405" y="232" fill="#334155" font-family="Inter, Arial, sans-serif" font-size="17">Render forms</text>
|
||||
<text x="672" y="202" fill="#334155" font-family="Inter, Arial, sans-serif" font-size="17">Validate answers</text>
|
||||
<text x="672" y="232" fill="#334155" font-family="Inter, Arial, sans-serif" font-size="17">Store results</text>
|
||||
<path d="M348 193H365" stroke="#64748b" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M592 193H622" stroke="#64748b" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M358 181L371 193L358 205" fill="none" stroke="#64748b" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M612 181L625 193L612 205" fill="none" stroke="#64748b" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="108" y="338" width="764" height="222" rx="16" fill="#12212f"/>
|
||||
<text x="146" y="386" fill="#93e2d7" font-family="Consolas, monospace" font-size="17" font-weight="700">POST /api/surveys/customer-feedback/responses/</text>
|
||||
<text x="146" y="430" fill="#ffffff" font-family="Consolas, monospace" font-size="16">{</text>
|
||||
<text x="176" y="462" fill="#dbeafe" font-family="Consolas, monospace" font-size="16">"question": "experience",</text>
|
||||
<text x="176" y="494" fill="#fde68a" font-family="Consolas, monospace" font-size="16">"choice": "good"</text>
|
||||
<text x="146" y="526" fill="#ffffff" font-family="Consolas, monospace" font-size="16">}</text>
|
||||
<circle cx="770" cy="448" r="54" fill="#0f766e"/>
|
||||
<path d="M744 449L762 467L798 424" fill="none" stroke="#ffffff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
Reference in New Issue
Block a user