diff --git a/.gitmodules b/.gitmodules
index 474978f..e69de29 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,6 +0,0 @@
-[submodule "Sniffle"]
- path = Sniffle
- url = https://github.com/Fluffy-Bean/Sniffle.git
-[submodule "Flyout"]
- path = Flyout
- url = https://github.com/Fluffy-Bean/Flyout.git
diff --git a/Flyout b/Flyout
deleted file mode 160000
index 57d63d7..0000000
--- a/Flyout
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 57d63d741f57eaaa8b863b1ecd5d6df8c1d00834
diff --git a/Flyout/.flyout.css.swp b/Flyout/.flyout.css.swp
new file mode 100644
index 0000000..c092334
Binary files /dev/null and b/Flyout/.flyout.css.swp differ
diff --git a/Flyout/flyout.css b/Flyout/flyout.css
new file mode 100644
index 0000000..44b04c9
--- /dev/null
+++ b/Flyout/flyout.css
@@ -0,0 +1,51 @@
+.flyout-dim {
+ width: 100vw; height: 100vh;
+
+ display: none;
+
+ position: fixed; z-index: 99;
+
+ object-position: center;
+
+ background-color: #151515aa;
+
+ opacity: 0;
+
+ transition: opacity 1s cubic-bezier(.19,1,.22,1), filter 1s cubic-bezier(.19,1,.22,1);
+}
+
+.flyout {
+ margin: 0; padding: 0.5rem;
+
+ max-width: 621px; width: calc(100% - 3.5rem);
+ max-height: 20rem; height: auto; min-height: 10rem;
+
+ position: fixed; z-index: 99999;
+ left: 50%; bottom: -15rem;
+ transform: translateX(-50%) scale(0.5);
+
+ background-color: #151515;
+ color: white;
+
+ transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1);
+
+ border-radius: var(--rad);
+ border: 0.2rem solid var(--green);
+ outline: 0.5rem solid var(--bg);
+}
+
+.flyout-header {
+ font-size: 20px;
+}
+
+.flyout-actionbox {
+ display: inline;
+ box-sizing: border-box;
+}
+/* Worlds shittest workaround to a problem I have no clue how to fix */
+.flyout-actionbox * {
+ width: 100%;
+}
+.flyout-actionbox * * {
+ width: auto;
+}
diff --git a/Flyout/flyout.js b/Flyout/flyout.js
new file mode 100644
index 0000000..af75cbc
--- /dev/null
+++ b/Flyout/flyout.js
@@ -0,0 +1,50 @@
+$(document).ready(function() {
+ var flyoutRoot = document.getElementById("#flyoutRoot");
+ var flyoutDim = document.getElementById("#flyoutDim");
+
+ var flyoutHeader = document.getElementById("#flyoutHeader");
+ var flyoutDescription = document.getElementById("#flyoutDescription");
+ var flyoutActionbox = document.getElementById("#flyoutActionbox");
+});
+
+function flyoutShow(header, description, actionbox) {
+ // Checking if actionbox is set
+ if (typeof actionbox === 'undefined') {
+ flyoutActionbox.style.display = "none";
+ } else if (actionbox == "") {
+ flyoutActionbox.style.display = "none";
+ } else {
+ flyoutActionbox.style.display = "block";
+ }
+
+ // Set information in flyout
+ flyoutHeader.textContent = header;
+ flyoutDescription.textContent = description;
+ flyoutActionbox.innerHTML = actionbox;
+
+ // Show the flyout
+ flyoutRoot.style.display = "flex";
+ // Show the dim
+ flyoutDim.style.display = "block";
+ setTimeout(function(){
+ // Show the flyout
+ flyoutRoot.style.transform = "translateX(-50%) scale(1)";
+ flyoutRoot.style.bottom = "1rem";
+ // Show the dim
+ flyoutDim.style.opacity = "1";
+ }, 1);
+};
+
+function flyoutClose() {
+ // Hide the flyout
+ flyoutRoot.style.transform = "translateX(-50%) scale(0.5)";
+ flyoutRoot.style.bottom = "-20rem";
+ // Hide the dim
+ flyoutDim.style.opacity = "0";
+ setTimeout(function(){
+ // Hide the flyout
+ flyoutRoot.style.display = "none";
+ // Hide the dim
+ flyoutDim.style.display = "none";
+ }, 500);
+};
diff --git a/Sniffle b/Sniffle
deleted file mode 160000
index 471cd36..0000000
--- a/Sniffle
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 471cd363a78fd2b73d960211a33829bada62e849
diff --git a/Sniffle/sniffle.css b/Sniffle/sniffle.css
new file mode 100644
index 0000000..f55b256
--- /dev/null
+++ b/Sniffle/sniffle.css
@@ -0,0 +1,112 @@
+/*
+ Sniffle CSS
+
+ Written simply for easy changing!
+*/
+
+
+/*
+ Base notification stacking
+
+ It allows for the notifications to stack simply
+ Due to div having no height initself there is no
+ reason in hiding it when no notifications are showing
+*/
+.sniffle {
+ margin: 0; padding: 0 1rem;
+
+ max-width: 621px; width: calc(100% - 1rem);
+
+ top: 0.5rem; left: 50%;
+ transform: translateX(-50%);
+
+ position: fixed; z-index: 999;
+}
+
+/*
+ Notification body
+
+ It contains 2 child elements,
+ am image .sniffle-img
+ and a text div .sniffle-content
+*/
+.sniffle-notification {
+ margin-bottom: 1rem; padding: 0.5rem;
+
+ max-width: calc(100% - 1rem); min-height: 2.5rem;
+
+ display: flex; flex-direction: row; overflow-y: hidden;
+
+ z-index: 999;
+
+ background-color: #151515;
+
+ box-shadow: 5px 5px 5px #151515aa;
+
+ transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);
+
+ border-radius: var(--rad);
+}
+.sniffle-notification:hover {
+ transform: scale(1.05);
+
+ cursor: pointer;
+}
+
+
+/*
+ Notification content Root
+
+ Overflow is hidden incase the description of the message is too long too display
+ And to prevent text from overflowing the notification
+*/
+.sniffle-content {
+ margin: 0 auto;
+
+ width: calc(100% - 3.5rem);
+ flex-direction: column; flex-wrap: wrap;
+
+ overflow-y: hidden;
+}
+
+/*
+ Notification icon/image
+*/
+.sniffle-img {
+ margin-right: 1rem;
+
+ max-width: 2.5rem; width: auto;
+ height: auto;
+
+ object-fit: contain;
+}
+/*
+ Notification header
+*/
+.sniffle-header {
+ margin: 0 0 0.25rem 0; padding: 0;
+
+ font-size: 16px;
+ font-weight: bold;
+
+ color: var(--fg);
+}
+/*
+ Notification description
+*/
+.sniffle-description {
+ margin: 0; padding: 0;
+ font-size: 14px;
+
+ word-wrap: break-word;
+ font-weight: bold;
+
+ color: var(--fg);
+}
+.sniffle-description::after {
+ content: '\A Click\00A0 to\00A0 dissmiss';
+
+ white-space: pre;
+
+ opacity: 0.6;
+}
diff --git a/Sniffle/sniffle.js b/Sniffle/sniffle.js
new file mode 100644
index 0000000..111e4b3
--- /dev/null
+++ b/Sniffle/sniffle.js
@@ -0,0 +1,52 @@
+/*
+ Close notification
+ Used by the notifications themself, don't use in code
+*/
+function sniffleClose(a) {
+ a.closest(".sniffle-notification").style.transform="translateY(-20rem) scale(0.8)";
+ a.closest(".sniffle-notification").style.opacity="0";
+
+ setTimeout(function(){
+ a.closest(".sniffle-notification").style.display="none";
+ a.remove()
+ }, 200);
+};
+
+
+/*
+ Add notification
+
+ Header > Required
+ Takes in String input
+
+ Description > Required
+ Takes in String input
+
+ Img > Optional
+ Takes in String input
+*/
+function sniffleAdd(header, description, colour, img) {
+ // Colour is optional, so check if it was added or not
+ if (typeof colour === 'undefined') {
+ colour = '';
+ } else {
+ colour = `style="background-color:${colour};"`;
+ }
+
+ // Image is optional, so check if it was added or not
+ if (typeof img === 'undefined') {
+ img = '';
+ } else {
+ img = `
`;
+ }
+
+ var newSniffle = `\
+ ${img}\
+
\
+ \
+
${description}
\
+
\
+