refactor(card.css): CSS der footer für Reaktionsfähigkeit bearbeitet

EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml

@@ -55,15 +55,15 @@
     <div class="dd-cards-container">
         <div class="dd-card">
             <div class="dd-card-preview">
-                <h6 class="uppercase">Digital Data</h6>
+                <img src="~/img/sign_flow_horizontal.svg" class="app-logo">
-                <h2>signFlow</h2>
+                @if (!isReadOnly)
-                @if (isReadOnly)
                 {
-                <button type="button" id="btn-copy">
+                <div class="progress-container">
-                    <span class="material-symbols-outlined">
+                    <div id="signed-count-bar" class="progress"></div>
-                        content_copy
+                    <span class="progress-text">
+                        <span id="signed-count">0</span>/<span id="signature-count">@signatureCount</span> Unterschriften
                     </span>
-                </button>
+                </div>
                 }
             </div>
             <div class="dd-card-info">
@@ -94,15 +94,6 @@
                                  sender?.Email.TrySanitize(_sanitizer)))
                     </small>
                 </p>
-                @if (!isReadOnly)
-                {
-                <div class="progress-container">
-                    <div id="signed-count-bar" class="progress"></div>
-                    <span class="progress-text">
-                        <span id="signed-count">0</span>/<span id="signature-count">@signatureCount</span> Unterschriften
-                    </span>
-                </div>
-                }
             </div>
         </div>
     </div>
@@ -201,19 +192,6 @@
     });
 </script>
 }
-else
-{
-<script nonce="@nonce">
-    document.getElementById('btn-copy').addEventListener('click', function () {
-        const url = window.location.href;
-        navigator.clipboard.writeText(url).then(function () {
-            bsNotify('Kopiert', { alert_type: 'success', delay: 4, icon_name: 'check_circle' });
-        }).catch(function (err) {
-            bsNotify('Unerwarteter Fehler', { alert_type: 'danger', delay: 4, icon_name: 'error' });
-        });
-    });
-</script>
-}
 <script nonce="@nonce">
     const collapseNav = () => {
         document.addEventListener('click', function (event) {

EnvelopeGenerator.Web/wwwroot/css/card.css

@@ -10,12 +10,11 @@
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
-	height: 10rem;
+
 }
 
 .dd-card {
 	background-color: #fff;
-	box-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.2);
 	display: flex;
 	max-width: 100%;
 	margin: 0;
@@ -23,40 +22,38 @@
 	width: 100%;
 }
 
-.dd-card h6 {
+	.dd-card h6 {
-	opacity: 0.6;
+		opacity: 0.6;
-	margin: 0;
+		margin: 0;
-	letter-spacing: 0.0625rem;
+		letter-spacing: 0.0625rem;
-}
+		font-size: clamp(0.6rem, 1.33vw, 0.8rem);
+	}
+
+	.dd-card h2 {
+		letter-spacing: 0.0625rem;
+		margin: 0;
+		font-size: clamp(1rem, 2.67vw, 1.67rem);
+	}
 
 .uppercase {
 	text-transform: uppercase;
 }
 
-.dd-card h2 {
-	letter-spacing: 0.0625rem;
-	margin: 0;
-}
-
 .dd-card-preview {
 	background-color: #2A265F;
 	color: #fff;
-	padding: 1.875rem;
+	padding: 0.1rem 1rem 1rem 1rem;
-	max-width: 15.625rem;
+	margin:0;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 }
 
-.dd-card-preview a {
+	.dd-card-preview a {
-	color: #fff;
+		color: #fff;
-	display: inline-block;
+		opacity: 0.6;
-	font-size: 0.75rem;
+	}
-	opacity: 0.6;
-	margin-top: 1.875rem;
-	text-decoration: none;
-}
 
 	.dd-card-preview button {
 		border-width: 0;
@@ -76,30 +73,37 @@
 		}
 
 .dd-card-info {
-	padding: 1rem 0 0 1.875rem;
+	padding: clamp(0.55rem, 2vw, .875rem) 0 0 clamp(0.55rem, 2.5vw, 1.7rem);
+	margin: 0;
 	position: relative;
 	width: 100%;
 }
 
-	.dd-card-info p {
+	.dd-card-info p, .dd-card-info a, .dd-card-info small, .dd-card-info span {
-		opacity: 0.6;
+		opacity: 0.65;
-		font-size: 0.75rem;
+		font-size: clamp(0.55rem, 1.23vw, 0.75rem);
-		opacity: 0.6;
+		margin: clamp(0.55rem, 2vw, .875rem) 0 clamp(0.55rem, 2vw, .875rem) 0;
-		margin-top: .875rem;
 		text-decoration: none;
+		padding: 0;
 	}
 
+.app-logo {
+	width: clamp(4rem, 10vw, 5rem);
+	margin: 1rem 0 0 0;
+}
+
 .progress-container {
 	text-align: right;
-	width: 9.375rem;
+	width: 100%;
+	margin: clamp(0.8rem, 2vw, 1rem) 0 0 0;
 }
 
 .progress {
-	position: relative;
 	background-color: #ddd;
 	border-radius: 0.1875rem;
-	height: 0.3125rem;
+	height: clamp(0.25rem, 1vw, 0.3125rem);
-	width: 10rem;
+	width: clamp(6rem, 20vw, 10rem);
+	position: relative;
 }
 
 	.progress::after {
@@ -108,189 +112,15 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		height: 0.3125rem;
+		height: clamp(0.25rem, 1vw, 0.3125rem);
 		width: var(--progress-width, 1%);
 		transition: width 1s ease;
+		opacity: 0.85;
 	}
 
 .progress-text {
-	font-size: 0.625rem;
+	font-size: clamp(0.5rem, 1.5vw, 0.625rem);
 	opacity: 0.6;
-	letter-spacing: 0.0625rem;
+	letter-spacing: clamp(0.05rem, 0.5vw, 0.0625rem);
 	text-align: left;
-}
-
-.dd-card-btn {
-	background-color: #2A265F;
-	border: 0;
-	border-radius: 3.125rem;
-	box-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.2);
-	color: #fff;
-	font-size: 1rem;
-	padding: 0.75rem 1.5625rem;
-	position: absolute;
-	bottom: 1.875rem;
-	right: 1.875rem;
-	letter-spacing: 0.0625rem;
-}
-
-/* SOCIAL PANEL CSS */
-.social-panel-container {
-	position: fixed;
-	right: 0;
-	bottom: 5rem;
-	transform: translateX(100%);
-	transition: transform 0.4s ease-in-out;
-}
-
-	.social-panel-container.visible {
-		transform: translateX(-0.625rem);
-	}
-
-.social-panel {	
-	background-color: #fff;
-	border-radius: 16px;
-	box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
-	border: 5px solid #001F61;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	font-family: 'Muli';
-	position: relative;
-	height: 169px;	
-	width: 370px;
-	max-width: calc(100% - 10px);
-}
-
-.social-panel button.close-btn {
-	border: 0;
-	color: #97A5CE;
-	cursor: pointer;
-	font-size: 20px;
-	position: absolute;
-	top: 5px;
-	right: 5px;
-}
-
-.social-panel button.close-btn:focus {
-	outline: none;
-}
-
-.social-panel p {
-	background-color: #001F61;
-	border-radius: 0 0 10px 10px;
-	color: #fff;
-	font-size: 14px;
-	line-height: 18px;
-	padding: 2px 17px 6px;
-	position: absolute;
-	top: 0;
-	left: 50%;
-	margin: 0;
-	transform: translateX(-50%);
-	text-align: center;
-	width: 235px;
-}
-
-.social-panel p i {
-	margin: 0 5px;
-}
-
-.social-panel p a {
-	color: #FF7500;
-	text-decoration: none;
-}
-
-.social-panel h4 {
-	margin: 20px 0;
-	color: #97A5CE;	
-	font-family: 'Muli';	
-	font-size: 14px;	
-	line-height: 18px;
-	text-transform: uppercase;
-}
-
-.social-panel ul {
-	display: flex;
-	list-style-type: none;
-	padding: 0;
-	margin: 0;
-}
-
-.social-panel ul li {
-	margin: 0 10px;
-}
-
-.social-panel ul li a {
-	border: 1px solid #DCE1F2;
-	border-radius: 50%;
-	color: #001F61;
-	font-size: 20px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 50px;
-	width: 50px;
-	text-decoration: none;
-}
-
-.social-panel ul li a:hover {
-	border-color: #FF6A00;
-	box-shadow: 0 9px 12px -9px #FF6A00;
-}
-
-.floating-btn {
-	border-radius: 26.5px;
-	background-color: #001F61;
-	border: 1px solid #001F61;
-	box-shadow: 0 16px 22px -17px #03153B;
-	color: #fff;
-	cursor: pointer;
-	font-size: 16px;
-	line-height: 20px;
-	padding: 12px 20px;
-	position: fixed;
-	bottom: 20px;
-	right: 20px;
-	z-index: 999;
-}
-
-.floating-btn:hover {
-	background-color: #ffffff;
-	color: #001F61;
-}
-
-.floating-btn:focus {
-	outline: none;
-}
-
-.floating-text {
-	background-color: #001F61;
-	border-radius: 10px 10px 0 0;
-	color: #fff;
-	font-family: 'Muli';
-	padding: 7px 15px;
-	position: fixed;
-	bottom: 0;
-	left: 50%;
-	transform: translateX(-50%);
-	text-align: center;
-	z-index: 998;
-}
-
-.floating-text a {
-	color: #FF7500;
-	text-decoration: none;
-}
-
-@media screen and (max-width: 480px) {
-
-	.social-panel-container.visible {
-		transform: translateX(0px);
-	}
-	
-	.floating-btn {
-		right: 10px;
-	}
 }

EnvelopeGenerator.Web/wwwroot/css/card.min.css

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column;height:10rem}.dd-card{background-color:#fff;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:1.875rem;max-width:15.625rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:9.375rem}.progress{position:relative;background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%);transition:width 1s ease}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}}
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column}.dd-card{background-color:#fff;display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem;font-size:clamp(.6rem,1.33vw,.8rem)}.dd-card h2{letter-spacing:.0625rem;margin:0;font-size:clamp(1rem,2.67vw,1.67rem)}.uppercase{text-transform:uppercase}.dd-card-preview{background-color:#2a265f;color:#fff;padding:.1rem 1rem 1rem 1rem;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;opacity:.6}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:clamp(.55rem,2vw,.875rem) 0 0 clamp(.55rem,2.5vw,1.7rem);margin:0;position:relative;width:100%}.dd-card-info p,.dd-card-info a,.dd-card-info small,.dd-card-info span{opacity:.65;font-size:clamp(.55rem,1.23vw,.75rem);margin:clamp(.55rem,2vw,.875rem) 0 clamp(.55rem,2vw,.875rem) 0;text-decoration:none;padding:0}.app-logo{width:clamp(4rem,10vw,5rem);margin:1rem 0 0 0}.progress-container{text-align:right;width:100%;margin:clamp(.8rem,2vw,1rem) 0 0 0}.progress{background-color:#ddd;border-radius:.1875rem;height:clamp(.25rem,1vw,.3125rem);width:clamp(6rem,20vw,10rem);position:relative}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:clamp(.25rem,1vw,.3125rem);width:var(--progress-width,1%);transition:width 1s ease;opacity:.85}.progress-text{font-size:clamp(.5rem,1.5vw,.625rem);opacity:.6;letter-spacing:clamp(.05rem,.5vw,.0625rem);text-align:left}

EnvelopeGenerator.Web/wwwroot/css/logo.css

@@ -24,6 +24,7 @@
 @media (max-width: 767px) {
     .dd-show-logo {
         width: 5rem;
+        margin-right: 0rem;
     }
 
     .cursor-show-logo {

EnvelopeGenerator.Web/wwwroot/css/logo.min.css

@@ -1 +1 @@
-.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem;position:absolute;right:0;margin:0 2rem 0 0;padding:0;top:0}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem}.cursor-show-logo{width:3rem}}
+.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem;position:absolute;right:0;margin:0 2rem 0 0;padding:0;top:0}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem;margin-right:0}.cursor-show-logo{width:3rem}}

EnvelopeGenerator.Web/wwwroot/css/site.css

@@ -147,6 +147,7 @@ main {
 
 footer {
     height: 4vh;
+    min-height: 1.5rem;
     background-color: #001F61;
     border-radius: 10px 10px 0 0;
     color: #fff;
@@ -157,14 +158,15 @@ footer {
     width: 100%;
     z-index: 998;
     border-width: 0;
+    font-size: clamp(0.75rem, 1.5vw, 1rem);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: start;
 }
 
     footer * {
-        margin-left: 1rem;
+        margin-left: clamp(0.5rem, 2vw, 1rem);
-    }
-
-    footer > * {
-        margin: 0 6rem 0 1rem;
     }
 
     footer a {

EnvelopeGenerator.Web/wwwroot/img/sign_flow.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ffd631;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #a52431;
+      }
+
+      .cls-3 {
+        fill: none;
+      }
+
+      .cls-4 {
+        fill: #FFFFFF;
+      }
+
+      .cls-5 {
+        clip-path: url(#clippath);
+		opacity: 0;
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-3" x="0" width="256" height="256"/>
+    </clipPath>
+  </defs>
+  <g class="cls-5">
+    <rect class="cls-2" x="0" width="256" height="256" rx="48.67" ry="48.67"/>
+  </g>
+  <path class="cls-1" d="M153.29,63.22l-20.08,28.03h-10.42l-20.08-28.03,8.74-5.57h33.09l8.74,5.57ZM89.25,71.8l19.69,27.49-11.88,14.56-14.5-37.78,6.69-4.26ZM104.33,128.96l17.33-21.24h12.67l17.33,21.24-23.67,19.17-23.67-19.17ZM158.94,113.85l-11.88-14.56,19.69-27.49,6.69,4.26-14.5,37.78ZM149.16,42.03v-.03h-42.32v.03s-43.57,27.76-43.57,27.76l.28.44,25.76,67.11,38.62,30.89.06.07h.01s.01,0,.01,0l.05-.07,38.62-30.89,25.76-67.11.28-.44-43.57-27.76Z"/>
+  <path class="cls-1" d="M191.6,222.14h5.32l4.9-17.08,4.83,17.08h5.35l5.39-24.5h-5.04l-3.33,16.56-4.76-16.56h-4.79l-4.76,16.56-3.33-16.56h-5.21l5.43,24.5ZM171.79,217.87c-4.38,0-7.74-3.47-7.74-7.98s3.36-7.98,7.74-7.98,7.77,3.43,7.77,7.98-3.36,7.98-7.77,7.98M171.79,222.52c7.28,0,12.95-5.56,12.95-12.64s-5.67-12.63-12.95-12.63-12.95,5.56-12.95,12.63,5.71,12.64,12.95,12.64M139.3,222.14h18.48v-4.48h-13.4v-20.02h-5.07v24.5ZM115.9,222.14h5.07v-10.04h9.21v-4.27h-9.21v-5.78h13.86v-4.41h-18.93v24.5Z"/>
+  <path class="cls-4" d="M92.79,222.14h4.8v-12.63c.84-1.16,2.13-1.82,3.74-1.82,2.31,0,3.78,1.51,3.78,3.85v10.6h4.79v-11.31c0-4.31-2.97-7.28-7.21-7.28-2,0-3.75.63-5.11,1.82v-1.47h-4.8v18.24ZM78.07,218.18c-2.97,0-5.25-2.31-5.25-5.29s2.31-5.18,5.28-5.18c1.68,0,3.19.63,4.24,1.65v7.14c-1.05,1.08-2.52,1.68-4.27,1.68M78.1,229.63c5.85,0,9.03-2.69,9.03-7.52v-18.2h-4.72v1.19c-1.44-.94-3.15-1.47-4.94-1.47-5.25,0-9.38,4.09-9.38,9.27s4.1,9.35,9.24,9.35c1.82,0,3.54-.59,5-1.65v1.44c0,2.41-1.47,3.64-4.34,3.64-1.93,0-3.82-.45-5.81-1.44l-1.68,3.71c2.13,1.08,4.79,1.68,7.59,1.68M58.75,222.14h4.8v-18.24h-4.8v18.24ZM61.13,201.73c1.51,0,2.73-1.26,2.73-2.73s-1.22-2.73-2.73-2.73-2.73,1.23-2.73,2.73,1.22,2.73,2.73,2.73M46.42,222.49c4.58,0,7.98-2.55,7.98-6.02,0-2.84-2-4.69-5.57-5.22l-3.5-.53c-1.78-.24-2.49-.74-2.49-1.75s1.16-1.78,2.87-1.78c1.85,0,3.64.56,5.63,1.78l2.31-3.12c-2.28-1.5-4.83-2.27-7.49-2.27-4.65,0-7.59,2.27-7.59,5.77,0,2.94,1.92,4.8,5.53,5.32l3.5.52c1.58.24,2.27.77,2.27,1.72,0,1.19-1.4,1.96-3.53,1.96-1.92,0-3.78-.66-5.91-2.1l-2.38,3.19c2.06,1.64,5.04,2.52,8.37,2.52"/>
+  <rect class="cls-3" x="0" width="256" height="256"/>
+</svg>

EnvelopeGenerator.Web/wwwroot/img/sign_flow_horizontal.svg

@@ -0,0 +1,5 @@
+<svg width="199" height="95" viewBox="0 0 199 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M67.515 15.8772L52.455 36.8498H44.64L29.58 15.8772L36.135 11.7096H60.9525L67.5075 15.8772H67.515ZM19.485 22.2969L34.2525 42.8654L25.3425 53.7595L14.4675 25.4918L19.485 22.3044V22.2969ZM30.795 65.0651L43.7925 49.1729H53.295L66.2925 65.0651L48.54 79.4084L30.7875 65.0651H30.795ZM71.7525 53.7595L62.8425 42.8654L77.61 22.2969L82.6275 25.4843L71.7525 53.752V53.7595ZM64.4175 0.0224456V0H32.6775V0.0224456L0 20.793L0.209999 21.1222L19.53 71.3352L48.495 94.4476L48.54 94.5H48.5475H48.555L48.5925 94.4476L77.5575 71.3352L96.8775 21.1222L97.0875 20.793L64.41 0.0224456H64.4175Z" fill="#FFD631"/>
+<path d="M180.74 34.5908H185.54V22.0971C186.38 20.9496 187.67 20.2968 189.28 20.2968C191.59 20.2968 193.06 21.7905 193.06 24.1052V34.5908H197.85V23.4029C197.85 19.1394 194.88 16.2014 190.64 16.2014C188.64 16.2014 186.89 16.8246 185.53 18.0018V16.5477H180.73V34.5908H180.74ZM166.02 30.6735C163.05 30.6735 160.77 28.3885 160.77 25.4406C160.77 22.4928 163.08 20.3165 166.05 20.3165C167.73 20.3165 169.24 20.9397 170.29 21.9487V29.0117C169.24 30.08 167.77 30.6735 166.02 30.6735ZM166.05 42C171.9 42 175.08 39.339 175.08 34.5611V16.5576H170.36V17.7347C168.92 16.8049 167.21 16.2806 165.42 16.2806C160.17 16.2806 156.04 20.3264 156.04 25.4505C156.04 30.5746 160.14 34.6996 165.28 34.6996C167.1 34.6996 168.82 34.116 170.28 33.0674V34.4919C170.28 36.8759 168.81 38.0926 165.94 38.0926C164.01 38.0926 162.12 37.6475 160.13 36.6682L158.45 40.3381C160.58 41.4065 163.24 42 166.04 42M146.7 34.5908H151.5V16.5477H146.7V34.5908ZM149.08 14.4011C150.59 14.4011 151.81 13.1547 151.81 11.7005C151.81 10.2464 150.59 9 149.08 9C147.57 9 146.35 10.2167 146.35 11.7005C146.35 13.1843 147.57 14.4011 149.08 14.4011ZM134.37 34.9371C138.95 34.9371 142.35 32.4146 142.35 28.982C142.35 26.1727 140.35 24.3426 136.78 23.8183L133.28 23.2941C131.5 23.0567 130.79 22.562 130.79 21.5629C130.79 20.5638 131.95 19.8022 133.66 19.8022C135.51 19.8022 137.3 20.3561 139.29 21.5629L141.6 18.4766C139.32 16.9928 136.77 16.2311 134.11 16.2311C129.46 16.2311 126.52 18.4766 126.52 21.9389C126.52 24.8471 128.44 26.687 132.05 27.2014L135.55 27.7158C137.13 27.9532 137.82 28.4775 137.82 29.4173C137.82 30.5944 136.42 31.3561 134.29 31.3561C132.37 31.3561 130.51 30.7032 128.38 29.2788L126 32.4344C128.06 34.0567 131.04 34.9271 134.37 34.9271" fill="white"/>
+<path d="M172.7 84.6241H178.02L182.92 67.7265L187.75 84.6241H193.1L198.49 60.3858H193.45L190.12 76.7689L185.36 60.3858H180.57L175.81 76.7689L172.48 60.3858H167.27L172.7 84.6241ZM152.89 80.3997C148.51 80.3997 145.15 76.9668 145.15 72.5049C145.15 68.0431 148.51 64.6102 152.89 64.6102C157.27 64.6102 160.66 68.0036 160.66 72.5049C160.66 77.0063 157.3 80.3997 152.89 80.3997ZM152.89 85C160.17 85 165.84 79.4994 165.84 72.4951C165.84 65.4907 160.17 60 152.89 60C145.61 60 139.94 65.5006 139.94 72.4951C139.94 79.4895 145.65 85 152.89 85ZM120.4 84.6241H138.88V80.1919H125.48V60.3858H120.41V84.6241H120.4ZM97 84.6241H102.07V74.6913H111.28V70.467H102.07V64.7487H115.93V60.3858H97V84.6241Z" fill="#FFD631"/>
+</svg>

EnvelopeGenerator.Web/wwwroot/js/app.js

@@ -150,8 +150,7 @@ class App {
                         icon: 'info',
                     })
                 }
-
+                break;
-                break
 
             case 'FINISH':
                 result = await this.handleFinish(null)
@@ -160,8 +159,7 @@ class App {
                     // Redirect to success page after saving to database
                     window.location.href = `/EnvelopeKey/${this.envelopeKey}/Success`
                 }
-
+                break;
-                break
 
             case 'REJECT':
                 Swal.fire({
@@ -200,6 +198,14 @@ class App {
                         Swal.showValidationMessage(`Request failed: ${res.message}`);
                 });
                 break;
+            case 'COPY_URL':
+                const url = window.location.href;
+                navigator.clipboard.writeText(url).then(function () {
+                    bsNotify('Kopiert', { alert_type: 'success', delay: 4, icon_name: 'check_circle' });
+                }).catch(function (err) {
+                    bsNotify('Unerwarteter Fehler', { alert_type: 'danger', delay: 4, icon_name: 'error' });
+                });
+                break;
 
             case 'SHARE':
                 // Show the modal

EnvelopeGenerator.Web/wwwroot/js/app.min.js

@@ -1,3 +1,3 @@
 const ActionType={Created:0,Saved:1,Sent:2,EmailSent:3,Delivered:4,Seen:5,Signed:6,Rejected:7};class App{constructor(n,t,i,r,u,f){this.container=f??`#${this.constructor.name.toLowerCase()}`;this.envelopeKey=n;this.Network=new Network;this.Instance=null;this.currentDocument=null;this.currentReceiver=null;this.signatureCount=0;this.envelopeReceiver=t;this.documentBytes=i;this.licenseKey=r;this.locale=u}async init(){this.currentDocument=this.envelopeReceiver.envelope.documents[0];this.currentReceiver=this.envelopeReceiver.receiver;const n=this.documentBytes;if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Dokument konnte nicht geladen werden!",icon:"error"});const t=this.documentBytes;this.Instance=await UI.loadPSPDFKit(t,this.container,this.licenseKey,this.locale);UI.addToolbarItems(this.Instance,this.handleClick.bind(this));this.Instance.addEventListener("annotations.load",this.handleAnnotationsLoad.bind(this));this.Instance.addEventListener("annotations.change",this.handleAnnotationsChange.bind(this));this.Instance.addEventListener("annotations.create",this.handleAnnotationsCreate.bind(this));this.Instance.addEventListener("annotations.willChange",()=>{Comp.ActPanel.Toggle()});try{this.signatureCount=this.currentDocument.elements.length;await Annotation.createAnnotations(this.currentDocument,this.Instance);const n=await this.Network.openDocument(this.envelopeKey);if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht geöffnet werden!",icon:"error"})}catch(i){}[...document.getElementsByClassName("btn_refresh")].forEach(n=>n.addEventListener("click",()=>this.handleClick("RESET")));[...document.getElementsByClassName("btn_complete")].forEach(n=>n.addEventListener("click",()=>this.handleClick("FINISH")));[...document.getElementsByClassName("btn_reject")].forEach(n=>n.addEventListener("click",()=>this.handleClick("REJECT")))}handleAnnotationsLoad(n){n.toJS()}handleAnnotationsChange(){}async handleAnnotationsCreate(n){const t=n.toJS()[0],i=!!t.formFieldName,r=!!t.isSignature;if(i===!1&&r===!0){const r=t.boundingBox.left-20,u=t.boundingBox.top-20,n=150,i=75,f=new Date,e=await Annotation.createAnnotationFrameBlob(this.envelopeReceiver.name,this.currentReceiver.signature,f,n,i),o=await fetch(e),s=await o.blob(),h=await this.Instance.createAttachment(s),c=Annotation.createImageAnnotation(new PSPDFKit.Geometry.Rect({left:r,top:u,width:n,height:i}),t.pageIndex,h);this.Instance.create(c)}}async handleClick(n){let t=!1;switch(n){case"RESET":t=await this.handleReset(null);Comp.SignatureProgress.SignedCount=0;t.isConfirmed&&Swal.fire({title:"Erfolg",text:"Dokument wurde zurückgesetzt",icon:"info"});break;case"FINISH":t=await this.handleFinish(null);t==!0&&(window.location.href=`/EnvelopeKey/${this.envelopeKey}/Success`);break;case"REJECT":Swal.fire({title:localized.rejection,html:`<div class="text-start fs-6 p-0 m-0">${localized.rejectionReasonQ}</div>`,icon:"question",input:"text",inputAttributes:{autocapitalize:"off"},showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.complete,cancelButtonText:localized.back,showLoaderOnConfirm:!0,preConfirm:async n=>{try{return await rejectEnvelope(n)}catch(t){Swal.showValidationMessage(`
                           Request failed: ${t}
-                        `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}});break;case"SHARE":Comp.ShareBackdrop.show()}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>Annotation.isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>Annotation.isCityField(n));for(var i of e)if(!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`<div class="text-start fs-6 p-0 m-0">${localized.sigAgree}</div>`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await Annotation.getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await Annotation.deleteAnnotations(this.Instance)}return n}}
+                        `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}});break;case"COPY_URL":const n=window.location.href;navigator.clipboard.writeText(n).then(function(){bsNotify("Kopiert",{alert_type:"success",delay:4,icon_name:"check_circle"})}).catch(function(){bsNotify("Unerwarteter Fehler",{alert_type:"danger",delay:4,icon_name:"error"})});break;case"SHARE":Comp.ShareBackdrop.show()}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>Annotation.isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>Annotation.isCityField(n));for(var i of e)if(!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`<div class="text-start fs-6 p-0 m-0">${localized.sigAgree}</div>`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await Annotation.getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await Annotation.deleteAnnotations(this.Instance)}return n}}

EnvelopeGenerator.Web/wwwroot/js/ui.js

@@ -53,7 +53,9 @@
   static addToolbarItems(instance, handler) {
     var toolbarItems = instance.toolbarItems.filter((item) => UI.allowedToolbarItems.includes(item.type));
 
-    if (!IS_READONLY)
+    if (IS_READONLY)    
+      toolbarItems = toolbarItems.concat(UI.getReadOnlyItems(handler));
+    else
       toolbarItems = toolbarItems.concat(UI.getWritableItems(handler));
 
     if (!IS_DESKTOP && !IS_READONLY)
@@ -91,6 +93,24 @@
     ];
   }
 
+  static getReadOnlyItems = function (callback) {
+    return [
+      {
+        type: 'custom',
+        id: 'button-copy-url',
+        className: 'button-copy-url',
+        title: 'Teilen',
+        onPress() {
+          callback('COPY_URL')
+        },
+        icon: `<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15 3H9C6.79086 3 5 4.79086 5 7V15" stroke="#222222"/>
+                <path d="M8.5 11.5C8.5 10.3156 8.50074 9.46912 8.57435 8.81625C8.64681 8.17346 8.78457 7.78051 9.01662 7.4781C9.14962 7.30477 9.30477 7.14962 9.4781 7.01662C9.78051 6.78457 10.1735 6.64681 10.8163 6.57435C11.4691 6.50074 12.3156 6.5 13.5 6.5C14.6844 6.5 15.5309 6.50074 16.1837 6.57435C16.8265 6.64681 17.2195 6.78457 17.5219 7.01662C17.6952 7.14962 17.8504 7.30477 17.9834 7.4781C18.2154 7.78051 18.3532 8.17346 18.4257 8.81625C18.4993 9.46912 18.5 10.3156 18.5 11.5V15.5C18.5 16.6844 18.4993 17.5309 18.4257 18.1837C18.3532 18.8265 18.2154 19.2195 17.9834 19.5219C17.8504 19.6952 17.6952 19.8504 17.5219 19.9834C17.2195 20.2154 16.8265 20.3532 16.1837 20.4257C15.5309 20.4993 14.6844 20.5 13.5 20.5C12.3156 20.5 11.4691 20.4993 10.8163 20.4257C10.1735 20.3532 9.78051 20.2154 9.4781 19.9834C9.30477 19.8504 9.14962 19.6952 9.01662 19.5219C8.78457 19.2195 8.64681 18.8265 8.57435 18.1837C8.50074 17.5309 8.5 16.6844 8.5 15.5V11.5Z" stroke="#222222"/>
+              </svg>`,
+      }
+    ];
+  }
+
   static getMobileWritableItems = function (callback) {
     return [
       {

EnvelopeGenerator.Web/wwwroot/js/ui.min.js

@@ -1,7 +1,10 @@
 class UI{static allowedToolbarItems=["sidebar-thumbnails","sidebar-document-ouline","sidebar-bookmarks","pager","pan","zoom-out","zoom-in","zoom-mode","spacer","search","export-pdf"];static Instance
-  static loadPSPDFKit(n,t,i,r){return UI.Instance=PSPDFKit.load({inlineWorkers:!1,locale:r,licenseKey:i,styleSheets:["/css/site.css"],container:t,document:n,annotationPresets:UI.getPresets(),electronicSignatures:{creationModes:["DRAW","TYPE","IMAGE"]},initialViewState:new PSPDFKit.ViewState({sidebarMode:PSPDFKit.SidebarMode.THUMBNAILS}),isEditableAnnotation:function(n){return n.isSignature||n.description=="FRAME"?!1:!0},customRenderers:{Annotation:UI.annotationRenderer}}),UI.Instance}static addToolbarItems(n,t){var i=n.toolbarItems.filter(n=>UI.allowedToolbarItems.includes(n.type));IS_READONLY||(i=i.concat(UI.getWritableItems(t)));IS_DESKTOP||IS_READONLY||(i=i.concat(UI.getMobileWritableItems(t)));n.setToolbarItems(i)}static annotationRenderer(){return null}static createElementFromHTML(n){const t=document.createElement("div");return t.innerHTML=n.trim(),t.firstChild}static getWritableItems=function(n){return[{type:"custom",id:"button-share",className:"button-share",title:"Teilen",onPress(){n("SHARE")},icon:`<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  static loadPSPDFKit(n,t,i,r){return UI.Instance=PSPDFKit.load({inlineWorkers:!1,locale:r,licenseKey:i,styleSheets:["/css/site.css"],container:t,document:n,annotationPresets:UI.getPresets(),electronicSignatures:{creationModes:["DRAW","TYPE","IMAGE"]},initialViewState:new PSPDFKit.ViewState({sidebarMode:PSPDFKit.SidebarMode.THUMBNAILS}),isEditableAnnotation:function(n){return n.isSignature||n.description=="FRAME"?!1:!0},customRenderers:{Annotation:UI.annotationRenderer}}),UI.Instance}static addToolbarItems(n,t){var i=n.toolbarItems.filter(n=>UI.allowedToolbarItems.includes(n.type));i=IS_READONLY?i.concat(UI.getReadOnlyItems(t)):i.concat(UI.getWritableItems(t));IS_DESKTOP||IS_READONLY||(i=i.concat(UI.getMobileWritableItems(t)));n.setToolbarItems(i)}static annotationRenderer(){return null}static createElementFromHTML(n){const t=document.createElement("div");return t.innerHTML=n.trim(),t.firstChild}static getWritableItems=function(n){return[{type:"custom",id:"button-share",className:"button-share",title:"Teilen",onPress(){n("SHARE")},icon:`<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>`}]};static getMobileWritableItems=function(n){return[{type:"custom",id:"button-finish",className:"button-finish",onPress(){n("FINISH")},icon:`<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
+            </svg>`}]};static getReadOnlyItems=function(n){return[{type:"custom",id:"button-copy-url",className:"button-copy-url",title:"Teilen",onPress(){n("COPY_URL")},icon:`<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15 3H9C6.79086 3 5 4.79086 5 7V15" stroke="#222222"/>
+                <path d="M8.5 11.5C8.5 10.3156 8.50074 9.46912 8.57435 8.81625C8.64681 8.17346 8.78457 7.78051 9.01662 7.4781C9.14962 7.30477 9.30477 7.14962 9.4781 7.01662C9.78051 6.78457 10.1735 6.64681 10.8163 6.57435C11.4691 6.50074 12.3156 6.5 13.5 6.5C14.6844 6.5 15.5309 6.50074 16.1837 6.57435C16.8265 6.64681 17.2195 6.78457 17.5219 7.01662C17.6952 7.14962 17.8504 7.30477 17.9834 7.4781C18.2154 7.78051 18.3532 8.17346 18.4257 8.81625C18.4993 9.46912 18.5 10.3156 18.5 11.5V15.5C18.5 16.6844 18.4993 17.5309 18.4257 18.1837C18.3532 18.8265 18.2154 19.2195 17.9834 19.5219C17.8504 19.6952 17.6952 19.8504 17.5219 19.9834C17.2195 20.2154 16.8265 20.3532 16.1837 20.4257C15.5309 20.4993 14.6844 20.5 13.5 20.5C12.3156 20.5 11.4691 20.4993 10.8163 20.4257C10.1735 20.3532 9.78051 20.2154 9.4781 19.9834C9.30477 19.8504 9.14962 19.6952 9.01662 19.5219C8.78457 19.2195 8.64681 18.8265 8.57435 18.1837C8.50074 17.5309 8.5 16.6844 8.5 15.5V11.5Z" stroke="#222222"/>
+              </svg>`}]};static getMobileWritableItems=function(n){return[{type:"custom",id:"button-finish",className:"button-finish",onPress(){n("FINISH")},icon:`<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
                   <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
                   <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
               </svg>`},{type:"custom",id:"button-reject",className:"button-reject",title:"Ablehnen",onPress(){n("REJECT")},icon:`<svg width="25px" height="25px" viewBox="43.5 43.5 512 512" version="1.1" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">