Copy Elements with Styles

Source Elements

Demo Component 1

This is a paragraph with some special text.

\n Another nested element.\n

A Gradient Card

This component uses a background gradient and a box shadow for a unique look.

Rounded Button Style

A completely different aesthetic.

\n \n

This component uses flexbox for its layout, with a header, body, and a button in the footer.

\n \n

Copied Elements

\n \n

\n\n \n\n",[],[186],{"_102":195,"_95":196,"_155":197,"_157":-5,"_158":136,"_159":135,"_161":162,"_104":198,"_99":199,"_164":165,"_166":200,"_168":22,"_169":-5,"_170":201,"_98":202},"c74a0506-8f4d-11f0-aac7-0224a6c84d84","copy-component-v3.html","08e537b0-8f3f-11f0-96f4-0224a6c84d84",["D",1757622466713],6,"\n\n\n \n \n Copy Elements with Styles\n \n \n\n\n

Source Elements

Demo Component 1

This is a paragraph with some special text.

\n Another nested element.\n

A Gradient Card

This component uses a background gradient and a box shadow for a unique look.

Rounded Button Style

A completely different aesthetic.

\n \n

This component uses flexbox for its layout, with a header, body, and a button in the footer.

\n \n

Demo Component 1 (Variant)

This is another paragraph with some different text.

This is a new line of sub-text.

Component with an attribute selector

Success: Your action was completed.

Warning: Please review your information.

Error: Something went wrong.

\n \n

Copied Elements

\n \n

\n\n \n\n",[],[196],{"_102":204,"_95":205,"_155":206,"_157":-5,"_158":136,"_159":207,"_161":162,"_104":208,"_99":199,"_164":165,"_166":209,"_168":22,"_169":-5,"_170":210,"_98":211},"45efaa34-8f3d-11f0-b5bf-0224a6c84d84","copy-component.html","49a4f44c-8f3b-11f0-9390-0224a6c84d84",102,["D",1757615377747],"\n\n\n \n \n Copy Elements with Styles\n \n\n\n

Source Elements

Demo Component 1

This is a paragraph with some special text.

\n Another nested element.\n

A Gradient Card

This component uses a background gradient and a box shadow for a unique look.

Rounded Button Style

A completely different aesthetic.

\n \n

Copied Elements

\n \n

\n\n \n\n",[],[205],{"_102":213,"_95":214,"_155":215,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":216,"_99":32,"_164":165,"_166":217,"_168":22,"_169":-5,"_170":218,"_98":219},"8537094c-87ec-11f0-8096-0224a6c84d84","favicon.svg","01990a19-0775-71cf-9dec-d5cb301b34a0",["D",1756811036454],"",[],[214],{"_102":221,"_95":222,"_155":223,"_157":-5,"_158":136,"_159":224,"_161":162,"_104":225,"_99":226,"_164":165,"_166":227,"_168":22,"_169":-5,"_170":228,"_98":229},"ccdbabf2-8979-11f0-8d3a-0224a6c84d84","index.html","01990a19-0775-71cf-9dec-d961b449339f",72,["D",1756981666937],14,"\n\n \n Hi there!\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n \n \n \n \n",[],[222],{"_102":231,"_95":232,"_155":233,"_157":-5,"_158":136,"_159":234,"_161":162,"_104":235,"_99":236,"_164":165,"_166":237,"_168":22,"_169":-5,"_170":238,"_98":239},"9ddec7c4-8f39-11f0-8e69-0224a6c84d84","lovelace.html","fb758572-8f33-11f0-a877-0224a6c84d84",95,["D",1757613807288],9,"\n \n \n \n \n \n

\n By Diana Smith\n |\n GitHub.com/cyanHarlow\n |\n Website\n |\n Optimized for viewing in Chrome\n

\n\n \n \n",[],[232],{"_102":241,"_95":242,"_155":243,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":244,"_99":32,"_164":245,"_166":246,"_168":22,"_169":-5,"_170":247,"_98":248},"85370bf4-87ec-11f0-8096-0224a6c84d84","main.tsx","01990a19-0775-71cf-9dec-de8ec77c18eb",["D",1756811036454],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[],[242],{"_102":250,"_95":251,"_155":252,"_157":-5,"_158":136,"_159":253,"_161":162,"_104":254,"_99":255,"_164":180,"_166":256,"_168":22,"_169":-5,"_170":257,"_98":258},"682bbfaa-880a-11f0-afbe-0224a6c84d84","populate.js","01990a19-0775-71cf-9dec-e06075ac2195",44,["D",1756823872713],28,"/**\n * @fileoverview Script for populating form fields with UTM data from a cookie in an efficient, compressed format.\n * @author Your Name Here\n */\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n \"use strict\";\n\n // Mapping of array indices to form field names.\n const formFieldMap = {\n 0: \"utm_source_field\",\n 1: \"utm_medium_field\",\n 2: \"utm_campaign_field\",\n 3: \"utm_content_field\",\n 4: \"utm_term_field\",\n };\n\n const cookieKey = \"u\"; // Must match the key used in the capture script\n\n // Helper functions remain the same\n function getCookie(name) {\n const nameEQ = name + \"=\";\n const ca = document.cookie.split(\";\");\n for (let i = 0; i < ca.length; i++) {\n let c = ca[i];\n while (c.charAt(0) === \" \") c = c.substring(1, c.length);\n if (c.indexOf(nameEQ) === 0) {\n return c.substring(nameEQ.length, c.length);\n }\n }\n return \"\";\n }\n\n function b64DecodeUnicode(str) {\n return decodeURIComponent(\n atob(str).split(\"\").map(function (c) {\n return \"%\" + (\"00\" + c.charCodeAt(0).toString(16)).slice(-2);\n }).join(\"\"),\n );\n }\n\n function dataLayerHook() {\n if (window.dataLayer) {\n window.dataLayer.push(arguments);\n }\n }\n\n function getGA4DataLayerValue(measurementId, key) {\n return new Promise((resolve) => {\n let hasResolved = false;\n\n const timeoutId = setTimeout(() => {\n if (!hasResolved) {\n hasResolved = true;\n resolve(\"biscuits\");\n }\n }, 1000);\n\n dataLayerHook(\"get\", measurementId, key, (value) => {\n if (!hasResolved) {\n hasResolved = true;\n clearTimeout(timeoutId);\n resolve(value);\n }\n });\n });\n }\n\n function populateForm() {\n const firstHiddenField = formFieldMap[0];\n const targetForms = document.querySelectorAll(\n `form input[name=\"${firstHiddenField}\"]`,\n );\n\n if (targetForms.length === 0) {\n console.log(\"No forms with the required hidden fields found. Skipping.\");\n return;\n }\n\n try {\n const utmCookie = getCookie(cookieKey);\n if (!utmCookie) {\n console.log(\"No UTM data found in cookie. Skipping form population.\");\n return;\n }\n\n const decodedStorage = b64DecodeUnicode(utmCookie);\n const storedObject = JSON.parse(decodedStorage);\n const utmArray = storedObject.p;\n\n targetForms.forEach(async (hiddenField) => {\n const form = hiddenField.form;\n\n if (form) {\n console.log(\"Form detected. Populating fields...\");\n for (const [index, fieldName] of Object.entries(formFieldMap)) {\n const field = form.querySelector(\n `input[name=\"${fieldName}\"]`,\n );\n // Check if the array value exists and is not an empty string\n if (field && utmArray[index]) {\n field.value = utmArray[index];\n console.log(\n `Populated field \"${fieldName}\" with value \"${\n utmArray[index]\n }\"`,\n );\n }\n }\n\n const clientField = form.querySelector(`input[name=\"ga_client_id\"]`);\n const sessionField = form.querySelector(\n `input[name=\"ga_session_id\"]`,\n );\n\n const ga_data = await Promise.all([\n getGA4DataLayerValue(\"G-D40JYECEV9\", \"client_id\"),\n getGA4DataLayerValue(\"G-D40JYECEV9\", \"session_id\"),\n ]);\n\n clientField && (clientField.value = ga_data[0]);\n sessionField && (sessionField.value = ga_data[1]);\n }\n });\n } catch (e) {\n console.error(\"Failed to access or parse cookie data:\", e);\n }\n }\n\n populateForm();\n});",[],[251],{"_102":260,"_95":261,"_155":262,"_157":-5,"_158":136,"_159":263,"_161":162,"_104":264,"_99":265,"_164":165,"_166":266,"_168":22,"_169":-5,"_170":267,"_98":268},"def7d5b8-8979-11f0-b42a-0224a6c84d84","style.css","01990a19-0775-71cf-9dec-e47362f13d54",74,["D",1756981697319],7,"/* CSS files add styling rules to your content */\n\nbody {\n font-family: Arial, sans-serif;\n margin: 2em;\n}\n\nh1 {\n font-style: italic;\n color: #373fff;\n}\n\n.signal {\n width: 300px;\n height: 300px;\n}\n.signal rect {\n /* Default inactive style */\n fill: #ccc;\n}\n\n.signal[data-strength=\"1\"] rect:nth-child(-n + 1),\n.signal[data-strength=\"2\"] rect:nth-child(-n + 2),\n.signal[data-strength=\"3\"] rect:nth-child(-n + 3),\n.signal[data-strength=\"4\"] rect:nth-child(-n + 4) {\n /* Active style */\n fill: green;\n}",[],[261],{"_102":270,"_95":271,"_155":272,"_157":-5,"_158":136,"_159":273,"_161":162,"_104":274,"_99":275,"_164":165,"_166":276,"_168":22,"_169":-5,"_170":277,"_98":278},"3ba3de46-8f39-11f0-9486-0224a6c84d84","test.css","23cb8788-8f39-11f0-82d2-0224a6c84d84",93,["D",1757613642487],3,".frame {\n width: 600px;\n height: 600px;\n background: white;\n border: 3px solid green;\n font-size: 0;\n position: relative;\n}\n\n*,\n*:after,\n*:before {\n box-sizing: border-box;\n}\n\n.frame > * {\n width: 50%;\n height: 50%;\n margin: 0;\n padding: 0;\n position: absolute;\n}\n\n.ex1 {\n background-color: green;\n top: 0;\n left: 0;\n}\n\n.ex1 li {\n background: blue;\n width: 80%;\n height: 25%;\n left: 0;\n right: 0;\n margin: auto;\n}\n\n.ex1 li:nth-child(odd) {\n background: pink;\n}\n\n.ex2 {\n background-color: red;\n top: 0;\n right: 0;\n}\n\n.ex2 div {\n background: purple;\n width: 45%;\n height: 25%;\n left: 0;\n right: 0;\n margin: auto;\n border-radius: 50%;\n display: inline-block;\n}\n\n.ex2 div:nth-child(odd) {\n background: aqua;\n}\n\n.ex3 {\n background-color: yellow;\n bottom: 0;\n left: 0;\n background-image:\n radial-gradient(circle at 56% 9%, #da1f2821 8%, rgba(254, 251, 251, 0) 29%),\n radial-gradient(circle at 52% 16%, #f7f2e2 5%, rgba(253, 246, 235, 0) 27%),\n radial-gradient(circle at 16% 16%, #907b65b8 15%, rgba(115, 92, 59, 0) 26%),\n linear-gradient(\n 98deg,\n rgba(125, 91, 61, 0.76) 14%,\n rgba(111, 80, 51, 0) 31%\n ),\n radial-gradient(ellipse closest-corner at 35% 50%, #dac5a6, #c39f7d);\n}\n\n.ex4 {\n background-color: #f3d5bb;\n bottom: 0;\n right: 0;\n background-image:\n linear-gradient(\n rgba(0, 0, 0, 0) 45%,\n rgb(255, 255, 255) 45%,\n rgb(255, 255, 255) 55%,\n rgba(0, 0, 0, 0) 55%\n ),\n linear-gradient(\n to right,\n rgba(0, 0, 0, 0) 30%,\n rgb(255, 255, 255) 30%,\n rgb(255, 255, 255) 40%,\n rgba(0, 0, 0, 0) 40%,\n rgba(0, 0, 0, 0) 60%,\n rgb(255, 255, 255) 60%,\n rgb(255, 255, 255) 70%,\n rgba(0, 0, 0, 0) 70%\n );\n box-shadow:\n -0.3em -2.7em 1.1em -2em #b59e83,\n 3.5em -5.1em 1.5em -4.4em #b79c7d,\n inset -0.5em -1.1em 1.8em -1.1em #7b6246,\n inset -0.4em 1.6em 0.9em -0.8em #b59c7f,\n inset -0.7em -0.9em 1.9em -1em #af8376,\n inset 2.2em -3em 2.4em -1em #291010,\n inset -4em -2.7em 8em 0.3em #947968,\n inset -6em -0.2em 8em 3em #cdccaf,\n 1.3em 2.7em 0.8em -2em #2d040442,\n -14px -1px 8px -11px #150d0da8;\n}",[],[271],{"_102":280,"_95":281,"_155":282,"_157":-5,"_158":136,"_159":283,"_161":162,"_104":284,"_99":275,"_164":165,"_166":285,"_168":22,"_169":-5,"_170":286,"_98":287},"39c6a4ba-8f38-11f0-8a76-0224a6c84d84","timelapse.css","2822dd78-8f38-11f0-88f7-0224a6c84d84",81,["D",1757613209861],".timelapse {\n text-align: center;\n margin: 2em auto;\n width: 70.0em;\n}\n\n.timelapse p {\n color: white;\n font-size: 13px;\n}\n\n.timelapse p a {\n font-weight: bold;\n color: white;\n}\n\n.timelapse button {\n font-size: 20px;\n padding: 10px 15px;\n}",[],[281],{"_102":289,"_95":290,"_155":291,"_157":-5,"_158":136,"_159":292,"_161":162,"_104":293,"_99":190,"_164":180,"_166":294,"_168":22,"_169":-5,"_170":295,"_98":296},"73d189cc-8f38-11f0-8def-0224a6c84d84","timelapse.js","3b4143c2-8f38-11f0-807d-0224a6c84d84",84,["D",1757613307243],"let stylesToAnimate = {\n boxShadow: \"none\",\n backgroundImage: \"none\",\n width: \"0\",\n height: \"0\",\n borderWidth: \"0\",\n borderRadius: \"0\",\n top: \"50%\",\n left: \"50%\",\n transform: \"none\",\n backgroundColor: \"rgba(255,255,255,0.4)\",\n transformOrigin: \"center center\",\n};\n\nlet multiStyles = {\n //backgroundImage: true,\n //boxShadow: true\n};\n\n// Don't look too hard in here, it is thrown together with a mish-mash of things\n\nlet frame = document.querySelector(\".frame\");\nlet elements = frame.querySelectorAll(\"div\"),\n totalElements = elements.length,\n timer = 25;\nlet timerIds = [];\n\nlet div = document.createElement(\"div\");\n\ndiv.innerHTML =\n '

PLEASE NOTE: This is not the original website for exceptional work of art by Diana Smith. Original website is here.

This is a musing on what it might be like to see a pseudo-timelapse of the event.

I wanted to animate the background image and box shadows as well, but getComputedStyle was returning something funny with the colours, but I couldn\\'t work in out in time.

How it works: grabs all of the divs in the frame and applies default inline css values to certain properties. A transition is applied and the default styles are then removeded.

';\n\nlet button = div.querySelector(\"button\");\n\ndiv.className = \"timelapse\";\n\ndiv.querySelector(\"button\").addEventListener(\"click\", function (e) {\n if (this.animating) {\n stopAnimation();\n } else {\n startAnimation();\n }\n});\n\nframe.parentNode.insertBefore(div, frame.nextSibling);\n\nfunction stopAnimation() {\n delete button.animating;\n\n button.innerHTML = \"Animate\";\n\n while (timerIds.length) {\n clearTimeout(timerIds.pop());\n }\n\n elements.forEach((element) => {\n element.removeAttribute(\"style\");\n });\n}\n\nfunction startAnimation() {\n button.innerHTML = \"Stop animation\";\n\n button.animating = true;\n\n elements.forEach((element) => {\n // let elementStyles = {...stylesToAnimate};\n // let styles = getComputedStyle(element);\n\n // Object.keys(stylesToAnimate).forEach(key => {\n\n // if( multiStyles[key] ) {\n // elementStyles[key] = styles[key].replace(/\$.*?\$/g,function(a) {return a.replace(/, /g,\",\")}).split(', ');\n // } else {\n // elementStyles[key] = styles[key];\n // }\n\n // })\n\n // element.originalStyles = elementStyles;\n\n element.style.visibility = \"hidden\";\n\n Object.keys(stylesToAnimate).forEach((key) => {\n element.style[key] = stylesToAnimate[key];\n });\n });\n\n // elements.forEach((element) => {\n\n // });\n\n makeVisible(0);\n}\n\n//async\nfunction makeVisible(index) {\n if (index < totalElements) {\n let element = elements[index++];\n\n //\t\tawait iterateStyles(element);\n iterateStyles(element);\n\n timerIds.push(setTimeout(makeVisible, timer, index));\n } else {\n console.info(\"done\");\n setTimeout(stopAnimation, 5000);\n }\n}\n\n//function iterateMultiStyle(element,style) {\n//\tif( element.originalStyles[style].length ) {\n//\t\tvar value = element.originalStyles[style].pop();\n//\t\tif( element.style[style] == \"none\") {\n//\t\t\telement.style[style] = value;\n//\t\t} else {\n//\t\t\telement.style[style] = [element.style[style],value].toString();\n//\t\t}\n\n//\t\tsetTimeout(iterateMultiStyle,100,element,style);\n//\t}\n//}\n\n//async\nfunction iterateStyles(element) {\n //\treturn new Promise(resolve => {\n\n element.style.transition =\n \"all 1s, transform 0.5s 1s, border-radius 1s 2s,box-shadow 1s 3s\";\n element.style.visibility = \"visible\";\n\n //\t\tlet originalStyles = element.originalStyles;\n\n requestAnimationFrame(function () {\n Object.keys(stylesToAnimate).forEach((key) => {\n //\t\t\t\tif( multiStyles[key]) {\n //\t\t\t\t\titerateMultiStyle(element,key);\n //\t\t\t\t} else {\n element.style[key] = \"\"; // originalStyles[key];\n //\t\t\t\t}\n });\n });\n\n //\t\tresolve();\n\n //\t});\n}",[],[290],{"_102":298,"_95":299,"_155":300,"_157":-5,"_158":136,"_159":301,"_161":162,"_104":302,"_99":190,"_164":180,"_166":303,"_168":22,"_169":-5,"_170":304,"_98":305},"7306383e-8818-11f0-9dab-0224a6c84d84","utm_capture-min.js","65595054-8818-11f0-90f7-0224a6c84d84",60,["D",1756829903875],"!function () {\n \"use strict\";\n let e = {\n utm_source: 0,\n utm_medium: 1,\n utm_campaign: 2,\n utm_content: 3,\n utm_term: 4,\n },\n t = {\n organic: [\"google\", \"bing\", \"yahoo\", \"duckduckgo\"],\n social: [\"facebook\", \"twitter\", \"linkedin\", \"instagram\"],\n },\n n = {\n 0: \"utm_source_field\",\n 1: \"utm_medium_field\",\n 2: \"utm_campaign_field\",\n 3: \"utm_content_field\",\n 4: \"utm_term_field\",\n },\n i = \"u_data\",\n r = \"not-set\";\n function o(e, t, n) {\n let i = new Date();\n i.setTime(i.getTime() + 864e5 * n);\n let r = \"expires=\" + i.toUTCString();\n document.cookie = `${e}=${t};${r};path=/;SameSite=Lax`;\n }\n function l(e) {\n let t = e + \"=\", n = document.cookie.split(\";\");\n for (let i = 0; i < n.length; i++) {\n let r = n[i];\n for (; \" \" === r.charAt(0);) r = r.substring(1, r.length);\n if (0 === r.indexOf(t)) return r.substring(t.length, r.length);\n }\n return \"\";\n }\n function u(e) {\n return btoa(\n encodeURIComponent(e).replace(/%([0-9A-F]{2})/g, function e(t, n) {\n return String.fromCharCode(\"0x\" + n);\n }),\n );\n }\n function a(e) {\n return \"string\" != typeof e || \"\" === e\n ? \"\"\n : e.replace(/&/g, \"&\").replace(//g, \">\")\n .replace(/\"/g, \""\").replace(/'/g, \"'\");\n }\n function c(e) {\n let t = e.split(\".\"), n = t.pop(), i = t.pop();\n return [\"ac\", \"co\", \"com\", \"edu\", \"gov\", \"net\", \"org\"].includes(i)\n ? `${t.pop()}.${i}.${n}`\n : `${i}.${n}`;\n }\n function s(e, t) {\n return new Promise((n) => {\n let i = !1,\n r = setTimeout(() => {\n i || (i = !0, n(\"biscuits\"));\n }, 1e3);\n !function e() {\n window.dataLayer && window.dataLayer.push(arguments);\n }(\"get\", e, t, (e) => {\n i || (i = !0, clearTimeout(r), n(e));\n });\n });\n }\n async function f() {\n let t = l(i), n = [];\n if (t) {\n try {\n var o;\n let u = t.substring(1),\n a = (o = u,\n decodeURIComponent(\n atob(o).split(\"\").map(function (e) {\n return \"%\" + (\"00\" + e.charCodeAt(0).toString(16)).slice(-2);\n }).join(\"\"),\n ));\n n = JSON.parse(a);\n } catch (c) {}\n }\n let [f, m] = await Promise.all([\n s(\"G-D40JYECEV9\", \"client_id\"),\n s(\"G-D40JYECEV9\", \"session_id\"),\n ]),\n g = {};\n for (let d in e) {\n if (Object.prototype.hasOwnProperty.call(e, d)) {\n let p = e[d];\n g[d] = n[p] || r;\n }\n }\n return g.ga_client_id = f, g.ga_session_id = m, g;\n }\n async function m() {\n let t = n[0], i = document.querySelectorAll(`form input[name=\"${t}\"]`);\n if (0 === i.length) return;\n let o = await f();\n i.forEach((t) => {\n let i = t.form;\n if (i) {\n for (let [l, u] of Object.entries(n)) {\n let a = i.querySelector(`input[name=\"${u}\"]`);\n if (a) {\n let c = Object.keys(e).find((t) => e[t] === parseInt(l));\n a.value = o[c] || r;\n }\n }\n let s = i.querySelector('input[name=\"ga_client_id\"]'),\n f = i.querySelector('input[name=\"ga_session_id\"]');\n s && (s.value = o.ga_client_id), f && (f.value = o.ga_session_id);\n }\n });\n }\n window.attributionTools = { getAttributionData: f, populateFormFields: m },\n document.addEventListener(\"DOMContentLoaded\", () => {\n (function n() {\n try {\n let r = new URLSearchParams(window.location.search), s = [], f = !1;\n for (let [m, g] of Object.entries(e)) {\n let d = a(r.get(m));\n d && (s[g] = d, f = !0);\n }\n let p = l(i), $ = !!p && \"1\" === p[0];\n if (f) {\n let h = u(JSON.stringify(s));\n o(i, `0${h}`, 7);\n } else if (!p || $) {\n let y = function e() {\n let n = document.referrer;\n if (!n || 0 === n.length) return null;\n try {\n let i = new URL(n), r = i.hostname;\n if (c(r) === c(window.location.hostname)) return null;\n for (let o of t.organic) {\n if (r.includes(o)) return { source: o, medium: \"organic\" };\n }\n for (let l of t.social) {\n if (r.includes(l)) return { source: l, medium: \"social\" };\n }\n return { source: r, medium: \"referral\" };\n } catch (u) {\n return null;\n }\n }();\n if (y) {\n let _ = [];\n _[e.utm_source] = a(y.source), _[e.utm_medium] = a(y.medium);\n let b = u(JSON.stringify(_));\n o(i, `1${b}`, 7);\n } else if (!p) {\n let w = u(JSON.stringify(s));\n o(i, `1${w}`, 7);\n }\n }\n } catch (S) {}\n })(),\n m();\n });\n}();",[],[299],{"_102":307,"_95":308,"_155":309,"_157":-5,"_158":136,"_159":310,"_161":162,"_104":311,"_99":312,"_164":180,"_166":313,"_168":22,"_169":-5,"_170":314,"_98":315},"1dec68c0-8816-11f0-a7d8-0224a6c84d84","utm_capture.js","7e31c6c6-8811-11f0-a394-0224a6c84d84",57,["D",1756828902106],8,"/**\n * @fileoverview A combined script for capturing and populating UTM parameters,\n * with fallback attribution and GA4 data. The script is self-contained and\n * provides a public API for populating forms and fetching data for other uses.\n * @author Your Name Here\n */\n\n(function () {\n \"use strict\";\n\n // --- Constants and Mappings ---\n const utmParamMap = {\n \"utm_source\": 0,\n \"utm_medium\": 1,\n \"utm_campaign\": 2,\n \"utm_content\": 3,\n \"utm_term\": 4,\n };\n const referrerRules = {\n organic: [\"google\", \"bing\", \"yahoo\", \"duckduckgo\"],\n social: [\"facebook\", \"twitter\", \"linkedin\", \"instagram\"],\n };\n const formFieldMap = {\n 0: \"utm_source_field\",\n 1: \"utm_medium_field\",\n 2: \"utm_campaign_field\",\n 3: \"utm_content_field\",\n 4: \"utm_term_field\",\n };\n const cookieKey = \"u_data\";\n const expirationDays = 7;\n const notSetValue = \"not-set\";\n\n // --- Common Helper Functions ---\n\n // Sets a cookie with a given name, value, and expiration.\n function setCookie(name, value, days) {\n const d = new Date();\n d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));\n const expires = \"expires=\" + d.toUTCString();\n document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax`;\n }\n\n // Gets a cookie by its name.\n function getCookie(name) {\n const nameEQ = name + \"=\";\n const ca = document.cookie.split(\";\");\n for (let i = 0; i < ca.length; i++) {\n let c = ca[i];\n while (c.charAt(0) === \" \") c = c.substring(1, c.length);\n if (c.indexOf(nameEQ) === 0) {\n return c.substring(nameEQ.length, c.length);\n }\n }\n return \"\";\n }\n\n // Encodes a string to Base64 for basic obfuscation.\n function b64EncodeUnicode(str) {\n return btoa(\n encodeURIComponent(str).replace(\n /%([0-9A-F]{2})/g,\n function toSolidBytes(match, p1) {\n return String.fromCharCode(\"0x\" + p1);\n },\n ),\n );\n }\n\n // Decodes a Base64 string.\n function b64DecodeUnicode(str) {\n return decodeURIComponent(\n atob(str).split(\"\").map(function (c) {\n return \"%\" + (\"00\" + c.charCodeAt(0).toString(16)).slice(-2);\n }).join(\"\"),\n );\n }\n\n // Sanitizes a string to prevent XSS attacks.\n function sanitizeValue(value) {\n if (typeof value !== \"string\" || value === \"\") {\n return \"\"; // Return an empty string\n }\n return value\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n }\n\n // Determines the root domain of a given hostname for a robust same-site check.\n function getRootDomain(hostname) {\n const parts = hostname.split(\".\");\n const tld = parts.pop();\n const secondLevel = parts.pop();\n if ([\"ac\", \"co\", \"com\", \"edu\", \"gov\", \"net\", \"org\"].includes(secondLevel)) {\n return `${parts.pop()}.${secondLevel}.${tld}`;\n }\n return `${secondLevel}.${tld}`;\n }\n\n // --- Capture Logic (Runs on load) ---\n\n // Determines source and medium based on document.referrer.\n function getReferrerData() {\n const referrer = document.referrer;\n if (!referrer || referrer.length === 0) {\n return null;\n }\n try {\n const referrerUrl = new URL(referrer);\n const referrerHostname = referrerUrl.hostname;\n if (\n getRootDomain(referrerHostname) ===\n getRootDomain(window.location.hostname)\n ) {\n return null;\n }\n for (const domain of referrerRules.organic) {\n if (referrerHostname.includes(domain)) {\n return { source: domain, medium: \"organic\" };\n }\n }\n for (const domain of referrerRules.social) {\n if (referrerHostname.includes(domain)) {\n return { source: domain, medium: \"social\" };\n }\n }\n return { source: referrerHostname, medium: \"referral\" };\n } catch (e) {\n return null;\n }\n }\n\n /**\n * Captures UTM parameters from the URL, or infers attribution from the referrer,\n * then stores the data in a cookie.\n *\n * The logic follows a specific priority:\n * 1. If the current URL has UTM parameters, capture and store them. This always\n * overrides any existing cookie data.\n * 2. If no UTM parameters are found, check the existing cookie.\n * 3. If there is no existing cookie, or the existing cookie was set by a\n * referrer, then check the `document.referrer` for attribution.\n * - A new referrer entry will override a previous referrer entry.\n * - A non-UTM entry will never override a UTM-based cookie.\n * 4. If no UTMs and no valid referrer, a \"not-set\" cookie is created.\n *\n * The cookie value is a flag (0 for UTM, 1 for referrer/none) followed by\n * a Base64-encoded JSON array, for efficient checking and storage.\n */\n function captureUTMParams() {\n try {\n const urlParams = new URLSearchParams(window.location.search);\n const utmArray = [];\n let hasUTM = false;\n for (const [utmKey, utmIndex] of Object.entries(utmParamMap)) {\n const value = sanitizeValue(urlParams.get(utmKey));\n if (value) {\n utmArray[utmIndex] = value;\n hasUTM = true;\n }\n }\n const existingCookie = getCookie(cookieKey);\n let existingIsReferrer = existingCookie\n ? existingCookie[0] === \"1\"\n : false;\n\n if (hasUTM) {\n const encodedData = b64EncodeUnicode(JSON.stringify(utmArray));\n setCookie(cookieKey, `0${encodedData}`, expirationDays); // 0 indicates UTM origin\n } else if (!existingCookie || existingIsReferrer) {\n const referrerData = getReferrerData();\n if (referrerData) {\n const referrerUtmArray = [];\n referrerUtmArray[utmParamMap[\"utm_source\"]] = sanitizeValue(\n referrerData.source,\n );\n referrerUtmArray[utmParamMap[\"utm_medium\"]] = sanitizeValue(\n referrerData.medium,\n );\n const encodedData = b64EncodeUnicode(\n JSON.stringify(referrerUtmArray),\n );\n setCookie(cookieKey, `1${encodedData}`, expirationDays); // 1 indicates referrer origin\n } else if (!existingCookie) {\n const encodedData = b64EncodeUnicode(JSON.stringify(utmArray));\n setCookie(cookieKey, `1${encodedData}`, expirationDays); // Use 1 for \"no referrer\"\n }\n }\n } catch (e) {\n // Fail silently if there's an error to avoid breaking the page\n }\n }\n\n // --- Populate and Data Retrieval Logic (Public API) ---\n\n // Private GA4 data layer functions.\n function dataLayerHook() {\n if (window.dataLayer) {\n window.dataLayer.push(arguments);\n }\n }\n\n function getGA4DataLayerValue(measurementId, key) {\n return new Promise((resolve) => {\n let hasResolved = false;\n const timeoutId = setTimeout(() => {\n if (!hasResolved) {\n hasResolved = true;\n resolve(\"biscuits\");\n }\n }, 1000);\n dataLayerHook(\"get\", measurementId, key, (value) => {\n if (!hasResolved) {\n hasResolved = true;\n clearTimeout(timeoutId);\n resolve(value);\n }\n });\n });\n }\n\n /**\n * Public API: Fetches all attribution data (UTM and GA4).\n *\n * This function is designed to be a single source of truth for attribution data.\n * It handles fetching and decoding the UTM cookie and asynchronously retrieves\n * GA4 client and session IDs.\n *\n * @returns {Promise

McGern

basic-html-starter

Environment variables