Custom Tees - Design Your Own Apparel<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n body {\r\n font-family: 'Roboto', Arial, sans-serif;\r\n line-height: 1.6;\r\n color: #333;\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f9f9f9;\r\n }\r\n .container {\r\n width: 90%;\r\n max-width: 1200px;\r\n margin: auto;\r\n overflow: hidden;\r\n padding: 20px;\r\n }\r\n header {\r\n background: #000000;\r\n color: #ffffff;\r\n padding: 20px 0;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n position: relative;\r\n }\r\n .logo {\r\n float: left;\r\n font-size: 24px;\r\n font-weight: bold;\r\n }\r\n .hamburger {\r\n display: block;\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n z-index: 2;\r\n cursor: pointer;\r\n }\r\n .hamburger div {\r\n width: 30px;\r\n height: 3px;\r\n background-color: #ffffff;\r\n margin: 6px 0;\r\n transition: 0.4s;\r\n }\r\n .nav-menu {\r\n position: fixed;\r\n right: -300px;\r\n top: 0;\r\n width: 300px;\r\n height: 100%;\r\n background-color: #000000;\r\n padding-top: 60px;\r\n transition: 0.4s;\r\n }\r\n .nav-menu.active {\r\n right: 0;\r\n }\r\n .nav-menu a {\r\n display: block;\r\n color: #ffffff;\r\n text-decoration: none;\r\n padding: 15px 20px;\r\n font-size: 18px;\r\n }\r\n .nav-menu a:hover {\r\n background-color: #333333;\r\n }\r\n .btn {\r\n display: inline-block;\r\n background: #000000;\r\n color: #ffffff;\r\n padding: 12px 24px;\r\n border: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n font-size: 18px;\r\n transition: 0.3s;\r\n border-radius: 5px;\r\n }\r\n .btn:hover {\r\n background: #333333;\r\n }\r\n #showcase {\r\n min-height: 500px;\r\n background: url('https:\/\/images.unsplash.com\/photo-1503342394128-c104d54dba01?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center\/cover;\r\n text-align: center;\r\n color: #ffffff;\r\n position: relative;\r\n }\r\n #showcase::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5);\r\n }\r\n #showcase .container {\r\n position: relative;\r\n z-index: 1;\r\n padding-top: 150px;\r\n }\r\n #showcase h1 {\r\n font-size: 48px;\r\n margin-bottom: 20px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\r\n }\r\n #showcase p {\r\n font-size: 24px;\r\n margin-bottom: 30px;\r\n text-shadow: 1px 1px 2px rgba(0,0,0,0.5);\r\n }\r\n #showcase .btn {\r\n font-size: 20px;\r\n padding: 15px 30px;\r\n background-color: #ff6b6b;\r\n transition: all 0.3s ease;\r\n }\r\n #showcase .btn:hover {\r\n background-color: #ff4757;\r\n transform: translateY(-3px);\r\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\r\n }\r\n #designer {\r\n margin-top: 40px;\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n }\r\n #tshirt-view {\r\n width: 60%;\r\n background: #fff;\r\n padding: 30px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\r\n }\r\n #tshirt-preview {\r\n width: 100%;\r\n height: 500px;\r\n background: url('https:\/\/images.unsplash.com\/photo-1521572163474-6864f9cf17ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80') no-repeat center center\/cover;\r\n position: relative;\r\n cursor: move;\r\n }\r\n #uploaded-image {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n max-width: 200px;\r\n max-height: 200px;\r\n cursor: move;\r\n }\r\n #customization {\r\n width: 35%;\r\n }\r\n #file-upload {\r\n margin-bottom: 20px;\r\n }\r\n .custom-file-upload {\r\n border: 2px solid #000;\r\n display: inline-block;\r\n padding: 10px 20px;\r\n cursor: pointer;\r\n background: #fff;\r\n color: #000;\r\n border-radius: 5px;\r\n transition: all 0.3s;\r\n }\r\n .custom-file-upload:hover {\r\n background: #000;\r\n color: #fff;\r\n }\r\n #image-upload {\r\n display: none;\r\n }\r\n select {\r\n width: 100%;\r\n padding: 10px;\r\n margin-bottom: 20px;\r\n border: 2px solid #000;\r\n border-radius: 5px;\r\n background: #fff;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n background-image: url('data:image\/svg+xml;utf8,<svg fill=\"black\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7 10l5 5 5-5z\"\/><path d=\"M0 0h24v24H0z\" fill=\"none\"\/><\/svg>');\r\n background-repeat: no-repeat;\r\n background-position-x: 98%;\r\n background-position-y: 50%;\r\n }\r\n #image-controls {\r\n margin-top: 20px;\r\n }\r\n #image-controls label {\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n #image-controls input[type=\"range\"] {\r\n width: 100%;\r\n margin-bottom: 15px;\r\n }\r\n #how-it-works {\r\n background-color: #ffffff;\r\n padding: 50px 0;\r\n margin-top: 50px;\r\n }\r\n .steps {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n text-align: center;\r\n }\r\n .step {\r\n flex: 1;\r\n padding: 20px;\r\n margin: 10px;\r\n background-color: #f0f0f0;\r\n border-radius: 10px;\r\n transition: all 0.3s ease;\r\n }\r\n .step:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n }\r\n .step i {\r\n font-size: 48px;\r\n margin-bottom: 20px;\r\n color: #000000;\r\n }\r\n .step h3 {\r\n margin-bottom: 15px;\r\n }\r\n footer {\r\n padding: 20px;\r\n background-color: #000000;\r\n color: #ffffff;\r\n text-align: center;\r\n bottom: 0;\r\n width: 100%;\r\n margin-top: 50px;\r\n }\r\n .price {\r\n font-size: 24px;\r\n margin-top: 20px;\r\n margin-bottom: 20px;\r\n }\r\n .price .original {\r\n text-decoration: line-through;\r\n color: #999;\r\n margin-right: 10px;\r\n }\r\n .price .sale {\r\n color: #ff4757;\r\n font-weight: bold;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <div class=\"container\">\r\n <div class=\"logo\">Custom Tees<\/div>\r\n <div class=\"hamburger\" onclick=\"toggleMenu()\">\r\n <div><\/div>\r\n <div><\/div>\r\n <div><\/div>\r\n <\/div>\r\n <nav class=\"nav-menu\">\r\n <a href=\"https:\/\/bjorlie.net\/apparel\">Home<\/a>\r\n <a href=\"https:\/\/bjorlie.net\/apparel\/about\">About<\/a>\r\n <a href=\"https:\/\/bjorlie.net\/apparel\/gallery\">Gallery<\/a>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"showcase\">\r\n <div class=\"container\">\r\n <h1>Design Your Own Custom Tee<\/h1>\r\n <p>Unleash your creativity and make a statement with our personalized t-shirts<\/p>\r\n <a href=\"#designer\" class=\"btn\">Start Designing Now<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"designer\">\r\n <div id=\"tshirt-view\">\r\n <div id=\"tshirt-preview\" style=\"background: url('https:\/\/bjorlie.net\/apparel\/wp-content\/uploads\/2024\/07\/whiteteemockup.jpg') no-repeat center center\/cover;\">\r\n <img data-recalc-dims=\"1\" decoding=\"async\" id=\"uploaded-image\" src=\"https:\/\/i0.wp.com\/bjorlie.net\/apparel\/wp-content\/uploads\/2024\/07\/uploadimage.png?w=640&ssl=1\" alt=\"Your design here\" title=\"\">\r\n<\/div>\r\n <\/div>\r\n <div id=\"customization\">\r\n <h2>Customize Your Tee<\/h2>\r\n <div id=\"file-upload\">\r\n <h3>Upload Your Image<\/h3>\r\n <label for=\"image-upload\" class=\"custom-file-upload\">\r\n Choose File\r\n <\/label>\r\n <input type=\"file\" id=\"image-upload\" accept=\"image\/*\">\r\n <\/div>\r\n <div id=\"size-selector\">\r\n <h3>Select Size<\/h3>\r\n <select id=\"tshirt-size\">\r\n <option value=\"s\">Small<\/option>\r\n <option value=\"m\">Medium<\/option>\r\n <option value=\"l\">Large<\/option>\r\n <option value=\"xl\">X-Large<\/option>\r\n <option value=\"xxl\">XX-Large<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"image-controls\">\r\n <h3>Adjust Image<\/h3>\r\n <label for=\"scale\">Scale:<\/label>\r\n <input type=\"range\" id=\"scale\" min=\"0.1\" max=\"2\" step=\"0.1\" value=\"1\">\r\n <label for=\"rotation\">Rotation:<\/label>\r\n <input type=\"range\" id=\"rotation\" min=\"0\" max=\"360\" step=\"1\" value=\"0\">\r\n <\/div>\r\n <div class=\"price\">\r\n <span class=\"original\">$35<\/span>\r\n <span class=\"sale\">$25<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/bjorlie.net\/apparel\/index.php\/cart\/\" id=\"add-to-cart\" class=\"btn\">Add to Cart<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"how-it-works\">\r\n <div class=\"container\">\r\n <h2>How It Works<\/h2>\r\n <div class=\"steps\">\r\n <div class=\"step\">\r\n <i class=\"fas fa-upload\"><\/i>\r\n <h3>1. Upload Your Image<\/h3>\r\n <p>Choose a high-quality PNG image with transparency for best results.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <i class=\"fas fa-sliders-h\"><\/i>\r\n <h3>2. Customize Your Design<\/h3>\r\n <p>Adjust the size, position, and rotation to perfect your t-shirt design.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <i class=\"fas fa-shopping-cart\"><\/i>\r\n <h3>3. Add to Cart<\/h3>\r\n <p>Once you're happy with your design, add it to your cart and checkout!<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <p>\u00a9 2023 Custom Tees. All rights reserved.<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n function toggleMenu() {\r\n document.querySelector('.nav-menu').classList.toggle('active');\r\n }\r\n\r\n document.getElementById('image-upload').addEventListener('change', function(e) {\r\n var file = e.target.files[0];\r\n var reader = new FileReader();\r\n \r\n reader.onloadend = function() {\r\n document.getElementById('uploaded-image').src = reader.result;\r\n document.getElementById('uploaded-image').style.display = 'block';\r\n }\r\n \r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n });\r\n\r\n const image = document.getElementById('uploaded-image');\r\n const scaleControl = document.getElementById('scale');\r\n const rotationControl = document.getElementById('rotation');\r\n\r\n function updateImageTransform() {\r\n const scale = scaleControl.value;\r\n const rotation = rotationControl.value;\r\n const transform = `translate(-50%, -50%) scale(${scale}) rotate(${rotation}deg)`;\r\n image.style.transform = transform;\r\n }\r\n\r\n scaleControl.addEventListener('input', updateImageTransform);\r\n rotationControl.addEventListener('input', updateImageTransform);\r\n\r\n \/\/ Drag and drop functionality\r\n let isDragging = false;\r\n let startX, startY;\r\n\r\n image.addEventListener('mousedown', startDragging);\r\n document.addEventListener('mousemove', drag);\r\n document.addEventListener('mouseup', stopDragging);\r\n\r\n image.addEventListener('touchstart', startDragging);\r\n document.addEventListener('touchmove', drag);\r\n document.addEventListener('touchend', stopDragging);\r\n\r\n function startDragging(e) {\r\n isDragging = true;\r\n startX = e.clientX || e.touches[0].clientX;\r\n startY = e.clientY || e.touches[0].clientY;\r\n }\r\n\r\n function drag(e) {\r\n if (!isDragging) return;\r\n\r\n e.preventDefault();\r\n\r\n const clientX = e.clientX || e.touches[0].clientX;\r\n const clientY = e.clientY || e.touches[0].clientY;\r\n\r\n const dx = clientX - startX;\r\n const dy = clientY - startY;\r\n\r\n const transform = window.getComputedStyle(image).getPropertyValue('transform');\r\n const matrix = new DOMMatrix(transform);\r\n const translateX = matrix.m41 + dx;\r\n const translateY = matrix.m42 + dy;\r\n\r\n image.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleControl.value}) rotate(${rotationControl.value}deg)`;\r\n\r\n startX = clientX;\r\n startY = clientY;\r\n }\r\n\r\n function stopDragging() {\r\n isDragging = false;\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Custom Tees – Design Your Own Apparel Custom Tees Home About Gallery Design Your Own Custom Tee Unleash your creativity and make a statement with our personalized t-shirts Start Designing Now Customize Your Tee Upload Your Image Choose File Select Size SmallMediumLargeX-LargeXX-Large Adjust Image Scale: Rotation: $35 $25 Add to Cart How It Works 1. Upload Your Image Choose a high-quality PNG image with transparency for best results. 2. Customize Your Design Adjust the size, position, and rotation to perfect your t-shirt design. 3. Add to Cart Once you’re happy with your design, add it to your cart and checkout! \u00a9 2023 Custom Tees. All rights reserved.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","content-type":"","two_page_speed":[],"footnotes":""},"class_list":["post-13837","page","type-page","status-publish","hentry","alm-qv-enable","almaira-woo-hover-swap","almaira-single-product-tab-horizontal","almaira-shadow-0","almaira-shadow-hover-0"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/pages\/13837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/comments?post=13837"}],"version-history":[{"count":13,"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/pages\/13837\/revisions"}],"predecessor-version":[{"id":13856,"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/pages\/13837\/revisions\/13856"}],"wp:attachment":[{"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/media?parent=13837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n Custom Tees - Design Your Own Apparel<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n body {\r\n font-family: 'Roboto', Arial, sans-serif;\r\n line-height: 1.6;\r\n color: #333;\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f9f9f9;\r\n }\r\n .container {\r\n width: 90%;\r\n max-width: 1200px;\r\n margin: auto;\r\n overflow: hidden;\r\n padding: 20px;\r\n }\r\n header {\r\n background: #000000;\r\n color: #ffffff;\r\n padding: 20px 0;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n position: relative;\r\n }\r\n .logo {\r\n float: left;\r\n font-size: 24px;\r\n font-weight: bold;\r\n }\r\n .hamburger {\r\n display: block;\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n z-index: 2;\r\n cursor: pointer;\r\n }\r\n .hamburger div {\r\n width: 30px;\r\n height: 3px;\r\n background-color: #ffffff;\r\n margin: 6px 0;\r\n transition: 0.4s;\r\n }\r\n .nav-menu {\r\n position: fixed;\r\n right: -300px;\r\n top: 0;\r\n width: 300px;\r\n height: 100%;\r\n background-color: #000000;\r\n padding-top: 60px;\r\n transition: 0.4s;\r\n }\r\n .nav-menu.active {\r\n right: 0;\r\n }\r\n .nav-menu a {\r\n display: block;\r\n color: #ffffff;\r\n text-decoration: none;\r\n padding: 15px 20px;\r\n font-size: 18px;\r\n }\r\n .nav-menu a:hover {\r\n background-color: #333333;\r\n }\r\n .btn {\r\n display: inline-block;\r\n background: #000000;\r\n color: #ffffff;\r\n padding: 12px 24px;\r\n border: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n font-size: 18px;\r\n transition: 0.3s;\r\n border-radius: 5px;\r\n }\r\n .btn:hover {\r\n background: #333333;\r\n }\r\n #showcase {\r\n min-height: 500px;\r\n background: url('https:\/\/images.unsplash.com\/photo-1503342394128-c104d54dba01?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center\/cover;\r\n text-align: center;\r\n color: #ffffff;\r\n position: relative;\r\n }\r\n #showcase::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5);\r\n }\r\n #showcase .container {\r\n position: relative;\r\n z-index: 1;\r\n padding-top: 150px;\r\n }\r\n #showcase h1 {\r\n font-size: 48px;\r\n margin-bottom: 20px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\r\n }\r\n #showcase p {\r\n font-size: 24px;\r\n margin-bottom: 30px;\r\n text-shadow: 1px 1px 2px rgba(0,0,0,0.5);\r\n }\r\n #showcase .btn {\r\n font-size: 20px;\r\n padding: 15px 30px;\r\n background-color: #ff6b6b;\r\n transition: all 0.3s ease;\r\n }\r\n #showcase .btn:hover {\r\n background-color: #ff4757;\r\n transform: translateY(-3px);\r\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\r\n }\r\n #designer {\r\n margin-top: 40px;\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n }\r\n #tshirt-view {\r\n width: 60%;\r\n background: #fff;\r\n padding: 30px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 20px rgba(0,0,0,0.1);\r\n }\r\n #tshirt-preview {\r\n width: 100%;\r\n height: 500px;\r\n background: url('https:\/\/images.unsplash.com\/photo-1521572163474-6864f9cf17ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80') no-repeat center center\/cover;\r\n position: relative;\r\n cursor: move;\r\n }\r\n #uploaded-image {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n max-width: 200px;\r\n max-height: 200px;\r\n cursor: move;\r\n }\r\n #customization {\r\n width: 35%;\r\n }\r\n #file-upload {\r\n margin-bottom: 20px;\r\n }\r\n .custom-file-upload {\r\n border: 2px solid #000;\r\n display: inline-block;\r\n padding: 10px 20px;\r\n cursor: pointer;\r\n background: #fff;\r\n color: #000;\r\n border-radius: 5px;\r\n transition: all 0.3s;\r\n }\r\n .custom-file-upload:hover {\r\n background: #000;\r\n color: #fff;\r\n }\r\n #image-upload {\r\n display: none;\r\n }\r\n select {\r\n width: 100%;\r\n padding: 10px;\r\n margin-bottom: 20px;\r\n border: 2px solid #000;\r\n border-radius: 5px;\r\n background: #fff;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n background-image: url('data:image\/svg+xml;utf8,<svg fill=\"black\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M7 10l5 5 5-5z\"\/><path d=\"M0 0h24v24H0z\" fill=\"none\"\/><\/svg>');\r\n background-repeat: no-repeat;\r\n background-position-x: 98%;\r\n background-position-y: 50%;\r\n }\r\n #image-controls {\r\n margin-top: 20px;\r\n }\r\n #image-controls label {\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n #image-controls input[type=\"range\"] {\r\n width: 100%;\r\n margin-bottom: 15px;\r\n }\r\n #how-it-works {\r\n background-color: #ffffff;\r\n padding: 50px 0;\r\n margin-top: 50px;\r\n }\r\n .steps {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n text-align: center;\r\n }\r\n .step {\r\n flex: 1;\r\n padding: 20px;\r\n margin: 10px;\r\n background-color: #f0f0f0;\r\n border-radius: 10px;\r\n transition: all 0.3s ease;\r\n }\r\n .step:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n }\r\n .step i {\r\n font-size: 48px;\r\n margin-bottom: 20px;\r\n color: #000000;\r\n }\r\n .step h3 {\r\n margin-bottom: 15px;\r\n }\r\n footer {\r\n padding: 20px;\r\n background-color: #000000;\r\n color: #ffffff;\r\n text-align: center;\r\n bottom: 0;\r\n width: 100%;\r\n margin-top: 50px;\r\n }\r\n .price {\r\n font-size: 24px;\r\n margin-top: 20px;\r\n margin-bottom: 20px;\r\n }\r\n .price .original {\r\n text-decoration: line-through;\r\n color: #999;\r\n margin-right: 10px;\r\n }\r\n .price .sale {\r\n color: #ff4757;\r\n font-weight: bold;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <div class=\"container\">\r\n <div class=\"logo\">Custom Tees<\/div>\r\n <div class=\"hamburger\" onclick=\"toggleMenu()\">\r\n <div><\/div>\r\n <div><\/div>\r\n <div><\/div>\r\n <\/div>\r\n <nav class=\"nav-menu\">\r\n <a href=\"https:\/\/bjorlie.net\/apparel\">Home<\/a>\r\n <a href=\"https:\/\/bjorlie.net\/apparel\/about\">About<\/a>\r\n <a href=\"https:\/\/bjorlie.net\/apparel\/gallery\">Gallery<\/a>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"showcase\">\r\n <div class=\"container\">\r\n <h1>Design Your Own Custom Tee<\/h1>\r\n <p>Unleash your creativity and make a statement with our personalized t-shirts<\/p>\r\n <a href=\"#designer\" class=\"btn\">Start Designing Now<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"designer\">\r\n <div id=\"tshirt-view\">\r\n <div id=\"tshirt-preview\" style=\"background: url('https:\/\/bjorlie.net\/apparel\/wp-content\/uploads\/2024\/07\/whiteteemockup.jpg') no-repeat center center\/cover;\">\r\n <img data-recalc-dims=\"1\" decoding=\"async\" id=\"uploaded-image\" src=\"https:\/\/i0.wp.com\/bjorlie.net\/apparel\/wp-content\/uploads\/2024\/07\/uploadimage.png?w=640&ssl=1\" alt=\"Your design here\" title=\"\">\r\n<\/div>\r\n <\/div>\r\n <div id=\"customization\">\r\n <h2>Customize Your Tee<\/h2>\r\n <div id=\"file-upload\">\r\n <h3>Upload Your Image<\/h3>\r\n <label for=\"image-upload\" class=\"custom-file-upload\">\r\n Choose File\r\n <\/label>\r\n <input type=\"file\" id=\"image-upload\" accept=\"image\/*\">\r\n <\/div>\r\n <div id=\"size-selector\">\r\n <h3>Select Size<\/h3>\r\n <select id=\"tshirt-size\">\r\n <option value=\"s\">Small<\/option>\r\n <option value=\"m\">Medium<\/option>\r\n <option value=\"l\">Large<\/option>\r\n <option value=\"xl\">X-Large<\/option>\r\n <option value=\"xxl\">XX-Large<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"image-controls\">\r\n <h3>Adjust Image<\/h3>\r\n <label for=\"scale\">Scale:<\/label>\r\n <input type=\"range\" id=\"scale\" min=\"0.1\" max=\"2\" step=\"0.1\" value=\"1\">\r\n <label for=\"rotation\">Rotation:<\/label>\r\n <input type=\"range\" id=\"rotation\" min=\"0\" max=\"360\" step=\"1\" value=\"0\">\r\n <\/div>\r\n <div class=\"price\">\r\n <span class=\"original\">$35<\/span>\r\n <span class=\"sale\">$25<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/bjorlie.net\/apparel\/index.php\/cart\/\" id=\"add-to-cart\" class=\"btn\">Add to Cart<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"how-it-works\">\r\n <div class=\"container\">\r\n <h2>How It Works<\/h2>\r\n <div class=\"steps\">\r\n <div class=\"step\">\r\n <i class=\"fas fa-upload\"><\/i>\r\n <h3>1. Upload Your Image<\/h3>\r\n <p>Choose a high-quality PNG image with transparency for best results.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <i class=\"fas fa-sliders-h\"><\/i>\r\n <h3>2. Customize Your Design<\/h3>\r\n <p>Adjust the size, position, and rotation to perfect your t-shirt design.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <i class=\"fas fa-shopping-cart\"><\/i>\r\n <h3>3. Add to Cart<\/h3>\r\n <p>Once you're happy with your design, add it to your cart and checkout!<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <p>\u00a9 2023 Custom Tees. All rights reserved.<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n function toggleMenu() {\r\n document.querySelector('.nav-menu').classList.toggle('active');\r\n }\r\n\r\n document.getElementById('image-upload').addEventListener('change', function(e) {\r\n var file = e.target.files[0];\r\n var reader = new FileReader();\r\n \r\n reader.onloadend = function() {\r\n document.getElementById('uploaded-image').src = reader.result;\r\n document.getElementById('uploaded-image').style.display = 'block';\r\n }\r\n \r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n });\r\n\r\n const image = document.getElementById('uploaded-image');\r\n const scaleControl = document.getElementById('scale');\r\n const rotationControl = document.getElementById('rotation');\r\n\r\n function updateImageTransform() {\r\n const scale = scaleControl.value;\r\n const rotation = rotationControl.value;\r\n const transform = `translate(-50%, -50%) scale(${scale}) rotate(${rotation}deg)`;\r\n image.style.transform = transform;\r\n }\r\n\r\n scaleControl.addEventListener('input', updateImageTransform);\r\n rotationControl.addEventListener('input', updateImageTransform);\r\n\r\n \/\/ Drag and drop functionality\r\n let isDragging = false;\r\n let startX, startY;\r\n\r\n image.addEventListener('mousedown', startDragging);\r\n document.addEventListener('mousemove', drag);\r\n document.addEventListener('mouseup', stopDragging);\r\n\r\n image.addEventListener('touchstart', startDragging);\r\n document.addEventListener('touchmove', drag);\r\n document.addEventListener('touchend', stopDragging);\r\n\r\n function startDragging(e) {\r\n isDragging = true;\r\n startX = e.clientX || e.touches[0].clientX;\r\n startY = e.clientY || e.touches[0].clientY;\r\n }\r\n\r\n function drag(e) {\r\n if (!isDragging) return;\r\n\r\n e.preventDefault();\r\n\r\n const clientX = e.clientX || e.touches[0].clientX;\r\n const clientY = e.clientY || e.touches[0].clientY;\r\n\r\n const dx = clientX - startX;\r\n const dy = clientY - startY;\r\n\r\n const transform = window.getComputedStyle(image).getPropertyValue('transform');\r\n const matrix = new DOMMatrix(transform);\r\n const translateX = matrix.m41 + dx;\r\n const translateY = matrix.m42 + dy;\r\n\r\n image.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleControl.value}) rotate(${rotationControl.value}deg)`;\r\n\r\n startX = clientX;\r\n startY = clientY;\r\n }\r\n\r\n function stopDragging() {\r\n isDragging = false;\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Custom Tees – Design Your Own Apparel Custom Tees Home About Gallery Design Your Own Custom Tee Unleash your creativity and make a statement with our personalized t-shirts Start Designing Now Customize Your Tee Upload Your Image Choose File Select Size SmallMediumLargeX-LargeXX-Large Adjust Image Scale: Rotation: $35 $25 Add to Cart How It Works 1. Upload Your Image Choose a high-quality PNG image with transparency for best results. 2. Customize Your Design Adjust the size, position, and rotation to perfect your t-shirt design. 3. Add to Cart Once you’re happy with your design, add it to your cart and checkout! \u00a9 2023 Custom Tees. All rights reserved.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","content-type":"","two_page_speed":[],"footnotes":""},"class_list":["post-13837","page","type-page","status-publish","hentry","alm-qv-enable","almaira-woo-hover-swap","almaira-single-product-tab-horizontal","almaira-shadow-0","almaira-shadow-hover-0"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/pages\/13837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/comments?post=13837"}],"version-history":[{"count":13,"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/pages\/13837\/revisions"}],"predecessor-version":[{"id":13856,"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/pages\/13837\/revisions\/13856"}],"wp:attachment":[{"href":"https:\/\/bjorlie.net\/apparel\/index.php\/wp-json\/wp\/v2\/media?parent=13837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}