From b0e6d13fa6ac313a13a4763add325fcab91576fb Mon Sep 17 00:00:00 2001
From: Harry Stuart <h.stuart@redmarble.ai>
Date: Sun, 27 Nov 2022 17:16:56 +1100
Subject: [PATCH] initial commit

---
 XWidget.html               |   3 +
 XWidget.js                 | 340 +++++++++++++++++++++++++
 icon_close.png             | Bin 0 -> 7724 bytes
 icon_open.png              | Bin 0 -> 19737 bytes
 implementation.html        | 493 +++++++++++++++++++++++++++++++++++++
 old/CornerSnap.html        | 143 +++++++++++
 old/Screenshot.html        | 288 ++++++++++++++++++++++
 old/ScreenshotTest.html    |  27 ++
 old/Widget.html            | 197 +++++++++++++++
 old/WidgetNew.html         | 131 ++++++++++
 old/implementationold.html | 406 ++++++++++++++++++++++++++++++
 11 files changed, 2028 insertions(+)
 create mode 100644 XWidget.html
 create mode 100644 XWidget.js
 create mode 100644 icon_close.png
 create mode 100644 icon_open.png
 create mode 100644 implementation.html
 create mode 100644 old/CornerSnap.html
 create mode 100644 old/Screenshot.html
 create mode 100644 old/ScreenshotTest.html
 create mode 100644 old/Widget.html
 create mode 100644 old/WidgetNew.html
 create mode 100644 old/implementationold.html

diff --git a/XWidget.html b/XWidget.html
new file mode 100644
index 0000000..5f2ef7f
--- /dev/null
+++ b/XWidget.html
@@ -0,0 +1,3 @@
+<style>
+</style>
+<h1>yeehaw</h1>
\ No newline at end of file
diff --git a/XWidget.js b/XWidget.js
new file mode 100644
index 0000000..cd1ec29
--- /dev/null
+++ b/XWidget.js
@@ -0,0 +1,340 @@
+const template = document.createElement("template");
+
+{
+    let url = import.meta.url;
+    let path = url.substring(0, url.lastIndexOf("/"))
+    let response = await fetch(`${path}/XIconButton.html`);
+    template.innerHTML = await response.text();
+}
+
+class XWidget extends HTMLElement {
+    #icon;
+    #form;
+    #location;
+
+    #margin;
+    
+    #pointerDown;
+    #moving;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({mode: 'open'});
+
+        this.#icon = this.#createIcon();
+        shadowRoot.appendChild(this.#icon)
+
+        this.#form = this.#createForm();
+        shadowRoot.appendChild(this.#form);
+
+        this.#margin = "20px";
+        this.#pointerDown = false;
+        this.#moving = false;
+        this.#location = "bottom-right";
+    }
+
+    connectedCallback() {
+        this.#render();
+    }
+
+    #render() {
+        if (this.isConnected) {
+            this.#renderIcon({width: "60px", height: "60px", imgSrc: this.#icon.openImgSrc});
+            this.#renderForm({visibility: "hidden"});
+        }
+    }
+
+    #createIcon() {
+        let icon = document.createElement("div");
+
+        icon.openImgSrc = "icon_open.png";
+        icon.closeImgSrc = "icon_close.png";
+
+        icon.addEventListener("pointerdown", (e) => this.#onIconPointerDown(e));
+        icon.addEventListener("pointermove", (e) => this.#onIconPointerMove(e));
+        icon.addEventListener("pointerup", (e) => this.#onIconPointerUp(e));
+        icon.addEventListener("pointerover", (e) => this.#onIconPointerOver(e));
+        icon.addEventListener("pointerout", (e) => this.#onIconPointerOut(e));
+
+        let iconImage = document.createElement("img");
+        iconImage.style.width = "100%";
+        iconImage.style.height = "100%";
+        icon.appendChild(iconImage)
+
+        return icon;
+    }
+
+    #createForm() {
+        let form = document.createElement("div");
+
+        let header = document.createElement("div");
+        header.id = "form-header";
+        form.appendChild(header);
+
+        let title = document.createElement("div");
+        title.id = "form-title";
+        header.appendChild(title);
+
+        // let headerBottom = document.createElement("hr");
+        // headerBottom.id = "form-header-bottom";
+        // form.appendChild(headerBottom);
+
+        // let nameInput = document.createElement("input");
+        // nameInput.id = "name-input";
+        // form.appendChild(nameInput);
+
+        // let commentInput = document.createElement("textarea");
+        // commentInput.id = "comment-input";
+        // form.appendChild(commentInput);
+
+        return form;
+    }
+
+    #renderIcon(parameters={}) {
+        this.#icon.style.position = "fixed";
+        this.#icon.style.transition = "scale 0.2s ease";
+
+        if (parameters["width"]) {
+            this.#icon.style.width = parameters["width"];
+        }
+
+        if (parameters["height"]) {
+            this.#icon.style.height = parameters["height"];
+        }
+
+        if (parameters["scale"]) {
+            this.#icon.style.scale = parameters["scale"];
+        }
+
+        if (parameters["imgSrc"]) {
+            this.#icon.querySelector("img").src = parameters["imgSrc"];
+        }
+
+        if (this.#location == "top-left") {
+            this.#icon.style.left = this.#margin;
+            this.#icon.style.top = this.#margin;
+            this.#icon.style.bottom = "auto";
+            this.#icon.style.right = "auto";
+        } else if (this.#location == "top-right") {
+            this.#icon.style.left = "auto";
+            this.#icon.style.top = this.#margin;
+            this.#icon.style.bottom = "auto";
+            this.#icon.style.right = this.#margin;
+        } else if (this.#location == "bottom-left") {
+            this.#icon.style.left = this.#margin;
+            this.#icon.style.top = "auto";
+            this.#icon.style.bottom = this.#margin;
+            this.#icon.style.right = "auto";
+        } else if (this.#location == "bottom-right") {
+            this.#icon.style.left = "auto";
+            this.#icon.style.top = "auto";
+            this.#icon.style.bottom = this.#margin;
+            this.#icon.style.right = this.#margin;
+        }
+    }
+
+    #renderForm(parameters={}) {
+        this.#form.style.width = "350px";
+        this.#form.style.height = "500px";
+        this.#form.style.backgroundColor = "white";
+        this.#form.style.border = "0px";
+        this.#form.style.borderRadius = "10px 10px 10px 10px"
+        this.#form.style.boxShadow = "0 4px 16px rgb(0 0 0 / 25%)";
+        this.#form.style.borderRadius = "15px";
+        this.#form.style.position = "fixed";
+        this.#form.style.opacity = "0";
+
+        if (this.#location == "top-left") {
+            this.#form.style.left = this.#margin;
+            this.#form.style.top = this.#icon.clientHeight + 50 + "px";
+            this.#form.style.bottom = "auto";
+            this.#form.style.right = "auto";
+        } else if (this.#location == "top-right") {
+            this.#form.style.left = "auto";
+            this.#form.style.top = this.#icon.clientHeight + 50 + "px";
+            this.#form.style.bottom = "auto";
+            this.#form.style.right = this.#margin;
+        } else if (this.#location == "bottom-left") {
+            this.#form.style.left = this.#margin;
+            this.#form.style.top = "auto";
+            this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
+            this.#form.style.right = "auto";
+        } else if (this.#location == "bottom-right") {
+            this.#form.style.left = "auto";
+            this.#form.style.top = "auto";
+            this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
+            this.#form.style.right = this.#margin;
+        }
+
+        if (parameters["visibility"]) {
+            // This animation feels messy - especially since opacity is always declared above as 0
+            if (parameters["visibility"] == "visible" && this.#form.style.visibility != "visible") {
+                this.#form.style.visibility = "visible";
+
+                if (parameters["animate"]) {
+                    this.#form.style.opacity = "1";
+                    this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                    this.#form.style.transitionDelay = "0s";
+                }
+                else {
+                    this.#form.style.transition = "";
+                }
+            }
+            else if (parameters["visibility"] == "hidden" && this.#form.style.visibility != "hidden") {
+                this.#form.style.visibility = "hidden";
+
+                if (parameters["animate"]) {
+                    this.#form.style.opacity = "0";
+                    this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                }
+                else {
+                    this.#form.style.transition = "";
+                }
+            }
+        }
+
+        let header = this.#form.querySelector("#form-header");
+        header.style.top = "0px";
+        header.style.width = "100%";
+        header.style.height = "60px";
+        header.style.backgroundColor = "#AE55E7";
+        header.style.borderRadius = "15px 15px 0px 0px";
+        header.style.border = "0px";
+        header.style.justifyContent = "center";
+        header.style.alignItems = "center";
+        header.style.display = "flex";
+
+        // let headerBottom = this.#form.querySelector("#form-header-bottom");
+        // headerBottom.style.width = "100%";
+        // headerBottom.style.height = "10px";
+        // headerBottom.style.backgroundColor = "#AE55E7";
+        // headerBottom.style.margin = "0px";
+        // headerBottom.style.border = "0px";
+        // headerBottom.style.boxShadow = "0 0 26px -2px rgba(0, 0, 0, 0.5)";
+        // headerBottom.style.clipPath = "polygon(0% 0%, 100% 0%, 100% 500%, 0% 500%)";
+
+        let title = this.#form.querySelector("#form-title");
+        title.textContent = "New Ticket";
+        title.style.fontFamily = "Alexandria, sans-serif";
+        title.style.fontWeight = "400";
+        title.style.fontSize = "24px";
+        title.style.color = "white";
+        title.style.textAlign = "center";
+
+        // let nameInput = this.#form.querySelector("#name-input");
+        // nameInput.setAttribute("type", "text");
+        // nameInput.setAttribute("placeholder", "Name");
+        // nameInput.style.fontFamily = "Alexandria, sans-serif";
+        // nameInput.style.fontWeight = "300";
+        // nameInput.style.fontSize = "12px";
+
+        // let commentInput = this.#form.querySelector("#comment-input");
+        // commentInput.setAttribute("resize", "none");
+        // commentInput.setAttribute("overflow-y", "scroll");
+        // commentInput.setAttribute("rows", "15");
+        // commentInput.setAttribute("cols", "30");
+    }
+
+    #onIconPointerOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#renderIcon({scale: 1.05});
+    }
+
+    #onIconPointerOut(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#renderIcon({scale: 1});
+    }
+
+    #onIconPointerDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#pointerDown = true;
+
+        this.#icon.setPointerCapture(e.pointerId);
+    }
+
+    #onIconPointerMove(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#icon.style.cursor = "pointer";
+
+        if (this.#pointerDown) {
+            this.#moving = true;
+            this.#icon.style.cursor = "grabbing";
+            this.#snapToCorner(e.clientX, e.clientY);
+        }
+    }
+
+    #onIconPointerUp(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#icon.style.cursor = "pointer";
+
+        if (!this.#moving) {
+            if (this.#form.style.visibility == "visible") {
+                this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                this.#renderForm({visibility: "hidden", animate: true});
+            } 
+            else {
+                this.#renderIcon({imgSrc: this.#icon.closeImgSrc});
+                this.#renderForm({visibility: "visible", animate: true});
+            }
+        }
+        else {
+            this.#moving = false;
+        }
+
+        this.#pointerDown = false;
+
+        this.#icon.releasePointerCapture(e.pointerId);
+    }
+
+    #toggleDisplayForm() {
+        let visibility = 
+            this.#form.style.visibility == "visible" ?
+            "hidden" : "visible";
+
+        this.#renderForm({visibility: visibility})
+    }
+
+    #snapToCorner(anchorX, anchorY) {
+        let locationChanged = false;
+
+        if (anchorX < window.innerWidth / 5) {
+            if (this.#location != "top-left" && anchorY < window.innerHeight / 5) {
+                this.#location = "top-left";
+                locationChanged = true;
+            }
+            else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                this.#location = "bottom-left";
+                locationChanged = true;
+            }
+        }
+        else if (anchorX > window.innerWidth - window.innerWidth / 5) {
+            if (this.#location != "top-right" &&  anchorY < window.innerHeight / 5) {
+                this.#location = "top-right";
+                locationChanged = true;
+            }
+            else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                this.#location = "bottom-right";
+                locationChanged = true;
+            }
+        }
+
+        if (locationChanged) {
+            this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+            this.#renderForm({visibility: "hidden"});
+        }
+    }
+}
+
+customElements.define("x-widget", XWidget);
+document.body.appendChild(document.createElement("x-widget"));
\ No newline at end of file
diff --git a/icon_close.png b/icon_close.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc544a3208a29f2ee5e9fe525b9c7beb6df46d14
GIT binary patch
literal 7724
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
S)C~Sl3otXbGO983i26URK0%)V

literal 0
HcmV?d00001

diff --git a/icon_open.png b/icon_open.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbfb43a032ea2812019697cb6ae31c65d082defc
GIT binary patch
literal 19737
zcmXtAcRbbq_kSZ)NKs^uM2c|B3|Ev9xs?#ILdv>{?CUCJWRsnhm61Klx<*1)R=D<_
z*Uh@_zQ4E6_woC~<Kpr18t?aco%1~BJfFfJ80xT{<~<Dn0Gpofoksvb4}MDzoMZw&
z4tz$5;K!*~x@H~#z`}X_MF*sPz6b!qfZm<kk9|I4W=?$;c$11no^bD+aUb0sm>zO(
z-0Yik|Hb2Y@LFfh>W4?%Wy`TsbSD@W&wPvy6K!K;W^@<0{P9b7Sf*#j$fS2w?EABt
zCq>@Io>0-xvd)-2LKGp@#=^yOZf%TMzR5IKpBvwzwA%(f9xEzdGc`u7)Qp@IsT}yI
zKh3@BsL+)2VC)}^aP?@q$@O~A)K1}k(vLRUmTR=@&H*j0*J9^24O#Bx;+;+#RNeId
zU1=~>IsG@6j2hpeRnOi?EwiI3)8?-Aps-VyX=*f7<6qjoNl(@i4ckaY1rE|sYpa-H
zc`DSytfkm9FsB&bV%|vYS8hDKjP8mAw;k@f+P^zcnrcfGg>%nY*d;&bmO6?El%wQW
z+c+cA-_g4@sx5JEr&Ld?qeR@h=VF)<5oDBi=*=hOkj_x&;u&O7>Ja`{<Mk5%OdMR}
zq{#a_@gLT>tYuNf2jhgRH?&SSS^rrhd_Y85pJgX9y5DJjP;#RTX|N;YUt-g;sL1=g
zzZ`-zRYL9Lqfr7P@6W#ey}WHXm}<S!(vRG$rM&YRnJ9Vft#~(Z^Bs&UsnNZ3=y5|q
zLBm10a^u1n8YM6CJ~mQ2({QDhGI0byayyO4=iv-6spym5)4R=UHT!b5x@M3Cd_9sM
zX+M2Ua(+{+0~ZMK0qI9H^KxrIE}9D^QYQ-kVO?INKubbpQ!k*`&VX~C$bYWAamYB;
zJY6}RMPNi0(rT3XgBL?2<@_mgyNZDw^G1fXB(GTx@EH=c^5%P;?Fj?hv|2;d3z4gV
z!DU7v5F+aE&E6>;ZQB=FNYFyAo?mPKH9k7A`UoXFEv@#aHiF|O-wC($!QH{&m|j&D
z^qM%h?%C>t&&`A1imnI#K@B0jw-Z|e7j8f8`Khxb@WIKb_F!?9+c~QdobGpDd&I}`
zPvb;io{x^HXDIFOmgPEhLWHf7vtG^?BMdn;Po@gn+5PKhqu%$wrnPtWtpxv6fCM~w
zR?AUS^W?+m^N3VWiHo7-*21v@Q7w%uV>_Yiy1FMtF8n4J6TOKrLOl^?2kXi{E4*(I
z94Q?4Lv(fE&~Us({iKMPanEEY6bjjz^`h{p%jOW990G;4SZm99G*9ZeyvF4uuXQCg
zA%vL}y|SgESJbZ~9-Y3iMN7xk-T^H?rb#oA(R$Bre@nuH=jr^DVUe-did-%?96K-X
zu+)~zfktU;&%s60_N_*CsFntHFo}wm@DbUjvhY!Fy<b{;yg&OT$u1M;(N`Z+y30pD
z<#SErWY1%JwWG=(6Eh5GMO%$@gU1&lMJx2Ne_9kyiHOB3jpZW`vJSBQ7SA7$3Rr$d
z*`+@;`+CKCCA0UHrl#&<LUr>E`>OLBC-M=&jPdQ2eSyCECjZ&wxU9(gPl=t?>@9sV
z#PKzUr=F~CUo{}9UbOOhxlgfYIY?3|#>A0JM*DRebE<DYT_m}9)f*tbA)+`nyWN!`
zkyvJ`5i*O|&!H>1Au(_9_^T6M0^^){Hhx!kaHWZL$?i}s`wKaw6`kgEWL<-$1I@X!
z$ZKwA?)}blvU;|`bDmN!XdVJ4{60^$iX+SJ#|NA4cw7{FtB_KiKguqdT8~qEcQ(Fi
z6nzLE=;ef#6W>1B=UYqPuT!=lW!^ri=ku9`9cB1javy$G3$3UCI8^jq^|dQRu#3DG
zlVXv%+A=Idp366d#@g7yw|C+ms-Ta~YwGqTRC}v|)>3B64~-Q~;`yZLt2{*x$Ek&!
z<*4>4^c~#G!eN?RGasSM=)!)+t%Q|Z_zldiIn8;T6p_=t|7JH!V9I5vMVam^E6r~%
zxg2t%2CMe|Y`zk=Ld!1{&vbvRx^TKZL?lT>TudufvFp|i`~W=l42JJ4VA*z3sFy74
zSl@DoG<)Y{xNJ101qx5ML@NpayNh#tX)A3uJ5RBm7}9wWv7buZ4duU?jgB_wUI0H+
zR^0jqZ^Fk~9M5TLh8^s9OV#U9e$fl_*b{7fr$sy7)ncvR$4chOj!>}Cn6d|`R6tj(
zOW~Gt$u#m$OY%8QaUMd5X+{6%Cf9}<xG=ym0J&tBa8mwrJ_3H}{bw;qUZ@-eXkUF&
zP*%`@zm4(d7g>Hk{l;u&pKL<BPyL{hjmQOJos<jCi;Ic#r1uQYa0c@+1R2P($=BU7
zBF*aPKCi~PU?=Thl;=-qA%Jl3>j+1ofK*&_Y^=duKRol&n?pDNRADsk*AlYOM|U(K
z=ei(51)<O&yle*q9%OK%41p9AON{%`Kv|?&P$C3?%$~~rVEG%ob6*kVVq(TT=^b-w
zrHHo-tv&dtAj8zqJETlK-Nj4gqwk^vlX!+&D(Gyg_<O(gOom#OA=odA#TBJK42VFA
zxQ@5P(%D=kYq#b!xeokoN#=<Es^qnyN^5^P-V#J-<JVVV*EsGAzWU*oat@BIWfv^#
z#{I2{=Z|Uaj6oGCjKgteBtd;$sp@}U7Oznv?DMG~P6G=GJo;;<Kj0%R;~X3%N@Ja<
z#7>18nFl~vd?d#|GxX6@&1Z3y;fQG~3>coTir{~~Ocm<(Tty#QYd)?z_JxUW>S|@Q
zfj{$ew7=5eT{FV?%ZXfw@>p0HCw!ZiMso`TS8hGESfK{v)KX(Vih*HlE9)Ri?)yJL
zBWnexY_j_d<9|aWPFn@FOqgW{y5a)qAX}3AjIoc!kL~-OHIR~G_XG8NvN1Ckff5({
zqzf}eIgmIpEG$5LTdCw{>!U{)e?^gzdjoDt*Wf?&4`i+Yx@TxPFTML&_qowWuQUrj
zq0R1>_gAN|0|s&KYo@8Fk(Ol6M<%DeHU#Xh*}k;a0Aim;J2W`B-^BQ<h$P%=DaIqo
z33XbecDf+XlP2ez%t^C`-Fik9GuQa1SU0R?fmleA|Fw=2dQwZ!Lu9;dAaGWo>oror
zyUe=*N6CzZ{;ZtYs*zy@y6I`QTlM>^K8{XvN2lTzkqJ0PI>2mEk)CVz*f49bG_l+`
z_(N(qUJb)S2SA+62GkD%Fy<PNq|ca)g^AUHi%$U{)+`$1_QcP9Kcd!|zDG9?Pm-7|
zuZ0Bw8uK}1#>4VIWo%+Aad)qhxe7UhIR$}N?+paDpHAR;F}$}Qr5#87`7HZuH84-0
z^?PRbWGL03(IocM-AuCCC^N7)u-!k&R{pn)N9?llUO%)D`HTTD?5ylJB%X+Usq_5v
zp2a6xK0=cL_+8cfDsV=>*7>B~3;WL~yT<)zuSCILFHbxlIR;El;~ep=-R+!c30c5~
zSE~9W4}+fBu0{0RBd9waFtR!~=scc@QL|_)i#;I*PcMIwRRIJ&=ubW~gFgK5Qz?2S
zP@GBPDj;kR!mIceOZ1zNpR!<(Z-?I2u7y1UH10?pd11`8o+Sk&5>SD=LXV)zbilbA
z<4)uJ90^KeJ5v<SFP5~t6TltNGf=hWSTSg=Pe!*&Hfp0+1Rp^~=zzr0^m={lP}%J}
zlC^8{&E4=*J7I0%CxNfBw1x7b=h{nrwa({?UfCO5xkjSXs8ddwL>=FkT4#<T8}cHJ
z6T`_4WDk}z^Ce|gAN@eT34bgcZAq-coni*UIQMU@p49av3pJ>$(-j9+(E-moU!%$_
zb9L|ZOm!X+p|7%tdQ3o=<i0z`{H~^<?Q;rpA33c}NnioaS|ssEJ-#qkXj!eR8#f?8
zO`w?^a<Txiz^_E*XEn~;r$neR1P==5X(0A|w5!4jh{A@-tnGQhnM-P5Vt|Gy0@fH3
zC;2?km~v~s%`;|G;v66x*XMw)jr^2)Y$LCvj0%x^0KiddDkxs-%$sWey3U(vgiH^#
z&rdwJULZFlJB=$q!tv0*-Zij`fQBFbjl<CNkJ%0MVbo`_51WgORCf7dL=^xGca}?A
zkCnOGzZ>nl($YzLt5OT&05ndUJ<t2k@tW%xb~h={rW)WFfUqZa18zRGUj3K4e#%hm
zf6e~{fV??~$(cw!r{aE^{Rb$Zk*`!olEk2s3Eh8KX<bTR5fA`?{CrJ1zMyD%*^!>9
zRqss+dO+A;YJb8qc}xw~c;-0-v<ywk2>`I4bVb+7dh`ss_%LWu0U+(2uVZl^ZLBOj
zwFh0@?6@YqAB1CP2ZHQU7mrcdXjxQhm|f%CA8H#Np!B<P`kj}n0b<W<x7l}!)tNQ{
z0Q|j`_e`C}yGNgIDEnt^)mI6QQ{%v~adxR^*4jJDN6He53}zvU&a_qlFzA!|3;rBo
z@O@qpU^+xT1zI0QT!;Tt2yE`0dIKx;_A$yb^?#^`NFOyT`(}B=h|?^1va<jAq0j{Y
z;xgoL8BQ^^Xwt!M{yS5KJyc<5_nrNE6nb#;ObOgh^`iIgcCgGySw@j=l!JOXEtp=z
zOSf_k&qnK^qEwoR%*3Y55L@hHNwwkfmKpa2Xw7Vq<t@&vG@ex%^54hFxR_JG%euvp
zsM$K9dVf+f&c_wT=9imWSb8+r-O@R;Njk?3x&7e&n+@w)=NDg=CU#C^ggAg<`-M>b
zHgA%|Ys<{WZ*zR>ypkw%OajK+^DEZkGZ?uFO`k5dJZOv-hk%yqfQAYKVl%~q3XGkE
z`39@<Ue*tfw!3<Xd={fe@?KIN5nj^wpW2(>rOnG1(|mwf;SZ^0^+a>j{2<@f*YT-<
zP54oc{V0p}i5FPpv{D_<)rnP0w7mSo-7G40jJf~_@0_lFif!3S3(h1Qrjs=NGpyYj
z^do_kSO>4Z^reg<OH<Cc0OMWSSDFoQR_oEfam0_wDFi%u{JV22pJ0k6y!oW)CB~YV
z`%Q^uLuKD8VFR;={4^W29GV@ShN><*!Z%+Ah7X=mf#C~(m(6(<3l%EyrHg;xl}F1f
z{FQvN!(EHK0{p2tC}zU8O-(g57^@|cLZJOF#OEbM_lR4lbN^T{ynIv3+aad<*Yrp_
z^g;K`U%B^89en$1!y1^Zr`-mX(=W?om@n#{1`OY92-P~fN-YUx`_~|afv@iqO%?rO
zs8yFz)MT#D?H2O->gOO-6WS|hTp`WPUd>U)PQ?*4sc)AsLd?JyVHg2I7)Yp{vGZ6j
zyfUnKn}iqd)2VfKb6Lz-RqK_Zra$|a3uwGZLX-~qFRxLJsAp)BNZCmkL85oSdW5cm
zKic8mvG>z$#QhTWZS;)8vC{*#v4SLsILddh)&1H^zA{AWA?dqBlwG6sNLlk{oGmiY
z`2`9WLkAc={3@6prn5SRErpGjP<rg`UyYVzSU#c&aC}vC<fc7sWGeXuXSC!F7NQ5l
z@1LGswJ>iEcJ^<6JKz)DTmIM_$68Di)LVJ7Q(og-Vg75Cq=-R7>4DE5`zle?66v-F
z&86HFyJ~MbeE^o~puK83hB9j8DiMSKs4t-bfb3hlh(ILsU1XEXkJ|eb?|V0UEz2w;
zu4R5ktPheiu*Oh4@G5fYW8kg3w8wE~EVan$JP(&63R?chmpI9Dwd^VY|7EqwEc1aa
z%Io&iK?|>3_On?-$IE&z=mkEfq}xZ?V}j2JPbDFmhK{fAxI@*rKQxm6d$}n^(SW7v
zdPbpT`ZbQO*UmNU3PCRBp1#5Lm@bS}$G~>vNX%7sN)VQoQ`u)%lqLGaPZhEv6Lc@3
zkg^zzX#4(#LsOeT6{_QHylK&>t;0*(KxHFh>FftH)2?IUQ;R+Mc^}d4kNhf+i7CWM
z2N_{nEPtsv3E2Z1;w)Gf(x4Z7DhAy}wW{4ZyeaOHI<s*{TW-6@+y708za|add*u{n
zPB{uhh*B7H0X_byH#O|ngAU>^dpXoL=c*CB$zLwvNqlZDr<#FZ%ExYCYVFMlHjznM
zr;zKv5Wfz}!ES54#TXKM^WKU@5W#q7%7@5&R)MEpW@ImVya+~ZA>RO((vl8zk34XV
zb?_ZWIFLX1;)ray6_CyP^1K`QIC$2xF|_=xQT(k>5pA~_V>x=ElNXz2cbwCGrm1N%
zH+@;2CpWe297JQ1EAcTiGaJ&>?w^ciTvGA%BDVQ&WcFz~z1#QtErO2gAgUCGl<SiA
ze5hFt)s1Mw#RTe?-g~pb_4OZ2@Qa`73Ymi!BKMe<?Yj)3lgZV#+PqfiHBIz|;t1{+
z<2w)9OOZf<*6AOrD@h}9@CwJ9c<&ikN)8vaKQh`c)AuVhr5OLXYdaA2uYQN6{-01k
z#roD^R?J4+BwelZQH_WF0F4e4d`j5YB%nZU-Bo?mG>}=rchmCq-C)J|cLTIN1g$mA
z3O?qTZs^;$oE2U*bVF5^H^5{_U9qa|^Eb<m!V5?Vw-IO<5Wh@KH-9HFGxXB)DfD}b
z;wW~OH?D;R#?{cA?_oHzVCYBGx0BptiXpv15eab@qA}OU$`*_U7AKjlS0@ULNW%2G
zK~9Pn&BX=!+Pm$JJpH6aDD_tbcz%7~s?V5hX9sbG1@W#6Dz}4gz1TpfODFJe4zkQX
ztS_^~vbXS4(~4C&;veuc{k$wsnS|YVM_(>#TX*^??GZk!`wb&PP~2nN{*zX3=4pl3
z<RwX?tIk<Bcsydfq-Aa$BUd6{pb`@^yM{r}GsukFO>F5(y6+=VEuQ>@rFZ(`rudcq
zRxpwz@SZyNJkR<APB}q2iO2K0Dp>`SW@Tdkkl~PlS-37QOfR(RiYR04k_|Z-pIGGQ
zpuE__6(|DN_e=BiQ&7*`dIW`6byv>7oyHHU7AKxZ;BGUVwca}rGHw?<67<UZ*DLYy
zwckiN-ZR(K?~b?b5@I|G+AAzNUbV<^^a1?_@u+7i|LEs@5M7wu#)^=!U;2_V4i<9b
zw>e|N#<ch2KRs}(P{rx;shphhH)88wix9K+#%&57HO{2G`1*cq4Les5{<Ia1UEB1J
zwkR16yS!Iqhi%`n`D&%yrT6QgUX>@Np65-;6ACQBuCcLsq{;E+_)$WEm&u58{>VFA
z8+~@Jtg}ldHGy)2ol;@hm}x9FtOq;2Ruz*t?qOAMgxFThh*OCF-9PjpG26%0I8i;@
zatQ`H0h%@@_(b;Jvhm?xY`w4LbNnZ}&fEZsPz3%B>0d#Mjql>?n5E)D`40-*nor^e
z*>#e+LW)0oMP<n<Pu=R6Yh{pA(gm)r|73JD#MN9p+(Ke>cdfj&2pKEO{o#=(!=~0)
z!f#I049cC@VqopD01-6Q&Hhjn!*C+|wZil$WJht6)S~20H;v2nY@sF-SnH<$D&#L+
znIl>pb!`>VCb|uR(QCZX6@6^z+CVTqH)>Mmfv{<`jJ!Wv%o&3xvPn;s-5u*gGB|1e
zdXWZgjr*n<R+zg+K6kA!Of<L0`y%hpnZ?*boX=%L_<PmF;8V3*6!&Ai7CZ;x8B$jQ
zzFdM8gMr;prE{nI&-(k0&ODEKPcD48k#@A_zl00Sg|DTOkza<K1Ei=?IR!Hen`;8m
zreDFzi{*Yygf$udSN#g`MFe&Lx~HZgy;8-I5hc|H<XU)I+4?mT#zz4aGEa(qin~0f
zVy2qgGVN>L+uyy5*=O(aa4{;e+^5C<@Ms=cseO;TO?S2oJ(+J~+?+Gp!(Fo4)rEZa
zDaX}4BipfRqf}^5Au!kBcbCyDm+q2?<ia6RRnM{Y^UOad3|i>tT#82x`^lhJdZBeY
zj|hyUdGxG1%|E?mjQ4hUu|Xc4Sj6GzKpJuPQ`|WS<E!}gEgHVKvTv={8F{t~f*M!9
z2(*i+;a7e^$F^I%$&7X%E#mi=NuhXH>+qVbivIj>Jb|L`&ryG~(!MLBi5eqQt>1{t
zN~&fDi=Z=slwdj=m1W~{Pp9-gZ)$?W)={SNc|+paNU?1Us?WKCT4IEpk+HA2V=6~2
z;fUt8qDizj8uI~ErT`TtX1dn%J^yMgQ5aUP;!~HFzFm|kA54gE+ljLg?`Xft)e=WN
zvnMY0GAh$<<a@+8&3*034h;NbDH4m=I7PAcguqmL-<Mv)i|knL;R;%$?qWR>1hZ-z
z{7eazWTPmn{Y*SN_Li|A^<^WG5T3Bl2Yk~XoFqL>T$Hh+QJ7l4;%);E1SMZT+HR*_
zm(G|rBv&g0-k@gC^4^L@<!lI=^30kJgoS_CE^xB)R4%6_v{ve`72O2Dl*|~D!7S^$
zXKrBy?{(g}BFZ`S8Sj`R7>;d+LKwh8-JAQaTqwJ4B2%cMctyg}iMTWA=(Vfjz0)Pb
zK&(|5@fN!c<Zplov3BK1Mmew_KQ^w=S$EVJu#}X_R_OmUe=xX|A-2Hf#~UYS-t0a8
zDNN5Ko1<|J{uWp)8Jl$n3dLcCBrb1e=MkL@j5j}R2H%=CyH5K983B{29o-LA0;yfr
z1?q-I%a~XLARjUNg?}~vw*ug@FF?s)dId?R<<@?w#(pF13F!d3(BLQ1q%HXGw<JF;
zLR~XHmo2kVx+P1YAfaJw3AX(HV)gXp3$6fOI=XPwo456QUUyGqKw@MhpS911P!@ky
zcc<elGIi)5wH$^@$a;db(_bvSscxpw$F`=F^G@o<cOP6^vT+`s+hzayp#YO?*?bWy
ze~<B=c$0Di8yK6P$zi?);3gU?rYv6d99X~9XTG-~`y?DDX&x6ceCL|7=&X~A$IH9C
zKq;B|XG|n2Ih9=V`bCG3wE!HItL1ttx`5IeTaP0;8s58kVedC|AeX28<IPt!gLVe@
zJ55d=&?+Qqyt!J1UaB1m@ok*tc8Q^#m~_{LFJ{HH4cR>J*pQm`kV+jeO;R%Sw?DnU
zQR)jgBu$z6Ta84BN>lesrt6EaSAsPDeM4HR`k{O4-6zG(4h^qmgoZZB(*y^MP_fFK
z+KZ!ca_yhI4ob2HQ!;s{GI(Ax2*XqPYP>muwp_nUs%H!>H~Rd`m_ZWZGeVfB3`_8!
zHMQC%i6_1?k#^Te9DScsa#Ve8+0haVO;)4o=xiF<Ut+~#9X^=ZscjcFI$5W@oKd{!
zlKyK1iR{w-w-)jy!1Nd+Kx6Y+J>_svHZqfj4wzwl*8Pa`uw8OaAqoAd26M36l~ERX
zh0VW4P@a7je#Sl?f1&>{Ch!UgzH)L*KQ&)1M?h=+>f=Q9v-cTVuUZy0duW(+`sVOR
zeohP^CZ7rsq&VpKX#I^ovm3Ft5Ty#aUxOn=#Xi}=oRbHp-w_AscrF<cexGfe_$8AD
zF(`Wkqutg)on=W1z?LJ0)mR9h_{<ufkoa|c_<Oh6oAJGA9nr2TwccmC<KHO$M4n6w
zkSXsTp{-9m(_+yin>3RXCP}l%XLXdXYBfvYK3{9M=J=f$vj5BQGw30?=tIHA#vA9V
z2lTL{y239AVlrcZ!VJHa4pb!f3X_W6Xu>0rDw?gr*R$NK=m&hjp5<+1VbDQ>DfKWt
zVgH^v*F-o3qK?@3{7;1#j@egfiaT+$?2F+a-y2M8s+!M#^lG^QDP5!9r*(gTm(n-m
zu*dhZ^xc}?J4Sk;B%NlRK*47^P=A*wdNWM4Pn$$yqUnu&>wAZ*+ggL{`S>+36}v%Z
z5Bqx@RJ9O2n<0Y6<pdBkHXCQL)jKu>U`<o=t`xkS&|5>@WN}r>wo7Gq#<IqmKpdMR
zJH+jLoy=hC3B$Uyw^B%K@<ML#%q2Rr{D&r#gdEU;sEgXCT4*`}-%$_ec!WP3r&`XF
z9Y#fWK8_?!wP!?|B>iK1e&674L?ZOgbN^58q$94$V+2nULv#!ECnd}RUXlbbZRcCk
zTPArUFPc#Z;&4JCZ?L@R=^KZG@GDi*p@o*@V~DZhYB%c5q|0MgTvsmN2+Qx%ey;eb
z{le;Q)ILYcC9T}He}+84GItSki*E3>@>{`!8e1qdM*uYzGp?=^XOqO!Gr0;Y7z4f@
zSCNU)faE1b;=<ea>PaCyw6oh5qnI(P^E=mQO4k>zRdd&kvoS@m_KcAJVhNqpkfdz5
z<^+j7OtZEq&4i(~vahSgn_idA_p%!5+LZvan1BR!k8@eMpi}o3P5zf?N*N|Re116q
zGKWzkC*W+tS1z0Gi33LVsX_)Nbg}jQ$Rg~CSo*5RuJON)ba*z7D#)A*EqloWpY{-{
zQE`R=x0hO>NSu=8Y#q&oU0sAxU$$$0THC<vdDqQ3;CtvOxVTbkcZkRfyEyF3qtXu5
z7X7jpCsleJq=$c0P6^;XS`gnwzhw`smwqzvgcP7-aDoDyX%4v8i8^i;Zr%dKK1)3v
z8985$9pa5Ed_vd}=-G{$JPO2gS0<eafiyifiTiY_p#AfMQ#}tsY;iN6Nu$k6W_;F1
zxJLn5BA+sJeJjq^<y!eEWY1*wjmur$kKBcJOi_Z_i*=Inz+N4}msLSfSIo>Iim=*j
zBe_(8GVZ;2B;nk+VPK~H#fS6`@8MGIdyfsESx*-=?`m+UdBGf4BN7gNvajy36DEE?
z({mS?6B<8IVE6wJOR^N^0i%ueao;A%nCv|0?Due1p##mwE*9RWDv>c=B}fpLvD@uX
zZ-JP_1{eyj+~v(fk25`PZtN>W9#P~bUI@$CLy|lAcvi;`@ET%v<Ku{Y<%`!~zatLf
zo{-P2a&$vbnbwvjpmY2&?hL;fd!9vRrM4!|%^0?>MSdTEdcOLz=q{J(aEp3&KiM=D
z4j6o+YBTIgz)a1AmSkY5!<V23OBNVEf2R~>_u@ETdK0VuCO{UJc*NA|wRNb-8>W~V
zR6x<FL+SPMGap%UQ;(>O)%vqJBtjk}BPH}AG4#^)ugK2jOsb5hb$&~wMxS(ZvB<u_
z@N%`z`MKm&w#ho(|K|cI%YB|k8buJ_yz{vNx=7i{aoXAoxYSw4UiI1aH>s@Lw1+ZJ
zD#Sm^uZ@%aJ!D;?3}mGJna9dGe}-C*qhx=K(>#F_;$jgK-Q+E^C@JS_3H*26T@(@E
zi~W^k0EMvR<7(e2rP}Lg(1Zpyz=@$%Uj8sGuLz{|maf<msWaF6&54Y^-3KF9irv#R
zrD(e!F)$owt2!o%aZ%gEY|FLBZ5KXs>taAUJL&uHinfNaW^`k6vCEIBmq_<_HV&;J
z)rRKe6`@$<1BBh%i*azOS>PVDsc6vRl{?;fP^O`&4aB$py?AXNp2SD<8$wH8zrCg{
zEW>DHtJqpajxf#*%$!4&8F?j<Tt@r&oY%}ZH-2o1*FhmLIFoh}>^%x8zhnry9P}1y
zP9EAmbC@vTlMW9rxRh$Jb?Z-0O^a=z?OG5~J{ZIh7O+DK?basWsh>fmD#>G&>%-#<
zEi&38lknbeu5Ep9#g_4*H$R?AjTHoQQMKdnncj)!JM|*ra4Y@Det*hy%4o<F$9W4m
zrU#=X+?j3gOb!X2)5u)iQatiK2I0-MGqYeFjj0PxYC3~m$g1&YpPgM*!_O$dm&PsV
zom>9o1<nZL&U_}b1vzX!tB4Cq19A8KYI<kNH^l8FiEX>98N)c4jiFh!+U~Vz&}~ze
zri7#h_VL)pcbZhNP7ypP0%^MW(J-mCl7A}lZ|3;H7xxHSyGMkK%?SX~FZ0;Ua@c$B
z%Z{#JjK1wP^^_eu^qd?=lbp);mhq_sEKZPMrXyQ41m;zDhqLJm7G{>96jMd=eO84t
z530Rw>%F9le6)2`;axH+qRN@W;Z=li&!+o4JiPvDST_(|mtxLj&aaF$Msf_P!{7E4
zSL#=HxdP{l?<eAZ(V2sxI@Bww$Y(iyzaTw#V?(C*kGT8q<%h@whvlvuw&qzoZ*M<7
z)Ff}y7e^Ph;kIcdDjzV_Y=~S6`kjzEQuSB)e!*c>@zO*CU%Xr&j8~&ShW*6ciV)~)
z|3p|3gI;9CXuJ<pyUna|<R~|xl>Ox|vi9<md2xL(OF5nCl&h3EobqvLmtXMWH5^!H
z2zGtCyP>_>tAl&8^UIwN@SQ4sIH#2T&ID1{!?*sCmf(~UH{cWj<rtDhS$8?6WHl{Z
zaob=C8Tdwe?NPBBgd;G$@Q^Y}%ch$b9Gz9lew24oe3$RglY@0X!sfe~ZNV1Cx>&If
zrULoRk7xcHiKtH&#P6vfDQtFj%R+d=t%>gh_wEwfw>crw9ArO-ynlrJb{T)v`P(_|
zU9B*e)$c;OypG|BbnAepyIEkrIYA_-`{O&>&6L_oDy)3_)af@9U5`S3=yhn`*po(a
zRI^0mF`ZQ0x$+XF<yuwc^&eBD;DL9;q4VKSP5-1!9Q2#O4{PtY8N{R4lw~ss#`!4q
zz!R+oM<{3b`3I6|u#yWg*4#ogOH;8f_nt(yHb|R2S+^r^|6i;rdI&4<z1+Jr?q7lz
zyd#QL=)GW<7j15rEvR^rRHJzM>wAoMjq~`2k9R|A^xDD~mCBkLBrkHq3ItyYch{gG
zgi$wC9In-S{d3qoSs`c{op1ufI{f@u>5W|(&IWsty?X)s^<Q|FWaj=R$o9z;@oe%P
znjf(-!He@4?9OMo#o8wQNL2=6C3~Sm7XwiJn)cA~K*_Ykg}myg{Go(=<>8csdg+Ih
zf^IIb<>)~^3G|Ym_~!<F?OwjVS1ivG7suA-ynHe`_n;!CR~A)zSH;}PT1S_e_7*u4
zo&a0`j}Z3pAZSq2{D_@NV82~GaPPFaUjt``t~DLc$FB$h5$Qf7i55B^4P<W6zn+U&
zsXSX9q?pzqSKoEUtzpjQ?e90zI@4nBgB?@YI)hE--`Oj|F2hEanVG|aJkLzRYzi7}
z<WXvqX)+>iaRWh~^misqz;4066c|uo;U63%+jBx5!gLE0m;W+XDR4L@yH~akb^{XW
z(T^J0WnU;sedvdHK=$zJFhlb(yvKkI1q{i%hUf5|q3=WfTReV$=i;Kyak>u(N~E3o
z9Moj#H#l)bOJ#%qnY$>g3c2i@cFAa1{h;H8INmnJT2&No%~f$z?#m-%6<W8bM*h)P
zIO|ys-!~bnSn5N=fBWl}0-zCVk>@nHE)TaP#ab~=_3@-LeMeJbalgQ-c=Ri2$;|Y?
z3jd!L-dZQ--j`UyL9m6Hxuo;@m1{Y%_Wh^o>8%(82AAu`;QA-3ChnPE+M4RU>R~H%
zW5f1(?nzx$(Q2jN>ns@OQyZ%jt5Z6KbS>uoc0n8Q(ayP&n40U=Bx%}XJZIae)z6Ex
z?+(4LuAAc=!-M6d{pbTaSw$x}tE>QIxx6>equbh%5?jA*ckVoG^75byW_(udwZWOP
zwK3?`j><l4ObZ>p4BYg{!+MpBk<mIewTnGlHmPzI8}8y@EyXWAwE1rG{-#jkGZVp#
z6YJbWJ_ZA@>gjyS?|z{)q@1=G^WOSwUUyBw_gs6?r7TpsDDNa)Wbf;GLBfgo0n@pQ
zHm8@zP*MqLbvH4*VfI$Ed{cQJ0p<}xkywwflWz?8FkIZFj(T#lfTZJHUmztHV8>8k
zsTHp-gsY4voEx5aa?h{fqt<OL6Oy^+D!)1!c)}eVMfbaE=URVJdd=#;0`+o*cXtt>
zW0J)GGFZHjI^>Qy>^o$?AgyCcA0W#FZaK{$?kddi<wpZ5M`tnI88y1i<_RfB@^g-v
zpJ^34h(4sN=(CfXxM(w+DV68^w}HW#yl5>zbw|Il(=RT(Yxw%!En+aw#oF@A_6f9k
zsLFBEK9YW-yjiZ*{u}YB(Z9``(s3e@56>evjMY^&c4O@9^E>lBF77c~vJ6VMXo%B8
z(0ud;CQEi3JSf2fYIHWf_haBCt@AXc=buE7Vc{RRFIY=<02VchCsHE6&4KI+WGEL;
z+u6IjbGTeD_$L^(vOhDRp7`cO*fB97Q4zp^6Mp^}8G&`x>uRJSBECq{4{O}p@;mub
zcVy?SP3Jw(c+M&};@5_O_2JpG^N(@Y!7?wZndOTlb&6W8_NGI0<WoysoQ<eBX6vMq
z(_0KRKY)IH3><1dJiH6zm3zpa6^hi{jqzAc=nF|VA1%K$|Ab{b1QpNJ8iWf0Bra(c
z#AhNRa>4nq+4wHC#=u@5<WE?C<f6qgXKMvGgmco<qXb9sN5|y^KJ>)r;=7<#%aA3?
zIi2IQyvHCY7d%9y&huaT#6@`!16;aF6*x~zDXb2>5`Q-%NLFc#4SDGXUGxk1Nm;Pe
zqc`xD^d)s6W>JX7>J{U2O?~8RAR8U0d+|)YK7-8zf2|-+>86_H!&-4~4S(5s<oQmd
zl}<&VYB)U4y^a7)*=Ckg9BCSZ1K$yw;KKtQe=-gc@LT!&^|VFWx{M@MuiH(9B0}f%
z{ANp>FL3r2m@NDYA;z0+YznPM*c+pCuwU>JBB49j+z}y;oZ}Rs??l*y-ew+@?G~{a
zJ-OgbL=#F3F_xDSbbB+~Y>J#PTg)ku;1R00fJLq6`g}XE*<82%OgebmW$;E?8<7)Y
zGk@8_dlLH&LYMzzS<C|8!H2?sIbvB%8bqVPh7q<x5nVe4;KIRbxos|q=<zcT&a7!3
z8AI4xN5G*c%`U0Ebe^aey12)M6eCNZvO9#r5%#<JQFAtF)?zS_<Dx$cY=btSq1r5J
z2BSfS^v{<gga|wW)Oe26sE4Emx&l#0e@9)Rpit2Mp5Q9A;r6o1#;_K`b&?OBv$>)I
z_IeLQQKRL2Hdny}1A0Hce)<sfv|>eTU^yeKelP7GilFY}Z&C4@KOFh)P~h3C8Ng`a
ziQCo?Q|oI?)a^QH5UTQR-v4D+?y`okb~!`2sEVJdoA-x=Bd1*{R<=phHw*@ecB#+)
z0Iyuehh{I@Pc5PJf0ZITf^%m>ek^$7(XXA;6*YHZcfi1>4VmWr3evnt(KmrUOEh2b
zc6@qK)1w&w<qh&%?0YDRblgFV%du~wbo;5CVe^fE{(gcK%c9MrT(>!cFo7_CyI9Nc
zi#x01YoSQqKsYvP&V_CEYAn8RO5jXLk(0HI#zitSZA^y<r2GKqcZp~8XwcsUbEFA)
zyY=)6wY*-;Z6LU`px$@Ff~uE<yIb4`-DAr31hF6!k61ZsDYKcSL2C}ap%eRaBf2`J
zrS2SjW$ZjMFN#2jV+#6VfV7Lf%XW*o28)&GUx->L->w7QSvb#b?BTI#J5$xj=Y)b(
zdYj*r(mgO%u}0X%Dwn8Fo!^?=$#Z|?|L}Wr^SBjk7j`cXKj$sbDfH5zh2ti0+PL#*
z1I}8tTC}p8fvazJ`(uG$col)_6A-@p;U^SaKEo~*7TrvjVn!1`el1cBrORxGo%?!E
z3h-==^+%h|=}m79KO#9Gf8;rO?!YukAE)x%X84b~2W~;~)=uQwAE?>iH-~E-8H?VX
zj=aq+Cg5;U7}XhdXIF>o{G2~}Xj!@*h769q;0j}R0;yZ)cw)dV?ZUvGL<D0GA0r3t
z0XgpSF~1Gp#T0}A!J)8yaDYXWh5cc(bbalIhODXvTaHyF;mq+l^~G-lO?<>HI`{vG
zvO**#n-Uz82w$cZ4{87j;j>L4eP8~_R1ShLoLih;Ug66L3t#z8A)aSH5QPGKT?!GS
zil>X}=NBJs`?X_<uHUQ4J-<WT$v<yrrj{)}_?N0pY5=Zo&%1*eHhlVAaFph6SCV@p
zPL1|`+v5C=6cXb3z$D_*Zp_W$<@-@MdAi4+SKL%{=xkcPv^>;p4$)b<u|L;#*qj3%
zu7p<s6Fo?c3m+llHDu2lll%bB6o0T-X_Lyn1wTLRvSG|N`@&$Bn*I%8WozO?s<ZKu
zG>PJaxc6yMZrj}l$JZ#;5peEoLH{vF6;E%}fn5>w5moqpBh$Ng0)GR?h-|04El|ft
zUEa8$W@TGItp%=-4!}QQ^y;wgw8@Qq_KkFiit^^?J*~3w0c1cK*tZFD>__^|a{jn}
z=nRB?C>|zs$pbqLr8~aSuG(XYtVLqg3m|1{$$}bw)<3|s(Q0PX3Ns^G*xmi->(L+f
zsj+f8;p@jO_5B*og!-tGW?S9D8PwJzY5E-4?iM%FH^X32fG~rl`F*dxMIY{cn{q94
z5~!Gt+T;s)Jj~Axg{*VGO>dW`_viL1!LX-3wdc|{d#^{DW?lp-Z*`96X_avR*x6S+
zvr$bp`dCiWQ3IRS?Fb5KVrF-}PgmS<pOaxW{u<8`d*o8iE+0@wZ~`+f$y_s8?@-m=
zIj~sAxWyEU*DgpaV{;Fah`lb+NB6Hw9mtP3P(1T;q{?*d5J_2Wc_2ZYl&!yv|E#gd
zlWO;DTx~%CA5`P+a>TcUqWh|VEN^z#P0sh=eVmz+KXh*O335Z@iokDO)f<157hUtJ
zg<jnQ*+T)-Od9{up5Xk$D+^gBfjdZ^9SQy2kXrV=xlPySW^>=QRZ{LjIWZmrx*?1H
zV15^gV3O5FGQ@FpN+)KBIr`X)T9EQr|I}HpM!=!1RW0sOrE9|144ksoG#*JceZ~I{
z=L3?=@|)l4GN(GDzUb4U{r+oU*HLP@6Ptcz^kId%bgd(gi8WbE8dVp)+ZT~}bpIGA
zQFnM<z8B?xxoc}0rbcBMbNdq>`%^~ke#b0&tHZyS!9LW?W0(n~G{tPd#fIm5(7*2|
zdA!j2u20&r=(_`Tk1SpMj=u!*n+txC|K+g-X&Ub$h<xEUzm6_K_txGM1X98S7n2v-
z9%6?YRWx0f=_c*e-G`YpK=$ElaPi^e*c)Y%z0`DoPtFOkbv^ovl^cRh51T=kzY*w-
zi1Z_l1L`jsY_@L%`RgLJ;_TDi+@hLfS&u@ema>kg&Q7LXKG<U}&^IAjs*>h=4JUzr
z7N=Nh6uElpB!qSqJyC}6AM#CtG=l@qa#qhM9}71Y>=9$t031+7{9Y7lqN|umKOX(J
zNdmp#0Vc6pQzqiXa8nSyX=QYu(vW4WxKYHU0SYHtKpM-BJT0qF<-_S-Y$rTe-&cME
zXU$?gj0QOlLqqIg?;YGy9)q3_q^BV4;+`BKr5ko>2-k%-M7u9p_&c)~zu{S76phFH
zQxs%^6L2Dn4x}dg2gez}mK#JRIUvP0l&A$MeES{fZkWN0)HVDCpG{^_<6~xF0vtFd
zO@U!de&^$Ak>6T*d-_I9c;Lav0Y0dHvzisl@WuP1WKh>jAmBbSH}2-1xn<^Nd$j7e
z(Ap@2gIusC?+vyk34hri8@7}(9aD?zFS^|1SZ$F}2(^-J=!>oY*Rc@E==eowMpw(N
z=Yqis%j0;O2GY`uE$Eon7aPt{qsZU0_Ya2FlD-I;9Ncv7@VyV(fZxV-Hh-|jP#hRY
zKY25p2Y^M+0TYF&1>JbCk*F!nZ-EjTu$Kk*z)9d2%h2q2T0*Cx-1iE^7$sz;pcSe%
zaw$%1xbj-5uAOM4>$5LH8Q-Uf%_~{YUI=Bo_)m5sOX+OXd4i*K9zAZ%QFEx@7GPC5
zZ|I$#vR=5iarF$N^X;!$F~Bm31}pdreD#_uYu?p8<BMjw1Ysvv#lUDim0n&w&glL-
z(8S+1N4m0)s}=Ihc<BtRqc8)XA2GDv>i6g3q_?fIch8jN_$3PN)aXYftN*M~uYc2J
z)8R&;u=FZ%!0(p@&@24{3&bykr)>-Z_=DfCT1YpBU=E^l1XHVi??B<qzFA3bS~i_c
z`rrokM0~62DD>O2VPBsspK9k)*CmL$j)S$<ZYIz*;BzE_aKH;3_x9#aiQTThb(o2R
zs3ZGPFjThe5Ul372`t#8_BkgN_+o6Au3tC?bWhImL}Th+Voxr9lN~wK4k@tm6{0wF
z)zrTY5B#DJ>v&c182+SJmLbgQn2<c;1n81!53Kxk&ca7{=pOjxA<_Hoy)JKuSu)=9
zorcC5fRYSl%p&wJAe;4Pmgncxukw0>qSk}@7$5!eG%Kuo>Uv>ecz9sD0qoKTAzet9
z0`zn~T}7)K{u(CZc9Ys(b#zrkWI)LrJ}T)Y<;O7<QRNJHcb{xPI@<0b&Ibxl@;7=~
zU10<CW))yBv1b>ZvF&@IGZ@Q1YTuwn&riEd_uPTn=3zG4D%+t(w5Rm4YSa<hg8?^$
z-U~LM%WLf=_WWWA-o`g!r$$Y_zbLT868k4)Hte^pHe}P6Es()!U)o@bB`@5%9LxR<
zuYY>1;GTcsS?iU)dKrCkS<`breKKTdaP-oRBY~%Ld}v57u=s2Gq7#Eg66b-%1q$(2
zh|*QZbJ+|>hlX2&Xo9miG4)<v$BJO#we_1th!!9$x^IpX93EfacNHU`Mea7ouH?Cm
zjTVv|zGUrP%CgAQL6Hs7Yo~+0@?6@&zn=wOl`c9SdY^HxCMT@))5(r80h|;A_1B;6
z<?`Mr%38|AUXEU&N*yf9fNXoeX54^C;9sk`rzY-c_ZVyr*V2Cz`(npDFN8LA?Q9%y
zAwMM&f((kUW(esqXe`!W7c`x_{qr}&oSSrsZsHVR^Cc?*3=G>Zt;Oxqb|OCl@%qFK
zJ!JDbFBt5iafYH+b#o7A#WYrK0$hRLAOAfWEVZ&;Px+9%=PIOOV`kq8eE~d9rphth
z3comsfSa0qaIRttLQh^Uf2qhx;pa<DxAxmBZ%WG~1JP?w@~>TT1$42RU9Z6&<(0+U
zX*q&~0$`6*_U)Gu_?wqZy9CAl^O_mikXOC8n|x3k?L$gF@Y!ma?z<KUaLRTJeAp=w
z1!o{b*F%Z7BEC<cY6?r={hfkr%d0D#ZED|f6~t*1nrM-%p3y#FC2kjFj4WQbLIezZ
zO2eDLmutL38=f=!dG`k!0134JBA6=na=+fZ*_>;M?g3L5B&$@H;XgeHs&>H%E4%oX
zsdaS3lJ`t>*1^0ZqdH*pEH&;p3I3+bpwYglq4bfdb@@{D#ovW7Aop~(cu<ZT8nnTJ
z*v&G^FF;ecF&Wybe*h)lJkGhcH_fwJ&=>njPuotY0qw?><20QcIG$Fu(&nW<It=sp
z?w_hvePxmM-?1uwI}BmbcIi1E52#Q%s!(7$Za~ZWFCPGQ(5!khZ)1Bj>%D2?=I;nB
zHAqf?$M%Q*RV(u4s^x6rfL2D+?7*WCKb_{`=s@@pwxNklv998`AaHk;Baunt&&i6J
z86q=aZvUZW=o}`V-_^eC-7ziqn9#dJdgdYP9*1*h22fPo9hD<m5ooh)Xl6Q<Jgszt
z&4hyE{Gi{TsR`^7HTT!o`01B_84(Qn4mm2mfDAttQS_XDPh_UQV2tt0$57CRe&%r!
z{=SJQi8+kxkJ^3<ocroHb1c97SSNe20w5O1V3Ut~tKra-wy)PSROn|GtYNj(n+N8;
z%RPb`U&huzRS1TNRRr#Fch1{nYuZ0di%V%H2=VYAs%(X-?ms|QC=Es5y46IIJOCd3
z{*R4C7526?Ia2L<ZBfg9@=N{t9#eVY!$RUwZ4}5QX7}rqM$FEl-QXkvfwqdqm8=)`
zZTvv$!o+jWw=@4t(X}-8U5iW5A@wU^Dc1H8?6?nB6Ap{~1VI_Qjr{s%DFg@%GiHx_
zv|Ff6ZahrEua;YG^bA0s)M(YXDwO=rbv8fn!Pz1K)cTc@ie4XIUvs42-I)5qf@^px
z6-2bn_Z91zZY=jCklyKE*#=o89;sgaNNqBkzb>s+_%zsQIImg+Q-CN2vF47<x&gYJ
zU0zdMnHB+Wy_&&cQKYZ9w%d3vEAu_DF6E#`>7Am-V3>kxKx{fUR(7}~?kMEff_f{B
zW<I%~Qj^nE6u4z_R1CiX<VAT>OTeCZspXbLB<k(lxVrAin1dP_iR1D?yA%bS<Ur23
z#+j^VbR!qf^)i25=!(HO*l+Odpd`?CWS0JMTWS}o17Yu1&}ez;ryh&viNv?<HQn)b
zm^Z-**QpE{mu5c>$|hb1?&Jl|@?#A!#K7OnCDR^uuPS8O{JA}04fx*Dprg6bFD?B*
z>@(}(GEBlp@3bQ+q+M268(qiwQdDKr<-q)`Ae;h&hIvmFiomjIontvAA%M(<enb3u
zpiT&}9(arb!PQtj4=~&Zswt1@ck$JH1MwhMW9R>EG!P3-<w{Y;(+R8GE+nR|enZPQ
zZ{zup>A1FzW!E3yT!%ZYxmIj>twBZ@1Y@oaYRCiwGf=xAD=kRrgM*Os0aJtc(E_Uc
z%}>x;{m2X&qfVeMb*OB`2)vPvHSEHMhE_|8JNzk+casl+zkxr@5b1Qnhf>}pUTj$=
z_Rq4L9JEK-#l&m&$1@WAvCvIM{R1bs3}COBn3@B!ECsq0YB!lVmdp{DWmCd2>zjz9
z*WdzaYL5Tu(1>an{H=XAOmMj4>F1<dvOkQen_!p9_joIJ&$}F*#-Ihv`KL<9)U%al
zXFnvQW6B){ZT>v@GiwEOhjskNQ^GVH4?!SV&s>d;E%Miq*j=?2XEcB95PZCr3I1@;
z2xPq;EK7Sg<KBMYi=4w=&+w~5<;*^WgW+Seo*Ss@NC64T1oWZG!TI8QLVuv&ef;hY
zN=BfX1SSIXONe#!8c9k?Bp#5uYsNn{lZ^<fcImh;-S(=*Xl1DJ$viV~^;$lRrn5AW
zPy2?9t(NpT#AXu5Xm914H>XYmlSU2NAf-67$zf*%`e$-~w8{uYgrn8w$E@zeAOWzx
z0_l7Vr3gi#s<CHGls>lI9{k9rnAtFnG<EN`@Kjc#(q#|xmw4uTxt2X4Gqr;3z|0E?
zzK1euR8vH>APson`y6{Lrf?o#`Iv8$Jln=gmspA1=&`26MElIH!iScGfKQK|$Cp2L
z&29KUdo^$5I%Ap^OpmPE#xsJmYlQmVyx>7iPAB(;DB_uIG-%Aa626CX4u;fCS}WoJ
z&kRT(doic+XSK`Hpv*@|_!~}Io$!>_A2R~ZeO`K`tgYDWIFsO?a*b|dkGs0n60m1V
zQ)BA@^U3vHc0i@C;@|@~YSaBV+9M+mViQR!?69UjxNH}#_IQQ6-Y>>ypV%MYB_5`8
z!9rpeGD|b?W6<OMCEKMB{Ey1Vm%d!m$BGfU%w~Vs5|?m5nj&l&9=e_glJeLdP6m1Q
z+hE0P1r0Tbzff!m+RFU<PTIT*Xih=b_ecMyPMQ66y|#`Z<lD=-Nz>@5SsI8w6@j|R
zng<7OBKV>SFxuM7ar8up?OUU2Ps3ovi5paVnp)KHNjAWfH1ypA)dX9kU{h1njMI!3
zdM}CCk67ZOExdgQ$0VnX)w2T-x9q=V$ZD^sD8%VHe_z(X(w`Ha9$P0YscP`8qp8v3
zA%l?m7vq2L`~-ot$?WU#5}M7av!w^7yr?N!0>SMN!vK6|etq0$sg;-O87xI6%$;11
zXk+Jg_UDd-uA*#pP^KwGC<GAu=7ZCb7O2Po6%DJ`(9ox!@84WS^|Ja#TrV6E0)Dot
zp=)o(nfccpxzOfaW7^m+-fBysNn|OnX1xrg6Be}3;5)8yf`cmEi~Hw#znnrt?Wec#
zoj1D3F<?f#YLT+a4J>B=QUE1Le}0Dkpo^{tr55lCQmQ@$LzD(ZN*b5tVQm1wT7CR~
z0aR1uhjT0&1I5+<E65kXMrpT~a;R?|qX{x@8~b}>#3?4gY;D2~tX~gr)jB&mEeicP
zx>d(BMzyW&sizg1;`mL;Q|zpa9dxzzY{1!4+>tUSEwus9jB~>XDO|6cMso!)U0mni
zH3?{Vi0}sh_1>8@P=;Ky<**r#0(I!VQ#ZfTTIDMDHnrh1YzF%*fcrd@z}{b8j4br}
zX5i}N;$47?VFg;l!JIP0E6M=D-%E+Yv9p2dpupX^Bv8Mr)2Lpc4k@g%OGlugN&o=%
z)66!?-xU>Ir{3T^0jkI5bJ6m09$-<!Sq{HI2TUf8mwiZ$EWH5AwLDl20YC#c+Pi)e
zW1ceE?V=y;paP2VKy_+6<PumHVy<zvSp@})y<;#YK;t=Bi>mX&T+#uV&dq3v6M!&-
z)RAonx%0}0{Vl6ank@4uj1|yuijqDs3Wxx;S`wf<uiD|NHiq*A5NiTT%$x;Mg##Jp
zS%?xR0pSljf6LsL#dZz%GgqFh9?2;^1OUl}iJeQzq(A$$&iu-E?ThD|T)kdq$pS%-
zUzpi6B8x1iy2TQ*z)~gZ+#kVUPG%tXaT1Tai$}EA{YwtNKsqM@I{lS+>I9%G-rH=|
zm=q`Z3l0S6Q%=wWV$pV~ABM{f8lypd+p$llg+47nh|&S^KSAZ<H<_U_Tl=(Q#q7?+
z>dRw^+*yzTi>yD^Pc(YP#XhRoqCsh)m@)NA0N6FLYrIkG%ymlHcj~ETp$5=;hs?Vx
zgs%N~=RE4%t6bbEP@$Lq`G9Yv%t)*q58V@xQyKyQIq-Cp|8Nk7ct>>LSlkBo&_~r5
z0DuUx=>|cTRgE)e(SszbY4S5r4fGWk&J6rnf)W&a`zq1$;g6NTN0UX6Xtl*~o&~a7
zUz3g%J*AcrVUIp<F3zpGj^qc5(gRnuwcr0IiRHcX$;il++7IOkse$PN8V={d|NDTh
z4gDzwwkL<wMgFgZb8%#P@8kH-wPDrbL8zEk)bWHB%O$j2MneacahS_moMGoYN{`l9
zniJtPk}O4?NKU2XS}x<9L$&F0T%w6NC%K#&DI2!g@A>{b|H1G2`Fy_L@B8%vBx6iQ
zZB#0$7u2FiSuhzwHZSZVkY7-G`aqlsMfMzN<`p*}j%}$^zRbpGdxG}xWYCI{F@!M}
zxgSCzl?@DZZaSa<e~RZz?jkJaOnvV<it&-wCLR}eeC~A6m~-A>FaX+$T}qS_S(GZz
z!P*_T*!jr(SErKdk0`Zuq2l1%OZTr2E<{Kph=x~<ue8_~`&c&w(;zR(I{SyCf`M8r
z?yu+IB|VRv{oQfzO%15}O)26)h;kzZSbyW=($wmv3sx*KnrilwWCUJpWa#=+X!BO^
zg!mRaOAG25#0!L~>uL9`b`+%ERPHnjF+69q86d9l{G!m&&jhhkR;ByuXFLq>ZN2pn
zrl<G8e<Zh~EJ(h1XV=bqZ#?HUtXfqz@Drr>Bn)X6)!Df>FKNQs;49LAynOdz+4T(!
zjpqrp9xuT4#QlJUyh@U;{7DfzacJ)Gj5RHS3ta%)ojLwEl0Q=M$9BIX8&rjgYz=6~
z<nXNP5!u$dygiz#k{PMk6a`fl!o0@mTG2n{)$9j0wBIIx;Uis?pFp*PcqSS1g4ESf
zPU(iN&W|^>Katezr~E~OgZpX#-^sLZ_g9t&ktp-QW2Z!)!o;Q+2v<m5QhrUFv6ix2
zu%Q?1{AR*u--}HRAsqQ25Qcb2S$nbl!vCWp^knodTPSDWQ@oNPRS+1GRz1CKe%sNC
z0(rI$R7dBpDIGswxhp<Zr-k5OZ6eD<Lw_I7SOtz*PT0ckx_1|sY!qJTUCvOB4%{{E
zIf3<8s>!4YKJ}RTrRU80@2MxC8=@0~!?R>53lBK&GgEQ?vC!LNa+6PeZVhwY+&eVs
z+p&6JN%4V++8kkFBHLhUs69-%g`9JGlj!<~@Y|8fU$i;4I@fQkoG(Xm_l<L{+&{KE
z?Y_W_?X!XsKMbd&0ztt!@nQrqj$dU;5DW`Qo1_ND5V0wW?mO7=6wvLP`1a#Z+LC{Y
z|KU%~&W2~Wgw;Nv919@DSw9ellTltF1^06z+5(i(0VHc9v~fc(QEFfY3FG)rH~#HM
zLd{!fSkj9jPK#Tg2ww9@ohxTw;tk+D!HJ@vvxz|+ha5cKE7o#S8|E%^EAa>hBg`UZ
z7_hwIxHTNduIVadl4f7T;bc2N8f~0<LMArd$Lam}Vx)@EFqg}v?Zg+*$D9{?#&sd9
zvMoZSyCNQe-X4IKx|Yo3biIJQOv34}!5ZtCjlWcBiRE8J!omRl|5o4#k(>mdJwqP8
zXl<BF=kkm~Kp?TWnh9|}%Y^7Ez<nH0diVi_NFSk7aA->B{f{!HIq)F}D(>9{!WUmD
z%K}R)+5v##DQXL=fw=`L0_EUMR`TRC1x~!Un@Hk=dRcDSYZ225lpID-Zc*wk5W!=w
z-^wNL{(3hc^Lq2U`;IL&P>v&*9Em6AHKi;Q;B&aQZ-muE9xiMSY?TM<dVNBJ#*&5{
zN-Cp$P`S4FsA{`6T_=8nxYVViL*mKI1W6fimR!jHAhTD!5ECpRR|Ek0rr>)?9tx|^
zcN=mW6>K=OhiP$(y<78;S;p^z{<?$Ij*pL?OeIRrp|C>Ae^cgl@Xyb`+t|Pif~@iK
zw{x?rV;XB67Dul^Di7b=mRS}nD>LSN4yRvUEeVSofg@wL;8*qabU+7Y^lLgqjWB-A
zvmEHC#t;olh=+goTwZ%t=Gc;}VS6r~@5=8ERxBq-{7_iEAcTcIX6zs>Gv|c5+GSHG
zS6+88F~ktV^rAZ;<h5DEcGo4iKu>vQD%vmhr{zXO>%2YMw70QiDCox+^PZBKeE{HR
zX<>0&UBsBrOyY=)ndQ~A6s+2&?}_zxdK5N2Y@t!_ue^<_tVj=tmW3|qVe10Mc6AIf
zQFdPn{*l<8UEl?$;FFmz<u6}%ywt<eetX8<st)`J#(UjH<~6SnowbRgs995ZkwNX}
zVnUA4gx|uGCojc64ipnYt#+sww<Yk$QAB|wWt3uww=Y*sePY+Pbu3gQq<t^>?(7o2
zc2B8kbl90Hxzj-u_NK2ZTKJI+(+L%?v^ooiR85pi&EK(B3l*anL$rQX_)2T&d2to6
zx7_$bZnbOcW@Hda^sVhzpH3P%7^tdmVplA7W7ejN7xUD*@OOgz*fT&DL{^pkEjqR(
zm2T#JRl9#7VzT6_SpjpPqX$T8<TW7O*ado&g7DfzYO&Wrr(JzX-L4LWUGhh5fCj`n
zrTmfk&CCPsBZ8Z0-Qzv$$erk^f1kS5)*Z1bLU^zl=xhR!@%87!ZNq{;cgdM8S_;A$
zTKO^GO(X4+#hPo$YHy`E(Dn>eBie#v(_!TVtvh=J)1pi2LYHNjtc<YY@_K#8&;y{L
z0SIUD<Q-E~<;4&3<;<v(=DefxmBGN5lD}Za^U19oY6RHVpuw7=dye+ZQoEtaG7rSj
zvdot;g(H&@l(21<3%y6|cjnZ@Y|$5uPQ$XhIwNfd>9qqMnR-|*m)Cfl^~z&X+SxQ7
znS$0|zlUE<^Yus<Udh-dp0Wj3sqfwK!35+7C77kNRMeKL{X8A|1DKmxZ5MR8J}<MD
zz0MHGclMjS@>qIQmzX;`qOz`Ae)i~|qisa#g}S2(`gvFY_t(9nG}d2@zRUi319(1O
z6PLPFI~SAjbqAy09B&>SjlbJGV@k;PE9rO2qxnZAKAR7yzz|6ZNQ>4}Y#6R${Oqis
zWi~#LM}4y~wP9Ga$V$AESYZL2M)(q>y)WeTwHh?BvZ?tgFV?*89@SF#;FmXviow{k
zoyoUUX0Ei%C6#{ycl?Lzs$!wWIg<*+Rm$v-J!d}mbS8a)Pn}DPEieKbN-F}73Ck;z
z<=_R$0z7w7n@It2;A}Y)c#gPS^TbX60!`)1;n~L-e<`^zmzA24)W?^pL+3IC7<q!}
z<e~7C3hL|in-iB*L1VlnW!g#PFeo%i6?wrOaa9o~`iaN_0CdlNAr9wW=9IA7sbs<C
z{HW&9Yt*o#icBWMp)FAVzI))sz(@-^){+OOJgi*-VZ~&%^F28nU4X9n3d7CIYfCL?
z`>(}>SHTO>j3EI<aWKL10MJ(9QVX37X$kSj#(p1fZ;3lwlyoW%+4!<i!yhEKI7UUY
ZDmdGLFeH9hCjhQ9$loW(yOtP}^*=J>MScJP

literal 0
HcmV?d00001

diff --git a/implementation.html b/implementation.html
new file mode 100644
index 0000000..45600b8
--- /dev/null
+++ b/implementation.html
@@ -0,0 +1,493 @@
+<html>
+    <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    </head>
+    <body>
+        <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+    
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        v
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+
+        <template id="x-widget-template">
+            <style>
+                * {
+                    box-sizing: border-box;
+                    --side-margin: 20px;
+                    --site-falcon-purple: #AE55E7;
+                }
+
+                #icon {
+                    width: 60px;
+                    height: 60px;
+                    position: fixed;
+                    transition: scale 0.2s ease;
+                    scale: 1.0;
+                }
+
+                #icon:hover {
+                    scale: 1.05;
+                }
+
+                #icon.location-top-left {
+                    left: var(--side-margin);
+                    top: var(--side-margin);
+                    bottom: auto;
+                    right: auto;
+                }
+
+                #icon.location-top-right {
+                    left: auto;
+                    top: var(--side-margin);
+                    bottom: auto;
+                    right: var(--side-margin);
+                }
+
+                #icon.location-bottom-left {
+                    left: var(--side-margin);
+                    top: auto;
+                    bottom: var(--side-margin);
+                    right: auto;
+                }
+
+                #icon.location-bottom-right {
+                    left: auto;
+                    top: auto;
+                    bottom: var(--side-margin);
+                    right: var(--side-margin);
+                }
+
+                #icon > img {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                #form {
+                    width: 350px;
+                    height: 500px;
+                    background-color: white;
+                    border: 0px;
+                    border-radius: 10px 10px 10px 10px;
+                    box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
+                    border-radius: 15px;
+                    position: fixed;
+                    opacity: 0;
+                }
+
+                #form.location-top-left {
+                    left: var(--side-margin);
+                    top: 110px;
+                    bottom: auto;
+                    right: auto;
+                }
+
+                #form.location-top-right {
+                    left: auto;
+                    top: 110px;
+                    bottom: auto;
+                    right: var(--side-margin);
+                }
+
+                #form.location-bottom-left {
+                    left: var(--side-margin);
+                    top: auto;
+                    bottom: 110px;
+                    right: auto;
+                }
+
+                #form.location-bottom-right {
+                    left: auto;
+                    top: auto;
+                    bottom: 110px;
+                    right: var(--side-margin);
+                }
+
+                #form-header {
+                    top: 0px;
+                    width: 100%;
+                    height: 60px;
+                    background-color: var(--site-falcon-purple);
+                    border-radius: 15px 15px 0px 0px;
+                    border: 0px;
+                    justify-content: center;
+                    align-items: center;
+                    display: flex;
+                }
+
+                #form-title {
+                    font-family: Alexandria, sans-serif;
+                    font-weight: 400;
+                    font-size: 24px;
+                    color: white;
+                    text-align: center;
+                }
+
+                #form-content-container {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+
+                #input-name-container {
+                    margin-top: 50px;
+                    position: relative;
+                }
+
+                #input-name {
+                    height: 48px;
+                    width: 280px;
+                    border: 1px solid #c0c0c0;
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                    padding: 16px;
+                }
+
+                #label-input-name {
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 16px;
+                    display: flex;
+                    align-items: center;
+                    pointer-events: none;
+                }
+
+                #input-name, #label-input-name > div {
+                    font-family: Alexandria, sans-serif;
+                    font-weight: 300;
+                    font-size: 16px;
+                }
+
+                #label-input-name > div {
+                    transition: all 0.15s ease-out, visibility 0s;
+                    color: grey;
+                }
+
+                #input-name:focus {
+                    outline: none;
+                    border: 2px solid var(--site-falcon-purple);
+                }
+
+                #input-name:focus + #label-input-name > div, :not(#input-name[value=""]) + #label-input-name > div {
+                    font-size: 14px;
+                    transform: translate(0, -150%);
+                    background-color: white;
+                    padding-left: 4px;
+                    padding-right: 4px;
+                }
+
+                #input-name:focus + #label-input-name > div {
+                    color: var(--site-falcon-purple);
+                }
+            </style>
+
+            <div id="icon">
+                <img>
+            </div>
+
+            <div id="form">
+                <div id="form-header">
+                    <div id="form-title">
+                        New Ticket
+                    </div>
+                </div>
+                <div id="form-content-container">
+                    <div id="input-name-container">
+                        <input
+                            type="text"
+                            id="input-name"
+                            name="name"
+                            value=""
+                            aria-labelledby="label-input-name"
+                        />
+                        <label for="name" id="label-input-name">
+                            <div>Name</div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <script>
+            class XWidget extends HTMLElement {
+                #icon;
+                #form;
+                #location;
+                
+                #pointerDown;
+                #moving;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+                    let v = document.getElementById("x-widget-template").content.cloneNode(true);
+                    shadowRoot.appendChild(document.getElementById("x-widget-template").content.cloneNode(true));
+
+                    this.#icon = this.#createIcon();
+
+                    this.#form = this.#createForm();
+
+                    this.#pointerDown = false;
+                    this.#moving = false;
+                    this.#location = "bottom-right";
+                }
+
+                connectedCallback() {
+                    this.#render();
+                }
+
+                #render() {
+                    if (this.isConnected) {
+                        this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                        this.#renderForm({visibility: "hidden"});
+                    }
+                }
+
+                #createIcon() {
+                    let icon = this.shadowRoot.getElementById("icon");
+
+                    icon.openImgSrc = "icon_open.png";
+                    icon.closeImgSrc = "icon_close.png";
+
+                    icon.addEventListener("pointerdown", (e) => this.#onIconPointerDown(e));
+                    icon.addEventListener("pointermove", (e) => this.#onIconPointerMove(e));
+                    icon.addEventListener("pointerup", (e) => this.#onIconPointerUp(e));
+                    icon.addEventListener("pointerover", (e) => this.#onIconPointerOver(e));
+                    icon.addEventListener("pointerout", (e) => this.#onIconPointerOut(e));
+
+                    return icon;
+                }
+
+                #createForm() {
+                    let form = this.shadowRoot.getElementById("form");
+
+                    let inputName = this.shadowRoot.getElementById("input-name");
+                    inputName.addEventListener("input", (e) => this.#onNameInput(e));
+
+                    return form;
+                }
+
+                #renderIcon(parameters={}) {
+                    if (parameters["imgSrc"]) {
+                        this.#icon.querySelector("img").src = parameters["imgSrc"];
+                    }
+
+                    if (this.#location == "top-left") {
+                        removeClassByPrefix(this.#icon, "location");
+                        this.#icon.classList.add("location-top-left");
+                    } 
+                    else if (this.#location == "top-right") {
+                        removeClassByPrefix(this.#icon, "location");
+                        this.#icon.classList.add("location-top-right");
+                    } 
+                    else if (this.#location == "bottom-left") {
+                        removeClassByPrefix(this.#icon, "location");
+                        this.#icon.classList.add("location-bottom-left");
+                    } 
+                    else if (this.#location == "bottom-right") {
+                        removeClassByPrefix(this.#icon, "location");
+                        this.#icon.classList.add("location-bottom-right");
+                    }
+                }
+
+                #renderForm(parameters={}) {
+                    if (this.#location == "top-left") {
+                        removeClassByPrefix(this.#form, "location");
+                        this.#form.classList.add("location-top-left");
+                    } else if (this.#location == "top-right") {
+                        removeClassByPrefix(this.#form, "location");
+                        this.#form.classList.add("location-top-right");
+                    } else if (this.#location == "bottom-left") {
+                        removeClassByPrefix(this.#form, "location");
+                        this.#form.classList.add("location-bottom-left");
+                    } else if (this.#location == "bottom-right") {
+                        removeClassByPrefix(this.#form, "location");
+                        this.#form.classList.add("location-bottom-right");
+                    }
+
+                    // Not happy with how it fades in and out
+                    if (parameters["visibility"]) {
+                        if (parameters["visibility"] == "visible" && this.#form.style.visibility != "visible") {
+                            this.#form.style.visibility = "visible";
+
+                            if (parameters["animate"]) {
+                                this.#form.style.opacity = "1";
+                                this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                                this.#form.style.transitionDelay = "0s";
+                            }
+                            else {
+                                this.#form.style.transition = "";
+                            }
+                        }
+                        else if (parameters["visibility"] == "hidden" && this.#form.style.visibility != "hidden") {
+                            this.#form.style.visibility = "hidden";
+
+                            if (parameters["animate"]) {
+                                this.#form.style.opacity = "0";
+                                this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                            }
+                            else {
+                                this.#form.style.transition = "";
+                            }
+                        }
+                    }
+                }
+
+                #onNameInput(e) {
+                    let inputName = this.shadowRoot.getElementById("input-name");
+
+                    inputName.setAttribute('value', inputName.value);
+                }
+
+                #onIconPointerOver(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+
+                #onIconPointerOut(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+
+                #onIconPointerDown(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#pointerDown = true;
+
+                    this.#icon.setPointerCapture(e.pointerId);
+                }
+
+                #onIconPointerMove(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (this.#pointerDown) {
+                        this.#moving = true;
+                        this.#icon.style.cursor = "grabbing";
+                        this.#snapToCorner(e.clientX, e.clientY);
+                    }
+                    else {
+                        this.#icon.style.cursor = "pointer";
+                    }
+                }
+
+                #onIconPointerUp(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#icon.style.cursor = "pointer";
+
+                    if (!this.#moving) {
+                        if (this.#form.style.visibility == "visible") {
+                            this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                            this.#renderForm({visibility: "hidden", animate: true});
+                        } 
+                        else {
+                            this.#renderIcon({imgSrc: this.#icon.closeImgSrc});
+                            this.#renderForm({visibility: "visible", animate: true});
+                        }
+                    }
+                    else {
+                        this.#moving = false;
+                    }
+
+                    this.#pointerDown = false;
+
+                    this.#icon.releasePointerCapture(e.pointerId);
+                }
+
+                #snapToCorner(anchorX, anchorY) {
+                    let locationChanged = false;
+
+                    if (anchorX < window.innerWidth / 5) {
+                        if (this.#location != "top-left" && anchorY < window.innerHeight / 5) {
+                            this.#location = "top-left";
+                            locationChanged = true;
+                        }
+                        else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                            this.#location = "bottom-left";
+                            locationChanged = true;
+                        }
+                    }
+                    else if (anchorX > window.innerWidth - window.innerWidth / 5) {
+                        if (this.#location != "top-right" &&  anchorY < window.innerHeight / 5) {
+                            this.#location = "top-right";
+                            locationChanged = true;
+                        }
+                        else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                            this.#location = "bottom-right";
+                            locationChanged = true;
+                        }
+                    }
+
+                    if (locationChanged) {
+                        this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                        this.#renderForm({visibility: "hidden"});
+                    }
+                }
+            }
+
+            function removeClassByPrefix(el, prefix) {
+                if (!el.classList) {
+                    return;
+                }
+
+                let filteredClassList = [];
+
+                for (let i = 0; i < el.classList.length; i++) {
+                    if (!el.classList[i].startsWith(prefix)) {
+                        filteredClassList.push(el.classList[i])
+                    }
+                }
+
+                el.classList = filteredClassList;
+            }
+
+            customElements.define("x-widget", XWidget);
+            document.body.appendChild(document.createElement("x-widget"));
+        </script>
+    </body>
+</html> 
\ No newline at end of file
diff --git a/old/CornerSnap.html b/old/CornerSnap.html
new file mode 100644
index 0000000..cc3f281
--- /dev/null
+++ b/old/CornerSnap.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+  
+<head>
+</head>
+  
+<body>
+    <div>
+        <style>
+            p {
+                font-size: 24;
+            }
+        </style>
+        <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        v
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+    </div>
+
+    <div id="widget" style="position: fixed; top: 0px; left: 0px; width: 100px; height: 100px; background-color: red;"></div>
+
+    <script type="text/javascript">
+        let widget = document.getElementById("widget");
+
+        let isDown = false;
+
+        function onMouseDown(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            isDown = true;
+
+            this.setPointerCapture(e.pointerId);
+        }
+
+        function setCorner(anchorX, anchorY, element) {
+            let offsets = element.getBoundingClientRect();
+
+            if (anchorX < window.innerWidth / 2){
+                // left half
+                if (anchorY < window.innerHeight / 2) {
+                    // top left
+                    element.style.left = "0px";
+                    element.style.top = "0px";
+                }
+                else {
+                    // bottom left
+                    element.style.left = "0px";
+                    element.style.top = window.innerHeight - offsets.height + "px";
+                }
+            }
+            else {
+                // right half
+                if (anchorY < window.innerHeight / 2) {
+                    // top right
+                    element.style.left = window.innerWidth - offsets.width + "px";4
+                    element.style.top = "0px";
+                }
+                else {
+                    // bottom right
+                    element.style.left = window.innerWidth - offsets.width + "px";
+                    element.style.top = window.innerHeight - offsets.height + "px";  
+                }
+            }
+        }
+
+        function onMouseMove(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (isDown) {
+                setCorner(e.clientX, e.clientY, this);
+            }
+        }
+
+        function onMouseUp(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            isDown = false;
+
+            this.releasePointerCapture(e.pointerId);
+        }
+
+        function onMouseLeave(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            if (isDown) {
+                
+            }
+        }
+
+        widget.addEventListener("pointerdown", onMouseDown);
+        widget.addEventListener("pointermove", onMouseMove);
+        widget.addEventListener("pointerleave", onMouseLeave);
+        widget.addEventListener("pointerup", onMouseUp);
+
+        window.addEventListener("resize", () => {
+            let offsets = widget.getBoundingClientRect();
+            setCorner(offsets.left, offsets.top, widget);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/old/Screenshot.html b/old/Screenshot.html
new file mode 100644
index 0000000..635eb97
--- /dev/null
+++ b/old/Screenshot.html
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html>
+  
+<head>
+    <script src=
+"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
+    </script>
+</head>
+  
+<body>
+    <div>
+        <style>
+            p {
+                font-size: 24;
+            }
+        </style>
+
+        <img />
+
+        <button id="snapshot-button">Take snapshot</button>
+
+        <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+        <!-- <img width="400px" height="700px" src="alley.jpg" /> -->
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        v
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+    </div>
+
+    <script type="text/javascript">
+        let canvas = document.createElement("canvas");
+        document.body.appendChild(canvas);
+        canvas.style = "position: fixed; top: 0px; left: 0px; cursor: crosshair;";
+
+        function setCanvasDimensions(canvas) {
+            let bodyMarginLeft = window.getComputedStyle(document.body).getPropertyValue('margin-left');
+            let bodyMarginRight = window.getComputedStyle(document.body).getPropertyValue('margin-right');
+            if (bodyMarginLeft || bodyMarginRight) {
+                canvas.width = document.body.offsetWidth + parseInt(bodyMarginLeft) + parseInt(bodyMarginRight);
+            }
+            else {
+                canvas.width = document.body.offsetWidth;
+            }
+            
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            canvas.hidden = true;
+        }
+
+        setCanvasDimensions(canvas);
+        window.addEventListener("resize", () => setCanvasDimensions(canvas))
+
+        let ctx = canvas.getContext("2d");
+
+        let hiddenCanvas = document.createElement("canvas");
+        document.body.appendChild(hiddenCanvas);
+
+        hiddenCanvas.hidden = true;
+
+        let hiddenCtx = hiddenCanvas.getContext("2d");
+
+        let initialX;
+        let initialY;
+
+        let isDown = false;
+
+        function onMouseDown(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            initialX = e.offsetX;
+            initialY = e.offsetY;
+
+            isDown = true;
+
+            this.setPointerCapture(e.pointerId);
+        }
+
+        function onMouseMove(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (isDown) {
+                let offsetX;
+                let offsetY;
+
+                if (e.offsetX < 0) {
+                    offsetX = 0;
+                }
+                else if (e.offsetX > canvas.width - 1) {
+                    offsetX = canvas.width - 1;
+                }
+                else {
+                    offsetX = e.offsetX;
+                }
+
+                if (e.offsetY < 0) {
+                    offsetY = 0;
+                }
+                else if (e.offsetY > canvas.height - 1) {
+                    offsetY = canvas.height - 1;
+                }
+                else {
+                    offsetY = e.offsetY;
+                }
+
+                let width = offsetX - initialX;
+                let height = offsetY - initialY;
+
+                setCanvas();
+                ctx.beginPath();
+                ctx.clearRect(initialX, initialY, width, height);
+                ctx.rect(initialX, initialY, width, height);
+                ctx.stroke();
+                ctx.closePath();
+            }
+        }
+
+        async function onMouseUp(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (isDown) {
+                let offsetX;
+                let offsetY;
+
+                if (e.offsetX < 0) {
+                    offsetX = 0;
+                }
+                else if (e.offsetX > canvas.width - 1) {
+                    offsetX = canvas.width - 1;
+                }
+                else {
+                    offsetX = e.offsetX;
+                }
+
+                if (e.offsetY < 0) {
+                    offsetY = 0;
+                }
+                else if (e.offsetY > canvas.height - 1) {
+                    offsetY = canvas.height - 1;
+                }
+                else {
+                    offsetY = e.offsetY;
+                }
+
+                unloadCanvas();
+                this.releasePointerCapture(e.pointerId);
+
+                if (Math.abs(offsetX - initialX) > 10 && Math.abs(offsetY - initialY) > 10) {
+                    await takeScreenshot(offsetX, offsetY);
+                }
+
+                initialX = null;
+                initialY = null;
+                isDown = false;
+            }
+        }
+
+        function onMouseLeave(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            if (isDown) {
+                
+            }
+        }
+
+        async function takeScreenshot(offsetX, offsetY) {
+            let width = offsetX - initialX;
+            let height = offsetY - initialY;
+            let offsetInitialX = initialX;
+            let offsetInitialY = initialY;
+
+            if (width < 0) {
+                width = width * -1;
+                offsetInitialX = initialX - width;
+            }
+
+            if (height < 0) {
+                height = height * -1;
+                offsetInitialY = initialY - height;
+            }
+
+            let documentCanvas;
+
+            await html2canvas(document.body, {
+                logging: true, 
+                letterRendering: 1, 
+                allowTaint: true,
+                useCORS: true 
+            }).then(
+                function (canvas) {
+                    console.log("nice")
+                    documentCanvas = canvas;
+            });
+
+            return;
+
+            hiddenCanvas.width = width;
+            hiddenCanvas.height = height;
+            hiddenCtx.drawImage(documentCanvas, offsetInitialX, offsetInitialY, width, height, 0, 0, width, height);
+
+            let base64image = canvas.toDataURL("image/png");
+            console.log(base64image);
+
+            hiddenCtx.clearRect(0, 0, hiddenCanvas.width, hiddenCanvas.height);
+
+            hiddenCanvas.width = 0;
+            hiddenCanvas.height = 0;
+        }
+
+        function setCanvas() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            ctx.globalAlpha = 0.5;
+            ctx.fillStyle = "white";
+            ctx.beginPath();
+            ctx.rect(0, 0, canvas.width, canvas.height);
+            ctx.fill();
+            ctx.closePath();
+            
+            setBrush();
+        }
+
+        function setBrush() {
+            ctx.globalAlpha = 1;
+            ctx.strokeStyle = 'red';
+        }
+        
+        canvas.addEventListener("pointerdown", onMouseDown);
+        canvas.addEventListener("pointermove", onMouseMove);
+        canvas.addEventListener("pointerleave", onMouseLeave);
+        canvas.addEventListener("pointerup", onMouseUp);
+
+        function loadCanvas() {
+            setCanvas();
+            canvas.hidden = false;
+        }
+
+        function unloadCanvas() {
+            setCanvas();
+            canvas.hidden = true;
+        }
+
+        let snapshotButton = document.getElementById("snapshot-button");
+
+        snapshotButton.addEventListener("click", () => { loadCanvas() });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/old/ScreenshotTest.html b/old/ScreenshotTest.html
new file mode 100644
index 0000000..299bd85
--- /dev/null
+++ b/old/ScreenshotTest.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <script src=
+        "https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
+    </script>
+</head>
+<body>
+    <div id="capture" style="padding: 10px; background: #f5da55">
+        <h4 style="color: #000; ">Hello wytorld!</h4>
+        <img width="400px" height="700px" src="alley.jpg" />
+    </div>
+
+    <script type="text/javascript">
+        async function Do() {
+            await html2canvas(document.body)
+            .then(
+                function (canvas) {
+                    document.body.appendChild(canvas);
+                });
+        }
+
+        Do();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/old/Widget.html b/old/Widget.html
new file mode 100644
index 0000000..93b01dd
--- /dev/null
+++ b/old/Widget.html
@@ -0,0 +1,197 @@
+<html>
+    <head>
+
+    </head>
+
+    <body>
+        <div>
+            <style>
+                p {
+                    font-size: 24;
+                }
+            </style>
+    
+            <img />
+    
+            <button id="snapshot-button">Take snapshot</button>
+    
+            <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+    
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+    
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            v
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+        </div>
+
+        <x-widget></x-widget>
+
+        <script>
+            class XWidget extends HTMLElement {
+                frame;
+                icon;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    let frame = document.createElement("div");
+                    frame.style.position = "fixed";
+                    frame.style.top = "0px";
+                    frame.style.left = "0px";
+                    frame.style.right = "0px";
+                    frame.style.bottom = "0px";
+                    frame.style.border = "5px dotted blue";
+                    shadowRoot.append(frame);
+                    this.frame = frame;
+
+                    let icon = document.createElement("x-widget-icon");
+                    this.frame.appendChild(icon);
+                    this.icon = icon;
+                }
+
+                connectedCallback() {
+                }
+            }
+
+            class XWidgetIcon extends HTMLElement {
+                iconContainer;
+                isPressed;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    let iconContainer = document.createElement("div");
+                    shadowRoot.append(iconContainer);
+                    this.iconContainer = iconContainer;
+                }
+
+                connectedCallback() {
+                    this.#render();
+
+                    this.isPressed = false;
+
+                    this.iconContainer.addEventListener("pointerdown", (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        this.isPressed = true;
+
+                        this.iconContainer.setPointerCapture(e.pointerId);
+                    });
+
+                    this.iconContainer.addEventListener("pointermove", (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        if (this.isPressed) {
+                            this.#snapToCorner();
+                        }
+                    });
+
+                    this.iconContainer.addEventListener("pointerleave", (e) => {
+                        if (this.isPressed) {
+                            
+                        }
+                    });
+
+                    this.iconContainer.addEventListener("pointerup", (e) => {
+                        this.isPressed = false;
+
+                        this.iconContainer.releasePointerCapture(e.pointerId);
+                    });
+                }
+
+                #render() {
+                    this.iconContainer.style.position = "fixed";
+                    this.iconContainer.style.bottom = "0px";
+                    this.iconContainer.style.right = "0px";
+                    this.iconContainer.style.width = "50px";
+                    this.iconContainer.style.height = "50px";
+                    this.iconContainer.style.backgroundColor = "red";
+                }
+
+                #snapToCorner(x, y) {
+                    let maxWidth = window.innerWidth;
+                    let maxHeight = window.innerHeight;
+
+                    if (x < maxWidth / 2){
+                        // left half
+                        if (y < maxHeight / 2) {
+                            // top left
+                            this.style.left = "0px";
+                            this.style.top = "0px";
+                            this.style.bottom = null;
+                            this.style.right = null;
+                        }
+                        else {
+                            // bottom left
+                            this.style.left = "0px";
+                            this.style.top = null;
+                            this.style.bottom = "0px";
+                            this.style.right = null;
+                        }
+                    }
+                    else {
+                        // right half
+                        if (y < maxHeight / 2) {
+                            // top right
+                            this.style.left = null;
+                            this.style.top = "0px";
+                            this.style.bottom = null;
+                            this.style.right = "0px";
+                        }
+                        else {
+                            // bottom right
+                            this.style.left = null;
+                            this.style.top = null;
+                            this.style.bottom = "0px";
+                            this.style.right = "0px";
+                        }
+                    }
+                }
+            }
+
+            customElements.define("x-widget", XWidget);
+            customElements.define("x-widget-icon", XWidgetIcon);
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/old/WidgetNew.html b/old/WidgetNew.html
new file mode 100644
index 0000000..7a3d165
--- /dev/null
+++ b/old/WidgetNew.html
@@ -0,0 +1,131 @@
+<html>
+    <head>
+
+    </head>
+
+    <body>
+        <div>
+            <style>
+                p {
+                    font-size: 24;
+                }
+            </style>
+    
+            <img />
+    
+            <button id="snapshot-button">Take snapshot</button>
+    
+            <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+    
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+    
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            v
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+        </div>
+
+        <x-widget></x-widget>
+
+        <script>
+            class XWidget extends HTMLElement {
+                frame;
+                icon;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    let frame = document.createElement("div");
+                    frame.style.position = "fixed";
+                    frame.style.top = "0px";
+                    frame.style.left = "0px";
+                    frame.style.right = "0px";
+                    frame.style.bottom = "0px";
+                    frame.style.border = "5px dotted blue";
+                    shadowRoot.append(frame);
+                    this.frame = frame;
+
+                    let icon = document.createElement("x-widget-icon");
+                    this.frame.appendChild(icon);
+                    this.icon = icon;
+
+                    frame.addEventListener("click", (e) => { 
+                        if (e.target == icon) {
+                            console.log("Clicked on icon");
+                        }
+                    });
+                }
+
+                connectedCallback() {
+                }
+            }
+
+            class XWidgetIcon extends HTMLElement {
+                iconContainer;
+                isPressed;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    let iconContainer = document.createElement("div");
+                    shadowRoot.append(iconContainer);
+                    this.iconContainer = iconContainer;
+                }
+
+                connectedCallback() {
+                    this.#render();
+                }
+
+                #render() {
+                    this.iconContainer.style.position = "fixed";
+                    this.iconContainer.style.bottom = "0px";
+                    this.iconContainer.style.right = "0px";
+                    this.iconContainer.style.width = "50px";
+                    this.iconContainer.style.height = "50px";
+                    this.iconContainer.style.backgroundColor = "red";
+                }
+            }
+
+            customElements.define("x-widget", XWidget);
+            customElements.define("x-widget-icon", XWidgetIcon);
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/old/implementationold.html b/old/implementationold.html
new file mode 100644
index 0000000..d7c7ee0
--- /dev/null
+++ b/old/implementationold.html
@@ -0,0 +1,406 @@
+<html>
+    <head>
+    </head>
+    <body>
+        <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+    
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        v
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <template>
+            <h1>yeehaw</h1>
+        </template>
+
+        <script>
+            loadExternalStyles();
+
+            function loadExternalStyles() {
+                let gfPreconnectLink = document.createElement("link");
+                gfPreconnectLink.setAttribute("rel", "preconnect");
+                gfPreconnectLink.setAttribute("href", "https://fonts.googleapis.com");
+                document.head.appendChild(gfPreconnectLink);
+
+                let gfPreconnectCOLink = document.createElement("link");
+                gfPreconnectCOLink.setAttribute("rel", "preconnect");
+                gfPreconnectCOLink.setAttribute("href", "https://fonts.gstatic.com");
+                gfPreconnectCOLink.setAttribute("crossorigin", true);
+                document.head.appendChild(gfPreconnectCOLink);
+
+                let gfLink = document.createElement("link");
+                gfLink.setAttribute("rel", "stylesheet");
+                gfLink.setAttribute("href", "https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap");
+                document.head.appendChild(gfLink);
+            }
+
+            class XWidget extends HTMLElement {
+                #icon;
+                #form;
+                #location;
+
+                #margin;
+                
+                #pointerDown;
+                #moving;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    this.#icon = this.#createIcon();
+                    shadowRoot.appendChild(this.#icon)
+
+                    this.#form = this.#createForm();
+                    shadowRoot.appendChild(this.#form);
+
+                    this.#margin = "20px";
+                    this.#pointerDown = false;
+                    this.#moving = false;
+                    this.#location = "bottom-right";
+                }
+
+                connectedCallback() {
+                    this.#render();
+                }
+
+                #render() {
+                    if (this.isConnected) {
+                        this.#renderIcon({width: "60px", height: "60px", imgSrc: this.#icon.openImgSrc});
+                        this.#renderForm({visibility: "hidden"});
+                    }
+                }
+
+                #createIcon() {
+                    let icon = document.createElement("div");
+
+                    icon.openImgSrc = "icon_open.png";
+                    icon.closeImgSrc = "icon_close.png";
+
+                    icon.addEventListener("pointerdown", (e) => this.#onIconPointerDown(e));
+                    icon.addEventListener("pointermove", (e) => this.#onIconPointerMove(e));
+                    icon.addEventListener("pointerup", (e) => this.#onIconPointerUp(e));
+                    icon.addEventListener("pointerover", (e) => this.#onIconPointerOver(e));
+                    icon.addEventListener("pointerout", (e) => this.#onIconPointerOut(e));
+
+                    let iconImage = document.createElement("img");
+                    iconImage.style.width = "100%";
+                    iconImage.style.height = "100%";
+                    icon.appendChild(iconImage)
+
+                    return icon;
+                }
+
+                #createForm() {
+                    let form = document.createElement("div");
+
+                    let header = document.createElement("div");
+                    header.id = "form-header";
+                    form.appendChild(header);
+
+                    let title = document.createElement("div");
+                    title.id = "form-title";
+                    header.appendChild(title);
+
+                    // let headerBottom = document.createElement("hr");
+                    // headerBottom.id = "form-header-bottom";
+                    // form.appendChild(headerBottom);
+
+                    // let nameInput = document.createElement("input");
+                    // nameInput.id = "name-input";
+                    // form.appendChild(nameInput);
+
+                    // let commentInput = document.createElement("textarea");
+                    // commentInput.id = "comment-input";
+                    // form.appendChild(commentInput);
+
+                    return form;
+                }
+
+                #renderIcon(parameters={}) {
+                    this.#icon.style.position = "fixed";
+                    this.#icon.style.transition = "scale 0.2s ease";
+
+                    if (parameters["width"]) {
+                        this.#icon.style.width = parameters["width"];
+                    }
+
+                    if (parameters["height"]) {
+                        this.#icon.style.height = parameters["height"];
+                    }
+
+                    if (parameters["scale"]) {
+                        this.#icon.style.scale = parameters["scale"];
+                    }
+
+                    if (parameters["imgSrc"]) {
+                        this.#icon.querySelector("img").src = parameters["imgSrc"];
+                    }
+
+                    if (this.#location == "top-left") {
+                        this.#icon.style.left = this.#margin;
+                        this.#icon.style.top = this.#margin;
+                        this.#icon.style.bottom = "auto";
+                        this.#icon.style.right = "auto";
+                    } else if (this.#location == "top-right") {
+                        this.#icon.style.left = "auto";
+                        this.#icon.style.top = this.#margin;
+                        this.#icon.style.bottom = "auto";
+                        this.#icon.style.right = this.#margin;
+                    } else if (this.#location == "bottom-left") {
+                        this.#icon.style.left = this.#margin;
+                        this.#icon.style.top = "auto";
+                        this.#icon.style.bottom = this.#margin;
+                        this.#icon.style.right = "auto";
+                    } else if (this.#location == "bottom-right") {
+                        this.#icon.style.left = "auto";
+                        this.#icon.style.top = "auto";
+                        this.#icon.style.bottom = this.#margin;
+                        this.#icon.style.right = this.#margin;
+                    }
+                }
+
+                #renderForm(parameters={}) {
+                    this.#form.style.width = "350px";
+                    this.#form.style.height = "500px";
+                    this.#form.style.backgroundColor = "white";
+                    this.#form.style.border = "0px";
+                    this.#form.style.borderRadius = "10px 10px 10px 10px"
+                    this.#form.style.boxShadow = "0 4px 16px rgb(0 0 0 / 25%)";
+                    this.#form.style.borderRadius = "15px";
+                    this.#form.style.position = "fixed";
+                    this.#form.style.opacity = "0";
+
+                    if (this.#location == "top-left") {
+                        this.#form.style.left = this.#margin;
+                        this.#form.style.top = this.#icon.clientHeight + 50 + "px";
+                        this.#form.style.bottom = "auto";
+                        this.#form.style.right = "auto";
+                    } else if (this.#location == "top-right") {
+                        this.#form.style.left = "auto";
+                        this.#form.style.top = this.#icon.clientHeight + 50 + "px";
+                        this.#form.style.bottom = "auto";
+                        this.#form.style.right = this.#margin;
+                    } else if (this.#location == "bottom-left") {
+                        this.#form.style.left = this.#margin;
+                        this.#form.style.top = "auto";
+                        this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
+                        this.#form.style.right = "auto";
+                    } else if (this.#location == "bottom-right") {
+                        this.#form.style.left = "auto";
+                        this.#form.style.top = "auto";
+                        this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
+                        this.#form.style.right = this.#margin;
+                    }
+
+                    if (parameters["visibility"]) {
+                        // This animation feels messy - especially since opacity is always declared above as 0
+                        if (parameters["visibility"] == "visible" && this.#form.style.visibility != "visible") {
+                            this.#form.style.visibility = "visible";
+
+                            if (parameters["animate"]) {
+                                this.#form.style.opacity = "1";
+                                this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                                this.#form.style.transitionDelay = "0s";
+                            }
+                            else {
+                                this.#form.style.transition = "";
+                            }
+                        }
+                        else if (parameters["visibility"] == "hidden" && this.#form.style.visibility != "hidden") {
+                            this.#form.style.visibility = "hidden";
+
+                            if (parameters["animate"]) {
+                                this.#form.style.opacity = "0";
+                                this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                            }
+                            else {
+                                this.#form.style.transition = "";
+                            }
+                        }
+                    }
+
+                    let header = this.#form.querySelector("#form-header");
+                    header.style.top = "0px";
+                    header.style.width = "100%";
+                    header.style.height = "60px";
+                    header.style.backgroundColor = "#AE55E7";
+                    header.style.borderRadius = "15px 15px 0px 0px";
+                    header.style.border = "0px";
+                    header.style.justifyContent = "center";
+                    header.style.alignItems = "center";
+                    header.style.display = "flex";
+
+                    // let headerBottom = this.#form.querySelector("#form-header-bottom");
+                    // headerBottom.style.width = "100%";
+                    // headerBottom.style.height = "10px";
+                    // headerBottom.style.backgroundColor = "#AE55E7";
+                    // headerBottom.style.margin = "0px";
+                    // headerBottom.style.border = "0px";
+                    // headerBottom.style.boxShadow = "0 0 26px -2px rgba(0, 0, 0, 0.5)";
+                    // headerBottom.style.clipPath = "polygon(0% 0%, 100% 0%, 100% 500%, 0% 500%)";
+
+                    let title = this.#form.querySelector("#form-title");
+                    title.textContent = "New Ticket";
+                    title.style.fontFamily = "Alexandria, sans-serif";
+                    title.style.fontWeight = "400";
+                    title.style.fontSize = "24px";
+                    title.style.color = "white";
+                    title.style.textAlign = "center";
+
+                    // let nameInput = this.#form.querySelector("#name-input");
+                    // nameInput.setAttribute("type", "text");
+                    // nameInput.setAttribute("placeholder", "Name");
+                    // nameInput.style.fontFamily = "Alexandria, sans-serif";
+                    // nameInput.style.fontWeight = "300";
+                    // nameInput.style.fontSize = "12px";
+
+                    // let commentInput = this.#form.querySelector("#comment-input");
+                    // commentInput.setAttribute("resize", "none");
+                    // commentInput.setAttribute("overflow-y", "scroll");
+                    // commentInput.setAttribute("rows", "15");
+                    // commentInput.setAttribute("cols", "30");
+                }
+
+                #onIconPointerOver(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#renderIcon({scale: 1.05});
+                }
+
+                #onIconPointerOut(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#renderIcon({scale: 1});
+                }
+
+                #onIconPointerDown(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#pointerDown = true;
+
+                    this.#icon.setPointerCapture(e.pointerId);
+                }
+
+                #onIconPointerMove(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#icon.style.cursor = "pointer";
+
+                    if (this.#pointerDown) {
+                        this.#moving = true;
+                        this.#icon.style.cursor = "grabbing";
+                        this.#snapToCorner(e.clientX, e.clientY);
+                    }
+                }
+
+                #onIconPointerUp(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#icon.style.cursor = "pointer";
+
+                    if (!this.#moving) {
+                        if (this.#form.style.visibility == "visible") {
+                            this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                            this.#renderForm({visibility: "hidden", animate: true});
+                        } 
+                        else {
+                            this.#renderIcon({imgSrc: this.#icon.closeImgSrc});
+                            this.#renderForm({visibility: "visible", animate: true});
+                        }
+                    }
+                    else {
+                        this.#moving = false;
+                    }
+
+                    this.#pointerDown = false;
+
+                    this.#icon.releasePointerCapture(e.pointerId);
+                }
+
+                #toggleDisplayForm() {
+                    let visibility = 
+                        this.#form.style.visibility == "visible" ?
+                        "hidden" : "visible";
+
+                    this.#renderForm({visibility: visibility})
+                }
+
+                #snapToCorner(anchorX, anchorY) {
+                    let locationChanged = false;
+
+                    if (anchorX < window.innerWidth / 5) {
+                        if (this.#location != "top-left" && anchorY < window.innerHeight / 5) {
+                            this.#location = "top-left";
+                            locationChanged = true;
+                        }
+                        else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                            this.#location = "bottom-left";
+                            locationChanged = true;
+                        }
+                    }
+                    else if (anchorX > window.innerWidth - window.innerWidth / 5) {
+                        if (this.#location != "top-right" &&  anchorY < window.innerHeight / 5) {
+                            this.#location = "top-right";
+                            locationChanged = true;
+                        }
+                        else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                            this.#location = "bottom-right";
+                            locationChanged = true;
+                        }
+                    }
+
+                    if (locationChanged) {
+                        this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                        this.#renderForm({visibility: "hidden"});
+                    }
+                }
+            }
+
+            customElements.define("b6d215dc-03ff-4ca5-bc48-879e821a07f0", XWidget);
+            document.body.appendChild(document.createElement("b6d215dc-03ff-4ca5-bc48-879e821a07f0"));
+        </script>
+    </body>
+</html> 
\ No newline at end of file