1295 lines
33 KiB
HTML
1295 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>FormCraft - Scandinavian Industrial Form Management</title>
|
|
<style>
|
|
:root {
|
|
--color-bg: #f7f7f7;
|
|
--color-surface: #ffffff;
|
|
--color-primary: #3a4750; /* Dark grayish blue */
|
|
--color-secondary: #d8d8d8; /* Light gray */
|
|
--color-accent: #b06f42; /* Warm wood/leather brown */
|
|
--color-text: #2d3436; /* Dark gray */
|
|
--color-text-light: #636e72; /* Medium gray */
|
|
--color-border: #e0e0e0; /* Light border gray */
|
|
--color-success: #2e7d32; /* Green */
|
|
--color-success-bg: #e8f5e9;
|
|
--color-pending: #ff8f00; /* Amber */
|
|
--color-pending-bg: #fff8e1;
|
|
--color-archived: #757575; /* Medium-dark gray */
|
|
--color-archived-bg: #eeeeee;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
--border-radius: 6px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
background-color: var(--color-surface);
|
|
box-shadow: var(--shadow-sm);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 16px 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-weight: 600;
|
|
font-size: 1.25rem;
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logo-icon {
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--border-radius);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: var(--color-text);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
padding: 8px 0;
|
|
position: relative;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.nav-links a.active {
|
|
color: var(--color-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-links a.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -2px; /* Adjusted for visual alignment */
|
|
left: 0;
|
|
height: 2px;
|
|
width: 100%;
|
|
background-color: var(--color-accent);
|
|
}
|
|
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px; /* Increased gap */
|
|
}
|
|
|
|
.notifications {
|
|
position: relative;
|
|
cursor: pointer;
|
|
color: var(--color-text-light);
|
|
transition: color 0.2s ease;
|
|
}
|
|
.notifications:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.notifications-count {
|
|
position: absolute;
|
|
top: -6px; /* Adjusted for visibility */
|
|
right: -8px; /* Adjusted for visibility */
|
|
background-color: var(--color-accent);
|
|
color: white;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
min-width: 18px; /* Use min-width */
|
|
height: 18px;
|
|
padding: 0 4px; /* Add padding for wider numbers */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9px; /* Pill shape */
|
|
border: 1px solid var(--color-surface); /* Border to separate from icon */
|
|
}
|
|
|
|
.avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
.avatar:hover {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* Main content */
|
|
main {
|
|
flex: 1;
|
|
padding: 32px 0;
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: var(--color-text-light);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.breadcrumb a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
.breadcrumb span:last-child {
|
|
color: var(--color-text); /* Current page */
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dashboard-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
flex-wrap: wrap; /* Allow wrapping on smaller screens */
|
|
gap: 16px; /* Add gap for wrapping */
|
|
}
|
|
|
|
.dashboard-title {
|
|
font-size: 1.75rem; /* Slightly larger title */
|
|
font-weight: 600;
|
|
color: var(--color-primary);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.button {
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 18px; /* Slightly more padding */
|
|
border-radius: var(--border-radius);
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
display: inline-flex; /* Use inline-flex */
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none; /* Ensure links used as buttons look right */
|
|
line-height: 1.5; /* Ensure consistent height */
|
|
}
|
|
|
|
.button svg {
|
|
margin-bottom: -2px; /* Fine-tune icon alignment */
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #2c373f; /* Slightly darker hover */
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.button:active {
|
|
background-color: #1e2a31; /* Even darker active state */
|
|
}
|
|
|
|
.button-secondary {
|
|
background-color: var(--color-surface);
|
|
color: var(--color-primary);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.button-secondary:hover {
|
|
background-color: #f8f8f8; /* Subtle hover for secondary */
|
|
border-color: #d0d0d0;
|
|
}
|
|
.button-secondary:active {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
/* Stats row */
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(
|
|
auto-fit,
|
|
minmax(200px, 1fr)
|
|
); /* Responsive columns */
|
|
gap: 20px; /* Slightly larger gap */
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.stat-card {
|
|
background-color: var(--color-surface);
|
|
border-radius: var(--border-radius);
|
|
padding: 20px;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.stat-title {
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-light);
|
|
margin-bottom: 8px;
|
|
font-weight: 500; /* Slightly bolder */
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.75rem; /* Larger value */
|
|
font-weight: 600;
|
|
color: var(--color-primary);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: 0.8rem;
|
|
color: var(--color-success);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-top: 8px; /* More space */
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-change svg {
|
|
margin-bottom: -1px; /* Align icon */
|
|
}
|
|
|
|
.stat-change.negative {
|
|
color: #e74c3c; /* Standard red for negative */
|
|
}
|
|
|
|
/* Forms grid section */
|
|
.forms-section {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px; /* Increased spacing */
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.25rem; /* Larger section title */
|
|
font-weight: 600;
|
|
color: var(--color-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.section-title svg {
|
|
color: var(--color-accent); /* Accent color for icons */
|
|
}
|
|
|
|
.forms-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(
|
|
auto-fit,
|
|
minmax(280px, 1fr)
|
|
); /* Responsive grid */
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-card {
|
|
background-color: var(--color-surface);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border);
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
flex-direction: column; /* Ensure footer stays at bottom */
|
|
}
|
|
|
|
.form-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.form-card-header {
|
|
padding: 16px;
|
|
background-color: #fcfcfc; /* Slightly off-white header */
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-title {
|
|
font-weight: 600; /* Bolder title */
|
|
font-size: 1rem;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.form-menu {
|
|
color: var(--color-text-light);
|
|
cursor: pointer;
|
|
padding: 4px; /* Easier to click */
|
|
border-radius: 50%;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
.form-menu:hover {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.form-content {
|
|
padding: 16px;
|
|
flex-grow: 1; /* Allow content to expand */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-stats {
|
|
display: flex;
|
|
gap: 24px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-stat-value {
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.form-stat-label {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 8px; /* Slightly thicker */
|
|
background-color: var(--color-secondary);
|
|
border-radius: 4px; /* Rounded */
|
|
overflow: hidden;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background-color: var(--color-accent);
|
|
border-radius: 4px; /* Match parent */
|
|
transition: width 0.5s ease-out;
|
|
}
|
|
|
|
.form-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: auto; /* Push to bottom */
|
|
}
|
|
|
|
.form-date {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
.form-badge {
|
|
font-size: 0.75rem;
|
|
padding: 4px 10px; /* More padding */
|
|
border-radius: 12px; /* Pill shape */
|
|
font-weight: 500;
|
|
line-height: 1.2; /* Ensure consistent height */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.form-badge.active {
|
|
background-color: var(--color-success-bg);
|
|
color: var(--color-success);
|
|
}
|
|
.form-badge.pending {
|
|
background-color: var(--color-pending-bg);
|
|
color: var(--color-pending);
|
|
}
|
|
.form-badge.archived,
|
|
.form-badge.inactive {
|
|
/* Use same style for inactive/archived */
|
|
background-color: var(--color-archived-bg);
|
|
color: var(--color-archived);
|
|
}
|
|
|
|
/* Recent submissions Table */
|
|
.submissions-table-wrapper {
|
|
overflow-x: auto; /* Allow horizontal scroll on small screens */
|
|
background-color: var(--color-surface);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.submissions-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 600px; /* Prevent excessive squeezing */
|
|
}
|
|
|
|
.submissions-table th,
|
|
.submissions-table td {
|
|
padding: 14px 16px; /* More vertical padding */
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--color-border);
|
|
vertical-align: middle; /* Align content vertically */
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.submissions-table th {
|
|
font-weight: 600; /* Bolder headings */
|
|
color: var(--color-text-light);
|
|
font-size: 0.85rem;
|
|
background-color: #fcfcfc; /* Match card header */
|
|
white-space: nowrap; /* Prevent headers breaking */
|
|
}
|
|
.submissions-table th:first-child {
|
|
border-top-left-radius: var(--border-radius);
|
|
}
|
|
.submissions-table th:last-child {
|
|
border-top-right-radius: var(--border-radius);
|
|
text-align: right; /* Align actions header right */
|
|
}
|
|
|
|
.submissions-table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.submissions-table tbody tr:hover {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.submissions-table td:last-child {
|
|
text-align: right; /* Align actions cell right */
|
|
}
|
|
|
|
.table-actions {
|
|
display: flex;
|
|
gap: 16px; /* More space between icons */
|
|
justify-content: flex-end; /* Align to the right */
|
|
}
|
|
|
|
.table-action {
|
|
color: var(--color-text-light);
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
display: flex; /* Helps align icons if needed */
|
|
align-items: center;
|
|
}
|
|
|
|
.table-action:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
.table-action.delete:hover {
|
|
color: #e74c3c; /* Red hover for delete */
|
|
}
|
|
|
|
/* Industrial elements */
|
|
.industrial-divider {
|
|
height: 1px; /* Thinner divider */
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--color-border),
|
|
var(--color-primary),
|
|
var(--color-border)
|
|
);
|
|
margin: 40px 0; /* More margin */
|
|
border: none;
|
|
}
|
|
|
|
.industrial-frame {
|
|
position: relative;
|
|
padding: 24px;
|
|
background-color: var(--color-surface);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow-sm);
|
|
margin-bottom: 32px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.industrial-corner {
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-color: var(--color-accent);
|
|
border-style: solid;
|
|
border-width: 2px; /* Standard border width */
|
|
opacity: 0.7; /* Slightly subtle */
|
|
}
|
|
|
|
.top-left {
|
|
top: 8px; /* Offset from edge */
|
|
left: 8px;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.top-right {
|
|
top: 8px;
|
|
right: 8px;
|
|
border-left: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.bottom-left {
|
|
bottom: 8px;
|
|
left: 8px;
|
|
border-right: none;
|
|
border-top: none;
|
|
}
|
|
|
|
.bottom-right {
|
|
bottom: 8px;
|
|
right: 8px;
|
|
border-left: none;
|
|
border-top: none;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background-color: var(--color-primary);
|
|
color: rgba(255, 255, 255, 0.8); /* Lighter text */
|
|
padding: 32px 0; /* More padding */
|
|
margin-top: auto; /* Push to bottom */
|
|
border-top: 4px solid var(--color-accent); /* Accent top border */
|
|
}
|
|
|
|
.footer-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap; /* Allow wrapping */
|
|
gap: 16px;
|
|
}
|
|
|
|
.footer-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 500;
|
|
color: white; /* White logo text */
|
|
font-size: 1rem;
|
|
text-decoration: none;
|
|
}
|
|
.footer-logo .logo-icon {
|
|
background-color: white;
|
|
color: var(--color-primary); /* Inverted colors */
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 24px;
|
|
flex-wrap: wrap; /* Allow wrapping */
|
|
}
|
|
|
|
.footer-links a {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.footer-copy {
|
|
font-size: 0.85rem;
|
|
width: 100%; /* Take full width if wrapped */
|
|
text-align: center; /* Center copyright if wrapped */
|
|
margin-top: 16px; /* Add space if wrapped */
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 992px) {
|
|
/* Already handled by auto-fit grids */
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
display: none; /* Consider a mobile menu toggle instead */
|
|
}
|
|
.dashboard-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.footer-content {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
.footer-links {
|
|
justify-content: center;
|
|
}
|
|
.footer-copy {
|
|
margin-top: 0; /* Reset margin */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.container {
|
|
padding: 0 16px;
|
|
}
|
|
.dashboard-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
.section-title {
|
|
font-size: 1.1rem;
|
|
}
|
|
.button {
|
|
padding: 8px 14px;
|
|
font-size: 0.85rem;
|
|
}
|
|
.stats-row,
|
|
.forms-grid {
|
|
gap: 16px;
|
|
}
|
|
.stat-card,
|
|
.form-card,
|
|
.industrial-frame {
|
|
padding: 16px;
|
|
}
|
|
.submissions-table th,
|
|
.submissions-table td {
|
|
padding: 12px 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="container header-content">
|
|
<a href="#" class="logo">
|
|
<div class="logo-icon">FC</div>
|
|
FormCraft
|
|
</a>
|
|
<nav class="nav-links">
|
|
<a href="#" class="active">Dashboard</a>
|
|
<a href="#">Forms</a>
|
|
<a href="#">Templates</a>
|
|
<a href="#">Integrations</a>
|
|
<a href="#">Analytics</a>
|
|
</nav>
|
|
<div class="user-menu">
|
|
<div class="notifications">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="22"
|
|
height="22"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
|
</svg>
|
|
<span class="notifications-count">3</span>
|
|
</div>
|
|
<div class="avatar">JD</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main content -->
|
|
<main>
|
|
<div class="container">
|
|
<div class="breadcrumb">
|
|
<a href="#">Home</a>
|
|
<span>/</span>
|
|
<span>Dashboard</span>
|
|
</div>
|
|
|
|
<div class="dashboard-header">
|
|
<h1 class="dashboard-title">Dashboard Overview</h1>
|
|
<button class="button">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
Create New Form
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Stats row -->
|
|
<div class="stats-row">
|
|
<div class="stat-card">
|
|
<div class="stat-title">Total Submissions</div>
|
|
<div class="stat-value">1,248</div>
|
|
<div class="stat-change">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
|
</svg>
|
|
12% from last month
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-title">Active Forms</div>
|
|
<div class="stat-value">24</div>
|
|
<div class="stat-change">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
|
</svg>
|
|
3 new this month
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-title">Avg. Conversion Rate</div>
|
|
<div class="stat-value">68.4%</div>
|
|
<div class="stat-change">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
|
</svg>
|
|
2.1% from last month
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-title">Storage Used</div>
|
|
<div class="stat-value">342 MB</div>
|
|
<div class="stat-change positive">
|
|
<!-- Assuming increase is normal, not negative -->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
|
<!-- Up arrow for increase -->
|
|
</svg>
|
|
24 MB from last month
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Industrial divider -->
|
|
<hr class="industrial-divider" />
|
|
|
|
<!-- Forms section with industrial frame -->
|
|
<div class="forms-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path
|
|
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10 9 9 9 8 9"></polyline>
|
|
</svg>
|
|
Recent Forms
|
|
</h2>
|
|
<a href="#" class="button button-secondary"> View All Forms </a>
|
|
</div>
|
|
|
|
<div class="industrial-frame">
|
|
<div class="industrial-corner top-left"></div>
|
|
<div class="industrial-corner top-right"></div>
|
|
<div class="industrial-corner bottom-left"></div>
|
|
<div class="industrial-corner bottom-right"></div>
|
|
|
|
<div class="forms-grid">
|
|
<!-- Form Card 1 -->
|
|
<div class="form-card">
|
|
<div class="form-card-header">
|
|
<div class="form-title">Customer Feedback Q2</div>
|
|
<div class="form-menu" title="Options">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="19" cy="12" r="1"></circle>
|
|
<circle cx="5" cy="12" r="1"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="form-content">
|
|
<div class="form-stats">
|
|
<div class="form-stat">
|
|
<span class="form-stat-value">486</span>
|
|
<span class="form-stat-label">Submissions</span>
|
|
</div>
|
|
<div class="form-stat">
|
|
<span class="form-stat-value">75%</span>
|
|
<span class="form-stat-label">Completion</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress-bar" title="75% Completion Rate">
|
|
<div class="progress-fill" style="width: 75%"></div>
|
|
</div>
|
|
<div class="form-footer">
|
|
<div class="form-date">Updated 2 days ago</div>
|
|
<div class="form-badge active">Active</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Card 2 -->
|
|
<div class="form-card">
|
|
<div class="form-card-header">
|
|
<div class="form-title">Annual Conf Registration</div>
|
|
<div class="form-menu" title="Options">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="19" cy="12" r="1"></circle>
|
|
<circle cx="5" cy="12" r="1"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="form-content">
|
|
<div class="form-stats">
|
|
<div class="form-stat">
|
|
<span class="form-stat-value">312</span>
|
|
<span class="form-stat-label">Submissions</span>
|
|
</div>
|
|
<div class="form-stat">
|
|
<span class="form-stat-value">92%</span>
|
|
<span class="form-stat-label">Completion</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress-bar" title="92% Completion Rate">
|
|
<div class="progress-fill" style="width: 92%"></div>
|
|
</div>
|
|
<div class="form-footer">
|
|
<div class="form-date">Updated 5 days ago</div>
|
|
<div class="form-badge active">Active</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Card 3 -->
|
|
<div class="form-card">
|
|
<div class="form-card-header">
|
|
<div class="form-title">Frontend Dev Application</div>
|
|
<div class="form-menu" title="Options">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="19" cy="12" r="1"></circle>
|
|
<circle cx="5" cy="12" r="1"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="form-content">
|
|
<div class="form-stats">
|
|
<div class="form-stat">
|
|
<span class="form-stat-value">124</span>
|
|
<span class="form-stat-label">Submissions</span>
|
|
</div>
|
|
<div class="form-stat">
|
|
<span class="form-stat-value">88%</span>
|
|
<span class="form-stat-label">Completion</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress-bar" title="88% Completion Rate">
|
|
<div class="progress-fill" style="width: 88%"></div>
|
|
</div>
|
|
<div class="form-footer">
|
|
<div class="form-date">Updated yesterday</div>
|
|
<div class="form-badge archived">Archived</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent submissions -->
|
|
<div class="forms-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<line x1="8" y1="6" x2="21" y2="6"></line>
|
|
<line x1="8" y1="12" x2="21" y2="12"></line>
|
|
<line x1="8" y1="18" x2="21" y2="18"></line>
|
|
<line x1="3" y1="6" x2="3.01" y2="6"></line>
|
|
<line x1="3" y1="12" x2="3.01" y2="12"></line>
|
|
<line x1="3" y1="18" x2="3.01" y2="18"></line>
|
|
</svg>
|
|
Recent Submissions
|
|
</h2>
|
|
<a href="#" class="button button-secondary">
|
|
View All Submissions
|
|
</a>
|
|
</div>
|
|
|
|
<div class="submissions-table-wrapper">
|
|
<table class="submissions-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Form Name</th>
|
|
<th>Submitted by</th>
|
|
<th>Date</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Customer Feedback Q2</td>
|
|
<td>john.doe@example.com</td>
|
|
<td>May 05, 2025</td>
|
|
<td><div class="form-badge active">New</div></td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<a href="#" class="table-action" title="View Submission">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path
|
|
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="table-action" title="Edit Submission">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M12 20h9"></path>
|
|
<path
|
|
d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="table-action delete"
|
|
title="Delete Submission">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
<path
|
|
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
<line x1="10" y1="11" x2="10" y2="17"></line>
|
|
<line x1="14" y1="11" x2="14" y2="17"></line>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Annual Conf Registration</td>
|
|
<td>sarah.smith@example.com</td>
|
|
<td>May 04, 2025</td>
|
|
<td><div class="form-badge pending">Pending</div></td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<a href="#" class="table-action" title="View Submission">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path
|
|
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="table-action" title="Edit Submission">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M12 20h9"></path>
|
|
<path
|
|
d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="table-action delete"
|
|
title="Delete Submission">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
<path
|
|
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
<line x1="10" y1="11" x2="10" y2="17"></line>
|
|
<line x1="14" y1="11" x2="14" y2="17"></line>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Customer Feedback Q2</td>
|
|
<td>mark.rivera@sample.net</td>
|
|
<td>May 03, 2025</td>
|
|
<td><div class="form-badge archived">Reviewed</div></td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<a href="#" class="table-action" title="View Submission">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path
|
|
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="table-action" title="Edit Submission">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M12 20h9"></path>
|
|
<path
|
|
d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="table-action delete"
|
|
title="Delete Submission">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
<path
|
|
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
<line x1="10" y1="11" x2="10" y2="17"></line>
|
|
<line x1="14" y1="11" x2="14" y2="17"></line>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Add more rows as needed -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<a href="#" class="footer-logo">
|
|
<div class="logo-icon">FC</div>
|
|
Formies
|
|
</a>
|
|
<div class="footer-links">
|
|
<a href="#">About Us</a>
|
|
<a href="#">Pricing</a>
|
|
<a href="#">Documentation</a>
|
|
<a href="#">Support</a>
|
|
<a href="#">Privacy Policy</a>
|
|
</div>
|
|
<div class="footer-copy">© 2025 FormCraft. All rights reserved.</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|