First results converting receiver-ui-react into a Blazor Web App

2025-12-08 16:21:10 +01:00
parent 751ea706df
commit 562ceb9c3f
27 changed files with 786 additions and 557 deletions
--- a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
+++ b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
@@ -0,0 +1,183 @@
+body {
+    margin: 0;
+    font-family: "Segoe UI", Arial, sans-serif;
+    background: #0f172a;
+    color: #e2e8f0;
+}
+
+.main-layout {
+    min-height: 100vh;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0b1220 100%);
+}
+
+.top-bar {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+    background: rgba(255, 255, 255, 0.04);
+    border-bottom: 1px solid rgba(226, 232, 240, 0.08);
+}
+
+.top-bar .brand {
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+.content {
+    padding: 24px 32px;
+}
+
+h1 {
+    margin-top: 0;
+    margin-bottom: 8px;
+    letter-spacing: 0.3px;
+}
+
+.controls {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.btn {
+    background: #22d3ee;
+    color: #0f172a;
+    border: none;
+    padding: 10px 14px;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 120ms ease, box-shadow 120ms ease;
+}
+
+.btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 18px rgba(34, 211, 238, 0.25);
+}
+
+.btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.btn.secondary {
+    background: rgba(226, 232, 240, 0.12);
+    color: #e2e8f0;
+    border: 1px solid rgba(226, 232, 240, 0.2);
+}
+
+.drop-hint {
+    padding: 24px;
+    border: 1px dashed rgba(226, 232, 240, 0.3);
+    border-radius: 12px;
+    text-align: center;
+    color: rgba(226, 232, 240, 0.8);
+}
+
+.document-shell {
+    position: relative;
+    margin-top: 12px;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+    background: #0b1220;
+    border: 1px solid rgba(226, 232, 240, 0.08);
+}
+
+canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    background: #111827;
+}
+
+.overlay {
+    position: absolute;
+    border: 2px solid #22d3ee;
+    border-radius: 8px;
+    padding: 6px;
+    background: rgba(15, 23, 42, 0.9);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
+    user-select: none;
+}
+
+.overlay.signature img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.overlay-controls {
+    position: absolute;
+    top: -36px;
+    right: 0;
+    display: flex;
+    gap: 4px;
+}
+
+.overlay-btn {
+    background: #0f172a;
+    color: #22d3ee;
+    border: 1px solid rgba(34, 211, 238, 0.4);
+    border-radius: 6px;
+    padding: 4px 8px;
+    cursor: pointer;
+}
+
+.overlay-input {
+    border: none;
+    background: transparent;
+    color: #e2e8f0;
+    font-size: 18px;
+    padding: 4px;
+    min-width: 160px;
+    outline: none;
+}
+
+.paging {
+    margin-top: 12px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.65);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+
+.modal {
+    background: #0f172a;
+    border: 1px solid rgba(226, 232, 240, 0.08);
+    border-radius: 12px;
+    padding: 16px;
+    min-width: 760px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+}
+
+.modal-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.modal canvas {
+    background: #0b1220;
+    border: 1px solid rgba(226, 232, 240, 0.1);
+    border-radius: 8px;
+}
+
+.spacer {
+    flex: 1;
+}