alex 2024-05-04 15:36:39 +02:00
parent d23b579246
commit dcddfd9b24
5 changed files with 171 additions and 201 deletions

View File

@ -1,239 +1,207 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Versandlabel</title>
<style>
:root {
--container-width: 580mm;
--container-height: 102mm;
}
@font-face { <head>
font-family: "Outfit"; <meta charset="UTF-8" />
src: url("../../groupsData/static/Outfit-VariableFont_wght.ttf"); <meta name="viewport" content="width=device-width, initial-scale=1.0" />
} <title>Versandlabel</title>
<style>
:root {
--container-width: 580mm;
--container-height: 102mm;
}
body { @font-face {
transform: scale(2); font-family: "Outfit";
transform-origin: 0 0; src: url("../../groupsData/static/Outfit-VariableFont_wght.ttf");
} }
body, body {
html { transform: scale(2);
margin: 0; transform-origin: 0 0;
padding: 0; }
font-size: 14px;
width: var(--container-width);
height: var(--container-height);
overflow: hidden;
}
p { body,
font-family: "Outfit"; html {
font-size: 17.5px; margin: 0;
color: black; padding: 0;
margin: 0; font-size: 14px;
} width: var(--container-width);
height: var(--container-height);
overflow: hidden;
}
.large-container { p {
width: var(--container-width); font-family: "Outfit";
/* Breite des Containers */ font-size: 17.5px;
height: var(--container-height); color: black;
/* Höhe des Containers */ margin: 0;
background-color: #80808000; }
/* Hintergrundfarbe */
display: flex;
align-items: center;
}
.container { .large-container {
/* Höhe des Containers */ width: var(--container-width);
height: var(--container-height); /* Breite des Containers */
} height: var(--container-height);
/* Höhe des Containers */
background-color: #80808000;
/* Hintergrundfarbe */
display: flex;
align-items: center;
}
.background { .container {
width: var(--container-width); /* Höhe des Containers */
height: var(--container-height); height: var(--container-height);
overflow: hidden; }
position: absolute;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
gap: 20mm;
z-index: -10;
opacity: 0.25;
}
.bgRotate { .background {
transform: rotate(-15deg) translate(0, 0mm); width: var(--container-width);
} height: var(--container-height);
overflow: hidden;
position: absolute;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
gap: 20mm;
z-index: -10;
opacity: 0.25;
}
.social_media { .bgRotate {
display: flex; transform: rotate(-15deg) translate(0, 0mm);
justify-content: center; }
align-items: center;
flex-direction: column;
width: 100%;
gap: 2mm;
}
.insta_logo, .social_media {
.tiktok_logo { display: flex;
width: 8mm; justify-content: center;
} align-items: center;
flex-direction: column;
width: 100%;
gap: 2mm;
}
.social_media_area { .insta_logo,
display: flex; .tiktok_logo {
justify-content: space-between; width: 8mm;
width: 100%; }
gap: 20mm;
}
.bgContainer { .social_media_area {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-items: center; width: 100%;
gap: 40mm; gap: 20mm;
flex-direction: column; }
width: 60mm;
}
.myCustomText { .bgContainer {
font-size: 20px; display: flex;
max-width: 80mm; justify-content: center;
white-space: nowrap; align-items: center;
/* Prevents text wrapping */ gap: 40mm;
overflow: hidden; flex-direction: column;
/* Optional: hides text that exceeds max-width */ width: 60mm;
text-overflow: ellipsis; }
/* Optional: adds '...' for overflowed text */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body> .myCustomText {
<div class="background"> font-size: 20px;
<div class="bgRotate"> max-width: 80mm;
<div class="bgContainer"> white-space: nowrap;
<div class="social_media_area"> /* Prevents text wrapping */
<div class="social_media"> overflow: hidden;
<p>Folge uns</p> /* Optional: hides text that exceeds max-width */
<img text-overflow: ellipsis;
class="insta_logo" /* Optional: adds '...' for overflowed text */
src="../../groupsData/shx-order-package-label/instagram-logo.png" position: absolute;
/> left: 50%;
<p>SHINNEX</p> top: 50%;
</div> transform: translate(-50%, -50%);
<div class="social_media"> }
<p>Folge uns</p> </style>
<img </head>
class="tiktok_logo"
src="../../groupsData/shx-order-package-label/tiktok-logo.png" <body>
/> <div class="background">
<p>SHINNEX</p> <div class="bgRotate">
</div> <div class="bgContainer">
<div class="social_media_area">
<div class="social_media">
<p>Folge uns</p>
<img class="insta_logo" src="../../groupsData/shx-order-package-label/instagram-logo.png" />
<p>SHINNEX</p>
</div> </div>
<div class="social_media">
<p>Folge uns</p>
<img class="tiktok_logo" src="../../groupsData/shx-order-package-label/tiktok-logo.png" />
<p>SHINNEX</p>
</div>
</div>
<p class="myCustomText">Von SHINNEX für dich</p> <p class="myCustomText">Von SHINNEX für dich</p>
<div class="social_media_area"> <div class="social_media_area">
<div class="social_media"> <div class="social_media">
<p>Folge uns</p> <p>Folge uns</p>
<img <img class="tiktok_logo" src="../../groupsData/shx-order-package-label/tiktok-logo.png" />
class="tiktok_logo" <p>SHINNEX</p>
src="../../groupsData/shx-order-package-label/tiktok-logo.png" </div>
/> <div class="social_media">
<p>SHINNEX</p> <p>Folge uns</p>
</div> <img class="insta_logo" src="../../groupsData/shx-order-package-label/instagram-logo.png" />
<div class="social_media"> <p>SHINNEX</p>
<p>Folge uns</p>
<img
class="insta_logo"
src="../../groupsData/shx-order-package-label/instagram-logo.png"
/>
<p>SHINNEX</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="large-container"> </div>
<div <div class="large-container">
class="container" <div class="container" style="width: 20mm; background-color: rgba(255, 166, 0, 0)"></div>
style="width: 20mm; background-color: rgba(255, 166, 0, 0)"
></div>
<img src="../../groupsData/shx-order-package-label/scissors.svg" /> <img src="../../groupsData/shx-order-package-label/scissors.svg" />
<div <div class="container" style="
class="container"
style="
width: 240mm; width: 240mm;
background-color: rgba(0, 0, 255, 0); background-color: rgba(0, 0, 255, 0);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
" ">
> <img src="../../groupsData/shx-order-package-label/stempel.png" width="400"
<img style="filter: drop-shadow(0 0 2mm #fff)" />
src="../../groupsData/shx-order-package-label/stempel.png" </div>
width="400"
style="filter: drop-shadow(0 0 2mm #fff)"
/>
</div>
<img src="../../groupsData/shx-order-package-label/scissors.svg" /> <img src="../../groupsData/shx-order-package-label/scissors.svg" />
<div <div class="container" style="width: 40mm; background-color: rgba(255, 192, 203, 0)"></div>
class="container"
style="width: 40mm; background-color: rgba(255, 192, 203, 0)"
></div>
<div <div class="container" style="
class="container"
style="
width: 240mm; width: 240mm;
background-color: rgba(128, 0, 128, 0); background-color: rgba(128, 0, 128, 0);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
" ">
> <img src="label.png" style="height: 100%; box-shadow: 0 0 15mm 15mm #fff" />
<img
src="label.png"
width="760"
style="box-shadow: 0 0 15mm 15mm #fff"
/>
</div>
<div
class="container"
style="width: 40mm; background-color: rgba(255, 255, 0, 0)"
></div>
</div> </div>
<script> <div class="container" style="width: 40mm; background-color: rgba(255, 255, 0, 0)"></div>
const name = "{{CUSTOMER_FIRST_NAME}}"; </div>
document.querySelector(".myCustomText").innerHTML = <script>
`Von SHINNEX für ` + name; const name = "{{CUSTOMER_FIRST_NAME}}";
let bg = document.querySelector(".background"); document.querySelector(".myCustomText").innerHTML =
`Von SHINNEX für ` + name;
let bgRotate = document.querySelector(".background .bgRotate"); let bg = document.querySelector(".background");
// clone bgRotate often enough to fill the screen with for loop let bgRotate = document.querySelector(".background .bgRotate");
for (let i = 0; i < 20; i++) {
let clone = bgRotate.cloneNode(true); // clone bgRotate often enough to fill the screen with for loop
bg.appendChild(clone); for (let i = 0; i < 20; i++) {
} let clone = bgRotate.cloneNode(true);
</script> bg.appendChild(clone);
</body> }
</html> </script>
</body>
</html>

View File

@ -91,6 +91,6 @@ if __name__ == "__main__":
replacePlaceholder() replacePlaceholder()
createHighDpiPng("index.html", "output.png") createHighDpiPng("index.html", "Versandlabel.png")
utils.clear_workspace(["index.html", "label.png"]) utils.clear_workspace(["index.html", "label.png"])

View File

@ -28,7 +28,7 @@
{ {
"parameterName": "productUrl", "parameterName": "productUrl",
"type": "text", "type": "text",
"displayName": "URL vom Produkt (Shopify) (z. B. https://shinnex.de/products/lizard) (für Direktweiterleitung 5 € Gutschein QR-Code)" "displayName": "URL vom Produkt (Shopify) (z. B. https://shinnex.de/products/gizmo) (für Direktweiterleitung 5 € Gutschein QR-Code)"
}, },
{ {
"parameterName": "discountCode", "parameterName": "discountCode",

View File

@ -114,8 +114,10 @@ def CreateCrmActivityLink(customerId):
print(f"CreateCrmActivityLink req error {response.status_code}") print(f"CreateCrmActivityLink req error {response.status_code}")
sys.exit(1) sys.exit(1)
req("10 % Gutschein", "https://shinnex.de") utm = "?utm_source=order&utm_medium=qrcode&utm_campaign=ordervouchercodes&utm_content=reedemvouchercode"
req("5 € Gutschein", productUrl)
req("10 % Gutschein", f"https://shinnex.de/discount/{discountCode}{utm}")
req("5 € Gutschein", f"{productUrl}{utm}")
req("10 € Gutschein", f"https://docs.google.com/forms/d/e/1FAIpQLSd2GXFbidzazuQnh_Lf2mgeA1npuwHkWjsdmjrxDmSkDQTfew/viewform?entry.347359844={orderId}") req("10 € Gutschein", f"https://docs.google.com/forms/d/e/1FAIpQLSd2GXFbidzazuQnh_Lf2mgeA1npuwHkWjsdmjrxDmSkDQTfew/viewform?entry.347359844={orderId}")

View File

@ -15,7 +15,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 55%; background-size: 55%;
opacity: 0.05; opacity: 0.1;
} }
.content { .content {