Arculat hozzáadása

workflow-check-brand/README.md

@@ -0,0 +1,36 @@
+# Workflow Check arculati csomag
+
+Az **A jel** a webes arculat fő eleme: gyártási folyamat, ellenőrzési pontok és sikeres lezárás. A **B jel** a mobilalkalmazás ikonja.
+
+## Színek
+
+| Név | HEX | Használat |
+|---|---:|---|
+| Deep Navy | `#0B1F3A` | oldalsáv, fő szöveg, elsődleges felület |
+| Process Blue | `#123C69` | gombok, linkek, köztes állapot |
+| Check Blue | `#38BDF8` | aktív elem, pipa, fókusz |
+| Light Blue | `#BAE6FD` | aktív menü, táblázatfejléc |
+| White | `#FFFFFF` | tartalom és kontraszt |
+
+## Webes bekötés
+
+Másold az `assets` és `css` könyvtárat a webprojekt `wwwroot` mappájába, majd a layout `<head>` részében:
+
+```html
+<link rel="icon" href="~/assets/favicon/favicon.ico" sizes="any">
+<link rel="icon" href="~/assets/favicon/favicon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="~/assets/favicon/apple-touch-icon.png">
+<link rel="stylesheet" href="~/css/workflow-check.css" asp-append-version="true">
+```
+
+A `workflow-check.css` a többi fájlt importálja, ezért ezt kell utolsó saját CSS-ként betölteni. A csomag Bootstrap 5 és DataTables felülírásokat is tartalmaz.
+
+## Fájlhasználat
+
+- `workflow-check-logo.svg`: világos hátterű fejléc, belépőoldal, dokumentum.
+- `workflow-check-logo-dark.svg`: sötét oldalsáv vagy sötét fejléc.
+- `workflow-check-symbol.svg`: kompakt webes jel.
+- `workflow-check-app-icon.svg/png`: mobilalkalmazás forrásikon.
+- `favicon.*`: böngésző és kezdőképernyő ikonok.
+
+Az SVG a szerkeszthető mester. A PNG és ICO változatokat ebből kell származtatni.

workflow-check-brand/assets/app-icon/workflow-check-app-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-labelledby="title">
+  <title id="title">Workflow Check mobile application icon</title>
+  <defs><linearGradient id="bg" x1="130" y1="80" x2="900" y2="960" gradientUnits="userSpaceOnUse"><stop stop-color="#0B1F3A"/><stop offset="1" stop-color="#123C69"/></linearGradient><linearGradient id="accent" x1="512" y1="250" x2="512" y2="820" gradientUnits="userSpaceOnUse"><stop stop-color="#BAE6FD"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs>
+  <rect x="32" y="32" width="960" height="960" rx="220" fill="url(#bg)"/>
+  <rect x="286" y="142" width="452" height="740" rx="72" fill="none" stroke="#fff" stroke-width="38"/>
+  <path d="M452 211h120M468 816h88" stroke="#fff" stroke-width="30" stroke-linecap="round"/>
+  <path d="M512 350v132M512 550v72" stroke="url(#accent)" stroke-width="30" stroke-linecap="round"/>
+  <circle cx="512" cy="314" r="62" fill="#0B1F3A" stroke="#fff" stroke-width="30"/><circle cx="512" cy="514" r="62" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="30"/><circle cx="512" cy="690" r="76" fill="#0B1F3A" stroke="#38BDF8" stroke-width="30"/>
+  <path d="m476 688 35 35 83-93" fill="none" stroke="#38BDF8" stroke-width="34" stroke-linecap="square"/>
+</svg>

workflow-check-brand/assets/favicon/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0B1F3A"/><path d="M13 33h8c4 0 4 7 8 7h7c5 0 5-8 10-8" fill="none" stroke="#BAE6FD" stroke-width="5" stroke-linecap="round"/><circle cx="12" cy="33" r="5" fill="#0B1F3A" stroke="#fff" stroke-width="4"/><circle cx="30" cy="40" r="6" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="4"/><circle cx="47" cy="27" r="8" fill="#0B1F3A" stroke="#38BDF8" stroke-width="4"/><path d="m43 27 3 3 8-9" fill="none" stroke="#38BDF8" stroke-width="4"/></svg>

workflow-check-brand/assets/logo/workflow-check-logo-dark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 260" role="img" aria-labelledby="title">
+  <title id="title">Workflow Check – dark background</title>
+  <defs><linearGradient id="flow" x1="35" y1="95" x2="410" y2="95" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs>
+  <g transform="translate(5 10) scale(.78)"><path d="M96 128h42c24 0 22 40 46 40h55c28 0 28-40 56-40h63c28 0 28-42 28-68" fill="none" stroke="url(#flow)" stroke-width="22" stroke-linecap="round"/><circle cx="70" cy="128" r="30" fill="#0B1F3A" stroke="#fff" stroke-width="18"/><circle cx="245" cy="168" r="34" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="18"/><circle cx="394" cy="83" r="43" fill="#0B1F3A" stroke="#38BDF8" stroke-width="18"/><path d="m373 82 17 17 43-48" fill="none" stroke="#38BDF8" stroke-width="18"/></g>
+  <text x="385" y="157" fill="#FFFFFF" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="750" letter-spacing="-3">Workflow</text><text x="816" y="157" fill="#BAE6FD" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="450" letter-spacing="-3">Check</text>
+</svg>

workflow-check-brand/assets/logo/workflow-check-logo.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 260" role="img" aria-labelledby="title desc">
+  <title id="title">Workflow Check</title>
+  <desc id="desc">Workflow Check primary horizontal logo.</desc>
+  <defs>
+    <linearGradient id="flow" x1="35" y1="95" x2="410" y2="95" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0B1F3A"/><stop offset=".52" stop-color="#123C69"/><stop offset="1" stop-color="#38BDF8"/>
+    </linearGradient>
+  </defs>
+  <g transform="translate(5 10) scale(.78)">
+    <path d="M96 128h42c24 0 22 40 46 40h55c28 0 28-40 56-40h63c28 0 28-42 28-68" fill="none" stroke="url(#flow)" stroke-width="22" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="70" cy="128" r="30" fill="#fff" stroke="#0B1F3A" stroke-width="18"/>
+    <circle cx="245" cy="168" r="34" fill="#fff" stroke="#123C69" stroke-width="18"/>
+    <circle cx="394" cy="83" r="43" fill="#fff" stroke="#38BDF8" stroke-width="18"/>
+    <path d="m373 82 17 17 43-48" fill="none" stroke="#38BDF8" stroke-width="18"/>
+  </g>
+  <text x="385" y="157" fill="#0B1F3A" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="750" letter-spacing="-3">Workflow</text>
+  <text x="816" y="157" fill="#123C69" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="450" letter-spacing="-3">Check</text>
+</svg>

workflow-check-brand/assets/logo/workflow-check-symbol.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 256" role="img" aria-labelledby="title desc">
+  <title id="title">Workflow Check web symbol</title>
+  <desc id="desc">A three-stage manufacturing workflow ending in a check mark.</desc>
+  <defs>
+    <linearGradient id="flow" x1="55" y1="128" x2="452" y2="128" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0B1F3A"/><stop offset=".52" stop-color="#123C69"/><stop offset="1" stop-color="#38BDF8"/>
+    </linearGradient>
+  </defs>
+  <path d="M96 128h42c24 0 22 40 46 40h55c28 0 28-40 56-40h63c28 0 28-42 28-68" fill="none" stroke="url(#flow)" stroke-width="22" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="70" cy="128" r="30" fill="#fff" stroke="#0B1F3A" stroke-width="18"/>
+  <circle cx="245" cy="168" r="34" fill="#fff" stroke="#123C69" stroke-width="18"/>
+  <circle cx="394" cy="83" r="43" fill="#fff" stroke="#38BDF8" stroke-width="18"/>
+  <path d="m373 82 17 17 43-48" fill="none" stroke="#38BDF8" stroke-width="18" stroke-linecap="square" stroke-linejoin="miter"/>
+</svg>

workflow-check-brand/css/workflow-check-base.css

@@ -0,0 +1,10 @@
+@import url("workflow-check-variables.css");
+html { font-size: 16px; }
+body { margin: 0; background: var(--wfc-surface); color: var(--wfc-text); font-family: Inter, "Segoe UI", Arial, sans-serif; }
+a { color: var(--wfc-navy-700); text-decoration: none; }
+a:hover { color: var(--wfc-blue-500); }
+.wfc-page-title { margin: 0 0 1.25rem; color: var(--wfc-navy-900); font-size: 1.75rem; font-weight: 700; }
+.wfc-card, .card { border: 1px solid var(--wfc-border); border-radius: var(--wfc-radius); background: var(--wfc-white); box-shadow: var(--wfc-shadow); }
+.wfc-card-header, .card-header { border-bottom: 1px solid var(--wfc-border); background: var(--wfc-white); color: var(--wfc-navy-900); font-weight: 700; }
+.badge.bg-primary { background-color: var(--wfc-navy-700) !important; }
+.text-primary { color: var(--wfc-navy-700) !important; }

workflow-check-brand/css/workflow-check-buttons.css

@@ -0,0 +1,11 @@
+.btn { border-radius: .5rem; font-weight: 650; transition: transform .12s ease,box-shadow .12s ease,background-color .12s ease; }
+.btn:focus-visible { box-shadow: var(--wfc-focus); }
+.btn-primary { border-color: var(--wfc-navy-700); background: var(--wfc-navy-700); color: #fff; }
+.btn-primary:hover,.btn-primary:focus { border-color: var(--wfc-navy-900); background: var(--wfc-navy-900); color: #fff; }
+.btn-info { border-color: var(--wfc-blue-500); background: var(--wfc-blue-500); color: var(--wfc-navy-950); }
+.btn-info:hover { border-color: #159FDC; background: #159FDC; color: var(--wfc-navy-950); }
+.btn-outline-primary { border-color: var(--wfc-navy-700); color: var(--wfc-navy-700); }
+.btn-outline-primary:hover { background: var(--wfc-navy-700); color: #fff; }
+.btn-success { border-color: var(--wfc-success); background: var(--wfc-success); }
+.btn-danger { border-color: var(--wfc-danger); background: var(--wfc-danger); }
+.btn:active { transform: translateY(1px); }

workflow-check-brand/css/workflow-check-datatables.css

@@ -0,0 +1,9 @@
+table.dataTable { border-color: var(--wfc-border); background: #fff; }
+table.dataTable thead th,.table-primary th { border-color: #8ED4F5 !important; background: var(--wfc-blue-200) !important; color: var(--wfc-navy-900) !important; font-weight: 700; }
+table.dataTable tbody tr:hover { background: #EFF9FE !important; }
+.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select { border: 1px solid var(--wfc-border); border-radius: .45rem; }
+.dataTables_wrapper .dataTables_filter input:focus,.dataTables_wrapper .dataTables_length select:focus { border-color: var(--wfc-blue-500); outline: 0; box-shadow: var(--wfc-focus); }
+.page-item.active .page-link { border-color: var(--wfc-navy-700); background: var(--wfc-navy-700); }
+.page-link { color: var(--wfc-navy-700); }
+.page-link:focus { box-shadow: var(--wfc-focus); }
+div.dt-processing,.dataTables_processing { border: 1px solid var(--wfc-blue-200) !important; border-radius: .6rem !important; background: var(--wfc-navy-900) !important; color: var(--wfc-white) !important; box-shadow: var(--wfc-shadow); }

workflow-check-brand/css/workflow-check-forms.css

@@ -0,0 +1,7 @@
+.form-label { color: var(--wfc-navy-900); font-weight: 650; }
+.form-control,.form-select { min-height: 42px; border-color: var(--wfc-border); border-radius: .5rem; color: var(--wfc-text); }
+.form-control:focus,.form-select:focus { border-color: var(--wfc-blue-500); box-shadow: var(--wfc-focus); }
+.form-check-input:checked { border-color: var(--wfc-navy-700); background-color: var(--wfc-navy-700); }
+.form-check-input:focus { border-color: var(--wfc-blue-500); box-shadow: var(--wfc-focus); }
+.input-group-text { border-color: var(--wfc-border); background: #EDF4FA; color: var(--wfc-navy-700); }
+.validation-summary-errors,.field-validation-error { color: var(--wfc-danger); }

workflow-check-brand/css/workflow-check-layout.css

@@ -0,0 +1,12 @@
+.wfc-shell { min-height: 100vh; }
+.wfc-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--wfc-sidebar-width); overflow-y: auto; color: var(--wfc-white); background: linear-gradient(180deg,var(--wfc-navy-900),var(--wfc-navy-950)); transition: transform .22s ease; }
+.wfc-brand { display: flex; align-items: center; min-height: 78px; padding: 1rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
+.wfc-brand img { width: 100%; max-height: 46px; object-fit: contain; object-position: left center; }
+.wfc-nav { padding: 1rem .75rem; }
+.wfc-nav-link { display: flex; gap: .75rem; align-items: center; margin: .2rem 0; padding: .72rem .85rem; border-radius: .5rem; color: #DCEBFA; font-weight: 550; }
+.wfc-nav-link:hover { color: var(--wfc-white); background: rgb(56 189 248 / 13%); }
+.wfc-nav-link.active { color: var(--wfc-navy-900); background: var(--wfc-blue-200); box-shadow: inset 4px 0 0 var(--wfc-blue-500); }
+.wfc-content { min-height: 100vh; margin-left: var(--wfc-sidebar-width); }
+.wfc-topbar { position: sticky; top: 0; z-index: 1030; min-height: 64px; border-bottom: 1px solid var(--wfc-border); background: rgb(255 255 255 / 94%); backdrop-filter: blur(10px); }
+.wfc-main { padding: 1.5rem; }
+@media (max-width: 991.98px) { .wfc-sidebar { transform: translateX(-100%); } .wfc-sidebar.is-open { transform: translateX(0); } .wfc-content { margin-left: 0; } .wfc-main { padding: 1rem; } }

workflow-check-brand/css/workflow-check-variables.css

@@ -0,0 +1,19 @@
+:root {
+  --wfc-navy-950: #071629;
+  --wfc-navy-900: #0B1F3A;
+  --wfc-navy-700: #123C69;
+  --wfc-blue-500: #38BDF8;
+  --wfc-blue-200: #BAE6FD;
+  --wfc-white: #FFFFFF;
+  --wfc-surface: #F5F8FC;
+  --wfc-border: #D7E2EE;
+  --wfc-text: #10243E;
+  --wfc-muted: #64748B;
+  --wfc-success: #16875B;
+  --wfc-warning: #E28A17;
+  --wfc-danger: #D64545;
+  --wfc-sidebar-width: 264px;
+  --wfc-radius: .625rem;
+  --wfc-shadow: 0 8px 24px rgb(11 31 58 / 10%);
+  --wfc-focus: 0 0 0 .2rem rgb(56 189 248 / 25%);
+}

workflow-check-brand/css/workflow-check.css

@@ -0,0 +1,6 @@
+@import url("workflow-check-variables.css");
+@import url("workflow-check-base.css");
+@import url("workflow-check-layout.css");
+@import url("workflow-check-buttons.css");
+@import url("workflow-check-forms.css");
+@import url("workflow-check-datatables.css");