From 3467598e83ed13d26c9b3aca5f77e45a15f4a3fb Mon Sep 17 00:00:00 2001
From: Erik <erikpersson0884@gmail.com>
Date: Sun, 8 Sep 2024 19:28:07 +0200
Subject: [PATCH] split css into print and screen and also included a padding
 option

---
 .github/workflows/pins.yml |  30 ----
 Dockerfile                 |  15 --
 css/print.css              |  40 ++++++
 css/screen.css             | 267 +++++++++++++++++++++++++++++++++++
 css/style.css              | 281 +++----------------------------------
 index.html                 |  57 +++++---
 js/script.js               | 149 ++++++++++++--------
 7 files changed, 459 insertions(+), 380 deletions(-)
 delete mode 100644 .github/workflows/pins.yml
 delete mode 100644 Dockerfile
 create mode 100644 css/print.css
 create mode 100644 css/screen.css

diff --git a/.github/workflows/pins.yml b/.github/workflows/pins.yml
deleted file mode 100644
index 6fc49c6..0000000
--- a/.github/workflows/pins.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-name: Pins
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-jobs:
-  build:
-    name: Build docker container
-    runs-on: ubuntu-latest
-
-    permissions:
-      packages: write
-
-    steps:
-      - uses: actions/checkout@v3
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-      - name: Login to GitHub Container Registry
-        if: ${{ github.ref == 'refs/heads/main' }}
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Build Docker image (and push on main)
-        uses: docker/build-push-action@v4.0.0
-        with:
-          push: ${{ github.ref == 'refs/heads/main' }}
-          tags: ghcr.io/cthit/pins:latest
diff --git a/Dockerfile b/Dockerfile
deleted file mode 100644
index f7848d2..0000000
--- a/Dockerfile
+++ /dev/null
@@ -1,15 +0,0 @@
-# Use the official Nginx base image
-FROM nginx:latest
-
-# Set the working directory to the Nginx default public directory
-WORKDIR /usr/share/nginx/html/
-
-# Copy your HTML, CSS, and JS files to the Nginx default public directory
-COPY index.html .
-COPY css/ css/
-COPY js/ js/
-COPY images/ images/
-
-
-# Expose port 80 for web traffic
-EXPOSE 80
diff --git a/css/print.css b/css/print.css
new file mode 100644
index 0000000..7e31bfe
--- /dev/null
+++ b/css/print.css
@@ -0,0 +1,40 @@
+
+.image-container, .imageRow {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--pinSpacing);
+}
+
+.imageRow {
+    flex-direction: row;
+}
+
+.pinImage {
+    width: var(--pinSize);
+    height: var(--pinSize);
+}
+
+.pinImageWithPadding {
+    width: var(--pinImageSize);
+    height: var(--pinImageSize);
+    padding: 5.5mm;
+    border: .5mm solid #000;
+    border-radius: var(--pinImageSize);
+}
+
+.pinImageWithBackground {
+    background-color: var(--printBackgroundColor);
+}
+
+
+@media print {
+    body {
+        background-color: var(--printBackgroundColor);
+    }
+
+    .mainContent, footer, #howTo, #showHowToButton {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/css/screen.css b/css/screen.css
new file mode 100644
index 0000000..22400a0
--- /dev/null
+++ b/css/screen.css
@@ -0,0 +1,267 @@
+
+@media only screen {
+    .showHowToButton {
+        background: #292929;
+
+        cursor: pointer;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+
+        width: 3rem;
+        height: 3rem;
+        outline: .1rem solid #09cdda;
+        border-radius: 100%;
+
+        transition: all .3s ease-in-out;
+    }
+
+    .showHowToButton:hover {
+        background: #4a4a4a;
+                
+        transition: all .3s ease-in-out;
+        transform: scale(1.1);
+    }
+
+    .howTo {
+        background: #292929;
+
+        display: flex;
+        flex-direction: column;
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        max-width: 28rem;
+        padding: 1rem;
+        outline: .1rem solid #09cdda;
+        border-radius: .4rem;
+    }
+
+    .howTo h1 {
+        padding-left: 2.5rem;
+    }
+
+    .howTo ul li {
+        margin-bottom: .9rem;
+    }
+
+
+    #imageContainer {
+        display: none;
+    }
+
+
+    body {
+        background-color: #4a4a4a;
+        color: #fff;
+
+        min-height: 100vh;
+        padding: 0;
+        margin: 0;
+    }
+
+    .mainContent {
+        background-color: #3d3c3c;
+        position: relative;
+
+        display: flex;
+        flex-direction: row;
+        /* gap: 1rem; */
+
+        width: max-content;
+        margin-inline: auto;
+    }
+
+    .mainContent>div {
+        border: .1rem solid #ddd;
+        padding: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        gap: 1rem;
+    }
+
+    .selectImageContainer {
+        flex: 5;
+
+        display: flex;
+        align-items: center;   
+
+        height: 100%;
+        padding: 20;
+        border: 0;
+        outline: var(--border-width) solid #ddd;
+        padding-right: 1rem;
+    }
+    
+        .previewImageContainer {
+            position: relative;
+            overflow: hidden;
+        }
+            
+            .previewImage {
+                background: #4a4a4a;
+
+                cursor: pointer;
+
+                height: 17rem;
+                width: 17rem;
+                border-radius: 100%;
+            }
+
+        .selectImageText {
+            font-size: 1.5rem;
+
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+
+            cursor: pointer;     
+        }
+
+        .selectImageText>img {
+            height: 2rem;
+
+            transition: all .3s ease-in-out;
+        }
+
+        .fileName {            
+            max-width: 15ch;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .selectImageText:hover >img {
+            background-color: #2f83bc;
+            border-radius: 100%;
+
+            transform: rotate(360deg); 
+        }
+
+
+
+    .option {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        text-wrap: nowrap;
+    }
+
+        .pinColorPicker {
+            background-color: var(--printBackgroundColor);
+            background-color: red;
+            display: flex;
+            flex-direction: row;
+
+            width: max-content;
+            padding: .15rem;
+        }
+
+        .pinColorText {
+            background: var(--printBackgroundColor);
+            cursor: pointer;
+
+            padding: .4rem;
+            border-radius: .4rem;
+            margin: 0;
+        }
+
+        .pinColorHex {
+            background: none;
+
+            width: 6ch;
+            border: none;
+            outline: none;
+            margin: 0;
+        }
+
+        .pinColor {
+            border: none !important;
+            outline: none;
+            z-index: -100;
+        }
+
+    
+    #generateTemplateButton {
+        background-color: #3498db;
+        color: #fff;
+
+        font-family: "Kode Mono";
+        font-size: 1.3rem;
+        font-weight: bold;
+        cursor: pointer;
+
+        padding: 10px;
+        border: .1rem solid #ddd;
+        margin-top: auto;
+
+        transition: all .1s ease-in-out;
+    }
+
+    #generateTemplateButton:active {
+        background-color: rgb(61, 50, 222);
+        transition: all .1s ease-in-out;
+    }
+
+    #imageNotSquareWarning {
+        background-color: rgb(137, 10, 10);
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: .5rem;
+
+        position: absolute;
+        top: -3rem;
+        right: 0;
+
+        box-sizing: border-box;
+        padding: .5rem;
+        width: 100%;
+
+        opacity: 1;
+        transition: top .5s ease-in-out;
+    }
+
+        #imageNotSquareWarning p {
+            margin: 0;
+        }
+    
+
+    footer {
+        font-size: 1rem;
+        text-align: center;
+        font-family: copperplate, sans-serif;
+
+        position: absolute;
+        bottom: 0;
+
+        width: 100vw;
+        height: 3rem;
+    }
+
+    footer img {
+        height: 1rem;
+        width: auto;
+        vertical-align: middle;
+    }
+
+    footer a {
+        color: aqua;
+        text-decoration: none;
+    }
+}
diff --git a/css/style.css b/css/style.css
index 5a6a4d5..b9fb34e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,7 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');
+
+
+
 :root {
-    --border-width: 1px;
-    --pinImage-size: 32mm;
-    --background-color-print: blue; /* Default background color for printing */
+    --pinSize: 46mm; /* There entire diameter of the pin. Including the image and the outer margin  */
+    --pinImageSize: 32mm; /* The inner diameter of the pin, where the image is */
+    --pinSpacing: 3mm; /* The space between the pins */
+    --printBackgroundColor: none; 
 
 }
 
@@ -18,9 +24,18 @@ body {
     display: none !important;
 }
 
+.disabled {
+    pointer-events: none;
+    opacity: .5;
+}
+
+.noShow {
+    width: 0;
+    height: 0;
+}
+
 .shadowbox {
     background: #00000078;
-    /* background: green; */
 
     display: flex;
     align-items: center;
@@ -36,262 +51,4 @@ body {
     z-index: 1000;
 }
 
-@media only screen {
-    .showHowToButton {
-        background: #292929;
-
-        cursor: pointer;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-
-        width: 3rem;
-        height: 3rem;
-        outline: .1rem solid #09cdda;
-        border-radius: 100%;
-
-        transition: all .3s ease-in-out;
-    }
-
-    .showHowToButton:hover {
-        background: #4a4a4a;
-                
-        transition: all .3s ease-in-out;
-        transform: scale(1.1);
-    }
-
-    .howTo {
-        background: #292929;
-
-        display: flex;
-        flex-direction: column;
-
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        max-width: 28rem;
-        padding: 1rem;
-        outline: .1rem solid #09cdda;
-        border-radius: .4rem;
-    }
-
-    .howTo h1 {
-        padding-left: 2.5rem;
-    }
-
-    .howTo ul li {
-        margin-bottom: .9rem;
-    }
-
-
-    #imageContainer {
-        display: none;
-    }
-
-
-    body {
-        background-color: #4a4a4a;
-        color: #fff;
-
-        height: 100vh;
-        padding: 0;
-        margin: 0;
-    }
-
-    #inputDiv {
-        background-color: #3d3c3c;
-        position: relative;
-
-        width: 25rem;
-        border: var(--border-width) solid #ddd;
-        margin-inline: auto;
-    }
-
-    #imageNotSquareWarning {
-        background-color: rgb(137, 10, 10);
-
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        position: absolute;
-        top: 0;
-        right: 0;
-
-        padding: .5rem;
-
-        opacity: 1;
-        transition: opacity .1s ease-in-out; /* Adjust the duration and easing as needed */
-    }
-      
-    #imageNotSquareWarning.hidden {
-    opacity: 0;
-    pointer-events: none; /* Optionally disable pointer events when hidden */
-    } 
-
-    #imageNotSquareWarning p {
-        margin: 0;
-        margin-right: .4rem;
-    }
-
-        #previewImageContainer {
-            text-align: center;
-            height: 19rem;
-            width: calc(100%-2*var(--border-width));
-            padding: 1rem;
-
-        }
-        
-            #previewImage {
-                background: #4a4a4a;
-
-                cursor: pointer;
-
-                height: 17rem;
-                width: 17rem;
-                border-radius: 100%;
-            }
-        
-        #controlDiv {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            height: 3rem;
-
-        }
-
-            .selectImageContainer {
-                flex: 5;
-
-                display: flex;
-                align-items: center;   
-
-                height: 100%;
-                padding: 20;
-                border: 0;
-                outline: var(--border-width) solid #ddd;
-                padding-right: 1rem;
-            }
-
-            body .selectImageContainer * {
-                cursor: pointer;
-            }
-
-                #selectImageButton {
-                    background: #585858;
-
-                    cursor: pointer;     
-
-                    height: 100%;
-                    margin-right: .7rem;
-
-                    transition: all .3s ease-in-out;
-                }
-
-                #selectImageButton:hover {
-                    background-color: #2f83bc;
-                    border-radius: 100%;
-
-                    transition: all .3s ease-in-out;
-                    transform: rotate(360deg); 
-                }
-
-                .fileName {
-                    cursor: default; 
-                }
-    
-            #generateTemplateButton {
-                flex: 2;
-
-                background-color: #3498db;
-                color: #fff;
-                cursor: pointer;
-
-                height: 100%;
-                /* min-width: 7rem; */
-                padding: 10px;
-                border: 0;
-                outline: var(--border-width) solid #ddd;
-
-                transition: all .1s ease-in-out;
-            }
-
-            #generateTemplateButton:active {
-                background-color: rgb(61, 50, 222);
-                transition: all .1s ease-in-out;
-            }
-
-    
-
-    footer {
-        /* background-color: purple; */
-        font-size: 1rem;
-        text-align: center;
-        font-family: copperplate, sans-serif;
-
-        position: absolute;
-        bottom: 0;
-
-        width: 100vw;
-        height: 3rem;
-
-    }
-
-    footer img {
-        height: 1rem;
-        width: auto;
-        vertical-align: middle;
-    }
-
-    footer a {
-        color: aqua;
-        text-decoration: none;
-    }
-}
-
-
-/* STYLE FOR THE PIN GRID */
-
-@media print {
-    body {
-        background-color: var(--background-color-print); /* Use the CSS variable for printing */
-    }
 
-    #inputDiv, footer, .howToShadowbox, .showHowToButton {
-        display: none;
-    }
-
-    .image-container {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: left;
-        margin-top: 20px;
-
-    }
-    
-    .imgRow {
-        width: min-content;
-        height: min-content;
-        display: block;
-    }
-    
-    .pinImage {
-        /* border: .5mm solid #ca1616; */
-        border: .5mm solid #000;
-
-        width: var(--pinImage-size);
-        height: var(--pinImage-size);
-        padding: 5.5mm;
-        border-radius: 50%;
-        margin: 1.5mm;
-    }
-}
diff --git a/index.html b/index.html
index 29b6fce..1cbd8b3 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <title>pins</title>
+    <link rel="icon" href="images/pride-flag-by-goken.png" type="image/x-icon">
+
+
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="A simple page to generate a pin template for EqualITs pinmaker">
@@ -10,16 +14,16 @@
     <meta name="theme-color" content="#000000">
 
     
-    <title>pins</title>
-    <link rel="icon" href="images/pride-flag-by-goken.png" type="image/x-icon">
+
     
     <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/screen.css">
+    <link rel="stylesheet" href="css/print.css">
 
     <script src="js/script.js" defer></script>
     <script src="js/howto.js" defer></script>
 
     <link rel="manifest" href="pwa/manifest.json">
-
 </head>
 <body>    
     <div id="showHowToButton" class="showHowToButton">
@@ -37,32 +41,51 @@ <h1>HowTo pins</h1>
         </aside>
     </div>
 
-    <div id="inputDiv">
-        <div id="imageNotSquareWarning" class="hidden">
-            <img id="logo" src="images/icons/warning.svg" alt="EqualIT logo" height="30">
-            <p>Image is not square</p>
-        </div>
+    <div class="mainContent">
+        <div id="previewImageContainer" class="previewImageContainer">
+            <div id="imageNotSquareWarning" class="imageNotSquareWarning">
+                <img id="logo" src="images/icons/warning.svg" alt="EqualIT logo" height="30">
+                <p>Image is not square</p>
+            </div>
+
+            <img id="previewImage" class="previewImage" src="images/icons/image.svg" alt="Image preview of pin image">
 
-        <div id="previewImageContainer">
-            <img id="previewImage" src="images/icons/image.svg" alt="Image preview of pin image">
+            <div class="selectImageText">
+                <img id="selectImageButton" src="images/icons/upload-white.svg" height="4" alt="Upload image">
+                <label for="selectImageInput" id="fileName" class="fileName">Select Image</label>
+            </div>
+            
+            <input id="selectImageInput" type="file" accept="image/*" class="hidden" />
         </div>
 
-        <div id="controlDiv">
-            <div class="selectImageContainer">
-                <input id="selectImageInput" type="file" accept="image/*" class="hidden" />
+        <div id="optionsDiv">
+            <h2>Options</h2>
+
+            <div class="option">
+                <label for="createPaddingCheckbox">Create Padding</label>
+                <input id="createPaddingCheckbox" type="checkbox" />
+            </div>
+            
+            <div id="pinIncludeBackground" class="option">
+                <label for="pinBackground">Include background: </label>
+                <input id="pinBackground" type="checkbox">
+            </div>
+
+            <div id="pinColorPickerOption" class="pinColorPickerOption option disabled">
+                <label for="pinColor">Background color: </label>
+                <p id="pinColorText" class="pinColorText">#000000</p>
 
-                <img id="selectImageButton" src="images/icons/upload-white.svg" height="4" alt="upload image">
-                <span id="fileName" class="fileName">No file chosen</span>
             </div>
+            <input id="pinColor" class="pinColor noShow" type="color" value="#000000"/>
+
 
             <button id="generateTemplateButton" class="noPrint">Generate Template</button>
         </div>
     </div>
 
-    <footer class="">            
+    <footer class="pageFooter">            
         Made as a gift from 
         <a href="https://github.com/erikpersson0884 ">
-            <!-- <img src="images/goken-pa-market.png" alt="Gökens mark" height="10"> -->
             Göken
         </a> 
         to 
diff --git a/js/script.js b/js/script.js
index 18abd7e..67503f4 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,35 +1,62 @@
 
-var generateTemplateButton = document.getElementById("generateTemplateButton")
-var selectImageInput = document.getElementById('selectImageInput');
-var imageContainer = document.getElementById('imageContainer');
-var previewImage = document.getElementById('previewImage');
-var imageNotSquareWarningDialog = document.getElementById('imageNotSquareWarning');
-var selectImageButton = document.getElementById('selectImageButton');
-var fileName = document.getElementById('fileName');
-var uglyDuckling = document.getElementById('uglyDuckling');
+const generateTemplateButton = document.getElementById("generateTemplateButton")
+const selectImageInput = document.getElementById('selectImageInput');
+const imageContainer = document.getElementById('imageContainer');
+const previewImage = document.getElementById('previewImage');
+const imageNotSquareWarningDialog = document.getElementById('imageNotSquareWarning');
+const selectImageButton = document.getElementById('selectImageButton');
+const fileName = document.getElementById('fileName');
+const createPaddingCheckbox = document.getElementById('createPaddingCheckbox');
+const IncludePinBackgroundCheckbox = document.getElementById('pinBackground');
+const pinColorPickerOption = document.getElementById('pinColorPickerOption');
+
+
+const pinColorText = document.getElementById('pinColorText');
+const pinColor = document.getElementById('pinColor');
 
 const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
+if (localStorage.getItem("includePinPadding")) {
+    createPaddingCheckbox.checked = localStorage.getItem("includePinPadding")
+}
+createPaddingCheckbox.addEventListener('change', () => {
+    localStorage.setItem("includePinPadding", createPaddingCheckbox.checked);
+});
 
+if (localStorage.getItem("pinBackground")) {
+    setPrintBackgroundColor(localStorage.getItem("pinBackground"));
+}
 
-function createImageGrid() {
-    imageContainer.innerHTML = ""; // Clear the image container
+
+if (localStorage.getItem("includePinBackground") && localStorage.getItem("includePinBackground") === "true") {
+    IncludePinBackgroundCheckbox.checked = (localStorage.getItem("includePinBackground"));
+    pinColorPickerOption.classList.remove('disabled');
+}
 
 
-    // Ensure an image is selected
-    if (imageIsUploaded()) {
-        var imageUrl = URL.createObjectURL(selectImageInput.files[0]);
+function createImageGrid() {
+    imageContainer.innerHTML = "";
+
+    if (isImageUploaded()) {
+        const imageUrl = URL.createObjectURL(selectImageInput.files[0]);
 
         // Create the grid of images
-        for (var row = 0; row < 6; row++) {
-            var imgRow = document.createElement("div");
+        for (let row = 0; row < 6; row++) {
+            const imgRow = document.createElement("div");
             imgRow.classList.add("imageRow");
 
-            for (var col = 0; col < 4; col++) {
-                var imgElement = document.createElement('img');
+            for (let col = 0; col < 4; col++) {
+                const imgElement = document.createElement('img');
                 imgElement.src = imageUrl;
                 imgElement.alt = 'Duplicated Image';
-                imgElement.classList.add('pinImage');
+                imgElement.classList = ['pinImage'];
+
+                if (createPaddingCheckbox.checked) {
+                    imgElement.classList.add('pinImageWithPadding');
+                }
+                if (IncludePinBackgroundCheckbox.checked) {
+                    imgElement.classList.add('pinImageWithBackground');
+                }
                 imgRow.appendChild(imgElement);
             }
             imageContainer.appendChild(imgRow);
@@ -41,43 +68,38 @@ function createImageGrid() {
 function uploadedImageChanged() {
     changeFileName();
     setImagePreview();
-    setImageBackground(); // Call the function to set the background color
 
     setTimeout(warnImageIsNotSquare, 100);
 };
 
 function changeFileName() {
-    var fileName = selectImageInput.files[0].name;
+    const fileName = selectImageInput.files[0].name;
     document.getElementById('fileName').innerHTML = fileName;
 };
 
 function warnImageIsNotSquare() {
     if (imageIsSquare()) {
-        console.log("image is square");
         disableWarning();
     } else{
-        console.log("image is not square");
         showWarning("Image is not square");
     }
 };
 
 function showWarning(message){
     imageNotSquareWarningDialog.querySelector('p').innerHTML = message;
-    imageNotSquareWarningDialog.classList.remove('hidden');
+    imageNotSquareWarningDialog.style.top = "0";
 
 }
 
 function disableWarning() {
-    imageNotSquareWarningDialog.classList.add('hidden');
+    imageNotSquareWarningDialog.style.top = "-3rem";
 }
 
 
 function imageIsSquare() {
-    var image = previewImage;
-    console.log(image.naturalWidth + " " + image.naturalHeight);
+    const image = previewImage;
 
     if (image.naturalWidth === image.naturalHeight) {
-        console.log("true");
         return true;
     }
     return false;
@@ -85,48 +107,26 @@ function imageIsSquare() {
 
 function setImagePreview() {
     if (selectImageInput.files.length > 0) {
-        var imageUrl = URL.createObjectURL(selectImageInput.files[0]);
+        const imageUrl = URL.createObjectURL(selectImageInput.files[0]);
         previewImage.src = imageUrl
 
         createImageGrid(); // has to be here. if placed before print, the grid will not load in time for print
     }
 }
 
-function setImageBackground() {
-    // Ensure an image is uploaded
-    if (imageIsUploaded()) {
-        var imageUrl = URL.createObjectURL(selectImageInput.files[0]);
-        var img = new Image();
-        img.onload = function() {
-            var canvas = document.createElement('canvas');
-            canvas.width = img.width;
-            canvas.height = img.height;
-            var ctx = canvas.getContext('2d');
-            ctx.drawImage(img, 0, 0);
-            var pixelData = ctx.getImageData(canvas.width - 1, 0, 1, 1).data;
-            var color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
-            
-            document.body.style.setProperty('--background-color-print', color);
-        };
-        img.src = imageUrl;
-    }
+function setPrintBackgroundColor(color) {
+    document.body.style.setProperty('--printBackgroundColor', color);
+    localStorage.setItem("pinBackground", color);
+    pinColorText.innerHTML = color;
 }
 
-
-
-
-function imageIsUploaded(){
+function isImageUploaded(){
     if (selectImageInput.files.length > 0) {
         return true;
     } 
-    console.log("FILE NOT UPLOADED");
     return false;
 }
 
-function checkIfSquare(width, height) {
-    return width === height;
-}
-
 selectImageButton.addEventListener("click", function () {
     selectImageInput.click();
 });
@@ -139,10 +139,47 @@ selectImageInput.addEventListener("change", uploadedImageChanged);
 
 
 generateTemplateButton.addEventListener("click", function(){
-    if (imageIsUploaded()){
+    if (isImageUploaded()){
         window.print();
     } else {
         alert("Please upload an image first.");}
 });
 
 
+
+
+
+IncludePinBackgroundCheckbox.addEventListener('change', function(){
+    setIncludePinBackground(IncludePinBackgroundCheckbox.checked);
+});
+
+function setIncludePinBackground(input){
+    if (input){
+        pinColorPickerOption.classList.remove('disabled');
+        previewImage.classList.add('pinImageWithBackground');
+        
+        localStorage.setItem("includePinBackground", true);
+    } else {
+        pinColorPickerOption.classList.add('disabled');
+        previewImage.classList.remove('pinImageWithBackground');
+        localStorage.setItem("includePinBackground", false);
+    }
+}
+
+pinColorText.addEventListener('click', () =>{
+    pinColor.click();
+});
+
+pinColor.addEventListener('input', () =>{
+    setPrintBackgroundColor(pinColor.value);
+});
+
+
+
+createPaddingCheckbox.addEventListener('change', function(){
+    if (createPaddingCheckbox.checked){
+        document.body.classList.add('padding');
+    } else {
+        document.body.classList.remove('padding');
+    }
+});
\ No newline at end of file