Changeset 3783861

Timestamp:

11/04/2026 12:01:29 PM (38 hours ago)

Author:

awoscan

Message:

Release AwoSign 1.3.0 with multi-template signatures, [awosign] shortcode, screenshots, rich banner, and Playground blueprint

Location:

awosign

Files:

• assets/banner-1544x500.png (modified) ( previous)
• assets/banner-772x250.png (modified) ( previous)
• assets/blueprints (added)
• assets/blueprints/blueprint.json (added)
• assets/screenshot-1.png (added)
• assets/screenshot-2.png (added)
• assets/screenshot-3.png (added)
• tags/1.3.0 (added)
• tags/1.3.0/LICENSE.txt (added)
• tags/1.3.0/assets (added)
• tags/1.3.0/assets/designer.css (added)
• tags/1.3.0/assets/designer.js (added)
• tags/1.3.0/assets/qrcode-LICENSE.txt (added)
• tags/1.3.0/assets/qrcode.js (added)
• tags/1.3.0/awosign.php (added)
• tags/1.3.0/designer-view.php (added)
• tags/1.3.0/readme.txt (added)
• tags/1.3.0/uninstall.php (added)
• trunk/assets/designer.css (modified) (1 diff)
• trunk/assets/designer.js (modified) (6 diffs)
• trunk/awosign.php (modified) (3 diffs)
• trunk/designer-view.php (modified) (1 diff)
• trunk/readme.txt (modified) (1 diff)
• trunk/uninstall.php (added)

awosign/trunk/assets/designer.css

@@ +1 @@
+/* AwoSign v1.3.0 — GPL-2.0-or-later */
 #awosign-root {
-  font-family:Arial,Helvetica,sans-serif;
-  color-scheme:dark;
-  --brand:#172e49;
-  --accent:#e7b52e
-}
+  --brand: #172e49;
+  --accent: #e7b52e;
+  --as-bg: #09131f;
+  --as-panel: #182a3e;
+  --as-panel-border: #304963;
+  --as-stage: #101e2e;
+  --as-stage-border: #4c6680;
+  --as-input-bg: #102032;
+  --as-input-border: #47617a;
+  --as-text: #eaf2fc;
+  --as-muted: #91abc5;
+  --as-hint: #b9cee3;
+  --as-header-bg: #172b43;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+  color-scheme: dark;
+  margin: 20px 20px 20px 0;
+  min-height: 80vh;
+  background: var(--as-bg);
+  color: var(--as-text);
+  border-radius: 14px;
+  overflow: hidden;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* Light Mode: Explicit or Automatic via System/Page */
+#awosign-root[data-theme="light"],
+html:not(.dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.wp-dark-mode-active) #awosign-root[data-theme="auto"] {
+  --as-bg: #edf2f8;
+  --as-panel: #ffffff;
+  --as-panel-border: #d2dfed;
+  --as-stage: #f3f6fa;
+  --as-stage-border: #b8c9dc;
+  --as-input-bg: #ffffff;
+  --as-input-border: #bdcad9;
+  --as-text: #172e49;
+  --as-muted: #526477;
+  --as-hint: #3b536e;
+  --as-header-bg: #102438;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  #awosign-root[data-theme="auto"] {
+    --as-bg: #09131f;
+    --as-panel: #182a3e;
+    --as-panel-border: #304963;
+    --as-stage: #101e2e;
+    --as-stage-border: #4c6680;
+    --as-input-bg: #102032;
+    --as-input-border: #47617a;
+    --as-text: #eaf2fc;
+    --as-muted: #91abc5;
+    --as-hint: #b9cee3;
+    --as-header-bg: #172b43;
+    color-scheme: dark;
+  }
+}
+
 #awosign-root * {
-  box-sizing:border-box
-}
-#awosign-root {
-  margin:0;
-  background:#09131f;
-  color:#eaf2fc
-}
+  box-sizing: border-box;
+}
+
 #awosign-root header {
-  background:#172b43;
-  padding:18px 26px;
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  gap:16px;
-  flex-wrap:wrap
-}
+  background: var(--as-header-bg);
+  color: #ffffff;
+  padding: 18px 26px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
 #awosign-root header h1 {
-  margin:0;
-  font-size:25px
-}
+  margin: 0;
+  font-size: 24px;
+  color: #ffffff;
+}
+
 #awosign-root header small {
-  color:#b8c8dc
-}
+  color: #b8c8dc;
+  display: block;
+  margin-top: 4px;
+}
+
+#awosign-root header label {
+  color: #ffffff;
+  margin-top: 0;
+}
+
+#awosign-root header select {
+  background: #102032;
+  color: #ffffff;
+  border-color: #47617a;
+}
+
 #awosign-root main {
-  padding:22px;
-  display:grid;
-  grid-template-columns:minmax(290px,390px) minmax(0,1fr);
-  gap:20px
-}
+  padding: 22px;
+  display: grid;
+  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+
 #awosign-root .panel {
-  background:#182a3e;
-  border:1px solid #304963;
-  border-radius:14px;
-  padding:22px
-}
+  background: var(--as-panel);
+  border: 1px solid var(--as-panel-border);
+  border-radius: 14px;
+  padding: 22px;
+}
+
 #awosign-root h2 {
-  font-size:18px;
-  margin:0 0 17px
-}
+  font-size: 18px;
+  margin: 0 0 14px;
+  color: inherit;
+}
+
 #awosign-root h3 {
-  font-size:14px;
-  margin:18px 0 9px
-}
+  font-size: 14px;
+  margin: 16px 0 9px;
+  color: inherit;
+}
+
 #awosign-root label {
-  display:block;
-  font-size:12px;
-  font-weight:bold;
-  margin:12px 0 5px
-}
-#awosign-root input,#awosign-root select,#awosign-root textarea {
-  width:100%;
-  border:1px solid #47617a;
-  border-radius:7px;
-  background:#102032;
-  color:#fff;
-  padding:10px;
-  font:inherit;
-  font-size:13px
-}
-#awosign-root input[type=color] {
-  height:40px;
-  padding:3px
-}
-#awosign-root input[type=checkbox] {
-  width:auto;
-  accent-color:#e7b52e
-}
-#awosign-root input[type=file] {
-  font-size:12px
-}
+  display: block;
+  font-size: 12.5px;
+  font-weight: 600;
+  margin: 11px 0 5px;
+}
+
+#awosign-root .as-inline-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  margin: 10px 0;
+}
+
+#awosign-root input,
+#awosign-root select,
+#awosign-root textarea {
+  width: 100%;
+  border: 1px solid var(--as-input-border);
+  border-radius: 7px;
+  background: var(--as-input-bg);
+  color: var(--as-text);
+  padding: 9px 10px;
+  font: inherit;
+  font-size: 13px;
+}
+
+#awosign-root input[type="color"] {
+  height: 40px;
+  padding: 3px;
+  cursor: pointer;
+}
+
+#awosign-root input[type="checkbox"] {
+  width: auto;
+  accent-color: #e7b52e;
+}
+
+#awosign-root input[type="file"] {
+  font-size: 12px;
+}
+
 #awosign-root .two {
-  display:grid;
-  grid-template-columns:1fr 1fr;
-  gap:12px
-}
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
 #awosign-root .social {
-  display:grid;
-  grid-template-columns:repeat(2,minmax(0,1fr));
-  gap:8px
-}
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
 #awosign-root .social label {
-  display:flex;
-  align-items:center;
-  gap:7px;
-  font-size:12px;
-  margin:0;
-  background:#102032;
-  border-radius:7px;
-  padding:9px
-}
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  margin: 0;
+  background: var(--as-input-bg);
+  border: 1px solid var(--as-input-border);
+  border-radius: 7px;
+  padding: 8px 10px;
+  cursor: pointer;
+}
+
 #awosign-root .tabs {
-  display:flex;
-  flex-wrap:wrap;
-  gap:8px;
-  margin-bottom:18px
-}
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+
 #awosign-root button {
-  border:1px solid #54708e;
-  background:#25486d;
-  color:white;
-  padding:10px 13px;
-  border-radius:8px;
-  cursor:pointer;
-  font-weight:bold
-}
+  border: 1px solid #415e7c;
+  background: #1d3b5a;
+  color: #ffffff;
+  padding: 9px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+  transition: background 0.15s ease;
+}
+
+#awosign-root button:hover {
+  background: #2b527a;
+}
+
+#awosign-root button.as-btn-primary {
+  background: #1a633f;
+  border-color: #237d50;
+}
+
+#awosign-root button.as-btn-primary:hover {
+  background: #237d50;
+}
+
+#awosign-root button.as-btn-accent {
+  background: #9a6f15;
+  border-color: #b5831a;
+}
+
+#awosign-root button.as-btn-accent:hover {
+  background: #b5831a;
+}
+
 #awosign-root button.active {
-  background:#e7b52e;
-  color:#102032;
-  border-color:#e7b52e
-}
+  background: #e7b52e;
+  color: #102032;
+  border-color: #e7b52e;
+}
+
+#awosign-root button:focus-visible,
+#awosign-root input:focus-visible,
+#awosign-root select:focus-visible,
+#awosign-root textarea:focus-visible {
+  outline: 3px solid #e7b52e;
+  outline-offset: 2px;
+}
+
 #awosign-root .stage {
-  background:#101e2e;
-  border:1px dashed #4c6680;
-  border-radius:12px;
-  padding:24px;
-  overflow:auto
-}
+  background: var(--as-stage);
+  border: 1px dashed var(--as-stage-border);
+  border-radius: 12px;
+  padding: 24px;
+  overflow: auto;
+}
+
 #awosign-root .stage h3 {
-  margin:0 0 13px;
-  color:#c8d9ee
-}
+  margin: 0 0 13px;
+}
+
 #awosign-root .signature {
-  background:white;
-  color:#15263c;
-  width:600px;
-  max-width:100%;
-  padding:18px;
-  border-radius:2px;
-  font-family:Arial,sans-serif
-}
+  background: #ffffff;
+  color: #15263c;
+  width: 600px;
+  max-width: 100%;
+  padding: 18px;
+  border-radius: 4px;
+  font-family: Arial, Helvetica, sans-serif;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
+}
+
 #awosign-root .sigrow {
-  display:flex;
-  align-items:center;
-  gap:20px
-}
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
 #awosign-root .siglogo {
-  width:170px;
-  min-width:170px;
-  text-align:center
-}
+  width: 170px;
+  min-width: 170px;
+  text-align: center;
+}
+
 #awosign-root .siglogo img {
-  max-width:100%;
-  max-height:110px;
-  object-fit:contain
-}
+  max-width: 100%;
+  max-height: 110px;
+  object-fit: contain;
+}
+
+#awosign-root .siglogo div {
+  overflow-wrap: anywhere;
+}
+
 #awosign-root .siginfo {
-  border-left:2px solid var(--accent);
-  padding-left:17px;
-  line-height:1.55;
-  font-size:12px
-}
+  border-left: 2px solid var(--accent);
+  padding-left: 17px;
+  line-height: 1.55;
+  font-size: 12px;
+}
+
 #awosign-root .siginfo strong {
-  font-size:19px
-}
+  font-size: 19px;
+}
+
 #awosign-root .sigaddress {
-  font-size:11px;
-  margin-top:12px;
-  border-top:1px solid #ddd;
-  padding-top:9px
-}
+  font-size: 11px;
+  margin-top: 12px;
+  border-top: 1px solid #dddddd;
+  padding-top: 9px;
+}
+
+/* 85 x 55 mm Exact Business Cards (Front & Back) */
 #awosign-root .cards {
-  display:flex;
-  gap:20px;
-  flex-wrap:wrap
-}
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
 #awosign-root .cardwrap {
-  width:min(100%,460px)
-}
-#awosign-root .card {
-  aspect-ratio:85/55;
-  border-radius:9px;
-  overflow:hidden;
-  padding:24px;
-  position:relative
-}
-#awosign-root .front {
-  background:var(--brand);
-  color:white;
-  display:flex;
-  flex-direction:column;
-  align-items:center;
-  justify-content:center;
-  text-align:center;
-  border-top:5px solid var(--accent)
-}
-#awosign-root .front img {
-  max-width:55%;
-  max-height:95px;
-  object-fit:contain
-}
-#awosign-root .front strong {
-  font-size:22px;
-  margin-top:12px
-}
-#awosign-root .back {
-  background:white;
-  color:#15263c;
-  border-left:6px solid var(--accent);
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  gap:12px
-}
-#awosign-root .back .details {
-  min-width:0;
-  overflow-wrap:anywhere;
-  font-size:12px;
-  line-height:1.6
-}
-#awosign-root .back strong {
-  font-size:20px
-}
-#awosign-root .qr {
-  background:white;
-  padding:5px;
-  border-radius:5px;
-  width:105px;
-  height:105px;
-  object-fit:contain;
-  flex-shrink:0
-}
-#awosign-root .socialicons {
-  display:flex;
-  gap:5px;
-  flex-wrap:wrap;
-  margin-top:8px
-}
-#awosign-root .socialicons span {
-  background:var(--brand);
-  color:#fff;
-  font-size:10px;
-  padding:5px 7px;
-  border-radius:4px;
-  font-weight:bold
-}
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#awosign-root .card,
+#as-print-host .card {
+  width: 85mm;
+  height: 55mm;
+  box-sizing: border-box;
+  border-radius: 0;
+  overflow: hidden;
+  padding: 5.5mm;
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
+}
+
+#awosign-root .card.show-crop-guide {
+  outline: 1px dashed #7f95ab;
+  outline-offset: -0.2mm;
+}
+
+#awosign-root .front,
+#as-print-host .front {
+  background: var(--brand, #172e49);
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-top: 1.5mm solid var(--accent, #e7b52e);
+}
+
+#awosign-root .front img,
+#as-print-host .front img {
+  max-width: 46mm;
+  max-height: 22mm;
+  object-fit: contain;
+}
+
+#awosign-root .front strong,
+#as-print-host .front strong {
+  font-size: 13pt;
+  margin-top: 2.5mm;
+}
+
+#awosign-root .front small,
+#as-print-host .front small {
+  font-size: 7.5pt;
+  color: #dbe7f5;
+  margin-top: 1mm;
+}
+
+#awosign-root .back,
+#as-print-host .back {
+  background: #ffffff;
+  color: #15263c;
+  border-left: 1.8mm solid var(--accent, #e7b52e);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 3mm;
+}
+
+#awosign-root .back .details,
+#as-print-host .back .details {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: 7.4pt;
+  line-height: 1.38;
+}
+
+#awosign-root .back strong,
+#as-print-host .back strong {
+  font-size: 11.5pt;
+  color: #102032;
+}
+
+#awosign-root .qr,
+#as-print-host .qr {
+  background: #ffffff;
+  padding: 1mm;
+  border-radius: 1mm;
+  border: 0.2mm solid #d8e0e8;
+  width: 22mm;
+  height: 22mm;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+#awosign-root .socialicons,
+#as-print-host .socialicons {
+  display: flex;
+  gap: 1.2mm;
+  flex-wrap: wrap;
+  margin-top: 1.8mm;
+}
+
+#awosign-root .socialicons span,
+#as-print-host .socialicons span {
+  background: var(--brand, #172e49);
+  color: #ffffff;
+  font-size: 6.5pt;
+  padding: 0.8mm 1.5mm;
+  border-radius: 0.8mm;
+  font-weight: bold;
+  display: inline-block;
+}
+
 #awosign-root .digital {
-  width:540px;
-  max-width:100%;
-  background:var(--brand);
-  color:white;
-  border-top:5px solid var(--accent);
-  padding:24px;
-  border-radius:12px;
-  display:flex;
-  justify-content:space-between;
-  align-items:center;
-  gap:12px;
-  min-height:310px
-}
+  width: 540px;
+  max-width: 100%;
+  background: var(--brand);
+  color: #ffffff;
+  border-top: 5px solid var(--accent);
+  padding: 24px;
+  border-radius: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  min-height: 290px;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
+}
+
 #awosign-root .digital img.logo {
-  width:100px;
-  max-height:70px;
-  object-fit:contain
-}
+  width: 110px;
+  max-height: 70px;
+  object-fit: contain;
+}
+
 #awosign-root .digital strong {
-  font-size:22px
-}
+  font-size: 22px;
+}
+
 #awosign-root .digital .details {
-  line-height:1.7;
-  font-size:13px;
-  overflow-wrap:anywhere
-}
+  line-height: 1.65;
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+#awosign-root .digital .qr {
+  width: 108px;
+  height: 108px;
+}
+
+/* Print & Bulk Duplication Panel */
+#awosign-root .as-staff-bar {
+  background: var(--as-input-bg);
+  border: 1px solid var(--as-input-border);
+  border-radius: 10px;
+  padding: 14px;
+  margin-bottom: 14px;
+}
+
+#awosign-root .as-staff-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+#awosign-root .as-staff-header h2 {
+  margin: 0;
+  font-size: 15px;
+}
+
+#awosign-root .as-badge {
+  background: #e7b52e;
+  color: #102032;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 9px;
+  border-radius: 20px;
+}
+
+#awosign-root .as-shortcode-box {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed var(--as-input-border);
+}
+
+#awosign-root .as-shortcode-row,
+#awosign-root .as-logo-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+#awosign-root .as-shortcode-row input {
+  font-family: monospace;
+  font-size: 12px;
+}
+
+#awosign-root .as-logo-row button,
+#awosign-root .as-shortcode-row button {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+#awosign-root .as-file-btn {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #415e7c;
+  background: #1d3b5a;
+  color: #ffffff;
+  padding: 9px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+  margin: 0;
+}
+
+#awosign-root .as-print-panel {
+  background: var(--as-input-bg);
+  border: 1px solid var(--as-input-border);
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-top: 16px;
+}
+
+#awosign-root .as-print-panel h4 {
+  margin: 0 0 10px;
+  font-size: 14px;
+}
+
+#awosign-root .as-print-grid {
+  display: grid;
+  grid-template-columns: minmax(220px, 1.6fr) minmax(130px, 1fr);
+  gap: 12px;
+  align-items: end;
+}
+
 #awosign-root .hint {
-  font-size:12px;
-  color:#b9cee3;
-  margin-top:12px
-}
+  font-size: 12px;
+  color: var(--as-hint);
+  margin-top: 10px;
+}
+
 #awosign-root .muted {
-  color:#91abc5;
-  font-size:12px
-}
+  color: var(--as-muted);
+  font-size: 12px;
+  margin-top: 14px;
+}
+
+#awosign-root #as-status {
+  font-size: 13px;
+  font-weight: 600;
+  min-height: 18px;
+  margin-top: 10px;
+  color: #e7b52e;
+}
+
 #awosign-root .hidden {
-  display:none!important
-}
+  display: none !important;
+}
+
 #awosign-root .buttons {
-  display:flex;
-  gap:8px;
-  flex-wrap:wrap;
-  margin-top:15px
-}
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 15px;
+}
+
 #awosign-root a {
-  color:inherit
-}
-#awosign-root.light {
-  background:#edf2f8;
-  color:#172e49;
-  color-scheme:light
-}
-#awosign-root.light .panel {
-  background:white;
-  border-color:#d2dfed
-}
-#awosign-root.light .stage {
-  background:#f3f6fa
-}
-#awosign-root.light input,#awosign-root.light select,#awosign-root.light textarea {
-  background:white;
-  color:#172e49;
-  border-color:#bdcad9
-}
-#awosign-root.light .social label {
-  background:#edf2f8
-}
-#awosign-root.light .stage h3 {
-  color:#243f5d
-}
-@media(max-width:950px) {
+  color: inherit;
+}
+
+#awosign-root .privacy {
+  padding: 12px 22px;
+  background: #102032;
+  color: #d7e4f5;
+  margin: 0;
+  font-size: 12.5px;
+}
+
+/* In-Page Print Host (Replaces popup window.open) */
+#as-print-host {
+  display: none;
+}
+
+#as-print-host .as-a4-sheet {
+  width: 210mm;
+  height: 297mm;
+  box-sizing: border-box;
+  padding: 11mm 20mm;
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: repeat(2, 85mm);
+  grid-template-rows: repeat(5, 55mm);
+  gap: 0;
+  break-after: page;
+  page-break-after: always;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+#as-print-host .as-a4-sheet:last-child {
+  break-after: auto;
+  page-break-after: auto;
+}
+
+#as-print-host .as-a4-cell {
+  width: 85mm;
+  height: 55mm;
+  position: relative;
+  box-sizing: border-box;
+}
+
+#as-print-host .as-a4-cell.has-crop-lines {
+  outline: 0.15mm dashed #9aa8b6;
+}
+
+#as-print-host .as-bleed-sheet {
+  width: 97mm;
+  height: 67mm;
+  padding: 6mm;
+  box-sizing: border-box;
+  background: #ffffff;
+  position: relative;
+  break-after: page;
+  page-break-after: always;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+#as-print-host .as-bleed-sheet:last-child {
+  break-after: auto;
+  page-break-after: auto;
+}
+
+#as-print-host .as-bleed-sheet .card {
+  position: relative;
+  z-index: 2;
+  box-shadow: none !important;
+}
+
+#as-print-host .as-bleed-bg-front {
+  position: absolute;
+  top: 3mm;
+  left: 3mm;
+  width: 91mm;
+  height: 61mm;
+  background: var(--brand, #172e49);
+  border-top: 4.5mm solid var(--accent, #e7b52e);
+  z-index: 1;
+}
+
+#as-print-host .as-bleed-bg-back {
+  position: absolute;
+  top: 3mm;
+  left: 3mm;
+  width: 91mm;
+  height: 61mm;
+  background: #ffffff;
+  border-left: 4.8mm solid var(--accent, #e7b52e);
+  z-index: 1;
+}
+
+#as-print-host .as-crop-mark {
+  position: absolute;
+  background: #000000;
+  z-index: 3;
+}
+
+#as-print-host .as-crop-tl-h { top: 6mm; left: 0.5mm; width: 4mm; height: 0.2mm; }
+#as-print-host .as-crop-tr-h { top: 6mm; right: 0.5mm; width: 4mm; height: 0.2mm; }
+#as-print-host .as-crop-bl-h { bottom: 6mm; left: 0.5mm; width: 4mm; height: 0.2mm; }
+#as-print-host .as-crop-br-h { bottom: 6mm; right: 0.5mm; width: 4mm; height: 0.2mm; }
+
+#as-print-host .as-crop-tl-v { top: 0.5mm; left: 6mm; width: 0.2mm; height: 4mm; }
+#as-print-host .as-crop-tr-v { top: 0.5mm; right: 6mm; width: 0.2mm; height: 4mm; }
+#as-print-host .as-crop-bl-v { bottom: 0.5mm; left: 6mm; width: 0.2mm; height: 4mm; }
+#as-print-host .as-crop-br-v { bottom: 0.5mm; right: 6mm; width: 0.2mm; height: 4mm; }
+
+@media (max-width: 980px) {
   #awosign-root main {
-    grid-template-columns:1fr
-  }
-  #awosign-root .panel {
-    min-width:0
-  }
-}
-@media(max-width:560px) {
-  #awosign-root main {
-    padding:10px
-  }
-  #awosign-root .panel {
-    padding:14px
-  }
-  #awosign-root .stage {
-    padding:12px
-  }
-  #awosign-root .two {
-    grid-template-columns:1fr
-  }
-  #awosign-root .sigrow {
-    gap:8px
-  }
-  #awosign-root .siglogo {
-    width:32%;
-    min-width:0
-  }
-  #awosign-root .siginfo {
-    padding-left:9px;
-    font-size:10px
-  }
-  #awosign-root .siginfo strong {
-    font-size:15px
-  }
-  #awosign-root .card {
-    padding:15px
-  }
-  #awosign-root .back strong {
-    font-size:16px
-  }
-  #awosign-root .back .details {
-    font-size:10px
-  }
-  #awosign-root .qr {
-    width:80px;
-    height:80px
-  }
-  #awosign-root .digital {
-    padding:16px;
-    min-height:260px
-  }
-  #awosign-root .digital strong {
-    font-size:18px
-  }
-}
-
-
-#awosign-root {
-  margin:20px 20px 20px 0;
-  min-height:80vh
-}
-#awosign-root button:focus-visible,#awosign-root input:focus-visible {
-  outline:3px solid #e7b52e;
-  outline-offset:3px
-}
-#awosign-root .signature {
-  box-sizing:border-box
-}
-#awosign-root p {
-  font-size:13px
-}
-#awosign-root .privacy {
-  padding:12px 22px;
-  background:#102032;
-  color:#d7e4f5
-}
-#awosign-root h1,#awosign-root h2,#awosign-root h3 {
-  color:inherit
-}
-#awosign-root .siglogo div {
-  overflow-wrap:anywhere
-}
-@media(max-width:560px) {
-  #awosign-root .sigrow {
-    display:block
-  }
-  #awosign-root .siglogo {
-    width:100%;
-    text-align:left;
-    margin-bottom:12px
-  }
-  #awosign-root .siginfo {
-    border-left:0;
-    border-top:2px solid var(--accent);
-    padding:10px 0 0;
-    font-size:12px
-  }
-  #awosign-root .siginfo strong {
-    font-size:18px
-  }
-}
+    grid-template-columns: 1fr;
+  }
+  #awosign-root .as-print-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media print {
+  html,
+  body {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: #ffffff !important;
+  }
+
+  body > *:not(#as-print-host),
+  #wpadminbar,
+  #adminmenumain,
+  #adminmenuback,
+  #adminmenuwrap,
+  #wpfooter {
+    display: none !important;
+  }
+
+  body #as-print-host {
+    display: block !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  #as-print-host > .card {
+    width: 85mm;
+    height: 55mm;
+    margin: 0;
+    box-shadow: none !important;
+    break-after: page;
+    page-break-after: always;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  #as-print-host > .card:last-child {
+    break-after: auto;
+    page-break-after: auto;
+  }
+
+  #as-print-host .card {
+    box-shadow: none !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

awosign/trunk/assets/designer.js

@@ -1 @@
-/* AwoSign Free 1.0.1 — GPL-2.0-or-later */
+/* AwoSign Free 1.3.0 — GPL-2.0-or-later */
 (function () {
   "use strict";
@@ -5 +5 @@
   const root = document.getElementById('awosign-root');
   if (!root) return;
-  const $ = id => root.querySelector('[id="' + id + '"]'),
-    fields = ['company', 'person', 'job', 'phone', 'email', 'website', 'address', 'qrUrl'];
+
+  const $ = id => root.querySelector('[id="' + id + '"]');
+  const brandFields = ['company', 'brand', 'accent', 'website', 'address', 'logoUrl', 'sigTemplate', 'language', 'theme'];
+  const staffFields = ['person', 'job', 'phone', 'email', 'qrMode', 'qrUrl'];
+  const STORAGE_KEY = 'awosign_workspace_v130';
+
   let logo = '';
-  const platforms = [['LinkedIn', 'in', 'https://www.linkedin.com/in/'], ['Instagram', '◎', 'https://www.instagram.com/'], ['Facebook', 'f', 'https://www.facebook.com/'], ['X', 'X', 'https://x.com/'], ['YouTube', '▶', 'https://www.youtube.com/@'], ['WhatsApp', '☎', 'https://wa.me/'], ['TikTok', '♪', 'https://www.tiktok.com/@'], ['Pinterest', 'P', 'https://www.pinterest.com/'], ['GitHub', 'GH', 'https://github.com/'], ['Telegram', '✈', 'https://t.me/']];
   let active = 'Signature';
-  // Escape contact text before inserting it into preview or exported HTML.
+
+  const platforms = [
+    ['LinkedIn', 'in', 'https://www.linkedin.com/in/'],
+    ['Instagram', '◎', 'https://www.instagram.com/'],
+    ['Facebook', 'f', 'https://www.facebook.com/'],
+    ['X', 'X', 'https://x.com/'],
+    ['YouTube', '▶', 'https://www.youtube.com/@'],
+    ['WhatsApp', '☎', 'https://wa.me/'],
+    ['TikTok', '♪', 'https://www.tiktok.com/@'],
+    ['Pinterest', 'P', 'https://www.pinterest.com/'],
+    ['GitHub', 'GH', 'https://github.com/'],
+    ['Telegram', '✈', 'https://t.me/']
+  ];
+
+  let workspace = {
+    version: 3,
+    activeProfileId: 'prof_1',
+    brand: {
+      company: 'Example Studio',
+      brand: '#172e49',
+      accent: '#e7b52e',
+      website: 'https://example.com',
+      address: '123 Example Street, Istanbul, TR',
+      logo: '',
+      logoUrl: '',
+      sigTemplate: 'classic',
+      language: 'tr',
+      theme: 'auto'
+    },
+    profiles: [
+      {
+        id: 'prof_1',
+        person: 'Alex Morgan',
+        job: 'Creative Director',
+        phone: '+90 555 123 4567',
+        email: 'alex@example.com',
+        qrMode: 'url',
+        qrUrl: '',
+        social: {
+          LinkedIn: { enabled: true, value: 'example' },
+          Instagram: { enabled: true, value: 'example' },
+          Facebook: { enabled: true, value: 'example' }
+        }
+      }
+    ]
+  };
+
   function esc(v) {
     return String(v || '').replace(/[&<>"']/g, c => ({
@@ -20 +69 @@
     })[c]);
   }
+
   function val(k) {
-    return $(k).value.trim();
-  }
-  // Only HTTP(S) links are accepted for profiles and QR destinations.
+    const el = $(k);
+    return el ? el.value.trim() : '';
+  }
+
+  function isShowCrop() {
+    const el = $('cropMarks');
+    if (!el) return true;
+    if (el.type === 'checkbox') return el.checked;
+    return el.value !== '0';
+  }
+
+  function setStatus(msg) {
+    const s = $('as-status');
+    if (s) s.textContent = msg || '';
+  }
+
   function validUrl(s) {
     try {
-      let u = new URL(s);
+      const u = new URL(s);
       return ['https:', 'http:'].includes(u.protocol) ? u.href : '';
     } catch {
@@ -32 +95 @@
     }
   }
+
   function profile(p) {
-    let s = $('soc_' + p[0]).value.trim();
+    const inputEl = $('soc_' + p[0]);
+    let s = inputEl ? inputEl.value.trim() : '';
     if (!s) return '';
     if (/^https?:\/\//i.test(s)) return validUrl(s);
@@ -39 +104 @@
     return validUrl(p[2] + encodeURIComponent(s.replace(/^@/, '')));
   }
+
   function socialHtml() {
-    return platforms.filter(p => $('check_' + p[0]).checked && profile(p)).map(p => '<a href="' + esc(profile(p)) + '" target="_blank" rel="noopener noreferrer" style="text-decoration:none"><span>' + esc(p[1]) + '</span></a>').join('');
-  }
-  function logoHtml(style) {
-    return logo ? '<img src="' + logo + '" alt="Company logo" style="' + style + '">' : '<div style="font-size:24px;font-weight:bold">' + esc(val('company')) + '</div>';
-  }
-  let qrKey = '',
-    qrMarkup = '';
-  // Generate and cache QR images locally using the bundled MIT library.
+    return platforms
+      .filter(p => $('check_' + p[0]) && $('check_' + p[0]).checked && profile(p))
+      .map(p => '<a href="' + esc(profile(p)) + '" target="_blank" rel="noopener noreferrer" style="text-decoration:none"><span>' + esc(p[1]) + '</span></a>')
+      .join('');
+  }
+
+  function getSignatureLogoSrc() {
+    return validUrl(val('logoUrl')) || logo || '';
+  }
+
+  function logoHtml(style, preferUrlForEmail) {
+    const src = preferUrlForEmail ? getSignatureLogoSrc() : (logo || validUrl(val('logoUrl')));
+    return src
+      ? '<img src="' + esc(src) + '" alt="Company logo" style="' + style + '">'
+      : '<div style="font-size:22px;font-weight:bold">' + esc(val('company')) + '</div>';
+  }
+
+  function getActiveProfile() {
+    let found = workspace.profiles.find(p => p.id === workspace.activeProfileId);
+    if (!found) {
+      found = workspace.profiles[0];
+      workspace.activeProfileId = found.id;
+    }
+    return found;
+  }
+
+  function syncFormToWorkspace() {
+    brandFields.forEach(k => {
+      if ($(k)) workspace.brand[k] = val(k);
+    });
+    workspace.brand.logo = logo;
+
+    const current = getActiveProfile();
+    if (current) {
+      staffFields.forEach(k => {
+        if ($(k)) current[k] = val(k);
+      });
+      current.social = {};
+      platforms.forEach(p => {
+        const chk = $('check_' + p[0]);
+        const inp = $('soc_' + p[0]);
+        current.social[p[0]] = {
+          enabled: chk ? chk.checked : false,
+          value: inp ? inp.value.trim() : ''
+        };
+      });
+    }
+    refreshProfileSelectLabels();
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(workspace));
+    } catch (_e) {}
+  }
+
+  function loadWorkspaceIntoForm() {
+    if (workspace.brand) {
+      brandFields.forEach(k => {
+        if ($(k) && typeof workspace.brand[k] === 'string') {
+          $(k).value = workspace.brand[k];
+        }
+      });
+      logo = workspace.brand.logo || '';
+    }
+    const current = getActiveProfile();
+    if (current) {
+      staffFields.forEach(k => {
+        if ($(k)) $(k).value = current[k] || (k === 'qrMode' ? 'url' : '');
+      });
+      platforms.forEach(p => {
+        const s = current.social && current.social[p[0]];
+        if ($('check_' + p[0])) $('check_' + p[0]).checked = !!(s && s.enabled);
+        if ($('soc_' + p[0])) $('soc_' + p[0]).value = s && typeof s.value === 'string' ? s.value : '';
+      });
+    }
+    rebuildProfileSelect();
+    applyLanguageText();
+    applyTheme();
+  }
+
+  function rebuildProfileSelect() {
+    const sel = $('profileSelect');
+    if (!sel) return;
+    sel.innerHTML = '';
+    workspace.profiles.forEach((p, idx) => {
+      const opt = document.createElement('option');
+      opt.value = p.id;
+      opt.textContent = (p.person || ('Personel #' + (idx + 1))) + (p.job ? ' — ' + p.job : '');
+      if (p.id === workspace.activeProfileId) opt.selected = true;
+      sel.appendChild(opt);
+    });
+    const badge = $('profileCountBadge');
+    if (badge) {
+      const count = workspace.profiles.length;
+      badge.textContent = val('language') === 'en' ? count + (count === 1 ? ' Profile' : ' Profiles') : count + ' Profil';
+    }
+    const sc = $('shortcodeDisplay');
+    if (sc) {
+      sc.value = '[awosign id="' + workspace.activeProfileId + '"]';
+    }
+    if ($('deleteProfile')) {
+      $('deleteProfile').disabled = workspace.profiles.length <= 1;
+    }
+  }
+
+  function refreshProfileSelectLabels() {
+    const sel = $('profileSelect');
+    if (!sel) return;
+    Array.from(sel.options).forEach((opt, idx) => {
+      const p = workspace.profiles[idx];
+      if (p) {
+        opt.textContent = (p.person || ('Personel #' + (idx + 1))) + (p.job ? ' — ' + p.job : '');
+      }
+    });
+    const sc = $('shortcodeDisplay');
+    if (sc) {
+      sc.value = '[awosign id="' + workspace.activeProfileId + '"]';
+    }
+  }
+
+  function buildVCardPayload(compactForQr) {
+    const clean = v =>
+      String(v || '')
+        .replace(/\\/g, '\\\\')
+        .replace(/\r\n|\r|\n/g, '\\n')
+        .replace(/[,;]/g, c => '\\' + c);
+
+    const lines = [
+      'BEGIN:VCARD',
+      'VERSION:3.0',
+      'FN:' + clean(val('person')),
+      'ORG:' + clean(val('company')),
+      'TITLE:' + clean(val('job')),
+      val('phone') ? 'TEL;TYPE=WORK,VOICE:' + clean(val('phone')) : '',
+      val('email') ? 'EMAIL:' + clean(val('email')) : '',
+      validUrl(val('website')) ? 'URL:' + clean(validUrl(val('website'))) : '',
+      !compactForQr && val('address') ? 'ADR;TYPE=WORK:;;' + clean(val('address')) + ';;;;' : '',
+      'END:VCARD'
+    ].filter(Boolean);
+    return lines.join('\r\n');
+  }
+
+  let qrKey = '';
+  let qrMarkup = '';
+  let lastQrDataUrl = '';
+
   function qrHtml() {
-    const url = validUrl(val('qrUrl')) || validUrl(val('website'));
-    if (url === qrKey && qrMarkup) return qrMarkup;
-    qrKey = url;
+    const qrMode = val('qrMode') || 'url';
+    const payload =
+      qrMode === 'vcard'
+        ? buildVCardPayload(true)
+        : (validUrl(val('qrUrl')) || validUrl(val('website')));
+
+    const cacheKey = qrMode + ':' + payload;
+    if (cacheKey === qrKey && qrMarkup) return qrMarkup;
+    qrKey = cacheKey;
+
     try {
-      if (!url) throw new Error('URL required');
-      const code = qrcode(0, 'M');
-      code.addData(url, 'Byte');
+      if (!payload) throw new Error('Payload required');
+      const code = qrcode(0, 'L');
+      code.addData(payload, 'Byte');
       code.make();
-      qrMarkup = '<img class="qr" src="' + code.createDataURL(5, 8) + '" alt="QR code">';
-    } catch (e) {
-      qrMarkup = '<span class="qr" style="color:#333;font-size:11px">' + (val('language') === 'en' ? 'QR unavailable: check URL' : 'QR oluşturulamadı: adresi kontrol edin') + '</span>';
+      lastQrDataUrl = code.createDataURL(5, 6);
+      qrMarkup = '<img class="qr" src="' + lastQrDataUrl + '" alt="QR code">';
+    } catch (_e) {
+      lastQrDataUrl = '';
+      qrMarkup =
+        '<span class="qr" style="color:#333;font-size:10px;display:flex;align-items:center;justify-content:center;text-align:center">' +
+        (val('language') === 'en' ? 'QR unavailable: check URL' : 'QR oluşturulamadı: adresi kontrol edin') +
+        '</span>';
     }
     return qrMarkup;
   }
-  // Update the signature, both print faces, and digital contact preview.
+
+  function applyTheme() {
+    const tMode = val('theme') || 'auto';
+    root.setAttribute('data-theme', tMode);
+  }
+
+  function applyLanguageText() {
+    const l = val('language') || 'tr';
+    root.lang = l;
+    root.querySelectorAll('[data-tr]').forEach(x => {
+      x.textContent = x.dataset[l];
+    });
+  }
+
+  /**
+   * Build Table-based Email Signature HTML for Selected Template (classic | compact | banner)
+   */
+  function signatureHtml() {
+    const brand = val('brand') || '#172e49';
+    const accent = val('accent') || '#e7b52e';
+    const tpl = val('sigTemplate') || 'classic';
+    const name = esc(val('person'));
+    const job = esc(val('job'));
+    const company = esc(val('company'));
+    const phone = esc(val('phone'));
+    const email = esc(val('email'));
+    const web = esc(val('website'));
+    const addr = esc(val('address'));
+    const badges = socialHtml().replace(
+      /<span>/g,
+      '<span style="display:inline-block;margin:2px;padding:4px 6px;border-radius:3px;background:' +
+        brand +
+        ';color:white;font-size:11px;font-weight:bold">'
+    );
+
+    if (tpl === 'compact') {
+      return (
+        '<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:520px;max-width:100%;font-family:Arial,Helvetica,sans-serif;color:#15263c;background:#fff;border-top:4px solid ' +
+        brand +
+        ';border-bottom:2px solid ' +
+        accent +
+        '"><tr><td style="padding:14px 16px;vertical-align:middle;width:130px">' +
+        logoHtml('max-width:115px;max-height:70px;width:auto;height:auto', true) +
+        '</td><td style="padding:14px 16px;font-size:12px;line-height:1.5"><strong style="font-size:16px;color:' +
+        brand +
+        '">' +
+        name +
+        '</strong> · <span style="color:#475569;font-weight:bold">' +
+        job +
+        '</span><br><span style="color:' +
+        brand +
+        ';font-weight:bold">' +
+        company +
+        '</span><br>' +
+        phone +
+        ' · ' +
+        email +
+        '<br>' +
+        web +
+        '<div style="margin-top:6px">' +
+        badges +
+        '</div></td></tr></table>'
+      );
+    }
+
+    if (tpl === 'banner') {
+      const qrImg = lastQrDataUrl
+        ? '<img src="' + lastQrDataUrl + '" alt="QR" style="width:78px;height:78px;display:block;border:1px solid #e2e8f0;padding:3px;border-radius:4px">'
+        : '';
+      return (
+        '<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:100%;font-family:Arial,Helvetica,sans-serif;color:#15263c;background:#fff;border:1px solid #dbe3ec;border-radius:6px;overflow:hidden"><tr style="background:' +
+        brand +
+        ';color:#fff"><td colspan="2" style="padding:12px 18px;border-bottom:3px solid ' +
+        accent +
+        '"><table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr><td><strong style="font-size:18px;color:#fff">' +
+        name +
+        '</strong><br><span style="font-size:12px;color:#dbe7f5">' +
+        job +
+        ' · ' +
+        company +
+        '</span></td><td align="right">' +
+        logoHtml('max-width:110px;max-height:46px;width:auto;height:auto', true) +
+        '</td></tr></table></td></tr><tr><td style="padding:14px 18px;font-size:12px;line-height:1.6;vertical-align:middle">' +
+        '📞 ' +
+        phone +
+        '<br>✉️ ' +
+        email +
+        '<br>🌐 ' +
+        web +
+        '<br>📍 ' +
+        addr +
+        '<div style="margin-top:8px">' +
+        badges +
+        '</div></td><td style="padding:14px 18px;width:96px;vertical-align:middle" align="right">' +
+        qrImg +
+        '</td></tr></table>'
+      );
+    }
+
+    return (
+      '<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:100%;font-family:Arial,Helvetica,sans-serif;color:#15263c;background:#fff"><tr><td style="width:170px;padding:18px;vertical-align:middle">' +
+      logoHtml('max-width:150px;max-height:100px;width:auto;height:auto', true) +
+      '</td><td style="padding:18px;border-left:2px solid ' +
+      accent +
+      ';font-size:12px;line-height:1.6"><strong style="font-size:19px">' +
+      name +
+      '</strong><br>' +
+      job +
+      '<br>' +
+      company +
+      '<br>' +
+      phone +
+      '<br>' +
+      email +
+      '<br>' +
+      web +
+      '<div style="margin-top:8px">' +
+      badges +
+      '</div></td></tr><tr><td colspan="2" style="padding:12px 18px;border-top:1px solid #ddd;font-size:11px">' +
+      addr +
+      '</td></tr></table>'
+    );
+  }
+
   function render() {
-    root.style.setProperty('--brand', $('brand').value);
-    root.style.setProperty('--accent', $('accent').value);
-    let name = esc(val('person')),
-      company = esc(val('company')),
-      job = esc(val('job')),
-      phone = esc(val('phone')),
-      email = esc(val('email')),
-      web = esc(val('website')),
-      address = esc(val('address'));
-    let icons = socialHtml();
-    $('sig').innerHTML = '<div class="sigrow"><div class="siglogo">' + logoHtml('max-width:100%;max-height:100px;object-fit:contain') + '</div><div class="siginfo"><strong>' + name + '</strong><br>' + job + '<br>' + company + '<br>' + phone + '<br>' + email + '<br>' + web + '<div class="socialicons">' + icons + '</div></div></div><div class="sigaddress">' + address + '</div>';
-    $('front').innerHTML = logoHtml('max-width:55%;max-height:95px;object-fit:contain') + '<strong>' + company + '</strong><small>' + web + '</small>';
-    $('back').innerHTML = '<div class="details"><strong>' + name + '</strong><br>' + job + '<br>' + company + '<br>' + phone + '<br>' + email + '<br>' + web + '<br>' + address + '<div class="socialicons">' + icons + '</div></div>' + qrHtml();
-    $('digital').innerHTML = '<div class="details">' + logoHtml('max-width:100px;max-height:70px;object-fit:contain') + '<br><strong>' + name + '</strong><br>' + job + '<br>' + company + '<br>' + phone + '<br>' + email + '<br>' + web + '<div class="socialicons">' + icons + '</div></div>' + qrHtml();
-  }
+    syncFormToWorkspace();
+    applyTheme();
+    root.style.setProperty('--brand', val('brand') || '#172e49');
+    root.style.setProperty('--accent', val('accent') || '#e7b52e');
+
+    const name = esc(val('person'));
+    const company = esc(val('company'));
+    const job = esc(val('job'));
+    const phone = esc(val('phone'));
+    const email = esc(val('email'));
+    const web = esc(val('website'));
+    const address = esc(val('address'));
+    const icons = socialHtml();
+    const showCrop = isShowCrop();
+
+    // Ensure QR cache is up-to-date before signatureHtml() uses lastQrDataUrl
+    const qrMarkupNow = qrHtml();
+
+    $('sig').innerHTML = signatureHtml();
+
+    $('front').innerHTML =
+      logoHtml('max-width:55%;max-height:85px;object-fit:contain', false) +
+      '<strong>' +
+      company +
+      '</strong><small>' +
+      web +
+      '</small>';
+
+    $('back').innerHTML =
+      '<div class="details"><strong>' +
+      name +
+      '</strong><br>' +
+      job +
+      '<br>' +
+      company +
+      '<br>' +
+      phone +
+      '<br>' +
+      email +
+      '<br>' +
+      web +
+      '<br>' +
+      address +
+      '<div class="socialicons">' +
+      icons +
+      '</div></div>' +
+      qrMarkupNow;
+
+    $('front').classList.toggle('show-crop-guide', showCrop);
+    $('back').classList.toggle('show-crop-guide', showCrop);
+
+    $('digital').innerHTML =
+      '<div class="details">' +
+      logoHtml('max-width:100px;max-height:70px;object-fit:contain', false) +
+      '<br><strong>' +
+      name +
+      '</strong><br>' +
+      job +
+      '<br>' +
+      company +
+      '<br>' +
+      phone +
+      '<br>' +
+      email +
+      '<br>' +
+      web +
+      '<div class="socialicons">' +
+      icons +
+      '</div></div>' +
+      qrMarkupNow;
+  }
+
   function download(name, content, type) {
-    let b = new Blob([content], {
-      type
-    });
-    let a = document.createElement('a');
+    const b = content instanceof Blob ? content : new Blob([content], { type });
+    const a = document.createElement('a');
     a.href = URL.createObjectURL(b);
     a.download = name;
+    document.body.appendChild(a);
     a.click();
+    a.remove();
     setTimeout(() => URL.revokeObjectURL(a.href), 1000);
   }
-  // Export vCard 3.0 with escaped field separators and line breaks.
+
+  function loadImage(src) {
+    return new Promise((resolve, reject) => {
+      const i = new Image();
+      i.crossOrigin = 'anonymous';
+      i.onload = () => resolve(i);
+      i.onerror = reject;
+      i.src = src;
+    });
+  }
+
   function vcf() {
-    const clean = v => String(v).replace(/\\/g, '\\\\').replace(/\r\n|\r|\n/g, '\\n').replace(/[,;]/g, c => '\\' + c);
-    download('awosign-contact.vcf', ['BEGIN:VCARD', 'VERSION:3.0', 'FN:' + clean(val('person')), 'ORG:' + clean(val('company')), 'TITLE:' + clean(val('job')), 'TEL;TYPE=WORK,VOICE:' + clean(val('phone')), 'EMAIL:' + clean(val('email')), 'URL:' + clean(validUrl(val('website'))), 'ADR;TYPE=WORK:;;' + clean(val('address')) + ';;;;', 'END:VCARD'].join('\r\n'), 'text/vcard;charset=utf-8');
-  }
+    download('awosign-contact.vcf', buildVCardPayload(false), 'text/vcard;charset=utf-8');
+    setStatus(val('language') === 'en' ? 'VCF contact card downloaded.' : 'VCF rehber kartı indirildi.');
+  }
+
+  /**
+   * High-DPI Canvas Renderer for Front & Back Print Cards (300 PPI or 600 DPI with 3mm Bleed & Crop Marks)
+   */
+  async function renderPrintFaceToPngBlob(face, withBleedAndCrop) {
+    const scale = withBleedAndCrop ? 2 : 1;
+    const trimW = 1004 * scale;
+    const trimH = 650 * scale;
+    const marginPx = withBleedAndCrop ? Math.round(71 * scale) : 0;
+    const bleedPx = withBleedAndCrop ? Math.round(35.4 * scale) : 0;
+
+    const canvas = document.createElement('canvas');
+    canvas.width = trimW + marginPx * 2;
+    canvas.height = trimH + marginPx * 2;
+    const ctx = canvas.getContext('2d');
+
+    const brand = val('brand') || '#172e49';
+    const accent = val('accent') || '#e7b52e';
+    const originX = marginPx;
+    const originY = marginPx;
+
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    if (face === 'front') {
+      ctx.fillStyle = brand;
+      ctx.fillRect(
+        originX - bleedPx,
+        originY - bleedPx,
+        trimW + bleedPx * 2,
+        trimH + bleedPx * 2
+      );
+      ctx.fillStyle = accent;
+      ctx.fillRect(
+        originX - bleedPx,
+        originY - bleedPx,
+        trimW + bleedPx * 2,
+        Math.round(18 * scale) + bleedPx
+      );
+
+      let centerY = originY + Math.round(trimH * 0.42);
+      const activeLogo = logo || validUrl(val('logoUrl'));
+      if (activeLogo) {
+        try {
+          const img = await loadImage(activeLogo);
+          const maxW = 520 * scale;
+          const maxH = 220 * scale;
+          const ratio = Math.min(maxW / img.width, maxH / img.height, 1);
+          const drawW = img.width * ratio;
+          const drawH = img.height * ratio;
+          ctx.drawImage(
+            img,
+            originX + (trimW - drawW) / 2,
+            originY + Math.round(135 * scale),
+            drawW,
+            drawH
+          );
+          centerY = originY + Math.round(155 * scale) + drawH + Math.round(55 * scale);
+        } catch (_e) {}
+      }
+
+      ctx.fillStyle = '#ffffff';
+      ctx.textAlign = 'center';
+      ctx.font = `bold ${Math.round(52 * scale)}px Arial, sans-serif`;
+      ctx.fillText(val('company'), originX + trimW / 2, centerY);
+
+      ctx.fillStyle = '#dbe7f5';
+      ctx.font = `${Math.round(28 * scale)}px Arial, sans-serif`;
+      ctx.fillText(val('website'), originX + trimW / 2, centerY + Math.round(48 * scale));
+    } else {
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(
+        originX - bleedPx,
+        originY - bleedPx,
+        trimW + bleedPx * 2,
+        trimH + bleedPx * 2
+      );
+      ctx.fillStyle = accent;
+      ctx.fillRect(
+        originX - bleedPx,
+        originY - bleedPx,
+        Math.round(22 * scale) + bleedPx,
+        trimH + bleedPx * 2
+      );
+
+      const padX = originX + Math.round(68 * scale);
+      let curY = originY + Math.round(115 * scale);
+
+      ctx.textAlign = 'left';
+      ctx.fillStyle = '#102032';
+      ctx.font = `bold ${Math.round(46 * scale)}px Arial, sans-serif`;
+      ctx.fillText(val('person'), padX, curY);
+
+      curY += Math.round(42 * scale);
+      ctx.fillStyle = '#243f5d';
+      ctx.font = `bold ${Math.round(29 * scale)}px Arial, sans-serif`;
+      ctx.fillText(val('job') + (val('company') ? ' · ' + val('company') : ''), padX, curY);
+
+      curY += Math.round(46 * scale);
+      ctx.fillStyle = '#15263c';
+      ctx.font = `${Math.round(27 * scale)}px Arial, sans-serif`;
+      [val('phone'), val('email'), val('website'), val('address')].filter(Boolean).forEach(line => {
+        ctx.fillText(line.slice(0, 52), padX, curY);
+        curY += Math.round(38 * scale);
+      });
+
+      const activeSocials = platforms.filter(p => $('check_' + p[0]) && $('check_' + p[0]).checked && profile(p));
+      if (activeSocials.length) {
+        let socX = padX;
+        const socY = originY + trimH - Math.round(75 * scale);
+        ctx.font = `bold ${Math.round(22 * scale)}px Arial, sans-serif`;
+        activeSocials.forEach(p => {
+          const badge = p[1];
+          const w = Math.max(Math.round(42 * scale), ctx.measureText(badge).width + Math.round(24 * scale));
+          ctx.fillStyle = brand;
+          ctx.fillRect(socX, socY, w, Math.round(38 * scale));
+          ctx.fillStyle = '#ffffff';
+          ctx.fillText(badge, socX + Math.round(11 * scale), socY + Math.round(26 * scale));
+          socX += w + Math.round(10 * scale);
+        });
+      }
+
+      if (lastQrDataUrl) {
+        try {
+          const qImg = await loadImage(lastQrDataUrl);
+          const qSize = Math.round(255 * scale);
+          ctx.drawImage(
+            qImg,
+            originX + trimW - Math.round(55 * scale) - qSize,
+            originY + (trimH - qSize) / 2,
+            qSize,
+            qSize
+          );
+        } catch (_e) {}
+      }
+    }
+
+    if (withBleedAndCrop) {
+      ctx.strokeStyle = '#000000';
+      ctx.lineWidth = Math.max(1, Math.round(1.5 * scale));
+      const markLen = Math.round(42 * scale);
+      const markGap = Math.round(18 * scale);
+      const drawCorner = (cx, cy, dx, dy) => {
+        ctx.beginPath();
+        ctx.moveTo(cx + dx * markGap, cy);
+        ctx.lineTo(cx + dx * (markGap + markLen), cy);
+        ctx.moveTo(cx, cy + dy * markGap);
+        ctx.lineTo(cx, cy + dy * (markGap + markLen));
+        ctx.stroke();
+      };
+      drawCorner(originX, originY, -1, -1);
+      drawCorner(originX + trimW, originY, 1, -1);
+      drawCorner(originX, originY + trimH, -1, 1);
+      drawCorner(originX + trimW, originY + trimH, 1, 1);
+    }
+
+    return new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
+  }
+
+  function applyDynamicPageSize(sizeCss) {
+    let styleEl = document.getElementById('as-dynamic-page-style');
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = 'as-dynamic-page-style';
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = `@page { size: ${sizeCss}; margin: 0; }`;
+  }
+
+  function buildBleedSheet(cardEl, isFront) {
+    const sheet = document.createElement('div');
+    sheet.className = 'as-bleed-sheet';
+
+    const bg = document.createElement('div');
+    bg.className = isFront ? 'as-bleed-bg-front' : 'as-bleed-bg-back';
+    sheet.appendChild(bg);
+
+    const clone = cardEl.cloneNode(true);
+    clone.classList.remove('show-crop-guide');
+    sheet.appendChild(clone);
+
+    [
+      'as-crop-tl-h', 'as-crop-tl-v',
+      'as-crop-tr-h', 'as-crop-tr-v',
+      'as-crop-bl-h', 'as-crop-bl-v',
+      'as-crop-br-h', 'as-crop-br-v'
+    ].forEach(cls => {
+      const m = document.createElement('div');
+      m.className = 'as-crop-mark ' + cls;
+      sheet.appendChild(m);
+    });
+    return sheet;
+  }
+
+  function printBusinessCards() {
+    let host = document.getElementById('as-print-host');
+    if (!host) {
+      host = document.createElement('div');
+      host.id = 'as-print-host';
+      document.body.appendChild(host);
+    }
+    host.style.setProperty('--brand', val('brand') || '#172e49');
+    host.style.setProperty('--accent', val('accent') || '#e7b52e');
+
+    const layout = val('printLayout') || 'a4_10up_duplex';
+    const copies = Math.max(1, Math.min(20, Number(val('printCopies')) || 1));
+    const showCrop = isShowCrop();
+    const frontEl = $('front');
+    const backEl = $('back');
+    const nodes = [];
+
+    const makeA4SheetOf = cardEl => {
+      const sheet = document.createElement('div');
+      sheet.className = 'as-a4-sheet';
+      for (let i = 0; i < 10; i++) {
+        const cell = document.createElement('div');
+        cell.className = 'as-a4-cell' + (showCrop ? ' has-crop-lines' : '');
+        const clone = cardEl.cloneNode(true);
+        clone.classList.remove('show-crop-guide');
+        cell.appendChild(clone);
+        sheet.appendChild(cell);
+      }
+      return sheet;
+    };
+
+    if (layout === 'a4_10up_duplex') {
+      applyDynamicPageSize('210mm 297mm');
+      for (let c = 0; c < copies; c++) {
+        nodes.push(makeA4SheetOf(frontEl));
+        nodes.push(makeA4SheetOf(backEl));
+      }
+    } else if (layout === 'a4_10up_front') {
+      applyDynamicPageSize('210mm 297mm');
+      for (let c = 0; c < copies; c++) {
+        nodes.push(makeA4SheetOf(frontEl));
+      }
+    } else if (layout === 'a4_10up_back') {
+      applyDynamicPageSize('210mm 297mm');
+      for (let c = 0; c < copies; c++) {
+        nodes.push(makeA4SheetOf(backEl));
+      }
+    } else if (layout === 'single_bleed' || layout === 'bleed_91x61') {
+      applyDynamicPageSize('97mm 67mm');
+      for (let c = 0; c < copies; c++) {
+        nodes.push(buildBleedSheet(frontEl, true));
+        nodes.push(buildBleedSheet(backEl, false));
+      }
+    } else {
+      applyDynamicPageSize('85mm 55mm');
+      for (let c = 0; c < copies; c++) {
+        const fCopy = frontEl.cloneNode(true);
+        const bCopy = backEl.cloneNode(true);
+        fCopy.classList.remove('show-crop-guide');
+        bCopy.classList.remove('show-crop-guide');
+        nodes.push(fCopy, bCopy);
+      }
+    }
+
+    host.replaceChildren(...nodes);
+    window.print();
+  }
+
   platforms.forEach((p, i) => {
-    $('socials').insertAdjacentHTML('beforeend', '<label><input type="checkbox" id="check_' + p[0] + '" ' + (i < 3 ? 'checked' : '') + '>' + p[0] + '</label>');
-    $('socialInputs').insertAdjacentHTML('beforeend', '<label>' + p[0] + ' — ' + p[2] + '</label><input id="soc_' + p[0] + '" placeholder="username / URL" value="' + (i < 3 ? 'example' : '') + '">');
+    $('socials').insertAdjacentHTML(
+      'beforeend',
+      '<label><input type="checkbox" id="check_' + p[0] + '" ' + (i < 3 ? 'checked' : '') + '>' + p[0] + '</label>'
+    );
+    $('socialInputs').insertAdjacentHTML(
+      'beforeend',
+      '<label>' + p[0] + ' — ' + p[2] + '</label><input id="soc_' + p[0] + '" placeholder="username / URL" value="' + (i < 3 ? 'example' : '') + '">'
+    );
   });
-  root.querySelectorAll('input,textarea,select').forEach(el => el.addEventListener('input', render));
+
+  if (typeof window.awosignWpConfig === 'object' && window.awosignWpConfig && window.awosignWpConfig.workspace) {
+    workspace = window.awosignWpConfig.workspace;
+  } else {
+    try {
+      const savedLocal = localStorage.getItem(STORAGE_KEY) || localStorage.getItem('awosign_workspace_v120');
+      if (savedLocal) {
+        const parsed = JSON.parse(savedLocal);
+        if (parsed && Array.isArray(parsed.profiles) && parsed.profiles.length) {
+          workspace = parsed;
+        }
+      }
+    } catch (_e) {}
+  }
+
+  loadWorkspaceIntoForm();
+
+  root.querySelectorAll('input,textarea,select').forEach(el => {
+    if (el.id === 'profileSelect' || el.id === 'loadProject' || el.id === 'logoFile') return;
+    el.addEventListener('input', render);
+  });
+  root.querySelectorAll('select,input[type="checkbox"]').forEach(el => {
+    if (el.id === 'profileSelect') return;
+    el.addEventListener('change', render);
+  });
+
+  if ($('profileSelect')) {
+    $('profileSelect').onchange = e => {
+      workspace.activeProfileId = e.target.value;
+      loadWorkspaceIntoForm();
+      render();
+      setStatus(
+        val('language') === 'en'
+          ? 'Switched to profile: ' + val('person')
+          : 'Aktif personel değiştirildi: ' + val('person')
+      );
+    };
+  }
+
+  if ($('addProfile')) {
+    $('addProfile').onclick = () => {
+      syncFormToWorkspace();
+      const newId = 'prof_' + Date.now().toString(36);
+      const count = workspace.profiles.length + 1;
+      workspace.profiles.push({
+        id: newId,
+        person: val('language') === 'en' ? 'New Staff #' + count : 'Yeni Personel #' + count,
+        job: val('language') === 'en' ? 'Team Member' : 'Uzman / Yetkili',
+        phone: val('phone') || '+90 555 000 0000',
+        email:
+          'personel' +
+          count +
+          '@' +
+          ((val('website') || 'example.com').replace(/^https?:\/\/(www\.)?/i, '').split('/')[0] || 'example.com'),
+        qrMode: 'url',
+        qrUrl: '',
+        social: {}
+      });
+      workspace.activeProfileId = newId;
+      loadWorkspaceIntoForm();
+      render();
+      setStatus(val('language') === 'en' ? 'New staff profile added.' : 'Yeni personel profili oluşturuldu.');
+    };
+  }
+
+  if ($('deleteProfile')) {
+    $('deleteProfile').onclick = () => {
+      if (workspace.profiles.length <= 1) return;
+      workspace.profiles = workspace.profiles.filter(p => p.id !== workspace.activeProfileId);
+      workspace.activeProfileId = workspace.profiles[0].id;
+      loadWorkspaceIntoForm();
+      render();
+      setStatus(val('language') === 'en' ? 'Staff profile deleted.' : 'Personel profili silindi.');
+    };
+  }
+
+  if ($('copyShortcode')) {
+    $('copyShortcode').onclick = async () => {
+      const code = $('shortcodeDisplay') ? $('shortcodeDisplay').value : '[awosign]';
+      try {
+        await navigator.clipboard.writeText(code);
+        setStatus(val('language') === 'en' ? 'Shortcode copied: ' + code : 'Kısa kod kopyalandı: ' + code);
+      } catch (_e) {
+        if ($('shortcodeDisplay')) $('shortcodeDisplay').select();
+        setStatus(code);
+      }
+    };
+  }
+
+  if ($('pickWpMediaLogo')) {
+    $('pickWpMediaLogo').onclick = () => {
+      if (typeof window.wp !== 'undefined' && window.wp && window.wp.media) {
+        const frame = window.wp.media({
+          title: val('language') === 'en' ? 'Select Company Logo' : 'Şirket Logosu Seçin',
+          multiple: false,
+          library: { type: 'image' }
+        });
+        frame.on('select', () => {
+          const attachment = frame.state().get('selection').first().toJSON();
+          if (attachment && attachment.url) {
+            if ($('logoUrl')) $('logoUrl').value = attachment.url;
+            render();
+            setStatus(val('language') === 'en' ? 'Media library logo selected.' : 'Medya kütüphanesi logosu seçildi.');
+          }
+        });
+        frame.open();
+      } else {
+        setStatus(
+          val('language') === 'en'
+            ? 'WP Media Library is available inside WordPress admin. Paste any image URL in the field.'
+            : 'WP Medya Kütüphanesi WordPress yönetim panelinde aktif olur. Kutuya doğrudan görsel URL yapıştırabilirsiniz.'
+        );
+      }
+    };
+  }
+
+  if ($('shareWhatsapp')) {
+    $('shareWhatsapp').onclick = () => {
+      const text = [
+        '📇 *' + val('person') + '*',
+        val('job') + (val('company') ? ' · ' + val('company') : ''),
+        val('phone') ? '📞 ' + val('phone') : '',
+        val('email') ? '✉️ ' + val('email') : '',
+        val('website') ? '🌐 ' + val('website') : '',
+        val('address') ? '📍 ' + val('address') : ''
+      ]
+        .filter(Boolean)
+        .join('\n');
+      window.open('https://wa.me/?text=' + encodeURIComponent(text), '_blank', 'noopener,noreferrer');
+    };
+  }
+
+  if ($('saveWpDb')) {
+    $('saveWpDb').onclick = async () => {
+      syncFormToWorkspace();
+      if (typeof window.awosignWpConfig === 'object' && window.awosignWpConfig && window.awosignWpConfig.ajaxUrl) {
+        try {
+          setStatus(val('language') === 'en' ? 'Saving to WordPress...' : 'WordPress veritabanına kaydediliyor...');
+          const body = new URLSearchParams();
+          body.set('action', 'awosign_save_workspace');
+          body.set('nonce', window.awosignWpConfig.nonce || '');
+          body.set('workspace', JSON.stringify(workspace));
+          const res = await fetch(window.awosignWpConfig.ajaxUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+            body: body.toString()
+          });
+          const json = await res.json();
+          if (json && json.success) {
+            setStatus(
+              val('language') === 'en'
+                ? 'Saved to WordPress database (' + workspace.profiles.length + ' profiles).'
+                : 'WordPress veritabanına kaydedildi (' + workspace.profiles.length + ' personel profili).'
+            );
+          } else {
+            throw new Error((json && json.data && json.data.message) || 'Save error');
+          }
+        } catch (err) {
+          setStatus(
+            val('language') === 'en'
+              ? 'WordPress save failed: ' + err.message
+              : 'WordPress kaydı başarısız: ' + err.message
+          );
+        }
+      } else {
+        setStatus(
+          val('language') === 'en'
+            ? 'Saved in browser storage (Preview mode). In WordPress this saves to wp_options.'
+            : 'Tarayıcı belleğine kaydedildi (Önizleme modu). WordPress içinde wp_options veritabanına kaydedilir.'
+        );
+      }
+    };
+  }
+
+  if ($('useSiteLogo')) {
+    $('useSiteLogo').onclick = async () => {
+      const wpLogo =
+        typeof window.awosignWpConfig === 'object' &&
+        window.awosignWpConfig &&
+        window.awosignWpConfig.siteLogoUrl
+          ? window.awosignWpConfig.siteLogoUrl
+          : '';
+      if (wpLogo) {
+        if ($('logoUrl') && !$('logoUrl').value) $('logoUrl').value = wpLogo;
+        try {
+          const img = await loadImage(wpLogo);
+          const c = document.createElement('canvas');
+          c.width = img.naturalWidth || img.width || 300;
+          c.height = img.naturalHeight || img.height || 120;
+          c.getContext('2d').drawImage(img, 0, 0);
+          logo = c.toDataURL('image/png');
+        } catch (_e) {
+          logo = wpLogo;
+        }
+        render();
+        setStatus(val('language') === 'en' ? 'WordPress site logo loaded.' : 'WordPress site logosu yüklendi.');
+        return;
+      }
+      const comp = val('company') || 'AWO';
+      const initials =
+        comp
+          .split(/\s+/)
+          .filter(Boolean)
+          .slice(0, 2)
+          .map(w => w[0].toUpperCase())
+          .join('') || 'AW';
+      const c = document.createElement('canvas');
+      c.width = 360;
+      c.height = 140;
+      const ctx = c.getContext('2d');
+      ctx.fillStyle = val('accent') || '#e7b52e';
+      ctx.beginPath();
+      ctx.roundRect(10, 15, 110, 110, 22);
+      ctx.fill();
+      ctx.fillStyle = val('brand') || '#172e49';
+      ctx.font = 'bold 50px Arial, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(initials, 65, 72);
+      ctx.fillStyle = '#ffffff';
+      ctx.font = 'bold 34px Arial, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.fillText(comp.slice(0, 14), 138, 72);
+      logo = c.toDataURL('image/png');
+      render();
+      setStatus(
+        val('language') === 'en'
+          ? 'Generated company emblem logo.'
+          : 'Kurumsal amblem logosu otomatik oluşturuldu.'
+      );
+    };
+  }
+
   $('logoFile').addEventListener('change', e => {
-    let f = e.target.files[0];
+    const f = e.target.files[0];
     if (!f) return;
     if (!['image/png', 'image/jpeg'].includes(f.type) || f.size > 3e6) {
-      alert('PNG veya JPG · en fazla 3 MB');
+      setStatus(val('language') === 'en' ? 'Choose PNG/JPG up to 3 MB.' : 'En çok 3 MB PNG veya JPG seçin.');
       return;
     }
-    let r = new FileReader();
+    const r = new FileReader();
     r.onload = () => {
       logo = r.result;
       render();
+      setStatus(val('language') === 'en' ? 'Logo updated.' : 'Logo güncellendi.');
     };
     r.readAsDataURL(f);
   });
-  root.querySelectorAll('[data-tab]').forEach(b => b.onclick = () => {
-    active = b.dataset.tab;
-    root.querySelectorAll('[data-tab]').forEach(x => x.classList.toggle('active', x === b));
-    ['Signature', 'Digital', 'Print'].forEach(t => $('view' + t).classList.toggle('hidden', t !== active));
+
+  root.querySelectorAll('[data-tab]').forEach(b => {
+    b.onclick = () => {
+      active = b.dataset.tab;
+      root.querySelectorAll('[data-tab]').forEach(x => x.classList.toggle('active', x === b));
+      ['Signature', 'Digital', 'Print'].forEach(t => $('view' + t).classList.toggle('hidden', t !== active));
+    };
   });
+
   $('language').onchange = () => {
-    let l = val('language');
-    root.lang = l;
-    root.querySelectorAll('[data-tr]').forEach(x => x.textContent = x.dataset[l]);
+    applyLanguageText();
+    rebuildProfileSelect();
     render();
   };
-  $('theme').onchange = () => root.classList.toggle('light', val('theme') === 'light');
+
+  $('theme').onchange = () => {
+    applyTheme();
+    syncFormToWorkspace();
+  };
   $('vcf').onclick = vcf;
   $('vcf2').onclick = vcf;
-  $('print').onclick = () => {
-    const w = window.open('', '_blank');
-    if (!w) {
-      alert('Please allow popups for printing.');
-      return;
-    }
-    w.opener = null;
-    w.document.write('<!doctype html><html><head><meta charset="utf-8"><title>AwoSign Print</title><style>@page{size:91mm 61mm;margin:0}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}.card{width:91mm;height:61mm;padding:9mm;overflow:hidden;break-after:page;print-color-adjust:exact;-webkit-print-color-adjust:exact}.front{background:' + val('brand') + ';color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;border-top:3mm solid ' + val('accent') + '}.back{background:white;color:#15263c;display:flex;align-items:center;justify-content:space-between;border-left:3mm solid ' + val('accent') + ';break-after:auto}.details{font-size:9pt;line-height:1.4;overflow-wrap:anywhere}.qr{width:22mm;height:22mm}.socialicons{display:flex;gap:3px}.socialicons span{font-size:8pt}small{font-size:8pt}strong{font-size:14pt}</style></head><body>' + document.getElementById('front').outerHTML + document.getElementById('back').outerHTML + '</body></html>');
-    w.document.close();
-    const imgs = Array.from(w.document.images);
-    Promise.all(imgs.map(img => img.complete ? Promise.resolve() : new Promise(resolve => {
-      img.onload = resolve;
-      img.onerror = resolve;
-    }))).then(() => {
-      w.focus();
-      w.print();
-    });
+  $('print').onclick = printBusinessCards;
+
+  if ($('downloadPrintPng')) {
+    $('downloadPrintPng').onclick = async () => {
+      const fBlob = await renderPrintFaceToPngBlob('front', true);
+      const bBlob = await renderPrintFaceToPngBlob('back', true);
+      if (fBlob) download('awosign-on-yuz-600dpi-kroslu.png', fBlob, 'image/png');
+      if (bBlob) download('awosign-arka-yuz-600dpi-kroslu.png', bBlob, 'image/png');
+      setStatus(
+        val('language') === 'en'
+          ? 'Exported 600 DPI Front & Back PNGs with 3 mm bleed & crop marks.'
+          : 'Ön ve arka yüz 600 DPI matbaa PNG kalıpları (3 mm taşma + kroslu) indirildi.'
+      );
+    };
+  }
+
+  if ($('downloadStandardPng')) {
+    $('downloadStandardPng').onclick = async () => {
+      const fBlob = await renderPrintFaceToPngBlob('front', false);
+      const bBlob = await renderPrintFaceToPngBlob('back', false);
+      if (fBlob) download('awosign-on-yuz-300ppi.png', fBlob, 'image/png');
+      if (bBlob) download('awosign-arka-yuz-300ppi.png', bBlob, 'image/png');
+      setStatus(
+        val('language') === 'en'
+          ? 'Exported 300 PPI Front & Back PNG cards.'
+          : 'Ön ve arka yüz 300 PPI PNG kartvizitler indirildi.'
+      );
+    };
+  }
+
+  if ($('downloadDigitalPng')) {
+    $('downloadDigitalPng').onclick = async () => {
+      const bBlob = await renderPrintFaceToPngBlob('back', false);
+      if (bBlob) download('awosign-dijital-kart.png', bBlob, 'image/png');
+      setStatus(
+        val('language') === 'en'
+          ? 'Digital business card PNG downloaded.'
+          : 'Dijital kartvizit PNG olarak indirildi.'
+      );
+    };
+  }
+
+  $('downloadSig').onclick = () => {
+    download(
+      'awosign-signature.html',
+      '<!doctype html><html><head><meta charset="utf-8"><title>AwoSign signature</title></head><body>' +
+        signatureHtml() +
+        '</body></html>',
+      'text/html;charset=utf-8'
+    );
+    setStatus(val('language') === 'en' ? 'Signature HTML downloaded.' : 'İmza HTML dosyası indirildi.');
   };
-  function signatureHtml() {
-    const brand = val('brand'),
-      accent = val('accent');
-    return '<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:100%;font-family:Arial,Helvetica,sans-serif;color:#15263c;background:#fff"><tr><td style="width:170px;padding:18px;vertical-align:middle">' + logoHtml('max-width:150px;max-height:100px;width:auto;height:auto') + '</td><td style="padding:18px;border-left:2px solid ' + accent + ';font-size:12px;line-height:1.6"><strong style="font-size:19px">' + esc(val('person')) + '</strong><br>' + esc(val('job')) + '<br>' + esc(val('company')) + '<br>' + esc(val('phone')) + '<br>' + esc(val('email')) + '<br>' + esc(val('website')) + '<div style="margin-top:8px">' + socialHtml().replace(/<span>/g, '<span style="display:inline-block;margin:2px;padding:4px;background:' + brand + ';color:white;font-size:11px">') + '</div></td></tr><tr><td colspan="2" style="padding:12px 18px;border-top:1px solid #ddd;font-size:11px">' + esc(val('address')) + '</td></tr></table>';
-  }
-  $('downloadSig').onclick = () => download('awosign-signature.html', '<!doctype html><html><head><meta charset="utf-8"><title>AwoSign signature</title></head><body>' + signatureHtml() + '</body></html>', 'text/html;charset=utf-8');
+
   $('copySig').onclick = async () => {
     try {
-      await navigator.clipboard.write([new ClipboardItem({
-        'text/html': new Blob([signatureHtml()], {
-          type: 'text/html'
-        }),
-        'text/plain': new Blob([$('sig').innerText], {
-          type: 'text/plain'
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/html': new Blob([signatureHtml()], { type: 'text/html' }),
+          'text/plain': new Blob([$('sig').innerText], { type: 'text/plain' })
         })
-      })]);
-      alert(val('language') === 'en' ? 'Copied' : 'Kopyalandı');
+      ]);
+      setStatus(val('language') === 'en' ? 'Signature copied to clipboard.' : 'E-posta imzası panoya kopyalandı.');
     } catch {
-      alert(val('language') === 'en' ? 'Clipboard blocked. Use Download HTML.' : 'Kopyalama engellendi. HTML indir seçeneğini kullanın.');
+      setStatus(
+        val('language') === 'en'
+          ? 'Clipboard blocked. Use Download HTML.'
+          : 'Kopyalama engellendi. HTML indir seçeneğini kullanın.'
+      );
     }
   };
+
   $('saveProject').onclick = () => {
-    const data = {
-      version: 1,
-      logo,
-      fields: {},
-      social: {}
-    };
-    [...fields, 'brand', 'accent', 'language', 'theme'].forEach(k => data.fields[k] = val(k));
-    platforms.forEach(p => data.social[p[0]] = {
-      enabled: $('check_' + p[0]).checked,
-      value: $('soc_' + p[0]).value
-    });
-    download('awosign-project.json', JSON.stringify(data, null, 2), 'application/json');
+    syncFormToWorkspace();
+    download('awosign-workspace.json', JSON.stringify(workspace, null, 2), 'application/json');
+    setStatus(val('language') === 'en' ? 'Workspace JSON downloaded.' : 'Tüm profiller JSON olarak indirildi.');
   };
-  // Validate imported project fields; accept PNG/JPEG data URLs only.
+
   $('loadProject').onchange = async e => {
     try {
@@ -187 +1122 @@
       if (!f || f.size > 5000000) throw Error('Invalid file');
       const data = JSON.parse(await f.text());
-      if (data.version !== 1 || !data.fields) throw Error('Invalid format');
-      [...fields, 'brand', 'accent', 'language', 'theme'].forEach(k => {
-        if (typeof data.fields[k] === 'string') {
-          if (['brand', 'accent'].includes(k) && !/^#[0-9a-f]{6}$/i.test(data.fields[k])) return;
-          $(k).value = data.fields[k].slice(0, 5000);
-        }
-      });
-      logo = typeof data.logo === 'string' && /^data:image\/(png|jpeg);base64,[a-z0-9+/=]+$/i.test(data.logo) ? data.logo : '';
-      platforms.forEach(p => {
-        const v = data.social && data.social[p[0]];
-        if (v) {
-          $('check_' + p[0]).checked = v.enabled === true;
-          $('soc_' + p[0]).value = typeof v.value === 'string' ? v.value.slice(0, 2000) : '';
-        }
-      });
-      $('language').onchange();
-      $('theme').onchange();
+      if ((data.version === 2 || data.version === 3) && Array.isArray(data.profiles) && data.profiles.length) {
+        workspace = data;
+        workspace.version = 3;
+      } else if (data.version === 1 && data.fields) {
+        workspace = {
+          version: 3,
+          activeProfileId: 'prof_1',
+          brand: {
+            company: data.fields.company || 'Example Studio',
+            brand: data.fields.brand || '#172e49',
+            accent: data.fields.accent || '#e7b52e',
+            website: data.fields.website || '',
+            address: data.fields.address || '',
+            logo: typeof data.logo === 'string' ? data.logo : '',
+            logoUrl: '',
+            sigTemplate: 'classic',
+            language: data.fields.language || 'tr',
+            theme: data.fields.theme || 'auto'
+          },
+          profiles: [
+            {
+              id: 'prof_1',
+              person: data.fields.person || '',
+              job: data.fields.job || '',
+              phone: data.fields.phone || '',
+              email: data.fields.email || '',
+              qrMode: data.fields.qrMode || 'url',
+              qrUrl: data.fields.qrUrl || '',
+              social: data.social || {}
+            }
+          ]
+        };
+      } else {
+        throw Error('Invalid format');
+      }
+      loadWorkspaceIntoForm();
       render();
+      setStatus(val('language') === 'en' ? 'Workspace loaded.' : 'Proje ve personel profilleri yüklendi.');
     } catch {
-      alert('Invalid AwoSign JSON / Geçersiz proje dosyası');
+      setStatus(val('language') === 'en' ? 'Invalid AwoSign JSON file.' : 'Geçersiz AwoSign proje dosyası.');
     }
     e.target.value = '';
   };
-  // Associate existing visible labels with their fields.
+
   root.querySelectorAll('input,select,textarea').forEach(el => {
     const label = el.previousElementSibling;
     if (label && label.tagName === 'LABEL' && el.id) label.htmlFor = el.id;
   });
+
   render();
 })();

awosign/trunk/awosign.php

@@ -2 +2 @@
 /**
  * Plugin Name: AwoSign
- * Description: Free private workspace for email signatures, digital contact cards and two-sided printable business cards.
- * Version: 1.0.1
+ * Description: Free workspace for multi-template email signatures, digital contact cards, multi-staff profiles, [awosign] shortcode, and 600 DPI printable business cards.
+ * Version: 1.3.0
  * Requires at least: 6.4
  * Requires PHP: 7.4
@@ -11 +11 @@
  * Text Domain: awosign
  */
-if ( ! defined( 'ABSPATH' ) ) { exit; }
+if ( ! defined( 'ABSPATH' ) ) {
+    exit;
+}
+
+define( 'AWOSIGN_VERSION', '1.3.0' );
+define( 'AWOSIGN_OPTION_KEY', 'awosign_workspace_data_v1' );
+
+/**
+ * Resolve WordPress Custom Logo or Site Icon URL if available.
+ */
+function awosign_get_wp_site_logo_url() {
+    $custom_logo_id = get_theme_mod( 'custom_logo' );
+    if ( $custom_logo_id ) {
+        $url = wp_get_attachment_image_url( $custom_logo_id, 'full' );
+        if ( $url ) {
+            return $url;
+        }
+    }
+    $site_icon = get_site_icon_url( 512 );
+    return $site_icon ? $site_icon : '';
+}
+
+/**
+ * Default workspace state structure.
+ */
+function awosign_get_default_workspace() {
+    $site_name = get_bloginfo( 'name' );
+    $site_url  = home_url( '/' );
+    return array(
+        'version'         => 3,
+        'activeProfileId' => 'prof_1',
+        'brand'           => array(
+            'company'     => $site_name ? $site_name : 'Example Studio',
+            'brand'       => '#172e49',
+            'accent'      => '#e7b52e',
+            'website'     => $site_url ? $site_url : 'https://example.com',
+            'address'     => '123 Example Street, Istanbul, TR',
+            'logo'        => '',
+            'logoUrl'     => awosign_get_wp_site_logo_url(),
+            'sigTemplate' => 'classic',
+            'language'    => 'tr',
+            'theme'       => 'auto',
+        ),
+        'profiles'        => array(
+            array(
+                'id'      => 'prof_1',
+                'person'  => 'Alex Morgan',
+                'job'     => 'Creative Director',
+                'phone'   => '+90 555 123 4567',
+                'email'   => 'alex@example.com',
+                'qrMode'  => 'url',
+                'qrUrl'   => '',
+                'social'  => array(
+                    'LinkedIn'  => array( 'enabled' => true, 'value' => 'example' ),
+                    'Instagram' => array( 'enabled' => true, 'value' => 'example' ),
+                    'Facebook'  => array( 'enabled' => true, 'value' => 'example' ),
+                ),
+            ),
+        ),
+    );
+}
+
+/**
+ * Retrieve saved workspace or defaults.
+ */
+function awosign_get_workspace() {
+    $saved = get_option( AWOSIGN_OPTION_KEY, null );
+    if ( ! is_array( $saved ) || empty( $saved['profiles'] ) || ! is_array( $saved['profiles'] ) ) {
+        return awosign_get_default_workspace();
+    }
+    return $saved;
+}
+
+/**
+ * Register WP Admin Menu.
+ */
 function awosign_register_menu() {
-    add_menu_page( 'AwoSign', 'AwoSign', 'manage_options', 'awosign', 'awosign_render_page', 'dashicons-id-alt', 80 );
+    add_menu_page(
+        'AwoSign',
+        'AwoSign',
+        'manage_options',
+        'awosign',
+        'awosign_render_page',
+        'dashicons-id-alt',
+        80
+    );
 }
 add_action( 'admin_menu', 'awosign_register_menu' );
+
+/**
+ * Enqueue Admin Designer Assets + WP Media Library + Localize Saved Workspace & Nonce.
+ */
 function awosign_enqueue_assets( $hook ) {
-    if ( 'toplevel_page_awosign' !== $hook || ! current_user_can( 'manage_options' ) ) { return; }
-    wp_enqueue_style( 'awosign-designer', plugins_url( 'assets/designer.css', __FILE__ ), array(), '1.0.1' );
+    if ( 'toplevel_page_awosign' !== $hook || ! current_user_can( 'manage_options' ) ) {
+        return;
+    }
+    wp_enqueue_media();
+    wp_enqueue_style( 'awosign-designer', plugins_url( 'assets/designer.css', __FILE__ ), array(), AWOSIGN_VERSION );
     wp_enqueue_script( 'awosign-qrcode', plugins_url( 'assets/qrcode.js', __FILE__ ), array(), '1.4.4', true );
-    wp_enqueue_script( 'awosign-designer', plugins_url( 'assets/designer.js', __FILE__ ), array( 'awosign-qrcode' ), '1.0.1', true );
+    wp_enqueue_script( 'awosign-designer', plugins_url( 'assets/designer.js', __FILE__ ), array( 'awosign-qrcode' ), AWOSIGN_VERSION, true );
+
+    wp_localize_script(
+        'awosign-designer',
+        'awosignWpConfig',
+        array(
+            'ajaxUrl'     => admin_url( 'admin-ajax.php' ),
+            'nonce'       => wp_create_nonce( 'awosign_save_workspace_nonce' ),
+            'siteLogoUrl' => esc_url_raw( awosign_get_wp_site_logo_url() ),
+            'siteName'    => sanitize_text_field( get_bloginfo( 'name' ) ),
+            'siteUrl'     => esc_url_raw( home_url( '/' ) ),
+            'workspace'   => awosign_get_workspace(),
+        )
+    );
 }
 add_action( 'admin_enqueue_scripts', 'awosign_enqueue_assets' );
+
+/**
+ * Render Admin Page.
+ */
 function awosign_render_page() {
     if ( ! current_user_can( 'manage_options' ) ) {
@@ -29 +136 @@
     require __DIR__ . '/designer-view.php';
 }
+
+/**
+ * Sanitize and Save Workspace via AJAX (manage_options + Nonce protected).
+ */
+function awosign_ajax_save_workspace() {
+    if ( ! current_user_can( 'manage_options' ) ) {
+        wp_send_json_error( array( 'message' => 'Yetkisiz işlem (manage_options gerekli).' ), 403 );
+    }
+    check_ajax_referer( 'awosign_save_workspace_nonce', 'nonce' );
+
+    $raw_json = isset( $_POST['workspace'] ) ? wp_unslash( $_POST['workspace'] ) : '';
+    $decoded  = json_decode( $raw_json, true );
+    if ( ! is_array( $decoded ) || empty( $decoded['profiles'] ) || ! is_array( $decoded['profiles'] ) ) {
+        wp_send_json_error( array( 'message' => 'Geçersiz veri formatı.' ), 400 );
+    }
+
+    $brand_in     = isset( $decoded['brand'] ) && is_array( $decoded['brand'] ) ? $decoded['brand'] : array();
+    $brand_color  = isset( $brand_in['brand'] ) && preg_match( '/^#[0-9a-fA-F]{6}$/', $brand_in['brand'] ) ? $brand_in['brand'] : '#172e49';
+    $accent_color = isset( $brand_in['accent'] ) && preg_match( '/^#[0-9a-fA-F]{6}$/', $brand_in['accent'] ) ? $brand_in['accent'] : '#e7b52e';
+
+    $logo_raw   = isset( $brand_in['logo'] ) ? (string) $brand_in['logo'] : '';
+    $logo_clean = '';
+    if ( preg_match( '/^data:image\/(png|jpeg|webp|svg\+xml);base64,[a-zA-Z0-9+\/=]+$/', $logo_raw ) && strlen( $logo_raw ) < 4500000 ) {
+        $logo_clean = $logo_raw;
+    } elseif ( filter_var( $logo_raw, FILTER_VALIDATE_URL ) ) {
+        $logo_clean = esc_url_raw( $logo_raw );
+    }
+
+    $sig_tpl = isset( $brand_in['sigTemplate'] ) && in_array( $brand_in['sigTemplate'], array( 'classic', 'compact', 'banner' ), true )
+        ? $brand_in['sigTemplate']
+        : 'classic';
+
+    $clean_brand = array(
+        'company'     => sanitize_text_field( isset( $brand_in['company'] ) ? $brand_in['company'] : '' ),
+        'brand'       => $brand_color,
+        'accent'      => $accent_color,
+        'website'     => esc_url_raw( isset( $brand_in['website'] ) ? $brand_in['website'] : '' ),
+        'address'     => sanitize_textarea_field( isset( $brand_in['address'] ) ? $brand_in['address'] : '' ),
+        'logo'        => $logo_clean,
+        'logoUrl'     => esc_url_raw( isset( $brand_in['logoUrl'] ) ? $brand_in['logoUrl'] : '' ),
+        'sigTemplate' => $sig_tpl,
+        'language'    => ( isset( $brand_in['language'] ) && 'en' === $brand_in['language'] ) ? 'en' : 'tr',
+        'theme'       => ( isset( $brand_in['theme'] ) && in_array( $brand_in['theme'], array( 'auto', 'dark', 'light' ), true ) ) ? $brand_in['theme'] : 'auto',
+    );
+
+    $clean_profiles = array();
+    foreach ( array_slice( $decoded['profiles'], 0, 50 ) as $idx => $p ) {
+        if ( ! is_array( $p ) ) {
+            continue;
+        }
+        $pid = isset( $p['id'] ) ? preg_replace( '/[^a-zA-Z0-9_-]/', '', (string) $p['id'] ) : '';
+        if ( ! $pid ) {
+            $pid = 'prof_' . ( $idx + 1 );
+        }
+        $social_in    = isset( $p['social'] ) && is_array( $p['social'] ) ? $p['social'] : array();
+        $clean_social = array();
+        foreach ( $social_in as $plat => $sdata ) {
+            $plat_key = preg_replace( '/[^a-zA-Z0-9]/', '', (string) $plat );
+            if ( $plat_key && is_array( $sdata ) ) {
+                $clean_social[ $plat_key ] = array(
+                    'enabled' => ! empty( $sdata['enabled'] ),
+                    'value'   => sanitize_text_field( isset( $sdata['value'] ) ? $sdata['value'] : '' ),
+                );
+            }
+        }
+        $clean_profiles[] = array(
+            'id'     => $pid,
+            'person' => sanitize_text_field( isset( $p['person'] ) ? $p['person'] : '' ),
+            'job'    => sanitize_text_field( isset( $p['job'] ) ? $p['job'] : '' ),
+            'phone'  => sanitize_text_field( isset( $p['phone'] ) ? $p['phone'] : '' ),
+            'email'  => sanitize_email( isset( $p['email'] ) ? $p['email'] : '' ),
+            'qrMode' => ( isset( $p['qrMode'] ) && 'vcard' === $p['qrMode'] ) ? 'vcard' : 'url',
+            'qrUrl'  => esc_url_raw( isset( $p['qrUrl'] ) ? $p['qrUrl'] : '' ),
+            'social' => $clean_social,
+        );
+    }
+
+    if ( empty( $clean_profiles ) ) {
+        $clean_profiles = awosign_get_default_workspace()['profiles'];
+    }
+
+    $active_id = isset( $decoded['activeProfileId'] ) ? preg_replace( '/[^a-zA-Z0-9_-]/', '', (string) $decoded['activeProfileId'] ) : $clean_profiles[0]['id'];
+
+    $to_save = array(
+        'version'         => 3,
+        'activeProfileId' => $active_id,
+        'brand'           => $clean_brand,
+        'profiles'        => $clean_profiles,
+        'updatedAt'       => current_time( 'mysql' ),
+    );
+
+    update_option( AWOSIGN_OPTION_KEY, $to_save, false );
+
+    wp_send_json_success(
+        array(
+            'message'   => 'AwoSign profilleri WordPress veritabanına kaydedildi.',
+            'workspace' => $to_save,
+        )
+    );
+}
+add_action( 'wp_ajax_awosign_save_workspace', 'awosign_ajax_save_workspace' );
+
+/**
+ * Frontend Shortcode: [awosign id="prof_1" theme="auto"]
+ */
+function awosign_render_shortcode( $atts ) {
+    $atts = shortcode_atts(
+        array(
+            'id'    => '',
+            'theme' => 'auto',
+        ),
+        $atts,
+        'awosign'
+    );
+
+    $workspace = awosign_get_workspace();
+    $brand     = isset( $workspace['brand'] ) ? $workspace['brand'] : array();
+    $profiles  = isset( $workspace['profiles'] ) && is_array( $workspace['profiles'] ) ? $workspace['profiles'] : array();
+    if ( empty( $profiles ) ) {
+        return '';
+    }
+
+    $target_id = $atts['id'] ? $atts['id'] : ( isset( $workspace['activeProfileId'] ) ? $workspace['activeProfileId'] : '' );
+    $profile   = $profiles[0];
+    foreach ( $profiles as $candidate ) {
+        if ( isset( $candidate['id'] ) && $candidate['id'] === $target_id ) {
+            $profile = $candidate;
+            break;
+        }
+    }
+
+    wp_enqueue_style( 'awosign-designer', plugins_url( 'assets/designer.css', __FILE__ ), array(), AWOSIGN_VERSION );
+    wp_enqueue_script( 'awosign-qrcode', plugins_url( 'assets/qrcode.js', __FILE__ ), array(), '1.4.4', true );
+
+    $company      = isset( $brand['company'] ) ? $brand['company'] : '';
+    $brand_color  = isset( $brand['brand'] ) ? $brand['brand'] : '#172e49';
+    $accent_color = isset( $brand['accent'] ) ? $brand['accent'] : '#e7b52e';
+    $website      = isset( $brand['website'] ) ? $brand['website'] : '';
+    $address      = isset( $brand['address'] ) ? $brand['address'] : '';
+    $logo         = ! empty( $brand['logoUrl'] ) ? $brand['logoUrl'] : ( isset( $brand['logo'] ) ? $brand['logo'] : '' );
+
+    $person  = isset( $profile['person'] ) ? $profile['person'] : '';
+    $job     = isset( $profile['job'] ) ? $profile['job'] : '';
+    $phone   = isset( $profile['phone'] ) ? $profile['phone'] : '';
+    $email   = isset( $profile['email'] ) ? $profile['email'] : '';
+    $qr_mode = isset( $profile['qrMode'] ) ? $profile['qrMode'] : 'url';
+    $qr_url  = ! empty( $profile['qrUrl'] ) ? $profile['qrUrl'] : $website;
+
+    $vcard_lines = array(
+        'BEGIN:VCARD',
+        'VERSION:3.0',
+        'FN:' . $person,
+        'ORG:' . $company,
+        'TITLE:' . $job,
+    );
+    if ( $phone ) {
+        $vcard_lines[] = 'TEL;TYPE=WORK,VOICE:' . $phone;
+    }
+    if ( $email ) {
+        $vcard_lines[] = 'EMAIL:' . $email;
+    }
+    if ( $website ) {
+        $vcard_lines[] = 'URL:' . $website;
+    }
+    if ( $address ) {
+        $vcard_lines[] = 'ADR;TYPE=WORK:;;' . str_replace( array( "\r\n", "\r", "\n" ), ' ', $address ) . ';;;;';
+    }
+    $vcard_lines[] = 'END:VCARD';
+    $vcard_payload = implode( "\r\n", $vcard_lines );
+
+    $qr_payload = ( 'vcard' === $qr_mode ) ? $vcard_payload : $qr_url;
+    $uid        = 'awosign-sc-' . wp_unique_id();
+    $theme_attr = in_array( $atts['theme'], array( 'auto', 'dark', 'light' ), true ) ? $atts['theme'] : 'auto';
+    $wa_text    = rawurlencode( trim( $person . ' — ' . $job . ' (' . $company . ')' . "\n" . $phone . "\n" . $email . "\n" . $website ) );
+
+    ob_start();
+    ?>
+    <div id="<?php echo esc_attr( $uid ); ?>" class="awosign-shortcode-card" data-theme="<?php echo esc_attr( $theme_attr ); ?>" style="--brand:<?php echo esc_attr( $brand_color ); ?>;--accent:<?php echo esc_attr( $accent_color ); ?>;max-width:540px;margin:16px auto;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;">
+        <div class="digital" style="width:100%;background:var(--brand);color:#fff;border-top:5px solid var(--accent);padding:24px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 6px 24px rgba(0,0,0,0.18);">
+            <div class="details" style="line-height:1.65;font-size:13px;flex:1;min-width:210px;">
+                <?php if ( $logo ) : ?>
+                    <img src="<?php echo esc_url( $logo ); ?>" alt="<?php echo esc_attr( $company ); ?>" style="max-width:110px;max-height:70px;object-fit:contain;display:block;margin-bottom:8px;">
+                <?php else : ?>
+                    <div style="font-size:20px;font-weight:700;margin-bottom:6px;"><?php echo esc_html( $company ); ?></div>
+                <?php endif; ?>
+                <strong style="font-size:20px;display:block;"><?php echo esc_html( $person ); ?></strong>
+                <span><?php echo esc_html( $job ); ?><?php echo $company ? ' · ' . esc_html( $company ) : ''; ?></span><br>
+                <?php if ( $phone ) : ?>
+                    <a href="tel:<?php echo esc_attr( preg_replace( '/[^0-9+]/', '', $phone ) ); ?>" style="color:#fff;text-decoration:none;"><?php echo esc_html( $phone ); ?></a><br>
+                <?php endif; ?>
+                <?php if ( $email ) : ?>
+                    <a href="mailto:<?php echo esc_attr( $email ); ?>" style="color:#fff;text-decoration:none;"><?php echo esc_html( $email ); ?></a><br>
+                <?php endif; ?>
+                <?php if ( $website ) : ?>
+                    <a href="<?php echo esc_url( $website ); ?>" target="_blank" rel="noopener noreferrer" style="color:#dbe7f5;text-decoration:none;"><?php echo esc_html( $website ); ?></a><br>
+                <?php endif; ?>
+                <?php if ( $address ) : ?>
+                    <span style="font-size:12px;color:#cbd9ea;"><?php echo esc_html( $address ); ?></span>
+                <?php endif; ?>
+                <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;">
+                    <button type="button" class="awosign-sc-vcf-btn" style="background:var(--accent);color:#102032;border:none;padding:7px 13px;border-radius:6px;font-weight:700;font-size:12px;cursor:pointer;">
+                        📇 Rehbere Ekle (VCF)
+                    </button>
+                    <a href="https://wa.me/?text=<?php echo esc_attr( $wa_text ); ?>" target="_blank" rel="noopener noreferrer" style="background:#25D366;color:#fff;text-decoration:none;padding:7px 13px;border-radius:6px;font-weight:700;font-size:12px;display:inline-block;">
+                        💬 WhatsApp Paylaş
+                    </a>
+                </div>
+            </div>
+            <div class="awosign-sc-qr" data-qr="<?php echo esc_attr( $qr_payload ); ?>" style="background:#fff;padding:6px;border-radius:8px;width:108px;height:108px;display:flex;align-items:center;justify-content:center;flex-shrink:0;"></div>
+        </div>
+    </div>
+    <script>
+    (function(){
+        var wrap = document.getElementById(<?php echo wp_json_encode( $uid ); ?>);
+        if (!wrap) return;
+        var qrBox = wrap.querySelector('.awosign-sc-qr');
+        if (qrBox && typeof qrcode === 'function') {
+            try {
+                var q = qrcode(0, 'L');
+                q.addData(qrBox.getAttribute('data-qr') || '', 'Byte');
+                q.make();
+                qrBox.innerHTML = '<img src="' + q.createDataURL(4, 4) + '" alt="QR" style="width:96px;height:96px;object-fit:contain;">';
+            } catch (e) {}
+        }
+        var btn = wrap.querySelector('.awosign-sc-vcf-btn');
+        if (btn) {
+            btn.addEventListener('click', function(){
+                var vcfData = <?php echo wp_json_encode( $vcard_payload ); ?>;
+                var blob = new Blob([vcfData], {type: 'text/vcard;charset=utf-8'});
+                var a = document.createElement('a');
+                a.href = URL.createObjectURL(blob);
+                a.download = <?php echo wp_json_encode( sanitize_title( $person ? $person : 'contact' ) . '.vcf' ); ?>;
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+            });
+        }
+    })();
+    </script>
+    <?php
+    return ob_get_clean();
+}
+add_shortcode( 'awosign', 'awosign_render_shortcode' );

awosign/trunk/designer-view.php

@@ -2 +2 @@
 if ( ! defined( 'ABSPATH' ) ) { exit; }
 ?>
-<div id="awosign-root"><header><div><h1>AwoSign <span style="color:#e7b52e">Free 1.0.1</span> — Kurumsal Kimlik</h1><small>Tek marka kimliği · E-posta imzası · Dijital kartvizit · Baskı kartviziti · WordPress Free</small></div><div class="two" style="min-width:245px"><div><label for="language">Dil / Language</label><select id="language"><option value="tr">Türkçe</option><option value="en">English</option></select></div><div><label for="theme">Görünüm</label><select id="theme"><option value="dark">Koyu</option><option value="light">Açık</option></select></div></div></header><main><section class="panel editor"><h2 data-tr="Kurumsal kimlik ve iletişim" data-en="Brand identity and contact">Kurumsal kimlik ve iletişim</h2><label data-tr="Şirket logosu (PNG / JPG)" data-en="Company logo (PNG / JPG)">Şirket logosu (PNG / JPG)</label><input id="logoFile" type="file" accept="image/png,image/jpeg"><div class="two"><div><label data-tr="Ana renk" data-en="Primary color">Ana renk</label><input type="color" id="brand" value="#172e49"></div><div><label data-tr="Vurgu rengi" data-en="Accent color">Vurgu rengi</label><input type="color" id="accent" value="#e7b52e"></div></div><label data-tr="Şirket adı" data-en="Company name">Şirket adı</label><input id="company" value="Example Studio"><div class="two"><div><label data-tr="Ad soyad" data-en="Full name">Ad soyad</label><input id="person" value="Alex Morgan"></div><div><label data-tr="Unvan" data-en="Job title">Unvan</label><input id="job" value="Creative Director"></div></div><div class="two"><div><label data-tr="Telefon (ülke koduyla)" data-en="Phone (with country code)">Telefon (ülke koduyla)</label><input type="tel" id="phone" value="+44 555 123 4567"></div><div><label>E-posta / Email</label><input type="email" id="email" value="alex@example.com"></div></div><label data-tr="Web sitesi" data-en="Website">Web sitesi</label><input id="website" value="https://example.com"><label data-tr="Adres" data-en="Address">Adres</label><textarea id="address" rows="2">123 Example Street, London, UK</textarea><label data-tr="QR hedef adresi (boşsa web sitesi)" data-en="QR destination (defaults to website)">QR hedef adresi (boşsa web sitesi)</label><input id="qrUrl" placeholder="https://..."><h3 data-tr="Gösterilecek sosyal medya ikonları" data-en="Social icons to display">Gösterilecek sosyal medya ikonları</h3><div class="social" id="socials"></div><p class="hint" data-tr="Tüm materyaller aynı logo ve renkleri kullanır. Sosyal bağlantılar için platform adresi + kullanıcı adı girilir." data-en="All materials share one logo and color palette. Enter a username or full URL for social profiles.">Tüm materyaller aynı logo ve renkleri kullanır. Sosyal bağlantılar için platform adresi + kullanıcı adı girilir.</p><div id="socialInputs"></div><div class="buttons"><button id="saveProject" data-tr="Proje indir (JSON)" data-en="Download project (JSON)">Proje indir (JSON)</button><label for="loadProject" data-tr="Proje yükle" data-en="Load project">Proje yükle</label><input id="loadProject" type="file" accept="application/json,.json"></div></section><section class="panel"><div class="tabs"><button class="active" data-tab="Signature" data-tr="E-posta imzası" data-en="Email signature">E-posta imzası</button><button data-tab="Digital" data-tr="Dijital kartvizit" data-en="Digital card">Dijital kartvizit</button><button data-tab="Print" data-tr="Baskı kartviziti (iki yüz)" data-en="Print card (two sides)">Baskı kartviziti (iki yüz)</button></div><div id="viewSignature" class="stage"><h3 data-tr="E-posta imzası — 600 px" data-en="Email signature — 600 px">E-posta imzası — 600 px</h3><div id="sig" class="signature"></div><div class="buttons"><button id="copySig" data-tr="İmzayı kopyala" data-en="Copy signature">İmzayı kopyala</button><button id="downloadSig" data-tr="HTML indir" data-en="Download HTML">HTML indir</button></div></div><div id="viewDigital" class="stage hidden"><h3 data-tr="Dijital kartvizit — 540 px" data-en="Digital business card — 540 px">Dijital kartvizit — 540 px</h3><div id="digital" class="digital"></div><div class="buttons"><button id="vcf" data-tr="VCF indir" data-en="Download VCF">VCF indir</button></div></div><div id="viewPrint" class="stage hidden"><h3 data-tr="Baskı kartviziti — ön ve arka yüz" data-en="Print business card — front and back">Baskı kartviziti — ön ve arka yüz</h3><div class="cards"><div class="cardwrap"><h3 data-tr="ÖN YÜZ" data-en="FRONT">ÖN YÜZ</h3><div id="front" class="card front"></div></div><div class="cardwrap"><h3 data-tr="ARKA YÜZ" data-en="BACK">ARKA YÜZ</h3><div id="back" class="card back"></div></div></div><div class="buttons"><button id="print" data-tr="İki yüzü PDF olarak yazdır" data-en="Print both sides to PDF">İki yüzü PDF olarak yazdır</button><button id="vcf2" data-tr="VCF indir" data-en="Download VCF">VCF indir</button></div><p class="hint" data-tr="Baskı prototipi: 85 × 55 mm bitmiş ölçü + 3 mm taşma payı. PDF renk ayrımı, kesim işaretleri ve QR baskı kalitesi henüz matbaa onaylı değildir." data-en="Print prototype: 85 × 55 mm trim + 3 mm bleed. Color separation, crop marks and QR print quality are not press-validated.">Baskı prototipi: 85 × 55 mm bitmiş ölçü + 3 mm taşma payı. PDF renk ayrımı, kesim işaretleri ve QR baskı kalitesi henüz matbaa onaylı değildir.</p></div><p class="muted" data-tr="QR kodları cihazınızda üretilir. Bilgiler WordPress veritabanına kaydedilmez. E-posta istemcileri gömülü logoları engelleyebilir; imzayı kendi istemcinizde test edin." data-en="QR codes are generated on your device. Details are not saved to the WordPress database. Email clients may block embedded logos; test your signature in your email client.">QR kodları cihazınızda üretilir. Bilgiler WordPress veritabanına kaydedilmez. E-posta istemcileri gömülü logoları engelleyebilir; imzayı kendi istemcinizde test edin.</p></section></main><p class="privacy" data-tr="Ücretsiz · Hesap veya API anahtarı gerekmez · Form verileri sunucuya gönderilmez. Dış profil bağlantıları yalnız tıklandığında açılır." data-en="Free · No account or API key required · Form data is not sent to the server. External profile links open only when clicked.">Ücretsiz · Hesap veya API anahtarı gerekmez · Form verileri sunucuya gönderilmez. Dış profil bağlantıları yalnız tıklandığında açılır.</p></div>
+<div id="awosign-root" data-theme="auto">
+    <header>
+        <div>
+            <h1>AwoSign <span style="color:#e7b52e">Free 1.3.0</span> — Kurumsal Kimlik, Çoklu İmza Şablonu &amp; Matbaa Stüdyosu</h1>
+            <small data-tr="3 E-posta imza şablonu · Medya Kütüphanesi URL logosu · Çoklu personel · WhatsApp paylaşım · A4 10'lu &amp; 600 DPI matbaa kartviziti" data-en="3 Email signature templates · Media Library URL logo · Multi-staff · WhatsApp share · A4 10-up &amp; 600 DPI print-shop card">3 E-posta imza şablonu · Medya Kütüphanesi URL logosu · Çoklu personel · WhatsApp paylaşım · A4 10'lu &amp; 600 DPI matbaa kartviziti</small>
+        </div>
+        <div class="two" style="min-width:290px">
+            <div>
+                <label for="language">Dil / Language</label>
+                <select id="language">
+                    <option value="tr">Türkçe</option>
+                    <option value="en">English</option>
+                </select>
+            </div>
+            <div>
+                <label for="theme" data-tr="Görünüm (Day/Night)" data-en="Appearance (Day/Night)">Görünüm (Day/Night)</label>
+                <select id="theme">
+                    <option value="auto" data-tr="◐ Otomatik (Sistem/Sayfa)" data-en="◐ Auto (System/Page)">◐ Otomatik (Sistem/Sayfa)</option>
+                    <option value="dark" data-tr="☾ Gece (Koyu)" data-en="☾ Night (Dark)">☾ Gece (Koyu)</option>
+                    <option value="light" data-tr="☀ Gündüz (Açık)" data-en="☀ Day (Light)">☀ Gündüz (Açık)</option>
+                </select>
+            </div>
+        </div>
+    </header>
+    <main>
+        <section class="panel editor">
+            <div class="as-staff-bar">
+                <div class="as-staff-header">
+                    <h2 data-tr="👥 Personel Profilleri &amp; WordPress Kaydı" data-en="👥 Staff Profiles &amp; WordPress Storage">👥 Personel Profilleri &amp; WordPress Kaydı</h2>
+                    <span class="as-badge" id="profileCountBadge">1 Profil</span>
+                </div>
+                <label for="profileSelect" data-tr="Aktif Personel Profili" data-en="Active Staff Profile">Aktif Personel Profili</label>
+                <select id="profileSelect"></select>
+                <div class="buttons" style="margin-top:10px">
+                    <button type="button" id="addProfile" data-tr="➕ Yeni Personel" data-en="➕ New Staff">➕ Yeni Personel</button>
+                    <button type="button" id="deleteProfile" data-tr="🗑️ Profili Sil" data-en="🗑️ Delete Profile">🗑️ Profili Sil</button>
+                    <button type="button" id="saveWpDb" class="as-btn-primary" data-tr="💾 WordPress'e Kaydet" data-en="💾 Save to WordPress">💾 WordPress'e Kaydet</button>
+                </div>
+                <div class="as-shortcode-box">
+                    <label for="shortcodeDisplay" data-tr="Sayfa / Yazı Kısa Kodu (Shortcode)" data-en="Page / Post Shortcode">Sayfa / Yazı Kısa Kodu (Shortcode)</label>
+                    <div class="as-shortcode-row">
+                        <input id="shortcodeDisplay" readonly value='[awosign id="prof_1"]'>
+                        <button type="button" id="copyShortcode" data-tr="📋 Kopyala" data-en="📋 Copy">📋 Kopyala</button>
+                    </div>
+                </div>
+            </div>
+
+            <h2 data-tr="🏢 Ortak Kurumsal Kimlik (Tüm Personeller)" data-en="🏢 Shared Brand Identity (All Staff)" style="margin-top:18px">🏢 Ortak Kurumsal Kimlik (Tüm Personeller)</h2>
+            <label data-tr="Şirket logosu dosyası (Baskı / PNG için)" data-en="Company logo file (For Print / PNG)">Şirket logosu dosyası (Baskı / PNG için)</label>
+            <div class="as-logo-row">
+                <input id="logoFile" type="file" accept="image/png,image/jpeg">
+                <button type="button" id="useSiteLogo" data-tr="🌐 Site Logosunu Çek" data-en="🌐 Use Site Logo">🌐 Site Logosunu Çek</button>
+            </div>
+            <label for="logoUrl" data-tr="E-posta imzası için Logo URL (Gmail/Outlook Base64 engeline takılmaz)" data-en="Logo URL for Email Signatures (Avoids Gmail/Outlook Base64 block)">E-posta imzası için Logo URL (Gmail/Outlook Base64 engeline takılmaz)</label>
+            <div class="as-logo-row">
+                <input id="logoUrl" placeholder="https://siteniz.com/wp-content/uploads/logo.png">
+                <button type="button" id="pickWpMediaLogo" data-tr="🖼️ Medya Seç" data-en="🖼️ Media Library">🖼️ Medya Seç</button>
+            </div>
+            <div class="two">
+                <div>
+                    <label data-tr="Ana renk" data-en="Primary color">Ana renk</label>
+                    <input type="color" id="brand" value="#172e49">
+                </div>
+                <div>
+                    <label data-tr="Vurgu rengi" data-en="Accent color">Vurgu rengi</label>
+                    <input type="color" id="accent" value="#e7b52e">
+                </div>
+            </div>
+            <label data-tr="Şirket adı" data-en="Company name">Şirket adı</label>
+            <input id="company" value="Example Studio">
+            <label data-tr="Web sitesi" data-en="Website">Web sitesi</label>
+            <input id="website" value="https://example.com">
+            <label data-tr="Adres" data-en="Address">Adres</label>
+            <textarea id="address" rows="2">123 Example Street, Istanbul, TR</textarea>
+
+            <h2 data-tr="👤 Seçili Personel Bilgileri" data-en="👤 Selected Staff Details" style="margin-top:18px">👤 Seçili Personel Bilgileri</h2>
+            <div class="two">
+                <div>
+                    <label data-tr="Ad soyad" data-en="Full name">Ad soyad</label>
+                    <input id="person" value="Alex Morgan">
+                </div>
+                <div>
+                    <label data-tr="Unvan" data-en="Job title">Unvan</label>
+                    <input id="job" value="Creative Director">
+                </div>
+            </div>
+            <div class="two">
+                <div>
+                    <label data-tr="Telefon (ülke koduyla)" data-en="Phone (with country code)">Telefon (ülke koduyla)</label>
+                    <input type="tel" id="phone" value="+90 555 123 4567">
+                </div>
+                <div>
+                    <label>E-posta / Email</label>
+                    <input type="email" id="email" value="alex@example.com">
+                </div>
+            </div>
+            <div class="two">
+                <div>
+                    <label for="qrMode" data-tr="QR Kod İçeriği" data-en="QR Code Content">QR Kod İçeriği</label>
+                    <select id="qrMode">
+                        <option value="url" data-tr="Web sitesi / Özel URL" data-en="Website / Custom URL">Web sitesi / Özel URL</option>
+                        <option value="vcard" data-tr="vCard Rehber (Kamerayla Rehbere Ekle)" data-en="vCard Contact (Scan to Save)">vCard Rehber (Kamerayla Rehbere Ekle)</option>
+                    </select>
+                </div>
+                <div>
+                    <label data-tr="QR hedef URL (boşsa web sitesi)" data-en="QR destination (defaults to website)">QR hedef URL (boşsa web sitesi)</label>
+                    <input id="qrUrl" placeholder="https://...">
+                </div>
+            </div>
+            <h3 data-tr="Gösterilecek sosyal medya ikonları" data-en="Social icons to display">Gösterilecek sosyal medya ikonları</h3>
+            <div class="social" id="socials"></div>
+            <p class="hint" data-tr="Tüm personeller aynı şirket logosu ve renklerini paylaşır. Sosyal bağlantılar seçili personele özeldir." data-en="All staff members share the company logo and color palette. Social links belong to the selected staff profile.">Tüm personeller aynı şirket logosu ve renklerini paylaşır. Sosyal bağlantılar seçili personele özeldir.</p>
+            <div id="socialInputs"></div>
+            <div class="buttons">
+                <button type="button" id="saveProject" data-tr="📦 Tüm Profilleri İndir (JSON)" data-en="📦 Export All Profiles (JSON)">📦 Tüm Profilleri İndir (JSON)</button>
+                <label for="loadProject" class="as-file-btn" data-tr="📂 JSON Yükle" data-en="📂 Import JSON">📂 JSON Yükle</label>
+                <input id="loadProject" type="file" accept="application/json,.json" class="hidden">
+            </div>
+        </section>
+        <section class="panel">
+            <div class="tabs">
+                <button class="active" data-tab="Signature" data-tr="E-posta imzası" data-en="Email signature">E-posta imzası</button>
+                <button data-tab="Digital" data-tr="Dijital kartvizit" data-en="Digital card">Dijital kartvizit</button>
+                <button data-tab="Print" data-tr="Baskı &amp; Çoğaltma (İki Yüz)" data-en="Print &amp; Duplication (Two Sides)">Baskı &amp; Çoğaltma (İki Yüz)</button>
+            </div>
+            <div id="viewSignature" class="stage">
+                <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;">
+                    <h3 style="margin:0" data-tr="E-posta imzası — 600 px" data-en="Email signature — 600 px">E-posta imzası — 600 px</h3>
+                    <div style="min-width:250px;">
+                        <select id="sigTemplate" aria-label="E-posta imza şablonu">
+                            <option value="classic" data-tr="Şablon 1: Klasik Sol Logo (600 px)" data-en="Template 1: Classic Left Logo (600 px)">Şablon 1: Klasik Sol Logo (600 px)</option>
+                            <option value="compact" data-tr="Şablon 2: Modern Kompakt Şerit (520 px)" data-en="Template 2: Modern Compact Bar (520 px)">Şablon 2: Modern Kompakt Şerit (520 px)</option>
+                            <option value="banner" data-tr="Şablon 3: Kurumsal Başlık &amp; QR (600 px)" data-en="Template 3: Corporate Banner &amp; QR (600 px)">Şablon 3: Kurumsal Başlık &amp; QR (600 px)</option>
+                        </select>
+                    </div>
+                </div>
+                <div id="sig" class="signature"></div>
+                <div class="buttons">
+                    <button id="copySig" data-tr="📋 İmzayı Kopyala" data-en="📋 Copy Signature">📋 İmzayı Kopyala</button>
+                    <button id="downloadSig" data-tr="📄 HTML İndir" data-en="📄 Download HTML">📄 HTML İndir</button>
+                </div>
+            </div>
+            <div id="viewDigital" class="stage hidden">
+                <h3 data-tr="Dijital kartvizit — 540 px" data-en="Digital business card — 540 px">Dijital kartvizit — 540 px</h3>
+                <div id="digital" class="digital"></div>
+                <div class="buttons">
+                    <button id="downloadDigitalPng" data-tr="🖼️ Dijital Kartvizit PNG İndir" data-en="🖼️ Download Digital Card PNG">🖼️ Dijital Kartvizit PNG İndir</button>
+                    <button id="vcf" class="btn-secondary" data-tr="📇 VCF Rehber İndir" data-en="📇 Download VCF">📇 VCF Rehber İndir</button>
+                    <button id="shareWhatsapp" class="as-btn-primary" data-tr="💬 WhatsApp ile Paylaş" data-en="💬 Share via WhatsApp">💬 WhatsApp ile Paylaş</button>
+                </div>
+            </div>
+            <div id="viewPrint" class="stage hidden">
+                <h3 data-tr="Baskı kartviziti — 85 × 55 mm ön ve arka yüz" data-en="Print business card — 85 × 55 mm front and back">Baskı kartviziti — 85 × 55 mm ön ve arka yüz</h3>
+                <div class="cards">
+                    <div class="cardwrap">
+                        <h3 data-tr="ÖN YÜZ (85 × 55 mm)" data-en="FRONT (85 × 55 mm)">ÖN YÜZ (85 × 55 mm)</h3>
+                        <div id="front" class="card front"></div>
+                    </div>
+                    <div class="cardwrap">
+                        <h3 data-tr="ARKA YÜZ (85 × 55 mm)" data-en="BACK (85 × 55 mm)">ARKA YÜZ (85 × 55 mm)</h3>
+                        <div id="back" class="card back"></div>
+                    </div>
+                </div>
+                <div class="as-print-panel">
+                    <h4 data-tr="🖨️ Matbaa Baskı &amp; Çoklu Çoğaltma Ayarları" data-en="🖨️ Print-Shop &amp; Bulk Duplication Settings">🖨️ Matbaa Baskı &amp; Çoklu Çoğaltma Ayarları</h4>
+                    <div class="as-print-grid">
+                        <div>
+                            <label for="printLayout" data-tr="Sayfa Düzeni / Çoğaltma Modu" data-en="Page Layout / Duplication Mode">Sayfa Düzeni / Çoğaltma Modu</label>
+                            <select id="printLayout">
+                                <option value="a4_10up_duplex" data-tr="A4 Çift Yön Çoklu (2×5 = 10 Kart/Sayfa Ön+Arka)" data-en="A4 Duplex Sheet (2×5 = 10 Cards/Sheet Front+Back)">A4 Çift Yön Çoklu (2×5 = 10 Kart/Sayfa Ön+Arka)</option>
+                                <option value="a4_10up_front" data-tr="A4 Tek Yön Çoklu — Sadece Ön Yüz (10 Kart/Sayfa)" data-en="A4 Single Side — Front Only (10 Cards/Sheet)">A4 Tek Yön Çoklu — Sadece Ön Yüz (10 Kart/Sayfa)</option>
+                                <option value="a4_10up_back" data-tr="A4 Tek Yön Çoklu — Sadece Arka Yüz (10 Kart/Sayfa)" data-en="A4 Single Side — Back Only (10 Cards/Sheet)">A4 Tek Yön Çoklu — Sadece Arka Yüz (10 Kart/Sayfa)</option>
+                                <option value="single_bleed" data-tr="Matbaa Tekli Kalıp (91×61 mm — 3 mm Taşma Paylı + Kroslu)" data-en="Print-Shop Single Master (91×61 mm — 3 mm Bleed + Crop Marks)">Matbaa Tekli Kalıp (91×61 mm — 3 mm Taşma Paylı + Kroslu)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="printCopies" data-tr="Çoğaltma Adedi (A4 Set Sayısı)" data-en="Copy Multiplier (A4 Sheet Sets)">Çoğaltma Adedi (A4 Set Sayısı)</label>
+                            <select id="printCopies">
+                                <option value="1" data-tr="1 Set (10 Adet Kartvizit)" data-en="1 Set (10 Business Cards)">1 Set (10 Adet Kartvizit)</option>
+                                <option value="2" data-tr="2 Set (20 Adet Kartvizit)" data-en="2 Sets (20 Business Cards)">2 Set (20 Adet Kartvizit)</option>
+                                <option value="5" data-tr="5 Set (50 Adet Kartvizit)" data-en="5 Sets (50 Business Cards)">5 Set (50 Adet Kartvizit)</option>
+                                <option value="10" data-tr="10 Set (100 Adet Kartvizit)" data-en="10 Sets (100 Business Cards)">10 Set (100 Adet Kartvizit)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="cropMarks" data-tr="Kesim Çizgileri (Kros)" data-en="Crop Marks / Cut Guides">Kesim Çizgileri (Kros)</label>
+                            <select id="cropMarks">
+                                <option value="1" data-tr="Göster (Giyotin / Maket Bıçağı Kılavuzu)" data-en="Show (Guillotine / Cut Guides)">Göster (Giyotin / Maket Bıçağı Kılavuzu)</option>
+                                <option value="0" data-tr="Gizle (Tam Sıfır Kenar)" data-en="Hide (Zero Border)">Gizle (Tam Sıfır Kenar)</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="buttons">
+                        <button id="print" data-tr="🖨️ Seçili Düzeni Yazdır / PDF Kaydet" data-en="🖨️ Print Selected Layout / Save PDF">🖨️ Seçili Düzeni Yazdır / PDF Kaydet</button>
+                        <button id="downloadPrintPng" class="btn-secondary" data-tr="📐 600 DPI Matbaa PNG (Ön+Arka Kroslu)" data-en="📐 600 DPI Print-Shop PNG (Front+Back w/ Bleed)">📐 600 DPI Matbaa PNG (Ön+Arka Kroslu)</button>
+                        <button id="downloadStandardPng" class="btn-secondary" data-tr="🖼️ 300 PPI Standart PNG (Ön+Arka)" data-en="🖼️ 300 PPI Standard PNG (Front+Back)">🖼️ 300 PPI Standart PNG (Ön+Arka)</button>
+                        <button id="vcf2" class="btn-secondary" data-tr="📇 VCF İndir" data-en="📇 Download VCF">📇 VCF İndir</button>
+                    </div>
+                </div>
+                <p class="hint" data-tr="Baskı İpucu: Yazdırma penceresinde 'Kenar Boşlukları: Yok / Sıfır', 'Ölçek: %100' ve 'Arka Plan Grafikleri: Açık' seçin. Çift yönlü A4 baskıda yazıcınızın 'Uzun Kenardan Çevir (Flip on Long Edge)' ayarını kullanın." data-en="Print Tip: Select 'Margins: None', 'Scale: 100%', and 'Background graphics: On' in the print dialog. For duplex A4 printing, use 'Flip on Long Edge'.">Baskı İpucu: Yazdırma penceresinde 'Kenar Boşlukları: Yok / Sıfır', 'Ölçek: %100' ve 'Arka Plan Grafikleri: Açık' seçin. Çift yönlü A4 baskıda yazıcınızın 'Uzun Kenardan Çevir (Flip on Long Edge)' ayarını kullanın.</p>
+            </div>
+            <p id="as-status" class="as-status" role="status" aria-live="polite"></p>
+            <p class="muted" data-tr="QR kodları cihazınızda üretilir. E-posta imzalarında Gmail/Outlook uyumluluğu için 'Logo URL' alanına medya kütüphanesi adresinizi ekleyebilirsiniz." data-en="QR codes are generated on your device. For Gmail/Outlook signature compatibility, provide a public Media Library URL in the 'Logo URL' field.">QR kodları cihazınızda üretilir. E-posta imzalarında Gmail/Outlook uyumluluğu için 'Logo URL' alanına medya kütüphanesi adresinizi ekleyebilirsiniz.</p>
+        </section>
+    </main>
+    <p class="privacy" data-tr="Ücretsiz · Hesap veya API anahtarı gerekmez · Veriler yalnız sizin WordPress sitenizde veya indirdiğiniz JSON dosyasında tutulur." data-en="Free · No account or API key required · Data is stored only on your own WordPress site or exported JSON file.">Ücretsiz · Hesap veya API anahtarı gerekmez · Veriler yalnız sizin WordPress sitenizde veya indirdiğiniz JSON dosyasında tutulur.</p>
+</div>

awosign/trunk/readme.txt

@@ -1 @@
-=== AwoSign ===
+=== AwoSign — Email Signature, Digital Contact Card & Printable Business Card Studio ===
 Contributors: awoscan
+Tags: email signature, business card, vcard, qr code, digital card
+Requires at least: 6.4
 Tested up to: 6.7
-Tags: email signature, business card, branding, vcard, qr code
-Requires at least: 6.4
 Requires PHP: 7.4
-Stable tag: 1.0.1
+Stable tag: 1.3.0
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
-Free brand identity workspace: email signatures, digital card previews, printable business cards and vCard downloads.
+Multi-template HTML email signature generator, digital contact card with `[awosign]` shortcode, local vCard/URL QR code, and 600 DPI printable business card studio.
 
 == Description ==
-AwoSign turns a shared logo and color palette into an email signature, digital contact card preview and two-sided business card. Free, no account, subscription, trial limit or API key.
+**AwoSign** turns your company logo and brand palette into a professional **HTML Email Signature**, an interactive **Digital Contact Card (`[awosign]`)**, and a **Two-Sided 85x55mm Printable Business Card** directly inside WordPress.
 
-* Turkish and English editor; light and dark themes.
-* PNG/JPEG logos up to 3 MB.
-* Ten selectable social profile links with compact text/symbol badges.
-* Local QR generation; no third-party QR service.
-* Table-based, inline-styled signature HTML export and rich clipboard copy when supported.
-* vCard 3.0 export and two-page browser print/PDF output.
-* Explicit JSON project download/import; no automatic persistence.
+100% free, self-contained, and privacy-first: no external QR APIs, no tracking, and no account required.
 
-Digital cards are private previews, not published public profile pages. Social badges are text/symbol labels, not official brand pictograms. Print output is RGB browser output: 85 x 55 mm trim plus 3 mm bleed. It does not include crop marks or certified press/color separation. Email compatibility varies; test exported signatures, especially embedded logo images, in your email clients.
+= Key Features (English) =
+* **3 HTML Email Signature Templates:** Switch instantly between *Classic (Left Logo)*, *Compact (Horizontal Bar)*, and *Corporate Banner (with QR Code)* — built with inline table styles for Gmail, Outlook, Apple Mail, and Thunderbird.
+* **Multi-Staff Profile Management:** Manage up to 50 team members under a shared company brand identity and save directly to the WordPress database (`wp_options`) or export/import portable JSON backups.
+* **`[awosign]` Frontend Shortcode:** Embed interactive digital business cards on any page or post (`[awosign]` or `[awosign id="prof_1"]`) complete with live QR code, one-click **vCard 3.0 (`.vcf`)** download, and **WhatsApp Share**.
+* **Dual QR Code Engine (100% Offline):** Generate QR codes locally for either a **Website/Custom URL** or a full **vCard 3.0 Contact** (scan with phone camera to add directly to contacts).
+* **600 DPI Print-Shop PNG & A4 10-Up Print Engine:** Print single 85x55mm cards with 3mm bleed and corner crop marks, or print **A4 10-Up (2x5) front/back duplex sheets** (`10` to `100` cards) and export **600 DPI (`2150x1441 px`)** print-ready PNGs.
+* **Bilingual & Adaptive Theme:** Full **Turkish & English** interface with Automatic (System/Page), Light, and Dark mode support.
+
+= Başlıca Özellikler (Türkçe) =
+* **3 Kurumsal E-Posta İmzası Şablonu:** Klasik Sol Logo, Kompakt Yatay Bar ve QR Kodlu Kurumsal Banner şablonları (Gmail, Outlook, Apple Mail ve Thunderbird uyumlu tablo tabanlı HTML).
+* **Çoklu Personel Profili & WordPress Veritabanı Kaydı:** Tek kurumsal kimlik altında tüm ekip profillerini yönetin, WordPress Medya Kütüphanesinden logo seçin.
+* **`[awosign]` Ön Yüz Kısa Kodu:** Dijital kartvizitinizi QR kod, tek tıkla Rehbere Ekle (`.vcf`) ve WhatsApp paylaşım butonuyla sitenizin istediğiniz sayfasına yerleştirin.
+* **600 DPI Matbaa Baskı & A4 10'lu Kartvizit Dizgisi:** 85x55mm + 3mm taşma payı (bleed) ve kesim kroslarıyla tekli veya A4 sayfasına 10'lu (10–100 adet) çift yönlü kartvizit baskısı alın.
 
 == Installation ==
-1. Upload the awosign folder to /wp-content/plugins/ or upload the ZIP through Plugins > Add New > Upload Plugin.
-2. Activate AwoSign.
-3. Administrators: open AwoSign in the dashboard menu.
-4. Customize the fields and export. Download a project JSON to keep your work before closing or reloading the page.
-
-== Privacy ==
-No form values or logos are sent to WordPress or third-party services by the plugin. No telemetry, cookies, database options, REST endpoints or external asset CDNs. Editing state is lost on reload unless exported. Project JSON includes contact information and embedded logos; keep it private. Clicking a social link visits that provider. Exported documents may include those links. The plugin only loads assets on its own admin page and requires manage_options. No public shortcode is registered.
+1. Upload the `awosign` folder to `/wp-content/plugins/` or install directly via **Plugins > Add New** in WordPress.
+2. Activate **AwoSign**.
+3. Open **AwoSign** in the WordPress admin sidebar to design signatures and business cards, or place `[awosign]` on any page.
 
 == Frequently Asked Questions ==
-= Does it save company data in WordPress? =
-No. Download/import a project JSON file for portable storage.
-= Does it require a QR service? =
-No. QR Code Generator by Kazuhiko Arase is bundled locally under the MIT license. Source: https://github.com/kazuhikoarase/qrcode-generator (JavaScript 1.4.4).
-= Does it include invoice, accounting or stationery functions? =
-No. This release follows the supplied signature/card design. It does not include e-invoicing, invoice cards, expense OCR, letterhead or envelopes.
+= Does AwoSign send any data to external servers or third-party QR APIs? =
+No. All QR codes, vCard files, HTML signatures, and 600 DPI PNG business cards are generated 100% locally inside your browser and WordPress site.
+
+= How do I display a digital business card on a public WordPress page? =
+Save your workspace in **AwoSign** and add the `[awosign]` shortcode (or `[awosign id="prof_1"]` for a specific team member) to any page, post, or widget.
+
+= Why does Gmail or Outlook block Base64 logos in email signatures? =
+Email clients often block inline `data:image/...` strings. Use the **WordPress Media Library Logo Picker** (`#logoUrl`) in AwoSign so your email signature uses a standard `https://...` image URL.
+
+== Screenshots ==
+1. Multi-Template HTML Email Signature Studio (Classic, Compact & Banner with QR Code + Media Library Logo Picker).
+2. Interactive Digital Contact Card & `[awosign]` Frontend Shortcode with vCard (.VCF) download and WhatsApp sharing.
+3. 600 DPI Print-Shop PNG Exporter & A4 10-Up Duplex Printable Business Card Studio (85x55mm + 3mm bleed & crop marks).
 
 == Source code ==
-The plugin includes the readable JavaScript and CSS source files that it runs:
-
-* assets/designer.js - AwoSign editor, previews, local exports and project import.
-* assets/designer.css - Editor and preview styles, scoped to the admin workspace.
-* assets/qrcode.js - Readable QR Code Generator 1.4.4 source by Kazuhiko Arase (MIT). Upstream: https://github.com/kazuhikoarase/qrcode-generator
-
-No build step, package manager, transpilation or minification is required. Edit these files directly; WordPress loads them as shipped. The QR library license is included in assets/qrcode-LICENSE.txt; AwoSign is GPL-2.0-or-later.
+The plugin ships with human-readable JavaScript and CSS directly (no build or minification step required):
+* `assets/designer.js` — AwoSign studio, live previews, QR/vCard/PNG exporters, and AJAX persistence.
+* `assets/designer.css` — Scoped studio and print layout styles.
+* `assets/qrcode.js` — QR Code Generator 1.4.4 by Kazuhiko Arase (MIT License, see `assets/qrcode-LICENSE.txt`).
 
 == Changelog ==
+= 1.3.0 =
+* Added 3 email signature layout templates (`classic` Left Logo, `compact` Horizontal Bar, and `banner` Corporate Header with QR).
+* Added WordPress Media Library Logo URL support (`#logoUrl` + `wp.media` picker) for full Gmail/Outlook compatibility.
+* Added one-click WhatsApp card sharing button in the digital card view and `[awosign]` frontend shortcode.
+
+= 1.2.0 =
+* Added multi-staff profile management under a shared company brand identity.
+* Added WordPress database storage (`wp_options` via `awosign_workspace_data_v1`) protected by `manage_options` capability and AJAX nonce, plus `uninstall.php` cleanup.
+* Added `[awosign]` frontend shortcode to embed interactive digital business cards with QR and VCF download.
+
+= 1.1.0 =
+* Added popup-free in-page `@media print` engine (`#as-print-host`) with A4 10-up (2x5) front/back duplex duplication and 600 DPI Print-Shop PNG export (2150x1441 px with 3 mm bleed and corner crop marks).
+* Added QR Code mode selector: Website/Custom URL or vCard 3.0 Contact QR.
+* Added Automatic (System/Page Day-Night), Light, and Dark theme selector.
+
 = 1.0.1 =
-Provide readable designer JavaScript and CSS directly and document the bundled source files.
+* Provide readable designer JavaScript and CSS directly and document the bundled source files.
 
 = 1.0.0 =
-Initial WordPress adaptation of the AwoSign V2.2 HTML design. Local QR, scoped assets, table signature export, project files and private admin access.
-
-== Third-party licenses ==
-assets/qrcode.js: QR Code Generator, Copyright (c) 2009 Kazuhiko Arase; MIT license, see assets/qrcode-LICENSE.txt. Other AwoSign code: GPL-2.0-or-later.
-
+* Initial WordPress release of the AwoSign studio.