diff --git a/edge-apps/tracx/README.md b/edge-apps/tracx/README.md
new file mode 100644
index 000000000..11deea130
--- /dev/null
+++ b/edge-apps/tracx/README.md
@@ -0,0 +1,49 @@
+# Screenly TRACX MVP
+
+This repository contains a simple example of an integration between Screenly and TRACX.
+
+## Prerequisites
+
+- Ensure you have [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed.
+- Install all the necessary dependencies by running:
+```npm install```
+
+## Deploying the example
+
+### Development
+
+1. **Run Webpack in Watch Mode:**
+
+ This will automatically rebuild your project whenever you make changes to the source files.
+
+```npx webpack --watch```
+
+2. **Serve the App Locally:**
+
+Use the `screenly edge-app run` command to serve your app locally.
+
+```screenly edge-app run```
+
+This will start the app, and you should be able to access it from your browser.
+
+### Production
+
+1. **Build the App for Production:**
+
+This will create optimized builds suitable for production environments.
+
+```npx webpack --mode production```
+
+2. **Serve the App:**
+
+Just like in development, use the `screenly edge-app run` command.
+
+```screenly edge-app run```
+
+## Contributing
+
+If you'd like to contribute to this project, please fork the repository and submit a pull request.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
\ No newline at end of file
diff --git a/edge-apps/tracx/build/README.md b/edge-apps/tracx/build/README.md
new file mode 100644
index 000000000..11deea130
--- /dev/null
+++ b/edge-apps/tracx/build/README.md
@@ -0,0 +1,49 @@
+# Screenly TRACX MVP
+
+This repository contains a simple example of an integration between Screenly and TRACX.
+
+## Prerequisites
+
+- Ensure you have [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed.
+- Install all the necessary dependencies by running:
+```npm install```
+
+## Deploying the example
+
+### Development
+
+1. **Run Webpack in Watch Mode:**
+
+ This will automatically rebuild your project whenever you make changes to the source files.
+
+```npx webpack --watch```
+
+2. **Serve the App Locally:**
+
+Use the `screenly edge-app run` command to serve your app locally.
+
+```screenly edge-app run```
+
+This will start the app, and you should be able to access it from your browser.
+
+### Production
+
+1. **Build the App for Production:**
+
+This will create optimized builds suitable for production environments.
+
+```npx webpack --mode production```
+
+2. **Serve the App:**
+
+Just like in development, use the `screenly edge-app run` command.
+
+```screenly edge-app run```
+
+## Contributing
+
+If you'd like to contribute to this project, please fork the repository and submit a pull request.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
\ No newline at end of file
diff --git a/edge-apps/tracx/build/index.html b/edge-apps/tracx/build/index.html
new file mode 100644
index 000000000..4c4bb222a
--- /dev/null
+++ b/edge-apps/tracx/build/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+ QR Code Generator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/edge-apps/tracx/build/resources/js/main.js b/edge-apps/tracx/build/resources/js/main.js
new file mode 100644
index 000000000..c69a3db6b
--- /dev/null
+++ b/edge-apps/tracx/build/resources/js/main.js
@@ -0,0 +1,29 @@
+import '../styles/main.css';
+import QRCodeStyling from "qr-code-styling";
+
+const FORM_URL = 'https://tracx.me/kiqigo';
+
+function buildUrl() {
+ const { location, hostname } = screenly.metadata;
+ const queryParams = {
+ src: 'screenly',
+ loc: encodeURIComponent(location),
+ placement: encodeURIComponent(hostname),
+ };
+
+ const queryString = Object.entries(queryParams)
+ .map(([key, value]) => `${key}=${value}`)
+ .join('&');
+
+ return `${FORM_URL}?${queryString}`;
+}
+const qrCode = new QRCodeStyling({
+ width: 450,
+ height: 450,
+ type: "svg",
+ shape: "circle",
+ data: buildUrl(),
+ dotsOptions: { color: "#fff" },
+ backgroundOptions: { color: "#00cd00" }
+});
+qrCode.append(document.getElementById("qr-code-container"));
\ No newline at end of file
diff --git a/edge-apps/tracx/build/screenly.yml b/edge-apps/tracx/build/screenly.yml
new file mode 100644
index 000000000..554964257
--- /dev/null
+++ b/edge-apps/tracx/build/screenly.yml
@@ -0,0 +1,22 @@
+---
+user_version: ''
+description: A sample QR code generator app
+icon: ''
+author: Screenly, Inc.
+homepage_url: ''
+entrypoint: index.html
+settings:
+ enable_utm:
+ type: string
+ default_value: 'false'
+ title: enable_utm
+ optional: true
+ help_text: |
+ Enabling it append UTM parameters as query strings to the URL before
+ converting it to a QR code.
+ url:
+ type: string
+ default_value: https://www.screenly.io/
+ title: url
+ optional: false
+ help_text: Specify a URL to be converted into a QR code
diff --git a/edge-apps/tracx/build/static/bundle.js b/edge-apps/tracx/build/static/bundle.js
new file mode 100644
index 000000000..09b6d00b6
--- /dev/null
+++ b/edge-apps/tracx/build/static/bundle.js
@@ -0,0 +1,119 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ var __webpack_modules__ = ({
+
+/***/ "./resources/styles/main.css":
+/*!***********************************!*\
+ !*** ./resources/styles/main.css ***!
+ \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://screenly-tracx/./resources/styles/main.css?");
+
+/***/ }),
+
+/***/ "./node_modules/qr-code-styling/lib/qr-code-styling.js":
+/*!*************************************************************!*\
+ !*** ./node_modules/qr-code-styling/lib/qr-code-styling.js ***!
+ \*************************************************************/
+/***/ ((module) => {
+
+eval("!function(t,e){ true?module.exports=e():0}(self,(function(){return(()=>{var t={192:(t,e)=>{var r,n,o=function(){var t=function(t,e){var r=t,n=a[e],o=null,i=0,u=null,v=[],w={},m=function(t,e){o=function(t){for(var e=new Array(t),r=0;r=7&&S(t),null==u&&(u=A(r,n,v)),C(u,e)},b=function(t,e){for(var r=-1;r<=7;r+=1)if(!(t+r<=-1||i<=t+r))for(var n=-1;n<=7;n+=1)e+n<=-1||i<=e+n||(o[t+r][e+n]=0<=r&&r<=6&&(0==n||6==n)||0<=n&&n<=6&&(0==r||6==r)||2<=r&&r<=4&&2<=n&&n<=4)},_=function(){for(var t=8;t>n&1);o[Math.floor(n/3)][n%3+i-8-3]=a}for(n=0;n<18;n+=1)a=!t&&1==(e>>n&1),o[n%3+i-8-3][Math.floor(n/3)]=a},M=function(t,e){for(var r=n<<3|e,a=s.getBCHTypeInfo(r),u=0;u<15;u+=1){var h=!t&&1==(a>>u&1);u<6?o[u][8]=h:u<8?o[u+1][8]=h:o[i-15+u][8]=h}for(u=0;u<15;u+=1)h=!t&&1==(a>>u&1),u<8?o[8][i-u-1]=h:u<9?o[8][15-u-1+1]=h:o[8][15-u-1]=h;o[i-8][8]=!t},C=function(t,e){for(var r=-1,n=i-1,a=7,u=0,h=s.getMaskFunction(e),c=i-1;c>0;c-=2)for(6==c&&(c-=1);;){for(var l=0;l<2;l+=1)if(null==o[n][c-l]){var d=!1;u>>a&1)),h(n,c-l)&&(d=!d),o[n][c-l]=d,-1==(a-=1)&&(u+=1,a=7)}if((n+=r)<0||i<=n){n-=r,r=-r;break}}},A=function(t,e,r){for(var n=c.getRSBlocks(t,e),o=l(),i=0;i8*u)throw\"code length overflow. (\"+o.getLengthInBits()+\">\"+8*u+\")\";for(o.getLengthInBits()+4<=8*u&&o.put(0,4);o.getLengthInBits()%8!=0;)o.putBit(!1);for(;!(o.getLengthInBits()>=8*u||(o.put(236,8),o.getLengthInBits()>=8*u));)o.put(17,8);return function(t,e){for(var r=0,n=0,o=0,i=new Array(e.length),a=new Array(e.length),u=0;u=0?g.getAt(p):0}}var v=0;for(d=0;dn)&&(t=n,e=r)}return e}())},w.createTableTag=function(t,e){t=t||2;var r=\"\";r+='',r+=\"\";for(var n=0;n\";for(var o=0;o';r+=\"\"}return(r+=\" \")+\"
\"},w.createSvgTag=function(t,e,r,n){var o={};\"object\"==typeof arguments[0]&&(t=(o=arguments[0]).cellSize,e=o.margin,r=o.alt,n=o.title),t=t||2,e=void 0===e?4*t:e,(r=\"string\"==typeof r?{text:r}:r||{}).text=r.text||null,r.id=r.text?r.id||\"qrcode-description\":null,(n=\"string\"==typeof n?{text:n}:n||{}).text=n.text||null,n.id=n.text?n.id||\"qrcode-title\":null;var i,a,s,u,h=w.getModuleCount()*t+2*e,c=\"\";for(u=\"l\"+t+\",0 0,\"+t+\" -\"+t+\",0 0,-\"+t+\"z \",c+='\",c+=n.text?''+k(n.text)+\" \":\"\",c+=r.text?''+k(r.text)+\" \":\"\",c+='',c+='')+\" \"},w.createDataURL=function(t,e){t=t||2,e=void 0===e?4*t:e;var r=w.getModuleCount()*t+2*e,n=e,o=r-e;return y(r,r,(function(e,r){if(n<=e&&e\"};var k=function(t){for(var e=\"\",r=0;r\":e+=\">\";break;case\"&\":e+=\"&\";break;case'\"':e+=\""\";break;default:e+=n}}return e};return w.createASCII=function(t,e){if((t=t||1)<2)return function(t){t=void 0===t?2:t;var e,r,n,o,i,a=1*w.getModuleCount()+2*t,s=t,u=a-t,h={\"██\":\"█\",\"█ \":\"▀\",\" █\":\"▄\",\" \":\" \"},c={\"██\":\"▀\",\"█ \":\"▀\",\" █\":\" \",\" \":\" \"},l=\"\";for(e=0;e=u?c[i]:h[i];l+=\"\\n\"}return a%2&&t>0?l.substring(0,l.length-a-1)+Array(a+1).join(\"▀\"):l.substring(0,l.length-1)}(e);t-=1,e=void 0===e?2*t:e;var r,n,o,i,a=w.getModuleCount()*t+2*e,s=e,u=a-e,h=Array(t+1).join(\"██\"),c=Array(t+1).join(\" \"),l=\"\",d=\"\";for(r=0;r>>8),e.push(255&a)):e.push(n)}}return e}};var e,r,n,o,i,a={L:1,M:0,Q:3,H:2},s=(e=[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],r=1335,n=7973,i=function(t){for(var e=0;0!=t;)e+=1,t>>>=1;return e},(o={}).getBCHTypeInfo=function(t){for(var e=t<<10;i(e)-i(r)>=0;)e^=r<=0;)e^=n<5&&(r+=3+i-5)}for(n=0;n=256;)e-=255;return t[e]}}}();function h(t,e){if(void 0===t.length)throw t.length+\"/\"+e;var r=function(){for(var r=0;r>>7-e%8&1)},put:function(t,e){for(var n=0;n>>e-n-1&1))},getLengthInBits:function(){return e},putBit:function(r){var n=Math.floor(e/8);t.length<=n&&t.push(0),r&&(t[n]|=128>>>e%8),e+=1}};return r},d=function(t){var e=t,r={getMode:function(){return 1},getLength:function(t){return e.length},write:function(t){for(var r=e,o=0;o+2>>8&255)+(255&o),t.put(o,13),r+=2}if(r>>8)},writeBytes:function(t,r,n){r=r||0,n=n||t.length;for(var o=0;o0&&(e+=\",\"),e+=t[r];return e+\"]\"}};return e},w=function(t){var e=t,r=0,n=0,o=0,i={read:function(){for(;o<8;){if(r>=e.length){if(0==o)return-1;throw\"unexpected end of file./\"+o}var t=e.charAt(r);if(r+=1,\"=\"==t)return o=0,-1;t.match(/^\\s$/)||(n=n<<6|a(t.charCodeAt(0)),o+=6)}var i=n>>>o-8&255;return o-=8,i}},a=function(t){if(65<=t&&t<=90)return t-65;if(97<=t&&t<=122)return t-97+26;if(48<=t&&t<=57)return t-48+52;if(43==t)return 62;if(47==t)return 63;throw\"c:\"+t};return i},y=function(t,e,r){for(var n=function(t,e){var r=t,n=e,o=new Array(t*e),i={setPixel:function(t,e,n){o[e*r+t]=n},write:function(t){t.writeString(\"GIF87a\"),t.writeShort(r),t.writeShort(n),t.writeByte(128),t.writeByte(0),t.writeByte(0),t.writeByte(0),t.writeByte(0),t.writeByte(0),t.writeByte(255),t.writeByte(255),t.writeByte(255),t.writeString(\",\"),t.writeShort(0),t.writeShort(0),t.writeShort(r),t.writeShort(n),t.writeByte(0);var e=a(2);t.writeByte(2);for(var o=0;e.length-o>255;)t.writeByte(255),t.writeBytes(e,o,255),o+=255;t.writeByte(e.length-o),t.writeBytes(e,o,e.length-o),t.writeByte(0),t.writeString(\";\")}},a=function(t){for(var e=1<>>e!=0)throw\"length over\";for(;h+e>=8;)u.writeByte(255&(t<>>=8-h,c=0,h=0;c|=t<0&&u.writeByte(c)}});d.write(e,n);var f=0,g=String.fromCharCode(o[f]);for(f+=1;f=6;)i(t>>>e-6),e-=6},o.flush=function(){if(e>0&&(i(t<<6-e),t=0,e=0),r%3!=0)for(var o=3-r%3,a=0;a>6,128|63&n):n<55296||n>=57344?e.push(224|n>>12,128|n>>6&63,128|63&n):(r++,n=65536+((1023&n)<<10|1023&t.charCodeAt(r)),e.push(240|n>>18,128|n>>12&63,128|n>>6&63,128|63&n))}return e}(t)},void 0===(n=\"function\"==typeof(r=function(){return o})?r.apply(e,[]):r)||(t.exports=n)},676:(t,e,r)=>{\"use strict\";r.d(e,{default:()=>q});var n=function(){return(n=Object.assign||function(t){for(var e,r=1,n=arguments.length;r0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]2||i&&a||s&&u)this._basicSquare({x:e,y:r,size:n,rotation:0});else{if(2===h){var c=0;return i&&s?c=Math.PI/2:s&&a?c=Math.PI:a&&u&&(c=-Math.PI/2),void this._basicCornerRounded({x:e,y:r,size:n,rotation:c})}if(1===h)return c=0,s?c=Math.PI/2:a?c=Math.PI:u&&(c=-Math.PI/2),void this._basicSideRounded({x:e,y:r,size:n,rotation:c})}else this._basicDot({x:e,y:r,size:n,rotation:0})},t.prototype._drawExtraRounded=function(t){var e=t.x,r=t.y,n=t.size,o=t.getNeighbor,i=o?+o(-1,0):0,a=o?+o(1,0):0,s=o?+o(0,-1):0,u=o?+o(0,1):0,h=i+a+s+u;if(0!==h)if(h>2||i&&a||s&&u)this._basicSquare({x:e,y:r,size:n,rotation:0});else{if(2===h){var c=0;return i&&s?c=Math.PI/2:s&&a?c=Math.PI:a&&u&&(c=-Math.PI/2),void this._basicCornerExtraRounded({x:e,y:r,size:n,rotation:c})}if(1===h)return c=0,s?c=Math.PI/2:a?c=Math.PI:u&&(c=-Math.PI/2),void this._basicSideRounded({x:e,y:r,size:n,rotation:c})}else this._basicDot({x:e,y:r,size:n,rotation:0})},t.prototype._drawClassy=function(t){var e=t.x,r=t.y,n=t.size,o=t.getNeighbor,i=o?+o(-1,0):0,a=o?+o(1,0):0,s=o?+o(0,-1):0,u=o?+o(0,1):0;0!==i+a+s+u?i||s?a||u?this._basicSquare({x:e,y:r,size:n,rotation:0}):this._basicCornerRounded({x:e,y:r,size:n,rotation:Math.PI/2}):this._basicCornerRounded({x:e,y:r,size:n,rotation:-Math.PI/2}):this._basicCornersRounded({x:e,y:r,size:n,rotation:Math.PI/2})},t.prototype._drawClassyRounded=function(t){var e=t.x,r=t.y,n=t.size,o=t.getNeighbor,i=o?+o(-1,0):0,a=o?+o(1,0):0,s=o?+o(0,-1):0,u=o?+o(0,1):0;0!==i+a+s+u?i||s?a||u?this._basicSquare({x:e,y:r,size:n,rotation:0}):this._basicCornerExtraRounded({x:e,y:r,size:n,rotation:Math.PI/2}):this._basicCornerExtraRounded({x:e,y:r,size:n,rotation:-Math.PI/2}):this._basicCornersRounded({x:e,y:r,size:n,rotation:Math.PI/2})},t}();var d=function(){return(d=Object.assign||function(t){for(var e,r=1,n=arguments.length;r0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]n||o&&o=(e-i.hideXDots)/2&&t<(e+i.hideXDots)/2&&r>=(e-i.hideYDots)/2&&r<(e+i.hideYDots)/2||(null===(n=m[t])||void 0===n?void 0:n[r])||(null===(o=m[t-e+7])||void 0===o?void 0:o[r])||(null===(a=m[t])||void 0===a?void 0:a[r-e+7])||(null===(s=b[t])||void 0===s?void 0:s[r])||(null===(u=b[t-e+7])||void 0===u?void 0:u[r])||(null===(h=b[t])||void 0===h?void 0:h[r-e+7]))})),this.drawCorners(),this._options.image?[4,this.drawImage({width:i.width,height:i.height,count:e,dotSize:o})]:[3,4];case 3:f.sent(),f.label=4;case 4:return[2]}}))}))},t.prototype.drawBackground=function(){var t,e,r,n=this._element,o=this._options;if(n){var i=null===(t=o.backgroundOptions)||void 0===t?void 0:t.gradient,a=null===(e=o.backgroundOptions)||void 0===e?void 0:e.color;if((i||a)&&this._createColor({options:i,color:a,additionalRotation:0,x:0,y:0,height:o.height,width:o.width,name:\"background-color\"}),null===(r=o.backgroundOptions)||void 0===r?void 0:r.round){var s=Math.min(o.width,o.height),u=document.createElementNS(\"http://www.w3.org/2000/svg\",\"rect\");this._backgroundClipPath=document.createElementNS(\"http://www.w3.org/2000/svg\",\"clipPath\"),this._backgroundClipPath.setAttribute(\"id\",\"clip-path-background-color\"),this._defs.appendChild(this._backgroundClipPath),u.setAttribute(\"x\",String((o.width-s)/2)),u.setAttribute(\"y\",String((o.height-s)/2)),u.setAttribute(\"width\",String(s)),u.setAttribute(\"height\",String(s)),u.setAttribute(\"rx\",String(s/2*o.backgroundOptions.round)),this._backgroundClipPath.appendChild(u)}}},t.prototype.drawDots=function(t){var e,r,n=this;if(!this._qr)throw\"QR code is not defined\";var o=this._options,i=this._qr.getModuleCount();if(i>o.width||i>o.height)throw\"The canvas is too small.\";var a=Math.min(o.width,o.height)-2*o.margin,s=o.shape===v?a/Math.sqrt(2):a,u=Math.floor(s/i),h=Math.floor((o.width-i*u)/2),c=Math.floor((o.height-i*u)/2),d=new l({svg:this._element,type:o.dotsOptions.type});this._dotsClipPath=document.createElementNS(\"http://www.w3.org/2000/svg\",\"clipPath\"),this._dotsClipPath.setAttribute(\"id\",\"clip-path-dot-color\"),this._defs.appendChild(this._dotsClipPath),this._createColor({options:null===(e=o.dotsOptions)||void 0===e?void 0:e.gradient,color:o.dotsOptions.color,additionalRotation:0,x:0,y:0,height:o.height,width:o.width,name:\"dot-color\"});for(var f=function(e){for(var o=function(o){return t&&!t(e,o)?\"continue\":(null===(r=g._qr)||void 0===r?void 0:r.isDark(e,o))?(d.draw(h+e*u,c+o*u,u,(function(r,a){return!(e+r<0||o+a<0||e+r>=i||o+a>=i)&&!(t&&!t(e+r,o+a))&&!!n._qr&&n._qr.isDark(e+r,o+a)})),void(d._element&&g._dotsClipPath&&g._dotsClipPath.appendChild(d._element))):\"continue\"},a=0;a=w-1&&p<=y-w&&S>=w-1&&S<=y-w||Math.sqrt((p-x)*(p-x)+(S-x)*(S-x))>x?_[p][S]=0:_[p][S]=this._qr.isDark(S-2*w<0?S:S>=i?S-2*w:S-w,p-2*w<0?p:p>=i?p-2*w:p-w)?1:0}var M=function(t){for(var e=function(e){if(!_[t][e])return\"continue\";d.draw(m+t*u,b+e*u,u,(function(r,n){var o;return!!(null===(o=_[t+r])||void 0===o?void 0:o[e+n])})),d._element&&C._dotsClipPath&&C._dotsClipPath.appendChild(d._element)},r=0;ra?s:a,c=document.createElementNS(\"http://www.w3.org/2000/svg\",\"rect\");if(c.setAttribute(\"x\",String(o)),c.setAttribute(\"y\",String(i)),c.setAttribute(\"height\",String(a)),c.setAttribute(\"width\",String(s)),c.setAttribute(\"clip-path\",\"url('#clip-path-\"+u+\"')\"),e){var l;if(\"radial\"===e.type)(l=document.createElementNS(\"http://www.w3.org/2000/svg\",\"radialGradient\")).setAttribute(\"id\",u),l.setAttribute(\"gradientUnits\",\"userSpaceOnUse\"),l.setAttribute(\"fx\",String(o+s/2)),l.setAttribute(\"fy\",String(i+a/2)),l.setAttribute(\"cx\",String(o+s/2)),l.setAttribute(\"cy\",String(i+a/2)),l.setAttribute(\"r\",String(h/2));else{var d=((e.rotation||0)+n)%(2*Math.PI),f=(d+2*Math.PI)%(2*Math.PI),g=o+s/2,p=i+a/2,v=o+s/2,w=i+a/2;f>=0&&f<=.25*Math.PI||f>1.75*Math.PI&&f<=2*Math.PI?(g-=s/2,p-=a/2*Math.tan(d),v+=s/2,w+=a/2*Math.tan(d)):f>.25*Math.PI&&f<=.75*Math.PI?(p-=a/2,g-=s/2/Math.tan(d),w+=a/2,v+=s/2/Math.tan(d)):f>.75*Math.PI&&f<=1.25*Math.PI?(g+=s/2,p+=a/2*Math.tan(d),v-=s/2,w-=a/2*Math.tan(d)):f>1.25*Math.PI&&f<=1.75*Math.PI&&(p+=a/2,g+=s/2/Math.tan(d),w-=a/2,v-=s/2/Math.tan(d)),(l=document.createElementNS(\"http://www.w3.org/2000/svg\",\"linearGradient\")).setAttribute(\"id\",u),l.setAttribute(\"gradientUnits\",\"userSpaceOnUse\"),l.setAttribute(\"x1\",String(Math.round(g))),l.setAttribute(\"y1\",String(Math.round(p))),l.setAttribute(\"x2\",String(Math.round(v))),l.setAttribute(\"y2\",String(Math.round(w)))}e.colorStops.forEach((function(t){var e=t.offset,r=t.color,n=document.createElementNS(\"http://www.w3.org/2000/svg\",\"stop\");n.setAttribute(\"offset\",100*e+\"%\"),n.setAttribute(\"stop-color\",r),l.appendChild(n)})),c.setAttribute(\"fill\",\"url('#\"+u+\"')\"),this._defs.appendChild(l)}else r&&c.setAttribute(\"fill\",r);this._element.appendChild(c)},t}(),x=\"canvas\";for(var S={},M=0;M<=40;M++)S[M]=M;const C={type:x,shape:\"square\",width:300,height:300,data:\"\",margin:0,qrOptions:{typeNumber:S[0],mode:void 0,errorCorrectionLevel:\"Q\"},imageOptions:{hideBackgroundDots:!0,imageSize:.4,crossOrigin:void 0,margin:0},dotsOptions:{type:\"square\",color:\"#000\"},backgroundOptions:{round:0,color:\"#fff\"}};var A=function(){return(A=Object.assign||function(t){for(var e,r=1,n=arguments.length;rMath.min(e.width,e.height)&&(e.margin=Math.min(e.width,e.height)),e.dotsOptions=A({},e.dotsOptions),e.dotsOptions.gradient&&(e.dotsOptions.gradient=k(e.dotsOptions.gradient)),e.cornersSquareOptions&&(e.cornersSquareOptions=A({},e.cornersSquareOptions),e.cornersSquareOptions.gradient&&(e.cornersSquareOptions.gradient=k(e.cornersSquareOptions.gradient))),e.cornersDotOptions&&(e.cornersDotOptions=A({},e.cornersDotOptions),e.cornersDotOptions.gradient&&(e.cornersDotOptions.gradient=k(e.cornersDotOptions.gradient))),e.backgroundOptions&&(e.backgroundOptions=A({},e.backgroundOptions),e.backgroundOptions.gradient&&(e.backgroundOptions.gradient=k(e.backgroundOptions.gradient))),e}var D=r(192),P=r.n(D),z=function(t,e,r,n){return new(r||(r=Promise))((function(o,i){function a(t){try{u(n.next(t))}catch(t){i(t)}}function s(t){try{u(n.throw(t))}catch(t){i(t)}}function u(t){var e;t.done?o(t.value):(e=t.value,e instanceof r?e:new r((function(t){t(e)}))).then(a,s)}u((n=n.apply(t,e||[])).next())}))},B=function(t,e){var r,n,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:s(0),throw:s(1),return:s(2)},\"function\"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(i){return function(s){return function(i){if(r)throw new TypeError(\"Generator is already executing.\");for(;a;)try{if(r=1,n&&(o=2&i[0]?n.return:i[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,i[1])).done)return o;switch(n=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,n=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!((o=(o=a.trys).length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]\\r\\n'+n],{type:\"image/svg+xml\"})]):[2,new Promise((function(r){return e.toBlob(r,\"image/\"+t,1)}))]:[2,null]}}))}))},t.prototype.download=function(t){return z(this,void 0,void 0,(function(){var e,r,n,o,i;return B(this,(function(a){switch(a.label){case 0:if(!this._qr)throw\"QR code is empty\";return e=\"png\",r=\"qr\",\"string\"==typeof t?(e=t,console.warn(\"Extension is deprecated as argument for 'download' method, please pass object { name: '...', extension: '...' } as argument\")):\"object\"==typeof t&&null!==t&&(t.name&&(r=t.name),t.extension&&(e=t.extension)),[4,this._getElement(e)];case 1:return(n=a.sent())?(\"svg\"===e.toLowerCase()?(o=new XMLSerializer,i='\\r\\n'+(i=o.serializeToString(n)),s(\"data:image/svg+xml;charset=utf-8,\"+encodeURIComponent(i),r+\".svg\")):s(n.toDataURL(\"image/\"+e),r+\".\"+e),[2]):[2]}}))}))},t}()}},e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={exports:{}};return t[n](o,o.exports,r),o.exports}return r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r(676)})().default}));\n//# sourceMappingURL=qr-code-styling.js.map\n\n//# sourceURL=webpack://screenly-tracx/./node_modules/qr-code-styling/lib/qr-code-styling.js?");
+
+/***/ }),
+
+/***/ "./resources/js/main.js":
+/*!******************************!*\
+ !*** ./resources/js/main.js ***!
+ \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _styles_main_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../styles/main.css */ \"./resources/styles/main.css\");\n/* harmony import */ var qr_code_styling__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! qr-code-styling */ \"./node_modules/qr-code-styling/lib/qr-code-styling.js\");\n/* harmony import */ var qr_code_styling__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(qr_code_styling__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\nconst FORM_URL = 'https://tracx.me/kiqigo';\n\nfunction buildUrl() {\n const { location, hostname } = screenly.metadata;\n const queryParams = {\n src: 'screenly',\n loc: encodeURIComponent(location),\n placement: encodeURIComponent(hostname),\n };\n\n const queryString = Object.entries(queryParams)\n .map(([key, value]) => `${key}=${value}`)\n .join('&');\n\n return `${FORM_URL}?${queryString}`;\n}\nconst qrCode = new (qr_code_styling__WEBPACK_IMPORTED_MODULE_1___default())({\n width: 450,\n height: 450,\n type: \"svg\",\n shape: \"circle\",\n data: buildUrl(),\n dotsOptions: { color: \"#fff\" },\n backgroundOptions: { color: \"#00cd00\" }\n});\nqrCode.append(document.getElementById(\"qr-code-container\"));\n\n//# sourceURL=webpack://screenly-tracx/./resources/js/main.js?");
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/compat get default export */
+/******/ (() => {
+/******/ // getDefaultExport function for compatibility with non-harmony modules
+/******/ __webpack_require__.n = (module) => {
+/******/ var getter = module && module.__esModule ?
+/******/ () => (module['default']) :
+/******/ () => (module);
+/******/ __webpack_require__.d(getter, { a: getter });
+/******/ return getter;
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ // define getter functions for harmony exports
+/******/ __webpack_require__.d = (exports, definition) => {
+/******/ for(var key in definition) {
+/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ }
+/******/ }
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/************************************************************************/
+/******/
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ // This entry module can't be inlined because the eval devtool is used.
+/******/ var __webpack_exports__ = __webpack_require__("./resources/js/main.js");
+/******/
+/******/ })()
+;
\ No newline at end of file
diff --git a/edge-apps/tracx/build/static/main.css b/edge-apps/tracx/build/static/main.css
new file mode 100644
index 000000000..04f7dd489
--- /dev/null
+++ b/edge-apps/tracx/build/static/main.css
@@ -0,0 +1,2026 @@
+/*!***********************************************************************************************************************!*\
+ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./resources/styles/main.css ***!
+ \***********************************************************************************************************************/
+/*
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+*//*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+ box-sizing: border-box; /* 1 */
+ border-width: 0; /* 2 */
+ border-style: solid; /* 2 */
+ border-color: #e5e7eb; /* 2 */
+}
+
+::before,
+::after {
+ --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+ line-height: 1.5; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ -moz-tab-size: 4; /* 3 */
+ -o-tab-size: 4;
+ tab-size: 4; /* 3 */
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+ font-feature-settings: normal; /* 5 */
+ font-variation-settings: normal; /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+ margin: 0; /* 1 */
+ line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+ height: 0; /* 1 */
+ color: inherit; /* 2 */
+ border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+ color: inherit;
+ text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+ font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+ text-indent: 0; /* 1 */
+ border-color: inherit; /* 2 */
+ border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-feature-settings: inherit; /* 1 */
+ font-variation-settings: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ font-weight: inherit; /* 1 */
+ line-height: inherit; /* 1 */
+ color: inherit; /* 1 */
+ margin: 0; /* 2 */
+ padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+ text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+ -webkit-appearance: button; /* 1 */
+ background-color: transparent; /* 2 */
+ background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+ outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+ box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+ vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+ display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+ margin: 0;
+}
+
+fieldset {
+ margin: 0;
+ padding: 0;
+}
+
+legend {
+ padding: 0;
+}
+
+ol,
+ul,
+menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+ padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+ resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ opacity: 1; /* 1 */
+ color: #9ca3af; /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+ opacity: 1; /* 1 */
+ color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+ cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+ cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+ This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+ display: block; /* 1 */
+ vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+ max-width: 100%;
+ height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+ display: none;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+.container {
+ width: 100%;
+}
+@media (min-width: 640px) {
+
+ .container {
+ max-width: 640px;
+ }
+}
+@media (min-width: 768px) {
+
+ .container {
+ max-width: 768px;
+ }
+}
+@media (min-width: 1024px) {
+
+ .container {
+ max-width: 1024px;
+ }
+}
+@media (min-width: 1280px) {
+
+ .container {
+ max-width: 1280px;
+ }
+}
+@media (min-width: 1536px) {
+
+ .container {
+ max-width: 1536px;
+ }
+}
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+.not-sr-only {
+ position: static;
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin: 0;
+ overflow: visible;
+ clip: auto;
+ white-space: normal;
+}
+.pointer-events-none {
+ pointer-events: none;
+}
+.pointer-events-auto {
+ pointer-events: auto;
+}
+.visible {
+ visibility: visible;
+}
+.invisible {
+ visibility: hidden;
+}
+.collapse {
+ visibility: collapse;
+}
+.static {
+ position: static;
+}
+.\!fixed {
+ position: fixed !important;
+}
+.fixed {
+ position: fixed;
+}
+.absolute {
+ position: absolute;
+}
+.\!relative {
+ position: relative !important;
+}
+.relative {
+ position: relative;
+}
+.sticky {
+ position: sticky;
+}
+.-inset-1 {
+ inset: -0.25rem;
+}
+.inset-8 {
+ inset: 2rem;
+}
+.-left-32 {
+ left: -8rem;
+}
+.-top-32 {
+ top: -8rem;
+}
+.end-1 {
+ inset-inline-end: 0.25rem;
+}
+.isolate {
+ isolation: isolate;
+}
+.isolation-auto {
+ isolation: auto;
+}
+.float-right {
+ float: right;
+}
+.float-left {
+ float: left;
+}
+.float-none {
+ float: none;
+}
+.clear-left {
+ clear: left;
+}
+.clear-right {
+ clear: right;
+}
+.clear-both {
+ clear: both;
+}
+.clear-none {
+ clear: none;
+}
+.m-1 {
+ margin: 0.25rem;
+}
+.mt-16 {
+ margin-top: 4rem;
+}
+.mt-2 {
+ margin-top: 0.5rem;
+}
+.-mt-6 {
+ margin-top: -1.5rem;
+}
+.-mt-8 {
+ margin-top: -2rem;
+}
+.box-border {
+ box-sizing: border-box;
+}
+.box-content {
+ box-sizing: content-box;
+}
+.line-clamp-none {
+ overflow: visible;
+ display: block;
+ -webkit-box-orient: horizontal;
+ -webkit-line-clamp: none;
+}
+.\!block {
+ display: block !important;
+}
+.block {
+ display: block;
+}
+.inline-block {
+ display: inline-block;
+}
+.inline {
+ display: inline;
+}
+.flex {
+ display: flex;
+}
+.inline-flex {
+ display: inline-flex;
+}
+.table {
+ display: table;
+}
+.inline-table {
+ display: inline-table;
+}
+.table-caption {
+ display: table-caption;
+}
+.table-cell {
+ display: table-cell;
+}
+.table-column {
+ display: table-column;
+}
+.table-column-group {
+ display: table-column-group;
+}
+.table-footer-group {
+ display: table-footer-group;
+}
+.table-header-group {
+ display: table-header-group;
+}
+.table-row-group {
+ display: table-row-group;
+}
+.table-row {
+ display: table-row;
+}
+.flow-root {
+ display: flow-root;
+}
+.grid {
+ display: grid;
+}
+.inline-grid {
+ display: inline-grid;
+}
+.\!contents {
+ display: contents !important;
+}
+.contents {
+ display: contents;
+}
+.list-item {
+ display: list-item;
+}
+.hidden {
+ display: none;
+}
+.h-1 {
+ height: 0.25rem;
+}
+.h-full {
+ height: 100%;
+}
+.min-h-screen {
+ min-height: 100vh;
+}
+.w-\[2160px\] {
+ width: 2160px;
+}
+.w-full {
+ width: 100%;
+}
+.max-w-md {
+ max-width: 28rem;
+}
+.max-w-sm {
+ max-width: 24rem;
+}
+.flex-shrink {
+ flex-shrink: 1;
+}
+.shrink {
+ flex-shrink: 1;
+}
+.flex-grow {
+ flex-grow: 1;
+}
+.grow {
+ flex-grow: 1;
+}
+.table-auto {
+ table-layout: auto;
+}
+.table-fixed {
+ table-layout: fixed;
+}
+.caption-top {
+ caption-side: top;
+}
+.caption-bottom {
+ caption-side: bottom;
+}
+.border-collapse {
+ border-collapse: collapse;
+}
+.border-separate {
+ border-collapse: separate;
+}
+.-rotate-12 {
+ --tw-rotate: -12deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.\!transform {
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+}
+.transform {
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.transform-cpu {
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.transform-gpu {
+ transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.transform-none {
+ transform: none;
+}
+@keyframes pulse {
+
+ 50% {
+ opacity: .5;
+ }
+}
+.animate-pulse {
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.touch-auto {
+ touch-action: auto;
+}
+.touch-none {
+ touch-action: none;
+}
+.touch-pan-x {
+ --tw-pan-x: pan-x;
+ touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+}
+.touch-pan-left {
+ --tw-pan-x: pan-left;
+ touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+}
+.touch-pan-right {
+ --tw-pan-x: pan-right;
+ touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+}
+.touch-pan-y {
+ --tw-pan-y: pan-y;
+ touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+}
+.touch-pan-up {
+ --tw-pan-y: pan-up;
+ touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+}
+.touch-pan-down {
+ --tw-pan-y: pan-down;
+ touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+}
+.touch-pinch-zoom {
+ --tw-pinch-zoom: pinch-zoom;
+ touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+}
+.touch-manipulation {
+ touch-action: manipulation;
+}
+.select-none {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+.select-text {
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ user-select: text;
+}
+.select-all {
+ -webkit-user-select: all;
+ -moz-user-select: all;
+ user-select: all;
+}
+.select-auto {
+ -webkit-user-select: auto;
+ -moz-user-select: auto;
+ user-select: auto;
+}
+.resize-none {
+ resize: none;
+}
+.resize-y {
+ resize: vertical;
+}
+.resize-x {
+ resize: horizontal;
+}
+.resize {
+ resize: both;
+}
+.snap-none {
+ scroll-snap-type: none;
+}
+.snap-x {
+ scroll-snap-type: x var(--tw-scroll-snap-strictness);
+}
+.snap-y {
+ scroll-snap-type: y var(--tw-scroll-snap-strictness);
+}
+.snap-both {
+ scroll-snap-type: both var(--tw-scroll-snap-strictness);
+}
+.snap-mandatory {
+ --tw-scroll-snap-strictness: mandatory;
+}
+.snap-proximity {
+ --tw-scroll-snap-strictness: proximity;
+}
+.snap-start {
+ scroll-snap-align: start;
+}
+.snap-end {
+ scroll-snap-align: end;
+}
+.snap-center {
+ scroll-snap-align: center;
+}
+.snap-align-none {
+ scroll-snap-align: none;
+}
+.snap-normal {
+ scroll-snap-stop: normal;
+}
+.snap-always {
+ scroll-snap-stop: always;
+}
+.list-inside {
+ list-style-position: inside;
+}
+.list-outside {
+ list-style-position: outside;
+}
+.appearance-none {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+.break-before-auto {
+ -moz-column-break-before: auto;
+ break-before: auto;
+}
+.break-before-avoid {
+ -moz-column-break-before: avoid;
+ break-before: avoid;
+}
+.break-before-all {
+ -moz-column-break-before: all;
+ break-before: all;
+}
+.break-before-avoid-page {
+ -moz-column-break-before: avoid;
+ break-before: avoid-page;
+}
+.break-before-page {
+ -moz-column-break-before: page;
+ break-before: page;
+}
+.break-before-left {
+ -moz-column-break-before: left;
+ break-before: left;
+}
+.break-before-right {
+ -moz-column-break-before: right;
+ break-before: right;
+}
+.break-before-column {
+ -moz-column-break-before: column;
+ break-before: column;
+}
+.break-inside-auto {
+ -moz-column-break-inside: auto;
+ break-inside: auto;
+}
+.break-inside-avoid {
+ -moz-column-break-inside: avoid;
+ break-inside: avoid;
+}
+.break-inside-avoid-page {
+ break-inside: avoid-page;
+}
+.break-inside-avoid-column {
+ -moz-column-break-inside: avoid;
+ break-inside: avoid-column;
+}
+.break-after-auto {
+ -moz-column-break-after: auto;
+ break-after: auto;
+}
+.break-after-avoid {
+ -moz-column-break-after: avoid;
+ break-after: avoid;
+}
+.break-after-all {
+ -moz-column-break-after: all;
+ break-after: all;
+}
+.break-after-avoid-page {
+ -moz-column-break-after: avoid;
+ break-after: avoid-page;
+}
+.break-after-page {
+ -moz-column-break-after: page;
+ break-after: page;
+}
+.break-after-left {
+ -moz-column-break-after: left;
+ break-after: left;
+}
+.break-after-right {
+ -moz-column-break-after: right;
+ break-after: right;
+}
+.break-after-column {
+ -moz-column-break-after: column;
+ break-after: column;
+}
+.grid-flow-row {
+ grid-auto-flow: row;
+}
+.grid-flow-col {
+ grid-auto-flow: column;
+}
+.grid-flow-dense {
+ grid-auto-flow: dense;
+}
+.grid-flow-row-dense {
+ grid-auto-flow: row dense;
+}
+.grid-flow-col-dense {
+ grid-auto-flow: column dense;
+}
+.flex-row {
+ flex-direction: row;
+}
+.flex-row-reverse {
+ flex-direction: row-reverse;
+}
+.flex-col {
+ flex-direction: column;
+}
+.flex-col-reverse {
+ flex-direction: column-reverse;
+}
+.flex-wrap {
+ flex-wrap: wrap;
+}
+.flex-wrap-reverse {
+ flex-wrap: wrap-reverse;
+}
+.flex-nowrap {
+ flex-wrap: nowrap;
+}
+.place-content-center {
+ place-content: center;
+}
+.place-content-start {
+ place-content: start;
+}
+.place-content-end {
+ place-content: end;
+}
+.place-content-between {
+ place-content: space-between;
+}
+.place-content-around {
+ place-content: space-around;
+}
+.place-content-evenly {
+ place-content: space-evenly;
+}
+.place-content-baseline {
+ place-content: baseline;
+}
+.place-content-stretch {
+ place-content: stretch;
+}
+.place-items-start {
+ place-items: start;
+}
+.place-items-end {
+ place-items: end;
+}
+.place-items-center {
+ place-items: center;
+}
+.place-items-baseline {
+ place-items: baseline;
+}
+.place-items-stretch {
+ place-items: stretch;
+}
+.content-normal {
+ align-content: normal;
+}
+.content-center {
+ align-content: center;
+}
+.content-start {
+ align-content: flex-start;
+}
+.content-end {
+ align-content: flex-end;
+}
+.content-between {
+ align-content: space-between;
+}
+.content-around {
+ align-content: space-around;
+}
+.content-evenly {
+ align-content: space-evenly;
+}
+.content-baseline {
+ align-content: baseline;
+}
+.content-stretch {
+ align-content: stretch;
+}
+.items-start {
+ align-items: flex-start;
+}
+.items-end {
+ align-items: flex-end;
+}
+.items-center {
+ align-items: center;
+}
+.items-baseline {
+ align-items: baseline;
+}
+.items-stretch {
+ align-items: stretch;
+}
+.justify-normal {
+ justify-content: normal;
+}
+.justify-start {
+ justify-content: flex-start;
+}
+.justify-end {
+ justify-content: flex-end;
+}
+.justify-center {
+ justify-content: center;
+}
+.justify-between {
+ justify-content: space-between;
+}
+.justify-around {
+ justify-content: space-around;
+}
+.justify-evenly {
+ justify-content: space-evenly;
+}
+.justify-stretch {
+ justify-content: stretch;
+}
+.justify-items-start {
+ justify-items: start;
+}
+.justify-items-end {
+ justify-items: end;
+}
+.justify-items-center {
+ justify-items: center;
+}
+.justify-items-stretch {
+ justify-items: stretch;
+}
+.gap-5 {
+ gap: 1.25rem;
+}
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 1;
+}
+.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 1;
+}
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-x-reverse: 0;
+ border-right-width: calc(1px * var(--tw-divide-x-reverse));
+ border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-y-reverse: 0;
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-y-reverse: 1;
+}
+.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
+ --tw-divide-x-reverse: 1;
+}
+.divide-solid > :not([hidden]) ~ :not([hidden]) {
+ border-style: solid;
+}
+.divide-dashed > :not([hidden]) ~ :not([hidden]) {
+ border-style: dashed;
+}
+.divide-dotted > :not([hidden]) ~ :not([hidden]) {
+ border-style: dotted;
+}
+.divide-double > :not([hidden]) ~ :not([hidden]) {
+ border-style: double;
+}
+.divide-none > :not([hidden]) ~ :not([hidden]) {
+ border-style: none;
+}
+.place-self-auto {
+ place-self: auto;
+}
+.place-self-start {
+ place-self: start;
+}
+.place-self-end {
+ place-self: end;
+}
+.place-self-center {
+ place-self: center;
+}
+.place-self-stretch {
+ place-self: stretch;
+}
+.self-auto {
+ align-self: auto;
+}
+.self-start {
+ align-self: flex-start;
+}
+.self-end {
+ align-self: flex-end;
+}
+.self-center {
+ align-self: center;
+}
+.self-stretch {
+ align-self: stretch;
+}
+.self-baseline {
+ align-self: baseline;
+}
+.justify-self-auto {
+ justify-self: auto;
+}
+.justify-self-start {
+ justify-self: start;
+}
+.justify-self-end {
+ justify-self: end;
+}
+.justify-self-center {
+ justify-self: center;
+}
+.justify-self-stretch {
+ justify-self: stretch;
+}
+.overflow-auto {
+ overflow: auto;
+}
+.overflow-hidden {
+ overflow: hidden;
+}
+.overflow-clip {
+ overflow: clip;
+}
+.overflow-visible {
+ overflow: visible;
+}
+.overflow-scroll {
+ overflow: scroll;
+}
+.overflow-x-auto {
+ overflow-x: auto;
+}
+.overflow-y-auto {
+ overflow-y: auto;
+}
+.overflow-x-hidden {
+ overflow-x: hidden;
+}
+.overflow-y-hidden {
+ overflow-y: hidden;
+}
+.overflow-x-clip {
+ overflow-x: clip;
+}
+.overflow-y-clip {
+ overflow-y: clip;
+}
+.overflow-x-visible {
+ overflow-x: visible;
+}
+.overflow-y-visible {
+ overflow-y: visible;
+}
+.overflow-x-scroll {
+ overflow-x: scroll;
+}
+.overflow-y-scroll {
+ overflow-y: scroll;
+}
+.overscroll-auto {
+ overscroll-behavior: auto;
+}
+.overscroll-contain {
+ overscroll-behavior: contain;
+}
+.overscroll-none {
+ overscroll-behavior: none;
+}
+.overscroll-y-auto {
+ overscroll-behavior-y: auto;
+}
+.overscroll-y-contain {
+ overscroll-behavior-y: contain;
+}
+.overscroll-y-none {
+ overscroll-behavior-y: none;
+}
+.overscroll-x-auto {
+ overscroll-behavior-x: auto;
+}
+.overscroll-x-contain {
+ overscroll-behavior-x: contain;
+}
+.overscroll-x-none {
+ overscroll-behavior-x: none;
+}
+.scroll-auto {
+ scroll-behavior: auto;
+}
+.scroll-smooth {
+ scroll-behavior: smooth;
+}
+.truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.overflow-ellipsis {
+ text-overflow: ellipsis;
+}
+.text-ellipsis {
+ text-overflow: ellipsis;
+}
+.text-clip {
+ text-overflow: clip;
+}
+.hyphens-none {
+ -webkit-hyphens: none;
+ hyphens: none;
+}
+.hyphens-manual {
+ -webkit-hyphens: manual;
+ hyphens: manual;
+}
+.hyphens-auto {
+ -webkit-hyphens: auto;
+ hyphens: auto;
+}
+.whitespace-normal {
+ white-space: normal;
+}
+.whitespace-nowrap {
+ white-space: nowrap;
+}
+.whitespace-pre {
+ white-space: pre;
+}
+.whitespace-pre-line {
+ white-space: pre-line;
+}
+.whitespace-pre-wrap {
+ white-space: pre-wrap;
+}
+.whitespace-break-spaces {
+ white-space: break-spaces;
+}
+.break-normal {
+ overflow-wrap: normal;
+ word-break: normal;
+}
+.break-words {
+ overflow-wrap: break-word;
+}
+.break-all {
+ word-break: break-all;
+}
+.break-keep {
+ word-break: keep-all;
+}
+.rounded {
+ border-radius: 0.25rem;
+}
+.rounded-b {
+ border-bottom-right-radius: 0.25rem;
+ border-bottom-left-radius: 0.25rem;
+}
+.rounded-e {
+ border-start-end-radius: 0.25rem;
+ border-end-end-radius: 0.25rem;
+}
+.rounded-l {
+ border-top-left-radius: 0.25rem;
+ border-bottom-left-radius: 0.25rem;
+}
+.rounded-r {
+ border-top-right-radius: 0.25rem;
+ border-bottom-right-radius: 0.25rem;
+}
+.rounded-s {
+ border-start-start-radius: 0.25rem;
+ border-end-start-radius: 0.25rem;
+}
+.rounded-t {
+ border-top-left-radius: 0.25rem;
+ border-top-right-radius: 0.25rem;
+}
+.rounded-bl {
+ border-bottom-left-radius: 0.25rem;
+}
+.rounded-br {
+ border-bottom-right-radius: 0.25rem;
+}
+.rounded-ee {
+ border-end-end-radius: 0.25rem;
+}
+.rounded-es {
+ border-end-start-radius: 0.25rem;
+}
+.rounded-se {
+ border-start-end-radius: 0.25rem;
+}
+.rounded-ss {
+ border-start-start-radius: 0.25rem;
+}
+.rounded-tl {
+ border-top-left-radius: 0.25rem;
+}
+.rounded-tr {
+ border-top-right-radius: 0.25rem;
+}
+.border {
+ border-width: 1px;
+}
+.border-x {
+ border-left-width: 1px;
+ border-right-width: 1px;
+}
+.border-y {
+ border-top-width: 1px;
+ border-bottom-width: 1px;
+}
+.border-b {
+ border-bottom-width: 1px;
+}
+.border-e {
+ border-inline-end-width: 1px;
+}
+.border-l {
+ border-left-width: 1px;
+}
+.border-r {
+ border-right-width: 1px;
+}
+.border-s {
+ border-inline-start-width: 1px;
+}
+.border-t {
+ border-top-width: 1px;
+}
+.border-solid {
+ border-style: solid;
+}
+.border-dashed {
+ border-style: dashed;
+}
+.border-dotted {
+ border-style: dotted;
+}
+.border-double {
+ border-style: double;
+}
+.border-hidden {
+ border-style: hidden;
+}
+.border-none {
+ border-style: none;
+}
+.bg-\[\#00cd00\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 205 0 / var(--tw-bg-opacity));
+}
+.bg-\[rgb\(255\2c 0\2c 0\)\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+}
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.decoration-slice {
+ -webkit-box-decoration-break: slice;
+ box-decoration-break: slice;
+}
+.decoration-clone {
+ -webkit-box-decoration-break: clone;
+ box-decoration-break: clone;
+}
+.box-decoration-slice {
+ -webkit-box-decoration-break: slice;
+ box-decoration-break: slice;
+}
+.box-decoration-clone {
+ -webkit-box-decoration-break: clone;
+ box-decoration-break: clone;
+}
+.bg-fixed {
+ background-attachment: fixed;
+}
+.bg-local {
+ background-attachment: local;
+}
+.bg-scroll {
+ background-attachment: scroll;
+}
+.bg-clip-border {
+ background-clip: border-box;
+}
+.bg-clip-padding {
+ background-clip: padding-box;
+}
+.bg-clip-content {
+ background-clip: content-box;
+}
+.bg-clip-text {
+ -webkit-background-clip: text;
+ background-clip: text;
+}
+.bg-repeat {
+ background-repeat: repeat;
+}
+.bg-no-repeat {
+ background-repeat: no-repeat;
+}
+.bg-repeat-x {
+ background-repeat: repeat-x;
+}
+.bg-repeat-y {
+ background-repeat: repeat-y;
+}
+.bg-repeat-round {
+ background-repeat: round;
+}
+.bg-repeat-space {
+ background-repeat: space;
+}
+.bg-origin-border {
+ background-origin: border-box;
+}
+.bg-origin-padding {
+ background-origin: padding-box;
+}
+.bg-origin-content {
+ background-origin: content-box;
+}
+.object-contain {
+ -o-object-fit: contain;
+ object-fit: contain;
+}
+.object-cover {
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+.object-fill {
+ -o-object-fit: fill;
+ object-fit: fill;
+}
+.object-none {
+ -o-object-fit: none;
+ object-fit: none;
+}
+.object-scale-down {
+ -o-object-fit: scale-down;
+ object-fit: scale-down;
+}
+.p-1 {
+ padding: 0.25rem;
+}
+.p-8 {
+ padding: 2rem;
+}
+.px-2 {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+.text-left {
+ text-align: left;
+}
+.text-center {
+ text-align: center;
+}
+.text-right {
+ text-align: right;
+}
+.text-justify {
+ text-align: justify;
+}
+.text-start {
+ text-align: start;
+}
+.text-end {
+ text-align: end;
+}
+.align-baseline {
+ vertical-align: baseline;
+}
+.align-top {
+ vertical-align: top;
+}
+.align-middle {
+ vertical-align: middle;
+}
+.align-bottom {
+ vertical-align: bottom;
+}
+.align-text-top {
+ vertical-align: text-top;
+}
+.align-text-bottom {
+ vertical-align: text-bottom;
+}
+.align-sub {
+ vertical-align: sub;
+}
+.align-super {
+ vertical-align: super;
+}
+.text-\[4rem\] {
+ font-size: 4rem;
+}
+.font-black {
+ font-weight: 900;
+}
+.font-bold {
+ font-weight: 700;
+}
+.uppercase {
+ text-transform: uppercase;
+}
+.lowercase {
+ text-transform: lowercase;
+}
+.capitalize {
+ text-transform: capitalize;
+}
+.normal-case {
+ text-transform: none;
+}
+.italic {
+ font-style: italic;
+}
+.not-italic {
+ font-style: normal;
+}
+.normal-nums {
+ font-variant-numeric: normal;
+}
+.ordinal {
+ --tw-ordinal: ordinal;
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.slashed-zero {
+ --tw-slashed-zero: slashed-zero;
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.lining-nums {
+ --tw-numeric-figure: lining-nums;
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.oldstyle-nums {
+ --tw-numeric-figure: oldstyle-nums;
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.proportional-nums {
+ --tw-numeric-spacing: proportional-nums;
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.tabular-nums {
+ --tw-numeric-spacing: tabular-nums;
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.diagonal-fractions {
+ --tw-numeric-fraction: diagonal-fractions;
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.stacked-fractions {
+ --tw-numeric-fraction: stacked-fractions;
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.leading-none {
+ line-height: 1;
+}
+.text-\[\#336699\]\/\[\.35\] {
+ color: rgb(51 102 153 / .35);
+}
+.text-blue-500 {
+ --tw-text-opacity: 1;
+ color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+.text-white\/20 {
+ color: rgb(255 255 255 / 0.2);
+}
+.underline {
+ text-decoration-line: underline;
+}
+.overline {
+ text-decoration-line: overline;
+}
+.line-through {
+ text-decoration-line: line-through;
+}
+.no-underline {
+ text-decoration-line: none;
+}
+.decoration-solid {
+ text-decoration-style: solid;
+}
+.decoration-double {
+ text-decoration-style: double;
+}
+.decoration-dotted {
+ text-decoration-style: dotted;
+}
+.decoration-dashed {
+ text-decoration-style: dashed;
+}
+.decoration-wavy {
+ text-decoration-style: wavy;
+}
+.antialiased {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+.subpixel-antialiased {
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.bg-blend-normal {
+ background-blend-mode: normal;
+}
+.bg-blend-multiply {
+ background-blend-mode: multiply;
+}
+.bg-blend-screen {
+ background-blend-mode: screen;
+}
+.bg-blend-overlay {
+ background-blend-mode: overlay;
+}
+.bg-blend-darken {
+ background-blend-mode: darken;
+}
+.bg-blend-lighten {
+ background-blend-mode: lighten;
+}
+.bg-blend-color-dodge {
+ background-blend-mode: color-dodge;
+}
+.bg-blend-color-burn {
+ background-blend-mode: color-burn;
+}
+.bg-blend-hard-light {
+ background-blend-mode: hard-light;
+}
+.bg-blend-soft-light {
+ background-blend-mode: soft-light;
+}
+.bg-blend-difference {
+ background-blend-mode: difference;
+}
+.bg-blend-exclusion {
+ background-blend-mode: exclusion;
+}
+.bg-blend-hue {
+ background-blend-mode: hue;
+}
+.bg-blend-saturation {
+ background-blend-mode: saturation;
+}
+.bg-blend-color {
+ background-blend-mode: color;
+}
+.bg-blend-luminosity {
+ background-blend-mode: luminosity;
+}
+.mix-blend-normal {
+ mix-blend-mode: normal;
+}
+.mix-blend-multiply {
+ mix-blend-mode: multiply;
+}
+.mix-blend-screen {
+ mix-blend-mode: screen;
+}
+.mix-blend-overlay {
+ mix-blend-mode: overlay;
+}
+.mix-blend-darken {
+ mix-blend-mode: darken;
+}
+.mix-blend-lighten {
+ mix-blend-mode: lighten;
+}
+.mix-blend-color-dodge {
+ mix-blend-mode: color-dodge;
+}
+.mix-blend-color-burn {
+ mix-blend-mode: color-burn;
+}
+.mix-blend-hard-light {
+ mix-blend-mode: hard-light;
+}
+.mix-blend-soft-light {
+ mix-blend-mode: soft-light;
+}
+.mix-blend-difference {
+ mix-blend-mode: difference;
+}
+.mix-blend-exclusion {
+ mix-blend-mode: exclusion;
+}
+.mix-blend-hue {
+ mix-blend-mode: hue;
+}
+.mix-blend-saturation {
+ mix-blend-mode: saturation;
+}
+.mix-blend-color {
+ mix-blend-mode: color;
+}
+.mix-blend-luminosity {
+ mix-blend-mode: luminosity;
+}
+.mix-blend-plus-lighter {
+ mix-blend-mode: plus-lighter;
+}
+.\!shadow {
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
+.shadow {
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.outline-none {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+.outline {
+ outline-style: solid;
+}
+.outline-dashed {
+ outline-style: dashed;
+}
+.outline-dotted {
+ outline-style: dotted;
+}
+.outline-double {
+ outline-style: double;
+}
+.ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.ring-inset {
+ --tw-ring-inset: inset;
+}
+.blur {
+ --tw-blur: blur(8px);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.drop-shadow {
+ --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.grayscale {
+ --tw-grayscale: grayscale(100%);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.invert {
+ --tw-invert: invert(100%);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.sepia {
+ --tw-sepia: sepia(100%);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.\!filter {
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+}
+.filter {
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.filter-none {
+ filter: none;
+}
+.backdrop-blur {
+ --tw-backdrop-blur: blur(8px);
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+.backdrop-grayscale {
+ --tw-backdrop-grayscale: grayscale(100%);
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+.backdrop-invert {
+ --tw-backdrop-invert: invert(100%);
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+.backdrop-sepia {
+ --tw-backdrop-sepia: sepia(100%);
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+.backdrop-filter {
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+.backdrop-filter-none {
+ -webkit-backdrop-filter: none;
+ backdrop-filter: none;
+}
+.transition {
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+.ease-in {
+ transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+.ease-in-out {
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.ease-out {
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+.content-\[\'this-is-also-valid\]-weirdly-enough\'\] {
+ --tw-content: 'this-is-also-valid]-weirdly-enough';
+ content: var(--tw-content);
+}
+.\[hash\:base64\] {
+ hash: base64;
+}
+@media (min-width: 640px) {
+
+ .sm\:container {
+ width: 100%;
+ }
+
+ @media (min-width: 640px) {
+
+ .sm\:container {
+ max-width: 640px;
+ }
+ }
+
+ @media (min-width: 768px) {
+
+ .sm\:container {
+ max-width: 768px;
+ }
+ }
+
+ @media (min-width: 1024px) {
+
+ .sm\:container {
+ max-width: 1024px;
+ }
+ }
+
+ @media (min-width: 1280px) {
+
+ .sm\:container {
+ max-width: 1280px;
+ }
+ }
+
+ @media (min-width: 1536px) {
+
+ .sm\:container {
+ max-width: 1536px;
+ }
+ }
+}
+.hover\:font-bold:hover {
+ font-weight: 700;
+}
+.before\:hover\:text-center:hover::before {
+ content: var(--tw-content);
+ text-align: center;
+}
+.hover\:before\:text-center:hover::before {
+ content: var(--tw-content);
+ text-align: center;
+}
+.focus\:hover\:text-center:hover:focus {
+ text-align: center;
+}
+.hover\:focus\:text-center:focus:hover {
+ text-align: center;
+}
+@media (min-width: 640px) {
+
+ .sm\:max-w-xs {
+ max-width: 20rem;
+ }
+
+ .sm\:underline {
+ text-decoration-line: underline;
+ }
+}
+@media (min-width: 768px) {
+
+ .md\:grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+@media (prefers-color-scheme: dark) {
+
+ @media (min-width: 1024px) {
+
+ .dark\:lg\:hover\:\[paint-order\:markers\]:hover {
+ paint-order: markers;
+ }
+ }
+}
diff --git a/edge-apps/tracx/build/tailwind.config.js b/edge-apps/tracx/build/tailwind.config.js
new file mode 100644
index 000000000..098ae92d2
--- /dev/null
+++ b/edge-apps/tracx/build/tailwind.config.js
@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ purge: ['./**/*.html', './**/*.js'], // adjust paths as needed
+}
diff --git a/edge-apps/tracx/build/webpack.config.js b/edge-apps/tracx/build/webpack.config.js
new file mode 100644
index 000000000..49bbaf7b5
--- /dev/null
+++ b/edge-apps/tracx/build/webpack.config.js
@@ -0,0 +1,29 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+module.exports = {
+ entry: './resources/js/main.js', // Entry file
+ mode: 'development',
+ output: {
+ filename: 'bundle.js', // Output bundle file
+ path: path.resolve(__dirname, 'static'), // Output directory
+ },
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ MiniCssExtractPlugin.loader, // Extracts CSS into separate files
+ 'css-loader', // Translates CSS into CommonJS
+ 'postcss-loader', // Processes CSS with PostCSS (for Tailwind)
+ ],
+ },
+ ],
+ },
+ plugins: [
+ new MiniCssExtractPlugin({
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
+ ],
+};
\ No newline at end of file
diff --git a/edge-apps/tracx/index.html b/edge-apps/tracx/index.html
new file mode 100644
index 000000000..5554accf0
--- /dev/null
+++ b/edge-apps/tracx/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+ QR Code Generator
+
+
+
+
+
+
Heading here
+
Subheading here
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/edge-apps/tracx/resources/js/main.js b/edge-apps/tracx/resources/js/main.js
new file mode 100644
index 000000000..f8f3b6c56
--- /dev/null
+++ b/edge-apps/tracx/resources/js/main.js
@@ -0,0 +1,48 @@
+import Alpine from 'alpinejs';
+import '../styles/main.css';
+import QRCodeStyling from "qr-code-styling";
+
+Alpine.store('core', {
+ style: getStyle(),
+ settings: screenly.settings,
+ metadata: screenly.metadata,
+});
+
+function buildUrl() {
+ const { location, hostname } = screenly.metadata;
+ const queryParams = {
+ src: 'screenly',
+ loc: encodeURIComponent(location),
+ placement: encodeURIComponent(hostname),
+ };
+
+ const queryString = Object.entries(queryParams)
+ .map(([key, value]) => `${key}=${value}`)
+ .join('&');
+
+ return `${screenly.settings.url}?${queryString}`;
+}
+
+function getStyle(){
+ return {
+ logo_url: 'resources/images/logo.svg',
+ primary_colour: '#025E73',
+ secondary_colour: '#011F26'
+ }
+}
+
+const qrCode = new QRCodeStyling({
+ width: 280,
+ height: 280,
+ type: "svg",
+ data: buildUrl(),
+ // STYLE BELOW WILL COME FROM TRACX LINK ENDPOINT
+ // shape: "circle",
+ // dotsOptions: { color: "#fff" },
+ // backgroundOptions: { color: "#00cd00" }
+});
+
+qrCode.append(document.getElementById("qr-code-container"));
+
+//START ALPINE
+Alpine.start();
\ No newline at end of file
diff --git a/edge-apps/tracx/resources/styles/main.css b/edge-apps/tracx/resources/styles/main.css
new file mode 100644
index 000000000..5be59b4cd
--- /dev/null
+++ b/edge-apps/tracx/resources/styles/main.css
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
\ No newline at end of file
diff --git a/edge-apps/tracx/screenly.yml b/edge-apps/tracx/screenly.yml
new file mode 100644
index 000000000..b4ab5e999
--- /dev/null
+++ b/edge-apps/tracx/screenly.yml
@@ -0,0 +1,34 @@
+---
+user_version: ''
+description: A sample QR code generator app
+icon: ''
+author: Screenly, Inc.
+homepage_url: ''
+entrypoint: index.html
+settings:
+ enable_utm:
+ type: string
+ default_value: 'false'
+ title: enable_utm
+ optional: true
+ help_text: |
+ Enabling it append UTM parameters as query strings to the URL before
+ converting it to a QR code.
+ header:
+ type: string
+ default_value: Your Voice, Our Future Help Us Grow With Your Insights!
+ title: header
+ optional: false
+ help_text: Specify a header to be displayed on the screen
+ subheader:
+ type: string
+ default_value: Your experience is important to us. Please take a moment to provide your valuable feedback.
+ title: header
+ optional: false
+ help_text: Specify a subheader to be displayed on the screen
+ url:
+ type: string
+ default_value: https://tracx.me/qckmka
+ title: url
+ optional: false
+ help_text: Specify a URL to be converted into a QR code
diff --git a/edge-apps/tracx/static/bundle.js b/edge-apps/tracx/static/bundle.js
new file mode 100644
index 000000000..263e3aad6
--- /dev/null
+++ b/edge-apps/tracx/static/bundle.js
@@ -0,0 +1,130 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ var __webpack_modules__ = ({
+
+/***/ "./node_modules/alpinejs/dist/module.esm.js":
+/*!**************************************************!*\
+ !*** ./node_modules/alpinejs/dist/module.esm.js ***!
+ \**************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ module_default)\n/* harmony export */ });\n// packages/alpinejs/src/scheduler.js\nvar flushPending = false;\nvar flushing = false;\nvar queue = [];\nvar lastFlushedIndex = -1;\nfunction scheduler(callback) {\n queueJob(callback);\n}\nfunction queueJob(job) {\n if (!queue.includes(job))\n queue.push(job);\n queueFlush();\n}\nfunction dequeueJob(job) {\n let index = queue.indexOf(job);\n if (index !== -1 && index > lastFlushedIndex)\n queue.splice(index, 1);\n}\nfunction queueFlush() {\n if (!flushing && !flushPending) {\n flushPending = true;\n queueMicrotask(flushJobs);\n }\n}\nfunction flushJobs() {\n flushPending = false;\n flushing = true;\n for (let i = 0; i < queue.length; i++) {\n queue[i]();\n lastFlushedIndex = i;\n }\n queue.length = 0;\n lastFlushedIndex = -1;\n flushing = false;\n}\n\n// packages/alpinejs/src/reactivity.js\nvar reactive;\nvar effect;\nvar release;\nvar raw;\nvar shouldSchedule = true;\nfunction disableEffectScheduling(callback) {\n shouldSchedule = false;\n callback();\n shouldSchedule = true;\n}\nfunction setReactivityEngine(engine) {\n reactive = engine.reactive;\n release = engine.release;\n effect = (callback) => engine.effect(callback, { scheduler: (task) => {\n if (shouldSchedule) {\n scheduler(task);\n } else {\n task();\n }\n } });\n raw = engine.raw;\n}\nfunction overrideEffect(override) {\n effect = override;\n}\nfunction elementBoundEffect(el) {\n let cleanup2 = () => {\n };\n let wrappedEffect = (callback) => {\n let effectReference = effect(callback);\n if (!el._x_effects) {\n el._x_effects = /* @__PURE__ */ new Set();\n el._x_runEffects = () => {\n el._x_effects.forEach((i) => i());\n };\n }\n el._x_effects.add(effectReference);\n cleanup2 = () => {\n if (effectReference === void 0)\n return;\n el._x_effects.delete(effectReference);\n release(effectReference);\n };\n return effectReference;\n };\n return [wrappedEffect, () => {\n cleanup2();\n }];\n}\n\n// packages/alpinejs/src/utils/dispatch.js\nfunction dispatch(el, name, detail = {}) {\n el.dispatchEvent(\n new CustomEvent(name, {\n detail,\n bubbles: true,\n // Allows events to pass the shadow DOM barrier.\n composed: true,\n cancelable: true\n })\n );\n}\n\n// packages/alpinejs/src/utils/walk.js\nfunction walk(el, callback) {\n if (typeof ShadowRoot === \"function\" && el instanceof ShadowRoot) {\n Array.from(el.children).forEach((el2) => walk(el2, callback));\n return;\n }\n let skip = false;\n callback(el, () => skip = true);\n if (skip)\n return;\n let node = el.firstElementChild;\n while (node) {\n walk(node, callback, false);\n node = node.nextElementSibling;\n }\n}\n\n// packages/alpinejs/src/utils/warn.js\nfunction warn(message, ...args) {\n console.warn(`Alpine Warning: ${message}`, ...args);\n}\n\n// packages/alpinejs/src/lifecycle.js\nvar started = false;\nfunction start() {\n if (started)\n warn(\"Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems.\");\n started = true;\n if (!document.body)\n warn(\"Unable to initialize. Trying to load Alpine before `` is available. Did you forget to add `defer` in Alpine's ` 
+
+ 
+